Skip to content
Snippets Groups Projects
Commit 7e979ad1 authored by Silas Meister's avatar Silas Meister
Browse files

Finish for bright resolution

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