Move from sass to css files
This commit is contained in:
parent
d76d3310fc
commit
790c560764
|
|
@ -1,38 +0,0 @@
|
|||
button, .btn {
|
||||
--hover: rgba(var(--neutral-highest), .8);
|
||||
--active: rgba(var(--neutral-highest), .8);
|
||||
text-decoration: none;
|
||||
transition: background-color .1s ease-in-out;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: .5rem 1rem;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
max-height: none;
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
color: rgb(var(--neutral-lower));
|
||||
background-color: var(--text);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-stretch: var(--font-stretch, condensed);
|
||||
|
||||
&:disabled {
|
||||
--hover: inherit;
|
||||
--active: inherit;
|
||||
background-color: #e5e5e5;
|
||||
color: #929292;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background-color: var(--hover);
|
||||
}
|
||||
&:not(:disabled):active {
|
||||
background-color: var(--active);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
* {
|
||||
outline-color: #0a76f6;
|
||||
outline-offset: 2px;
|
||||
outline-width: 2px;
|
||||
}
|
||||
|
||||
*:focus:focus-visible {
|
||||
outline-style: solid;
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
footer {
|
||||
background-color: rgb(var(--brand-secondary-medium));
|
||||
justify-items: center;
|
||||
margin-block-start: 1.5rem;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-inline {
|
||||
a {
|
||||
text-decoration: underline;
|
||||
--item-color: var(--text-2);
|
||||
}
|
||||
}
|
||||
|
||||
.socials-list {
|
||||
margin: 0;
|
||||
--item-gap: .2ch;
|
||||
--item-separator: '';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
header {
|
||||
background-color: rgb(var(--brand-primary-medium));
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
inset-block-start: 0;
|
||||
inset-inline: 0;
|
||||
|
||||
nav {
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 6px 20px;
|
||||
padding: 6px clamp(10px, 3vw, 20px);
|
||||
margin: 0;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
text-underline-offset: 0.4rem;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline .12rem;
|
||||
}
|
||||
|
||||
&[aria-current="page"] {
|
||||
color: var(--text-2);
|
||||
text-decoration: underline .12rem;
|
||||
font-weight: var(--font-weight-semibold)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
@use "./icons/download";
|
||||
@use "./icons/github";
|
||||
@use "./icons/internet";
|
||||
@use "./icons/mail";
|
||||
|
||||
[class*=" icon-"],
|
||||
[class^="icon-"] {
|
||||
--icon-size: 1.5rem;
|
||||
vertical-align: top;
|
||||
|
||||
&:before, &:after {
|
||||
--m-interior: .5rem;
|
||||
--m-exterior: -.125rem;
|
||||
background-color: var(--icon-color, currentColor);
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
block-size: 1.5rem;
|
||||
inline-size: 1.5rem;
|
||||
block-size: var(--icon-size);
|
||||
inline-size: var(--icon-size);
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
vertical-align: calc(.375em - .75rem);
|
||||
vertical-align: calc((.75em - var(--icon-size))*.5);
|
||||
}
|
||||
|
||||
&:before,
|
||||
&.icon--right:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
&.icon--right:before {
|
||||
content: none
|
||||
}
|
||||
}
|
||||
|
||||
.icon--left:before {
|
||||
margin-inline-start: var(--m-exterior);
|
||||
margin-inline-end: var(--m-interior);
|
||||
}
|
||||
|
||||
.icon--right:after {
|
||||
margin-inline-start: var(--m-interior);
|
||||
margin-inline-end: var(--m-exterior);
|
||||
}
|
||||
|
||||
.icon--sm {
|
||||
--icon-size: 1rem;
|
||||
}
|
||||
|
||||
.icon--lg {
|
||||
--icon-size: 2rem;
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
/*
|
||||
Josh's Custom CSS Reset
|
||||
https://www.joshwcomeau.com/css/custom-css-reset/
|
||||
*/
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
:where(html) {
|
||||
overflow-x: hidden;
|
||||
block-size: 100%;
|
||||
}
|
||||
:where(body) {
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
:where(img, picture, video, canvas) {
|
||||
display: block;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
:where(input, button, textarea, select, a) {
|
||||
font: inherit;
|
||||
}
|
||||
:where(p, h1, h2, h3, h4, h5, h6) {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
:where(ul, ol):where([role='list'], [class]) {
|
||||
list-style: none;
|
||||
}
|
||||
:where(html:focus-within) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
:where(img, picture) {
|
||||
block-size: auto;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-play-state: paused !important;
|
||||
transition: none !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
body > a {
|
||||
$link-offset: .3rem;
|
||||
position: absolute;
|
||||
inset-block-start: $link-offset;
|
||||
inset-inline-start: $link-offset;
|
||||
z-index: 99999;
|
||||
padding: .4rem 1rem;
|
||||
|
||||
&:not(:focus) {
|
||||
size: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/* ------------------------------------ *\
|
||||
https://codepen.io/mikemai2awesome/full/KKvMZVz
|
||||
\* ------------------------------------ */
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6, summary strong, legend) {
|
||||
font-stretch: var(--font-stretch, expanded);
|
||||
}
|
||||
|
||||
/* ------------------------------------ *\
|
||||
Spacing
|
||||
\* ------------------------------------ */
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6, p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details):first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6) + * {
|
||||
margin-block-start: calc(var(--stack) / 5);
|
||||
}
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
/* BRAND */
|
||||
$sand-50: 249 248 243;
|
||||
$sand-100: 242 239 226;
|
||||
$sand-200: 227 221 197;
|
||||
$sand-300: 210 199 159;
|
||||
$sand-400: 194 176 128; // Main
|
||||
$sand-500: 177 151 94;
|
||||
$sand-600: 164 133 82;
|
||||
$sand-700: 136 107 70;
|
||||
$sand-800: 111 88 61;
|
||||
$sand-900: 90 72 52;
|
||||
$sand-950: 48 37 26;
|
||||
|
||||
$forest-50: 244 247 238;
|
||||
$forest-100: 231 238 217;
|
||||
$forest-200: 208 223 183;
|
||||
$forest-300: 187 208 154; // Main
|
||||
$forest-400: 149 180 103;
|
||||
$forest-500: 119 152 74;
|
||||
$forest-600: 93 120 56;
|
||||
$forest-700: 72 93 46;
|
||||
$forest-800: 59 75 41;
|
||||
$forest-900: 52 65 38;
|
||||
$forest-950: 26 34 17;
|
||||
/* BRAND */
|
||||
/* NEUTRAL */
|
||||
$light-0: 255, 255, 255, 0;
|
||||
$light-2: 255, 255, 255, 0.02;
|
||||
$light-4: 255, 255, 255, 0.04;
|
||||
$light-6: 255, 255, 255, 0.06;
|
||||
$light-8: 255, 255, 255, 0.08;
|
||||
$light-10: 255, 255, 255, 0.1;
|
||||
$light-20: 255, 255, 255, 0.2;
|
||||
$light-30: 255, 255, 255, 0.3;
|
||||
$light-40: 255, 255, 255, 0.4;
|
||||
$light-50: 255, 255, 255, 0.5;
|
||||
$light-60: 255, 255, 255, 0.6;
|
||||
$light-70: 255, 255, 255, 0.7;
|
||||
$light-80: 255, 255, 255, 0.8;
|
||||
$light-90: 255, 255, 255, 0.9;
|
||||
$light-100: 255, 255, 255;
|
||||
|
||||
$dark-0: 9, 9, 11, 0;
|
||||
$dark-2: 9, 9, 11, 0.02;
|
||||
$dark-4: 9, 9, 11, 0.04;
|
||||
$dark-6: 9, 9, 11, 0.06;
|
||||
$dark-8: 9, 9, 11, 0.08;
|
||||
$dark-10: 9, 9, 11, 0.1;
|
||||
$dark-20: 9, 9, 11, 0.2;
|
||||
$dark-30: 9, 9, 11, 0.3;
|
||||
$dark-40: 9, 9, 11, 0.4;
|
||||
$dark-50: 9, 9, 11, 0.5;
|
||||
$dark-60: 9, 9, 11, 0.6;
|
||||
$dark-70: 9, 9, 11, 0.7;
|
||||
$dark-80: 9, 9, 11, 0.8;
|
||||
$dark-90: 9, 9, 11, 0.9;
|
||||
$dark-100: 9, 9, 11;
|
||||
|
||||
$shark-50: 246 246 246;
|
||||
$shark-100: 231 231 231;
|
||||
$shark-200: 209 209 209;
|
||||
$shark-300: 176 176 176;
|
||||
$shark-400: 136 136 136;
|
||||
$shark-500: 109 109 109;
|
||||
$shark-600: 93 93 93;
|
||||
$shark-700: 79 79 79;
|
||||
$shark-800: 69 69 69;
|
||||
$shark-900: 61 61 61;
|
||||
$shark-950: 30 30 30; // Main
|
||||
/* NEUTRAL */
|
||||
|
||||
:root {
|
||||
--neutral-lowest: #{$light-50};
|
||||
--neutral-lower: #{$shark-100};
|
||||
--neutral-low: #{$shark-200};
|
||||
--neutral-medium-low: #{$shark-300};
|
||||
--neutral-medium: #{$shark-400};
|
||||
--neutral-medium-high: #{$shark-500};
|
||||
--neutral-high: #{$shark-600};
|
||||
--neutral-higher: #{$shark-700};
|
||||
--neutral-highest: #{$dark-100};
|
||||
|
||||
--brand-primary-lowest: #{$sand-50};
|
||||
--brand-primary-lower: #{$sand-100};
|
||||
--brand-primary-low: #{$sand-300};
|
||||
--brand-primary-medium-low: #{$sand-400};
|
||||
--brand-primary-medium: #{$sand-500};
|
||||
--brand-primary-medium-high: #{$sand-600};
|
||||
--brand-primary-high: #{$sand-700};
|
||||
--brand-primary-higher: #{$sand-900};
|
||||
--brand-primary-highest: #{$sand-950};
|
||||
|
||||
--brand-secondary-lowest: #{$forest-50};
|
||||
--brand-secondary-lower: #{$forest-100};
|
||||
--brand-secondary-low: #{$forest-300};
|
||||
--brand-secondary-medium-low: #{$forest-400};
|
||||
--brand-secondary-medium: #{$forest-500};
|
||||
--brand-secondary-medium-high: #{$forest-600};
|
||||
--brand-secondary-high: #{$forest-700};
|
||||
--brand-secondary-higher: #{$forest-900};
|
||||
--brand-secondary-highest: #{$forest-950};
|
||||
|
||||
/* --success-lowest: #000;
|
||||
--success-lower: #000;
|
||||
--success-low: #000;
|
||||
--success-medium-low: #000;
|
||||
--success-medium: #000;
|
||||
--success-medium-high: #000;
|
||||
--success-high: #000;
|
||||
--success-higher: #000;
|
||||
--success-highest: #000; */
|
||||
|
||||
/* --danger-lowest: #000;
|
||||
--danger-lower: #000;
|
||||
--danger-low: #000;
|
||||
--danger-medium-low: #000;
|
||||
--danger-medium: #000;
|
||||
--danger-medium-high: #000;
|
||||
--danger-high: #000;
|
||||
--danger-higher: #000;
|
||||
--danger-highest: #000; */
|
||||
|
||||
/* --warning-lowest: #000;
|
||||
--warning-lower: #000;
|
||||
--warning-low: #000;
|
||||
--warning-medium-low: #000;
|
||||
--warning-medium: #000;
|
||||
--warning-medium-high: #000;
|
||||
--warning-high: #000;
|
||||
--warning-higher: #000;
|
||||
--warning-highest: #000; */
|
||||
|
||||
}
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
.wrapper {
|
||||
$wrapper-gap: var(--gutter);
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
1fr
|
||||
min(var(--wrapper-max-length, var(--line-length)), calc(100% - var(--wrapper-gap, $wrapper-gap) * 2))
|
||||
1fr;
|
||||
grid-column-gap: var(--wrapper-gap, $wrapper-gap);
|
||||
|
||||
> * {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-full {
|
||||
@extend .wrapper;
|
||||
$wrapper-gap: var(--gutter);
|
||||
grid-template-columns:
|
||||
1fr
|
||||
min(var(--wrapper-max-length, var(--line-length-large)), calc(100% - var(--wrapper-gap, $wrapper-gap) * 2))
|
||||
1fr;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
inline-size: 100%;
|
||||
grid-column: 1 / -1;
|
||||
padding: var(--padding-block, 1rem) var(--padding-inline, 2rem);
|
||||
background-color: var(--background-color, none);
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
block-size: 1px !important;
|
||||
inline-size: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.list-inline {
|
||||
$item-gap : 1ch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin-left: calc(var(--item-gap, $item-gap) * 3 * -1);
|
||||
clip-path: inset(0 0 0 calc(var(--item-gap, $item-gap) * 3));
|
||||
align-items: center;
|
||||
color: var(--item-color, var(--text));
|
||||
|
||||
li {
|
||||
padding-left: var(--item-gap, $item-gap);
|
||||
&::before {
|
||||
content: var(--item-separator, '•');
|
||||
display: inline-block;
|
||||
margin-right: var(--item-gap, $item-gap);
|
||||
width: var(--item-gap, $item-gap);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--item-color, var(--text));
|
||||
text-decoration: none;
|
||||
transition: all .2s;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
:root {
|
||||
--bg-gradient: linear-gradient(180deg, rgb(var(--brand-primary-medium)) 0%, rgb(var(--brand-primary-medium)) 5%, rgb(var(--brand-primary-low)) 30%, rgb(var(--brand-primary-lower)) 50%, rgb(var(--brand-secondary-lower)) 51%, rgb(var(--brand-secondary-low)) 65%, rgb(var(--brand-secondary-medium)) 98%, rgb(var(--brand-secondary-medium)) 100%);
|
||||
|
||||
--background: rgb(var(--brand-primary-medium));
|
||||
--text: rgb(var(--neutral-highest));
|
||||
--text-2: rgba(var(--neutral-highest), .8);
|
||||
|
||||
--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
|
||||
--font-italic: "Georgia", serif;
|
||||
--font-code: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
--font-size: 1.2rem;
|
||||
--font-weight-semibold: 700;
|
||||
--font-weight-bold: 900;
|
||||
--leading: 1.45;
|
||||
--gutter: clamp(1ch, 2.5vmax, 3ch);
|
||||
--stack: clamp(1.25ex, 1ex + 2.5vmax, 1.75ex);
|
||||
--line-length-small: 30ch;
|
||||
--line-length: 75ch;
|
||||
--line-length-large: 115ch;
|
||||
--page-padding-inline: calc((100vw - min(var(--line-length), 80vw)) / 2);
|
||||
--border-width: 1px;
|
||||
--border-radius: 4px;
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.icon-download {
|
||||
&:before, &:after {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.icon-github {
|
||||
&:before, &:after {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0.125C3.80903 0.119704 2.65529 0.5397 1.74644 1.30939C0.837586 2.07908 0.233325 3.14791 0.0424187 4.32348C-0.148487 5.49906 0.0865013 6.70418 0.705087 7.72191C1.32367 8.73965 2.28523 9.50315 3.41667 9.875C3.66667 9.91667 3.75 9.75 3.75 9.625V8.79167C2.375 9.08333 2.08333 8.125 2.08333 8.125C1.83333 7.54167 1.5 7.375 1.5 7.375C1.08333 7.08333 1.54167 7.08333 1.54167 7.08333C2.04167 7.08333 2.33333 7.58333 2.33333 7.58333C2.75 8.33333 3.5 8.125 3.79167 8C3.79167 7.66667 3.95833 7.45833 4.08333 7.33333C2.95833 7.20833 1.79167 6.79167 1.79167 4.83333C1.79167 4.33333 2 3.875 2.33333 3.54167C2.25 3.375 2.08333 2.875 2.33333 2.20833C2.33333 2.20833 2.75 2.08333 3.75 2.70833C4.56865 2.48711 5.43135 2.48711 6.25 2.70833C7.20833 2.08333 7.625 2.20833 7.625 2.20833C7.875 2.875 7.70833 3.375 7.625 3.54167C8 3.875 8.16667 4.33333 8.16667 4.875C8.16667 6.79167 7 7.20833 5.875 7.33333C6.08333 7.5 6.25 7.75 6.25 8.25V9.625C6.25 9.75 6.29167 9.91667 6.58333 9.875C7.71478 9.50315 8.67633 8.73965 9.29491 7.72191C9.9135 6.70418 10.1485 5.49906 9.95758 4.32348C9.76668 3.14791 9.16241 2.07908 8.25356 1.30939C7.34471 0.5397 6.19097 0.119704 5 0.125Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0.125C3.80903 0.119704 2.65529 0.5397 1.74644 1.30939C0.837586 2.07908 0.233325 3.14791 0.0424187 4.32348C-0.148487 5.49906 0.0865013 6.70418 0.705087 7.72191C1.32367 8.73965 2.28523 9.50315 3.41667 9.875C3.66667 9.91667 3.75 9.75 3.75 9.625V8.79167C2.375 9.08333 2.08333 8.125 2.08333 8.125C1.83333 7.54167 1.5 7.375 1.5 7.375C1.08333 7.08333 1.54167 7.08333 1.54167 7.08333C2.04167 7.08333 2.33333 7.58333 2.33333 7.58333C2.75 8.33333 3.5 8.125 3.79167 8C3.79167 7.66667 3.95833 7.45833 4.08333 7.33333C2.95833 7.20833 1.79167 6.79167 1.79167 4.83333C1.79167 4.33333 2 3.875 2.33333 3.54167C2.25 3.375 2.08333 2.875 2.33333 2.20833C2.33333 2.20833 2.75 2.08333 3.75 2.70833C4.56865 2.48711 5.43135 2.48711 6.25 2.70833C7.20833 2.08333 7.625 2.20833 7.625 2.20833C7.875 2.875 7.70833 3.375 7.625 3.54167C8 3.875 8.16667 4.33333 8.16667 4.875C8.16667 6.79167 7 7.20833 5.875 7.33333C6.08333 7.5 6.25 7.75 6.25 8.25V9.625C6.25 9.75 6.29167 9.91667 6.58333 9.875C7.71478 9.50315 8.67633 8.73965 9.29491 7.72191C9.9135 6.70418 10.1485 5.49906 9.95758 4.32348C9.76668 3.14791 9.16241 2.07908 8.25356 1.30939C7.34471 0.5397 6.19097 0.119704 5 0.125Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.icon-internet {
|
||||
&:before, &:after {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.18 6C7.22 5.67 7.25 5.34 7.25 5C7.25 4.66 7.22 4.33 7.18 4H8.87C8.95 4.32 9 4.655 9 5C9 5.345 8.95 5.68 8.87 6M6.295 8.78C6.595 8.225 6.825 7.625 6.985 7H8.46C7.98 7.825 7.215 8.465 6.295 8.78ZM6.17 6H3.83C3.78 5.67 3.75 5.34 3.75 5C3.75 4.66 3.78 4.325 3.83 4H6.17C6.215 4.325 6.25 4.66 6.25 5C6.25 5.34 6.215 5.67 6.17 6ZM5 8.98C4.585 8.38 4.25 7.715 4.045 7H5.955C5.75 7.715 5.415 8.38 5 8.98ZM3 3H1.54C2.015 2.17 2.785 1.53 3.7 1.22C3.4 1.775 3.175 2.375 3 3ZM1.54 7H3C3.175 7.625 3.4 8.225 3.7 8.78C2.785 8.465 2.015 7.825 1.54 7ZM1.13 6C1.05 5.68 1 5.345 1 5C1 4.655 1.05 4.32 1.13 4H2.82C2.78 4.33 2.75 4.66 2.75 5C2.75 5.34 2.78 5.67 2.82 6M5 1.015C5.415 1.615 5.75 2.285 5.955 3H4.045C4.25 2.285 4.585 1.615 5 1.015ZM8.46 3H6.985C6.825 2.375 6.595 1.775 6.295 1.22C7.215 1.535 7.98 2.17 8.46 3ZM5 0C2.235 0 0 2.25 0 5C0 6.32608 0.526784 7.59785 1.46447 8.53553C1.92876 8.99983 2.47995 9.36812 3.08658 9.6194C3.69321 9.87067 4.34339 10 5 10C6.32608 10 7.59785 9.47322 8.53553 8.53553C9.47322 7.59785 10 6.32608 10 5C10 4.34339 9.87067 3.69321 9.6194 3.08658C9.36812 2.47995 8.99983 1.92876 8.53553 1.46447C8.07124 1.00017 7.52005 0.631876 6.91342 0.380602C6.30679 0.129329 5.65661 0 5 0Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.18 6C7.22 5.67 7.25 5.34 7.25 5C7.25 4.66 7.22 4.33 7.18 4H8.87C8.95 4.32 9 4.655 9 5C9 5.345 8.95 5.68 8.87 6M6.295 8.78C6.595 8.225 6.825 7.625 6.985 7H8.46C7.98 7.825 7.215 8.465 6.295 8.78ZM6.17 6H3.83C3.78 5.67 3.75 5.34 3.75 5C3.75 4.66 3.78 4.325 3.83 4H6.17C6.215 4.325 6.25 4.66 6.25 5C6.25 5.34 6.215 5.67 6.17 6ZM5 8.98C4.585 8.38 4.25 7.715 4.045 7H5.955C5.75 7.715 5.415 8.38 5 8.98ZM3 3H1.54C2.015 2.17 2.785 1.53 3.7 1.22C3.4 1.775 3.175 2.375 3 3ZM1.54 7H3C3.175 7.625 3.4 8.225 3.7 8.78C2.785 8.465 2.015 7.825 1.54 7ZM1.13 6C1.05 5.68 1 5.345 1 5C1 4.655 1.05 4.32 1.13 4H2.82C2.78 4.33 2.75 4.66 2.75 5C2.75 5.34 2.78 5.67 2.82 6M5 1.015C5.415 1.615 5.75 2.285 5.955 3H4.045C4.25 2.285 4.585 1.615 5 1.015ZM8.46 3H6.985C6.825 2.375 6.595 1.775 6.295 1.22C7.215 1.535 7.98 2.17 8.46 3ZM5 0C2.235 0 0 2.25 0 5C0 6.32608 0.526784 7.59785 1.46447 8.53553C1.92876 8.99983 2.47995 9.36812 3.08658 9.6194C3.69321 9.87067 4.34339 10 5 10C6.32608 10 7.59785 9.47322 8.53553 8.53553C9.47322 7.59785 10 6.32608 10 5C10 4.34339 9.87067 3.69321 9.6194 3.08658C9.36812 2.47995 8.99983 1.92876 8.53553 1.46447C8.07124 1.00017 7.52005 0.631876 6.91342 0.380602C6.30679 0.129329 5.65661 0 5 0Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.icon-mail {
|
||||
&:before, &:after {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,285 +0,0 @@
|
|||
@use './components/tokens';
|
||||
@use './components/variables';
|
||||
@use './components/reset';
|
||||
@use './components/superminimal';
|
||||
@use './components/utilities';
|
||||
@use './components/focus';
|
||||
@use './components/button';
|
||||
@use './components/skip-link';
|
||||
@use './components/icons';
|
||||
@use './components/header';
|
||||
@use './components/footer';
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
font-feature-settings: "kern";
|
||||
font-kerning: normal;
|
||||
-moz-osx-font-smoothing: grayscale !important;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-padding-top: 2rem;
|
||||
color: var(--text);
|
||||
background-color: var(--background);
|
||||
accent-color: var(--text);
|
||||
|
||||
font-size: clamp(
|
||||
var(--font-size),
|
||||
var(--font-size) * 0.9 + 0.25vw,
|
||||
var(--font-size) * 2
|
||||
); // % ensures browser zoom is supported.
|
||||
font-family: var(--font); // Use system UI font.
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--leading); // Standard leading for good legibility.
|
||||
letter-spacing: var(--tracking);
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
scroll-padding-top: 8rem;
|
||||
}
|
||||
}
|
||||
body {
|
||||
background: rgb(var(--brand-primary-medium));
|
||||
background: var(--bg-gradient);
|
||||
|
||||
header, footer {
|
||||
padding: .5rem clamp(.2rem, 3vw, 2rem);
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: var(--text);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: var(--border-width);
|
||||
text-underline-offset: calc(var(--border-width) * 2);
|
||||
|
||||
&:hover {
|
||||
text-decoration-thickness: calc(var(--border-width) * 2);
|
||||
}
|
||||
}
|
||||
strong {
|
||||
font-weight: var(--font-weight-semibold); // Make non-heading emphasized text less bold than heading text.
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
h2 {
|
||||
margin-block: 2rem 1rem;
|
||||
font-size: calc(var(--font-size) * 1.6);
|
||||
}
|
||||
.list-inline {
|
||||
--item-gap: 0;
|
||||
}
|
||||
ul:not(.list-inline) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
li {
|
||||
--item-separator: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
height: 90vh;
|
||||
height: 90svh;
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 48ch;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
div {
|
||||
text-align: start;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 1.8rem;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.project-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
|
||||
gap: 1rem;
|
||||
|
||||
li {
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
--background: url('https://placehold.co/200x150'); // Default background
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: .4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 2.5rem;
|
||||
z-index: 1;
|
||||
background: var(--background);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
color: #3a3a3a;
|
||||
transition: color .2s ease-in-out;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
--icon-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
gap: .35rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem .4rem 0 .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
padding-block: 2rem;
|
||||
margin-block: 3.5rem;
|
||||
}
|
||||
|
||||
.socials-list {
|
||||
margin-block-start: 1rem;
|
||||
gap: .2rem;
|
||||
|
||||
&--label {
|
||||
gap: 2rem;
|
||||
|
||||
a {
|
||||
--item-color: black;
|
||||
--icon-color: #262626;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: .25rem;
|
||||
text-decoration-color: #262626;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
--item-color: var(--text-2);
|
||||
--icon-color: var(--text-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin-top: 1.4rem;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inline-size: 6px;
|
||||
background-color: rgb(var(--neutral-lower));
|
||||
inset: 1.5rem 0 0 1.5rem;
|
||||
margin-inline-start: -3px;
|
||||
}
|
||||
|
||||
li {
|
||||
--size: 3rem;
|
||||
position: relative;
|
||||
margin: 1.4rem 0;
|
||||
padding: 0 0 0 calc(var(--size) + .8rem);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
aspect-ratio: 1;
|
||||
inline-size: var(--size);
|
||||
background-color: rgb(var(--neutral-lower));
|
||||
border: 6px solid rgb(var(--brand-secondary-medium));
|
||||
inset-inline-start: 0;
|
||||
// inset-inline-start: .9rem;
|
||||
inset-block-end: 50%;
|
||||
transform: translateY(50%);
|
||||
// inset-block-end: 0;
|
||||
// inset-block-start: 1.5rem;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
border-color: rgb(var(--brand-secondary-high));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.download {
|
||||
gap: .8rem;
|
||||
p {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-download {
|
||||
color: rgb(var(--brand-secondary-lower));
|
||||
}
|
||||
|
||||
.competences-section {
|
||||
.col {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 991px) {
|
||||
> div {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.col {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
20
src/css/footer.css
Normal file
20
src/css/footer.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
footer {
|
||||
background-color: rgb(var(--brand-secondary-medium));
|
||||
justify-items: center;
|
||||
margin-block-start: 1.5rem;
|
||||
}
|
||||
footer > div {
|
||||
place-content: center space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
footer .list-inline a {
|
||||
--item-color: var(--text-2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
footer .socials-list {
|
||||
--item-gap: 0.2ch;
|
||||
--item-separator: "";
|
||||
margin: 0;
|
||||
}
|
||||
34
src/css/header.css
Normal file
34
src/css/header.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
header {
|
||||
background-color: rgb(var(--brand-primary-medium));
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
inset-inline: 0;
|
||||
}
|
||||
header nav ul {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
header nav li {
|
||||
text-align: end;
|
||||
margin: 0;
|
||||
padding: 6px clamp(10px, 3vw, 20px);
|
||||
}
|
||||
header nav a {
|
||||
text-underline-offset: 0.4rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
header nav a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 0.12rem;
|
||||
}
|
||||
header nav a[aria-current="page"] {
|
||||
color: var(--text-2);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 0.12rem;
|
||||
}
|
||||
464
src/css/main.css
Normal file
464
src/css/main.css
Normal file
|
|
@ -0,0 +1,464 @@
|
|||
:where(h1, h2, h3, h4, h5, h6, summary strong, legend) {
|
||||
font-stretch: var(--font-stretch, expanded);
|
||||
}
|
||||
:where(h1, h2, h3, h4, h5, h6, p) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.wrapper,
|
||||
.wrapper-full {
|
||||
grid-template-columns: 1fr min(
|
||||
var(--wrapper-max-length, var(--line-length)),
|
||||
100% - var(--wrapper-gap, var(--gutter)) * 2
|
||||
) 1fr;
|
||||
grid-column-gap: var(--wrapper-gap, var(--gutter));
|
||||
display: grid;
|
||||
}
|
||||
.wrapper > *,
|
||||
.wrapper-full > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
.wrapper-full {
|
||||
grid-template-columns: 1fr min(
|
||||
var(--wrapper-max-length, var(--line-length-large)),
|
||||
100% - var(--wrapper-gap, var(--gutter)) * 2
|
||||
) 1fr;
|
||||
}
|
||||
.full-bleed {
|
||||
inline-size: 100%;
|
||||
padding: var(--padding-block, 1rem) var(--padding-inline, 2rem);
|
||||
background-color: var(--background-color, none);
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
.flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.sr-only {
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
block-size: 1px !important;
|
||||
inline-size: 1px !important;
|
||||
margin: -1px !important;
|
||||
padding: 0 !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
.list-inline {
|
||||
margin-left: calc(var(--item-gap, 1ch) * 3 * -1);
|
||||
clip-path: inset(0 0 0 calc(var(--item-gap, 1ch) * 3));
|
||||
color: var(--item-color, var(--text));
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
.list-inline li {
|
||||
padding-left: var(--item-gap, 1ch);
|
||||
}
|
||||
.list-inline li:before {
|
||||
content: var(--item-separator, "•");
|
||||
margin-right: var(--item-gap, 1ch);
|
||||
width: var(--item-gap, 1ch);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
.list-inline a {
|
||||
color: var(--item-color, var(--text));
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.list-inline a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
* {
|
||||
outline-offset: 2px;
|
||||
outline-width: 2px;
|
||||
outline-color: #0a76f6;
|
||||
}
|
||||
:focus:focus-visible {
|
||||
outline-style: solid;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
button,
|
||||
.btn {
|
||||
--hover: rgba(var(--neutral-highest), 0.8);
|
||||
--active: rgba(var(--neutral-highest), 0.8);
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
min-height: 2.5rem;
|
||||
max-height: none;
|
||||
color: rgb(var(--neutral-lower));
|
||||
background-color: var(--text);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-stretch: var(--font-stretch, condensed);
|
||||
border: none;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.1s ease-in-out;
|
||||
display: inline-flex;
|
||||
}
|
||||
button:disabled,
|
||||
.btn:disabled {
|
||||
--hover: inherit;
|
||||
--active: inherit;
|
||||
color: #929292;
|
||||
cursor: not-allowed;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
button:not(:disabled):hover,
|
||||
.btn:not(:disabled):hover {
|
||||
background-color: var(--hover);
|
||||
}
|
||||
button:not(:disabled):active,
|
||||
.btn:not(:disabled):active {
|
||||
background-color: var(--active);
|
||||
}
|
||||
|
||||
/* Skip link */
|
||||
body > a {
|
||||
z-index: 99999;
|
||||
padding: 0.4rem 1rem;
|
||||
position: absolute;
|
||||
inset-block-start: 0.3rem;
|
||||
inset-inline-start: 0.3rem;
|
||||
}
|
||||
body > a:not(:focus) {
|
||||
size: 1px;
|
||||
white-space: nowrap;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
border: 0;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.icon-download:before,
|
||||
.icon-download:after {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-github:before,
|
||||
.icon-github:after {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0.125C3.80903 0.119704 2.65529 0.5397 1.74644 1.30939C0.837586 2.07908 0.233325 3.14791 0.0424187 4.32348C-0.148487 5.49906 0.0865013 6.70418 0.705087 7.72191C1.32367 8.73965 2.28523 9.50315 3.41667 9.875C3.66667 9.91667 3.75 9.75 3.75 9.625V8.79167C2.375 9.08333 2.08333 8.125 2.08333 8.125C1.83333 7.54167 1.5 7.375 1.5 7.375C1.08333 7.08333 1.54167 7.08333 1.54167 7.08333C2.04167 7.08333 2.33333 7.58333 2.33333 7.58333C2.75 8.33333 3.5 8.125 3.79167 8C3.79167 7.66667 3.95833 7.45833 4.08333 7.33333C2.95833 7.20833 1.79167 6.79167 1.79167 4.83333C1.79167 4.33333 2 3.875 2.33333 3.54167C2.25 3.375 2.08333 2.875 2.33333 2.20833C2.33333 2.20833 2.75 2.08333 3.75 2.70833C4.56865 2.48711 5.43135 2.48711 6.25 2.70833C7.20833 2.08333 7.625 2.20833 7.625 2.20833C7.875 2.875 7.70833 3.375 7.625 3.54167C8 3.875 8.16667 4.33333 8.16667 4.875C8.16667 6.79167 7 7.20833 5.875 7.33333C6.08333 7.5 6.25 7.75 6.25 8.25V9.625C6.25 9.75 6.29167 9.91667 6.58333 9.875C7.71478 9.50315 8.67633 8.73965 9.29491 7.72191C9.9135 6.70418 10.1485 5.49906 9.95758 4.32348C9.76668 3.14791 9.16241 2.07908 8.25356 1.30939C7.34471 0.5397 6.19097 0.119704 5 0.125Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0.125C3.80903 0.119704 2.65529 0.5397 1.74644 1.30939C0.837586 2.07908 0.233325 3.14791 0.0424187 4.32348C-0.148487 5.49906 0.0865013 6.70418 0.705087 7.72191C1.32367 8.73965 2.28523 9.50315 3.41667 9.875C3.66667 9.91667 3.75 9.75 3.75 9.625V8.79167C2.375 9.08333 2.08333 8.125 2.08333 8.125C1.83333 7.54167 1.5 7.375 1.5 7.375C1.08333 7.08333 1.54167 7.08333 1.54167 7.08333C2.04167 7.08333 2.33333 7.58333 2.33333 7.58333C2.75 8.33333 3.5 8.125 3.79167 8C3.79167 7.66667 3.95833 7.45833 4.08333 7.33333C2.95833 7.20833 1.79167 6.79167 1.79167 4.83333C1.79167 4.33333 2 3.875 2.33333 3.54167C2.25 3.375 2.08333 2.875 2.33333 2.20833C2.33333 2.20833 2.75 2.08333 3.75 2.70833C4.56865 2.48711 5.43135 2.48711 6.25 2.70833C7.20833 2.08333 7.625 2.20833 7.625 2.20833C7.875 2.875 7.70833 3.375 7.625 3.54167C8 3.875 8.16667 4.33333 8.16667 4.875C8.16667 6.79167 7 7.20833 5.875 7.33333C6.08333 7.5 6.25 7.75 6.25 8.25V9.625C6.25 9.75 6.29167 9.91667 6.58333 9.875C7.71478 9.50315 8.67633 8.73965 9.29491 7.72191C9.9135 6.70418 10.1485 5.49906 9.95758 4.32348C9.76668 3.14791 9.16241 2.07908 8.25356 1.30939C7.34471 0.5397 6.19097 0.119704 5 0.125Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-internet:before,
|
||||
.icon-internet:after {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.18 6C7.22 5.67 7.25 5.34 7.25 5C7.25 4.66 7.22 4.33 7.18 4H8.87C8.95 4.32 9 4.655 9 5C9 5.345 8.95 5.68 8.87 6M6.295 8.78C6.595 8.225 6.825 7.625 6.985 7H8.46C7.98 7.825 7.215 8.465 6.295 8.78ZM6.17 6H3.83C3.78 5.67 3.75 5.34 3.75 5C3.75 4.66 3.78 4.325 3.83 4H6.17C6.215 4.325 6.25 4.66 6.25 5C6.25 5.34 6.215 5.67 6.17 6ZM5 8.98C4.585 8.38 4.25 7.715 4.045 7H5.955C5.75 7.715 5.415 8.38 5 8.98ZM3 3H1.54C2.015 2.17 2.785 1.53 3.7 1.22C3.4 1.775 3.175 2.375 3 3ZM1.54 7H3C3.175 7.625 3.4 8.225 3.7 8.78C2.785 8.465 2.015 7.825 1.54 7ZM1.13 6C1.05 5.68 1 5.345 1 5C1 4.655 1.05 4.32 1.13 4H2.82C2.78 4.33 2.75 4.66 2.75 5C2.75 5.34 2.78 5.67 2.82 6M5 1.015C5.415 1.615 5.75 2.285 5.955 3H4.045C4.25 2.285 4.585 1.615 5 1.015ZM8.46 3H6.985C6.825 2.375 6.595 1.775 6.295 1.22C7.215 1.535 7.98 2.17 8.46 3ZM5 0C2.235 0 0 2.25 0 5C0 6.32608 0.526784 7.59785 1.46447 8.53553C1.92876 8.99983 2.47995 9.36812 3.08658 9.6194C3.69321 9.87067 4.34339 10 5 10C6.32608 10 7.59785 9.47322 8.53553 8.53553C9.47322 7.59785 10 6.32608 10 5C10 4.34339 9.87067 3.69321 9.6194 3.08658C9.36812 2.47995 8.99983 1.92876 8.53553 1.46447C8.07124 1.00017 7.52005 0.631876 6.91342 0.380602C6.30679 0.129329 5.65661 0 5 0Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.18 6C7.22 5.67 7.25 5.34 7.25 5C7.25 4.66 7.22 4.33 7.18 4H8.87C8.95 4.32 9 4.655 9 5C9 5.345 8.95 5.68 8.87 6M6.295 8.78C6.595 8.225 6.825 7.625 6.985 7H8.46C7.98 7.825 7.215 8.465 6.295 8.78ZM6.17 6H3.83C3.78 5.67 3.75 5.34 3.75 5C3.75 4.66 3.78 4.325 3.83 4H6.17C6.215 4.325 6.25 4.66 6.25 5C6.25 5.34 6.215 5.67 6.17 6ZM5 8.98C4.585 8.38 4.25 7.715 4.045 7H5.955C5.75 7.715 5.415 8.38 5 8.98ZM3 3H1.54C2.015 2.17 2.785 1.53 3.7 1.22C3.4 1.775 3.175 2.375 3 3ZM1.54 7H3C3.175 7.625 3.4 8.225 3.7 8.78C2.785 8.465 2.015 7.825 1.54 7ZM1.13 6C1.05 5.68 1 5.345 1 5C1 4.655 1.05 4.32 1.13 4H2.82C2.78 4.33 2.75 4.66 2.75 5C2.75 5.34 2.78 5.67 2.82 6M5 1.015C5.415 1.615 5.75 2.285 5.955 3H4.045C4.25 2.285 4.585 1.615 5 1.015ZM8.46 3H6.985C6.825 2.375 6.595 1.775 6.295 1.22C7.215 1.535 7.98 2.17 8.46 3ZM5 0C2.235 0 0 2.25 0 5C0 6.32608 0.526784 7.59785 1.46447 8.53553C1.92876 8.99983 2.47995 9.36812 3.08658 9.6194C3.69321 9.87067 4.34339 10 5 10C6.32608 10 7.59785 9.47322 8.53553 8.53553C9.47322 7.59785 10 6.32608 10 5C10 4.34339 9.87067 3.69321 9.6194 3.08658C9.36812 2.47995 8.99983 1.92876 8.53553 1.46447C8.07124 1.00017 7.52005 0.631876 6.91342 0.380602C6.30679 0.129329 5.65661 0 5 0Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-mail:before,
|
||||
.icon-mail:after {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
[class*="\ icon-"],
|
||||
[class^="icon-"] {
|
||||
--icon-size: 1.5rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
[class*="\ icon-"]:before,
|
||||
[class*="\ icon-"]:after,
|
||||
[class^="icon-"]:before,
|
||||
[class^="icon-"]:after {
|
||||
--m-interior: 0.5rem;
|
||||
--m-exterior: -0.125rem;
|
||||
background-color: var(--icon-color, currentColor);
|
||||
block-size: 1.5rem;
|
||||
inline-size: 1.5rem;
|
||||
block-size: var(--icon-size);
|
||||
inline-size: var(--icon-size);
|
||||
vertical-align: calc(0.375em - 0.75rem);
|
||||
vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
|
||||
flex: none;
|
||||
display: inline-block;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
[class*="\ icon-"]:before,
|
||||
[class*="\ icon-"].icon--right:after,
|
||||
[class^="icon-"]:before,
|
||||
[class^="icon-"].icon--right:after {
|
||||
content: "";
|
||||
}
|
||||
[class*="\ icon-"].icon--right:before,
|
||||
[class^="icon-"].icon--right:before {
|
||||
content: none;
|
||||
}
|
||||
.icon--left:before {
|
||||
margin-inline-start: var(--m-exterior);
|
||||
margin-inline-end: var(--m-interior);
|
||||
}
|
||||
.icon--right:after {
|
||||
margin-inline-start: var(--m-interior);
|
||||
margin-inline-end: var(--m-exterior);
|
||||
}
|
||||
.icon--sm {
|
||||
--icon-size: 1rem;
|
||||
}
|
||||
.icon--lg {
|
||||
--icon-size: 2rem;
|
||||
}
|
||||
|
||||
/* Other */
|
||||
*,
|
||||
:before,
|
||||
:after {
|
||||
font-feature-settings: "kern";
|
||||
font-kerning: normal;
|
||||
box-sizing: border-box;
|
||||
-moz-osx-font-smoothing: grayscale !important;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
}
|
||||
html {
|
||||
color: var(--text);
|
||||
background-color: var(--background);
|
||||
accent-color: var(--text);
|
||||
font-size: clamp(
|
||||
var(--font-size),
|
||||
var(--font-size) * 0.9 + 0.25vw,
|
||||
var(--font-size) * 2
|
||||
);
|
||||
font-family: var(--font);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--leading);
|
||||
letter-spacing: var(--tracking);
|
||||
scroll-padding-top: 2rem;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
html {
|
||||
scroll-padding-top: 8rem;
|
||||
}
|
||||
}
|
||||
body {
|
||||
background: rgb(var(--brand-primary-medium));
|
||||
background: var(--bg-gradient);
|
||||
margin: 0;
|
||||
}
|
||||
body header,
|
||||
body footer {
|
||||
padding: 0.5rem clamp(0.2rem, 3vw, 2rem);
|
||||
}
|
||||
a {
|
||||
color: var(--text);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: var(--border-width);
|
||||
text-underline-offset: calc(var(--border-width) * 2);
|
||||
}
|
||||
a:hover {
|
||||
text-decoration-thickness: calc(var(--border-width) * 2);
|
||||
}
|
||||
strong {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
main {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
main h2 {
|
||||
font-size: calc(var(--font-size) * 1.6);
|
||||
margin-block: 2rem 1rem;
|
||||
}
|
||||
main .list-inline {
|
||||
--item-gap: 0;
|
||||
}
|
||||
main ul:not(.list-inline) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
main li {
|
||||
--item-separator: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.hero {
|
||||
height: 90svh;
|
||||
}
|
||||
.hero div {
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.hero p {
|
||||
max-width: 48ch;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.hero div {
|
||||
text-align: start;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
.project-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
|
||||
gap: 1rem;
|
||||
display: grid;
|
||||
}
|
||||
.project-grid li {
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card {
|
||||
--background: url(https://placehold.co/200x150);
|
||||
z-index: 1;
|
||||
background: var(--background);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 2.5rem;
|
||||
height: 100%;
|
||||
padding: 0.4rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.card a:hover {
|
||||
color: #3a3a3a;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
.card a:before,
|
||||
.card a:after {
|
||||
--icon-size: 1.2rem;
|
||||
}
|
||||
.card .top {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.card .links {
|
||||
align-self: flex-end;
|
||||
gap: 0.35rem;
|
||||
display: flex;
|
||||
}
|
||||
.card .content {
|
||||
padding: 1rem 0.4rem 0;
|
||||
}
|
||||
section {
|
||||
margin-block: 3.5rem;
|
||||
padding-block: 2rem;
|
||||
}
|
||||
.socials-list {
|
||||
gap: 0.2rem;
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
.socials-list--label {
|
||||
gap: 2rem;
|
||||
}
|
||||
.socials-list--label a {
|
||||
--item-color: black;
|
||||
--icon-color: #262626;
|
||||
text-underline-offset: 0.25rem;
|
||||
font-weight: 500;
|
||||
-webkit-text-decoration: underline #262626;
|
||||
text-decoration: underline #262626;
|
||||
}
|
||||
.socials-list--label a:hover {
|
||||
--item-color: var(--text-2);
|
||||
--icon-color: var(--text-2);
|
||||
}
|
||||
.timeline {
|
||||
flex-direction: column;
|
||||
margin-top: 1.4rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.timeline:before {
|
||||
content: "";
|
||||
background-color: rgb(var(--neutral-lower));
|
||||
inline-size: 6px;
|
||||
margin-inline-start: -3px;
|
||||
position: absolute;
|
||||
inset: 1.5rem 0 0 1.5rem;
|
||||
}
|
||||
.timeline li {
|
||||
--size: 3rem;
|
||||
padding: 0 0 0 calc(var(--size) + 0.8rem);
|
||||
margin: 1.4rem 0;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
}
|
||||
.timeline li:last-child {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.timeline li:first-child {
|
||||
margin-top: -20px;
|
||||
}
|
||||
.timeline li:before {
|
||||
content: "";
|
||||
aspect-ratio: 1;
|
||||
inline-size: var(--size);
|
||||
background-color: rgb(var(--neutral-lower));
|
||||
border: 6px solid rgb(var(--brand-secondary-medium));
|
||||
z-index: 1;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s ease-in-out;
|
||||
position: absolute;
|
||||
inset-block-end: 50%;
|
||||
inset-inline-start: 0;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
.timeline li:hover:before {
|
||||
border-color: rgb(var(--brand-secondary-high));
|
||||
}
|
||||
.download {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.download p {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.btn-download {
|
||||
color: rgb(var(--brand-secondary-lower));
|
||||
}
|
||||
.competences-section .col {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@media screen and (min-width: 991px) {
|
||||
.competences-section > div {
|
||||
flex-direction: row;
|
||||
}
|
||||
.competences-section .col {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
307
src/css/reset.css
Normal file
307
src/css/reset.css
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
/**
|
||||
* uaplus.css version 0.0.1
|
||||
*/
|
||||
|
||||
/**
|
||||
* Different box model
|
||||
*
|
||||
* We use the traditional box model, where the padding and border
|
||||
* of the element is drawn inside and not outside the specified
|
||||
* width and height. That makes combining relative and absolute
|
||||
* units in properties like <code>inline-size</code> and
|
||||
* <code>block-size</code> easier.
|
||||
*
|
||||
* See https://en.wikipedia.org/wiki/CSS_box_model
|
||||
*/
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve focus styles
|
||||
*
|
||||
* Add spacing between content and its focus outline.
|
||||
*/
|
||||
:focus-visible {
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable text size adjustment
|
||||
*
|
||||
* To improve readability on non-mobile optimized websites, browsers
|
||||
* like mobile Safari increase the default font size when you switch
|
||||
* a website from portrait to landscape. We don't want that for our
|
||||
* optimized sites.
|
||||
*
|
||||
* See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
|
||||
*/
|
||||
:where(html) {
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Increase line height
|
||||
*
|
||||
* Long paragraphs are easier to read if the line height is higher.
|
||||
*/
|
||||
:where(html) {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add scrollbar gutter
|
||||
*
|
||||
* Prevent the page from “jumping” when switching from a long to a short page.
|
||||
*
|
||||
*/
|
||||
:where(html) {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove UA styles for h1s nested in sectioning content
|
||||
*
|
||||
* Nesting h1s in section, articles, etc., shouldn't influence the
|
||||
* styling of the heading since nesting doesn't influence
|
||||
* semantics either.
|
||||
*
|
||||
* See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
|
||||
* See https://github.com/whatwg/html/pull/11102
|
||||
* See https://html.spec.whatwg.org/#sections-and-headings
|
||||
*/
|
||||
:where(h1) {
|
||||
font-size: 2em;
|
||||
margin-block: 0.67em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve abbreviations with titles
|
||||
*
|
||||
* The abbr element with the title isn't helpful regarding
|
||||
* accessibility because support is inconsistent, and it's only
|
||||
* accessible to some users. Still, it's commonly used.
|
||||
* This rule shows a dotted underline on abbreviations in all
|
||||
* browsers (there's a bug in Safari) and changes the cursor.
|
||||
*
|
||||
* See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
|
||||
*/
|
||||
:where(abbr[title]) {
|
||||
cursor: help;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Optimize mark element in Forced Colors Mode
|
||||
*
|
||||
* The colors of the mark element don't change in Forced Colors Mode,
|
||||
* which can be problematic. Use system colors instead.
|
||||
*
|
||||
* See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
|
||||
*/
|
||||
@media (forced-colors: active) {
|
||||
mark {
|
||||
color: HighlightText;
|
||||
background-color: Highlight;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Announce del, ins, and s to screen readers
|
||||
*
|
||||
* With the exception of NVDA (2024.4.2), which announces "deletion",
|
||||
* none of the common screen readers announces the <s> element.
|
||||
* Voice Over on macOS and iOS and Narrator don't announce
|
||||
* <ins> and <del>. Usually, screen readers not announcing text-level
|
||||
* semantics is something we just accept, but devs using elements
|
||||
* like <s> without knowing that they may not convey semantics is a
|
||||
* common issue. We announce the start and end of stricken, inserted,
|
||||
* and deleted content with pseudo-elements. For languages other
|
||||
* than English, you should provide translations, e.g. :lang(de)
|
||||
* :where(s::before) { content: "Durchgestrichener Text Beginn "; }
|
||||
*
|
||||
* See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html
|
||||
*/
|
||||
:where(del, ins, s)::before,
|
||||
:where(del, ins, s)::after
|
||||
{
|
||||
clip-path: inset(100%);
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
content: "test"
|
||||
}
|
||||
|
||||
:where(s)::before {
|
||||
content: "stricken text start ";
|
||||
}
|
||||
|
||||
:where(s)::after {
|
||||
content: " stricken text end";
|
||||
}
|
||||
|
||||
:where(del)::before {
|
||||
content: "deletion start ";
|
||||
}
|
||||
|
||||
:where(del)::after {
|
||||
content: " deletion end";
|
||||
}
|
||||
|
||||
:where(ins)::before {
|
||||
content: "insertion start ";
|
||||
}
|
||||
|
||||
:where(ins)::after {
|
||||
content: " insertion end";
|
||||
}
|
||||
|
||||
/**
|
||||
* Avoid overflow caused by embedded content
|
||||
*
|
||||
* Ensure that embedded content (audio, video, images, etc.)
|
||||
* doesn't overflow its container.
|
||||
*/
|
||||
:where(audio, iframe, img, svg, video) {
|
||||
max-block-size: 100%;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent fieldsets from causing overflow
|
||||
*
|
||||
* Reset the default `min-inline-size: min-content` to prevent
|
||||
* children from stretching fieldsets
|
||||
*
|
||||
* See https://github.com/twbs/bootstrap/issues/12359
|
||||
* and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
|
||||
*/
|
||||
:where(fieldset) {
|
||||
min-inline-size: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Turn labels into block elements
|
||||
*
|
||||
* Labels for inputs, selects, and textarea should be block
|
||||
* elements.
|
||||
*/
|
||||
:where(label):has(+ :where(textarea, input, select)) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Increase the block-size of textareas
|
||||
*
|
||||
* The default height of textareas is small. We increase it a bit.
|
||||
*/
|
||||
:where(textarea:not([rows])) {
|
||||
min-block-size: 6em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Inherit font styling in form elements
|
||||
*
|
||||
* buttons, inputs, selects, and textarea should have the same font
|
||||
* family and size as the rest of the page.
|
||||
*/
|
||||
:where(button, input, select, textarea) {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize search input styles
|
||||
*
|
||||
* Remove the rounded corners of search inputs on macOS and IOS
|
||||
* and normalize the background color
|
||||
*/
|
||||
:where([type="search"]) {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
/* iOS only */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
:where([type="search"]) {
|
||||
border: 1px solid -apple-system-secondary-label;
|
||||
background-color: canvas;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maintain direction in some input types
|
||||
*
|
||||
* Some input types should remain left-aligned in right-to-left
|
||||
* languages,but only if the value isn't empty because the
|
||||
* placeholder should be right-aligned.
|
||||
*
|
||||
* See https://rtlstyling.com/posts/rtl-styling#form-inputs
|
||||
*/
|
||||
:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(
|
||||
:placeholder-shown
|
||||
) {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve table styling
|
||||
*
|
||||
* With the default styling, tables are hard to scan. These rules
|
||||
* add padding and collapsed borders.
|
||||
*/
|
||||
:where(table) {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
:where(th, td) {
|
||||
border: 1px solid;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fading dialogs
|
||||
*
|
||||
* Add fade in and fade out transitions for the dialog element
|
||||
* and backdrops
|
||||
*/
|
||||
:where(dialog)::backdrop {
|
||||
background: oklch(0% 0 0 / 0.3);
|
||||
}
|
||||
|
||||
:where(dialog),
|
||||
:where(dialog)::backdrop {
|
||||
opacity: 0;
|
||||
transition: opacity 300ms ease-out, display 300ms allow-discrete,
|
||||
overlay 300ms allow-discrete;
|
||||
}
|
||||
|
||||
:where(dialog[open]),
|
||||
:where(dialog[open])::backdrop {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@starting-style {
|
||||
:where(dialog[open]),
|
||||
:where(dialog[open])::backdrop {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Increase specificity of [hidden]
|
||||
*
|
||||
* Make it harder to accidentally unhide elements with the
|
||||
* [hidden] attribute while still maintaining the until-found
|
||||
* functionality.
|
||||
*/
|
||||
[hidden]:not([hidden="until-found"]) {
|
||||
display: none !important;
|
||||
}
|
||||
60
src/css/variables.css
Normal file
60
src/css/variables.css
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
:root {
|
||||
--neutral-lowest: 255, 255, 255, 0.5;
|
||||
--neutral-lower: 231 231 231;
|
||||
--neutral-low: 209 209 209;
|
||||
--neutral-medium-low: 176 176 176;
|
||||
--neutral-medium: 136 136 136;
|
||||
--neutral-medium-high: 109 109 109;
|
||||
--neutral-high: 93 93 93;
|
||||
--neutral-higher: 79 79 79;
|
||||
--neutral-highest: 9, 9, 11;
|
||||
--brand-primary-lowest: 249 248 243;
|
||||
--brand-primary-lower: 242 239 226;
|
||||
--brand-primary-low: 210 199 159;
|
||||
--brand-primary-medium-low: 194 176 128;
|
||||
--brand-primary-medium: 177 151 94;
|
||||
--brand-primary-medium-high: 164 133 82;
|
||||
--brand-primary-high: 136 107 70;
|
||||
--brand-primary-higher: 90 72 52;
|
||||
--brand-primary-highest: 48 37 26;
|
||||
--brand-secondary-lowest: 244 247 238;
|
||||
--brand-secondary-lower: 231 238 217;
|
||||
--brand-secondary-low: 187 208 154;
|
||||
--brand-secondary-medium-low: 149 180 103;
|
||||
--brand-secondary-medium: 119 152 74;
|
||||
--brand-secondary-medium-high: 93 120 56;
|
||||
--brand-secondary-high: 72 93 46;
|
||||
--brand-secondary-higher: 52 65 38;
|
||||
--brand-secondary-highest: 26 34 17;
|
||||
--bg-gradient: linear-gradient(
|
||||
180deg,
|
||||
rgb(var(--brand-primary-medium)) 0%,
|
||||
rgb(var(--brand-primary-medium)) 5%,
|
||||
rgb(var(--brand-primary-low)) 30%,
|
||||
rgb(var(--brand-primary-lower)) 50%,
|
||||
rgb(var(--brand-secondary-lower)) 51%,
|
||||
rgb(var(--brand-secondary-low)) 65%,
|
||||
rgb(var(--brand-secondary-medium)) 98%,
|
||||
rgb(var(--brand-secondary-medium)) 100%
|
||||
);
|
||||
--background: rgb(var(--brand-primary-medium));
|
||||
--text: rgb(var(--neutral-highest));
|
||||
--text-2: rgba(var(--neutral-highest), 0.8);
|
||||
--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
|
||||
--font-italic: "Georgia", serif;
|
||||
--font-code: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
|
||||
Liberation Mono, monospace;
|
||||
--font-size: 1.2rem;
|
||||
--font-weight-semibold: 700;
|
||||
--font-weight-bold: 900;
|
||||
--leading: 1.45;
|
||||
--gutter: clamp(1ch, 2.5vmax, 3ch);
|
||||
--stack: clamp(1.25ex, 1ex + 2.5vmax, 1.75ex);
|
||||
--line-length-small: 30ch;
|
||||
--line-length: 75ch;
|
||||
--line-length-large: 115ch;
|
||||
--page-padding-inline: calc((100vw - min(var(--line-length), 80vw)) / 2);
|
||||
--border-width: 1px;
|
||||
--border-radius: 4px;
|
||||
}
|
||||
Loading…
Reference in a new issue