From aaee901c537e9c4df5bd57df27d88b55b25f6922 Mon Sep 17 00:00:00 2001 From: yequari Date: Tue, 12 Sep 2023 16:48:39 -0700 Subject: [PATCH] new layout concept --- themes/saturn/layouts/_default/baseof.html | 3 + themes/saturn/layouts/_default/list.html | 21 ++- themes/saturn/layouts/blog/list.html | 4 +- themes/saturn/layouts/blog/single.html | 4 +- themes/saturn/layouts/partials/head.html | 3 + themes/saturn/layouts/partials/header.html | 7 - themes/saturn/layouts/partials/sidebar.html | 7 + themes/saturn/static/css/main.css | 171 +++++++++++--------- 8 files changed, 128 insertions(+), 92 deletions(-) create mode 100644 themes/saturn/layouts/partials/sidebar.html diff --git a/themes/saturn/layouts/_default/baseof.html b/themes/saturn/layouts/_default/baseof.html index e5d7ead..9c3d599 100644 --- a/themes/saturn/layouts/_default/baseof.html +++ b/themes/saturn/layouts/_default/baseof.html @@ -2,6 +2,8 @@ {{- partial "head.html" . -}} +
+ {{- partial "sidebar.html" . -}}
{{- partial "header.html" . -}}
@@ -9,5 +11,6 @@
{{- partial "footer.html" . -}}
+
diff --git a/themes/saturn/layouts/_default/list.html b/themes/saturn/layouts/_default/list.html index 9444094..196ca7f 100644 --- a/themes/saturn/layouts/_default/list.html +++ b/themes/saturn/layouts/_default/list.html @@ -1,11 +1,20 @@ {{ define "main" }} - -
+

{{ .Title }}

-
    {{ range .Pages }} -
  • {{.Title}}
    • +
    +

    {{ .Title }}

    + + {{ partial "tags.html" .}} +

    + {{ .Summary }} +

    + {{ if .Truncated }} + + {{ end }} +
    {{ end }} -
-
+ {{ end }} diff --git a/themes/saturn/layouts/blog/list.html b/themes/saturn/layouts/blog/list.html index 50bac0e..8ebeca0 100644 --- a/themes/saturn/layouts/blog/list.html +++ b/themes/saturn/layouts/blog/list.html @@ -1,7 +1,7 @@ {{ define "main" }}
{{ range .Paginator.Pages.ByPublishDate.Reverse }} -

+

{{ .Title }}

{{ partial "tags.html" .}} @@ -13,7 +13,7 @@ Read More... {{ end }} -

+
{{ end }} {{ template "_internal/pagination.html" . }}
diff --git a/themes/saturn/layouts/blog/single.html b/themes/saturn/layouts/blog/single.html index b600265..7f0ee34 100644 --- a/themes/saturn/layouts/blog/single.html +++ b/themes/saturn/layouts/blog/single.html @@ -1,6 +1,5 @@ {{ define "main" }} -
-
+

{{ .Title }}

@@ -11,5 +10,4 @@
-
{{ end }} diff --git a/themes/saturn/layouts/partials/head.html b/themes/saturn/layouts/partials/head.html index e3b0459..c62efd3 100644 --- a/themes/saturn/layouts/partials/head.html +++ b/themes/saturn/layouts/partials/head.html @@ -10,4 +10,7 @@ + {{ range .AlternativeOutputFormats -}} + {{ printf `` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} +{{ end -}} diff --git a/themes/saturn/layouts/partials/header.html b/themes/saturn/layouts/partials/header.html index 70f229a..58612a6 100644 --- a/themes/saturn/layouts/partials/header.html +++ b/themes/saturn/layouts/partials/header.html @@ -1,10 +1,3 @@

{{ .Site.Title }}

 -
diff --git a/themes/saturn/layouts/partials/sidebar.html b/themes/saturn/layouts/partials/sidebar.html new file mode 100644 index 0000000..8bc406f --- /dev/null +++ b/themes/saturn/layouts/partials/sidebar.html @@ -0,0 +1,7 @@ + diff --git a/themes/saturn/static/css/main.css b/themes/saturn/static/css/main.css index f77ce26..e2414c5 100644 --- a/themes/saturn/static/css/main.css +++ b/themes/saturn/static/css/main.css @@ -44,6 +44,7 @@ --primary-link: var(--magenta); --primary-link-hover: var(--red); --secondary-link: var(--blue); + --ternary-link: var(--yellow); } @font-face { @@ -67,9 +68,13 @@ body::-webkit-scrollbar { display: none; } +h1,h2,h3,h4,h5,h6 { + color: var(--primary-text); + font-family: 'Lalezar', display; +} + p { - font-size: 1.1rem; - line-height: 2; + line-height: 1.5; } a:link, a:visited { @@ -81,14 +86,24 @@ a:hover, a:active { text-decoration: underline; } -h1,h2,h3,h4,h5,h6 { - color: var(--primary-text); - font-family: 'Lalezar', display; - +a.tag { + color: var(--secondary-link); } -.hidden { - display: none; +a.permalink { + padding: 0 5px; +} + +a.summary { + color: var(--primary-text); +} + +.big { + display: flex; + flex-direction: row; + margin: 0 auto; + padding-top: 100px; + width: 40rem; } .column { @@ -97,16 +112,15 @@ h1,h2,h3,h4,h5,h6 { gap: 10px; max-width: 1000px; margin: 10px auto; - background-color: rgba(23,33,33,0.7); - padding: 0 20px; min-height: 800px; + flex: 1; } header { display: flex; flex-flow: row wrap; flex-shrink: 0; - margin: 10px; + margin: 10px auto; } header h1 { @@ -115,20 +129,26 @@ header h1 { color: var(--pewter-blue); } +header a.sitetitle { + text-decoration: none; +} + nav { - flex: 1; + flex: 0 0 100px; + width: fit-content; + text-align: right; + padding-top: 100px; } nav ul { list-style-type: none; margin: 0; padding: 0; - text-align: center; } -nav li { +/*nav li { display: inline; -} +}*/ nav li a { display: inline-block; @@ -141,13 +161,19 @@ nav li a { font-size: 0.9em; } +nav li a:link, nav li a:visited { + color: var(--ternary-link); +} + main { flex: 1; display: flex; + background-color: rgba(23,33,33,0.7); + padding: 0 25px; flex-flow: row wrap; /* gap: 20px; */ z-index: 1; - margin: 0 0.1rem; + /* margin: 0 0.1rem; */ } .sidebar { @@ -159,16 +185,50 @@ main { line-height: 1; } -section.content { +.content { flex: 8 1; padding: 0 1rem; } -section p { +article p { text-indent: 1rem; text-align: justify; } +section.posts ul { + list-style-type: none; +} + +article time { + color: var(--secondary-text); +} + +article a.title { + color: var(--yellow); +} + +code { + background-color: black; + padding: 10px; + overflow-x: scroll; + color: white; +} + +pre code{ + display: block; +} + +ul.pagination { + list-style: none; + text-align: center; +} + +li.page-item { + display: inline; + padding: 0.3rem; +} + + footer { display: flex; flex-direction: column; @@ -182,10 +242,6 @@ footer div { flex: 1; } -a.sitetitle { - text-decoration: none; -} - footer ul.social { list-style-type: none; margin: 0; @@ -203,58 +259,16 @@ footer li.social a { color: var(--secondary-link); } -a.tag { - color: var(--secondary-link); -} - -a.permalink { - padding: 0 5px; -} - -a.summary { - color: var(--primary-text); -} - -time.dt-published { - color: var(--secondary-text); -} - -ul.posts { - list-style-type: none; -} - -img { - max-width: 500px; - height: auto; -} - -code { - background-color: black; - padding: 10px; - overflow-x: scroll; - color: white; -} - -pre code{ - display: block; -} - #webmentions img { max-height: 1.2em; margin-right: -1ex; } +.hidden { + display: none; +} + .center { text-align: center; } -ul.pagination { - list-style: none; - text-align: center; -} - -li.page-item { - display: inline; - padding: 0.3rem; -} - /* * Links page */ @@ -276,7 +290,11 @@ li.page-item { .hover-links { position: relative; - border-bottom: 1px dotted var(--chinese-red); + border-bottom: 1px dotted var(--secondary-link); +} + +a.hover-links:hover { + text-decoration: none; } .hover-links:before { @@ -285,13 +303,13 @@ li.page-item { opacity: 0; max-width: 340px; min-width: 200px; - background-color: var(--xiketic); - color: var(--pewter-blue); + background-color: var(--main-bg); + color: var(--primary-text); text-align: center; - border: 4px double var(--dim-gray); + border: 4px double var(--primary-text); border-radius: 5px; padding: 5px; - transition: opacity 1s ease-in-out; + transition: opacity 0.3s ease-in-out; position: absolute; z-index: 1; left: -50px; @@ -299,7 +317,7 @@ li.page-item { } .hover-links:hover:before { - opacity: 1; + opacity: 0.8; visibility: visible; } @@ -312,6 +330,11 @@ li.page-item { background-color: var(--content-bg); } + .big { + flex-direction: column; + width: unset; + } + .column { border: none; background: none;