styling some more 😷

MetaFam · Oct 14, 2024 · e272bb3 · e272bb3
1 parent c09eb62
commit e272bb3
Show file tree

Hide file tree

Showing 4 changed files with 244 additions and 752 deletions.
diff --git a/fading.svg b/fading.svg
diff --git a/index.html b/index.html
@@ -7,8 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>
 <body>
+  <aside>
+    <object id="bg" data="fading.svg"></object>
+  </aside>
   <main>
-    <img id="tombstone" src="tombstone.svg" alt="RIP MetaGame"/>
+    <object id="tombstone" data="tombstone.svg" alt="RIP MetaGame"></object>
     <section id="text">
       <h1 id="rip"><acronym title="Rest In Peace">R.I.P.</acronym> MetaGame</h1>
       <h2 id="obituary">

diff --git a/style.css b/style.css
@@ -1,6 +1,7 @@
 :root {
   background-color: #444;
   color: #8C72DE;
+  -webkit-text-stroke: 0.05em #60018B99;
 }
 
 #tombstone {
@@ -11,14 +12,23 @@
 }
 
 a {
+  display: inline-block;
   color: inherit;
   text-decoration: none;
+  filter: drop-shadow(4px 4px 2px #25003655);
+  margin-bottom: 4px;
+  margin-right: 4px;
 }
 
 a:hover {
   color: #AE3DE5;
   text-decoration: underline;
   text-decoration-style: dotted;
+  margin-left: 4px;
+  margin-right: 0px;
+  margin-top: 4px;
+  margin-bottom: 0px;
+  filter: drop-shadow(0px 0px 2px #25003655);
 }
 
 main {
@@ -32,13 +42,31 @@ h1, h2, h3 {
   text-align: center;
 }
 
+aside {
+  position: relative;
+}
+
+html, body, aside, #bg {
+  height: 100dvh;
+  width: 100%;
+}
+
+body {
+  position: relative;
+}
+
+aside {
+  position: absolute;
+  inset: 0;
+}
+
 #rip {
+  filter: drop-shadow(4px 4px 2px #25003655);
   font-size: clamp(3rem, calc(4vw + 0.5em), 5.5rem);
-  -webkit-text-stroke: 2px #60018B99;
-  filter: drop-shadow(4px 4px 4px #250036);}
+}
 
 #obituary a {
-  font-size: 2rem;
+  font-size: clamp(1.5rem, calc(2.5vw + 0.5em), 3.5rem);
 }
 
 #text {
@@ -55,12 +83,11 @@ h1, h2, h3 {
 }
 
 #survivors ul li {
-  display: inline;
+  display: inline-block;
 }
 
 #survivors ul li:first-child::after {
   content: " & ";
-  padding-right: 0.5rem;
 }
 
 acronym {