hjp
/
luga-2018
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make design responsive 

Added 3 screen widths. The side menu doesn't work yet.
This commit is contained in:
Peter J. Holzer 2018-05-31 20:41:21 +02:00
parent b27027039b
commit 7a7593b32d
4 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index-logged-in.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title> LUGA — Linux User Group Austria </title> <title> LUGA — Linux User Group Austria </title>
<link rel="stylesheet" href="luga.css" /> <link rel="stylesheet" href="luga.css" />

2
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<head> <head>
<meta name=viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title> LUGA — Linux User Group Austria </title> <title> LUGA — Linux User Group Austria </title>
<link rel="stylesheet" href="luga.css" /> <link rel="stylesheet" href="luga.css" />

47
luga.css
View File

@ -47,11 +47,11 @@ header {
} }
@media only screen and (max-width: 65rem) { @media only screen and (min-width: 40rem) and (max-width: 65rem) {
body { body {
display: grid; display: grid;
grid-template-columns: 13rem auto; grid-template-columns: 13rem auto;
grid-template-rows: 3rem auto auto auto auto; grid-template-rows: auto auto auto auto auto;
} }
#logo { #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 { nav a {
color: #008; color: #008;
text-decoration: none; text-decoration: none;
@ -152,6 +194,7 @@ nav {
nav ul { nav ul {
list-style-type: none; list-style-type: none;
padding-left: 0.7em; padding-left: 0.7em;
background-color: var(--yellow-light);
} }
footer ul { footer ul {

2
veranstaltungen.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<head> <head>
<meta name=viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title> LUGA — Veranstaltungen </title> <title> LUGA — Veranstaltungen </title>
<link rel="stylesheet" href="luga.css" /> <link rel="stylesheet" href="luga.css" />