Skip to content
Permalink
Browse files

animations, style and tweaking some pages

  • Loading branch information
aaronpowell committed Dec 12, 2019
1 parent d8f4872 commit e0659c081f72dec7d102f8cd8f8f3aa39887b53e
@@ -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.
@@ -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>}}).

This file was deleted.

@@ -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?
@@ -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>

@@ -1,4 +1,8 @@
$xsmall: 576px;
$small: 768px;
$normal: 992px;
$wide: 1200px;
$wide: 1200px;

$primaryHighlightColour: #02bdd5;
$primaryTextColour: #555;
$primaryHeaderColour: #333;
@@ -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;
}
}
}
@@ -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;
}
@@ -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;
}
}
}
@@ -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%);
}
}
}
}
@@ -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;
}
@@ -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 }}
@@ -26,6 +26,7 @@ <h1>{{ .Title }}</h1>
<img src="{{ .Params.image | absURL }}" alt="{{ .Params.imageAlt }}" />
</div>
{{ end }}
{{ partial "series.html" . }}
<section>
{{ .Content }}
</section>
@@ -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>
@@ -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 }}

0 comments on commit e0659c0

Please sign in to comment.
You can’t perform that action at this time.