diff --git a/assets/css/style.css b/assets/css/style.css index 16b801d..f76e669 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,10 +1,12 @@ -/* General */ +/* +** General +*/ body { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; min-height:100vh; margin: 0; - padding: 20px; + padding: 0; box-sizing:border-box; background-color: #EFEFEF; color: #575757; @@ -15,11 +17,6 @@ body { word-wrap: break-word; } -mark { - color: #707070; - font-weight: bold; -} - a:link { color: #575757; } @@ -36,44 +33,98 @@ a:active { color: #575757; } -/* Header */ -header .avatar { - position: relative; +.title { + font-family: 'Comfortaa'; +} + +/* +** HEADER +*/ + +.avatarMask { + clip-path: circle(48px at center); + -webkit-clip-path: circle(48px at center); +} + +/* Topbar Header */ + +.header-top { + padding: 20px; + color: black; + background-color: #f2f2f2; + margin-bottom: 2.75rem; + border-bottom: 1px solid black; + padding-left: 3rem; +} + +.header-top a { color: black !important;} + +.header-flex { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; + margin-left: auto; + margin-right: auto; + max-width: 800px; +} + +.header-top .title { margin-right: 1rem; } + +.header-top .h-card { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap-reverse; + width: 350px; +} + +.header-top .h-card .u-photo { height: 100px; } -.home .avatar { +@media (max-width: 550px) { + .header-top { + padding-left: 20px; + } + .header-top .title { margin-right: 0; } + .header-flex { flex-direction: column; } + .header-top .h-card { + flex-direction: column-reverse; + } +} + +/* Homepage Header */ + +.header-home .avatar { height: 250px; } -header .avatar img { +.header-home .avatar img { + width: 250px; position: absolute; - width: 100px; margin: 0 auto; left: 0; right: 0; } -.home .avatar img { - width: 250px; -} - -header .avatarMask { - clip-path: circle(48px at center); - -webkit-clip-path: circle(48px at center); -} - -.home .avatarMask { +.header-home .avatarMask { clip-path: circle(120px at center); -webkit-clip-path: circle(120px at center); } -/* Footer */ -footer { - font-size: 12px; - box-sizing:border-box; +/* END HEADER */ + +main { + padding: 20px 10px; } +mark { + color: #707070; + font-weight: bold; +} + + /* Top page */ #profileContainer { min-height: calc(100vh - 100px); @@ -226,14 +277,20 @@ nav li { #contentBody { max-width: 800px; margin: 0 auto; - padding: 20px 0; + /* padding: 20px 10px; */ text-align: left; } -.title { - font-family: 'Comfortaa'; -} + #webmentions img { max-height: 1.2em; margin-right: -1ex; } .date-updated { margin-top: -18px; } + +/* +** Footer +*/ +footer { + font-size: 12px; + box-sizing:border-box; +} diff --git a/layouts/404.html b/layouts/404.html index a1745a8..94f1fb3 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -4,9 +4,11 @@

404 Page Not Found

{{ partial "header.html" . }} +

Go Home

+
{{ partial "footer.html" . }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index f92bca9..4c31d1e 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,9 +1,10 @@ {{ define "main"}} -

{{ .Title }}

{{ partial "header.html" . }} +
{{ .Content }}
+
{{ partial "footer.html" . }} {{ end }} \ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 8b01e81..f350917 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,6 +1,6 @@ {{ define "main"}} -

{{ .Title }}

{{ partial "header.html" . }} +
{{ if not .Date.IsZero }} {{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}} @@ -21,5 +21,6 @@
{{ .Content }}
+
{{ partial "footer.html" . }} {{ end }} diff --git a/layouts/blog/list.html b/layouts/blog/list.html index 6ac2a9f..04d4096 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -1,5 +1,6 @@ {{ define "main"}} {{ partial "header.html" . }} +
+
{{ partial "footer.html" . }} {{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }} {{ $mark := resources.Get "js/jquery.mark.es6.min.js" }} diff --git a/layouts/blog/single.html b/layouts/blog/single.html index 45476f9..107d04b 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -1,7 +1,11 @@ {{ define "main"}}
-

{{ .Title }}

+ {{ .Scratch.Set "customTitleHeaderSet" true }} + {{ .Scratch.Set "customTitleHeader" "Blog" }} + {{ .Scratch.Set "customTitleHeaderLink" "/blog" }} {{ partial "header.html" . }} +
+

{{ .Title }}

{{ if not .Date.IsZero }} @@ -46,6 +50,7 @@ +
{{ $webmentionjs := resources.Get "js/webmention.min.js" }} diff --git a/layouts/blog/terms.html b/layouts/blog/terms.html index e729689..04dd169 100644 --- a/layouts/blog/terms.html +++ b/layouts/blog/terms.html @@ -1,6 +1,7 @@ {{ define "main"}} + {{ partial "header.html" }}

{{ .Title }}

- {{ partial "header.html" . }} +
    @@ -9,5 +10,6 @@ {{ end }}
+
{{ partial "footer.html" . }} {{ end }} diff --git a/layouts/feed/list.html b/layouts/feed/list.html index 15de3f4..2d86195 100644 --- a/layouts/feed/list.html +++ b/layouts/feed/list.html @@ -1,6 +1,6 @@ {{ define "main"}} -

{{ .Title }}

{{ partial "header.html" . }} +
+
{{ partial "footer.html" . }} {{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }} {{ $mark := resources.Get "js/jquery.mark.es6.min.js" }} diff --git a/layouts/index.html b/layouts/index.html index a6475fb..516161e 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -2,9 +2,10 @@ {{- partial "head.html" . -}} +
-
+
avatar @@ -37,6 +38,7 @@
+
{{- partial "footer.html" . -}}