Compare commits
4 commits
f5bebc057e
...
98f2f4fb46
| Author | SHA1 | Date | |
|---|---|---|---|
 TheThomaas
|
98f2f4fb46 | ||
|
TheThomaas
|
790c560764 | ||
|
TheThomaas
|
d76d3310fc | ||
|
TheThomaas
|
9093d47677 |
|
|
@ -1,8 +1,4 @@
|
|||
import { inspect } from "util";
|
||||
import browserslist from "browserslist";
|
||||
import * as sass from "sass";
|
||||
import path from "node:path";
|
||||
import { bundle, browserslistToTargets, composeVisitors, transform } from "lightningcss" ;
|
||||
|
||||
export default async function (eleventyConfig) {
|
||||
eleventyConfig.setUseGitIgnore(false);
|
||||
|
|
@ -31,74 +27,7 @@ export default async function (eleventyConfig) {
|
|||
|
||||
eleventyConfig.addPassthroughCopy('src/favicon.ico')
|
||||
|
||||
// Recognize CSS as a "template language"
|
||||
eleventyConfig.addTemplateFormats("css");
|
||||
|
||||
// Process CSS with LightningCSS
|
||||
eleventyConfig.addExtension("css", {
|
||||
outputFileExtension: "css",
|
||||
compile: async function (_inputContent, inputPath) {
|
||||
let parsed = path.parse(inputPath);
|
||||
if (parsed.name.startsWith("_")) {
|
||||
return;
|
||||
}
|
||||
|
||||
let targets = browserslistToTargets(browserslist("> 0.2% and not dead"));
|
||||
|
||||
return async () => {
|
||||
// Switch to the `transform` function if you don't
|
||||
// plan to use `@import` to merge files
|
||||
let { code } = await bundle({
|
||||
filename: inputPath,
|
||||
minify: true,
|
||||
sourceMap: false,
|
||||
targets,
|
||||
// Supports CSS nesting
|
||||
drafts: {
|
||||
nesting,
|
||||
},
|
||||
});
|
||||
return code;
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
// Recognize Sass as a "template languages"
|
||||
eleventyConfig.addTemplateFormats("scss");
|
||||
|
||||
// Compile Sass
|
||||
eleventyConfig.addExtension("scss", {
|
||||
outputFileExtension: "css",
|
||||
compile: async function (inputContent, inputPath) {
|
||||
// Skip files like _fileName.scss
|
||||
let parsed = path.parse(inputPath);
|
||||
if (parsed.name.startsWith("_")) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Run file content through Sass
|
||||
let result = sass.compileString(inputContent, {
|
||||
loadPaths: [parsed.dir || "."],
|
||||
sourceMap: false, // or true, your choice!
|
||||
});
|
||||
|
||||
// Allow included files from @use or @import to
|
||||
// trigger rebuilds when using --incremental
|
||||
this.addDependencies(inputPath, result.loadedUrls);
|
||||
|
||||
let targets = browserslistToTargets(browserslist("> 0.2% and not dead"));
|
||||
|
||||
return async () => {
|
||||
let { code } = await transform({
|
||||
code: Buffer.from(result.css),
|
||||
minify: true,
|
||||
sourceMap: false,
|
||||
targets,
|
||||
});
|
||||
return code;
|
||||
};
|
||||
},
|
||||
});
|
||||
eleventyConfig.addBundle("css");
|
||||
|
||||
return {
|
||||
markdownTemplateEngine: 'liquid',
|
||||
|
|
|
|||
|
|
@ -2,6 +2,15 @@
|
|||
<html lang={{ site.lang }} class="no-js">
|
||||
<head>
|
||||
{% include "partials/metas.html" %}
|
||||
|
||||
{% css %}
|
||||
{% include "css/reset.css" %}
|
||||
{% include "css/variables.css" %}
|
||||
{% include "css/main.css" %}
|
||||
{% include "css/header.css" %}
|
||||
{% include "css/footer.css" %}
|
||||
{% endcss %}
|
||||
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
|
||||
</head>
|
||||
<body>
|
||||
{% include "partials/header.liquid" %}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,3 @@
|
|||
<meta property="og:url" content="{{ currentUrl }}" />
|
||||
|
||||
<link rel="icon" href="/favicon.ico" sizes="any">
|
||||
|
||||
<style>
|
||||
{% include "css/critical.css" %}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"eleventyExcludeFromCollections": true
|
||||
}
|
||||
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