kazhnuz/mouette
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

feat: basic typography

Browse source
This commit is contained in:
Kazhnuz 2024-09-10 21:57:24 +02:00
parent e1093b10d2
commit 2975f656e8
4 changed files with 164 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
index.html
View file

@ -11,17 +11,32 @@
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐦</text></svg>"
/>
</head>
<body>
<body class="wrapper">
<header>
<h1>Hello, world!</h1>
</header>
<div class="alert"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p>
<div class="alert"><p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing</a> elit, sed do. </p></div>
<p>Lorem ipsum dolor sit amet, <mark>consectetur adipiscing elit</mark>, sed do. </p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem <a href="#">ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p>
<img src="https://via.placeholder.com/800x600/" alt="">
<main>
<section></section>
<section></section>
<section>
<ul>
<li>Test 1</li>
<li>Test 1</li>
<li>Test 1</li>
<li>Test 1</li>
</ul>
</section>
<section>
<ol>
<li>Test 2</li>
<li>Test 2</li>
<li>Test 2</li>
<li>Test 2</li>
</ol>
</section>
<section></section>
</main>
<form action="#">

63
src/_core.scss
View file

@ -1,18 +1,55 @@
:root {
--color-accent-text: #1864ab;
--color-accent: #1971c2;
--color-accent-hover: #228be6;
--color-accent-background: #d0ebff;
--color-contrast-accent: white;
*::before,
*::after {
box-sizing: inherit;
}
--button-radius: 6px;
--card-radius:6px;
--well-radius:6px;
html {
// Text initialization
font-family: var(--font-family);
text-align: left;
font-size: 18px;
line-height: 1.5rem;
font-weight: normal;
// Normalization
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
// Color
background-color: var(--color-background);
}
body {
margin: auto;
width: 800px;
font-size:18px;
line-height: 1.5;
margin: 0;
overflow-x: hidden;
text-rendering: optimizeLegibility;
color: var(--color-text);
}
.wrapper {
margin: auto;
width: var(--wrapper-size);
padding: 1rem;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}

70
src/_typography.scss Normal file
View file

@ -0,0 +1,70 @@
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol {
padding: 0;
margin: 0 0 1rem 0;
}
a,
mark {
padding: 0.05rem;
border-radius: 0.1rem;
}
a {
color: var(--color-accent-text);
outline-color: var(--color-accent-text);
text-decoration: underline dashed 1px;
text-underline-offset: 0.1rem;
&:visited {
color: var(--color-accent-text);
}
&:hover,
&:active {
background-color: var(--color-link-hover);
text-decoration: none;
}
}
mark {
background-color: var(--color-accent-background);
color: var(--color-accent-text);
}
a:focus-visible,
input:focus-visible {
outline-color: var(--color-accent-text);
outline-style: dashed;
outline-width: 2px;
outline-offset: 1px;
}
li:not(.no-margin) {
margin-left: 1rem;
}
hr {
border: 1px solid var(--color-background-alt);
border-bottom: 1px;
margin: 1em;
box-sizing: content-box;
height: 0;
overflow: visible;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1em;
}

23
src/main.scss
View file

@ -1,4 +1,27 @@
:root {
--color-accent-text: #1864ab;
--color-accent: #1971c2;
--color-accent-hover: #228be6;
--color-accent-background: #d0ebff;
--color-contrast-accent: white;
--color-link-hover: rgba(0,0,0,0.075);
--color-background-alt: rgba(0,0,0,0.15);
--color-text: black;
--color-background: white;
--wrapper-size: 800px;
--button-radius: 6px;
--card-radius:6px;
--well-radius:6px;
--font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Cantarell, Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
}
@import 'core';
@import 'typography';
@import 'buttons';
.card, .alert {