emmas.place/style/style.css

88 lines
1.4 KiB
CSS
Raw Normal View History

:root {
2024-12-13 18:08:42 +00:00
--background-color: #e0ffcd;
--body-background-color: #ffebbb;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
height: 100vh;
width: auto;
2024-12-13 18:08:42 +00:00
background-color: var(--body-background-color);
2024-12-12 13:06:46 +00:00
display: grid;
2024-12-13 19:22:44 +00:00
grid-template-columns: 15vw 60vw;
2024-12-12 13:06:46 +00:00
grid-template-rows: 5vh 2fr 5vh;
justify-content: center;
overflow: hidden;
}
2024-12-13 19:22:44 +00:00
main, nav {
padding-left: 2.5rem;
}
main {
2024-12-13 18:08:42 +00:00
background-color: var(--background-color);
height: 100%;
2024-12-13 19:22:44 +00:00
width: 60vw;
overflow: scroll;
2024-12-13 19:22:44 +00:00
grid-column: 2/3;
grid-row: 2/3;
}
header {
2024-12-13 18:08:42 +00:00
background-color: var(--background-color);
grid-row: 1/2;
2024-12-13 19:22:44 +00:00
grid-column: 1/3;
2024-12-12 13:06:46 +00:00
height: 5vh;
2024-12-13 19:22:44 +00:00
width: 75vw;
2024-12-12 13:06:46 +00:00
text-align: center;
2024-12-13 18:08:42 +00:00
border-bottom: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(to right, #D60270, #9B4F96, #0038A8);
}
footer {
2024-12-13 18:08:42 +00:00
background-color: var(--background-color);
2024-12-12 13:06:46 +00:00
grid-row: 3/4;
2024-12-13 19:22:44 +00:00
grid-column: 1/3;
2024-12-12 13:06:46 +00:00
height: 5vh;
2024-12-13 19:22:44 +00:00
width: 75vw;
2024-12-12 13:06:46 +00:00
text-align: center;
align-self: end;
}
2024-12-13 19:22:44 +00:00
header, footer {
justify-self: center;
}
nav {
2024-12-13 18:08:42 +00:00
background-color: var(--background-color);
2024-12-12 13:06:46 +00:00
grid-row: 2/3;
2024-12-13 19:22:44 +00:00
grid-column: 1/2;
2024-12-12 13:06:46 +00:00
justify-self: end;
2024-12-13 19:22:44 +00:00
width: 15vw;
height: auto;
2024-12-13 18:08:42 +00:00
border-right: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(to bottom, #FCF434, #FFFFFF, #9C59D1, #2C2C2C);
}
section {
2024-12-12 13:06:46 +00:00
width: 55vw;
}
.status {
height: 120px;
}