*Major Overhaul* Give theme a modern look!

assets/css/style.css

@@ -1,11 +1,10 @@
 body {
-    font-family: 'LatoLatinWeb', Avenir, HelveticaNeue-Light, "Helvetica Neue Light",
+    font-family: Avenir, HelveticaNeue-Light, "Helvetica Neue Light",
                  "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-    color: #141823;
+    color: #454545;
     font-size: 1.1em;
-    background-color: #ecedef;
+    background-color: #E2E5EA;
     margin: 0;
-    padding: 0 0 2em 0;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -16,13 +15,48 @@ body {
 p {
     margin: 1.5em 0;
 }
-b,
+.home-header {
-strong {
+    min-height: 26rem;
-    font-family: 'LatoLatinWebHeavy';
+    max-width: 50rem;
+    margin: 0 -1.2rem -5rem -1.2rem;
+    padding: 1.2rem;
+    display: flex;
+    flex-direction: column;
+    z-index: -1;
+    color: white;
+    background-image: url('http://localhost:1313/img/home-blob.svg');
+    background-position: center;
+    background-size: cover;
+}
+.home-faceshot-card {
+    align-self: center;
+    padding: 0.5rem;
+    margin-bottom: 3rem;
+    max-width: 17rem;
+    width: 100%;
+    background-color: white;
+    border-radius: 1.2rem;
+    box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.1);
+}
+.home-faceshot {
+    margin: 0;
+    border-radius: 0.8rem;
+}
+.home-blob-text-container {
+    margin: 2em 0;
+    line-height: 1.5;
+}
+.home-blob-title{
+    font-size: 1.5em;
     font-weight: normal;
+    margin: 0;
+}
+.home-blob-text{
+    margin: 0.5em 0 0 0;
+    font-size: 1.1em;
 }
 .nav-bar {
-    max-width: 50rem;
+    max-width: 60rem;
     width: 100%;
     padding: 0.4em 0;
     display: flex;
@@ -31,11 +65,12 @@ strong {
 }
 .nav-header {
     margin: 0;
+    font-size: 1.4em;
 }
 .nav-text {
+    font-weight: normal;
     text-decoration: none;
     z-index: 105;
-    font-size: 0.8em;
 }
 .hamburger-menu {
     display: block;
@@ -60,16 +95,16 @@ strong {
 .hamburger-menu button span {
     display: block;
     width: 33px;
-    height: 4px;
+    height: 3px;
     position: relative;
-    background-color: #141823;
+    background-color: #454545;
     border-radius: 3px;
     transform-origin: center;
     transition: transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0),
                 background-color 0.3s cubic-bezier(0.77,0.2,0.05,1.0);
 }
 .hamburger-menu button span:first-of-type {
-    margin-bottom: 5px;
+    margin-bottom: 6px;
 }
 .hamburger-menu-open button span {
     background-color: white;
@@ -109,20 +144,22 @@ strong {
 }
 .post {
     margin: 0 0 1em 0;
-    line-height: 1.6;
+    line-height: 1.9;
 }
 .post-header {
     margin: 0 0 1.5em 0;
 }
 .post-title {
     font-size: 1.8em;
+    font-weight: 500;
+    color: #2A2A84;
     line-height: 1.2;
     margin: 0 0 0.4em 0;
 }
 .post-date {
     display: block;
     color: #7a7b7c;
-    font-size: 0.8em;
+    font-size: 0.7em;
     margin: 0;
 }
 .post-figure {
@@ -132,18 +169,19 @@ strong {
     float: left;
     font-size: 3em;
     line-height: 1;
-    margin: 0.05em 0.15em -0.1em 0;
+    margin: 0.08em 0.15em -0.4em 0;
     /* initial-letter: 2; Maybe someday*/
 }
 .content {
     background-color: white;
     padding: 2em 0;
-    margin-bottom: 2em;
+    margin-bottom: 3rem;
     width: 100%;
-    max-width: 52rem;
+    max-width: 51rem;
-    border-radius: 0.3rem;
+    border-radius: 1.2rem;
+    z-index: 2;
     transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.2s cubic-bezier(0.25,0.8,0.25,1);
-    box-shadow: 0 0.7rem 1.4rem 0 rgba(0,0,0,0.25), 0 0.5rem 0.5rem 0 rgba(0,0,0,0.22);
+    box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.1);
 }
 .list-header {
     margin: 6em 0;
@@ -165,21 +203,21 @@ strong {
     line-height: 1.6em;
 }
 .card-container {
-    max-width: 49rem;
+    max-width: 48rem;
 }
-.card-container > a:first-of-type {
+/* .card-container > a:first-of-type {
     margin-top: 5em;
-}
+} */
 .card {
     display: block;
-    margin: 2.2rem 0;
+    margin: 3rem 0;
     box-sizing: border-box;
     background-color: white;
     text-decoration: none;
-    border-radius: 0.3rem;
+    border-radius: 1.2rem;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.2s cubic-bezier(0.25,0.8,0.25,1);
-    box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.19), 0 0.3rem 0.3rem -0.1rem rgba(0,0,0,0.23);
+    box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.1);
 }
 .home-card {
     padding: 0.8em;
@@ -195,22 +233,26 @@ strong {
     flex-direction: column;
     align-items: stretch;
 }
+.bc-next {
+    margin-top: 0;
+}
 .card-img-container {
     position: relative;
+    margin: 0.5rem;
 }
 .card-img {
-    border-radius: 0.3rem 0.3rem 0 0;
+    border-radius: 0.8rem;
-    margin: 0 0 -0.28em 0;
+    margin: 0 0 -0.7em 0;
     max-height: 10em;
     object-fit: cover;
 }
 .card-img-overlay {
-    border-radius: 0.3rem 0.3rem 0 0;
+    border-radius: 0.8rem 0.8rem 0 0;
     position: absolute;
     top: 0;
     font-size: 1.27em;
     text-align: center;
-    padding: 1.18em 0 0.5em 0;
+    padding: 0.77em 0;
     width: 100%;
     box-sizing: border-box;
     margin: 0;
@@ -219,15 +261,17 @@ strong {
     z-index: 5;
 }
 .card-body {
-    padding: 1em;
+    margin: 1.3em 1.5em;
+    line-height: 1.6;
 }
 .card-title {
     margin: 0;
-    line-height: 1.2;
+    color: #2A2A84;
+    font-size: 1.3em;
+    font-weight: 500;
 }
 .card-text {
     margin: 1em 0;
-    line-height: 1.5;
 }
 .card-subtext {
     display: flex;
@@ -246,16 +290,17 @@ strong {
 }
 .end-nav {
     width: 100%;
-    max-width: 49rem;
+    max-width: 48rem;
+    z-index: 2;
 }
 .pagination-nav {
     margin: 2em 0;
     width: 100%;
     max-width: 47rem;
 }
-.pagination-text {
+/* .pagination-text {
     font-family: 'LatoLatinWebMedium';
-}
+} */
 .pagination-newer {
     float:left;
 }
@@ -268,7 +313,7 @@ strong {
     text-decoration: none;
     border-radius: 0.3rem;
     transition: transform 0.1s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.1s cubic-bezier(0.25,0.8,0.25,1);
-    box-shadow: 0 0.15rem 0.3rem rgba(0,0,0,0.16), 0 0.15rem 0.3rem rgba(0,0,0,0.23);
+    box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.1);
 }
 .button:hover {
     box-shadow: 0 0.05rem 0.15rem rgba(0,0,0,0.12), 0 0.05rem 0.1rem rgba(0,0,0,0.24);
@@ -301,7 +346,7 @@ strong {
     margin: 0 auto 1.5em auto;
 }
 .muted-text {
-    color: #7a7b7c;
+    color: #8E8E8E;
 }
 .katex-display {
     margin: 1.5em 0;
@@ -373,7 +418,7 @@ hr {
     clear: both;
 }
 a {
-    color: #141823;
+    color: #454545;
 }
 table {
     color: #141823;
@@ -386,27 +431,44 @@ th {
     padding: 0.5em 1em;
     border: thin solid #D1D1D1
 }
-th {
+/* th {
     font-family: 'LatoLatinWebHeavy';
     font-weight: normal;
-}
+} */
 tr:nth-child(even) td {
     background: #f5f6f7;
 }
 footer {
-    padding: 2em 0;
+    height: 17rem;
-    margin: 2em 0 0 0;
+    max-width: 50rem;
+    width: 100%;
+    margin-top: -10rem;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-evenly;
+    align-items: flex-end;
+    color: white;
+    background-image: url('http://localhost:1313/img/home-blob-flip.svg');
+    background-position: 40% 0%;
+    background-size: 50rem;
+}
+.footer-link {
+    margin: 1rem 0;
+}
+.footer-icon {
+    max-width: 4rem;
+    margin: 0;
 }
 @media screen and (pointer: coarse) {
- .card-hover {
+    .card-hover {
-    transform: scale(0.95);
+        transform: scale(0.95);
-    box-shadow: 0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.16), 0 0.15rem 0.3rem -0.04rem rgba(0, 0, 0, 0.23);
+        box-shadow: 0 0.4rem 2rem 0 rgba(0,0,0,0.2);
     }
 }
 @media not screen and (pointer: coarse) {
     .card:hover {
         transform: scale(0.97);
-        box-shadow: 0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.16), 0 0.15rem 0.3rem -0.04rem rgba(0, 0, 0, 0.23);
+        box-shadow: 0 0.4rem 2rem 0 rgba(0,0,0,0.2);
     }
     .card:active {
         transform: scale(1);
@@ -417,6 +479,17 @@ footer {
     body {
         font-size: 1.15rem;
     }
+    .home-header {
+        flex-direction: row;
+        align-items: flex-start;
+    }
+    .home-blob-text-container {
+        margin: 4rem 2rem 4rem 6rem;
+        flex-shrink: 10;
+    }
+    .home-faceshot-card {
+        align-self: unset;
+    }
     .nav-bar {
         padding: 0.8em 0;
     }
@@ -424,45 +497,41 @@ footer {
         font-weight: normal;
         font-size: 4.2em;
     }
-    .card {
-        border-radius: 0.2rem;
-        /* margin: 2.5em 0; */
-    }
     .blog-card {
         flex-direction: row;
         align-items: stretch;
     }
     .card-img {
-        border-radius: 0.2rem 0 0 0.2rem;
         margin: 0;
         max-height: unset;
         height: 100%;
-        width: 15em;
+        width: 16em;
     }
     .card-img-overlay {
-        border-radius: 0.2rem 0 0 0;
+        border-radius: 0.8rem 0.8rem 0 0;
     }
     .card-body {
-        padding: 1.5em 1.3em;
+        margin: 1.3em 1.7em;
     }
     .card-title {
-        font-size: 1.27em;
+        font-size: 1.3em;
     }
     .card-text {
-        font-size: 0.95em;
+        font-size: 0.9em;
-        margin: 1.2em 0;
+        margin: 0.8em 0 1.2em 0;
     }
     .card-subtext {
         font-size: 0.7em;
+        margin-bottom: 0.7em;
     }
     .content {
-        border-radius: 0.2rem;
+        border-radius: 1.2rem;
     }
     .post {
-        margin: 1em 1em 2em 1em;
+        margin: 1em 1.8em 2em 1.8em;
     }
     .post-title {
-        font-size: 2.5em;
+        font-size: 2em;
     }
     .button {
         border-radius: 0.2rem;

layouts/_default/home.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode }}" dir="ltr">
+  {{ partial "head.html" . }}
+  <body class="list-body">
+    {{ partial "nav-bar.html" . }}
+    <main class="card-container side-gutter">
+      {{ if or (not (eq .Description "")) (not (eq .Title "")) -}}
+      <header class="home-header">
+        <div class="home-blob-text-container">
+        {{ with .Title }}<h1 class="home-blob-title">{{ . }}</h1>{{ end }}
+        {{ with .Description }}<p class="home-blob-text">{{ . }}</p>{{ end }}
+        </div>
+        {{ with resources.Get "img/faceshot.png" -}}
+        <div class="home-faceshot-card">
+          <img class="home-faceshot" src="{{ .Permalink }}" >
+        </div>
+        {{ end -}}
+      </header>
+      {{- end }}
+      {{ with .Content -}}
+      <section class="list-header-content">
+        {{ . }}
+      </section>
+      {{- end }}
+      {{ $pages := .Pages }}
+      {{ if .IsHome }}
+      {{ $pages = .Site.RegularPages }}
+      {{ end }}
+      {{ $paginator := .Paginate (where $pages "Params.displayinlist" "!=" false) -}}
+      {{- range $paginator.Pages -}}
+        {{ .Render "li" }}
+      {{- end }}
+    </main>
+    {{ if or ($paginator.HasPrev) ($paginator.HasNext) -}}
+    <nav class="pagination-nav side-padding">
+      {{ if $paginator.HasPrev }}<a href="{{ $paginator.Prev.URL }}" class="pagination-newer pagination-text">&lt; Newer Posts</a>{{ end }}
+      {{ if $paginator.HasNext }}<a href="{{ $paginator.Next.URL }}" class="pagination-older pagination-text">Older Posts &gt;</a>{{ end }}
+    </nav>
+    {{- end }}
+    {{ partial "scripts.html" . }}
+  </body>
+</html>

layouts/_default/li-next.html

@@ -1,5 +1,5 @@
 <a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" ontouchmove="cardReleased.call(this)" 
-  href="{{ .Permalink }}" class="card blog-card" rel="bookmark" >
+  href="{{ .Permalink }}" class="card blog-card bc-next" rel="bookmark" >
   {{ with .Resources.GetMatch "featuredImage" }}
   <div class="card-img-container">
     <p class="card-img-overlay">Next Article</p>

layouts/_default/li.html

@@ -6,7 +6,7 @@
       {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}}
       <source srcset="{{ .Permalink }}" type="image/webp">
       {{- end }}
-      {{ $thumbnail := .Fit "400x300 Lanczos" }}
+      {{ $thumbnail := .Fit "800x600 Lanczos" }}
       <source srcset="{{ $thumbnail.Permalink }}">
       <img src="{{ $thumbnail.Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
     </picture>

layouts/_default/single.html

@@ -31,8 +31,8 @@
       {{ with .PrevInSection }}
       {{ .Render "li-next" }}
       {{ end }}
-      {{ partial "home-card.html" . }}
     </nav>
+    {{ partial "footer.html" . }}
     {{ partial "scripts.html" . }}
   </body>
 </html>

layouts/partials/footer.html

@@ -1,3 +1,21 @@
-<footer>
+<footer class="side-padding">
-    
+    <a href="{{ $.Site.BaseURL }}" class="footer-link">
+    {{ with resources.Get "icons/home-page.png" }}
+        <img class="footer-icon" src="{{ .Permalink }}">
+    {{ end }}
+    </a>
+    {{ if isset $.Site.Params "github"}}
+    <a href="{{ $.Site.Params.github }}" class="footer-link">
+    {{ with resources.Get "icons/github.png" }}
+        <img class="footer-icon" src="{{ .Permalink }}" />
+    {{ end }}
+    </a>
+    {{ end }}
+    {{ if isset $.Site.Params "linkedin"}}
+    <a href="{{ $.Site.Params.linkedin }}" class="footer-link">
+    {{ with resources.Get "icons/linkedin.png" }}
+        <img class="footer-icon" src="{{ .Permalink }}" />
+    {{ end }}
+    </a>
+    {{ end }}
 </footer>

layouts/partials/head.html

@@ -27,9 +27,8 @@
   {{ end -}}
   {{ $normalizeStyle := resources.Get "css/normalize.css" }}
   {{ $mainStyle := resources.Get "css/style.css" }}
-  {{ $fontStyle := resources.Get "css/latolatinfonts.css" }}
   {{ $overrideStyle := resources.Get "css/override.css" }}
-  {{ $style := slice $normalizeStyle $fontStyle $mainStyle $overrideStyle | resources.Concat "css/concated.css" | minify }}
+  {{ $style := slice $normalizeStyle $mainStyle $overrideStyle | resources.Concat "css/concated.css" | minify }}
   <link href="{{ $style.Permalink }}" rel="stylesheet">
   {{ range .AlternativeOutputFormats -}}
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}

static/img/home-blob-flip.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1063.882" height="599.449" viewBox="0 0 1063.882 599.449">
+  <defs>
+    <filter id="Path_3" x="0" y="0" width="1063.882" height="599.449" filterUnits="userSpaceOnUse">
+      <feOffset dy="5" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="7.5" result="blur"/>
+      <feFlood flood-opacity="0.251"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="Path_6" x="61.201" y="85.157" width="864.12" height="505.297" filterUnits="userSpaceOnUse">
+      <feOffset dy="5" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="7.5" result="blur-2"/>
+      <feFlood flood-opacity="0.251"/>
+      <feComposite operator="in" in2="blur-2"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g id="cool-background" transform="translate(22.5 17.5)">
+    <path id="Path_1" data-name="Path 1" d="M727.865,81.108q-27.1-60.347,10.248-75.669C775.461-9.884,864.267-16.013,901.388-49.251s150.3-7.543,169.659,49.5,54.209,144.974-129.57,144.974q-183.78,0-213.612-64.118Z" transform="translate(-481.865 376.242)" fill="#fffa72"/>
+    <g transform="matrix(1, 0, 0, 1, -22.5, -17.5)" filter="url(#Path_3)">
+      <path id="Path_3-2" data-name="Path 3" d="M343.971,269.935q8.609-159.92,128-200.524c119.392-40.6,362.9-56.846,505.563-144.927S1385.888-95.5,1361.159,55.669s-49.551,384.18-536.564,384.18q-487.018,0-480.622-169.914Z" transform="translate(-321.39 132.1)" fill="#2a2a84"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, -22.5, -17.5)" filter="url(#Path_6)">
+      <path id="Path_6-2" data-name="Path 6" d="M442.65,218.437Q429.712,85.673,523.73,51.964C617.749,18.255,817.863,4.771,925.24-68.353S1261.74-84.947,1260.2,40.555,1267.311,359.5,863,359.5q-404.317,0-420.347-141.06Z" transform="translate(-357.38 203.46)" fill="#6fc97d"/>
+    </g>
+  </g>
+</svg>

static/img/home-blob.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1063.882" height="599.449" viewBox="0 0 1063.882 599.449">
+  <defs>
+    <filter id="Path_3" x="0" y="0" width="1063.882" height="599.449" filterUnits="userSpaceOnUse">
+      <feOffset dy="5" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="7.5" result="blur"/>
+      <feFlood flood-opacity="0.251"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="Path_6" x="61.201" y="8.995" width="864.12" height="505.297" filterUnits="userSpaceOnUse">
+      <feOffset dy="5" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="7.5" result="blur-2"/>
+      <feFlood flood-opacity="0.251"/>
+      <feComposite operator="in" in2="blur-2"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g id="cool-background" transform="translate(-309.407 133.702)">
+    <path id="Path_1" data-name="Path 1" d="M727.865.118q-27.1,60.347,10.248,75.669c37.348,15.322,126.154,21.451,163.275,54.689s150.3,7.543,169.659-49.5S1125.256-64,941.478-64Q757.7-64,727.866.118Z" transform="translate(-149.958 -19.221)" fill="#fffa72"/>
+    <g transform="matrix(1, 0, 0, 1, 309.41, -133.7)" filter="url(#Path_3)">
+      <path id="Path_3-2" data-name="Path 3" d="M343.971,55.314q8.609,159.92,128,200.524c119.392,40.6,362.9,56.846,505.563,144.927s408.353,19.988,383.624-131.185S1311.607-114.6,824.594-114.6q-487.018,0-480.622,169.914Z" transform="translate(-321.39 132.1)" fill="#2a2a84"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 309.41, -133.7)" filter="url(#Path_6)">
+      <path id="Path_6-2" data-name="Path 6" d="M442.65,40.26q-12.938,132.764,81.08,166.473c94.019,33.709,294.133,47.193,401.51,120.317s336.5,16.594,334.956-108.908S1267.311-100.8,863-100.8q-404.317,0-420.347,141.06Z" transform="translate(-357.38 127.29)" fill="#6fc97d"/>
+    </g>
+  </g>
+</svg>