diff --git a/.github/workflows/generate_css.yml b/.github/workflows/generate_css.yml index 0f1cdb3b..b8ed538f 100644 --- a/.github/workflows/generate_css.yml +++ b/.github/workflows/generate_css.yml @@ -15,7 +15,9 @@ jobs: run: npm install - name: Generate TailwindCSS - run: npx tailwindcss -m -i ./assets/css/tailwind.css -o ./static/tailwind.css + run: | + npx sass assets/css/tailwind/tailwind.scss assets/css/tailwind.css + npx tailwindcss -m -i ./assets/css/tailwind.css -o ./static/tailwind.css - name: Commit changes uses: EndBug/add-and-commit@v9 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/distill.scss b/assets/css/distill.scss index d96d6452..c1f7cb46 100644 --- a/assets/css/distill.scss +++ b/assets/css/distill.scss @@ -24,11 +24,19 @@ d-article d-byline a { } d-title { + margin-top: 6rem; + h1 { color: var(--global-text-color-primary) !important; } } +@media (min-width: 768px) { + d-title { + margin-top: 3.5rem; + } +} + d-article { border-top-color: var(--global-divider-color) !important; p, @@ -158,3 +166,9 @@ d-appendix { } } } + +.comments { + max-width: 800px; + margin: 0 auto 2rem auto; + padding: 0 0 2rem 0; +} 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/footer.scss b/assets/css/tailwind/footer.scss new file mode 100644 index 00000000..19df3a1f --- /dev/null +++ b/assets/css/tailwind/footer.scss @@ -0,0 +1,12 @@ +> footer { + @apply fixed; + @apply inset-x-0; + @apply bottom-0; + @apply p-2; + @apply text-center; + @apply text-xs; + @apply text-primary; + @apply bg-footer; + @apply border-t; + @apply border-divider; +} diff --git a/assets/css/tailwind/main.scss b/assets/css/tailwind/main.scss new file mode 100644 index 00000000..708b5e6d --- /dev/null +++ b/assets/css/tailwind/main.scss @@ -0,0 +1,168 @@ +> 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; + } + } + + .index-fig { + @apply w-3/4 + mx-auto + space-y-4 + + sm:w-1/3 + sm:float-right + sm:ml-4 + + md:w-1/4; + + img { + @apply rounded; + } + + address { + @apply font-medium + text-center + space-y-2; + + .e-mail { + @apply not-italic + font-mono; + } + + .index-social { + @apply text-3xl + overflow-auto; + } + } + } + + .recent { + @apply space-y-1; + + h3 a { + @apply text-2xl text-primary font-semibold no-underline; + } + + table { + @apply text-left; + + tr { + th { + @apply pr-2 py-1; + } + + td { + @apply pl-2 py-1; + } + } + } + } + + .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; + + @apply hover:text-theme hover:underline; + } + } + } + + .taxonomy-list { + @apply flex + flex-row + flex-wrap + space-x-4 + justify-center; + + li a { + @apply text-theme + no-underline + hover:underline; + } + } + + .toc { + @apply 2xl:fixed + 2xl:top-14 + 2xl:left-0 + 2xl:p-4 + 2xl:w-[256px]; + + details { + @apply p-2 + text-secondary + text-sm + border + border-dashed + border-secondary + cursor-zoom-in + open:cursor-zoom-out + max-h-[80vh] + overflow-auto; + + summary { + @apply text-lg; + } + } + } +} diff --git a/assets/css/tailwind/nav.scss b/assets/css/tailwind/nav.scss new file mode 100644 index 00000000..8646615d --- /dev/null +++ b/assets/css/tailwind/nav.scss @@ -0,0 +1,87 @@ +> 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; + @apply text-primary; + + @apply hover:text-theme; + } + + .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; + + ul { + @apply flex; + @apply flex-row; + @apply flex-nowrap; + @apply space-x-4; + @apply overflow-auto; + + @apply md:w-fit; + + a { + @apply whitespace-nowrap; + @apply no-underline; + @apply text-primary; + + @apply hover:text-theme + hover:underline; + } + + .active { + @apply text-theme; + } + } + + #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; + } + } + } +} diff --git a/assets/css/tailwind/tailwind.scss b/assets/css/tailwind/tailwind.scss new file mode 100644 index 00000000..1aa9a67f --- /dev/null +++ b/assets/css/tailwind/tailwind.scss @@ -0,0 +1,34 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + body { + @apply mx-auto; + @apply text-primary; + @apply bg-background; + + @import 'nav.scss'; + @import 'main.scss'; + @import 'footer.scss'; + } + + a { + @apply text-theme; + @apply hover:underline; + } + + .social { + @apply flex; + @apply flex-row; + @apply flex-nowrap; + @apply space-x-4; + @apply justify-center; + + a { + @apply text-primary; + + @apply hover:text-theme; + } + } +} diff --git a/exampleSite/config/_default/params.yaml b/exampleSite/config/_default/params.yaml index 52e72ead..3ee718bc 100644 --- a/exampleSite/config/_default/params.yaml +++ b/exampleSite/config/_default/params.yaml @@ -7,6 +7,10 @@ description: Albert Einstein's personal website powered by the Academic Folio th favicon: ⚛️ # You can either enter an emoji or the name of an image file present in `assets/img` folder +footerText: > + Powered by Hugo with + Academic Folio theme + tags: # these tags would be added as keywords in metadata for website - academic-folio - academic-website diff --git a/layouts/404.html b/layouts/404.html index 80eb87fc..6426fad6 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,10 +1,10 @@ {{ define "main" }} -
-

+
+

Page not found!

-

+

Sorry, but the page you are looking for does not exist.

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index f0a4cd1a..a8ddb661 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -4,13 +4,15 @@ {{ partial "head" . }} {{/* Body */}} - + {{/* 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/distill/single.html b/layouts/distill/single.html index cbae7581..a619579b 100644 --- a/layouts/distill/single.html +++ b/layouts/distill/single.html @@ -3,8 +3,10 @@ {{ partial "head" . }} - - {{ partial "header" . }} + +
+ {{ partial "header" . }} +
{{ partial "distill/d-front-matter" . }} @@ -17,7 +19,7 @@ {{ partial "footer" . }} {{ if (and .Site.Params.giscusScript (not .Params.disableGiscusComments)) }} -
+
{{ partial "scripts/giscus" . }}
{{ end }} diff --git a/layouts/index.html b/layouts/index.html index c4bbd3f8..326b8b64 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,8 +1,8 @@ {{ define "main" }} -
-

+
+

{{ if (or .Site.Params.firstName .Site.Params.middleName .Site.Params.lastName) }} - {{ .Site.Params.firstName }} + {{ .Site.Params.firstName }} {{ .Site.Params.lastName }} {{ else }} {{ .Site.Title }} @@ -10,28 +10,28 @@

{{ with .Site.Params.description }} -

+

{{ safeHTML . }}

{{ end }}
-
+
{{ with resources.Get (printf "img/%s" .Params.profPic) }} {{ if (strings.HasSuffix . ".svg") }} {{ else }} - {{ partial "img" (dict "img" . "class" "rounded" "alt" .RelPermalink) }} + {{ partial "img" (dict "img" . "class" "" "alt" .RelPermalink) }} {{ end }} {{ end }} -
+
{{ with .Site.Params.email }} {{ partial "scripts/cloakemail" . }} {{ end }} {{ if (and .Site.Params.socialHomePage .Site.Menus.social) }} -
+
{{ partial "social" . }}
{{ end }} @@ -45,18 +45,18 @@

{{ end }} {{ if .Site.Params.showRecentNews }} -
-

- Recent News + {{ end }} {{ if .Site.Params.showRecentPosts }} -
-

- Recent Posts + diff --git a/layouts/partials/distill/d-title.html b/layouts/partials/distill/d-title.html index 0e09f52c..4bd78a29 100644 --- a/layouts/partials/distill/d-title.html +++ b/layouts/partials/distill/d-title.html @@ -1,4 +1,4 @@ - + {{- if and (.Params.Distill.SupportFiles.DTitle) (fileExists ((printf "%s%s" .File.Dir .Params.Distill.SupportFiles.DTitle))) -}} {{- readFile (printf "%s%s" .File.Dir .Params.Distill.SupportFiles.DTitle) | safeHTML -}} {{- end -}} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index a2c7389b..3bdca0e1 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,10 +1,9 @@ -
+
{{ with .Site.Copyright }} {{ . }} {{ end }} • - Powered by Hugo with - Academic Folio theme + {{ safeHTML .Site.Params.footerText }} {{ if .Site.Params.footerLastUpdated }} • Last updated: {{ now.Format "02 Jan 2006"}} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index e6ee5d81..001d2d2d 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/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..b5fbbf8b 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,58 +1,47 @@ -
-
+ +

+ diff --git a/layouts/partials/list.html b/layouts/partials/list.html index b1438621..8830852c 100644 --- a/layouts/partials/list.html +++ b/layouts/partials/list.html @@ -1,9 +1,9 @@ -
    +
      {{ range .Pages }} -
    • +

    • - + {{ .Title }}

      diff --git a/layouts/partials/modules/responsive-images/_img.html b/layouts/partials/modules/responsive-images/_img.html index 6d0c8bcb..f104e1ee 100755 --- a/layouts/partials/modules/responsive-images/_img.html +++ b/layouts/partials/modules/responsive-images/_img.html @@ -6,7 +6,7 @@ "webpHint" $.webpHint }} - {{/* For each breakpoint, convert image to WebP and resize according to `$widths` */}} + {{/* For each breakpoint, convert image to WebP and Resize according to `$widths` */}} {{ range $i, $v := $.breakpoints }} {{ $width := index $.widths (add $i 1) | default -1 }} {{ $opts = dict "breakpoint" $v "width" $width | merge $opts }} diff --git a/layouts/partials/news/recents.html b/layouts/partials/news/recents.html index d80e1e50..92cd4642 100644 --- a/layouts/partials/news/recents.html +++ b/layouts/partials/news/recents.html @@ -1,16 +1,15 @@ - - +
      {{ range ( where .Site.RegularPages "Type" "news" | first .Site.Params.recentNews ) }} - - 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 @@ -
      + {{ .Date.Format "January 02, 2006" }} + {{ if .Content }} {{ .Title }} {{ else }} - {{ .Title }} + {{ .Title }} {{ end }}
      +
      {{ range ( where .Site.RegularPages "Type" "posts" | first .Site.Params.recentPosts ) }} - - - - + + + + {{ end }}
      - {{ .Date.Format "January 02, 2006" }} - - {{ .Title }} -
      + {{ .Date.Format "January 02, 2006" }} + + {{ .Title }} +
      diff --git a/layouts/partials/posts/toc.html b/layouts/partials/posts/toc.html index 297a66c4..f510c42f 100644 --- a/layouts/partials/posts/toc.html +++ b/layouts/partials/posts/toc.html @@ -1,5 +1,5 @@ -
      - +
      + Table of Contents {{ .TableOfContents }} diff --git a/layouts/partials/scripts/cloakemail.html b/layouts/partials/scripts/cloakemail.html index 1d1e2dbe..acb18442 100644 --- a/layouts/partials/scripts/cloakemail.html +++ b/layouts/partials/scripts/cloakemail.html @@ -17,4 +17,4 @@ {{- $domainReversed = $domainReversed | append (index $domain (sub (len $domain) .)) }} {{- 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 @@ -
        +

+ {{ end }}
diff --git a/layouts/posts/single.html b/layouts/posts/single.html index 7c3f9bf4..a59dd3d6 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -1,16 +1,16 @@ {{ define "main" }} -
-

+
+

{{ .Page.Title }}

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

+

{{ . }}

{{ end }} -

+

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

{{ end }}

-

+

{{ with .Page.ReadingTime }} {{ partial "svg" "fas fa-clock" }} {{ . }} min read  {{ end }} @@ -28,20 +28,20 @@

{{ 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 }}

-