diff options
| author | Wang Chucheng <ccwangchn@gmail.com> | 2020-05-15 08:14:29 +0300 |
|---|---|---|
| committer | Wang Chucheng <ccwangchn@gmail.com> | 2020-05-15 08:14:29 +0300 |
| commit | e753af0c7a75770ea5c931cdef2e0034bac889af (patch) | |
| tree | 2f2f7e716bf0578cf4c08628d4ab8cc183faaf95 /layouts/_default | |
| parent | f8b674b093948597e1c1d6c8a2f7a88cc89541e8 (diff) | |
refactor: change the base style
Diffstat (limited to 'layouts/_default')
| -rw-r--r-- | layouts/_default/baseof.html | 43 | ||||
| -rw-r--r-- | layouts/_default/single.html | 40 |
2 files changed, 53 insertions, 30 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 5bc8277..f86414c 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,13 +1,34 @@ <!DOCTYPE html> <html lang='{{ .Site.LanguageCode }}'> - {{- partial "head.html" . -}} - <body class="flex flex-col min-h-screen"> - {{- partial "dev-size-indicator.html" . -}} - {{- partial "header.html" . -}} - <main class="flex-1 mx-4 md:mx-12 lg:mx-24 mt-4 sm:mt-16"> - {{- block "main" . }}{{- end }} - </main> - {{- partial "dev-parameters.html" . -}} - {{- partial "footer.html" . -}} - </body> -</html> +{{- partial "head.html" . -}} + +<body> + <header class="fixed w-full h-16 z-50 bg-secondary"> + <div class="container mx-auto"> + <div class="max-w-screen-xl"> + {{- partial "header.html" . -}} + </div> + </div> + </header> + + <main class="min-h-screen pt-16"> + <div class="container mx-auto "> + <div class="max-w-screen-xl pt-12 lg:px-4 xl:px-8"> + {{- partial "dev-size-indicator.html" . -}} + {{- block "main" . }}{{- end }} + </div> + </div> + </main> + + <footer> + <div class="container mx-auto"> + <div class="max-w-screen-xl"> + {{- partial "dev-parameters.html" . -}} + {{- partial "footer.html" . -}} + </div> + </div> + </footer> + +</body> + +</html>
\ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 8e68b62..93cd7f6 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,16 +1,16 @@ {{ define "main" }} {{ $hasToc := and (in .TableOfContents "<li>" ) (.Params.toc) }} {{ $hasSidebar := or ($hasToc) (.Params.series) }} -<article class="text-gray-700 sm:mx-12"> -</article> -<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> - <div class="col-span-1 md:col-span-3"> +<div class="grid grid-cols-2 lg:grid-cols-8 gap-4"> + <div class="col-span-2 {{ if not $hasSidebar }} {{- print "lg:col-start-2" -}} {{ end }} lg:col-span-6 bg-secondary px-6 py-8"> <h1 class="font-bold text-3xl text-gray-700">{{ .Title }}</h1> - <div class="markdown"> + {{ partial "post_metadata.html" . }} + <div class="content"> {{ .Content}} </div> </div> - <div class="col-span-1"> + {{ if $hasSidebar}} + <div class="col-span-2"> {{ if .Params.series }} {{ partial "post_series.html" . }} {{ end }} @@ -18,11 +18,13 @@ {{ partial "post_toc.html" . }} {{ end }} </div> + {{ end }} + {{ $related := .Site.RegularPages.Related . | first 5 }} {{ with $related }} - <div class="col-span-1"> + <div class="col-span-2 {{ if not $hasSidebar }} {{- print "lg:col-start-2" -}} {{ end }} lg:col-span-6 bg-secondary p-6"> <h2 class="subtitle">See Also</h2> - <div class="markdown"> + <div class="content"> {{ range . }} <a href="{{ .RelPermalink }}">{{ .Title }}</a> {{ end }} @@ -39,7 +41,7 @@ if (entry.intersectionRatio > 0) { if (delay == true) { let element = document.querySelector('.sticky-toc li.active') - element.firstChild.classList.remove('text-red-900'); + element.firstChild.classList.remove('text-primary'); element.classList.remove('active'); delay = false; updatePosAndColor(); @@ -51,7 +53,7 @@ delay = true; } else { let element = document.querySelector(`.sticky-toc li a[href="#${id}"]`) - element.classList.remove('text-red-900'); + element.classList.remove('text-primary'); element.parentElement.classList.remove('active'); updatePosAndColor(); } @@ -67,39 +69,39 @@ let len = elements.length if (len != 0) { let firstElement = elements[0] - firstElement.firstChild.classList.add('text-red-900') + firstElement.firstChild.classList.add('text-primary') let offset = firstElement.offsetTop - targetPos; if (offset > 0) { - document.querySelector(`.sticky-toc`).style.top = `calc( 4rem - ${offset}px)` + document.querySelector(`.sticky-toc`).style.top = `calc( 7rem - ${offset}px)` } else { document.querySelector(`.sticky-toc`).removeAttribute("style"); } for (let i = 1; i < len; i++) { - elements[i].firstChild.classList.remove('text-red-900') + elements[i].firstChild.classList.remove('text-primary') } } } // Track all sections that have an `id` applied - document.querySelectorAll('.markdown h1[id]').forEach((section) => { + document.querySelectorAll('.content h1[id]').forEach((section) => { observer.observe(section); }); - document.querySelectorAll('.markdown h2[id]').forEach((section) => { + document.querySelectorAll('.content h2[id]').forEach((section) => { observer.observe(section); }); - document.querySelectorAll('.markdown h3[id]').forEach((section) => { + document.querySelectorAll('.content h3[id]').forEach((section) => { observer.observe(section); }); - document.querySelectorAll('.markdown h4[id]').forEach((section) => { + document.querySelectorAll('.content h4[id]').forEach((section) => { observer.observe(section); }); - document.querySelectorAll('.markdown h5[id]').forEach((section) => { + document.querySelectorAll('.content h5[id]').forEach((section) => { observer.observe(section); }); - document.querySelectorAll('.markdown h6[id]').forEach((section) => { + document.querySelectorAll('.content h6[id]').forEach((section) => { observer.observe(section); }); }); |