diff options
author | Wang Chucheng <wangchucheng@outlook.com> | 2020-12-09 18:58:44 +0300 |
---|---|---|
committer | Wang Chucheng <wangchucheng@outlook.com> | 2020-12-09 18:58:44 +0300 |
commit | 6638e3a102cb8e678dfed77c926f2498cc05d583 (patch) | |
tree | e810d93754476291deaacef3df19d32201d1cccf /layouts | |
parent | e943060162dc4a3e91be78a060b0af185476ad7d (diff) |
fix: jumping scrollbar
Closes #14
Diffstat (limited to 'layouts')
-rw-r--r-- | layouts/_default/baseof.html | 30 | ||||
-rw-r--r-- | layouts/index.html | 55 | ||||
-rw-r--r-- | layouts/partials/footer.html | 6 | ||||
-rw-r--r-- | layouts/partials/header.html | 40 |
4 files changed, 61 insertions, 70 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 003c52f..0b11f59 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,33 +1,27 @@ <!DOCTYPE html> -<html lang='{{ .Site.LanguageCode }}' {{ if eq .Site.Params.colorScheme "dark" }}class="dark"{{ end }}> -{{- partial "head.html" . -}} +<html lang='{{ .Site.LanguageCode }}' {{ if eq .Site.Params.colorScheme "dark" }}class="dark" {{ end }}> +{{- partial "head.html" . }} <body class="flex flex-col min-h-screen"> - <header class="flex items-center fixed w-full min-h-16 z-50 bg-secondary-bg shadow-sm"> - <div class="container mx-auto"> - <div class="max-w-screen-xl"> - {{- partial "header.html" . -}} - </div> + <header class="fixed flex items-center w-full min-h-16 pl-scrollbar z-50 bg-secondary-bg shadow-sm"> + <div class="w-full max-w-screen-xl mx-auto"> + {{- partial "header.html" . -}} </div> </header> - <main class="flex-grow pt-16"> - {{ if .IsHome }} + {{- if .IsHome }} {{- block "main" . }}{{- end }} - {{ else }} - <div class="container mx-auto "> - <div class="max-w-screen-xl lg:px-4 xl:px-8"> + {{- else }} + <div class="pl-scrollbar"> + <div class="w-full max-w-screen-xl lg:px-4 xl:px-8 mx-auto"> {{- block "main" . }}{{- end }} </div> </div> {{ end }} </main> - - <footer> - <div class="container mx-auto"> - <div class="max-w-screen-xl"> - {{- partial "footer.html" . -}} - </div> + <footer class="pl-scrollbar"> + <div class="w-full max-w-screen-xl mx-auto"> + {{- partial "footer.html" . -}} </div> </footer> </body> diff --git a/layouts/index.html b/layouts/index.html index e1e7a79..9935dc8 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,37 +1,34 @@ -{{ define "main" }} -<div class="w-full bg-secondary-bg"> - <div class="container mx-auto"> - <div class="max-w-screen-xl"> - <div class="grid grid-cols-9 grid-rows-5 h-screen -mt-16"> - {{ $imgLeft := partial "get_image.html" (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> - {{ 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> +{{- define "main" }} +<div class="bg-secondary-bg pl-scrollbar"> + <div class="max-w-screen-xl mx-auto"> + <div class="grid grid-cols-9 grid-rows-5 h-screen -mt-16"> + {{- $imgLeft := partial "get_image.html" (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> + {{- 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> </div> - {{ $imgRight := partial "get_image.html" (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> - {{ end }} - </div> + {{- $imgRight := partial "get_image.html" (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> + {{- end }} </div> </div> </div> -<div class="container mx-auto "> - <div class="max-w-screen-xl pt-12 md:px-4 xl:px-8"> - {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} - {{ partial "masonry" $pages }} +<div class="max-w-screen-xl mx-auto"> + <div class="pt-12 md:px-4 xl:px-8"> + {{- $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} + {{- partial "masonry" $pages }} </div> </div> -{{ end }}
\ No newline at end of file +{{- end }}
\ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index aad195e..c56f81e 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,3 +1,3 @@ -<footer class="w-full text-center p-6 pin-b text-sm text-tertiary-text"> - <p>{{ with .Site.Copyright }}{{ replace . "{year}" now.Year | safeHTML }} · {{ end }} Powered by the <a href="https://github.com/wangchucheng/hugo-eureka" class="hover:text-eureka">Eureka</a> theme for <a href="https://gohugo.io" class="hover:text-eureka">Hugo</a></p> -</footer>
\ No newline at end of file +<div class="text-center p-6 pin-b"> + <p class="text-sm text-tertiary-text">{{ with .Site.Copyright }}{{ replace . "{year}" now.Year | safeHTML }} · {{ end }} Powered by the <a href="https://github.com/wangchucheng/hugo-eureka" class="hover:text-eureka">Eureka</a> theme for <a href="https://gohugo.io" class="hover:text-eureka">Hugo</a></p> +</div>
\ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 6183e16..3865b47 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,24 +1,24 @@ <script> let storageColorScheme = localStorage.getItem("lightDarkMode") - {{ if eq .Site.Params.colorScheme "light" }} + {{- if eq .Site.Params.colorScheme "light" }} if (storageColorScheme == 'Auto' && window.matchMedia("(prefers-color-scheme: dark)").matches) { document.getElementsByTagName('html')[0].classList.add('dark') } else if (storageColorScheme == "Dark") { document.getElementsByTagName('html')[0].classList.add('dark') } - {{ else if eq .Site.Params.colorScheme "dark" }} + {{- else if eq .Site.Params.colorScheme "dark" }} if (storageColorScheme == 'Auto' && window.matchMedia("(prefers-color-scheme: light)").matches) { document.getElementsByTagName('html')[0].classList.remove('dark') } else if (storageColorScheme == "Light") { document.getElementsByTagName('html')[0].classList.remove('dark') } - {{ else }} + {{- else }} if ((storageColorScheme == 'Auto' || storageColorScheme == null) && window.matchMedia("(prefers-color-scheme: dark)").matches) { document.getElementsByTagName('html')[0].classList.add('dark') } else if (storageColorScheme == "Dark") { document.getElementsByTagName('html')[0].classList.add('dark') } - {{ end }} + {{- end }} </script> <nav class="flex items-center justify-between flex-wrap p-4"> <a href="{{ "/" | relLangURL }}" class="mr-6 text-primary-text text-xl font-bold">{{ .Site.Title }}</a> @@ -30,22 +30,22 @@ class="hidden block md:flex md:flex-grow md:justify-between md:items-center w-full md:w-auto text-primary-text z-20"> <div class="text-sm md:flex-grow pb-4 md:pb-0 border-b md:border-b-0" id="current-url" currenturl="{{ .Permalink }}"> - {{ range .Site.Menus.main }} + {{- range .Site.Menus.main }} <a href="{{ .URL | relLangURL }}" class="block mt-4 md:inline-block md:mt-0 hover:text-eureka mr-4 main-a">{{ .Name }}</a> - {{ end }} + {{- end }} </div> <div class="flex"> <div class="relative pt-4 md:pt-0"> <div class="cursor-pointer hover:text-eureka" id="lightDarkMode"> - {{ if eq .Site.Params.colorScheme "dark" }} + {{- if eq .Site.Params.colorScheme "dark" }} <i class="fas fa-moon"></i> - {{ else if eq .Site.Params.colorScheme "light" }} + {{- else if eq .Site.Params.colorScheme "light" }} <i class="fas fa-sun"></i> - {{ else }} + {{- else }} <i class="fas fa-adjust"></i> - {{ end }} + {{- end }} </div> <div class="fixed hidden inset-0 opacity-0 h-full w-full cursor-default z-30" id="is-open"> </div> @@ -57,7 +57,7 @@ </div> </div> - {{ if .IsTranslated }} + {{- if .IsTranslated }} <div class="relative pt-4 pl-4 md:pt-0"> <div class="cursor-pointer hover:text-eureka" id="languageMode"> <i class="fas fa-globe"></i> @@ -68,12 +68,12 @@ <div class="absolute flex flex-col left-0 md:left-auto right-auto md:right-0 hidden bg-secondary-bg w-48 rounded py-2 border border-tertiary-bg cursor-pointer z-40" id='languageOptions'> <a class="px-4 py-1 hover:text-eureka" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a> - {{ range .Translations }} + {{- range .Translations }} <a class="px-4 py-1 hover:text-eureka" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a> - {{ end }} + {{- end }} </div> </div> - {{ end }} + {{- end }} </div> </div> @@ -83,7 +83,7 @@ </nav> <script> let element = document.getElementById('lightDarkMode') - {{ if eq .Site.Params.colorScheme "light" }} + {{- if eq .Site.Params.colorScheme "light" }} if (storageColorScheme == 'Auto') { element.firstElementChild.classList.remove('fa-sun') element.firstElementChild.setAttribute("data-icon", 'adjust') @@ -96,7 +96,7 @@ element.firstElementChild.setAttribute("data-icon", 'moon') element.firstElementChild.classList.add('fa-moon') } - {{ else if eq .Site.Params.colorScheme "dark" }} + {{- else if eq .Site.Params.colorScheme "dark" }} if (storageColorScheme == 'Auto') { element.firstElementChild.classList.remove('fa-moon') element.firstElementChild.setAttribute("data-icon", 'adjust') @@ -109,7 +109,7 @@ element.firstElementChild.setAttribute("data-icon", 'sun') element.firstElementChild.classList.add('fa-sun') } - {{ else }} + {{- else }} if (storageColorScheme == null || storageColorScheme == 'Auto') { document.addEventListener('DOMContentLoaded', () => { switchMode('Auto') @@ -123,14 +123,14 @@ element.firstElementChild.setAttribute("data-icon", 'moon') element.firstElementChild.classList.add('fa-moon') } - {{ end }} + {{- end }} document.addEventListener('DOMContentLoaded', () => { getcolorscheme(); switchBurger(); - {{ if .IsTranslated }} + {{- if .IsTranslated }} switchLanguage() - {{ end }} + {{- end }} }); let currenturl = document.getElementById('current-url').getAttribute('currenturl') |