Skip to content

Commit d76dbc8

Browse files
csswizardrycsswizardry
committed
Fix broken alignment on secondary nav
1 parent d76ac6f commit d76dbc8

16 files changed

Lines changed: 285 additions & 20 deletions

‎_includes/css/csswizardry.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/_components.bands.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242

4343
.band__title {
4444
text-align: center;
45-
@include font-size(16px);
45+
@include font-size(12px);
4646
text-transform: uppercase;
4747
letter-spacing: 0.1em;
4848
color: rgba(255, 255, 255, 0.5);

‎css/_components.headshot.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* ==========================================================================
2+
#HEADSHOT
3+
========================================================================== */
4+
5+
.c-headshot {
6+
display: block;
7+
padding-top: 66.666666667%;
8+
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAgICAgICAgICAgMDAwMDAwMDAwMBAQEBAQEBAgEBAgICAQICAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA//AABEIAAsAEAMBEQACEQEDEQH/xACAAAEBAQAAAAAAAAAAAAAAAAAICQoQAAAEBAUEAQUAAAAAAAAAAAMEBQYBAhMUBxIVFhcACAkkERgjJTdDAQADAQAAAAAAAAAAAAAAAAAHCAkGEQAABAUCAwcEAwAAAAAAAAABAgMEBhESExQFBwAVIwgWFyEiJDMxMkJDNEFR/9oADAMBAAIRAxEAPwDP12CsRLfmKpRpN7FZ6ok7kxPHIoiWbLlCyQvgFTI6tKWeSihwEUEcgspheMBBwYyyZBBYhTS5YRg6O3m4ei7fQrF0dEjLWmLNukNo7Vgmcz1c4uBQTTIqIpkdCc5VyFUOBDAcxREtEzV42T1KEND2/ibX1ojiNJu11ZyKTZqk2kc1XoUXE5TmKLg4lIAmEqQmrAhpgPD872MFxcADY5d2dyb4TRXcArubaCHq72buHpsQ7EQ5hxOvmicTyhscsfKlJRjMJBjAEwU88YzRm6KPZ47TCMd7RpljeO3ejbg6UgRu+W1Fskcj1e2UwvG+EmQBQVERLScEzFUAwGD7RMUtrtf0OM4AePIiiGLmcSaaUCulk0UnKKhlCVFVTstxEqJhAxSgsKavp8wH68Sm8SV79RRyjy/bUGpqHF+gafa7sb37YvvyvE1fLqume5b/AD/Kp0kz3H8MH9/Bu5xrWfexrmMr8Nnp8wpnh5ntsi3+yniWGx9zO1WjK/qdmij8v5df6p/FR536fxnwpPK9pXJTiteXaO9X9a095fFfOk1dp6x715Wz67eetmt6f2qXWm7OuD4R6lLkWdlpzxMvvHO0pbyp+0xaZ4tHTtXMnq08HN7id2HV3m96+aXLsnMnSaU7fSs/5X6JVVefH//Z);
9+
position: relative;
10+
11+
> img {
12+
position: absolute;
13+
top: 0;
14+
left: 0;
15+
width: 100%;
16+
}
17+
18+
}

‎css/_components.nav-secondary.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
.c-nav-secondary__item {
1818
display: table-cell;
19+
vertical-align: middle;
1920

2021
& + & {
2122
border-left: 1px solid $color-nav-secondary;

‎css/_components.toc.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/* ==========================================================================
2+
#ToC
3+
========================================================================== */
4+
5+
.c-toc {
6+
position: sticky;
7+
top: 0;
8+
margin-bottom: 12px;
9+
padding: 12px 0;
10+
margin-top: -12px;
11+
z-index: 2;
12+
background-color: $color-bg;
13+
}

‎css/_components.tweets.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/* ==========================================================================
2+
#EMBEDS
3+
========================================================================== */
4+
5+
/**
6+
* Better styling for embedded Tweets
7+
*/
8+
9+
.twitter-tweet-rendered {
10+
margin-top: 0 !important;
11+
margin-right: auto;
12+
margin-bottom: $spacing-unit !important;
13+
margin-left: auto;
14+
}
15+
16+
/**
17+
* YouTube and Spotify Embeds
18+
*/
19+
.c-youtube-embed,
20+
.c-spotify-embed {
21+
display: block;
22+
margin-right: auto;
23+
margin-bottom: $spacing-unit;
24+
margin-left: auto;
25+
}

‎css/_elements.type.scss‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -157,20 +157,6 @@ figure {
157157

158158
> img {
159159
border-radius: $base-round;
160-
161-
@media (pointer: fine) {
162-
cursor: zoom-in;
163-
transition: transform 0.3333s;
164-
transform-origin: center left;
165-
166-
&:active {
167-
transform: scale(2);
168-
z-index: 1;
169-
position: relative;
170-
}
171-
172-
}
173-
174160
}
175161

176162
&:has(img) {

‎css/_utilities.colors.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* ==========================================================================
2+
#COLORS
3+
========================================================================== */
4+
5+
.u-color-brand { color: $color-brand !important; }
6+
.u-color-positive { color: $color-positive !important; }
7+
.u-color-negative { color: $color-negative !important; }

‎css/csswizardry.min.css‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/demo.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!doctype html>
2+
<html lang=en-gb>
3+
<meta charset=utf-8>
4+
<meta name=viewport content="width=device-width, minimum-scale=1.0">
5+
6+
<title>&lt;mark&gt;</title>
7+
8+
<style>
9+
html {
10+
font-family: system-ui, sans-serif;
11+
line-height: 1.5;
12+
padding: 1ch;
13+
background: #222;
14+
color: #eee;
15+
}
16+
mark {
17+
background-color: transparent;
18+
color: inherit;
19+
text-decoration: from-font #ffd048 wavy underline;
20+
text-decoration-skip-ink: none;
21+
}
22+
23+
mark::before {
24+
content: "👉\00a0";
25+
}
26+
27+
mark::after {
28+
content: "\00a0👈";
29+
}
30+
</style>
31+
32+
<h1><mark>Welcome!</mark> to <cite>Mark My Words</cite></i></h1>
33+
34+
<p>Shakespeare&nbsp;wrote: <q>To be, or not to be: that is the <mark>question</mark>.</q></p>
35+
36+
<p>The search for <mark>climate change</mark> returned 1,245 results.</p>
37+
38+
<p>Please pay attention to the <mark>updated deadline</mark>: 30 September.</p>
39+
40+
<p>In our test, the variable <code>x</code> unexpectedly held the value <mark>null</mark>.</p>
41+
42+
<p>This recipe calls for <mark>unsalted butter</mark>, not the regular salted kind.</p>
43+
44+
<p>My favourite colour is <mark>blue</mark>, though I sometimes lean towards green.</p>
45+
46+
<p>The witness stated: ‘I saw him enter the room at <mark>around midnight</mark>.’</p>
47+
48+
<p>Common misspelling: <s>definately</s> → <mark>definitely</mark>.</p>

0 commit comments

Comments
 (0)