🎨 Unified page margins

Ice-Hazymoon · May 30, 2022 · c13a3b2 · c13a3b2
1 parent c84f133
commit c13a3b2
Show file tree

Hide file tree

Showing 18 changed files with 29 additions and 22 deletions.
diff --git a/assets/sass/_common/_shortcodes.scss b/assets/sass/_common/_shortcodes.scss
@@ -101,15 +101,15 @@
 
 .gallery-box {
     .gallery {
-        @apply relative my-4 flex flex-row justify-center;
+        @apply relative md:m-4 m-3 flex flex-row justify-center;
         figure {
             @apply my-0;
             img {
                 @apply my-0;
             }
         }
         figure + figure {
-            @apply ml-4;
+            @apply md:ml-4 ml-3;
         }
     }
 }
diff --git a/assets/sass/_partial/_page_gallery.scss b/assets/sass/_partial/_page_gallery.scss
@@ -1,9 +1,9 @@
 .page-gallery {
     .gallery {
-        @apply mx-4;
+        @apply md:mx-4 mx-3;
     }
     .gallery-image {
-        @apply relative mb-4 overflow-hidden rounded;
+        @apply relative md:mb-4 mb-3 overflow-hidden rounded;
         figcaption {
             @apply pointer-events-none absolute bottom-0 w-full px-4 pt-8 pb-4 text-center text-lg text-white opacity-100 transition-opacity duration-300 md:opacity-0;
             background-image: linear-gradient(to bottom, hsla(330, 0%, 0%, 0), cubic-bezier(0.42, 0, 0.4, 1), hsla(210, 0%, 0%, 0.3));

diff --git a/assets/ts/search.ts b/assets/ts/search.ts
@@ -68,7 +68,7 @@ async function initSearch() {
             return data[n]
         });
         if (value) {
-            const html = `<div class="p-6 pb-0">
+            const html = `<div class="p-6 md:px-10 pb-0">
                 <div class="font-bold text-2xl border-b dark:border-darkBorder pb-4">
                     ${window.__theme.i18n.searchResults(results.length, value)}
                 </div>

diff --git a/exampleSite/content/en-us/posts/Shortcodes/index.md b/exampleSite/content/en-us/posts/Shortcodes/index.md
@@ -125,6 +125,7 @@ This is a {{</* tag red "red tag" */>}}
 This is a {{</* tag green "green tag" */>}}  
 This is a {{</* tag blue "blue tag" */>}}  
 This is a {{</* tag orange "orange tag" */>}}  
+This is a {{</* tag theme "theme tag" */>}}  
 
 This is a {{</* tag-outlined red "red tag" */>}}  
 This is a {{</* tag-outlined green "green tag" */>}}  
@@ -136,6 +137,7 @@ This is a {{< tag red "red tag" >}}
 This is a {{< tag green "green tag" >}}  
 This is a {{< tag blue "blue tag" >}}  
 This is a {{< tag orange "orange tag" >}}  
+This is a {{< tag theme "theme tag" >}}  
 
 This is a {{< tag-outlined red "red tag" >}}  
 This is a {{< tag-outlined green "green tag" >}}  
@@ -149,12 +151,14 @@ This is a {{< tag-outlined orange "orange tag" >}}
 {{</* progress 77.54 red "Name of progress bar" */>}}
 {{</* progress 123.45 blue "Name of progress bar" */>}}
 {{</* progress 11.11 orange "Name of progress bar" */>}}
+{{</* progress 99.99 theme "Name of progress bar" */>}}
 ```
 
 {{< progress 80 green "Name of progress bar" >}}
 {{< progress 77.54 red "Name of progress bar" >}}
 {{< progress 123.45 blue "Name of progress bar" >}}
 {{< progress 11.11 orange "Name of progress bar" >}}
+{{< progress 99.99 theme "Name of progress bar" >}}
 
 ## Accordion
 

diff --git a/layouts/_default/github.html b/layouts/_default/github.html
@@ -2,7 +2,7 @@
     {{- $githubConfig := .Site.Params.github -}}
     <div class="page-github relative py-8">
         {{- if and $githubConfig (and $githubConfig.id $githubConfig.minStars) -}}
-            <div class="mx-8 mb-2 inline-flex items-end pb-3 text-3xl">
+            <div class="mx-6 md:mx-10 mb-2 inline-flex items-end pb-3 text-3xl">
                 <div class="mr-4 inline-flex items-center leading-none">
                     <i class="eva eva-github-outline mr-2"></i>
                     <span>{{- .Title -}}</span>
@@ -14,7 +14,7 @@
                 </div>
             </div>
 
-            <div class="mx-4" id="github">
+            <div class="mx-2 md:mx-6" id="github">
                 {{- $githubColors := .Site.Data.luna.githubColors -}}
                 {{- $apiURL := print "https://api.github.com/users/" $githubConfig.id "/repos?per_page=100&type=owner" -}}
                 {{- $githubData := getJSON $apiURL -}}

diff --git a/layouts/_default/links.html b/layouts/_default/links.html
@@ -1,6 +1,6 @@
 {{- define "main" -}}
     <div class="page-links relative py-8">
-        <div class="mx-8 mb-2 inline-flex items-end pb-3 text-3xl">
+        <div class="mx-6 md:mx-10 mb-2 inline-flex items-end pb-3 text-3xl">
             <div class="mr-4 inline-flex items-center leading-none">
                 <i class="eva eva-people-outline mr-2"></i>
                 <span>{{- .Title -}}</span>
@@ -10,7 +10,7 @@
             </div>
         </div>
 
-        <div class="mx-8">
+        <div class="mx-6 md:mx-10">
             {{- .Content -}}
         </div>
 

diff --git a/layouts/_default/page.html b/layouts/_default/page.html
@@ -1,5 +1,5 @@
 {{- define "main" -}}
-    <div class="relative px-8 py-4">
+    <div class="relative px-6 md:px-10 py-4">
         <div class="typo">{{- .Content -}}</div>
 
         <div class="-mx-8 mt-12">

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -70,18 +70,18 @@
                                 </noscript>
                             </picture>
                         </div>
-                        <h1 class="article-title absolute bottom-0 left-0 w-full px-6 pb-8 pt-32 text-3xl text-white dark:text-darkText md:text-4xl">
+                        <h1 class="article-title absolute bottom-0 left-0 w-full px-6 md:px-10 pb-8 pt-32 text-3xl text-white dark:text-darkText md:text-4xl">
                             {{ $Title }}
                         </h1>
                     {{- else -}}
                         <div>
-                            <div class="-mb-2 w-full p-6 pb-0 text-3xl">
+                            <div class="-mb-2 w-full p-6 md:px-10 pb-0 text-3xl">
                                 {{ $Title }}
                             </div>
                         </div>
                     {{- end -}}
                 </div>
-                <div class="article-info border-b p-6 pb-3 text-sm dark:border-darkBorder">
+                <div class="article-info border-b p-6 md:px-10 pb-3 text-sm dark:border-darkBorder">
                     <div>
                         <div class="mb-3 mr-4 inline-flex items-center sm:rounded-full">
                             <i class="eva eva-clock-outline mr-1"></i>

diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
@@ -1,6 +1,6 @@
 {{- define "main" -}}
     <div class="page-tags relative py-8">
-        <div class="mx-8 mb-2 inline-flex items-end pb-3 text-3xl">
+        <div class="mx-6 md:mx-10 mb-2 inline-flex items-end pb-3 text-3xl">
             <div class="mr-4 inline-flex items-center leading-none">
                 {{- if eq .Title "Categories" -}}
                     <i class="eva eva-folder-outline mr-2"></i>
@@ -18,7 +18,7 @@
             </div>
         </div>
 
-        <div class="mx-8">
+        <div class="mx-6 md:mx-10">
             {{- if eq .Title "Categories" -}}
                 {{- range sort .Site.Taxonomies.categories "Count" "desc" -}}
                     <a

diff --git a/layouts/_default/twitter.html b/layouts/_default/twitter.html
@@ -6,7 +6,7 @@
     {{- $lazyload := .Site.Params.lazyload -}}
     {{- $imageZoom := .Page.Site.Params.imageZoom -}}
     <div class="page-twitter relative py-8">
-        <div class="mx-8">
+        <div class="mx-6 md:mx-10">
             <div class="mb-10 inline-flex items-end pb-3 text-3xl">
                 <div class="mr-4 inline-flex items-center leading-none">
                     <i class="eva eva-twitter-outline mr-2"></i>

diff --git a/layouts/partials/post-card.html b/layouts/partials/post-card.html
@@ -136,7 +136,7 @@
             </div>
             <div class="hidden items-center text-xs sm:flex">
                 {{- if .Params.tags -}}
-                    {{- range .Params.tags -}}
+                    {{- range first 4 .Params.tags -}}
                         <a
                             href="{{- "/tags/" | relLangURL -}}{{- . | urlize -}}"
                             title="{{- . -}}"
@@ -150,7 +150,7 @@
             </div>
             <div class="flex items-center sm:hidden">
                 {{- if .Params.tags -}}
-                    {{- range .Params.tags -}}
+                    {{- range first 4 .Params.tags -}}
                         <a
                             href="{{- "/tags/" | relLangURL -}}{{- . | urlize -}}"
                             title="{{- . -}}"

diff --git a/layouts/partials/post/lastmod.html b/layouts/partials/post/lastmod.html
@@ -8,7 +8,7 @@
     {{- end -}}
     {{- $lastMod := int (div (now.Sub ($updateTime)).Hours 24) -}}
     {{- if (gt $lastMod $config.day) -}}
-        <div class="border-b bg-blue-100 bg-opacity-20 p-6 dark:border-darkBorder dark:bg-darkBg">
+        <div class="border-b bg-blue-100 bg-opacity-20 p-6 md:px-10 dark:border-darkBorder dark:bg-darkBg">
             <time
                 {{ printf `datetime="%s"` ($updateTime.Format "2006-01-02T15:04:05Z07:00") | safeHTMLAttr }}
                 >{{- (T "post.outdatedInfo" $lastMod) | safeHTML -}}</time

diff --git a/layouts/partials/post/pagination.html b/layouts/partials/post/pagination.html
@@ -1,4 +1,4 @@
-<div class="flex justify-between p-4 text-xl md:text-2xl">
+<div class="flex justify-between px-2 md:px-6 py-4 text-xl md:text-2xl">
     <div>
         <a
             href="{{- with .PrevInSection -}}{{- .RelPermalink -}}{{- end -}}"

diff --git a/layouts/partials/post/refs.html b/layouts/partials/post/refs.html
@@ -1,5 +1,5 @@
 {{- if .Params.refs -}}
-    <div class="w-full overflow-x-hidden border-t border-b bg-gray-100 bg-opacity-80 p-6 dark:border-darkBorder dark:bg-darkBgAccent">
+    <div class="w-full overflow-x-hidden border-t border-b bg-gray-100 bg-opacity-80 p-6 md:px-10 dark:border-darkBorder dark:bg-darkBgAccent">
         <div class="mb-2 inline-block border-b-2 border-text pb-1 text-base">{{- T "post.refs" -}}</div>
         <div class="">
             {{- range $index, $ref := .Params.refs -}}

diff --git a/layouts/shortcodes/gallery-grid.html b/layouts/shortcodes/gallery-grid.html
@@ -1,3 +1,3 @@
-<div class="gallery-grid columns-2 m-4 sm:columns-3 md:columns-4">
+<div class="gallery-grid gap-3 md:gap-4 columns-2 md:m-4 m-3 sm:columns-3 md:columns-4">
     {{ with .Inner }} {{ $.Page.RenderString . }} {{ end }}
 </div>
diff --git a/layouts/shortcodes/progress.html b/layouts/shortcodes/progress.html
@@ -3,6 +3,7 @@
 {{- $colors.Set "green" "bg-green-400" -}}
 {{- $colors.Set "blue" "bg-blue-400" -}}
 {{- $colors.Set "orange" "bg-orange-400" -}}
+{{- $colors.Set "theme" "bg-theme" -}}
 
 
 <div class="my-4">

diff --git a/layouts/shortcodes/tag-outlined.html b/layouts/shortcodes/tag-outlined.html
@@ -3,4 +3,5 @@
 {{- $colors.Set "green" "bg-green-500 text-green-500" -}}
 {{- $colors.Set "blue" "bg-blue-500 text-blue-500" -}}
 {{- $colors.Set "orange" "bg-orange-500 text-orange-500" -}}
+
 <span class="{{ $colors.Get (index .Params 0) }} whitespace-nowrap rounded bg-opacity-10 py-1 px-2 text-sm">{{- index .Params 1 | markdownify -}}</span>
diff --git a/layouts/shortcodes/tag.html b/layouts/shortcodes/tag.html
@@ -3,6 +3,7 @@
 {{- $colors.Set "green" "bg-green-500" -}}
 {{- $colors.Set "blue" "bg-blue-500" -}}
 {{- $colors.Set "orange" "bg-orange-500" -}}
+{{- $colors.Set "theme" "bg-theme" -}}
 
 
 <span class="{{ $colors.Get (index .Params 0) }} whitespace-nowrap rounded py-1 px-2 text-sm text-white">{{- index .Params 1 | markdownify -}}</span>