refactor; use plain css

1 files changed, 75 insertions, 0 deletions

diff --git a/src/styles/main.css b/src/styles/main.css
new file mode 100644
index 0000000..974dd5c
--- /dev/null
+++ b/src/styles/main.css
@@ -0,0 +1,75 @@
+:root {
+	--background-color: #1e1e2e;
+	--primary-font: "Noto Sans";
+	--regular-text: #cdd6f4;
+	--blue-text: #89b4fa;
+	--subtext: #bac2de;
+	--medium-screen: 768px;
+}
+
+body {
+	background-color: var(--background-color);
+	font-family: var(--primary-font), system-ui;
+;
+	line-height: 1.5rem;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 1.25rem;
+	margin-bottom: 1.25rem;
+	max-width: var(--medium-screen);
+	padding: 0.75rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong,
+b,
+p {
+	color: var(--regular-text);
+}
+
+a {
+	text-decoration: underline;
+	color: var(--blue-text);
+}
+
+video {
+	width: 100%;
+	height: auto;
+	max-width: var(--medium-screen);
+}
+
+footer {
+	color: var(--subtext);
+	font-size: 0.75rem;
+
+	text-align: right;
+}
+
+#nav_links {
+	display: flex;
+	gap: 0.25rem;
+}
+
+#gifs {
+	display: none;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	justify-content: space-evenly;
+}
+
+.blogpost {
+	font-size: 0.85rem;
+}
+
+@media screen and (min-width: 768px) {
+	#gifs {
+		display: flex;
+	}
+}
+