diff --git a/src/content/about.md b/src/content/about.md index 0202f67f..2369383b 100644 --- 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 index b3add1cf..ad2efd8f 100644 --- 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?{{}}). diff --git a/src/content/speaking.md b/src/content/speaking.md deleted file mode 100644 index 2fe02ce4..00000000 --- a/src/content/speaking.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -hidden: true ---- -I currently have no speaking engagements. - -Interested in any of my talks? Get in touch! diff --git a/src/content/whatkey.md b/src/content/whatkey.md index 5783dcb6..0f8f9c3d 100644 --- 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 index c0cf8235..0f5907ad 100644 --- 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 --- diff --git a/src/themes/aaronpowell/assets/sass/_variables.scss b/src/themes/aaronpowell/assets/sass/_variables.scss index b3adddfe..884c900b 100644 --- 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; \ No newline at end of file +$wide: 1200px; + +$primaryHighlightColour: #02bdd5; +$primaryTextColour: #555; +$primaryHeaderColour: #333; \ No newline at end of file diff --git a/src/themes/aaronpowell/assets/sass/about.scss b/src/themes/aaronpowell/assets/sass/about.scss index 383d72ba..a04299af 100644 --- 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; } -} \ No newline at end of file +} diff --git a/src/themes/aaronpowell/assets/sass/animations.scss b/src/themes/aaronpowell/assets/sass/animations.scss new file mode 100644 index 00000000..d4d1ea61 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/themes/aaronpowell/assets/sass/banner.scss b/src/themes/aaronpowell/assets/sass/banner.scss index 6a16d829..94acdb48 100644 --- 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; + } + } } \ No newline at end of file diff --git a/src/themes/aaronpowell/assets/sass/main.scss b/src/themes/aaronpowell/assets/sass/main.scss index 5f531f04..d28f73ad 100644 --- 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","Hel­vetica",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%); + } + } + } } \ No newline at end of file diff --git a/src/themes/aaronpowell/assets/sass/series.scss b/src/themes/aaronpowell/assets/sass/series.scss new file mode 100644 index 00000000..424b4c35 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/themes/aaronpowell/layouts/_default/simple.html b/src/themes/aaronpowell/layouts/_default/simple.html new file mode 100644 index 00000000..cd61af2d --- /dev/null +++ b/src/themes/aaronpowell/layouts/_default/simple.html @@ -0,0 +1,28 @@ +{{ define "main" }} + +
+
+
+

{{ .Title }}

+
+
+
+
+
+ {{ .Content }} +
+
+
+ +
+ {{ if and (.IsPage) (.GitInfo) }} + Published: {{ .Page.Lastmod }}, Version: {{ .GitInfo.AbbreviatedHash }} + {{ else }} + Published: {{ .Page.Lastmod }} + {{ end }} +
+ +
+ + +{{ end }} \ No newline at end of file diff --git a/src/themes/aaronpowell/layouts/_default/single.html b/src/themes/aaronpowell/layouts/_default/single.html index c05258b3..3a1dba78 100644 --- a/src/themes/aaronpowell/layouts/_default/single.html +++ b/src/themes/aaronpowell/layouts/_default/single.html @@ -26,6 +26,7 @@

{{ .Title }}

{{ .Params.imageAlt }} {{ end }} + {{ partial "series.html" . }}
{{ .Content }}
diff --git a/src/themes/aaronpowell/layouts/partials/post-summary.html b/src/themes/aaronpowell/layouts/partials/post-summary.html index 15f6b90a..d0abbdee 100644 --- a/src/themes/aaronpowell/layouts/partials/post-summary.html +++ b/src/themes/aaronpowell/layouts/partials/post-summary.html @@ -7,5 +7,5 @@

{{ .Date.Format (.Site.Params.dateform | default "January 2006") }} · {{ .ReadingTime }} minute read - Read Post + Read Post \ No newline at end of file diff --git a/src/themes/aaronpowell/layouts/partials/series.html b/src/themes/aaronpowell/layouts/partials/series.html new file mode 100644 index 00000000..a66b18d4 --- /dev/null +++ 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 }} +
+

+ {{ range first 1 (where .Site.RegularPages.ByDate "Params.series" .Params.series) }} + {{ $.Params.series_intro }} + {{ end }} +

+
    + {{ range where .Site.RegularPages.ByDate "Params.series" .Params.series }} +
  • + {{ if eq ($.Scratch.Get "current_link") .Permalink }} + Part {{ $.Scratch.Get "series_index" }} - {{ .Params.series_title }} (this post) + {{ else }} + Part {{ $.Scratch.Get "series_index" }} - {{ .Params.series_title }} + {{ end }} + {{ $.Scratch.Add "series_index" 1 }} +
    • + {{ end }} +
+
+{{ end }} \ No newline at end of file