diff --git a/index.html b/index.html
index f7eadecb27b402ae245be7698f533dd46cf985f9..adceddcac8b623f580591070866fb5d0c72fa7e0 100644
--- a/index.html
+++ b/index.html
@@ -115,6 +115,8 @@
<img class="article-half-image" src="img/nasa_launch.jpg"></img>
+ <div class="article-triangle"></div>
+
<div class="article-content-second-half nasa-launch">
<h4>NASA to Launch First U.S. Asteroid Sample Return Mission</h4>
@@ -153,9 +155,7 @@
<article class="content-small">
<div>
<div class="article-content-container">
- <a class="article-link" href="#"></a>
-
- <img class="article-image" src="img/astronaut.jpg"></img>
+ <a class="article-link" href="#"></a>
<div class="article-content">
<iframe src="https://twitter.com/NASA?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"></iframe>
diff --git a/styles.css b/styles.css
index 9a9df52ec9dbc572ed192b567968d30d550a3a6b..5026d2ad12dca629d5dbe8817bad89d97c5f372f 100644
--- a/styles.css
+++ b/styles.css
@@ -12,11 +12,17 @@ body, html {
body {
position: relative;
+ background-color: #050914;
+}
+
+header {
+ position: sticky;
+ top: 0;
+ z-index: 1;
background-image: url('img/background.png');
background-repeat: repeat;
background-position: center;
background-size: auto 100%;
- background-color: #666666;
}
a {
@@ -37,8 +43,8 @@ nav ul li a {
position: absolute;
left: 0;
top: 0;
- margin-top: 1em;
- width: 6em;
+ margin-top: 1rem;
+ width: 6rem;
z-index: -1;
}
@@ -51,17 +57,17 @@ nav ul li a {
}
.top-nav li {
- font-size: 1em;
- padding: 0.5em 0;
+ font-size: 1rem;
+ padding: 0.5rem 0;
}
.top-nav li a, .top-nav li img, .top-nav li form {
display: block;
- padding: 0.5em;
+ padding: 0.5rem;
}
.top-nav li a {
- border-right: 0.05em solid #eeeeee;
+ border-right: 0.05rem solid #eeeeee;
white-space: nowrap;
}
@@ -70,16 +76,16 @@ nav ul li a {
}
.top-nav li img {
- height: 2.5em;
+ height: 2.5rem;
cursor: pointer;
}
.search-form {
display: flex;
align-items: center;
- column-gap: 0.5em;
- border-radius: 0.1em;
- padding: 0 0.5em;
+ column-gap: 0.5rem;
+ border-radius: 0.1rem;
+ padding: 0 0.5rem;
height: 100%;
background-color: #55555580;
white-space: nowrap;
@@ -89,12 +95,12 @@ nav ul li a {
border: none;
outline: none;
background-color: transparent;
- font-size: 1em;
+ font-size: 1rem;
size: 10;
}
.search-form input[type="button"] {
- width: 1.5em;
+ width: 1.5rem;
background-color: transparent;
background-image: url('img/search_icon.png');
background-repeat: no-repeat;
@@ -108,24 +114,24 @@ nav ul li a {
display: flex;
justify-content: center;
align-items: center;
- margin-top: 1em;
+ margin-top: 1rem;
}
.center-nav li {
- padding: 0.5em 0;
+ padding: 0.5rem 0;
background-color: #555555;
}
.center-nav li a {
display: block;
- padding: 0.5em 1em;
- font-size: 0.7em;
+ padding: 0.5rem 1rem;
+ font-size: 0.7rem;
font-weight: 500;
white-space: nowrap;
}
.center-nav li:not(li:last-child) a {
- border-right: 0.1em solid #eeeeee;
+ border-right: 0.05rem solid #eeeeee;
}
main {
@@ -135,7 +141,7 @@ main {
justify-content: flex-start;
align-content: flex-start;
width: 100%;
- padding-top: 1em;
+ padding-top: 1rem;
}
.content-small {
@@ -178,7 +184,7 @@ main {
}
.content-small > div, .content-medium > div, .content-large > div {
- padding: 0.3em;
+ padding: 0.3rem;
position: absolute;
width: 100%;
height: 100%;
@@ -194,7 +200,6 @@ main {
}
.article-content-container > .article-link {
- display: block;
position: absolute;
top: 0;
left: 0;
@@ -232,27 +237,37 @@ main {
height: 100%;
}
+.article-content-container > .article-triangle {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ border-top: 2rem solid transparent;
+ border-right: 3rem solid #eeeeee;
+ border-bottom: 2rem solid transparent;
+ translate: -3rem -2rem;
+}
+
.news-headline {
position: absolute;
- bottom: 1em;
- left: 1em;
+ bottom: 1rem;
+ left: 1rem;
}
.news-headline > h3 {
display: inline-block;
background-color: #39719e;
opacity: 0.85;
- padding: 0.5em;
- font-size: 1.2em;
+ padding: 0.5rem;
+ font-size: 1.2rem;
margin: 0;
}
.news-headline > h2 {
background-color: #eeeeee;
opacity: 0.85;
- padding: 0.5em;
+ padding: 0.5rem;
color: #111111;
- font-size: 1.3em;
+ font-size: 1.3rem;
margin: 0;
}
@@ -260,8 +275,8 @@ main {
position: absolute;
top: 0;
right: 0;
- border-left: 2em solid transparent;
- border-top: 2em solid #111111;
+ border-left: 2rem solid transparent;
+ border-top: 2rem solid #111111;
}
.camera-img {
@@ -269,8 +284,8 @@ main {
top: 0;
right: 0;
object-fit: cover;
- width: 1em;
- height: 1em;
+ width: 1rem;
+ height: 1rem;
}
.nasa-events-container {
@@ -278,7 +293,7 @@ main {
flex-direction: column;
justify-content: space-between;
background-color: #39719e;
- padding: 0.3em 0.5em 0;
+ padding: 0.3rem 0.5rem 0;
width: 100%;
height: 100%;
}
@@ -288,20 +303,20 @@ main {
}
.nasa-events-title {
- font-size: 0.8em;
- padding: 0.2em 0;
+ font-size: 0.8rem;
+ padding: 0.2rem 0;
margin: 0;
}
.line {
- height: 0.05em;
+ height: 0.05rem;
background-color: #eeeeee;
}
.event {
display: block;
- font-size: 0.7em;
- padding: 0.2em 0;
+ font-size: 0.7rem;
+ padding: 0.2rem 0;
}
.nasa-events-bottom-horizontal {
@@ -323,7 +338,7 @@ main {
.overlay > .overlay-title {
margin: 0;
- padding: 0.5em;
+ padding: 0.5rem;
background-color: #39719e;
opacity: 0.85;
font-size: 0.9rem;
@@ -333,15 +348,19 @@ main {
background-color: #eeeeee;
opacity: 0.85;
margin: 0;
- padding: 0.5em;
+ padding: 0.5rem;
font-weight: 500;
color: #111111;
font-size: 0.9rem;
}
+.nasa-launch {
+ background-color: #eeeeee;
+}
+
.nasa-launch h4 {
color: #39719e;
- font-size: 1.2em;
+ font-size: 1.2rem;
font-weight:lighter;
}
@@ -379,30 +398,28 @@ iframe {
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
- body {
- background-color: blue;
+ header {
+ background-color: green;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
- body {
- background-color: green;
- }
+
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
- body {
- background-color: yellow;
+ div {
+ background-color: red;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
- body {
- width: 100%;
- }
+ div {
+ background-color: yellow;
+ }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */