From 00db65751c34ad387d3baff603b2e4ad8c7b4e77 Mon Sep 17 00:00:00 2001
From: Andrew Yu <andrew@andrewyu.org>
Date: Tue, 11 Jan 2022 16:01:27 +0800
Subject: box model visualization? lol

---
 style.css | 45 +++++++++++++++++++++++++++++++++++----------
 1 file changed, 35 insertions(+), 10 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index d795a28..b51cde7 100644
--- a/style.css
+++ b/style.css
@@ -2,9 +2,23 @@ body {
 	background-color: black;
 	color: white;
 	font-family: sans-serif;
-	width: 95%;
-	margin: auto;
-	line-height: 1.3;
+	margin: 3%;
+	line-height: 1.4;
+}
+body, div, p, h1, h2, h3, h4, h5, h6, ul, ol{
+	padding: 2px;
+}
+body:hover, div:hover, p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, li:hover {
+	border: solid yellow 1px;
+}
+p:hover, li:hover {
+	color: yellow;
+}
+body:active, div:active, p:active, h1:active, h2:active, h3:active, h4:active, h5:active, h6:active, li:active {
+	border: solid lime 1px;
+}
+p:active, li:active {
+	color: lime;
 }
 h1 {
 	text-align: center;
@@ -33,25 +47,25 @@ a:link {
 	color: cyan;
 	text-decoration: none;
 	border: solid cyan 1px;
-	padding: 2px;
+	padding: 1px;
 }
 a:visited {
 	color: violet;
 	text-decoration: none;
 	border: solid violet 1px;
-	padding: 2px;
+	padding: 1px;
 }
 a:hover {
 	color: yellow;
 	text-decoration: none;
 	border: solid yellow 1px;
-	padding: 2px;
+	padding: 1px;
 }
 a:active {
 	color: lime;
 	text-decoration: none;
 	border: solid lime 1px;
-	padding: 2px;
+	padding: 1px;
 }
 #nav ul {
 	list-style-type: none;
@@ -69,12 +83,23 @@ a:active {
 #nav ul li a {
 	font-weight: bold;
 }
+@keyframes borderBlinkRed {	
+	0% {	
+		border-color: transparent;
+	}
+	50% {	
+		border-color: red;
+	}
+}	
 #campaign {
 	color: red;
-	font-size: 200%;
-	border: solid red 1px;
 	display: block;
-	padding: 2px;
+	border: 1px solid red;
+	animation-name: borderBlinkRed;
+	animation-duration: .2s;
+	animation-timing-function: step-end;
+	animation-iteration-count: 20;
+	animation-direction: alternate;
 }
 .alarm {
 	color: red;
-- 
cgit 1.4.1-2-gfad0