113 lines
1.7 KiB
CSS
113 lines
1.7 KiB
CSS
body {
|
|
font-size: 12px;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"header header"
|
|
"content calendar"
|
|
"content clock"
|
|
"content nav"
|
|
"content status"
|
|
"content radio"
|
|
"netverse netverse"
|
|
"footer footer";
|
|
grid-template-columns: minmax(15em, 35em) minmax(10em, 15em);
|
|
margin: 1em 5em;
|
|
column-gap: 1em;
|
|
row-gap: 1em;
|
|
grid-template-rows: auto;
|
|
justify-content: center;
|
|
}
|
|
|
|
header {
|
|
grid-area: header;
|
|
text-align: center;
|
|
}
|
|
|
|
header #title {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
header h1 {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
header label {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
content {
|
|
grid-area: content;
|
|
}
|
|
|
|
#projects ul {
|
|
padding: 0;
|
|
}
|
|
|
|
#calendar {
|
|
grid-area: calendar;
|
|
}
|
|
|
|
#clock {
|
|
grid-area: clock;
|
|
}
|
|
|
|
#nav {
|
|
grid-area: nav;
|
|
}
|
|
|
|
nav ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
gap: 0;
|
|
}
|
|
|
|
#status {
|
|
grid-area: status;
|
|
}
|
|
|
|
#radio {
|
|
grid-area: radio;
|
|
}
|
|
|
|
#netverse {
|
|
grid-area: netverse;
|
|
}
|
|
|
|
footer {
|
|
grid-area: footer;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
font-size: 10px;
|
|
grid-template-areas:
|
|
"header"
|
|
"content"
|
|
"calendar"
|
|
"nav"
|
|
"status"
|
|
"radio"
|
|
"netverse"
|
|
"footer";
|
|
grid-template-columns: minmax(15em, 35em);
|
|
margin: 1em 2em;
|
|
column-gap: 0.5em;
|
|
row-gap: 1em;
|
|
}
|
|
#calendar { display: none; }
|
|
#status { display: none; }
|
|
#radio { display: none; }
|
|
|
|
nav ul {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
nav li {
|
|
padding: 0 .2em;
|
|
}
|
|
}
|