whitespace
This commit is contained in:
@@ -110,7 +110,7 @@ img {
|
||||
[content-start]
|
||||
minmax(var(--grid-max-content-width), auto)
|
||||
[content-end];
|
||||
column-gap: var(--spacing-block-sm);
|
||||
column-gap: var(--spacing-block-sm);
|
||||
max-width: var(--grid-total-width);
|
||||
|
||||
--body-margin-inline-end: 6rem;
|
||||
@@ -235,8 +235,8 @@ strong {
|
||||
/** Blog feed */
|
||||
|
||||
.h-feed ul {
|
||||
list-style: none;
|
||||
margin-inline: 0;
|
||||
list-style: none;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
/** Block quotes */
|
||||
|
||||
@@ -1,86 +1,86 @@
|
||||
div:has(img) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin-inline: auto;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
div img {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 1rem;
|
||||
filter: contrast(1.25);
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 1rem;
|
||||
filter: contrast(1.25);
|
||||
}
|
||||
|
||||
div:has(img)::after {
|
||||
/* Colour overlay */
|
||||
background-color: var(--colour-primary-80);
|
||||
opacity: 0.3;
|
||||
/* 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;
|
||||
border-block-end: 1px solid var(--colour-primary-fg);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
text-align: center;
|
||||
border-block-end: 1px solid var(--colour-primary-fg);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
grid-column: 1 / 3;
|
||||
text-align: center;
|
||||
grid-column: 1 / 3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.technical-skills h3 {
|
||||
text-align: start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.technical-skills ul {
|
||||
color: var(--colour-primary-fg-accent);
|
||||
margin-inline-start: var(--spacing-inline-md);
|
||||
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 {
|
||||
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 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;
|
||||
}
|
||||
.technical-skills section ul {
|
||||
display: flex;
|
||||
gap: var(--spacing-inline-sm);
|
||||
list-style: none;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.technical-skills section ul li + li::before {
|
||||
content: '•';
|
||||
margin-inline-end: var(--spacing-inline-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;
|
||||
margin-inline: 0;
|
||||
list-style: none;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
:is(.experience, .passions) :is(ol, ul) li {
|
||||
margin-block-start: var(--spacing-block-sm);
|
||||
margin-block-start: var(--spacing-block-sm);
|
||||
}
|
||||
|
||||
@@ -1,57 +1,57 @@
|
||||
.h-card div:has(img) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin-inline: auto;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.h-card img {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 1rem;
|
||||
filter: contrast(1.25);
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 1rem;
|
||||
filter: contrast(1.25);
|
||||
}
|
||||
|
||||
.h-card div:has(img)::after {
|
||||
/* Colour overlay */
|
||||
background-color: var(--colour-primary-80);
|
||||
opacity: 0.3;
|
||||
/* 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: '';
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 36rem) {
|
||||
.h-card {
|
||||
grid-column: media-start / content-end;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid; /** Subgrid of main column layout */
|
||||
grid-template-rows: min-content 1fr;
|
||||
grid-template-areas:
|
||||
"empty heading"
|
||||
"photo text";
|
||||
}
|
||||
.h-card {
|
||||
grid-column: media-start / content-end;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid; /** Subgrid of main column layout */
|
||||
grid-template-rows: min-content 1fr;
|
||||
grid-template-areas:
|
||||
"empty heading"
|
||||
"photo text";
|
||||
}
|
||||
|
||||
.h-card 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);
|
||||
}
|
||||
|
||||
.h-card header {
|
||||
grid-area: heading;
|
||||
}
|
||||
.h-card header {
|
||||
grid-area: heading;
|
||||
}
|
||||
|
||||
.h-card__text {
|
||||
grid-area: text;
|
||||
}
|
||||
.h-card__text {
|
||||
grid-area: text;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-GB">
|
||||
<head>
|
||||
<head>
|
||||
{{ include('components/head/_meta.html.twig') }}
|
||||
{{ include('components/head/_indie_web.html.twig') }}
|
||||
{{ include('components/head/_stylesheets.html.twig') }}
|
||||
{{ include('components/head/_feeds.html.twig') }}
|
||||
{{ include('components/head/_open_graph.html.twig') }}
|
||||
{{ include('components/head/_twitter.html.twig') }}
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
{{ include('components/_navbar.html.twig') }}
|
||||
|
||||
<main>
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<nav class="navbar">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ path('notes') }}">Notes</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ path('notes') }}">Notes</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -4,15 +4,15 @@
|
||||
<section class="h-feed">
|
||||
<h1 class="p-name">Joe Carstairs' notes</h1>
|
||||
|
||||
<p hidden>
|
||||
These links are collected by
|
||||
<p hidden>
|
||||
These links are collected by
|
||||
<a class="p-author h-card" href="{{ url('index') }}">
|
||||
Joe Carstairs
|
||||
</a>.
|
||||
</p>
|
||||
<p hidden>
|
||||
<a class="u-url" href="{{ url('notes') }}">Permalink</a>
|
||||
</p>
|
||||
</p>
|
||||
<p hidden>
|
||||
<a class="u-url" href="{{ url('notes') }}">Permalink</a>
|
||||
</p>
|
||||
|
||||
<nav class="skip-to">
|
||||
Skip to:
|
||||
|
||||
Reference in New Issue
Block a user