103 lines
1.7 KiB
CSS
103 lines
1.7 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;
|
|
|
|
display: grid;
|
|
/*grid-template-areas: 'left' 'right';*/
|
|
}
|
|
header ul{
|
|
/*grid-area: left;*/
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
/*background-color: var(--matrix);*/
|
|
}
|
|
header li {
|
|
float: left;
|
|
}
|
|
|
|
li a {
|
|
display: block;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 14px 16px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.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;
|
|
gap: 5px;
|
|
}
|
|
.navigation {
|
|
grid-area: navigation;
|
|
/*width: 30px;*/
|
|
text-align: center;
|
|
border: solid;
|
|
border-color: var(--pink);
|
|
border-width: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.result {
|
|
grid-area: result;
|
|
/*width: 500px;*/
|
|
border: solid;
|
|
border-color: var(--silicon);
|
|
border-width: 2px;
|
|
}
|
|
.news {
|
|
grid-area: news;
|
|
text-align: center;
|
|
}
|
|
.search-bar {
|
|
grid-area: search-bar;
|
|
text-align: center;
|
|
align: center;
|
|
border: solid;
|
|
border-width: 2px;
|
|
border-color: var(--silicon);
|
|
/*width: 500px;*/
|
|
}
|
|
footer {
|
|
display: grid;
|
|
grid-area: 'footer';
|
|
grid-template-columns: auto;
|
|
}
|