From 952a8b94d8df000d211e98a7821e0711ee470075 Mon Sep 17 00:00:00 2001 From: ondrej Date: Mon, 24 Oct 2022 02:14:59 +0200 Subject: [PATCH] Style homepage --- .vscode/settings.json | 5 +++ assets/main.css | 23 +++++++++---- assets/style.css | 63 +++++++++++++++++++++++------------- layouts/_default/baseof.html | 2 +- layouts/partials/menu.html | 2 +- package.json | 2 +- yarn.lock | 11 ++++--- 7 files changed, 72 insertions(+), 36 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..5ac1c06 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "files.associations": { + "*.css": "tailwindcss" + } +} diff --git a/assets/main.css b/assets/main.css index 48a65d6..62c4614 100644 --- a/assets/main.css +++ b/assets/main.css @@ -55,20 +55,18 @@ body { .link, .prose a { - color: theme("colors.red.900"); - border-bottom: 4px solid theme("colors.red.100"); + @apply text-red-900 border-b-4 border-red-500/25; 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"); - border-bottom: 4px solid theme("colors.red.800"); + @apply text-red-200 border-red-200/25; } .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 */ diff --git a/assets/style.css b/assets/style.css index f9c4fae..14d93d0 100644 --- a/assets/style.css +++ b/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 { - padding-bottom: 1.5rem; +.pt-12 { + padding-top: 3rem; +} + +.pb-12 { + padding-bottom: 3rem; } .text-sm { @@ -917,20 +916,24 @@ body { .link, .prose a { - color: #7f1d1d; - border-bottom: 4px solid #fee2e2; + border-bottom-width: 4px; + 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-bottom: 4px solid #991b1b; + border-color: rgb(254 202 202 / 0.25); + --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%); - clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%); + --wedge-skew: 10vw; + -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; } } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 201a614..cb1b474 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -17,7 +17,7 @@ x-data="{ colorScheme: $persist('sync'), menuOpen: false }" x-bind:class="`color-scheme--${colorScheme} ${menuOpen ? 'overflow-hidden' : ''}`" > -
+
{{ site.Title }} diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index 2ea6634..783fd70 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -1,5 +1,5 @@