Style homepage

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "files.associations": {
+    "*.css": "tailwindcss"
+  }
+}

assets/main.css

@@ -55,20 +55,18 @@ body {
 
 .link,
 .prose a {
-  color: theme("colors.red.900");
+  @apply text-red-900 border-b-4 border-red-500/25;
-  border-bottom: 4px solid theme("colors.red.100");
   transition: color 200ms;
 }
 
 .link:hover,
 .prose a:hover {
-  color: theme("colors.red.600");
+  @apply text-red-600;
 }
 
 .dark .link,
 .dark .prose a {
-  color: theme("colors.red.200");
+  @apply text-red-200 border-red-200/25;
-  border-bottom: 4px solid theme("colors.red.800");
 }
 
 .dark .link:hover,
@@ -127,7 +125,20 @@ code {
 /* Background */
 
 .clip-wedge {
-  clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
+  --wedge-skew: 10vw;
+  clip-path: polygon(0 var(--wedge-skew), 100% 0, 100% calc(100% - var(--wedge-skew)), 0% 100% );
+}
+
+@media screen(md) {
+  .clip-wedge {
+    --wedge-skew: 8vw;
+  }
+}
+
+@media screen(lg) {
+  .clip-wedge {
+    --wedge-skew: 5vw;
+  }
 }
 
 /* Components */

assets/style.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.2.0 | MIT License | https://tailwindcss.com
+! tailwindcss v3.2.1 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -782,11 +782,6 @@ video {
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
 }
 
-.bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -807,22 +802,26 @@ video {
   padding-bottom: 6rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
 
-.py-12 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
 .pt-4 {
   padding-top: 1rem;
 }
 
-.pb-6 {
+.pt-12 {
-  padding-bottom: 1.5rem;
+  padding-top: 3rem;
+}
+
+.pb-12 {
+  padding-bottom: 3rem;
 }
 
 .text-sm {
@@ -917,20 +916,24 @@ body {
 
 .link,
 .prose a {
-  color: #7f1d1d;
+  border-bottom-width: 4px;
-  border-bottom: 4px solid #fee2e2;
+  border-color: rgb(239 68 68 / 0.25);
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity));
   transition: color 200ms;
 }
 
 .link:hover,
 .prose a:hover {
-  color: #dc2626;
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
 }
 
 .dark .link,
 .dark .prose a {
-  color: #fecaca;
+  border-color: rgb(254 202 202 / 0.25);
-  border-bottom: 4px solid #991b1b;
+  --tw-text-opacity: 1;
+  color: rgb(254 202 202 / var(--tw-text-opacity));
 }
 
 .dark .link:hover,
@@ -994,8 +997,21 @@ code {
 /* Background */
 
 .clip-wedge {
-  -webkit-clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
+  --wedge-skew: 10vw;
-          clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
+  -webkit-clip-path: polygon(0 var(--wedge-skew), 100% 0, 100% calc(100% - var(--wedge-skew)), 0% 100% );
+          clip-path: polygon(0 var(--wedge-skew), 100% 0, 100% calc(100% - var(--wedge-skew)), 0% 100% );
+}
+
+@media (min-width: 768px) {
+  .clip-wedge {
+    --wedge-skew: 8vw;
+  }
+}
+
+@media (min-width: 1280px) {
+  .clip-wedge {
+    --wedge-skew: 5vw;
+  }
 }
 
 /* Components */
@@ -1086,8 +1102,11 @@ code {
     background-color: transparent;
   }
 
-  .lg\:py-0 {
+  .lg\:pt-0 {
     padding-top: 0px;
-    padding-bottom: 0px;
+  }
+
+  .lg\:pb-2 {
+    padding-bottom: 0.5rem;
   }
 }

layouts/_default/baseof.html

@@ -17,7 +17,7 @@
   x-data="{ colorScheme: $persist('sync'), menuOpen: false }"
   x-bind:class="`color-scheme--${colorScheme} ${menuOpen ? 'overflow-hidden' : ''}`"
 >
-  <header class="pt-4 pb-6">
+  <header class="py-4">
     <div class="container mx-auto px-6 flex items-center lg:mb-4 gap-6">
       <a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="mr-auto">
         <img src="{{ "/images/logo.png" | relURL }}" width="60" alt="{{ site.Title }}" />

layouts/partials/menu.html

@@ -1,5 +1,5 @@
 <nav
-  class="bg-gray-900 bg-gray-100 lg:bg-transparent fixed lg:static inset-0 z-10 overflow-y-auto transition-transform lg:container lg:mx-auto px-6 py-12 lg:py-0"
+  class="bg-gray-100 lg:bg-transparent fixed lg:static inset-0 z-10 overflow-y-auto transition-transform lg:container lg:mx-auto px-6 pt-12 pb-12 lg:pt-0 lg:pb-2"
   x-bind:class="menuOpen ? 'translate-x-0' : 'translate-x-full lg:translate-x-0'">
   <h2 class="sr-only">{{ i18n "menu_title" }}</h2>
   <button class="button block mb-6 lg:hidden absolute top-4 right-6" x-on:click="menuOpen = false">

package.json

@@ -11,6 +11,6 @@
   "dependencies": {
     "@alpinejs/persist": "^3.10.4",
     "alpinejs": "^3.10.4",
-    "tailwindcss": "^3.2.0"
+    "tailwindcss": "^3.2.1"
   }
 }

yarn.lock

@@ -242,7 +242,7 @@ merge2@^1.3.0:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-micromatch@^4.0.4:
+micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -398,10 +398,10 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-tailwindcss@^3.2.0:
+tailwindcss@^3.2.1:
-  version "3.2.0"
+  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.0.tgz#0164a930645e7e1df301df1e9d434a52602c918d"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.1.tgz#1bd828fff3172489962357f8d531c184080a6786"
-  integrity sha512-ARh/W0uH5UlWIC2nn02V0+5fyF0k6qZliyt4QYic2upOhPUE/Spu1EURNc9txJ3+4j8OEmdigqfDpw4d2tA4vA==
+  integrity sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg==
   dependencies:
     arg "^5.0.2"
     chokidar "^3.5.3"
@@ -413,6 +413,7 @@ tailwindcss@^3.2.0:
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
     lilconfig "^2.0.6"
+    micromatch "^4.0.5"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
     picocolors "^1.0.0"