/* ---------- 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 { padding: .25rem .75rem; border-radius: .35rem; background-color: rgba(40, 40, 40, 0.8); } .code-example { margin: 4px; padding: 8px; border-radius: 0.4em; background-color: rgba(40, 40, 40, 0.8); max-width: 550px; } .code-example code { padding: 0; background-color: rgba(40, 40, 40, 0.8); } .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; } }