From 7a7593b32d966347bf5c499c218c0e0f91061b6c Mon Sep 17 00:00:00 2001 From: "Peter J. Holzer" Date: Thu, 31 May 2018 20:41:21 +0200 Subject: [PATCH] Make design responsive Added 3 screen widths. The side menu doesn't work yet. --- index-logged-in.html | 1 + index.html | 2 +- luga.css | 47 ++++++++++++++++++++++++++++++++++++++++++-- veranstaltungen.html | 2 +- 4 files changed, 48 insertions(+), 4 deletions(-) diff --git a/index-logged-in.html b/index-logged-in.html index 0d22705..8658b34 100644 --- a/index-logged-in.html +++ b/index-logged-in.html @@ -1,6 +1,7 @@ + LUGA — Linux User Group Austria diff --git a/index.html b/index.html index 94a988b..125ee8c 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + LUGA — Linux User Group Austria diff --git a/luga.css b/luga.css index 959c953..a033be6 100644 --- a/luga.css +++ b/luga.css @@ -47,11 +47,11 @@ header { } -@media only screen and (max-width: 65rem) { +@media only screen and (min-width: 40rem) and (max-width: 65rem) { body { display: grid; grid-template-columns: 13rem auto; - grid-template-rows: 3rem auto auto auto auto; + grid-template-rows: auto auto auto auto auto; } #logo { @@ -82,6 +82,48 @@ header { } +@media only screen and (max-width: 40rem) { + body { + display: grid; + grid-template-columns: 3rem auto; + grid-template-rows: auto auto auto auto auto; + } + + #logo { + grid-column: 1; + grid-row: 1 / span 2; + height: 3rem; + } + + header { + grid-column: 2; + grid-row: 1; + } + + nav { + grid-column: 1; + grid-row: 3; + overflow: hidden; + } + + nav:hover { + overflow: visible; + z-index: 1; + } + + main { + grid-column: 2; + grid-row: 2 / span 3; + } + + footer { + grid-column: 1 / span 2; + grid-row: 5; + text-align: left; + } + +} + nav a { color: #008; text-decoration: none; @@ -152,6 +194,7 @@ nav { nav ul { list-style-type: none; padding-left: 0.7em; + background-color: var(--yellow-light); } footer ul { diff --git a/veranstaltungen.html b/veranstaltungen.html index e1ed8a2..a91ddfc 100644 --- a/veranstaltungen.html +++ b/veranstaltungen.html @@ -1,7 +1,7 @@ - + LUGA — Veranstaltungen