Merge branch 'ua-style' into main
This commit is contained in:
commit
c4ef9dead1
25 changed files with 524 additions and 93 deletions
|
@ -1,7 +1,6 @@
|
|||
baseURL = 'https://new.erynwells.me/'
|
||||
languageCode = 'en-us'
|
||||
title = 'Erynwells.me'
|
||||
theme = 'paper'
|
||||
defaultContentLanguage = 'en'
|
||||
|
||||
[author]
|
||||
|
@ -27,6 +26,7 @@ name = 'Eryn Wells'
|
|||
twitter = 'erynofwales'
|
||||
github = 'erynofwales'
|
||||
instagram = 'erynofwales'
|
||||
description = 'Home page of Eryn Wells'
|
||||
|
||||
[permalinks]
|
||||
posts = 'posts/:year/:month/:slug/'
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
# Hola! 👋🏻
|
||||
|
||||
Soy Eryn. Mis pronombres son [ella/ella][p]. Esta es me página personal. Bienvenide.
|
||||
|
||||
## Personal
|
||||
Me llamo Eryn. Mis pronombres son [ella/ella][p]. Esta es me página personal. Bienvenide.
|
||||
|
||||
Soy una mujer trans y queer. Vivo en San Francisco con mis [dos gatos][cats]. Nací en Seattle, WA, y crecía en Phoenix, AZ. Asistí [Oberlin College][ob] donde obtuve un títolo en informática. {{< tess >}} es mi novia.
|
||||
|
||||
|
@ -11,7 +9,7 @@ Mi lengua nativa es inglés, y también hablo español pero siempre necesito pra
|
|||
## Pasatiemos
|
||||
|
||||
Tengo un gran apetito por probar y aprender pasatiemos nuevas, especialmente las
|
||||
que combinan varias de mis intereses o que me alejan de la computadora.
|
||||
que combinan varias de mis intereses.
|
||||
|
||||
He sido música para el gran parte de mi vida. Empezé tocar el piano cuando tuve
|
||||
siete años, toqué la trompeta en colegio, y he tocado algunos otros instrumentos
|
||||
|
|
|
@ -2,18 +2,17 @@
|
|||
|
||||
I'm Eryn. My pronouns are [she/her][p]. This is my personal page. Welcome!
|
||||
|
||||
## Personal
|
||||
|
||||
I'm a queer trans woman. I live in San Francisco with my [two cats][cats]. I was
|
||||
born in Seattle, WA and grew up in Phoenix, AZ. I attended [Oberlin College][ob]
|
||||
where I got a degree in Computer Science. {{< tess >}} is my girlfriend.
|
||||
I'm a queer trans woman. I live in San Francisco, CA, on the unceded ancestral
|
||||
lands of the Ramaytush Ohlone people, with my [two cats][cats]. I was born in
|
||||
Seattle, WA and grew up in Phoenix, AZ. I attended [Oberlin College][ob] where I
|
||||
got a degree in Computer Science. {{< tess >}} is my girlfriend.
|
||||
|
||||
I speak English natively, and Spanish too, though I always need more practice.
|
||||
|
||||
## Hobbies
|
||||
|
||||
I have a big appetite for learning new skills, especially things that combine
|
||||
multiple of my interests or get me away from my computer.
|
||||
multiple of my interests.
|
||||
|
||||
I've been a musician for most of my life. I started on the piano at age seven,
|
||||
played trumpet in high school, and have picked up a smattering of other
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: "日本町"
|
||||
slug: "nihonmachi"
|
||||
date: 2021-09-27T08:08:59-07:00
|
||||
description: A quick staycation getaway to San Francisco's Japantown with Tess.
|
||||
draft: false
|
||||
resources:
|
||||
- name: "buchanan"
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: "PNW Reunion Trip"
|
||||
date: 2021-10-16T12:00:00-07:00
|
||||
description: A recap of a trip I took to the Pacific Northwest with some high school friends.
|
||||
draft: false
|
||||
resources:
|
||||
- name: friends
|
||||
|
|
43
content/posts/2021/10/pnw/index.md
Normal file
43
content/posts/2021/10/pnw/index.md
Normal file
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
title: "Pacific Northwest"
|
||||
date: 2021-10-15T16:39:55-07:00
|
||||
draft: true
|
||||
tags: ["Travel"]
|
||||
---
|
||||
|
||||
## Portland
|
||||
|
||||
Our first weekend, we stayed in Portland, OR. We rented a great three-story
|
||||
house on the north side of the city that was great for all 10 of us to hang out.
|
||||
On our one full day there, we went to Powell Books and Deschutes Brewery.
|
||||
|
||||
On the way up, we all stopped in Olympia, WA for a break and some lunch. Some of
|
||||
us stopped for oysters along the Hood Canal too. Our final destination was a
|
||||
house in the woods outside of Port Angeles.
|
||||
|
||||
## Freshwater Bay
|
||||
|
||||
Our first day in Port Angeles we went kayaking on Freshwater Bay. We say river otters, sea
|
||||
otters, and a baby sea lion! Our guide shared a bunch of cool stuff about the
|
||||
kelp forests along the coast too.
|
||||
|
||||
## Hurricane Ridge
|
||||
|
||||
The second day we drove up to Hurricane Ridge where it was snowing. None of us
|
||||
was really expecting such a dramatic change in weather. The snow was beuatiful,
|
||||
but we were all a bit unprepared.
|
||||
|
||||
## Hoh Rainforest
|
||||
|
||||
The next day, we took a long drive around the Olympic Peninsula to visit the Hoh
|
||||
Rainforest. We hiked through the Hall of Mosses, and along the Hoh River for a
|
||||
while. We stopped along the riverbank to skip stones before heading back to our
|
||||
cars. On the way back to Port Angeles, we took a short detour to Rialto Beach, a
|
||||
rocky windswept beach covered in seafoam and driftwood. It was overcast and a
|
||||
little foggy but beautiful.
|
||||
|
||||
## Lake Crescent
|
||||
|
||||
The last full day of our time in Port Angeles, we took a short trip to Lake
|
||||
Crescent and nearby Marymere Falls. It was a short hike up to the falls. A
|
||||
little rainy but nothing we couldn't handle.
|
4
content/posts/_index.md
Normal file
4
content/posts/_index.md
Normal file
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: "Posts"
|
||||
description: "Posts"
|
||||
---
|
33
content/posts/style.css
Normal file
33
content/posts/style.css
Normal file
|
@ -0,0 +1,33 @@
|
|||
/* posts/style.css
|
||||
* Eryn Wells <eryn@erynwells.me>
|
||||
*/
|
||||
|
||||
.post-list h1,
|
||||
.post-list h2,
|
||||
.post-list h3,
|
||||
.post-list h4,
|
||||
.post-list h5,
|
||||
.post-list h6 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post-list h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.post-list li + li {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.post-list time {
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.post-list article {
|
||||
color: gray;
|
||||
font-style: oblique;
|
||||
font-size: 1.8rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
|
@ -5,8 +5,6 @@ draft: false
|
|||
type: resume
|
||||
---
|
||||
|
||||
## Experience
|
||||
|
||||
{{< resume_section company="Apple" team="Authentication Experience" from=2019 >}}
|
||||
|
||||
- Presented a video at WWDC 2021 called [Secure login with iCloud Keychain
|
22
content/resume/style.css
Normal file
22
content/resume/style.css
Normal file
|
@ -0,0 +1,22 @@
|
|||
/* resume.css
|
||||
* Eryn Wells <eryn@erynwells.me>
|
||||
*/
|
||||
|
||||
.flex-date {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.flex-date .date {
|
||||
margin-left: auto;
|
||||
font-size: 1.9rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 0;
|
||||
}
|
|
@ -4,23 +4,23 @@
|
|||
|
||||
<body class="not-ready" data-menu="{{ isset site.Menus `main` }}">
|
||||
{{ partial "header.html" . }}
|
||||
|
||||
<main class="main">{{ block "main" . }}{{ end }}</main>
|
||||
|
||||
<main class="main">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
</body>
|
||||
<script>
|
||||
let bodyClx = document.body.classList;
|
||||
let sysDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
let darkVal = localStorage.getItem('dark');
|
||||
let bodyClasses = document.body.classList;
|
||||
let systemDarkModeMatch = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
let localStorageDarkMode = localStorage.getItem('dark');
|
||||
|
||||
let setDark = (isDark) => {
|
||||
bodyClx[isDark ? 'add' : 'remove']('dark');
|
||||
bodyClasses[isDark ? 'add' : 'remove']('dark');
|
||||
localStorage.setItem('dark', isDark ? 'yes' : 'no');
|
||||
};
|
||||
|
||||
setDark(darkVal ? darkVal === 'yes' : sysDark.matches);
|
||||
requestAnimationFrame(() => bodyClx.remove('not-ready'));
|
||||
sysDark.addEventListener('change', (event) => setDark(event.matches));
|
||||
setDark(localStorageDarkMode ? localStorageDarkMode === 'yes' : systemDarkModeMatch.matches);
|
||||
requestAnimationFrame(() => bodyClasses.remove('not-ready'));
|
||||
systemDarkModeMatch.addEventListener('change', (event) => setDark(event.matches));
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
@ -5,19 +5,31 @@
|
|||
<h1 class="main-title">{{ .Title }}</h1>
|
||||
{{ end }}
|
||||
|
||||
<!-- $pages -->
|
||||
{{ $pages := union .RegularPages .Sections }}
|
||||
<!---->{{ if .IsHome }} {{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}
|
||||
{{ if .IsHome }}
|
||||
{{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}
|
||||
{{ end }}
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
<!-- Articles -->
|
||||
{{ $paginator := .Paginate $pages }} {{ range $index, $page := $paginator.Pages }}
|
||||
<article class="post-entry">
|
||||
<h2>{{ .Title }}</h2>
|
||||
<time>{{ .Date | time.Format "Jan 2, 2006" }}</time>
|
||||
<a href="{{ .Permalink }}"></a>
|
||||
</article>
|
||||
<ul class="post-list">
|
||||
{{ $paginator := .Paginate $pages }}
|
||||
{{ range $index, $page := $paginator.Pages }}
|
||||
<li class="post-entry">
|
||||
<header>
|
||||
<h2>
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</h2>
|
||||
<time datetime="{{ .Date | time.Format " 2006-01-02" }}">{{ .Date | time.Format "Jan 2, 2006" }}</time>
|
||||
{{ partial "development/draft_tag.html" . }}
|
||||
</header>
|
||||
{{ if .Description }}
|
||||
<article>{{ .Description }}</article>
|
||||
{{ end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
<!-- Main Nav -->
|
||||
{{ if gt $paginator.TotalPages 1 }}
|
||||
|
|
|
@ -1,20 +1,19 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<article class="post-single">
|
||||
<header class="post-title">
|
||||
<p>
|
||||
<time>{{ .Date | time.Format "Jan 2, 2006" }}</time>
|
||||
</p>
|
||||
<h1>{{ .Title }}</h1>
|
||||
<h1>{{ .Title }}{{ partial "development/draft_tag.html" . }}</h1>
|
||||
<span class="post-date"><time>{{ .Date | time.Format "Jan 2, 2006" }}</time></p>
|
||||
</header>
|
||||
<section class="post-content">{{ .Content }}</section>
|
||||
|
||||
<!-- Post Tags -->
|
||||
{{ if .Params.tags }}
|
||||
<footer class="post-tags">
|
||||
<footer>
|
||||
<ul class="post-tags">
|
||||
{{ range .Params.tags }} {{ $href := print (absURL "tags/") (urlize .) }}
|
||||
<a href="{{ $href }}">{{ . }}</a>
|
||||
<li><a href="{{ $href }}">{{ . }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</footer>
|
||||
{{ end }}
|
||||
|
||||
|
@ -29,18 +28,5 @@
|
|||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
<!-- Disqus -->
|
||||
{{ if and site.DisqusShortname (not (eq .Params.comments false)) }}
|
||||
<div id="disqus_thread" class="post-comments"></div>
|
||||
<script>
|
||||
var disqusShortname = '{{ site.DisqusShortname }}';
|
||||
var script = document.createElement('script');
|
||||
script.src = 'https://' + disqusShortname + '.disqus.com/embed.js';
|
||||
script.setAttribute('data-timestamp', +new Date());
|
||||
document.head.appendChild(script);
|
||||
</script>
|
||||
{{ end }}
|
||||
</article>
|
||||
|
||||
{{ end }}
|
||||
|
|
3
layouts/partials/development/draft_tag.html
Normal file
3
layouts/partials/development/draft_tag.html
Normal file
|
@ -0,0 +1,3 @@
|
|||
{{ if in (.Site.BaseURL | string) "localhost" }}
|
||||
{{ if .IsDraft }}<span class="draft">draft</span>{{ end }}
|
||||
{{ end }}
|
|
@ -1,6 +1,4 @@
|
|||
<footer class="footer">
|
||||
<p>© <time datetime="{{ now.Year }}">{{ now.Year }}</time> <a href="{{ `` | absURL }}">Eryn Wells</a></p>
|
||||
<p>Trans rights.</p>
|
||||
<p>Black lives matter.</p>
|
||||
<p>Get the vaccine.</p>
|
||||
<p>Trans rights are human rights. Black lives matter. Get vaccinated.</p>
|
||||
<p>Copyright © <time datetime="{{ now.Year }}">{{ now.Year }}</time> <a href="{{ `` | absURL }}">Eryn Wells</a></p>
|
||||
</footer>
|
||||
|
|
|
@ -15,10 +15,12 @@
|
|||
<meta name="author" content="{{ site.Author.name }}" />
|
||||
{{ end }}
|
||||
|
||||
<link rel="preload stylesheet" as="style" href="/styles/reset.css" />
|
||||
<link rel="preload stylesheet" as="style" href="/styles/app.css" />
|
||||
{{ if .IsHome }}
|
||||
<link rel="preload stylesheet" as="style" href="/styles/home.css" />
|
||||
<link rel="preload stylesheet" as="style" href="/styles/main.css">
|
||||
{{ range $stylesheet := .Resources.Match "*.css" }}
|
||||
<link rel="preload stylesheet" as="style" href="{{ $stylesheet.Permalink }}">
|
||||
{{ end }}
|
||||
{{ if in (.Site.BaseURL | string) "localhost" }}
|
||||
<link rel="preload stylesheet" as="style" href="/styles/development.css">
|
||||
{{ end }}
|
||||
|
||||
{{ if and .IsPage (not site.Params.disableHLJS) }}
|
||||
|
@ -31,35 +33,24 @@
|
|||
{{ end }}
|
||||
|
||||
{{ range $.Scratch.Get "social-list" }}
|
||||
<link rel="preload" as="image" href="{{ printf `%s.svg` . | absURL }}" />
|
||||
<link rel="preload" as="image" href="{{ printf `%s.svg` . | absURL }}">
|
||||
{{ end }}
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="{{ `favicon.ico` | absURL }}" />
|
||||
<link rel="apple-touch-icon" href="{{ `apple-touch-icon.png` | absURL }}" />
|
||||
<link rel="icon" href="{{ `favicon.ico` | absURL }}">
|
||||
<link rel="apple-touch-icon" href="{{ `apple-touch-icon.png` | absURL }}">
|
||||
|
||||
<!-- Generator -->
|
||||
{{ hugo.Generator }}
|
||||
|
||||
<!-- RSS -->
|
||||
{{ range .AlternativeOutputFormats }}
|
||||
<link
|
||||
rel="{{ .Rel }}"
|
||||
type="{{ .MediaType.Type }}"
|
||||
href="{{ .Permalink }}"
|
||||
title="{{ site.Title }}"
|
||||
/>
|
||||
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink }}" title="{{ site.Title }}">
|
||||
{{ end }}
|
||||
|
||||
<!-- Misc -->
|
||||
{{ if or hugo.IsProduction (eq site.Params.env "production") }}
|
||||
<!---->
|
||||
{{ template "_internal/google_analytics_async.html" . }}
|
||||
<!---->
|
||||
{{ template "_internal/google_news.html" . }}
|
||||
<!---->
|
||||
{{ template "_internal/opengraph.html" . }}
|
||||
<!---->
|
||||
{{ template "_internal/schema.html" . }}
|
||||
<!---->
|
||||
{{ template "_internal/twitter_cards.html" . }}
|
||||
|
|
|
@ -1,26 +1,22 @@
|
|||
<header class="header">
|
||||
<h1 class="logo">
|
||||
<a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a>
|
||||
</h1>
|
||||
<h1><a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a></h1>
|
||||
|
||||
{{ $url := .RelPermalink }}<!---->
|
||||
{{ $url := .RelPermalink }}
|
||||
{{ with site.Menus.main }}
|
||||
<nav class="menu">
|
||||
<menu>
|
||||
{{ range . }}
|
||||
<a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
|
||||
<li><a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
|
||||
{{ end }}
|
||||
</menu>
|
||||
</nav>
|
||||
{{ end }}<!---->
|
||||
{{ end }}
|
||||
|
||||
<nav class="social">
|
||||
<a style="--url: url(./twitter.svg)"
|
||||
href="https://twitter.com/erynofwales"
|
||||
target="_blank"><span>tw</span></a>
|
||||
<a style="--url: url(./github.svg)"
|
||||
href="https://github.com/erynofwales"
|
||||
target="_blank"><span>gh</span></a>
|
||||
<a style="--url: url(./instagram.svg)"
|
||||
href="https://instagram.com/erynofwales"
|
||||
target="_blank"><span>ig</span></a>
|
||||
<menu>
|
||||
<li><a style="--url: url(./twitter.svg)" href="https://twitter.com/erynofwales" target="_blank"><span>tw</span></a></li>
|
||||
<li><a style="--url: url(./github.svg)" href="https://github.com/erynofwales" target="_blank"><span>gh</span></a></li>
|
||||
<li><a style="--url: url(./instagram.svg)" href="https://instagram.com/erynofwales" target="_blank"><span>ig</span></a></li>
|
||||
</menu>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
@ -4,9 +4,9 @@
|
|||
<a href="{{ $img.RelPermalink }}">
|
||||
<img src="{{ $resized_img.RelPermalink }}" />
|
||||
</a>
|
||||
{{ if $img.Title }}
|
||||
<figcaption>
|
||||
{{ if $img.Title }}
|
||||
<h4>{{ $img.Title }}</h4>
|
||||
{{ end }}
|
||||
</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
|
@ -4,7 +4,7 @@
|
|||
{{ with .Get "from" }}
|
||||
<time datetime="{{ . }} ">{{ . }}</time>
|
||||
{{ end }}
|
||||
to
|
||||
–
|
||||
{{ with .Get "to" }}
|
||||
<time datetime="{{ . }}">{{ . }}</time>
|
||||
{{ else }}
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 866 B |
Binary file not shown.
Before Width: | Height: | Size: 689 B |
22
static/styles/development.css
Normal file
22
static/styles/development.css
Normal file
|
@ -0,0 +1,22 @@
|
|||
/* development.css
|
||||
* Some styles for development UI.
|
||||
* Eryn Wells <eryn@erynwells.me>
|
||||
*/
|
||||
|
||||
.draft {
|
||||
color: red;
|
||||
display: inline-block;
|
||||
font-family: 'SF Pro', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 3px;
|
||||
margin-inline-start: 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.draft:before {
|
||||
content: "[";
|
||||
}
|
||||
|
||||
.draft:after {
|
||||
content: "]";
|
||||
}
|
325
static/styles/main.css
Normal file
325
static/styles/main.css
Normal file
|
@ -0,0 +1,325 @@
|
|||
/* main.css
|
||||
* Global stylesheet for erynwells.me
|
||||
* Eryn Wells <eryn@erynwells.me>
|
||||
*/
|
||||
|
||||
:root {
|
||||
--header: 8rem;
|
||||
--footer: calc(8rem + var(--safe-bottom));
|
||||
|
||||
--light: white;
|
||||
--dark: rgb(22, 22, 22);
|
||||
--highlight-color: rgb(50, 186, 228);
|
||||
--hljs-bg: #111;
|
||||
|
||||
--safe-bottom: 0;
|
||||
|
||||
--body-padding: 4rem;
|
||||
--body-width: 80rem;
|
||||
|
||||
--body-background-color: var(--light);
|
||||
--body-foreground-color: var(--dark);
|
||||
|
||||
--link-color: var(--highlight-color);
|
||||
|
||||
--tag-text-color: var(--dark);
|
||||
--tag-background-color: #eee;
|
||||
--tag-hover-background-color: #bbb;
|
||||
|
||||
--separator-color: #888;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--body-background-color: var(--dark);
|
||||
--body-foreground-color: var(--light);
|
||||
|
||||
--tag-text-color: #aaa;
|
||||
--tag-background-color: rgb(40, 40, 40);
|
||||
--tag-hover-background-color: rgb(73, 73, 73);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-position: from-font;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 2rem;
|
||||
line-height: 1.2;
|
||||
margin: 0 auto;
|
||||
max-width: var(--body-width);
|
||||
padding: 0 var(--body-padding);
|
||||
}
|
||||
|
||||
figcaption h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
figure {
|
||||
border-radius: 0.5rem;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
figure a,
|
||||
figure a:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
border-radius: 0.5rem;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
figure + p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
figure .youtube {
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
width: calc(var(--body-width) - 2rem);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: 'SF Pro Rounded', ui-rounded, 'Arial Rounded MT', system-ui, -apple-system, sans-serif;
|
||||
/*font-family: Palatino, Rockwell, Courier;*/
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'SF Pro', sans-serif;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
|
||||
.header {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
margin-right: 2rem;
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
|
||||
.header h1 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header h1 a:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.menu > a + a:before {
|
||||
color: var(--dark);
|
||||
content: "•";
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.menu menu,
|
||||
.social menu {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.menu menu li,
|
||||
.social menu li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.menu menu li + li:before,
|
||||
.social menu li + li:before {
|
||||
content: "•";
|
||||
font-size: 1.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.social > li + li:before {
|
||||
color: var(--dark);
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.youtube iframe {
|
||||
aspect-ratio: 16 / 9;
|
||||
margin-bottom: -3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Footer
|
||||
*/
|
||||
|
||||
.footer {
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--separator-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer p + p {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Main
|
||||
*/
|
||||
|
||||
.main {
|
||||
margin: 3.5rem 0;
|
||||
}
|
||||
|
||||
.main :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.main h1,
|
||||
.main h2,
|
||||
.main h3,
|
||||
.main h4,
|
||||
.main h5,
|
||||
.main h6 {
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.main figcaption h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.main p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.post-nav .next {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.post-single footer {
|
||||
margin-block-start: 3.5rem;
|
||||
}
|
||||
|
||||
ul.post-tags {
|
||||
display: flex;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
ul.post-tags li {
|
||||
background-color: var(--tag-background-color);
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
ul.post-tags li:hover {
|
||||
background-color: var(--tag-hover-background-color);
|
||||
}
|
||||
|
||||
ul.post-tags li a {
|
||||
color: var(--tag-text-color);
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
ul.post-tags li a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.post-tags li + li {
|
||||
margin-inline-start: 1rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.post-title .post-date {
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Color Theme -----------------------------------------------------------------
|
||||
*/
|
||||
|
||||
body {
|
||||
background-color: var(--body-background-color);
|
||||
}
|
||||
|
||||
figure {
|
||||
border: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
body,
|
||||
.header h1 a,
|
||||
.menu > a + a:before {
|
||||
color: var(--body-foreground-color);
|
||||
}
|
||||
|
||||
@media (max-width: 704px) {
|
||||
html {
|
||||
font-size: 7px;
|
||||
}
|
||||
}
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 9430c11f9ec449924965d0dc3a1d785180a92f72
|
Loading…
Add table
Add a link
Reference in a new issue