From 534074e66ae8dbb5d134d08346220fb05442617c Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Mon, 1 Jul 2024 13:59:26 +0100 Subject: [PATCH 1/3] No CSS nesting --- website/public/css/base.css | 89 ++++++++++++------------ website/public/css/cv.css | 129 +++++++++++++++++------------------ website/public/css/feed.css | 16 ++--- website/public/css/hcard.css | 83 +++++++++++----------- 4 files changed, 152 insertions(+), 165 deletions(-) diff --git a/website/public/css/base.css b/website/public/css/base.css index 5697a09..2d9c2c6 100644 --- a/website/public/css/base.css +++ b/website/public/css/base.css @@ -80,14 +80,14 @@ small { body { margin-inline: var(--spacing-block-lg); margin-block-end: var(--spacing-block-xl); +} - :is(h1, h2, h3, h4, h5, h6) { - text-align: center; - } +:is(h1, h2, h3, h4, h5, h6) { + text-align: center; +} - img { - margin-inline: auto; - } +img { + margin-inline: auto; } @media (min-width: 36rem) { @@ -102,20 +102,20 @@ body { margin-inline-end: 6rem; column-gap: var(--spacing-block-sm); max-width: calc(6rem + var(--spacing-block-sm) + 30rem); + } - :is(main, article, nav) { - display: grid; - grid-column: media-start / content-end; - grid-template-columns: subgrid; - } + :is(main, article, nav) { + display: grid; + grid-column: media-start / content-end; + grid-template-columns: subgrid; + } - :is(section, header, aside) { - grid-column: content-start / content-end; - } + :is(section, header, aside) { + grid-column: content-start / content-end; + } - :is(h1, h2, h3, h4, h5, h6) { - text-align: start; - } + :is(h1, h2, h3, h4, h5, h6) { + text-align: start; } } @@ -144,56 +144,53 @@ a:is(:link, :visited) { color: var(--colour-hyperlink); text-decoration: underline; display: inline; +} - :hover { - text-decoration: wavy; - } +a:hover { + text-decoration: wavy; } /** Definition lists */ dl { margin-block-start: var(--spacing-block-md); - dt { - font-weight: bold; +dl dt { + font-weight: bold; +} - dd + & { - margin-block-start: var(--spacing-block-md); - } - } +dl dd + dt { + margin-block-start: var(--spacing-block-md); } /** Navigation bar */ nav { margin-block: var(--spacing-block-sm); +} - ul { - grid-column: media-start / content-end; - display: flex; - justify-content: center; - gap: var(--spacing-inline-md); - list-style: none; - } +nav ul { + grid-column: media-start / content-end; + display: flex; + justify-content: center; + gap: var(--spacing-inline-md); + list-style: none; } @media (min-width: 36rem) { nav { display: grid; grid-template-columns: subgrid; + } - ul { - justify-content: end; - } + nav ul { + justify-content: end; } } /** Blog feed */ -.h-feed { - ul { - list-style: none; - } +.h-feed ul { + list-style: none; } /** Block quotes */ @@ -201,14 +198,14 @@ blockquote { padding-inline-start: var(--spacing-inline-lg); border-inline-start: 2px solid var(--colour-primary-fg); font-style: italic; +} - footer { - font-style: initial; - } + blockquote footer { + font-style: initial; +} - :is(em, i) { - font-style: normal; - } +blockquote :is(em, i) { + font-style: normal; } /** Small caps */ diff --git a/website/public/css/cv.css b/website/public/css/cv.css index cdee5b1..06a93f4 100644 --- a/website/public/css/cv.css +++ b/website/public/css/cv.css @@ -2,91 +2,84 @@ div:has(img) { width: 6rem; height: 6rem; margin-inline: auto; +} - img { - width: 6rem; - height: 6rem; - border-radius: 1rem; - filter: contrast(1.25); - } +div img { + width: 6rem; + height: 6rem; + border-radius: 1rem; + filter: contrast(1.25); +} - &::after { - /* Colour overlay */ - background-color: var(--colour-primary-80); - opacity: 0.3; +div:has(img)::after { + /* Colour overlay */ + background-color: var(--colour-primary-80); + opacity: 0.3; - /* Same size and shape as the img */ - border-radius: 1rem; - width: 6rem; - height: 6rem; + /* Same size and shape as the img */ + border-radius: 1rem; + width: 6rem; + height: 6rem; - /* Positioned on top of the img */ - display: block; - position: relative; - top: -6rem; + /* Positioned on top of the img */ + display: block; + position: relative; + top: -6rem; - /* A content value is needed to get the ::after to render */ - content: ''; - } + /* A content value is needed to get the ::after to render */ + content: ''; } header { display: grid; grid-template-columns: 1fr 1fr; text-align: center; - - h1 { - grid-column: 1 / 3; - text-align: center; - } - border-block-end: 1px solid var(--colour-primary-fg); } -.technical-skills { - h3 { - text-align: start; - } - - ul { - color: var(--colour-primary-fg-accent); - margin-inline-start: var(--spacing-inline-md); - } - - @media (min-width: 46rem) { - section { - display: flex; - gap: var(--spacing-inline-sm); - align-items: baseline; - - h3 { - &::after { - content: '/'; - margin-inline: var(--spacing-inline-sm); - } - } - - ul { - display: flex; - gap: var(--spacing-inline-sm); - list-style: none; - margin-inline-start: 0; - - li + li::before { - content: '•'; - margin-inline-end: var(--spacing-inline-sm); - } - } - } - } +header h1 { + grid-column: 1 / 3; + text-align: center; } -:is(.experience, .passions) { - :is(ol, ul) { +.technical-skills h3 { + text-align: start; +} + +.technical-skills ul { + color: var(--colour-primary-fg-accent); + margin-inline-start: var(--spacing-inline-md); +} + +@media (min-width: 46rem) { + .technical-skills section { + display: flex; + gap: var(--spacing-inline-sm); + align-items: baseline; + } + + .technical-skills section h3::after { + content: '/'; + margin-inline: var(--spacing-inline-sm); + } + + .technical-skills section ul { + display: flex; + gap: var(--spacing-inline-sm); list-style: none; + margin-inline-start: 0; + } - li { - margin-block-start: var(--spacing-block-sm); - } + .technical-skills section ul li + li::before { + content: '•'; + margin-inline-end: var(--spacing-inline-sm); } } + +:is(.experience, .passions) :is(ol, ul) { + list-style: none; +} + +:is(.experience, .passions) :is(ol, ul) li { + margin-block-start: var(--spacing-block-sm); +} diff --git a/website/public/css/feed.css b/website/public/css/feed.css index 699a571..f47e609 100644 --- a/website/public/css/feed.css +++ b/website/public/css/feed.css @@ -1,10 +1,8 @@ -.h-feed { - /* Assumes there is at most one level of subheading for sub-dividing entries */ - :is(h2, h3, h4, h5, h6) { - margin-block-start: var(--spacing-block-md); - } - - .h-entry { - margin-block-start: var(--spacing-block-sm); - } +/* Assumes there is at most one level of subheading for sub-dividing entries */ +.h-feed :is(h2, h3, h4, h5, h6) { + margin-block-start: var(--spacing-block-md); +} + +.h-feed .h-entry { + margin-block-start: var(--spacing-block-sm); } diff --git a/website/public/css/hcard.css b/website/public/css/hcard.css index 414eed9..b155e45 100644 --- a/website/public/css/hcard.css +++ b/website/public/css/hcard.css @@ -1,37 +1,36 @@ -.h-card { - div:has(img) { - width: 6rem; - height: 6rem; - margin-inline: auto; - - img { - width: 6rem; - height: 6rem; - border-radius: 1rem; - filter: contrast(1.25); - } - - &::after { - /* Colour overlay */ - background-color: var(--colour-primary-80); - opacity: 0.3; - - /* Same size and shape as the img */ - border-radius: 1rem; - width: 6rem; - height: 6rem; - - /* Positioned on top of the img */ - display: block; - position: relative; - top: -6rem; - - /* A content value is needed to get the ::after to render */ - content: ''; - } - } +.h-card div:has(img) { + width: 6rem; + height: 6rem; + margin-inline: auto; } +.h-card img { + width: 6rem; + height: 6rem; + border-radius: 1rem; + filter: contrast(1.25); +} + +.h-card img::after { + /* Colour overlay */ + background-color: var(--colour-primary-80); + opacity: 0.3; + + /* Same size and shape as the img */ + border-radius: 1rem; + width: 6rem; + height: 6rem; + + /* Positioned on top of the img */ + display: block; + position: relative; + top: -6rem; + + /* A content value is needed to get the ::after to render */ + content: ''; +} + + @media (min-width: 36rem) { .h-card { grid-column: media-start / content-end; @@ -41,18 +40,18 @@ grid-template-areas: "empty heading" "photo text"; + } - div:has(img) { - grid-area: photo; - margin-block-start: var(--spacing-block-sm); - } + .h-card div:has(img) { + grid-area: photo; + margin-block-start: var(--spacing-block-sm); + } - header { - grid-area: heading; - } + .h-card header { + grid-area: heading; + } - .h-card__text { - grid-area: text; - } + .h-card__text { + grid-area: text; } } From 6a3f332471b65b6d12ff740968b20e2be02ce08e Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Mon, 1 Jul 2024 14:11:36 +0100 Subject: [PATCH 2/3] Adds missing end bracket --- website/public/css/base.css | 1 + 1 file changed, 1 insertion(+) diff --git a/website/public/css/base.css b/website/public/css/base.css index 2d9c2c6..981fbed 100644 --- a/website/public/css/base.css +++ b/website/public/css/base.css @@ -153,6 +153,7 @@ a:hover { /** Definition lists */ dl { margin-block-start: var(--spacing-block-md); +} dl dt { font-weight: bold; From bd898d6ca6a18d3a57d38ca6b94015e3972e34e2 Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Mon, 1 Jul 2024 14:11:51 +0100 Subject: [PATCH 3/3] Corrects hCard image overlay selector --- website/public/css/hcard.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/public/css/hcard.css b/website/public/css/hcard.css index b155e45..c0e2280 100644 --- a/website/public/css/hcard.css +++ b/website/public/css/hcard.css @@ -11,7 +11,7 @@ filter: contrast(1.25); } -.h-card img::after { +.h-card div:has(img)::after { /* Colour overlay */ background-color: var(--colour-primary-80); opacity: 0.3;