64 lines
1 KiB
CSS
64 lines
1 KiB
CSS
/*Style Sheet*/
|
|
:root {
|
|
--silicon: #aeb8d9;
|
|
--copper: #e3ad30;
|
|
--matrix: #5e865e;
|
|
--oxide: #a65f18;
|
|
--carbon: #472c19;
|
|
--phantom: #18100b;
|
|
|
|
--yellow: #ffb200;
|
|
--orange: #eb5b00;
|
|
--pink: #d91656;
|
|
--purple: #640d5f;
|
|
}
|
|
html {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
body {
|
|
background-color: var(--phantom);
|
|
color: var(--yellow);
|
|
}
|
|
header {
|
|
grid-area: header;
|
|
color: var(--matrix);
|
|
background-color: var(--copper);
|
|
border-color: var(--copper);
|
|
|
|
margin: 0px;
|
|
position: sticky;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
border: 0px;
|
|
top: 0px;
|
|
padding: 0px;
|
|
|
|
}
|
|
.container {
|
|
display: grid;
|
|
grid-template-areas: 'header header' 'news news' 'navigation search-bar' 'navigation result' 'footer footer';
|
|
width: 80vw;
|
|
min-width: 600px;
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
row-gap: 5px;
|
|
}
|
|
.navigation {
|
|
grid-area: navigation;
|
|
}
|
|
.result {
|
|
grid-area: result;
|
|
}
|
|
.news {
|
|
grid-area: news;
|
|
}
|
|
.search-bar {
|
|
grid-area: search-bar;
|
|
footer {
|
|
display: grid;
|
|
grid-area: 'footer';
|
|
grid-template-columns: auto;
|
|
}
|
|
|