diff --git a/index.html b/index.html index 5df23b05523f65e125240f3054e886f1d03606a0..380fe65e22fc3e1315d3e4388ed7213d86c0333b 100644 --- a/index.html +++ b/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"> diff --git a/styles.css b/styles.css index 028058685b8e2814d9cd0a5528033de790f93ad8..d20bd21e823b4505364f12370355fc680462b906 100644 --- a/styles.css +++ b/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