Redid header style, wrapped content in main tag

2024-11-21 15:56:29 -05:00 · 2022-05-08 16:11:05 -04:00 · 2022-05-08 16:11:05 -04:00 · 0824107def
commit 0824107def
parent ddaa281397
10 changed files with 147 additions and 48 deletions
--- 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;
+}
--- a/layouts/404.html
+++ b/layouts/404.html
@ -4,9 +4,11 @@
  <body>
    <h1>404 Page Not Found</h1>
    {{ partial "header.html" . }}
+    <main>
    <div class="main">
      <p><a href="{{ .Site.BaseURL }}">Go Home</a></p>
    </div>
+    </main>
    {{ partial "footer.html" . }}
  </body>
 </html>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -1,9 +1,10 @@
 {{ define "main"}}
-  <h1 class='title'>{{ .Title }}</h1>
  {{ partial "header.html" . }}
  <!-- content -->
+  <main>
  <div id="contentBody">
    {{ .Content }}
  </div>
+  </main>
  {{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -1,6 +1,6 @@
 {{ define "main"}}
-  <h1 class='title'>{{ .Title }}</h1>
  {{ partial "header.html" . }}
+  <main>
  {{ if not .Date.IsZero }}
  <!-- date -->
  {{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
@ -21,5 +21,6 @@
  <div id="contentBody">
    {{ .Content }}
  </div>
+  </main>
  {{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@ -1,5 +1,6 @@
 {{ define "main"}}
  {{ partial "header.html" . }}
+  <main>
  <!-- search box -->
  <div id="searchBox">
    <input type="text" id="searchBoxInput" placeholder="Search..." />
@ -28,6 +29,7 @@
    {{ end }}
    {{ end }}
  </div>
+  </main>
  {{ partial "footer.html" . }}
  {{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
  {{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@ -1,7 +1,11 @@
 {{ define "main"}}
  <article class="h-entry">
-  <h1 class='title p-name'>{{ .Title }}</h1>
+  {{ .Scratch.Set "customTitleHeaderSet" true }}
+  {{ .Scratch.Set "customTitleHeader" "Blog" }}
+  {{ .Scratch.Set "customTitleHeaderLink" "/blog" }}
  {{ partial "header.html" . }}
+  <main>
+  <h1 class='title'>{{ .Title }}</h1>
  <a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
  <!-- date -->
  {{ if not .Date.IsZero }}
@ -46,6 +50,7 @@
    <input type="hidden" name="target" value="{{ .Permalink }}">
    <button type="submit">Ping!</button>
  </form>
+  </main>
  {{ $webmentionjs := resources.Get "js/webmention.min.js" }}
  <script src="{{ $webmentionjs.Permalink }}" async></script>
  <!-- Metadata -->
--- a/layouts/blog/terms.html
+++ b/layouts/blog/terms.html
@ -1,6 +1,7 @@
 {{ define "main"}}
+  {{ partial "header.html" }}
  <h1>{{ .Title }}</h1>
-  {{ partial "header.html" . }}
+  <main>
  <!-- tags -->
  <div id="tags">
    <ul>
@ -9,5 +10,6 @@
      {{ end }}
    </ul>
  </div>
+  </main>
  {{ partial "footer.html" . }}
 {{ end }}
--- a/layouts/feed/list.html
+++ b/layouts/feed/list.html
@ -1,6 +1,6 @@
 {{ define "main"}}
-  <h1 class='title p-name'>{{ .Title }}</h1>
  {{ partial "header.html" . }}
+  <main>
  <!-- search box -->
  <div id="searchBox">
    <input type="text" id="searchBoxInput" placeholder="Search..." />
@ -28,6 +28,7 @@
    {{ end }}
    {{ end }}
  </div>
+  </main>
  {{ partial "footer.html" . }}
  {{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
  {{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -2,9 +2,10 @@
 <html>
  {{- partial "head.html" . -}}
  <body>
+    <main>
    <div id="profileContainer">
      <div id="profile" class="h-card">
-        <header class="home">
+        <header class="header-home">
          <!-- avator -->
          <div class="avatar">
            <img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="avatar">
@ -37,6 +38,7 @@
        </nav>
      </div>
    </div>
+  </main>
    {{- partial "footer.html" . -}}
  <script type="application/ld+json">
    {
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -1,14 +1,40 @@
-<header class="h-card p-author">
-  <!-- avator -->
-  <div class="avatar">
-    <img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="{{ .Site.Params.avatarDescription }}">
-    <a href="{{ .Site.BaseURL }}"><img class="avatar-border" src="{{ .Site.BaseURL }}/img/avatar-border.svg" alt=""></a>
-  </div>
-  <!-- author -->
+<header class="header-top">
+<div class="header-flex">
+
+  {{ $headerTitle := .Scratch.Get "customTitleHeader" }}
+  {{ $headerLink := .Scratch.Get "customTitleHeaderLink" }}
+
+  {{ if (.Scratch.Get "customTitleHeaderSet") }}
+    {{ if eq $headerTitle ""}}
+      <div></div>
+    {{ else }}
+      <h1 class='title'>
+        {{ if $headerLink }}
+          <a href="{{ $headerLink }}">
+            {{ $headerTitle }}
+          </a>
+        {{ else }}
+          {{ $headerTitle }}
+        {{ end }}
+      </h1>
+    {{ end }}
+  {{ else }}
+    <h1 class="title">{{ .Title }}</h1>
+  {{ end }}
+
+
+  <div class="h-card p-author">
    <h2 class="p-name"><a class="author u-url" rel="me" href="{{ .Site.BaseURL }}">{{ .Site.Params.Author }}</a></h2>
+    <img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="{{ .Site.Params.avatarDescription }}">
+    <div style="display: none">
        <!-- email / description (for h-card) -->
-  <a style="display: none" class="u-email" href="mailto://{{ .Site.Params.email }}"></a>
-  <p style="display: none" class="p-note">
+        <a class="u-email" href="mailto://{{ .Site.Params.email }}"></a>
+        <p class="p-note">
          {{ .Site.Params.description | safeHTML }}
        </p>
+    </div>
+  </div>
+
+
+</div>
 </header>