summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/components/_header.scss127
-rw-r--r--assets/css/components/_post.scss36
-rw-r--r--assets/css/components/_reset.scss16
-rw-r--r--assets/css/components/_variables.scss1
-rw-r--r--layouts/_default/single.html19
-rw-r--r--layouts/partials/header.html8
-rw-r--r--static/header.pngbin0 -> 63164 bytes
7 files changed, 128 insertions, 79 deletions
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 9e3d4454..b7b9986d 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,68 +1,83 @@
-/* header */
+#site-header {
+ margin-top: var(--page-header-top);
-.header-title {
- font-size: 2rem;
- font-weight: 900;
- margin-top: 32px;
- text-align: center;
- letter-spacing: .15rem;
-}
-.header-title a {
- text-decoration: none;
-}
+ /* header */
-.header-subtitle {
- color: var(--secondary-text-color);
-}
+ .header-title {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
-.header-line {
- width: 100%;
- border-width: 1px;
- border-color: var(--border-color);
- border-style: solid none none none;
-}
+ .title-image {
+ width: 10rem
+ }
-/* navigation */
+ .title-link {
+ font-size: 2rem;
+ font-weight: 900;
+ text-align: center;
+ letter-spacing: .15rem;
+ }
+ }
-#navigation-bar {
- --gap: .75rem;
- display: flex;
- justify-content: center;
- align-items: center;
- gap: var(--gap);
- padding-left: calc(1rem + var(--gap))
-}
+ .header-title a {
+ text-decoration: none;
+ }
-.navigation {
- margin: 1rem 0;
- display: flex;
- justify-content: center;
- align-items: center;
- width: fit-content;
- border-radius: 1rem;
- overflow: hidden;
-}
+ .header-subtitle {
+ color: var(--secondary-text-color);
+ }
-.navigation-item a {
- display: inline-block;
- color: var(--background-color);
- padding: 0.25rem 0.5rem;
- background-color: var(--text-color);
-}
+ .header-line {
+ width: 100%;
+ border-width: 1px;
+ border-color: var(--border-color);
+ border-style: solid none none none;
+ }
-.navigation-item:first-child a {
- padding-left: 0.75rem
-}
+ /* navigation */
-.navigation-item:last-child a {
- padding-right: 0.75rem
-}
+ #navigation-bar {
+ --gap: .75rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: var(--gap);
+ padding-left: calc(1rem + var(--gap))
+ }
-.navigation-item.active a {
- color: var(--text-color);
- background-color: var(--block-background-color);
-}
+ .navigation {
+ margin: 1rem 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: fit-content;
+ border-radius: 1rem;
+ overflow: hidden;
+ }
+
+ .navigation-item a {
+ display: inline-block;
+ color: var(--background-color);
+ padding: 0.25rem 0.5rem;
+ background-color: var(--text-color);
+ }
+
+ .navigation-item:first-child a {
+ padding-left: 0.75rem
+ }
+
+ .navigation-item:last-child a {
+ padding-right: 0.75rem
+ }
+
+ .navigation-item.active a {
+ color: var(--text-color);
+ background-color: var(--block-background-color);
+ }
-.navigation-item a:hover {
- text-decoration: none;
+ .navigation-item a:hover {
+ text-decoration: none;
+ }
}
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index bd7c77e1..e782f854 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -40,3 +40,39 @@
margin-bottom: 50px;
line-height: 2
}
+
+#post-page-header {
+ margin: var(--page-header-top) auto;
+ margin-bottom: 2rem;
+ max-width: var(--page-width);
+
+ .title-image {
+ width: 10rem;
+ }
+}
+
+#post-page-header.with-banner {
+ .title-image-container {
+ background-color: var(--block-background-color);
+ border-radius: 50%;
+ transform: rotate(7deg);
+ box-shadow: 0 0 0.2rem rgba(0,0,0,.2);
+ padding: 1rem;
+
+ position: absolute;
+ z-index: 5;
+ right: 1rem;
+ top: 1rem;
+ width: 5rem;
+
+ .title-image {
+ width: 100%;
+ }
+
+ @media screen and (min-width: 768px) {
+ width: 8rem;
+ left: calc(50vw + var(--page-width) / 2 - 5rem);
+ top: calc(var(--page-header-top) - 2rem);
+ }
+ }
+}
diff --git a/assets/css/components/_reset.scss b/assets/css/components/_reset.scss
index 3512e553..8d548646 100644
--- a/assets/css/components/_reset.scss
+++ b/assets/css/components/_reset.scss
@@ -9,22 +9,6 @@ body {
background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='var(--block-background-color)' fill-opacity='0.018' fill-rule='evenodd'/%3E%3C/svg%3E");
background-color: var(--background-color);
background-size: 5rem;
- @media screen and (min-width: 768px) {
- &::before {
- content: "";
- background-image: url('/background.png');
- background-size: cover;
- background-position-x: right;
- background-position-y: bottom;
- width: 20rem;
- height: 20rem;
- position: absolute;
- bottom: 0;
- right: 0;
- z-index: -1;
- opacity: 0.3
- }
- }
}
article {
diff --git a/assets/css/components/_variables.scss b/assets/css/components/_variables.scss
index 371b8179..b27babfc 100644
--- a/assets/css/components/_variables.scss
+++ b/assets/css/components/_variables.scss
@@ -17,6 +17,7 @@
--content-font-size: 20px;
--page-width: 700px;
+ --page-header-top: 5rem;
/* pagefind custom css */
--pagefind-ui-primary: var(--text-color);
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index f22f8d6b..1df1eec9 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,13 +1,22 @@
{{ define "main" }}
+ {{ if eq .Type "posts" }}
+ <header id="post-page-header"
+ {{ with .Params.banner }}class="with-banner"{{ end }}>
+ <a href="{{ .Site.LanguagePrefix }}/"
+ class="title-image-container">
+ <img src="/header.png" alt="Logo"
+ class="invert-if-dark title-image"
+ style="view-transition-name: title-image"
+ />
+ </a>
+ </header>
+ {{ else }}
+ {{ partial "header.html" . }}
+ {{ end }}
<article
class="post {{ .Site.Language.LanguageName }}"
id="article"
>
- {{ if eq .Type "posts" }}
- {{ partial "components/breadcrumbs.html" . }}
- {{ else }}
- {{ partial "header.html" . }}
- {{ end }}
<!-- Post Header -->
<header
style="view-transition-name: post-{{ .File.UniqueID }}"
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 48f6a168..a2520724 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,7 +1,11 @@
-<header>
+<header id="site-header">
<!-- Header Title -->
<div class="header-title">
- <a href="{{ .Site.LanguagePrefix }}/"
+ <img src="/header.png" alt="Logo"
+ class="invert-if-dark title-image"
+ style="view-transition-name: title-image"
+ />
+ <a class="title-link" href="{{ .Site.LanguagePrefix }}/"
>{{ or .Site.Params.headTitle .Site.Author.name }}</a
>
</div>
diff --git a/static/header.png b/static/header.png
new file mode 100644
index 00000000..8b81d06f
--- /dev/null
+++ b/static/header.png
Binary files differ