all but posts omg
This commit is contained in:
@ -1,28 +1,31 @@
|
||||
#postlist {
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered post layout/coloration */
|
||||
.post:nth-child(odd) .postlink {
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img tags'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered post layout/coloration */
|
||||
.post:nth-child(even) .postlink {
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'tags img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
@ -31,24 +34,25 @@
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'tags';
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink {
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
border-color: var(--color-primary);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
@ -56,26 +60,30 @@
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
@ -83,23 +91,24 @@
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active {
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post elements */
|
||||
.post h2,
|
||||
.post img,
|
||||
.post ul,
|
||||
.post li {
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
.post h2 {
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
@ -109,30 +118,62 @@
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2 {
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2 {
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2 {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Image */
|
||||
.post img {
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: tags;
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
@ -144,25 +185,35 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.postlist-tags li {
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li {
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
43
css/main.css
43
css/main.css
@ -96,15 +96,19 @@ h1, h2, h3, h4, h5, h6 {
|
||||
h1 {
|
||||
margin-top: 3rem;
|
||||
font-size: 3.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1rem;
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.2rem;
|
||||
@ -131,7 +135,7 @@ b {
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--color-font);
|
||||
color: var(--color-text);
|
||||
border-radius: .25rem;
|
||||
text-decoration: underline;
|
||||
text-decoration-style: solid;
|
||||
@ -155,23 +159,45 @@ a:active {
|
||||
text-decoration-thickness: .4em;
|
||||
}
|
||||
|
||||
/* Heading anchors */
|
||||
a.ha,
|
||||
span.ha-placeholder {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
span.ha-placeholder {
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
|
||||
/* Lists */
|
||||
::marker {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
ul, ol, li {
|
||||
ul, ol, dl, li {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.5;
|
||||
line-height: 1.2 5;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
|
||||
li ul, li ol {
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 900;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 2rem;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote {
|
||||
margin: .5rem 1rem;
|
||||
@ -232,3 +258,12 @@ hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Currently only used for resume, but it's generalizable */
|
||||
.upper {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
64
css/nav.css
64
css/nav.css
@ -10,7 +10,8 @@ header {
|
||||
|
||||
/* Header links, pagination links */
|
||||
header a,
|
||||
.pagination a {
|
||||
.pagination a,
|
||||
.webring ul a {
|
||||
border-radius: 1rem;
|
||||
border: .125rem solid var(--color-pink);
|
||||
color: var(--color-pink);
|
||||
@ -26,16 +27,21 @@ header a,
|
||||
}
|
||||
|
||||
header a,
|
||||
.pagination .older a {
|
||||
.pagination .older a,
|
||||
.webring .prev a,
|
||||
.webring .rand a {
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
.pagination .newer a {
|
||||
.pagination .newer a,
|
||||
.webring .next a,
|
||||
.webring .rand a {
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
header a:focus-visible,
|
||||
.pagination a:focus-visible {
|
||||
.pagination a:focus-visible,
|
||||
.webring ul a:focus-visible {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-pink);
|
||||
background-color: var(--color-pink);
|
||||
@ -44,7 +50,8 @@ header a:focus-visible,
|
||||
|
||||
@media (any-hover: hover) {
|
||||
header a:hover,
|
||||
.pagination a:hover {
|
||||
.pagination a:hover,
|
||||
.webring ul a:hover {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-pink);
|
||||
background-color: var(--color-pink);
|
||||
@ -53,14 +60,16 @@ header a:focus-visible,
|
||||
|
||||
@media (forced-colors: active) {
|
||||
header a:focus-visible,
|
||||
.pagination a:focus-visible {
|
||||
.pagination a:focus-visible,
|
||||
.webring ul a:focus-visible {
|
||||
outline-offset: .125rem;
|
||||
outline: .125rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
header a:hover,
|
||||
.pagination a:hover {
|
||||
.pagination a:hover,
|
||||
.webring ul a:hover {
|
||||
outline-offset: .125rem;
|
||||
outline: .125rem solid;
|
||||
}
|
||||
@ -69,7 +78,8 @@ header a:focus-visible,
|
||||
|
||||
/* Click animation */
|
||||
header a:active,
|
||||
.pagination a:active {
|
||||
.pagination a:active,
|
||||
.webring ul a:active {
|
||||
top: .1rem;
|
||||
left: .1rem;
|
||||
box-shadow: .05rem .05rem var(--color-shadow);
|
||||
@ -97,28 +107,40 @@ header a[aria-current="page"]:focus-visible {
|
||||
|
||||
/* Header link icons, pagination icons */
|
||||
header i,
|
||||
.pagination i {
|
||||
.pagination i,
|
||||
.webring ul i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
header i {
|
||||
header i,
|
||||
.pagination .older i,
|
||||
.webring .prev i,
|
||||
.webring .rand i:nth-child(1) {
|
||||
padding-left: .25rem;
|
||||
}
|
||||
|
||||
.pagination .newer i,
|
||||
.webring .next i,
|
||||
.webring .rand i:nth-child(2) {
|
||||
padding-right: .25rem;
|
||||
}
|
||||
|
||||
header a[aria-current="page"] i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
header a:focus-visible i,
|
||||
a[aria-current="page"] a:focus-visible i,
|
||||
.pagination a:focus-visible :in-range {
|
||||
.pagination a:focus-visible i,
|
||||
.webring ul a:focus-visible i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
header a:hover i,
|
||||
header a[aria-current="page"]:hover i,
|
||||
.pagination a:hover i {
|
||||
.pagination a:hover i,
|
||||
.webring ul a:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
@ -236,3 +258,21 @@ footer a:focus-visible {
|
||||
grid-area: newer;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* webring navigation */
|
||||
.webring {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.webring ul {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
list-style: none;
|
||||
justify-content: space-around;
|
||||
gap: .35rem;
|
||||
}
|
||||
|
||||
.webring ul,
|
||||
.webring li {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
32
css/palette.css
Normal file
32
css/palette.css
Normal file
@ -0,0 +1,32 @@
|
||||
.color {
|
||||
border: .125rem solid var(--color-text);
|
||||
border-radius: 2rem;
|
||||
padding: .5rem;
|
||||
text-align: center;
|
||||
width: 65%;
|
||||
margin: 1rem auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#dark,
|
||||
#dark-alt,
|
||||
#teal-dark,
|
||||
#pink-dark {
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
#light,
|
||||
#light-alt,
|
||||
#teal-light,
|
||||
#pink-light {
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
#dark { background-color: var(--color-dark); }
|
||||
#dark-alt { background-color: var(--color-dark-alt); }
|
||||
#light { background-color: var(--color-light); }
|
||||
#light-alt { background-color: var(--color-light-alt); }
|
||||
#teal-dark { background-color: var(--color-teal-dark); }
|
||||
#teal-light { background-color: var(--color-teal-light); }
|
||||
#pink-dark { background-color: var(--color-pink-dark); }
|
||||
#pink-light { background-color: var(--color-pink-light); }
|
||||
41
css/resume.css
Normal file
41
css/resume.css
Normal file
@ -0,0 +1,41 @@
|
||||
.resume h1 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.resume h2 {
|
||||
margin: 1.7rem 0 1rem;
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
.resume h3 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.two-col {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.col2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
margin: 1rem 0;
|
||||
border-top: solid var(--color-teal);
|
||||
}
|
||||
|
||||
.job-details p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.job-details a {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.job p {
|
||||
margin-top: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user
