first commit
This commit is contained in:
Nico
commit
e1362c0d36
25 changed files with 13100 additions and 0 deletions
122
assets/css/global/01-reset.css
Normal file
122
assets/css/global/01-reset.css
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
/* RESET */
|
||||
* {
|
||||
/* Remove default margin on everything */
|
||||
margin: 0;
|
||||
/* Remove default padding on everything */
|
||||
padding: 0;
|
||||
/* Calc `em` based line height, bigger line height for smaller font size and smaller line height for bigger font size: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
|
||||
line-height: calc(0.25rem + 1em + 0.25rem);
|
||||
}
|
||||
/* Use a more-intuitive box-sizing model on everything */
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* Remove border and set sensible defaults for backgrounds, on all elements except fieldset progress and meter */
|
||||
*:where(:not(fieldset, progress, meter)) {
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
background-origin: border-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
html {
|
||||
/* Allow percentage-based heights in the application */
|
||||
block-size: 100%;
|
||||
/* Making sure text size is only controlled by font-size */
|
||||
-webkit-text-size-adjust: none;
|
||||
/* Improve text rendering */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
/* Smooth scrolling for users that don't prefer reduced motion */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
/* Allow percentage-based heights in the application */
|
||||
min-block-size: 100%;
|
||||
/* https://www.sarasoueidan.com/blog/safari-fluid-typography-bug-fix/ */
|
||||
-webkit-marquee-increment: 0vw;
|
||||
}
|
||||
/* Improve media defaults */
|
||||
:where(img, svg, video, canvas, audio, iframe, embed, object) {
|
||||
display: block;
|
||||
}
|
||||
:where(img, svg, video) {
|
||||
block-size: auto;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
/* Smaller line height for titles */
|
||||
:where(h1, h2, h3, h1 a, h2 a, h3 a) {
|
||||
line-height: 1.1;
|
||||
}
|
||||
/* Avoid text overflows */
|
||||
:where(p, h1, h2, h3, h4, h5, h6) {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
:where(ul, ol)[role="list"] {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
/* More readable underline style for anchor tags without a class. This could be set on anchor tags globally, but it can cause conflicts. */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
/* Make it clear that interactive elements are interactive */
|
||||
:where(
|
||||
a[href],
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label[for],
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex]:not([tabindex*="-"])
|
||||
) {
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
:where(input[type="file"]) {
|
||||
cursor: auto;
|
||||
}
|
||||
:where(input[type="file"])::-webkit-file-upload-button,
|
||||
:where(input[type="file"])::file-selector-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Make sure users can't select button text */
|
||||
:where(
|
||||
button,
|
||||
button[type],
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"]
|
||||
),
|
||||
:where(input[type="file"])::-webkit-file-upload-button,
|
||||
:where(input[type="file"])::file-selector-button {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
/* Disabled cursor for disabled buttons */
|
||||
:where(
|
||||
button,
|
||||
button[type],
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"]
|
||||
)[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* END RESET */
|
||||
35
assets/css/global/02-fonts.css
Normal file
35
assets/css/global/02-fonts.css
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
@font-face {
|
||||
font-family: "wotfard";
|
||||
src: url("~/assets/fonts/wotfard/wotfard-medium-fr.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "wotfard";
|
||||
src: url("~/assets/fonts/wotfard/wotfard-semibold-fr.woff2") format("woff2");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "wotfard";
|
||||
src: url("~/assets/fonts/wotfard/wotfard-regular-fr.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/*
|
||||
* reduces Cumulative Layout Shift
|
||||
* https://www.24joursdeweb.fr/2021/performance-web-lintegrateur-ce-heros/
|
||||
*/
|
||||
@font-face {
|
||||
font-family: "ArialReplace";
|
||||
src: local("Arial");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
size-adjust: 94%;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
48
assets/css/global/03-variables.css
Normal file
48
assets/css/global/03-variables.css
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
:root {
|
||||
/* font sizes */
|
||||
--size--2: clamp(0.79rem, calc(0.76rem + 0.16vw), 0.89rem);
|
||||
--size--1: clamp(0.89rem, calc(0.85rem + 0.19vw), 1rem);
|
||||
--size-0: clamp(1rem, calc(0.96rem + 0.21vw), 1.13rem);
|
||||
--size-1: clamp(1.13rem, calc(1.08rem + 0.23vw), 1.27rem);
|
||||
--size-2: clamp(1.27rem, calc(1.21rem + 0.26vw), 1.42rem);
|
||||
--size-3: clamp(1.42rem, calc(1.36rem + 0.3vw), 1.6rem);
|
||||
--size-4: clamp(1.6rem, calc(1.54rem + 0.33vw), 1.8rem);
|
||||
--size-5: clamp(1.8rem, calc(1.73rem + 0.38vw), 2.03rem);
|
||||
|
||||
/* spaces */
|
||||
--space-3xs: clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem);
|
||||
--space-2xs: clamp(0.56rem, calc(0.53rem + 0.14vw), 0.63rem);
|
||||
--space-xs: clamp(0.88rem, calc(0.85rem + 0.14vw), 0.94rem);
|
||||
--space-s: clamp(1.13rem, calc(1.07rem + 0.28vw), 1.25rem);
|
||||
--space-m: clamp(1.69rem, calc(1.6rem + 0.42vw), 1.88rem);
|
||||
--space-l: clamp(2.25rem, calc(2.14rem + 0.56vw), 2.5rem);
|
||||
--space-xl: clamp(3.38rem, calc(3.21rem + 0.83vw), 3.75rem);
|
||||
--space-2xl: clamp(4.5rem, calc(4.28rem + 1.11vw), 5rem);
|
||||
--space-3xl: clamp(6.75rem, calc(6.42rem + 1.67vw), 7.5rem);
|
||||
|
||||
/* One-up pairs */
|
||||
--space-3xs-2xs: clamp(0.31rem, calc(0.17rem + 0.69vw), 0.63rem);
|
||||
--space-2xs-xs: clamp(0.56rem, calc(0.4rem + 0.83vw), 0.94rem);
|
||||
--space-xs-s: clamp(0.88rem, calc(0.71rem + 0.83vw), 1.25rem);
|
||||
--space-s-m: clamp(1.13rem, calc(0.79rem + 1.67vw), 1.88rem);
|
||||
--space-m-l: clamp(1.69rem, calc(1.33rem + 1.81vw), 2.5rem);
|
||||
--space-l-xl: clamp(2.25rem, calc(1.58rem + 3.33vw), 3.75rem);
|
||||
--space-xl-2xl: clamp(3.38rem, calc(2.65rem + 3.61vw), 5rem);
|
||||
--space-2xl-3xl: clamp(4.5rem, calc(3.17rem + 6.67vw), 7.5rem);
|
||||
|
||||
/* multi steps */
|
||||
--space-3xs-s: clamp(0.31rem, calc(-0.1rem + 2.08vw), 1.25rem);
|
||||
--space-2xs-s: clamp(0.56rem, calc(0.26rem + 1.53vw), 1.25rem);
|
||||
--space-2xs-m: clamp(0.56rem, calc(-0.02rem + 2.92vw), 1.88rem);
|
||||
--space-xs-m: clamp(0.88rem, calc(0.43rem + 2.22vw), 1.88rem);
|
||||
--space-xs-l: clamp(0.88rem, calc(0.15rem + 3.61vw), 2.5rem);
|
||||
--space-s-l: clamp(1.13rem, calc(0.51rem + 3.06vw), 2.5rem);
|
||||
--space-s-xl: clamp(1.13rem, calc(-0.04rem + 5.83vw), 3.75rem);
|
||||
--space-l-2xl: clamp(2.25rem, calc(1.03rem + 6.11vw), 5rem);
|
||||
|
||||
/* COLORS */
|
||||
--color-yellow-light: hsl(20, 56%, 95%);
|
||||
--color-yellow-dark: hsl(353, 13%, 27%);
|
||||
--color-green-light: hsl(36, 95%, 66%);
|
||||
--color-green-dark: hsl(145, 59%, 11%);
|
||||
}
|
||||
45
assets/css/global/04-base.css
Normal file
45
assets/css/global/04-base.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
body {
|
||||
margin: 0 auto;
|
||||
padding: var(--space-s-l) var(--space-xs-s);
|
||||
max-inline-size: 80rem;
|
||||
font-family: "wotfard", "ArialReplace", Arial, sans-serif;
|
||||
font-size: var(--size-0);
|
||||
font-weight: normal;
|
||||
color: var(--color-green-dark);
|
||||
background-color: var(--color-yellow-light);
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: var(--size-4);
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: var(--size-2);
|
||||
}
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: var(--size-1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.flow > * + * {
|
||||
margin-block-start: var(--space-xs);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
.editorial > * + * {
|
||||
margin-block-start: var(--space-2xs);
|
||||
}
|
||||
.editorial h2 + * {
|
||||
margin-block-start: var(--space-xs);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue