add unsplash link and update social link colors

Tscheffrey · Nov 4, 2021 · 24d2d31 · 24d2d31 · vercel · Nov 4, 2021
1 parent fdec033
commit 24d2d31
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 53 deletions.
diff --git a/assets/css/base.css b/assets/css/base.css
@@ -1,12 +1,20 @@
 :root {
   --color-primary-100: #181717;
   --color-secondary-100: #e8eaec;
+
+  --color-unsplash: #000000;
+  --color-bitspeicher: #eb8951;
+  --color-github: #7dbbe6;
 }
 
 /* reverse colors in dark theme */
 .dark {
   --color-primary-100: #dadde0;
   --color-secondary-100: #181717;
+
+  --color-unsplash: #ffffff;
+  --color-bitspeicher: #f6a477;
+  --color-github: #7dbbe6;
 }
 
 body {

diff --git a/components/LandingPage.vue b/components/LandingPage.vue
@@ -34,70 +34,47 @@
       </p>
       <ul class="text-3xl font-bold sm:text-4xl lg:text-6xl leading-tighter">
         <li
-          class="
-            mb-3
-            transition-colors
-            duration-400
-            text-instagram
-            lg:mb-5
-            last-of-type:mb-0
-          "
+          class="mb-3 transition-colors  duration-400 text-instagram lg:mb-5 last-of-type:mb-0"
         >
-          <a href="https://www.instagram.com/jeffs.garbage/" target="_blank"
-            >Instagram</a
-          >
+          <a href="https://www.instagram.com/jeffs.garbage/" target="_blank">
+            Instagram
+          </a>
         </li>
+
+        <li
+          class="mb-3 transition-colors  duration-400 text-unsplash lg:mb-5 last-of-type:mb-0"
+        >
+          <a href="https://www.linkedin.com/in/hannes-schuetz/" target="_blank">
+            Unsplash
+          </a>
+        </li>
+
         <li
-          class="
-            mb-3
-            transition-colors
-            duration-400
-            text-twitter
-            lg:mb-5
-            last-of-type:mb-0
-          "
+          class="mb-3 transition-colors  duration-400 text-twitter lg:mb-5 last-of-type:mb-0"
         >
-          <a href="https://twitter.com/Tscheffrey" target="_blank">Twitter</a>
+          <a href="https://twitter.com/Tscheffrey" target="_blank"> Twitter </a>
         </li>
+
         <li
-          class="
-            mb-3
-            transition-colors
-            duration-400
-            text-github
-            lg:mb-5
-            last-of-type:mb-0
-          "
+          class="mb-3 transition-colors  duration-400 text-github lg:mb-5 last-of-type:mb-0"
         >
-          <a href="https://github.com/Tscheffrey" target="_blank">GitHub</a>
+          <a href="https://github.com/Tscheffrey" target="_blank"> GitHub </a>
         </li>
+
         <li
-          class="
-            mb-3
-            transition-colors
-            duration-400
-            text-bitspeicher
-            lg:mb-5
-            last-of-type:mb-0
-          "
+          class="mb-3 transition-colors  duration-400 text-bitspeicher lg:mb-5 last-of-type:mb-0"
         >
-          <a href="https://bitspeicher.blog/author/hannes/" target="_blank"
-            >Bitspeicher Blog</a
-          >
+          <a href="https://bitspeicher.blog/author/hannes/" target="_blank">
+            Bitspeicher Blog
+          </a>
         </li>
+
         <li
-          class="
-            mb-3
-            transition-colors
-            duration-400
-            text-linkedin
-            lg:mb-5
-            last-of-type:mb-0
-          "
+          class="mb-3 transition-colors  duration-400 text-linkedin lg:mb-5 last-of-type:mb-0"
         >
-          <a href="https://www.linkedin.com/in/hannes-schuetz/" target="_blank"
-            >LinkedIn</a
-          >
+          <a href="https://www.linkedin.com/in/hannes-schuetz/" target="_blank">
+            LinkedIn
+          </a>
         </li>
       </ul>
     </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,9 +16,10 @@ module.exports = {
         },
         instagram: '#da2e76',
         twitter: '#00ACEE',
-        github: '#7DBBE6',
-        bitspeicher: '#F6A477',
+        github: 'var(--color-github)',
+        bitspeicher: 'var(--color-bitspeicher)',
         linkedin: '#70B5F9',
+        unsplash: 'var(--color-unsplash)',
       },
       borderWidth: {
         3: '3px',