Response WIP

index.html

@@ -75,9 +75,9 @@
     
                                 <div class="line"></div>
 
-                                <a class="event" href="#">Wednesday, Sept. 7: OSIRIS-REx Science and Engineering Talk (12 p.m. EDT), Asteroid Panel Discussion (1 p.m. EDT), NASA TV</a>
-                                <a class="event" href="#">Thursday, Sept. 8: Launch of OSIRIS-REx, 7:05 p.m. EDT</a>
-                                <a class="event" href="#">Registration Open: NASA Social GOES-R Weather Satellite Launch, Nov. 3-4 at Cape Canaveral</a>
+                                <a class="nasa-event" href="#">Wednesday, Sept. 7: OSIRIS-REx Science and Engineering Talk (12 p.m. EDT), Asteroid Panel Discussion (1 p.m. EDT), NASA TV</a>
+                                <a class="nasa-event" href="#">Thursday, Sept. 8: Launch of OSIRIS-REx, 7:05 p.m. EDT</a>
+                                <a class="nasa-event" href="#">Registration Open: NASA Social GOES-R Weather Satellite Launch, Nov. 3-4 at Cape Canaveral</a>
                             </div>
     
                             <div class="nasa-events-bottom">

styles.css

@@ -148,7 +148,7 @@ main {
 
 .content-small {
     position: relative;
-    flex: 0 0 25%;
+    flex: 0 0 50%;
 }
 
 .content-small:after {
@@ -159,7 +159,7 @@ main {
 
 .content-medium {
     position: relative;
-    flex: 0 0 50%;
+    flex: 0 0 100%;
 }
 
 .content-medium:after {
@@ -243,10 +243,10 @@ main {
     position: absolute;
     top: 50%;
     left: 50%;
-    border-top: 2rem solid transparent;
-	border-right: 3rem solid #eeeeee;
-	border-bottom: 2rem solid transparent;
-    translate: -3rem -2rem;
+    border-top: 1.5rem solid transparent;
+	border-right: 2.5rem solid #eeeeee;
+	border-bottom: 1.5rem solid transparent;
+    translate: -2.5rem -1.5rem;
 }
 
 .news-headline {
@@ -260,7 +260,7 @@ main {
     background-color: #39719e;
     opacity: 0.85;
     padding: 0.5rem;
-    font-size: 1.2rem;
+    font-size: 0.8rem;
     margin: 0;
 }
 
@@ -269,7 +269,7 @@ main {
     opacity: 0.85;
     padding: 0.5rem;
     color: #111111;
-    font-size: 1.3rem;
+    font-size: 1rem;
     margin: 0;
 }
 
@@ -315,7 +315,7 @@ main {
     background-color: #eeeeee;
 }
 
-.event {
+.nasa-event {
     display: block;
     font-size: 0.7rem;
     padding: 0.2rem 0;
@@ -405,7 +405,25 @@ iframe {
  
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
+    .content-small {
+        flex: 0 0 25%;
+    } 
     
+    .content-medium {
+        flex: 0 0 50%;
+    }
+
+    .nasa-events-title {
+        font-size: 0.6rem;
+    }
+    
+    .nasa-event {
+        font-size: 0.5rem;
+    }
+
+    .nasa-events-bottom-horizontal {
+        font-size: 0.6rem;
+    }
  }
 
  /* Large devices (laptops/desktops, 992px and up) */
@@ -440,6 +458,33 @@ iframe {
     .nasa-img {
         width: 5rem;
     }
+
+    .article-content-container > .article-triangle {
+        border-top: 2rem solid transparent;
+        border-right: 3rem solid #eeeeee;
+        border-bottom: 2rem solid transparent;
+        translate: -3rem -2rem;
+    }
+
+    .news-headline > h3 {
+        font-size: 1rem;
+    }
+    
+    .news-headline > h2 {
+        font-size: 1.2rem;
+    }
+
+    .nasa-events-title {
+        font-size: 0.8rem;
+    }
+    
+    .nasa-event {
+        font-size: 0.7rem;
+    }
+
+    .nasa-events-bottom-horizontal {
+        font-size: 0.8rem;
+    }
  }
  
  /* Extra large devices (large laptops and desktops, 1200px and up) */
@@ -473,4 +518,12 @@ iframe {
     .nasa-img {
         width: 6rem;
     }
+
+    .news-headline > h3 {
+        font-size: 1.2rem;
+    }
+    
+    .news-headline > h2 {
+        font-size: 1.3rem;
+    }
  } 
\ No newline at end of file