From 6ca0695cdcd54f80a6d50264e55aff7bc351a5e4 Mon Sep 17 00:00:00 2001
From: Pooja Patel <pooja724patel@gmail.com>
Date: Fri, 2 Sep 2022 16:42:57 +0530
Subject: [PATCH 1/6] Implemented images

---
 documentation/components/images.md | 54 ++++++++++++++++++++++++++++++
 src/components.pcss                |  3 +-
 src/components/images.pcss         | 15 +++++++++
 3 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 documentation/components/images.md
 create mode 100644 src/components/images.pcss

diff --git a/documentation/components/images.md b/documentation/components/images.md
new file mode 100644
index 0000000..97c2ef1
--- /dev/null
+++ b/documentation/components/images.md
@@ -0,0 +1,54 @@
+---
+layout: default
+title: Images
+parent: Components
+nav_order: 5
+permalink: /components/images
+---
+
+# Images
+
+## Squared Image
+<div>
+    <img src="../documentation/_site/assets/logo-vertical.svg" alt="">
+</div>
+
+~~~html
+<div>
+    <img src="../documentation/_site/assets/logo-vertical.svg" alt="">
+</div>
+~~~
+
+## Rounded Corners 
+<div class="container">
+    <img src="images/dinosaur.jpg" class="round-corners"
+     alt="">
+</div>
+~~~html
+<div class="container">
+    <img src="images/dinosaur.jpg" class="round-corners"
+     alt="">
+</div>
+~~~
+
+## Circle Image 
+<div class="container">
+    <img src="images/dinosaur.jpg" class="circle-image"
+     alt="">
+</div>
+~~~html
+<div class="container">
+    <img src="images/dinosaur.jpg" class="circle-image"
+     alt="">
+</div>
+~~~
+
+## Hover Effects
+<div class="container">
+    <img src="images/dinosaur.jpg" class="hover:scale-105" alt="">
+</div>
+~~~html
+<div class="container">
+    <img src="images/dinosaur.jpg" class="hover:scale-105" alt="">
+</div>
+~~~
\ No newline at end of file
diff --git a/src/components.pcss b/src/components.pcss
index 2326223..030381a 100644
--- a/src/components.pcss
+++ b/src/components.pcss
@@ -1,3 +1,4 @@
 @import "components/button.pcss";
 @import "components/input.pcss";
-@import "components/lists.pcss"
\ No newline at end of file
+@import "components/lists.pcss";
+@import "components/images.pcss";
\ No newline at end of file
diff --git a/src/components/images.pcss b/src/components/images.pcss
new file mode 100644
index 0000000..f61577f
--- /dev/null
+++ b/src/components/images.pcss
@@ -0,0 +1,15 @@
+img {
+    @apply max-w-full m-2;
+
+    &.round-corners {
+        @apply rounded-xl; 
+    }
+
+    &.circle-image {
+        @apply rounded-full; 
+    }
+}
+  
+img[alt] {
+    @apply text-sm font-regular;
+}
\ No newline at end of file
-- 
GitLab


From 668cf74f8a29eb4fe9fe1768cbfec67bbb540b85 Mon Sep 17 00:00:00 2001
From: Pooja Patel <pooja724patel@gmail.com>
Date: Fri, 2 Sep 2022 17:19:09 +0530
Subject: [PATCH 2/6] Changed sample images

---
 documentation/components/images.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/documentation/components/images.md b/documentation/components/images.md
index 97c2ef1..b0697b1 100644
--- a/documentation/components/images.md
+++ b/documentation/components/images.md
@@ -10,45 +10,45 @@ permalink: /components/images
 
 ## Squared Image
 <div>
-    <img src="../documentation/_site/assets/logo-vertical.svg" alt="">
+    <img src="https://release.gnome.org/42.webp" alt="The GNOME Logo">
 </div>
 
 ~~~html
 <div>
-    <img src="../documentation/_site/assets/logo-vertical.svg" alt="">
+    <img src="https://release.gnome.org/42.webp" alt="The GNOME Logo">
 </div>
 ~~~
 
 ## Rounded Corners 
 <div class="container">
-    <img src="images/dinosaur.jpg" class="round-corners"
-     alt="">
+    <img src="https://release.gnome.org/42.webp" class="round-corners"
+     alt="The GNOME Logo">
 </div>
 ~~~html
 <div class="container">
-    <img src="images/dinosaur.jpg" class="round-corners"
-     alt="">
+    <img src="https://release.gnome.org/42.webp" class="round-corners"
+     alt="The GNOME Logo">
 </div>
 ~~~
 
 ## Circle Image 
 <div class="container">
-    <img src="images/dinosaur.jpg" class="circle-image"
-     alt="">
+    <img src="https://release.gnome.org/42.webp" class="circle-image"
+     alt="The GNOME Logo">
 </div>
 ~~~html
 <div class="container">
-    <img src="images/dinosaur.jpg" class="circle-image"
-     alt="">
+    <img src="https://release.gnome.org/42.webp" class="circle-image"
+     alt="The GNOME Logo">
 </div>
 ~~~
 
 ## Hover Effects
 <div class="container">
-    <img src="images/dinosaur.jpg" class="hover:scale-105" alt="">
+    <img src="https://release.gnome.org/42.webp" class="hover:scale-105" alt="The GNOME Logo">
 </div>
 ~~~html
 <div class="container">
-    <img src="images/dinosaur.jpg" class="hover:scale-105" alt="">
+    <img src="https://iwf1.com/wordpress/wp-content/uploads/2014/01/Gnome-logo.png" class="hover:scale-105" alt="The GNOME Logo">
 </div>
 ~~~
\ No newline at end of file
-- 
GitLab


From e939b6295cfd4e396ad9133e99110471ad0729fe Mon Sep 17 00:00:00 2001
From: Pooja Patel <pooja724patel@gmail.com>
Date: Fri, 2 Sep 2022 16:42:57 +0530
Subject: [PATCH 3/6] Implemented images

---
 documentation/components/images.md | 54 ++++++++++++++++++++++++++++++
 src/components.pcss                |  3 +-
 src/components/images.pcss         | 15 +++++++++
 3 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 documentation/components/images.md
 create mode 100644 src/components/images.pcss

diff --git a/documentation/components/images.md b/documentation/components/images.md
new file mode 100644
index 0000000..97c2ef1
--- /dev/null
+++ b/documentation/components/images.md
@@ -0,0 +1,54 @@
+---
+layout: default
+title: Images
+parent: Components
+nav_order: 5
+permalink: /components/images
+---
+
+# Images
+
+## Squared Image
+<div>
+    <img src="../documentation/_site/assets/logo-vertical.svg" alt="">
+</div>
+
+~~~html
+<div>
+    <img src="../documentation/_site/assets/logo-vertical.svg" alt="">
+</div>
+~~~
+
+## Rounded Corners 
+<div class="container">
+    <img src="images/dinosaur.jpg" class="round-corners"
+     alt="">
+</div>
+~~~html
+<div class="container">
+    <img src="images/dinosaur.jpg" class="round-corners"
+     alt="">
+</div>
+~~~
+
+## Circle Image 
+<div class="container">
+    <img src="images/dinosaur.jpg" class="circle-image"
+     alt="">
+</div>
+~~~html
+<div class="container">
+    <img src="images/dinosaur.jpg" class="circle-image"
+     alt="">
+</div>
+~~~
+
+## Hover Effects
+<div class="container">
+    <img src="images/dinosaur.jpg" class="hover:scale-105" alt="">
+</div>
+~~~html
+<div class="container">
+    <img src="images/dinosaur.jpg" class="hover:scale-105" alt="">
+</div>
+~~~
\ No newline at end of file
diff --git a/src/components.pcss b/src/components.pcss
index 2326223..030381a 100644
--- a/src/components.pcss
+++ b/src/components.pcss
@@ -1,3 +1,4 @@
 @import "components/button.pcss";
 @import "components/input.pcss";
-@import "components/lists.pcss"
\ No newline at end of file
+@import "components/lists.pcss";
+@import "components/images.pcss";
\ No newline at end of file
diff --git a/src/components/images.pcss b/src/components/images.pcss
new file mode 100644
index 0000000..f61577f
--- /dev/null
+++ b/src/components/images.pcss
@@ -0,0 +1,15 @@
+img {
+    @apply max-w-full m-2;
+
+    &.round-corners {
+        @apply rounded-xl; 
+    }
+
+    &.circle-image {
+        @apply rounded-full; 
+    }
+}
+  
+img[alt] {
+    @apply text-sm font-regular;
+}
\ No newline at end of file
-- 
GitLab


From 24b94424300ffeee46e7c2542e418f38508501ff Mon Sep 17 00:00:00 2001
From: Pooja Patel <pooja724patel@gmail.com>
Date: Fri, 2 Sep 2022 17:19:09 +0530
Subject: [PATCH 4/6] Changed sample images

---
 documentation/components/images.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/documentation/components/images.md b/documentation/components/images.md
index 97c2ef1..b0697b1 100644
--- a/documentation/components/images.md
+++ b/documentation/components/images.md
@@ -10,45 +10,45 @@ permalink: /components/images
 
 ## Squared Image
 <div>
-    <img src="../documentation/_site/assets/logo-vertical.svg" alt="">
+    <img src="https://release.gnome.org/42.webp" alt="The GNOME Logo">
 </div>
 
 ~~~html
 <div>
-    <img src="../documentation/_site/assets/logo-vertical.svg" alt="">
+    <img src="https://release.gnome.org/42.webp" alt="The GNOME Logo">
 </div>
 ~~~
 
 ## Rounded Corners 
 <div class="container">
-    <img src="images/dinosaur.jpg" class="round-corners"
-     alt="">
+    <img src="https://release.gnome.org/42.webp" class="round-corners"
+     alt="The GNOME Logo">
 </div>
 ~~~html
 <div class="container">
-    <img src="images/dinosaur.jpg" class="round-corners"
-     alt="">
+    <img src="https://release.gnome.org/42.webp" class="round-corners"
+     alt="The GNOME Logo">
 </div>
 ~~~
 
 ## Circle Image 
 <div class="container">
-    <img src="images/dinosaur.jpg" class="circle-image"
-     alt="">
+    <img src="https://release.gnome.org/42.webp" class="circle-image"
+     alt="The GNOME Logo">
 </div>
 ~~~html
 <div class="container">
-    <img src="images/dinosaur.jpg" class="circle-image"
-     alt="">
+    <img src="https://release.gnome.org/42.webp" class="circle-image"
+     alt="The GNOME Logo">
 </div>
 ~~~
 
 ## Hover Effects
 <div class="container">
-    <img src="images/dinosaur.jpg" class="hover:scale-105" alt="">
+    <img src="https://release.gnome.org/42.webp" class="hover:scale-105" alt="The GNOME Logo">
 </div>
 ~~~html
 <div class="container">
-    <img src="images/dinosaur.jpg" class="hover:scale-105" alt="">
+    <img src="https://iwf1.com/wordpress/wp-content/uploads/2014/01/Gnome-logo.png" class="hover:scale-105" alt="The GNOME Logo">
 </div>
 ~~~
\ No newline at end of file
-- 
GitLab


From c828954415fa103ee23a0dee499278a2ffce7209 Mon Sep 17 00:00:00 2001
From: Pooja Patel <pooja724patel@gmail.com>
Date: Thu, 8 Sep 2022 16:40:51 +0530
Subject: [PATCH 5/6] Minor doc change

---
 documentation/components/images.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/components/images.md b/documentation/components/images.md
index b0697b1..789c401 100644
--- a/documentation/components/images.md
+++ b/documentation/components/images.md
@@ -49,6 +49,6 @@ permalink: /components/images
 </div>
 ~~~html
 <div class="container">
-    <img src="https://iwf1.com/wordpress/wp-content/uploads/2014/01/Gnome-logo.png" class="hover:scale-105" alt="The GNOME Logo">
+    <img src="https://release.gnome.org/42.webp" class="hover:scale-105" alt="The GNOME Logo">
 </div>
 ~~~
\ No newline at end of file
-- 
GitLab


From 6151dc7600885a212c930912457cf0f1870bbbed Mon Sep 17 00:00:00 2001
From: Pooja Patel <pooja724patel@gmail.com>
Date: Wed, 9 Nov 2022 00:15:47 +0530
Subject: [PATCH 6/6] Added better image in docs

---
 documentation/components/images.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/documentation/components/images.md b/documentation/components/images.md
index 789c401..1bf9c39 100644
--- a/documentation/components/images.md
+++ b/documentation/components/images.md
@@ -10,45 +10,45 @@ permalink: /components/images
 
 ## Squared Image
 <div>
-    <img src="https://release.gnome.org/42.webp" alt="The GNOME Logo">
+    <img src= "https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" alt="The GNOME Logo">
 </div>
 
 ~~~html
 <div>
-    <img src="https://release.gnome.org/42.webp" alt="The GNOME Logo">
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" alt="The GNOME Logo">
 </div>
 ~~~
 
 ## Rounded Corners 
 <div class="container">
-    <img src="https://release.gnome.org/42.webp" class="round-corners"
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" class="round-corners"
      alt="The GNOME Logo">
 </div>
 ~~~html
 <div class="container">
-    <img src="https://release.gnome.org/42.webp" class="round-corners"
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" class="round-corners"
      alt="The GNOME Logo">
 </div>
 ~~~
 
 ## Circle Image 
 <div class="container">
-    <img src="https://release.gnome.org/42.webp" class="circle-image"
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" class="circle-image"
      alt="The GNOME Logo">
 </div>
 ~~~html
 <div class="container">
-    <img src="https://release.gnome.org/42.webp" class="circle-image"
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" class="circle-image"
      alt="The GNOME Logo">
 </div>
 ~~~
 
 ## Hover Effects
 <div class="container">
-    <img src="https://release.gnome.org/42.webp" class="hover:scale-105" alt="The GNOME Logo">
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" class="hover:scale-105" alt="The GNOME Logo">
 </div>
 ~~~html
 <div class="container">
-    <img src="https://release.gnome.org/42.webp" class="hover:scale-105" alt="The GNOME Logo">
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" class="hover:scale-105" alt="The GNOME Logo">
 </div>
 ~~~
\ No newline at end of file
-- 
GitLab