You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

117 lines
2.1 KiB
CSS

/* ---------- Farben ---------- */
:root {
--primary: #1D2026;
--secondary: #2e3137;
--accent: darkslategrey;
}
/* ---------- Basic Layout ---------- */
body {
background-color: var(--primary);
color: aliceblue;
font-family: Montserrat, sans-serif;
margin: 0;
font-size: 18px;
display: grid;
gap: 0em;
grid-template-columns: 10% 1fr 10%;
grid-template-rows: 1fr 1fr 1fr 1fr 80px;
height: 100vh;
}
header {
grid-row: 1;
grid-column: 2/3;
}
main {
grid-row: 4;
grid-column: 2/3;
padding: 8px 100px 8px 100px;
background-color: var(--secondary);
}
footer {
padding: 15px;
background-color: var(--accent);
grid-row: 5/6;
grid-column: 1/4;
}
/* ----- Classes ----- */
.navigationbar {
grid-row: 2;
grid-column: 1/4;
background-color: var(--accent);
padding: 5px;
display: flex;
align-items: center;
}
.navigationbar a{
color: aliceblue;
padding: 10px;
margin-left: 5px;
text-decoration: none;
transition: 400ms;
text-align: center;
flex-grow: 1;
}
.navigationbar a:hover{
background: darkgray;
}
.navigationbar:nth-of-type(2) {
grid-row: 3;
grid-column: 2/3;
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
.code-example {
margin: 4px;
padding: 8px;
border-radius: 0.4em;
background-color: rgba(40, 40, 40, 0.8);
max-width: 550px;
}
.visual-example {
background-color: gray;
border: 2px solid;
margin: 4px;
max-width: 400px;
}
.visual-example > p {
background-color: darkolivegreen;
padding: 20px;
border: 2px solid aliceblue;
text-align: center;
}
.explanation {
background-color: rgba(28, 33, 38, 0.8);
padding: 8px;
margin: 4px;
border-left: 6px solid aliceblue;
border-radius: 0.4em;
}
/* ----- Responsivnes der Seite ----- */
@media (max-width: 600px) {
main {
grid-column: 1/5;
padding: 8px;
}
.navigationbar {
flex-direction: column;
}
.navigationbar:nth-of-type(2) {
grid-column: 1/5;
}
}