diff --git a/Leuchtturm/style.css b/Leuchtturm/style.css index b808b4a..75fca4f 100644 --- a/Leuchtturm/style.css +++ b/Leuchtturm/style.css @@ -1,3 +1,7 @@ +/* + * Seitenaufbau allgemein + */ + body { margin: 0 auto; height: 100vh; @@ -8,84 +12,48 @@ body { header { margin: 0; text-align: center; - padding: 1em 0 3em; + padding: 1rem 0 3rem; background: linear-gradient(to top, deepskyblue, ivory); } -footer { - margin: 0; - text-align: center; - padding: 3em 0 1em; - background-color: ivory; -} - -footer > *, header > * { - padding: .5rem; -} -button { - border: none; - background-color: inherit; - transition: 0.5s ease; -} - -button:hover { - background-color: deepskyblue; - border-radius: 0.5em; - cursor: pointer; -} - -.active { - color: white; - background-color: dodgerblue; - border-radius: 0.5em; - font-weight: 800; -} - main { background: linear-gradient(to bottom, deepskyblue, ivory); padding: 3rem 5vw; overflow-y: auto; } -main section{ - margin: auto; - display: grid; - grid-template-columns: auto auto; - grid-gap: 5rem; - place-items: center; +footer { + margin: 0; + text-align: center; + padding: 3rem 0 1rem; + background-color: ivory; } -.content-img{ - width: clamp(200px, 30vw, 500px); +footer > *, header > * { + padding: .5rem; } -main section .left{ - grid-column: 1; - grid-row: 1; +/* + * Darstellung Buttons und Links + */ + +button { + border: none; + background-color: inherit; + transition: 0.5s ease; } -main section .right{ - grid-column: 2; - grid-row: 1; -} - -.content-img img { - max-width: 100%; - transition: .5s ease; - border: 2px solid dodgerblue; +button:hover { + background-color: deepskyblue; border-radius: .5rem; + cursor: pointer; } -.content-img img:hover { - transform: scale(1.2); -} - -.content-img.left img:hover { - transform-origin: top left; -} - -.content-img.right img:hover { - transform-origin: top right; +.active { + color: white; + background-color: dodgerblue; + border-radius: .5rem; + font-weight: 800; } a{ @@ -97,3 +65,49 @@ a{ a:hover{ color: black; /* Ändert die Textfarbe auf schwarz beim Hover */ } + +/* + * Aufbau Main-Content + */ +main section{ + margin: auto; + display: grid; + grid-template-columns: auto auto; + grid-gap: 5rem; + place-items: center; +} + +main section { + .left{ + grid-column: 1; + grid-row: 1; + } + + .right{ + grid-column: 2; + grid-row: 1; + } + + .content-img{ + width: clamp(200px, 30vw, 500px); + } + + img { + max-width: 100%; + transition: .5s ease; + border: 2px solid dodgerblue; + border-radius: .5rem; + } + + img:hover { + transform: scale(1.2); + } + + .left img:hover { + transform-origin: top left; + } + + .right img:hover { + transform-origin: top right; + } +} \ No newline at end of file