EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Styleguide: update heading styles

Browse source
This commit is contained in:
kritzl 2025-02-12 02:12:08 +01:00
commit 55fb595be9
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
7 changed files with 138 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

47
styleguide/assets/style/main.scss
View file

@ -61,6 +61,8 @@ $breakpoint-2xl: 96rem;
--color-red-900: #5C0202;
--color-red-950: #3F0101;
--color-white: #FFFFFF;
--color-dark-foreground: var(--color-neutral-50);
--color-dark-background: var(--color-neutral-900);
--color-dark-shade-1: var(--color-neutral-800);
@ -75,7 +77,7 @@ $breakpoint-2xl: 96rem;
--color-dark-accent-2: #d381f7;
--color-dark-accent-3: #ff7975;
--color-light-foreground: var(--color-neutral-900);
--color-light-foreground: var(--color-neutral-950);
--color-light-background: var(--color-neutral-50);
--color-light-shade-1: var(--color-neutral-100);
--color-light-shade-2: var(--color-neutral-200);
@ -293,18 +295,11 @@ html.dark {
}
body {
margin: 0;
padding: 1rem;
background-color: var(--color-background);
color: var(--color-foreground);
font-family: "Athiti", ui-sans, sans-serif;
}
main {
max-width: var(--container-4xl);
margin-left: 4rem;
}
h1, .h1,
h2, .h2,
h3, .h3,
@ -313,12 +308,46 @@ h5, .h5,
h6, .h6,
{
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
margin: 0;
}
h1, .h1 {
font-size: var(--text-5xl);
line-height: var();
}
h2, .h2 {
font-size: var(--text-4xl);
line-height: var();
}
h3, .h3 {
font-size: var(--text-3xl);
line-height: var();
}
h4, .h4 {
font-size: var(--text-2xl);
line-height: var();
}
h5, .h5 {
font-size: var(--text-xl);
line-height: var();
}
h6, .h6 {
font-size: var(--text-lg);
line-height: var();
}
code, .code {
font-family: "Departure Mono", ui-monospace, monospace;
display: inline-block;
padding: 1rem 2rem;
padding: 1rem;
border-radius: 1rem;
background-color: var(--color-shade-1);
}

75
styleguide/assets/style/styleguide.css
View file

@ -54,6 +54,7 @@
--color-red-800: #780404;
--color-red-900: #5C0202;
--color-red-950: #3F0101;
--color-white: #FFFFFF;
--color-dark-foreground: var(--color-neutral-50);
--color-dark-background: var(--color-neutral-900);
--color-dark-shade-1: var(--color-neutral-800);
@ -67,7 +68,7 @@
--color-dark-accent-1: #60a5f9;
--color-dark-accent-2: #d381f7;
--color-dark-accent-3: #ff7975;
--color-light-foreground: var(--color-neutral-900);
--color-light-foreground: var(--color-neutral-950);
--color-light-background: var(--color-neutral-50);
--color-light-shade-1: var(--color-neutral-100);
--color-light-shade-2: var(--color-neutral-200);
@ -266,18 +267,11 @@ html.dark {
}
body {
margin: 0;
padding: 1rem;
background-color: var(--color-background);
color: var(--color-foreground);
font-family: "Athiti", ui-sans, sans-serif;
}
main {
max-width: var(--container-4xl);
margin-left: 4rem;
}
h1, .h1,
h2, .h2,
h3, .h3,
@ -285,12 +279,45 @@ h4, .h4,
h5, .h5,
h6, .h6 {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
margin: 0;
}
h1, .h1 {
font-size: var(--text-5xl);
line-height: var();
}
h2, .h2 {
font-size: var(--text-4xl);
line-height: var();
}
h3, .h3 {
font-size: var(--text-3xl);
line-height: var();
}
h4, .h4 {
font-size: var(--text-2xl);
line-height: var();
}
h5, .h5 {
font-size: var(--text-xl);
line-height: var();
}
h6, .h6 {
font-size: var(--text-lg);
line-height: var();
}
code, .code {
font-family: "Departure Mono", ui-monospace, monospace;
display: inline-block;
padding: 1rem 2rem;
padding: 1rem;
border-radius: 1rem;
background-color: var(--color-shade-1);
}
@ -311,6 +338,31 @@ a:visited:hover, a:visited:active, a:visited:focus {
color: var(--color-accent-3);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
min-width: 100vw;
}
header {
padding: 1rem;
}
main {
max-width: min(var(--container-4xl), 100vw);
padding: 1rem;
overflow: hidden;
}
@media (min-width: 40rem) {
main {
padding-left: 2rem;
}
}
a.a-regular {
color: var(--color-accent-1);
}
@ -321,6 +373,11 @@ a.a-visited {
color: var(--color-accent-2);
}
code, .code {
max-width: 100%;
overflow-x: auto;
}
.layout-column {
display: flex;
}

2
styleguide/assets/style/styleguide.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["main.scss","styleguide.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAeF;EA3CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EACE;IAhDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA2CF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EAGA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;;AAGF;EACE;EACA;EACA;EACA;;;AAKE;EACE;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;;ACpVJ;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EAPF;IAQI;;EACA;IACE;;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA","file":"styleguide.css"}
{"version":3,"sourceRoot":"","sources":["main.scss","styleguide.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAeF;EA3CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EACE;IAhDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA2CF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EAGA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKE;EACE;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;;ACjXN;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;;AAKF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EAPF;IAQI;;EACA;IACE;;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA","file":"styleguide.css"}

30
styleguide/assets/style/styleguide.scss
View file

@ -1,5 +1,30 @@
@import "main";
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
min-width: 100vw;
}
header {
padding: 1rem;
}
main {
max-width: min(var(--container-4xl), 100vw);
padding: 1rem;
overflow: hidden;
@media (min-width: $breakpoint-sm) {
padding-left: 2rem;
}
}
a {
&.a-regular {
color: var(--color-accent-1);
@ -14,6 +39,11 @@ a {
}
}
code, .code {
max-width: 100%;
overflow-x: auto;
}
.layout-column {
display: flex;

4
styleguide/color_guide.html
View file

@ -21,7 +21,7 @@
<h2>Digital Media</h2>
<div class="layout-column">
<div class="dark swatch-grid">
<h2>Darkmode</h2>
<h3>Darkmode</h3>
<section aria-labelledby="label-dark-fore-background">
<span id="label-dark-fore-background">Fore- &amp; Background</span>
@ -114,7 +114,7 @@
</div>
<div class="light swatch-grid">
<h2>Lightmode</h2>
<h3>Lightmode</h3>
<section aria-labelledby="label-light-fore-background">
<span id="label-light-fore-background">Fore- &amp; Background</span>

1
styleguide/index.html
View file

@ -21,5 +21,4 @@
</main>
</body>
</html>

2
styleguide/testpage.html
View file

@ -93,7 +93,7 @@ return realloc(numbers, sizeof(*numbers) * new_size);
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<figure>
<img src="assets/images/cat.png"
<img src="assets/image/cat.png"
alt="Close-up of a young cat's face that is distorted through horizontally moving rows of pixels slightly to the left or right and shifting some pixels' color into pink or blue hues."/>
<figcaption>Example image with some visual distortion applied.</figcaption>
</figure>