Step 2: adding loading class

colbyfayock · May 2, 2020 · f68cdef · f68cdef
1 parent 9aa7925
commit f68cdef
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -9,18 +9,22 @@
 <body>
   <main>
     <h1>So, how 'bout them Knicks?</h1>
-    <p>What are their names? I'm Santa Claus! This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry! Good news, everyone! I've taught the toaster to feel love!</p>
-    <p>Say it in Russian! This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry! <strong> Dr.</strong> <em> Zoidberg, that doesn't make sense.</em> But, okay!</p>
-    <h2>Five hours? Aw, man! Couldn't you just get me the death penalty?</h2>
-    <p>For example, if you killed your grandfather, you'd cease to exist! Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew. You know, I was God once. Switzerland is small and neutral! We are more like Germany, ambitious and misunderstood!</p>
-    <ol>
-    <li>Yes! In your face, Gandhi!</li><li>So I really am important? How I feel when I'm drunk is correct?</li><li>Who are those horrible orange men?</li>
+    <p class="loading">What are their names? I'm Santa Claus! This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry! Good news, everyone! I've taught the toaster to feel love!</p>
+    <p class="loading">Say it in Russian! This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry! <strong> Dr.</strong> <em> Zoidberg, that doesn't make sense.</em> But, okay!</p>
+    <h2 class="loading">Five hours? Aw, man! Couldn't you just get me the death penalty?</h2>
+    <p class="loading">For example, if you killed your grandfather, you'd cease to exist! Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew. You know, I was God once. Switzerland is small and neutral! We are more like Germany, ambitious and misunderstood!</p>
+    <ol class="loading">
+      <li>Yes! In your face, Gandhi!</li>
+      <li>So I really am important? How I feel when I'm drunk is correct?</li>
+      <li>Who are those horrible orange men?</li>
     </ol>
 
     <h3>We'll need to have a look inside you with this camera.</h3>
     <p>Does anybody else feel jealous and aroused and worried? I'm just glad my fat, ugly mama isn't alive to see this day. Whoa a real live robot; or is that some kind of cheesy New Year's costume? Yeah. Give a little credit to our public schools.</p>
     <ul>
-    <li>Shinier than yours, meatbag.</li><li>Actually, that's still true.</li><li>Of all the friends I've had… you're the first.</li>
+      <li class="loading">Shinier than yours, meatbag.</li>
+      <li class="loading">Actually, that's still true.</li>
+      <li class="loading">Of all the friends I've had… you're the first.</li>
     </ul>
 
     <p>And I'm his friend Jesus. Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Michelle, I don't regret this, but I both rue and lament it. Then throw her in the laundry room, which will hereafter be referred to as "the brig".</p>

diff --git a/main.css b/main.css
@@ -12,4 +12,13 @@ main {
   max-width: 50em;
   padding: 0 1em;
   margin: 0 auto;
-}
+}
+
+li {
+  margin-bottom: .5em;
+}
+
+.loading {
+  color: transparent;
+  background: #eceff1;
+}