No CSS nesting
This commit is contained in:
Joe Carstairs
@@ -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 */
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user