keywordsalad
/
thisfieldwas.green
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixing asides padding

enp1-edits
Logan McGrath 2022-03-13 15:05:21 -07:00
parent c497da67df
commit 9f96776485
3 changed files with 42 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
site/_templates/image-figure.html
View File

@ -1,14 +1,16 @@
<figure {{#if id}}id="{{id}}"{{#end}} class="image">
<p class="content">
<a href="{{src}}" class="image-link">
<img src="{{src}}"{{#if id}} id="{{id}}-img"{{#end-}}
{{#if title}} title="{{title}}"{{#end-}}
{{#if (alt | default title)}} alt="{{alt | default title}}"{{#end-}}
{{#if width}} width="{{width}}"{{#end-}}
{{#if height}} height="{{height}}"{{#end-}}>
</a>
</p>
{{#if title-}}
<figcaption>{{title}}</figcaption>
{{-#end}}
<div class="aside-content">
<p class="content">
<a href="{{src}}" class="image-link">
<img src="{{src}}"{{#if id}} id="{{id}}-img"{{#end-}}
{{#if title}} title="{{title}}"{{#end-}}
{{#if (alt | default title)}} alt="{{alt | default title}}"{{#end-}}
{{#if width}} width="{{width}}"{{#end-}}
{{#if height}} height="{{height}}"{{#end-}}>
</a>
</p>
{{#if title-}}
<figcaption>{{title}}</figcaption>
{{-#end}}
</div>
</figure>

12
site/css/elements/_asides.scss
View File

@ -54,7 +54,15 @@ aside, figure {
}
}
figcaption {
@include block;
.aside-content {
padding: 1em 0.5em;
& > *:first-child {
margin-top: 0;
}
& > *:last-child {
margin-bottom: 0;
}
}
}

32
site/index.html
View File

@ -8,13 +8,15 @@ stylesheets:
---
<h2>Hello!</h2>
<aside class="meatball-headshot">
<picture>
<img width="288" height="384"
src="{{getUrl 'images/about-me/headshot-w-meatball-doge_400w.png'}}"
title="Myself and Meatball. He's cute cuz he's little."
alt="Mysql and Meatball">
</picture>
<p>Myself and Meatball, who is a very good boy and wearing his very best treat face.</p>
<div class="aside-content">
<picture>
<img width="288" height="384"
src="{{getUrl 'images/about-me/headshot-w-meatball-doge_400w.png'}}"
title="Myself and Meatball. He's cute cuz he's little."
alt="Mysql and Meatball">
</picture>
<p>Myself and Meatball, who is a very good boy and wearing his very best treat face.</p>
</div>
</aside>
<p>
I'm Logan McGrath, I'm a senior software engineer, and I specialize in a segment of software applications engineering that sits between the framework and the business logic. In my day job at <a href="https://creditkarma.com">Credit Karma</a> I work with a team to provide building blocks with which my fellow product engineers can write less code and more quickly deliver valuable features to members. By night I dabble in esoteric programming languages, theories, and tools to better hone my craft. It's what I like to do when my husband isn't encouraging me to go play outside.
@ -125,13 +127,15 @@ stylesheets:
<em>As this is my site and my life, all opinions I express here are my own. Opinions being what they are, I recognize that I might be wrong and openly invite learning opportunities.</em>
</p>
<aside class="meatball-jellybean">
<picture>
<img width="200" height="266"
src="{{getUrl 'images/about-me/meatball-n-jelly-doges_400w.png'}}"
title="Meatball is the little one, Jellybean is the big one."
alt="Meatball and Jellybean">
</picture>
<p>The little one is Meatball, the big one is Jellybean. Both are very good boys, <em>and they both know I have a treat in my hand.</em></p>
<div class="aside-content">
<picture>
<img width="200" height="266"
src="{{getUrl 'images/about-me/meatball-n-jelly-doges_400w.png'}}"
title="Meatball is the little one, Jellybean is the big one."
alt="Meatball and Jellybean">
</picture>
<p>The little one is Meatball, the big one is Jellybean. Both are very good boys, <em>and they both know I have a treat in my hand.</em></p>
</div>
</aside>
<p>
I like to share what makes life worthwhile. Sometimes that's helping my dogs figure out something new, or finding a really cool trick at work that helps my team out. Sometimes hard things have to happen in order for life to be worthwhile, and I can't promise that reading about what I share is easy. I've come to good places by way of some painful lessons both personally and professionally.