Skip to content

Instantly share code, notes, and snippets.

@signalwerk

signalwerk/normalise.css

Last active July 11, 2024 22:26
Show Gist options
  • Save signalwerk/cede1b5b5ca02fb545bfff8c02875578 to your computer and use it in GitHub Desktop.
Save signalwerk/cede1b5b5ca02fb545bfff8c02875578 to your computer and use it in GitHub Desktop.
Download ZIP
simple normalise css
Raw
normalise.css
/* inspiration
- https://alligator.io/css/minimal-css-reset/
- [Kevin Powell](https://youtu.be/cCAtD_BAHNw) [Gist](https://gist.github.com/Lego2012/7b7956734f2ab4a95fd0c311cd8bbe95)
*/
@import url("https://fonts.signalwerk.ch/css/latest/family=Work+Sans:ital,wght@0,100..900;1,100..900.css");
:root {
--color-green: #006984;
--color-blue: #0054a2;
--color-black: #121212;
--color-white: #ffffff;
--color-gray: #767778;
--color-primary: var(--color-blue);
--link-color: var(--color-primary);
--link-color--visited: var(--color-gray);
--selection-color: var(--color-white);
--selection-color-bg: var(--color-primary);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
font: inherit; /* Get rid of all font sizes and heights */
}
html {
font-family: "Work Sans", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--color-black);
background-color: var(--color-white);
}
::selection {
color: var(--selection-color);
background: var(--selection-color-bg);
text-shadow: none;
}
ol,
ul {
list-style: none;
margin-bottom: 0.2rem;
}
p {
margin-bottom: 0.2rem;
text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
margin-top: 1rem;
margin-bottom: 0.2rem;
text-wrap: balance;
}
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1rem;
}
h3 {
font-size: 0.8rem;
}
img {
display: block;
max-width: 100%;
height: auto;
}
/* a-tag */
a {
text-decoration: none;
color: var(--link-color);
text-underline-offset: 0.3em;
text-decoration: underline currentColor;
text-decoration-thickness: 0.15em;
}
a[href^="http"]::after {
content: "↗";
}
a:visited {
color: var(--link-color--visited);
}
a:hover {
color: inherit;
}
button {
box-shadow: none;
background: transparent;
text-shadow: none;
cursor: pointer;
line-height: inherit;
border: 0.15em solid var(--color-black);
color: inherit;
padding: 0.5em 1em;
}
button:focus {
outline: 0 !important;
border-color: var(--color-primary);
}
button:hover:not(:disabled) {
color: var(--color-white);
background-color: var(--color-primary);
border-color: var(--color-primary);
}
button:disabled {
cursor: auto;
opacity: 0.5;
}
header,
main {
width: 92%;
max-width: 38rem;
margin-left: auto;
margin-right: auto;
}
Raw
zindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>title</title>
<link rel="stylesheet" href="normalise.css" />
</head>
<body>
<!-- page content -->
<header class="header">
<h1>CSS Test Page</h1>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
</header>
<main class="content">
<section id="section1">
<h2>Section 1</h2>
<p>
This is a paragraph in section 1.
<a href="https://example.com">This is an external link</a>.
</p>
<button>Click Me</button>
<button disabled>Click Me</button>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is a paragraph in section 2.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</section>
<section id="section3">
<h2>Section 3</h2>
<p>This is a paragraph in section 3.</p>
<img
src="https://placehold.co/600x400/000/FFF"
alt="Placeholder image"
/>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment