1
0
mirror of https://github.com/danbee/danbarber.me.hugo.git synced 2025-03-04 08:59:18 +00:00

Simplify all the things!

─────────────────────────────▄██▄
─────────────────────────────▀███
────────────────────────────────█
───────────────▄▄▄▄▄────────────█
──────────────▀▄────▀▄──────────█
──────────▄▀▀▀▄─█▄▄▄▄█▄▄─▄▀▀▀▄──█
─────────█──▄──█────────█───▄─█─█
─────────▀▄───▄▀────────▀▄───▄▀─█
──────────█▀▀▀────────────▀▀▀─█─█
──────────█───────────────────█─█
▄▀▄▄▀▄────█──▄█▀█▀█▀█▀█▀█▄────█─█
█▒▒▒▒█────█──█████████████▄───█─█
█▒▒▒▒█────█──██████████████▄──█─█
█▒▒▒▒█────█───██████████████▄─█─█
█▒▒▒▒█────█────██████████████─█─█
█▒▒▒▒█────█───██████████████▀─█─█
█▒▒▒▒█───██───██████████████──█─█
▀████▀──██▀█──█████████████▀──█▄█
──██───██──▀█──█▄█▄█▄█▄█▄█▀──▄█▀
──██──██────▀█─────────────▄▀▓█
──██─██──────▀█▀▄▄▄▄▄▄▄▄▄▀▀▓▓▓█
──████────────█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
──███─────────█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
──██──────────█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
──██──────────█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
──██─────────▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
──██────────▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
──██───────▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▌
──██──────▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▌
──██─────▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▌
──██────▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▌
This commit is contained in:
Daniel Barber 2019-10-17 19:36:48 -04:00
parent 74c18dd052
commit c91fbadd4d
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
13 changed files with 53 additions and 77 deletions

View File

@ -1,5 +1,6 @@
.photos {
padding: 8vmin $pad-min 4vmin;
padding-bottom: 4vmin;
padding-top: 1em;
}
.photos__container {

View File

@ -1,7 +1,6 @@
.post {
border-bottom: 1px dashed $border-color;
margin-top: 2em;
padding-bottom: 1.5em;
margin-bottom: 4em;
img {
max-width: 100%;
@ -10,10 +9,6 @@
& > * {
@include container
}
@media (prefers-color-scheme: dark) {
border-bottom: 1px dashed $border-color-dark;
}
}
.post__title {

View File

@ -1,9 +1,8 @@
.posts__pagination {
padding: 1em $pad-min;
}
.posts__pagination-container {
@include container;
display: flex;
margin-top: 1em;
margin-bottom: 1em;
}
.posts__next-link,

View File

@ -1,9 +1,7 @@
.site-header {
padding: 0 $pad-min;
border-bottom: 1px dashed $text-color;
@media (prefers-color-scheme: dark) {
border-bottom: 1px dashed $text-color-dark;
}
}

View File

@ -1,3 +1,3 @@
.outer {
main {
padding: 0 $pad-min;
}

View File

@ -24,11 +24,11 @@
@import "elements/headings";
@import "elements/html";
@import "elements/pre";
@import "elements/main";
// 5. Objects class-based selectors which define undecorated design patterns,
// for example media object known from OOCSS
@import "objects/container";
@import "objects/outer";
// 6. Components specific UI components.
// This is where majority of our work takes place and our UI components

View File

@ -1,11 +1,9 @@
{{ define "main" }}
<article class="post outer">
<article class="post container">
<header>
<div class="container">
<h2 class="post__title">{{.Title}}</h2>
<h2 class="post__title">{{.Title}}</h2>
<p class="post__date">{{.Date.Format "Jan 2, 2006"}}</p>
</div>
<p class="post__date">{{.Date.Format "Jan 2, 2006"}}</p>
</header>
{{.Content}}

View File

@ -1,13 +1,13 @@
{{ define "main" }}
<section class="home__about outer">
<section class="home__about">
<article class="container">
{{ .Content }}
</article>
</section>
<section class="home__photos outer">
<section class="home__photos">
<article class="container">
<header>
<header class="home__header">
<h2>Latest Photos</h2>
</header>
@ -26,21 +26,17 @@
</section>
<section class="home__blog">
<article>
<header class="outer">
<div class="container">
<h2>From the Blog</h2>
</div>
<article class="container">
<header class="home__header">
<h2>From the Blog</h2>
</header>
{{ range first 3 (where .Site.RegularPages "Section" "blog") }}
{{ partial "blog_post_summary.html" . }}
{{ end }}
<footer class="home__more outer">
<div class="container">
<p><a href="/blog">More →</a></p>
</div>
<footer class="home__more">
<p><a href="/blog">More posts →</a></p>
</footer>
</article>
</section>

View File

@ -1,7 +1,7 @@
<article class="post outer">
<header>
<div class="container">
<h3 class="post__title"><a href="{{.Permalink}}">{{.Title}}</a></h3>
<h3 class="post__title"><a href="{{.URL}}">{{.Title}}</a></h3>
<p class="post__date">{{.Date.Format "Jan 2, 2006"}}</p>
</div>
@ -10,7 +10,7 @@
{{ if .Truncated }}
{{.Summary}}
<p class="post__read-more"><a href="{{.Permalink}}">Read on →</a></p>
<p class="post__read-more"><a href="{{.URL}}">Read on →</a></p>
{{ else }}
{{.Content}}
{{ end }}

View File

@ -15,7 +15,7 @@
{{ $tiny := .Scratch.Get "tiny" }}
{{ $small := .Scratch.Get "small" }}
<a class="photos__link" href={{.Permalink}}>
<a class="photos__link" href={{.URL}}>
<img class="photos__thumb"
srcset="
{{ if ge $src.Width "300" }}

View File

@ -6,14 +6,12 @@
</section>
<section class="posts__pagination">
<div class="container posts__pagination-container">
{{ if .Paginator.HasNext }}
<a class="posts__next-link" href="{{.Paginator.Next.URL}}">← Older</a>
{{ end }}
{{ if .Paginator.HasNext }}
<a class="posts__next-link" href="{{.Paginator.Next.URL}}">← Older</a>
{{ end }}
{{ if .Paginator.HasPrev }}
<a class="posts__prev-link" href="{{.Paginator.Prev.URL}}">Newer →</a>
{{ end }}
</div>
{{ if .Paginator.HasPrev }}
<a class="posts__prev-link" href="{{.Paginator.Prev.URL}}">Newer →</a>
{{ end }}
</section>
{{ end }}

View File

@ -1,23 +1,19 @@
{{ define "main" }}
<section class="photos">
<div class="photos__container">
{{ range (.Paginator 24).Pages }}
<article class="photos__thumb-container">
{{ partial "photo_thumb.html" . }}
</article>
{{ end }}
</div>
<section class="photos photos__container">
{{ range (.Paginator 24).Pages }}
<article class="photos__thumb-container">
{{ partial "photo_thumb.html" . }}
</article>
{{ end }}
</section>
<section class="posts__pagination">
<div class="container posts__pagination-container">
{{ if .Paginator.HasNext }}
<a class="posts__next-link" href="{{.Paginator.Next.URL}}">← Older</a>
{{ end }}
{{ if .Paginator.HasNext }}
<a class="posts__next-link" href="{{.Paginator.Next.URL}}">← Older</a>
{{ end }}
{{ if .Paginator.HasPrev }}
<a class="posts__prev-link" href="{{.Paginator.Prev.URL}}">Newer →</a>
{{ end }}
</div>
{{ if .Paginator.HasPrev }}
<a class="posts__prev-link" href="{{.Paginator.Prev.URL}}">Newer →</a>
{{ end }}
</section>
{{ end }}

View File

@ -365,20 +365,16 @@ pre {
border-radius: 0.5rem;
padding: 1em; }
main {
padding: 0 6.5%; }
.container {
margin-left: auto;
margin-right: auto;
max-width: 40rem; }
.outer {
padding: 0 6.5%; }
.site-header {
padding: 0 6.5%;
border-bottom: 1px dashed #333; }
@media (prefers-color-scheme: dark) {
.site-header {
border-bottom: 1px dashed #ddd; } }
padding: 0 6.5%; }
.site-header__container {
margin-left: auto;
@ -397,10 +393,12 @@ pre {
text-align: right; }
.posts__pagination {
padding: 1em 6.5%; }
.posts__pagination-container {
display: flex; }
margin-left: auto;
margin-right: auto;
max-width: 40rem;
display: flex;
margin-top: 1em;
margin-bottom: 1em; }
.posts__next-link,
.posts__prev-link {
@ -413,18 +411,14 @@ pre {
text-align: right; }
.post {
border-bottom: 1px dashed #ccc;
margin-top: 2em;
padding-bottom: 1.5em; }
margin-bottom: 4em; }
.post img {
max-width: 100%; }
.post > * {
margin-left: auto;
margin-right: auto;
max-width: 40rem; }
@media (prefers-color-scheme: dark) {
.post {
border-bottom: 1px dashed #666; } }
.post__title {
margin-bottom: 0.25em; }
@ -436,7 +430,8 @@ pre {
text-transform: uppercase; }
.photos {
padding: 8vmin 6.5% 4vmin; }
padding-bottom: 4vmin;
padding-top: 1em; }
.photos__container {
margin-left: auto;