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

styleguide: add navigation and header
All checks were successful
/ build (push) Successful in 9s
Details

Browse source
This commit is contained in:
kritzl 2025-02-14 20:45:10 +01:00
commit 8ee4831cb8
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
10 changed files with 778 additions and 507 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -403,25 +403,116 @@ img.glitch {
body {
margin: 0;
min-height: 100vh;
min-width: 100vw;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
position: relative;
overflow: auto;
}
header {
padding: 1rem;
body header {
text-align: center;
width: 100%;
height: fit-content;
flex-grow: 0;
}
main {
body > div {
display: flex;
gap: 1rem;
flex-grow: 1;
}
body > div nav {
width: 20rem;
height: fit-content;
display: flex;
flex-direction: column;
flex-shrink: 0;
position: sticky;
top: 0;
}
body > div nav ul {
display: flex;
flex-direction: column;
gap: 0.75rem;
list-style-type: none;
}
body > div nav ul li {
border-radius: 0.5rem;
background-color: var(--color-shade-1);
transition: background-color 150ms;
}
body > div nav ul li > a {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
outline: solid 0.1em var(--color-shade-1);
padding: 0.5rem 1rem;
color: var(--color-foreground);
text-decoration: none;
font-size: 1.2em;
box-sizing: border-box;
--local-primary: var(--color-primary);
transition-property: filter, outline-color;
transition-duration: 400ms;
transition-timing-function: ease-in;
}
body > div nav ul li > a:visited, body > div nav ul li > a:focus, body > div nav ul li > a:active {
color: var(--color-foreground);
}
body > div nav ul li > a i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
body > div nav ul li:hover, body > div nav ul li:focus-within {
background-color: transparent;
}
body > div nav ul li:hover a, body > div nav ul li:focus-within a {
outline: solid 0.1em var(--color-white);
background-color: transparent;
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms, outline-color 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
}
body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body > div nav ul li:hover a:active, body > div nav ul li:focus-within a:visited, body > div nav ul li:focus-within a:focus, body > div nav ul li:focus-within a:active {
color: var(--color-white);
}
body > div main {
max-width: min(var(--container-4xl), 100vw);
padding: 1rem;
overflow: hidden;
border-left: dashed 0.25rem var(--color-foreground);
}
@media (min-width: 40rem) {
main {
body > div main {
padding-left: 2rem;
}
}
i[data-icon] {
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
position: relative;
box-sizing: content-box;
}
i[data-icon]::before {
content: "";
display: block;
width: 100%;
height: 100%;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
}
i[data-icon][data-icon=arrow-left]::before {
mask-image: url("../icon/arrow_left.svg");
}
i[data-icon][data-icon=info]::before {
mask-image: url("../icon/info.svg");
}
a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited {
color: var(--color-accent-1);
text-decoration: underline;

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

File diff suppressed because one or more lines are too long

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

@ -1,30 +1,139 @@
@import "main";
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
min-width: 100vw;
}
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
position: relative;
overflow: auto;
header {
padding: 1rem;
}
header {
text-align: center;
width: 100%;
height: fit-content;
flex-grow: 0;
}
main {
max-width: min(var(--container-4xl), 100vw);
padding: 1rem;
overflow: hidden;
> div {
display: flex;
gap: 1rem;
flex-grow: 1;
@media (min-width: $breakpoint-sm) {
padding-left: 2rem;
nav {
width: 20rem;
height: fit-content;
display: flex;
flex-direction: column;
flex-shrink: 0;
position: sticky;
top: 0;
ul {
display: flex;
flex-direction: column;
gap: 0.75rem;
list-style-type: none;
li {
border-radius: 0.5rem;
background-color: var(--color-shade-1);
transition: background-color 150ms;
> a {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
outline: solid 0.1em var(--color-shade-1);
padding: 0.5rem 1rem;
color: var(--color-foreground);
text-decoration: none;
font-size: 1.2em;
box-sizing: border-box;
--local-primary: var(--color-primary);
transition-property: filter, outline-color;
transition-duration: 400ms;
transition-timing-function: ease-in;
&:visited, &:focus, &:active {
color: var(--color-foreground);
}
i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
}
&:hover, &:focus-within {
background-color: transparent;
a {
outline: solid 0.1em var(--color-white);
background-color: transparent;
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
transition: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
outline-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
&:visited, &:focus, &:active {
color: var(--color-white);
}
}
}
}
}
}
main {
max-width: min(var(--container-4xl), 100vw);
border-left: dashed 0.25rem var(--color-foreground);
@media (min-width: $breakpoint-sm) {
padding-left: 2rem;
}
}
}
}
i[data-icon] {
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
position: relative;
box-sizing: content-box;
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
}
&[data-icon='arrow-left']::before {
mask-image: url('../icon/arrow_left.svg');
}
&[data-icon='info']::before {
mask-image: url('../icon/info.svg');
}
}
a {
&.a-regular,
@ -60,14 +169,14 @@ pre,
.layout-column {
display: flex;
&>* {
& > * {
width: 100%;
}
@media (max-width: $breakpoint-md) {
flex-wrap: wrap;
&>* {
& > * {
width: 100%;
}
}
@ -77,7 +186,7 @@ pre,
display: flex;
align-items: center;
&>* {
& > * {
width: 100%;
}
@ -85,7 +194,7 @@ pre,
flex-wrap: wrap;
justify-content: center;
&>* {
& > * {
width: 100%;
}
}
@ -102,7 +211,7 @@ pre,
gap: 1rem;
margin-top: 2rem;
&>span {
& > span {
width: 100%;
font-size: var(--text-xl);
}