animations, style and tweaking some pages

aaronpowell · Dec 19, 2019 · e0659c0 · e0659c0
1 parent d8f4872
commit e0659c0
Show file tree

Hide file tree

Showing 15 changed files with 218 additions and 14 deletions.
diff --git a/src/content/about.md b/src/content/about.md
@@ -1,5 +1,7 @@
 ---
 hidden: true
+layout: simple
+title: About Me
 ---
 
 Hi, my name's Aaron Powell and I'm a [Cloud Developer Advocate (CDA) at Microsoft](https://developer.microsoft.com/en-us/advocates/index.html). My area of specialty is front-end web development, focusing on architecture around SPA and other UI-heavy web applications.

diff --git a/src/content/search.md b/src/content/search.md
@@ -1,6 +1,7 @@
 ---
 title: Search
 hidden: true
+layout: simple
 ---
 
 The following is an experiment in how to build a search index using [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor?{{<cda>}}).

diff --git a/src/content/speaking.md b/src/content/speaking.md
diff --git a/src/content/whatkey.md b/src/content/whatkey.md
@@ -3,6 +3,7 @@ title: "What Key"
 date: 2017-08-30T15:15:13+10:00
 draft: false
 hidden: true
+layout: simple
 ---
 
 What was the key code in JavaScript for that key you just pressed?

diff --git a/src/content/whoami.md b/src/content/whoami.md
@@ -3,6 +3,7 @@ title: "About Me"
 date: 2017-08-20T15:08:13+10:00
 draft: false
 hidden: true
+layout: simple
 ---
 <a href="#top"></a>
 

diff --git a/src/themes/aaronpowell/assets/sass/_variables.scss b/src/themes/aaronpowell/assets/sass/_variables.scss
@@ -1,4 +1,8 @@
 $xsmall: 576px;
 $small: 768px;
 $normal: 992px;
-$wide: 1200px;
+$wide: 1200px;
+
+$primaryHighlightColour: #02bdd5;
+$primaryTextColour: #555;
+$primaryHeaderColour: #333;
diff --git a/src/themes/aaronpowell/assets/sass/about.scss b/src/themes/aaronpowell/assets/sass/about.scss
@@ -1,3 +1,5 @@
+@import './animations.scss';
+
 #about {
     display: grid;
     grid-template-columns: 100px 2fr 2fr 100px;
@@ -11,10 +13,12 @@
 
     :nth-child(2) {
         grid-column: 2;
+        animation: 1s linear 0.4s 1 fadeInLeft;
     }
 
     :nth-child(3) {
         grid-column: 3;
+        animation: 1s linear 0.4s 1 fadeInRight;
 
         img {
             max-width: 400px;
@@ -24,4 +28,4 @@
     :nth-child(4) {
         grid-column: 4;
     }
-}
+}
diff --git a/src/themes/aaronpowell/assets/sass/animations.scss b/src/themes/aaronpowell/assets/sass/animations.scss
@@ -0,0 +1,63 @@
+@keyframes fadeInUp {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+}
+
+.fadeInUp {
+    animation-name: fadeInUp;
+}
+
+@keyframes fadeOutUp {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+}
+
+.fadeOutUp {
+    animation-name: fadeOutUp;
+}
+
+@keyframes fadeInLeft {
+    0% {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+}
+
+.fadeInLeft {
+    animation-name: fadeInLeft;
+}
+
+@keyframes fadeInRight {
+    0% {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+}
+
+.fadeInRight {
+    animation-name: fadeInRight;
+}
diff --git a/src/themes/aaronpowell/assets/sass/banner.scss b/src/themes/aaronpowell/assets/sass/banner.scss
@@ -1,13 +1,20 @@
+@import './variables.scss';
+@import './rotate.scss';
+@import './animations.scss';
+
 .banner {
     background-color: #263d36;
     background-position: center top;
     background-repeat: no-repeat;
     background-size: cover;
     line-height: 1.2;
-    padding: 10vw 2em;
+    padding: 5vw 2em;
     text-align: center;
     position: relative;
 
+    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid #dedede;
+
     &:before {
         content: '';
         z-index: 9;
@@ -23,4 +30,26 @@
         position: relative;
         z-index: 9;
     }
+
+    blockquote {
+        font-size: 2rem;
+
+        animation: 1s linear 0.4s 1 fadeInUp;
+
+        p {
+            font-size: 3rem;
+            margin: 10px 0px;
+        }
+
+        .rotate {
+            font-weight: bold;
+            color: $primaryHighlightColour;
+            text-shadow: 2px 2px rgba(0, 0, 0, 0.1);
+        }
+
+        &:nth-child(2) {
+            animation-delay: 0.6s;
+            font-size: 1.5rem;
+        }
+    }
 }
diff --git a/src/themes/aaronpowell/assets/sass/main.scss b/src/themes/aaronpowell/assets/sass/main.scss
@@ -1,10 +1,10 @@
 @import './scaffolding.scss';
 @import './nav.scss';
-@import './rotate.scss';
 @import './banner.scss';
 @import './about.scss';
 @import './speaking.scss';
 @import './footer.scss';
+@import './series.scss';
 
 @import url("https://fonts.googleapis.com/css?family=Rubik|Bitter");.col-xs,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12 {
     box-sizing: border-box;
@@ -14,7 +14,7 @@
 }
 
 body {
-    color: #555;
+    color: $primaryTextColour;
     font-size: 1.25rem;
     font-family: "Rubik","Poppins","Helvetica",Arial,sans-serif;
 
@@ -30,12 +30,12 @@ h3,
 h4,
 strong,
 a {
-  color: #333;
+  color: $primaryHeaderColour;
 }
 
 .main {
     header {
-        background-color: #02bdd5;
+        background-color: $primaryHighlightColour;
         color: #fff;
         padding: 20px 0px;
         text-align: center;
@@ -83,4 +83,48 @@ a {
             padding-left: 5px;
         }
     }
+}
+
+#latest-posts {
+    animation: 1s linear 0.4s 1 fadeInUp;
+}
+
+.post-list {
+    article {
+        h3 {
+            margin-bottom: 5px;
+        }
+
+        a {
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
+        .sub-header {
+            font-size: 1rem;
+            color: lighten($color: $primaryTextColour, $amount: 20%);
+            margin: 5px 0;
+        }
+
+        a.read-more {
+            text-decoration: none;
+            text-transform: uppercase;
+
+            display: inline-block;
+            padding: 10px;
+            border: 1px solid #fff;
+            box-shadow: 0 0 0 1px $primaryHighlightColour;
+            background-color: $primaryHighlightColour;
+            color: #fff;
+            transition: background-color .2s ease-in;
+
+            &:hover {
+                transition: background-color .2s ease-in;
+                background-color: darken($primaryHighlightColour, 10%);
+            }
+        }
+    }
 }
diff --git a/src/themes/aaronpowell/assets/sass/series.scss b/src/themes/aaronpowell/assets/sass/series.scss
@@ -0,0 +1,9 @@
+.series {
+    font-size: 0.7em;
+    font-style: italic;
+    border-bottom: 1px solid #ccc;
+    color: #ddd;
+}
+.series .series-intro {
+    margin-bottom: 1em;
+}
diff --git a/src/themes/aaronpowell/layouts/_default/simple.html b/src/themes/aaronpowell/layouts/_default/simple.html
@@ -0,0 +1,28 @@
+{{ define "main" }}
+
+<section class="main">
+    <header>
+        <div class="container">
+            <h1>{{ .Title }}</h1>
+        </div>
+    </header>
+    <section class="container">
+        <article>
+            <section>
+            {{ .Content }}
+            </section>
+        </article>
+    </section>
+
+    <footer>
+        {{ if and (.IsPage) (.GitInfo) }}
+        <small class="gray"><em>Published: {{ .Page.Lastmod }}, Version: <a href="https://github.com/aaronpowell/aaronpowell.github.io/commit/{{ .GitInfo.AbbreviatedHash }}" target="_blank">{{ .GitInfo.AbbreviatedHash }}</a></em></small>
+        {{ else }}
+        <small class="gray"><em>Published: {{ .Page.Lastmod }}</em></small>
+        {{ end }}
+    </footer>
+
+</section>
+
+
+{{ end }}
diff --git a/src/themes/aaronpowell/layouts/_default/single.html b/src/themes/aaronpowell/layouts/_default/single.html
@@ -26,6 +26,7 @@ <h1>{{ .Title }}</h1>
                 <img src="{{ .Params.image | absURL }}" alt="{{ .Params.imageAlt }}" />
             </div>
             {{ end }}
+            {{ partial "series.html" . }}
             <section>
             {{ .Content }}
             </section>

diff --git a/src/themes/aaronpowell/layouts/partials/post-summary.html b/src/themes/aaronpowell/layouts/partials/post-summary.html
@@ -7,5 +7,5 @@ <h3>
         {{ .Date.Format (.Site.Params.dateform | default "January 2006") }}
         · {{ .ReadingTime }} minute read
     </div>
-    <a href="{{ .Permalink }}" title="Read Post">Read Post</a>
+    <a href="{{ .Permalink }}" title="Read Post" class="read-more">Read Post</a>
 </article>
diff --git a/src/themes/aaronpowell/layouts/partials/series.html b/src/themes/aaronpowell/layouts/partials/series.html
@@ -0,0 +1,23 @@
+{{ if .Params.series }}
+    {{ $.Scratch.Add "current_link" .Permalink }}
+    {{ $.Scratch.Add "series_index" 1 }}
+    <div class="series">
+        <p class="series-intro">
+            {{ range first 1 (where .Site.RegularPages.ByDate "Params.series" .Params.series) }}
+                {{ $.Params.series_intro }}
+            {{ end }}
+        </p>
+        <ul>
+            {{ range where .Site.RegularPages.ByDate "Params.series" .Params.series }} 
+                <li>
+                    {{ if eq ($.Scratch.Get "current_link") .Permalink }}
+                        Part {{ $.Scratch.Get "series_index" }} - {{ .Params.series_title }} (this post)
+                    {{ else }}
+                        <a href="{{ .Permalink }}" title="Part {{ $.Scratch.Get "series_index" }} - {{ .Params.series_title }}">Part {{ $.Scratch.Get "series_index" }} - {{ .Params.series_title }}</a>
+                    {{ end }}
+                    {{ $.Scratch.Add "series_index" 1 }}
+                </li>
+            {{ end }}
+        </ul>
+    </div>
+{{ end }}