Merge branch 'ua-style' into main

This commit is contained in:
Eryn Wells 2021-12-26 13:11:53 -07:00
commit c4ef9dead1
25 changed files with 524 additions and 93 deletions

View file

@ -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/'

View file

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

View file

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

View file

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

View file

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

View 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
View file

@ -0,0 +1,4 @@
---
title: "Posts"
description: "Posts"
---

33
content/posts/style.css Normal file
View 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;
}

View file

@ -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
View 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;
}

View file

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

View file

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

View file

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

View file

@ -0,0 +1,3 @@
{{ if in (.Site.BaseURL | string) "localhost" }}
{{ if .IsDraft }}<span class="draft">draft</span>{{ end }}
{{ end }}

View file

@ -1,6 +1,4 @@
<footer class="footer">
<p>&copy; <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>

View file

@ -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" . }}

View file

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

View file

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

View file

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

View 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
View 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