From c27f5e1b4b5dc2b198a6927e7440e1fe27a2950a Mon Sep 17 00:00:00 2001
From: Dijana Galeski <dijana_krsteska@outlook.com>
Date: Sat, 3 Aug 2024 23:22:12 +0200
Subject: [PATCH 1/2] Clipboard section done

---
 css/components/_clipboard.scss |  7 +++++++
 css/main.css                   |  9 ++++++++-
 css/main.css.map               |  2 +-
 index.html                     | 32 +++++++++++++++++++++-----------
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/css/components/_clipboard.scss b/css/components/_clipboard.scss
index f8c77ce..1b4cf13 100644
--- a/css/components/_clipboard.scss
+++ b/css/components/_clipboard.scss
@@ -1,3 +1,10 @@
 @use "../abstracts/variables" as var;
 @use "../abstracts/mixins" as mix;
 @use "sass:math";
+
+.clipboard {
+  align-items: center;
+  color: var.$text-color-secondary;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/css/main.css b/css/main.css
index 4577e63..387e3eb 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+@import url("https://fonts.google.com/specimen/Bai+Jamjuree");
 * {
   box-sizing: border-box;
 }
@@ -31,4 +31,11 @@ body {
   font-family: "Roboto", sans-serif;
   font-weight: normal;
   line-height: 1.5;
+}
+
+.clipboard {
+  align-items: center;
+  color: hsl(210, 10%, 33%);
+  display: flex;
+  flex-direction: column;
 }/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
index c21203b..51a06d7 100644
--- a/css/main.css.map
+++ b/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sources":["core/_custom-font.scss","core/_reboot.scss","main.css","core/_common-elements.scss"],"names":[],"mappings":"AAEQ,4FAAA;ACFR;EACE,sBAAA;ACEF;;ADCA;EACE,SAAA;ACEF;;ADCA;;;;;;;;;EASE,aAAA;ACEF;;ADCA;EACE,eAAA;ACEF;;ACvBA;EACE,eAAA;AD0BF;;ACvBA;EACE,iCAAA;EACA,mBAAA;EACA,gBAAA;AD0BF","file":"main.css"}
\ No newline at end of file
+{"version":3,"sources":["core/_custom-font.scss","core/_reboot.scss","main.css","core/_common-elements.scss","components/_clipboard.scss","abstracts/_variables.scss"],"names":[],"mappings":"AAEQ,6DAAA;ACFR;EACE,sBAAA;ACEF;;ADCA;EACE,SAAA;ACEF;;ADCA;;;;;;;;;EASE,aAAA;ACEF;;ADCA;EACE,eAAA;ACEF;;ACvBA;EACE,eAAA;AD0BF;;ACvBA;EACE,iCAAA;EACA,mBAAA;EACA,gBAAA;AD0BF;;AE7BA;EACE,mBAAA;EACA,yBC0BqB;EDzBrB,aAAA;EACA,sBAAA;AFgCF","file":"main.css"}
\ No newline at end of file
diff --git a/index.html b/index.html
index 62bdc4d..c96536e 100644
--- a/index.html
+++ b/index.html
@@ -35,17 +35,27 @@
     organize everything. Quick Search Easily search your snippets by content,
     category, web address, application, and more. iCloud Sync Instantly saves
     and syncs snippets across all your devices. Complete History Retrieve any
-    snippets from the first moment you started using the app. Access Clipboard
-    anywhere Whether you’re on the go, or at your computer, you can access all
-    your Clipboard snippets in a few simple clicks. Supercharge your workflow
-    We’ve got the tools to boost your productivity. Create blacklists Ensure
-    sensitive information never makes its way to your clipboard by excluding
-    certain sources. Plain text snippets Remove unwanted formatting from copied
-    text for a consistent look. Sneak preview Quick preview of all snippets on
-    your Clipboard for easy access. Clipboard for iOS and Mac OS Available for
-    free on the App Store. Download for Mac or iOS, sync with iCloud and you’re
-    ready to start adding to your clipboard. Download for iOS Download for Mac
-    FAQs Contact Us Privacy Policy Press Kit Install Guide
+    snippets from the first moment you started using the app.
+
+    <div class="clipboard">
+      <h2>Access Clipboard anywhere</h2>
+      <p>
+        Whether you’re on the go, or at your computer, you can access all your
+        Clipboard snippets in a few simple clicks.
+      </p>
+
+      <img src="./images/image-devices.png" alt="" />
+    </div>
+
+    Supercharge your workflow We’ve got the tools to boost your productivity.
+    Create blacklists Ensure sensitive information never makes its way to your
+    clipboard by excluding certain sources. Plain text snippets Remove unwanted
+    formatting from copied text for a consistent look. Sneak preview Quick
+    preview of all snippets on your Clipboard for easy access. Clipboard for iOS
+    and Mac OS Available for free on the App Store. Download for Mac or iOS,
+    sync with iCloud and you’re ready to start adding to your clipboard.
+    Download for iOS Download for Mac FAQs Contact Us Privacy Policy Press Kit
+    Install Guide
 
     <footer>
       <p class="attribution">
-- 
GitLab


From db3642e357ba29c36d462598cc2ce6f96b269fc4 Mon Sep 17 00:00:00 2001
From: Dijana Galeski <dijana_krsteska@outlook.com>
Date: Sat, 3 Aug 2024 23:25:58 +0200
Subject: [PATCH 2/2] Final clipboard

---
 css/components/_clipboard.scss | 13 ++++++++++++-
 css/main.css                   | 21 ++++++++++++++++++++-
 css/main.css.map               |  2 +-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/css/components/_clipboard.scss b/css/components/_clipboard.scss
index 1b4cf13..be3875b 100644
--- a/css/components/_clipboard.scss
+++ b/css/components/_clipboard.scss
@@ -3,8 +3,19 @@
 @use "sass:math";
 
 .clipboard {
-  align-items: center;
   color: var.$text-color-secondary;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  @extend %wrap;
+
+  img {
+    padding-top: var.$gutter-base;
+  }
+
+  p {
+    width: 50%;
+    text-align: center;
+  }
 }
diff --git a/css/main.css b/css/main.css
index 387e3eb..fafd74c 100644
--- a/css/main.css
+++ b/css/main.css
@@ -34,8 +34,27 @@ body {
 }
 
 .clipboard {
-  align-items: center;
+  max-width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+@media (max-width: 999px) {
+  .clipboard {
+    max-width: 90%;
+  }
+}
+
+.clipboard {
   color: hsl(210, 10%, 33%);
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.clipboard img {
+  padding-top: 1.875rem;
+}
+.clipboard p {
+  width: 50%;
+  text-align: center;
 }/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
index 51a06d7..a43ec0b 100644
--- a/css/main.css.map
+++ b/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sources":["core/_custom-font.scss","core/_reboot.scss","main.css","core/_common-elements.scss","components/_clipboard.scss","abstracts/_variables.scss"],"names":[],"mappings":"AAEQ,6DAAA;ACFR;EACE,sBAAA;ACEF;;ADCA;EACE,SAAA;ACEF;;ADCA;;;;;;;;;EASE,aAAA;ACEF;;ADCA;EACE,eAAA;ACEF;;ACvBA;EACE,eAAA;AD0BF;;ACvBA;EACE,iCAAA;EACA,mBAAA;EACA,gBAAA;AD0BF;;AE7BA;EACE,mBAAA;EACA,yBC0BqB;EDzBrB,aAAA;EACA,sBAAA;AFgCF","file":"main.css"}
\ No newline at end of file
+{"version":3,"sources":["core/_custom-font.scss","core/_reboot.scss","main.css","core/_common-elements.scss","abstracts/_mixins.scss","components/_clipboard.scss","abstracts/_variables.scss"],"names":[],"mappings":"AAEQ,6DAAA;ACFR;EACE,sBAAA;ACEF;;ADCA;EACE,SAAA;ACEF;;ADCA;;;;;;;;;EASE,aAAA;ACEF;;ADCA;EACE,eAAA;ACEF;;ACvBA;EACE,eAAA;AD0BF;;ACvBA;EACE,iCAAA;EACA,mBAAA;EACA,gBAAA;AD0BF;;AEpBA;EACE,cAAA;EACA,iBAAA;EACA,kBAAA;AFuBF;AErBE;EALF;IAMI,cAAA;EFwBF;AACF;;AGxCA;EACE,yBC2BqB;ED1BrB,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;AH2CF;AGxCE;EACE,qBCcU;AJ4Bd;AGvCE;EACE,UAAA;EACA,kBAAA;AHyCJ","file":"main.css"}
\ No newline at end of file
-- 
GitLab