n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile rework

Browse Source
This commit is contained in:
N-Upchurch
2023-08-01 16:36:56 -05:00
parent 1e1dc0f826
commit 57673b33fa
10 changed files with 347 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
public/css/index.css
View File

@ -1,10 +1,11 @@
/* Defaults */
:root {
--font-family-headline: 'Playfair Display';
--font-family: Manrope;
--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
}
/* Tokens */
/* Design Tokens */
:root {
/* Colors */
--color-gray-20: #e0e0e0;
@ -15,7 +16,7 @@
--background-color: #FAF5F5;
--text-color: var(--color-gray-90);
--text-color-link: var(--color-gray-90);
--text-color-link: var(--text-color);
--text-color-link-active: rgba(3,144,116,1);
--text-color-link-visited: var(--color-gray-90);
@ -31,8 +32,25 @@
--pill-radius: 5rem;
--card-radius: .3rem;
/* Time */
/* Spacing */
--single-gap: 1rem;
--double-gap: 2rem;
/* Animation Timing */
--transition-time: .3s;
/* Font Sizes */
--font-xxl: 3.75rem;
--font-xl: 2rem;
--font-l: 1.5rem;
--font-n: 1rem;
--font-s: .75rem;
--font-xs: .65rem;
/* Font Weights */
--weight-extraheavy: 700;
--weight-heavy: 500;
--weight-normal: 300;
}
@media (prefers-color-scheme: dark) {
@ -52,6 +70,16 @@
}
}
@media(max-width: 556px) {
:root {
/* Font Sizes */
--font-xxl: 1.75rem;
--font-xl: 1rem;
--font-l: 1rem;
--font-n: .85rem;
}
}
/* Global stylesheet */
* {
box-sizing: border-box;
@ -62,7 +90,7 @@ body {
padding: 0;
margin: 0 auto;
font-family: var(--font-family);
font-weight: 300;
font-weight: var(--weight-normal);
font-variant-Ligatures: normal;
color: var(--text-color);
background-color: var(--background-color);
@ -73,14 +101,10 @@ html {
body {
max-width: 40em;
}
a {
text-decoration: wavy underline;
text-decoration-color: var(--contrast-color);
text-decoration-thickness: .1rem;
text-decoration-skip: none;
transition: all .5s;
font-weight: 700;
}
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
@ -95,33 +119,26 @@ a {
}
h1 {
font-family: 'Playfair Display';
font-weight: 700;
font-size: 3.75rem;
font-family: var(--font-family-headline);
font-weight: var(--weight-extraheavy);
font-size: var(--font-xxl);
font-style: normal;
line-height: 4rem;
padding-top: 3rem;
margin-bottom: 0;
}
@media(max-width: 556px) {
h1 {
font-size: 3rem;
padding-top: 0;
}
}
p:last-child {
margin-bottom: 0;
}
p, li {
line-height: 1.75;
font-size: 14pt;
font-size: var(--font-n);
}
main > p > img, main > p > a > img {
width: 100%;
padding-top: 2rem;
padding-top: var(--double-gap);
}
figure {
@ -138,7 +155,7 @@ figure > a > img {
figcaption {
text-align: center;
padding-top: 1em;
padding-top: var(--single-gap);
}
.page-block {
@ -158,13 +175,13 @@ a[href]:active {
}
main {
padding: 1rem;
padding: var(--single-gap);
}
main h2 {
font-weight: 700;
font-size: 2em;
margin-top: 2em;
font-weight: var(--weight-extraheavy);
font-size: 2rem;
margin-top: var(--double-gap);
}
main :first-child {
@ -179,7 +196,7 @@ header {
list-style: none;
border-top: 1px solid var(--color-gray-20);
padding: 1em 0;
margin-top: 2rem;
margin-top: var(--double-gap);
}
table {
@ -221,15 +238,9 @@ header {
align-items: end;
padding: 1em;
}
@media(max-width: 556px) {
header {
padding: 1rem .5rem 1rem .5rem;
}
}
.home-link {
font-size: 1em; /* 16px /16 */
font-weight: 700;
font-size: var(--font-n); /* 16px /16 */
font-weight: var(--weight-extraheavy);
margin-right: 2em;
display: flex;
align-items: end;
@ -247,61 +258,59 @@ header {
margin: 0;
list-style: none;
}
nav ul {
display: flex;
align-items: end;
}
.nav-icon {
max-width: .5rem;
margin-right: .5rem;
width: var(--single-gap);
height: .8rem;
margin-right: .25rem;
fill: var(--color-gray-90);
padding-bottom: .3rem;
}
.nav-item {
display: inline-block;
margin-right: 2em;
text-decoration: none;
}
.nav-item li {
display: flex;
align-items: end;
height: 2rem;
margin-right: .5em;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: .2rem;
font-size: .6rem;
font-weight: 500;
background-color: var(--nav-pill-background-color-inactive);
padding: .55em .85em .55em 1.2em;
border-radius: .75em;
color: var(--nav-pill-text-color);
letter-spacing: .15rem;
font-size: var(--font-xs);
font-weight: var(--weight-heavy);
color: var(--color-gray-90);
border-top: 1px solid var(--color-gray-90);
transition: all .5s;
}
.subscribe:hover {
background-color: rgba(225,90,0,1);
color: var(--nav-pill-text-color);
color: var(--color-gray-90);
}
.nav-item a[href]:visited {
color: var(--nav-pill-text-color-link-visited);
color: var(--color-gray-90);
}
.nav-item a[href]:hover {
text-decoration: none;
color: var(--nav-pill-text-color);
color: var(--color-gray-90);
}
.nav-item a[href]:not(:hover) {
text-decoration: none;
color: var(--nav-pill-text-color);
color: var(--color-gray-90);
}
.nav-item[data-currentpage="true"] {
background-color: var(--nav-pill-background-color-active);
}
.nav a[href][aria-current="page"] {
background-color: var(--nav-pill-background-color-active);
color: var(--nav-pill-text-color);
}
@media(max-width: 556px) {
.nav {
flex-flow: row wrap;
}
.nav-item {
margin-right: 1rem;
margin-bottom: .5rem;
}
color: var(--color-gray-90);
}
/* Posts list */
.postlist h2 {
margin-bottom: 2rem;
margin-bottom: var(--double-gap);
}
.postlist-item-container {
display: flex;
@ -315,28 +324,28 @@ header {
margin-bottom: 1em;
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
padding: 1rem 1.1rem 1rem 1.1rem;
padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
border-radius: var(--card-radius);
background-color: white;
}
.post-image-container {
border-radius: var(--card-radius);
margin-right: 1rem;
margin-right: var(--single-gap);
overflow: hidden;
height: 10em;
}
.postlist-date,
.postlist-item:before {
font-size: 0.8125em; /* 13px /16 */
font-size: var(--font-s); /* 13px /16 */
color: var(--color-gray-90);
}
.postlist-date {
word-spacing: -0.5px;
}
.postlist-link {
font-size: 1.1875em; /* 19px /16 */
font-weight: 700;
font-size: var(--font-xl); /* 19px /16 */
font-weight: var(--weight-extraheavy);
padding-right: .5em;
text-decoration: none;
}
@ -344,7 +353,7 @@ header {
margin-bottom: 0;
}
.postlist-item-active .postlist-link {
font-weight: bold;
font-weight: var(--weight-extraheavy);
}
.post-copy {
display: flex;
@ -419,12 +428,12 @@ a.post-tag:hover {
margin: 0em .5em 1.25em 0em;
}
.taglist li a {
font-size: 1.25rem;
font-size: var(--font-l);
text-decoration-color: var(--contrast-color);
text-decoration-thickness: .1rem;
text-decoration-skip: none;
transition: all .5s;
font-weight: 700;
font-weight: var(--weight-extraheavy);
padding: .4rem .8rem .4rem .8rem;
}
.postlist-item > .post-tag {
@ -444,17 +453,17 @@ a.post-tag:hover {
gap: .5em;
list-style: none;
padding: 0 0 0 .4em;
font-size: .8em;
font-size: var(--font-s);
margin-bottom: 5em;
}
.post-metadata time {
margin-right: .5em;
font-size: 1em;
font-size: var(--font-n);
}
@media(max-width: 556px) {
.post-metadata {
margin-bottom: 1em;
margin-bottom: var(--single-gap);
}
}
@ -462,7 +471,7 @@ a.post-tag:hover {
.header-anchor {
text-decoration: none;
font-style: normal;
font-size: 1em;
font-size: var(--font-n);
margin-left: .1em;
}
a[href].header-anchor,
@ -479,5 +488,52 @@ a[href].header-anchor:focus,
}
h2 + .header-anchor {
font-size: 1.5em;
font-size: var(--font-l);
}
/* Mobile Styles */
@media(max-width: 556px) {
body {
padding: 0rem 1.25rem 0rem 1.25rem;
}
figcaption {
font-size: var(--font-n);
}
h1 {
font-size: var(--font-xxl);
padding-top: 0;
line-height: 2rem;
}
h2, .postlist h2, main h2 {
font-size: var(--font-xl);
margin-bottom: var(--single-gap);
}
h3, .post-copy a h3 {
font-size: 1rem;
}
header {
padding: 0rem .5rem var(--single-gap) .5rem;
margin-bottom: var(--single-gap);
}
.home-link {
max-width: 1rem;
margin-top: var(--single-gap);
}
.nav {
flex-flow: row wrap;
}
.nav-item {
margin-right: .5rem;
}
p, p.nodropcap.page-block, .post-copy p {
font-size: var(--font-n);
line-height: 1.25rem;
margin-top: var(--single-gap);
}
.post-metadata time, time.postlist-date {
font-size: var(--font-s);
}
.post-tag, a.post-tag, .taglist li a {
font-size: var(--font-xs);
}
}