init

app/static/styles/style.css

@@ -0,0 +1,102 @@
+:root {
+	--rounded-corner: 12px;
+	--shade: 220;
+}
+
+body {
+	color: hsl(var(--root-hue),80%,20%);
+	background-color: hsl(var(--root-hue),15%,90%);
+	font-size: 18px;
+	max-width: 40rem;
+	font: 1.2rem/1.6 'Cantarell vf', 'Cantarell', sans-serif;
+	padding: 1.5rem 1.1rem;
+	margin: 1rem auto;
+}
+
+header {
+	color: hsl(var(--root-hue),100%,20%);
+}
+
+a {
+	color: hsl(var(--root-hue),50%,35%);
+	text-decoration: none;
+	font-variation-settings: 'wght' 400;
+	transition: font-variation-settings 200ms, color 150ms;
+}
+
+a:hover {
+	color: hsl(var(--root-hue),75%,50%);
+	text-decoration: underline;
+	font-variation-settings: 'wght' 650;
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		color: hsl(var(--root-hue),40%,85%);
+		background-color: hsl(var(--root-hue),8%,15%);
+	}
+
+	header {
+		color: hsl(var(--root-hue),90%,90%);
+	}
+
+	a {
+		color: hsl(var(--root-hue),30%,60%) !important;
+	}
+
+	a:hover {
+		color: hsl(var(--root-hue),70%,80%) !important;
+	}
+}
+
+h1 {
+	font-variation-settings: 'wght' 900;
+	font-size: 2rem;
+	line-height: 1.2;
+}
+
+section, aside, footer {
+	margin: 1.5rem auto;
+}
+
+img {
+	margin: 1.5rem auto;
+}
+
+@keyframes annoyingAnimation {
+	/* 0% { font-variation-settings: 'wght' 400; } */
+	50% { 
+		font-variation-settings: 'wght' 650; 
+		color: hsl(var(--root-hue),75%,50%);
+
+	}
+	100% { 
+		font-variation-settings: 'wght' 400;
+		color: hsl(var(--root-hue),70%,35%);
+	}
+}
+
+.animate {
+	font-size: 1.4rem;
+	font-variation-settings: 'wght' 400;
+	animation: annoyingAnimation 1s linear infinite; 
+}
+
+.center {
+	text-align: center;
+}
+
+.rounded {
+	border-radius: var(--rounded-corner);
+}
+
+.largeShadow {
+	--xTrans: 0px;
+	--yTrans: 7px;
+	--radius: 20px;
+	--spread: 3px;
+	--alpha: 0.3;
+	-webkit-box-shadow: var(--xTrans) var(--yTrans) var(--radius) var(--spread) hsla(var(--root-hue),35%,30%,var(--alpha));
+	-moz-box-shadow: var(--xTrans) var(--yTrans) var(--radius) var(--spread) hsla(var(--root-hue),35%,30%,var(--alpha));
+	box-shadow: var(--xTrans) var(--yTrans) var(--radius) var(--spread) hsla(var(--root-hue),35%,30%,var(--alpha));
+}