style: improve readability on mobile devices (#166)

author: WANG Chucheng <me@wangchucheng.com> 2022-02-10 07:40:11 +0300
committer: GitHub <noreply@github.com> 2022-02-10 07:40:11 +0300
commit: acb3dc575ce5c37bafacfeea886f1ce845b86e21 (patch)
tree: c623974b1690eafe81dba515bb8e9dc0b20169a3 /layouts
parent: 27dd13c1bba6160519247f6a73e6be1770fe7b89 (diff)
12 files changed, 142 insertions, 99 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index e697430..9693e3e 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,29 +1,35 @@
 <!DOCTYPE html>
-<html lang='{{ .Site.LanguageCode }}' dir='{{ .Site.Language.LanguageDirection | default "ltr" }}' {{ if eq .Site.Params.colorScheme "dark" }}class="dark" {{ end }}>
-{{- partial "head" . }}
+<html
+  lang="{{ .Site.LanguageCode }}"
+  dir="{{ .Site.Language.LanguageDirection | default "ltr" }}"
+  {{ if eq .Site.Params.colorScheme "dark" }}class="dark"{{ end }}
+>
+  {{- partial "head" . }}
 
-<body class="flex flex-col min-h-screen">
-  <header class="fixed flex items-center w-full min-h-16 ps-scrollbar z-50 bg-secondary-bg shadow-sm">
-    <div class="w-full max-w-screen-xl mx-auto">
-      {{- partial "header" . -}}
-    </div>
-  </header>
-  <main class="grow pt-16">
-    {{- if or .IsHome (and (eq .Type "authors") (eq .Kind "term")) }}
-    {{- block "main" . }}{{- end }}
-    {{- else }}
-    <div class="ps-scrollbar">
-      <div class="w-full max-w-screen-xl lg:px-4 xl:px-8 mx-auto">
+
+  <body class="flex min-h-screen flex-col">
+    <header
+      class="min-h-16 pl-scrollbar bg-secondary-bg fixed z-50 flex w-full items-center shadow-sm"
+    >
+      <div class="mx-auto w-full max-w-screen-xl">
+        {{- partial "header" . -}}
+      </div>
+    </header>
+    <main class="grow pt-16">
+      {{- if or .IsHome (and (eq .Type "authors") (eq .Kind "term")) }}
         {{- block "main" . }}{{- end }}
+      {{- else }}
+        <div class="pl-scrollbar">
+          <div class="mx-auto w-full max-w-screen-xl lg:px-4 xl:px-8">
+            {{- block "main" . }}{{- end }}
+          </div>
+        </div>
+      {{ end }}
+    </main>
+    <footer class="pl-scrollbar">
+      <div class="mx-auto w-full max-w-screen-xl">
+        {{- partial "footer" . -}}
       </div>
-    </div>
-    {{ end }}
-  </main>
-  <footer class="ps-scrollbar">
-    <div class="w-full max-w-screen-xl mx-auto">
-      {{- partial "footer" . -}}
-    </div>
-  </footer>
-</body>
-
-</html>
-\ No newline at end of file
+    </footer>
+  </body>
+</html>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 04a81d9..e8a075d 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -38,7 +38,7 @@
       <div
         class="{{ if not $hasSidebar }}
           {{- print "lg:col-start-2" -}}
-        {{ end }} bg-secondary-bg prose col-span-2 max-w-none rounded p-6 lg:col-span-6"
+        {{ end }} bg-secondary-bg prose col-span-2 rounded p-6 lg:col-span-6"
       >
         <h3>{{ i18n "seeAlso" }}</h3>
         {{ range . }}
diff --git a/layouts/authors/list.html b/layouts/authors/list.html
index b84a88f..02ac3a3 100644
--- a/layouts/authors/list.html
+++ b/layouts/authors/list.html
@@ -1,16 +1,16 @@
 {{ define "main" }}
-<div class="ps-scrollbar bg-secondary-bg">
-  <div class="max-w-screen-xl mx-auto">
-    <div class="lg:w-3/4 mx-auto px-6 md:px-8 xl:px-12 py-12">
-      {{ partial "widgets/about" . }}
+  <div class="pl-scrollbar bg-secondary-bg">
+    <div class="mx-auto max-w-screen-xl">
+      <div class="mx-auto px-6 py-12 md:px-8 lg:w-3/4 xl:px-12">
+        {{ partial "widgets/about" . }}
+      </div>
     </div>
   </div>
-</div>
-<div class="ps-scrollbar bg-primary-bg">
-  <div class="max-w-screen-xl mx-auto">
-    <div class="lg:w-3/4 mx-auto px-6 md:px-8 xl:px-12 py-12">
-      {{ partial "components/summary-list-plain" .Pages }}
+  <div class="pl-scrollbar bg-primary-bg">
+    <div class="mx-auto max-w-screen-xl">
+      <div class="mx-auto px-6 py-12 md:px-8 lg:w-3/4 xl:px-12">
+        {{ partial "components/summary-list-plain" .Pages }}
+      </div>
     </div>
   </div>
-</div>
-{{ end }}
-\ No newline at end of file
+{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index 06f9516..d13ecce 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -8,44 +8,51 @@
       {{ errorf "Failed to find widget param in %q" .Path }}
     {{ end }}
 
-  {{/*  Deprecation warning(v1.0.0) starts  */}}
+    {{/* Deprecation warning(v1.0.0) starts */}}
   {{ else }}
     {{ warnf "Param 'hero' in params.toml is deprecated and will be removed in Eureka v1.0.0. See https://www.wangchucheng.com/en/docs/hugo-eureka/homepage-configuration/" }}
-    <div class="bg-secondary-bg ps-scrollbar">
-      <div class="max-w-screen-xl mx-auto">
-        <div class="grid grid-cols-9 grid-rows-5 h-(screen-16)">
-          {{- $imgLeft := partial "utils/get-image" (dict "context" . "url" .Site.Params.hero.imgLeft)}}
+    <div class="bg-secondary-bg pl-scrollbar">
+      <div class="mx-auto max-w-screen-xl">
+        <div class="h-(screen-16) grid grid-cols-9 grid-rows-5">
+          {{- $imgLeft := partial "utils/get-image" (dict "context" . "url" .Site.Params.hero.imgLeft) }}
           {{- with $imgLeft }}
-          <div class="col-start-2 col-span-4 row-start-3 row-span-2 bg-local bg-cover z-10 shadow-2xl"
-            style="background-image: url({{ . }});"></div>
+            <div
+              class="z-10 col-span-4 col-start-2 row-span-2 row-start-3 bg-cover bg-local shadow-2xl"
+              style="background-image: url({{ . }});"
+            ></div>
           {{- end }}
-        
-          <div class="col-start-3 col-span-5 row-start-2 row-span-3 z-20">
-            <div class="flex flex-col items-center justify-center min-h-full">
-              <div class="bg-white bg-opacity-75 shadow-2xl -m-12 p-12">
-                <span class="font-bold text-black text-opacity-75 text-2xl md:text-3xl">{{ .Site.Params.hero.slogan }}</span>
+
+
+          <div class="z-20 col-span-5 col-start-3 row-span-3 row-start-2">
+            <div class="flex min-h-full flex-col items-center justify-center">
+              <div class="-m-12 bg-white bg-opacity-75 p-12 shadow-2xl">
+                <span
+                  class="text-2xl font-bold text-black text-opacity-75 md:text-3xl"
+                  >{{ .Site.Params.hero.slogan }}</span
+                >
               </div>
             </div>
           </div>
-          {{- $imgRight := partial "utils/get-image" (dict "context" . "url" .Site.Params.hero.imgRight)}}
+          {{- $imgRight := partial "utils/get-image" (dict "context" . "url" .Site.Params.hero.imgRight) }}
           {{- with $imgRight }}
-          <div class="col-start-5 col-span-4 row-start-2 row-span-2 bg-local bg-cover shadow-2xl"
-            style="background-image: url({{ . }});">
-          </div>
+            <div
+              class="col-span-4 col-start-5 row-span-2 row-start-2 bg-cover bg-local shadow-2xl"
+              style="background-image: url({{ . }});"
+            ></div>
           {{- end }}
         </div>
       </div>
     </div>
-    <div class="ps-scrollbar">
-      <div class="max-w-screen-xl mx-auto">
+    <div class="pl-scrollbar">
+      <div class="mx-auto max-w-screen-xl">
         <div class="pt-12 md:px-4 xl:px-8">
           {{- $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
           {{- partial "components/masonry" $pages }}
         </div>
       </div>
     </div>
-    {{/*  Deprecation warning(v1.0.0) ends  */}}
-    
+    {{/* Deprecation warning(v1.0.0) ends */}}
+
   {{ end }}
 {{- end }}
 
@@ -54,14 +61,14 @@
 
   {{ $fullScreenWidgets := slice "vintage" }}
 
-  {{/*  background config  */}}
+  {{/* background config */}}
   {{ $backgroundClass := "" }}
   {{ $backgroundStyle := "" }}
 
   {{ if $widget.background.image }}
     {{ $image := partial "utils/get-image.html" (dict "context" . "url" $widget.background.image) }}
     {{ $backgroundStyle = print $backgroundStyle "background-image: url(" $image ");" }}
-    {{/*  background size  */}}
+    {{/* background size */}}
     {{ $size := $widget.background.size }}
     {{ $sizeOptions := dict "auto" "bg-auto" "cover" "bg-cover" "contain" "bg-contain" }}
     {{ if $size }}
@@ -69,11 +76,11 @@
       {{ if $size }}
         {{ $backgroundClass = print $backgroundClass " " $size }}
       {{ else }}
-        {{/*  TODO error  */}}
+        {{/* TODO error */}}
       {{ end }}
     {{ end }}
 
-    {{/*  background position  */}}
+    {{/* background position */}}
     {{ $position := $widget.background.position }}
     {{ $positionOptions := dict "center" "bg-center" "top" "bg-top" "right" "bg-right" "bottom" "bg-bottom" "left" "bg-left" }}
     {{ if $position }}
@@ -81,11 +88,11 @@
       {{ if $position }}
         {{ $backgroundClass = print $backgroundClass " " $position }}
       {{ else }}
-        {{/*  TODO error  */}}
+        {{/* TODO error */}}
       {{ end }}
     {{ end }}
 
-    {{/*  background position  */}}
+    {{/* background position */}}
     {{ $attachment := $widget.background.attachment }}
     {{ $attachmentOptions := dict "fixed" "bg-fixed" "local" "bg-local" "scroll" "bg-scroll" }}
     {{ if $attachment }}
@@ -93,12 +100,12 @@
       {{ if $attachment }}
         {{ $backgroundClass = print $backgroundClass " " $attachment }}
       {{ else }}
-        {{/*  TODO error  */}}
+        {{/* TODO error */}}
       {{ end }}
     {{ end }}
 
   {{ else }}
-    {{/*  background color  */}}
+    {{/* background color */}}
     {{ $color := $widget.background.color }}
     {{ $colorOptions := dict "primary" "bg-primary-bg" "secondary" "bg-secondary-bg" "tertiary" "bg-tertiary-bg" }}
     {{ if $color }}
@@ -106,7 +113,7 @@
       {{ if $colorClass }}
         {{ $backgroundClass = print $backgroundClass " " $colorClass }}
       {{ else }}
-        {{ $backgroundStyle = print $backgroundStyle "background-color: " $color ";"}}
+        {{ $backgroundStyle = print $backgroundStyle "background-color: " $color ";" }}
       {{ end }}
     {{ else }}
       {{ $colorClass := index $colorOptions "primary" }}
@@ -114,11 +121,11 @@
     {{ end }}
   {{ end }}
 
-  {{/*  widget config  */}}
+  {{/* widget config */}}
   {{ $widgetClass := "" }}
-  
+
   {{ if not (in $fullScreenWidgets $widget.handler) }}
-    {{/*  widget width  */}}
+    {{/* widget width */}}
     {{ $width := $widget.width }}
     {{ $widthOptions := dict "sm" "lg:w-2/3" "md" "lg:w-3/4" "lg" "lg:w-4/5" "xl" "w-full" }}
     {{ if $width }}
@@ -131,7 +138,7 @@
       {{ $widgetClass = print $widgetClass " " $widthClass }}
     {{ end }}
 
-    {{/*  widget height  */}}
+    {{/* widget height */}}
     {{ $height := $widget.height }}
     {{ $heightOptions := dict "sm" "h-64" "md" "h-96" "lg" "h-128" "xl" "h-160" "screen" "h-(screen-16)" }}
     {{ if $height }}
@@ -143,10 +150,20 @@
     {{ $widgetClass = print $widgetClass " mx-auto px-6 md:px-8 xl:px-12 py-12" }}
   {{ end }}
 
-  <div class="ps-scrollbar {{ with $backgroundClass -}}{{ partial "utils/standardize-classes" . }}{{- end }}" 
-    {{ with $backgroundStyle }} style="{{ . | safeCSS }}" {{ end }}>
-    <div class="max-w-screen-xl mx-auto">
-      <div id="{{ .File.BaseFileName }}" class="{{ with $widgetClass -}}{{ partial "utils/standardize-classes" . }}{{- end }}">
+
+  <div
+    class="pl-scrollbar {{ with $backgroundClass -}}
+      {{ partial "utils/standardize-classes" . }}
+    {{- end }}"
+    {{ with $backgroundStyle }}style="{{ . | safeCSS }}"{{ end }}
+  >
+    <div class="mx-auto max-w-screen-xl">
+      <div
+        id="{{ .File.BaseFileName }}"
+        class="{{ with $widgetClass -}}
+          {{ partial "utils/standardize-classes" . }}
+        {{- end }}"
+      >
         {{ partial "widgets/load-sidebar" . }}
       </div>
     </div>
@@ -159,7 +176,7 @@
   {{ if $sidebar.position }}
 
     {{ $scaleClass := "" }}
-    {{/*  widget width  */}}
+    {{/* widget width */}}
     {{ $scale := $sidebar.scale }}
     {{ $scaleOptions := dict "sm" "lg:w-1/5" "md" "lg:w-1/4" "lg" "lg:w-1/3" "xl" "lg:w-1/2" }}
     {{ if $scale }}
@@ -167,34 +184,54 @@
     {{ else }}
       {{ $scaleClass = index $scaleOptions "md" }}
     {{ end }}
-    <div class="flex flex-col {{ if eq $sidebar.position "right" -}} lg:flex-row-reverse {{- else -}} lg:flex-row {{- end }}">
-      <div class="flex-none {{ with $scaleClass -}}{{ partial "utils/standardize-classes" . }}{{- end }} {{ if eq $sidebar.position "left" -}} lg:me-4 {{- else -}} lg:ms-4 {{- end }}">
-        <h2 class="font-bold text-3xl my-4">{{ .Params.Title }}</h2>
+    <div
+      class="{{ if eq $sidebar.position "right" -}}
+        lg:flex-row-reverse
+      {{- else -}}
+        lg:flex-row
+      {{- end }} flex flex-col"
+    >
+      <div
+        class="{{ with $scaleClass -}}
+          {{ partial "utils/standardize-classes" . }}
+        {{- end }} {{ if eq $sidebar.position "left" -}}
+          lg:me-4
+        {{- else -}}
+          lg:ms-4
+        {{- end }} flex-none"
+      >
+        <h2 class="my-4 text-3xl font-bold">{{ .Params.Title }}</h2>
       </div>
-      <div class="grow {{ if eq $sidebar.position "right" -}} lg:me-4 {{- else -}} lg:ms-4 {{- end }}">
-        {{/*  Deprecation warning(v1.0.0) starts */}}
+      <div
+        class="{{ if eq $sidebar.position "right" -}}
+          lg:me-4
+        {{- else -}}
+          lg:ms-4
+        {{- end }} grow"
+      >
+        {{/* Deprecation warning(v1.0.0) starts */}}
         {{- if eq .Params.widget.handler "experiences" }}
           {{- warnf "Value `experiences` for `widget.handler` in %s is deprecated and will be removed in Eureka v1.0.0. Please use `experience` instead." .File.Path }}
           {{ partial (printf "widgets/%s" "experience") . }}
         {{- else }}
-        {{/*  Deprecation warning(v1.0.0) ends  */}}
-        {{ partial (printf "widgets/%s" .Params.widget.handler) . }}
-        {{/*  Deprecation warning(v1.0.0) starts */}}
+          {{/* Deprecation warning(v1.0.0) ends */}}
+          {{ partial (printf "widgets/%s" .Params.widget.handler) . }}
+          {{/* Deprecation warning(v1.0.0) starts */}}
         {{- end }}
-        {{/*  Deprecation warning(v1.0.0) ends  */}}
-        
+        {{/* Deprecation warning(v1.0.0) ends */}}
+
       </div>
     </div>
   {{ else }}
-    {{/*  Deprecation warning(v1.0.0) starts */}}
+    {{/* Deprecation warning(v1.0.0) starts */}}
     {{- if eq .Params.widget.handler "experiences" }}
       {{- warnf "Value `experiences` for `widget.handler` in %s is deprecated and will be removed in Eureka v1.0.0. Please use `experience` instead." .File.Path }}
       {{ partial (printf "widgets/%s" "experience") . }}
     {{- else }}
-    {{/*  Deprecation warning(v1.0.0) ends  */}}
-    {{ partial (printf "widgets/%s" .Params.widget.handler) . }}
-    {{/*  Deprecation warning(v1.0.0) starts */}}
+      {{/* Deprecation warning(v1.0.0) ends */}}
+      {{ partial (printf "widgets/%s" .Params.widget.handler) . }}
+      {{/* Deprecation warning(v1.0.0) starts */}}
     {{- end }}
-    {{/*  Deprecation warning(v1.0.0) ends  */}}
+    {{/* Deprecation warning(v1.0.0) ends */}}
   {{ end }}
-{{ end }}
-\ No newline at end of file
+{{ end }}
diff --git a/layouts/partials/components/list-article.html b/layouts/partials/components/list-article.html
index edd6096..f81c2ac 100644
--- a/layouts/partials/components/list-article.html
+++ b/layouts/partials/components/list-article.html
@@ -1,4 +1,4 @@
-<article class="prose mx-6 my-8 max-w-none">
+<article class="prose mx-6 my-8">
   <h1>{{ .Title }}</h1>
   {{ with .Content }}
     {{ . }}
diff --git a/layouts/partials/components/post-article.html b/layouts/partials/components/post-article.html
index 0cbadd8..f558cbe 100644
--- a/layouts/partials/components/post-article.html
+++ b/layouts/partials/components/post-article.html
@@ -1,4 +1,4 @@
-<article class="prose max-w-none">
+<article class="prose">
   <h1 class="mb-4">{{ .Title }}</h1>
 
   {{ partial "components/post-metadata" . }}
diff --git a/layouts/partials/components/post-toc.html b/layouts/partials/components/post-toc.html
index 46de312..2fe2ac4 100644
--- a/layouts/partials/components/post-toc.html
+++ b/layouts/partials/components/post-toc.html
@@ -3,7 +3,7 @@
     bg-secondary-bg
   {{ else }}
     bg-primary-bg
-  {{ end }} prose sticky top-16 z-10 hidden max-w-none px-6 py-4 lg:block"
+  {{ end }} prose sticky top-16 z-10 hidden px-6 py-4 lg:block"
 >
   <h3>{{ i18n "onThisPage" }}</h3>
 </div>
diff --git a/layouts/partials/components/summary-masonry.html b/layouts/partials/components/summary-masonry.html
index a9186cd..9a3cecb 100644
--- a/layouts/partials/components/summary-masonry.html
+++ b/layouts/partials/components/summary-masonry.html
@@ -5,7 +5,7 @@
   {{ with $featured }}
     {{ . }}
   {{ end }}
-  <div class="prose max-w-none px-6 pt-6 pb-4">
+  <div class="prose px-6 pt-6 pb-4">
     <a href="{{ .Permalink }}" class="no-underline">
       <h3 class="mt-0">{{ .LinkTitle }}</h3>
     </a>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index e780290..a1e7a3f 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,5 +1,5 @@
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 
 {{ define "partials/get-title" }}
 {{ $separator := .Site.Params.titleSeparator | default "|" }}
diff --git a/layouts/partials/utils/get-summary.html b/layouts/partials/utils/get-summary.html
index 0909938..367075b 100644
--- a/layouts/partials/utils/get-summary.html
+++ b/layouts/partials/utils/get-summary.html
@@ -1,4 +1,4 @@
-<div class="prose max-w-none">
+<div class="prose">
   <a href="{{ .Permalink }}" class="no-underline">
     <h3 class="mt-0">{{ .LinkTitle }}</h3>
   </a>
diff --git a/layouts/partials/widgets/about.html b/layouts/partials/widgets/about.html
index 9633439..2a786e1 100644
--- a/layouts/partials/widgets/about.html
+++ b/layouts/partials/widgets/about.html
@@ -46,6 +46,6 @@
     {{ end }}
   </div>
 </div>
-<div class="prose max-w-none">
+<div class="prose">
   {{ .Content }}
 </div>
diff --git a/layouts/partials/widgets/experience.html b/layouts/partials/widgets/experience.html
index 5b2d508..267ab23 100644
--- a/layouts/partials/widgets/experience.html
+++ b/layouts/partials/widgets/experience.html
@@ -1,7 +1,7 @@
 {{ range .Params.experiences }}
   <div class="mb-6">
     <div
-      class="bg-secondary-bg prose dark:border-tertiary-bg max-w-none rounded border p-6 transition duration-200 ease-in-out hover:shadow-lg"
+      class="bg-secondary-bg prose dark:border-tertiary-bg rounded border p-6 transition duration-200 ease-in-out hover:shadow-lg"
     >
       <h3 class="">{{ .title }}</h3>
       <div class="flex flex-col md:flex-row md:justify-between">
author	WANG Chucheng <me@wangchucheng.com>	2022-02-10 07:40:11 +0300
committer	GitHub <noreply@github.com>	2022-02-10 07:40:11 +0300
commit	acb3dc575ce5c37bafacfeea886f1ce845b86e21 (patch)
tree	c623974b1690eafe81dba515bb8e9dc0b20169a3 /layouts
parent	27dd13c1bba6160519247f6a73e6be1770fe7b89 (diff)