📝 Update docs and css

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Support for Stack Exchange and Stack Overflow ([#52](https://github.com/jpanther/lynx/pull/52))
+
 ### Changed
 
 - Upgrade to Tailwind v3.3.2 ([#74](https://github.com/jpanther/lynx/pull/74))

assets/css/compiled/main.css

@@ -1,6 +1,6 @@
 /*! Lynx v1.2.4 | MIT License | https://github.com/jpanther/lynx */
 
-/*! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -31,7 +31,6 @@
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
 */
 
 html {
@@ -48,8 +47,6 @@ html {
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
-  font-variation-settings: normal;
-  /* 6 */
 }
 
 /*
@@ -436,9 +433,6 @@ video {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -486,9 +480,6 @@ video {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -1176,6 +1167,14 @@ video {
   background-color: #ff0000;
 }
 
+.link-stack-exchange {
+  background-color: #0095ff;
+}
+
+.link-stack-overflow {
+  background-color: #f48024;
+}
+
 /* -- Chroma Highlight -- */
 
 /* Background */
@@ -1205,36 +1204,36 @@ video {
   margin: auto;
 }
 
-.\!mb-9 {
+.mt-10 {
-  margin-bottom: 2.25rem !important;
+  margin-top: 2.5rem;
-}
-
-.mb-2 {
-  margin-bottom: 0.5rem;
 }
 
 .mb-3 {
   margin-bottom: 0.75rem;
 }
 
-.mb-6 {
+.mb-2 {
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
 }
 
 .mr-1 {
   margin-right: 0.25rem;
 }
 
-.mt-10 {
-  margin-top: 2.5rem;
-}
-
 .mt-2 {
   margin-top: 0.5rem;
 }
 
-.mt-4 {
+.mb-6 {
-  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.\!mb-9 {
+  margin-bottom: 2.25rem !important;
 }
 
 .block {
@@ -1249,14 +1248,14 @@ video {
   display: flex;
 }
 
-.h-36 {
-  height: 9rem;
-}
-
 .h-full {
   height: 100%;
 }
 
+.h-36 {
+  height: 9rem;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -1297,12 +1296,17 @@ video {
   place-self: start;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
 
-.rounded-full {
+.py-2 {
-  border-radius: 9999px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 .px-6 {
@@ -1315,11 +1319,6 @@ video {
   padding-bottom: 2.5rem;
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
 .pt-5 {
   padding-top: 1.25rem;
 }
@@ -1337,6 +1336,11 @@ video {
   line-height: 2.5rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -1347,11 +1351,6 @@ video {
   line-height: 1.25rem;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1365,27 +1364,45 @@ video {
   line-height: 1.75rem;
 }
 
-.text-neutral-400 {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
 .text-neutral-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.text-neutral-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-neutral-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.text-neutral-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.hover\:text-primary-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(168 85 247 / var(--tw-text-opacity));
+}
+
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
+.hover\:decoration-primary-400:hover {
+  text-decoration-color: #c084fc;
+}
+
 @media (prefers-color-scheme: dark) {
+  .dark\:bg-neutral-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  }
+
   .dark\:prose-invert {
     --tw-prose-body: var(--tw-prose-invert-body);
     --tw-prose-headings: var(--tw-prose-invert-headings);
@@ -1417,25 +1434,10 @@ video {
   .dark\:prose-invert :where(mark):not(:where([class~="not-prose"] *)) {
     background-color: #c084fc;
   }
-}
 
-.hover\:text-primary-500:hover {
+  .dark\:text-white {
-  --tw-text-opacity: 1;
+    --tw-text-opacity: 1;
-  color: rgb(168 85 247 / var(--tw-text-opacity));
+    color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.hover\:underline:hover {
-  text-decoration-line: underline;
-}
-
-.hover\:decoration-primary-400:hover {
-  text-decoration-color: #c084fc;
-}
-
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-neutral-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
   }
 
   .dark\:text-neutral-400 {
@@ -1447,11 +1449,6 @@ video {
     --tw-text-opacity: 1;
     color: rgb(107 114 128 / var(--tw-text-opacity));
   }
-
-  .dark\:text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
 }
 
 @media (min-width: 640px) {
@@ -1459,15 +1456,15 @@ video {
     min-width: 0px;
   }
 
-  .sm\:px-14 {
-    padding-left: 3.5rem;
-    padding-right: 3.5rem;
-  }
-
   .sm\:px-24 {
     padding-left: 6rem;
     padding-right: 6rem;
   }
+
+  .sm\:px-14 {
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
+  }
 }
 
 @media (min-width: 768px) {

assets/css/main.css

@@ -11,7 +11,7 @@
 
 /* Links */
 .link {
-  @apply text-white bg-primary-700 hover:brightness-90;
+  @apply bg-primary-700 text-white hover:brightness-90;
 }
 
 .link-amazon {
@@ -138,7 +138,7 @@
 /* -- Chroma Highlight -- */
 /* Background */
 .prose .chroma {
-  @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
+  @apply rounded-md bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
 }
 
 @tailwind utilities;

config.toml

@@ -42,6 +42,8 @@ disableKinds = ["taxonomy", "term"]
     # { slack = "https://workspace.url/team/userid" },
     # { snapchat = "https://snapchat.com/add/username" },
     # { soundcloud = "https://soundcloud.com/username" },
+    # { stack-exchange = "https://stackexchange.com/users/userid/username" },
+    # { stack-overflow = "https://stackoverflow.com/users/userid/username" },
     # { steam = "https://steamcommunity.com/profiles/userid" },
     # { telegram = "https://t.me/username" },
     # { tiktok = "https://tiktok.com/@username" },

exampleSite/content/styles.md

@@ -35,6 +35,8 @@ These are all the built-in link styles available in Lynx. Don't forget that you
 {{< link slack >}}
 {{< link snapchat >}}
 {{< link soundcloud >}}
+{{< link stack-exchange >}}
+{{< link stack-overflow >}}
 {{< link steam >}}
 {{< link telegram >}}
 {{< link tiktok >}}