From 852f382bd86d2ef4654e0f64aed29345797b6073 Mon Sep 17 00:00:00 2001 From: Rohan Deb Sarkar Date: Thu, 18 May 2023 19:50:39 +0530 Subject: [PATCH 01/12] nav refactor --- assets/css/_base.scss | 9 ---- assets/css/tailwind.css | 3 -- assets/css/tailwind.scss | 13 +++++ assets/css/tailwind/nav.scss | 76 ++++++++++++++++++++++++++++ layouts/_default/baseof.html | 2 +- layouts/partials/head.html | 2 +- layouts/partials/header.html | 96 +++++++++++++++++------------------- 7 files changed, 136 insertions(+), 65 deletions(-) delete mode 100644 assets/css/tailwind.css create mode 100644 assets/css/tailwind.scss create mode 100644 assets/css/tailwind/nav.scss diff --git a/assets/css/_base.scss b/assets/css/_base.scss index ea5b2fa5..d38d3a7c 100644 --- a/assets/css/_base.scss +++ b/assets/css/_base.scss @@ -2,15 +2,6 @@ html { scroll-behavior: smooth; } -a { - font-weight: 500; - text-decoration: underline; - - &:hover { - color: var(--global-theme-color); - } -} - #TableOfContents { ul { li { diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css deleted file mode 100644 index b5c61c95..00000000 --- a/assets/css/tailwind.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/assets/css/tailwind.scss b/assets/css/tailwind.scss new file mode 100644 index 00000000..4de043cd --- /dev/null +++ b/assets/css/tailwind.scss @@ -0,0 +1,13 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + body { + @apply mx-auto; + @apply text-primary; + @apply bg-background; + + @import "tailwind/nav.scss"; + } +} diff --git a/assets/css/tailwind/nav.scss b/assets/css/tailwind/nav.scss new file mode 100644 index 00000000..943ecfe0 --- /dev/null +++ b/assets/css/tailwind/nav.scss @@ -0,0 +1,76 @@ +> header { + @apply fixed; + @apply inset-x-0; + @apply top-0; + @apply text-primary; + @apply bg-header; + @apply z-10; + @apply border-b; + @apply border-divider; + + nav { + @apply mx-auto; + @apply p-4; + @apply text-base; + @apply font-medium; + @apply flex; + @apply flex-col; + + @apply md:flex-row; + + .nav-logo { + @apply flex; + @apply flex-row; + + a { + @apply whitespace-nowrap; + @apply font-bold; + @apply no-underline; + } + + .nav-social { + @apply ml-auto; + @apply pl-4; + @apply text-[1.25em]; + @apply overflow-x-auto; + @apply overflow-y-hidden; + } + } + + .nav-menu { + @apply flex; + @apply flex-row; + @apply mt-4; + + @apply md:ml-auto; + @apply md:mt-0; + + .nav-menu-list { + @apply flex; + @apply flex-row; + @apply flex-nowrap; + @apply space-x-4; + @apply overflow-auto; + + @apply md:w-fit; + + .nav-link { + @apply whitespace-nowrap; + @apply no-underline; + } + } + + #theme-toggle { + @apply hover:text-theme; + + @apply absolute; + @apply top-4; + @apply right-4; + + @apply md:static; + @apply md:ml-4; + @apply md:mt-0; + } + } + } +} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index f0a4cd1a..67622848 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -4,7 +4,7 @@ {{ partial "head" . }} {{/* Body */}} - + {{/* Header */}} {{ partial "header" . }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index e6ee5d81..da005337 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -26,7 +26,7 @@ {{/* Stylesheets */}} {{ if (eq hugo.Environment "dev") }} - {{ $tailwindCSS := resources.Get "css/tailwind.css" | postCSS }} + {{ $tailwindCSS := resources.Get "css/tailwind.scss" | toCSS | postCSS }} {{ $tailwindCSS = $tailwindCSS | resources.ExecuteAsTemplate (printf "tailwind.dev.%v.css" now.UnixMilli) . }} {{ else }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index a9fdd66b..a427dbf5 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,58 +1,52 @@ -
-
From e5e1584b82edb9fa2dc7fe0c4f6f362d6a59f0df Mon Sep 17 00:00:00 2001 From: Rohan Deb Sarkar Date: Thu, 18 May 2023 20:58:02 +0530 Subject: [PATCH 02/12] main & social --- assets/css/tailwind.scss | 9 +++ assets/css/tailwind/main.scss | 74 ++++++++++++++++++++++++ layouts/_default/baseof.html | 6 +- layouts/_default/list.html | 6 +- layouts/_default/single.html | 6 +- layouts/partials/header.html | 98 ++++++++++++++++---------------- layouts/partials/posts/list.html | 14 ++--- layouts/partials/social.html | 2 +- layouts/posts/list.html | 6 +- layouts/posts/single.html | 14 ++--- 10 files changed, 159 insertions(+), 76 deletions(-) create mode 100644 assets/css/tailwind/main.scss diff --git a/assets/css/tailwind.scss b/assets/css/tailwind.scss index 4de043cd..9870042d 100644 --- a/assets/css/tailwind.scss +++ b/assets/css/tailwind.scss @@ -9,5 +9,14 @@ @apply bg-background; @import "tailwind/nav.scss"; + @import "tailwind/main.scss"; + + .social { + @apply flex; + @apply flex-row; + @apply flex-nowrap; + @apply space-x-4; + @apply justify-center; + } } } diff --git a/assets/css/tailwind/main.scss b/assets/css/tailwind/main.scss new file mode 100644 index 00000000..dd65da86 --- /dev/null +++ b/assets/css/tailwind/main.scss @@ -0,0 +1,74 @@ +> main { + @apply mt-24; + @apply mb-12; + @apply px-4; + @apply py-8; + @apply space-y-8; + + @apply md:mt-14; + @apply md:mb-8; + + > header { + @apply space-y-2; + + h1 { + @apply text-4xl; + @apply font-medium; + } + + h2 { + @apply font-medium; + } + } + + .blog-header { + h1 { + @apply text-6xl; + @apply text-center; + @apply text-theme; + } + + h2 { + @apply text-2xl; + @apply text-center; + } + + } + + .post-date { + @apply text-sm; + @apply font-mono; + } + + .post-tags { + @apply text-sm; + @apply italic; + @apply text-secondary; + + a { + @apply text-secondary; + @apply no-underline; + } + } + + .post-list { + @apply border-t; + @apply border-dashed; + @apply border-divider; + + li { + @apply py-4; + @apply space-y-2; + @apply border-b; + @apply border-dashed; + @apply border-divider; + + hgroup h3 a { + @apply text-2xl; + @apply font-medium; + @apply text-primary; + @apply no-underline; + } + } + } +} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 67622848..a8ddb661 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -7,10 +7,12 @@ {{/* Header */}} - {{ partial "header" . }} +
+ {{ partial "header" . }} +
{{/* Main */}} -
+
{{ block "main" . }}{{ end }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html index f68de8b9..7830cdc1 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,11 +1,11 @@ {{ define "main" }} -
-

+
+

{{ .Page.Title }}

{{ with .Page.Params.description }} -

+

{{ . }}

{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 09db9e10..a09d517c 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,11 +1,11 @@ {{ define "main" }} -
-

+
+

{{ .Page.Title }}

{{ with .Page.Params.description }} -

+

{{ . }}

{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index a427dbf5..6fdb76cc 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,52 +1,50 @@ -
-
+ + {{ partial "svg" "fas fa-moon" }} + + + + diff --git a/layouts/partials/posts/list.html b/layouts/partials/posts/list.html index b5adda7c..10a0cb6b 100644 --- a/layouts/partials/posts/list.html +++ b/layouts/partials/posts/list.html @@ -1,7 +1,7 @@ -
    +
      {{ range .Pages }} -
    • -

      +

    • +

      {{ with .Date }} {{ .Format "January 2, 2006" }}  {{ end }} @@ -13,7 +13,7 @@

      - + {{ .Title }}

      @@ -24,20 +24,20 @@

      {{ $currentPage := . }} -

      +

      {{ with .Page.ReadingTime }} {{ partial "svg" "fas fa-clock" }} {{ . }} min read  {{ end }} {{ with .Page.Params.tags }} •  {{ range . }} - {{ partial "svg" "fas fa-hashtag" }} {{ . }}  + {{ partial "svg" "fas fa-hashtag" }} {{ . }}  {{ end }} {{ end }} {{ with .Page.Params.categories }} •  {{ range . }} - {{ partial "svg" "fas fa-tag" }} {{ . }}  + {{ partial "svg" "fas fa-tag" }} {{ . }}  {{ end }} {{ end }}

      diff --git a/layouts/partials/social.html b/layouts/partials/social.html index 0e5f385b..e35c1621 100644 --- a/layouts/partials/social.html +++ b/layouts/partials/social.html @@ -1,4 +1,4 @@ -
        +