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
117 lines
2.1 KiB
CSS
2 years ago
|
|
||
|
|
/* ---------- 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;
|
||
|
|
}
|
||
|
|
}
|