add css

2024-04-24 16:22:46 +02:00 · 2024-04-24 16:22:46 +02:00 · fcc96bbf0a
parent f6418028de
commit fcc96bbf0a
2 changed files with 135 additions and 0 deletions
--- a/defaults.css
+++ b/defaults.css
@ -0,0 +1,62 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+img {
+	display: block;
+	max-width: 100%;
+}
+
+menu:not(article menu),
+ol:not(article ol),
+ul:not(article ul) {
+	list-style: none;
+}
+
+menu,
+ol,
+ul {
+	padding-left: 0;
+}
+
+article ol,
+article ul {
+	list-style-position: inside;
+}
+
+a {
+	/* Places underlines below the descenders */
+	text-underline-position: under;
+
+
+	/* Sets the thickness as a percentage of the font size */
+	text-decoration-thickness: 8;
+}
+
+/* <html> = the root */
+html {
+	font-size: 62.5%;
+	/* (62.5/100) * 16px = 10px */
+	-webkit-text-size-adjust: none;
+	/* for iOS Safari */
+	text-size-adjust: none;
+	/* for other mobile browsers */
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	html {
+		scroll-behavior: smooth;
+	}
+}
+
+label,
+button,
+select,
+summary,
+[type=radio],
+[type=submit],
+[type=checkbox] {
+	cursor: pointer;
+}
--- a/styles.css
+++ b/styles.css
@ -0,0 +1,73 @@
+@font-face {
+	font-family: GoMono;
+	src: url(fonts/GoMonoNerdFont-Regular.ttf);
+	font-weight: 400;
+	font-style: normal;
+}
+
+:root {
+	--text: #e0def4;
+	--love: #eb6f92;
+	--gold: #f6c177;
+	--rose: #ebbcba;
+	--pine: #31748f;
+	--foam: #9ccfd8;
+	--iris: #c4a7e7;
+
+	--base: #191724;
+	--surface: #1f1d2e;
+	--overlay: #26233a;
+
+	--hl-med: #403d52;
+	--hl-high: #524f67;
+}
+
+body {
+	background-color: var(--base);
+}
+
+h1,
+h2,
+h3,
+h4 {
+	font-family: Verdana, Geneva, Tahoma, sans-serif;
+	color: var(--love);
+}
+
+main {
+	font-family: GoMono, serif;
+	font-size: 2rem;
+	width: 60%;
+	margin: auto;
+	color: var(--text);
+}
+
+p {
+	background-color: var(--surface);
+	border-radius: 10rem;
+	padding: 2rem;
+}
+
+b {
+	color: var(--gold);
+}
+
+
+a {
+	text-decoration: none;
+	color: var(--foam);
+}
+
+a:visited {
+	color: var(--pine);
+}
+
+a:hover {
+	background-color: pink;
+}
+
+li {
+	list-style-type: ' ';
+	margin-bottom: 2rem;
+
+}