pedf
/
jakjsmenatom
Archived
1
0
Fork 0
Code Pull Requests Releases Activity

Základní responzivita

Browse Source
master
Emil Miler 4 years ago
parent 4ffe725cff
commit a5ade15fb4
1 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File

28
index.html
Unescape Escape View File

@ -40,6 +40,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: auto 70%; background-size: auto 70%;
text-align: center; text-align: center;
padding: 0 1em;
} }
header h1 { header h1 {
font-size: 4em; font-size: 4em;
@ -47,10 +48,17 @@
} }
header p { font-size: 1.5em } header p { font-size: 1.5em }
nav { margin: 4rem auto } nav {
nav ul { display: flex } margin: 4rem auto;
font-size: 1.2rem;
}
nav ul {
display: flex;
flex-wrap: wrap;
}
nav ul li a { nav ul li a {
margin: 0 .25em; display: block;
margin: .25em;
padding: .5em .8em; padding: .5em .8em;
border: 1px solid #000; border: 1px solid #000;
border-radius: .5em; border-radius: .5em;
@ -68,6 +76,7 @@
max-width: 60rem; max-width: 60rem;
margin: 0 auto; margin: 0 auto;
margin-bottom: 10rem; margin-bottom: 10rem;
padding: 0 1em;
line-height: 1.5; line-height: 1.5;
} }
main h2 { margin-top: 5rem; padding-top: 5rem; } main h2 { margin-top: 5rem; padding-top: 5rem; }
@ -87,6 +96,17 @@
margin-right: .85em; margin-right: .85em;
margin-top: .25em; margin-top: .25em;
} }
@media only screen and (max-width: 1000px) {
nav {
max-width: 20em;
width: 90%;
}
nav ul {
flex-direction: column;
align-items: stretch;
}
}
</style> </style>
</head> </head>
<body> <body>
@ -103,7 +123,7 @@
<li><a href="#vstup-na-fakultu">Vstup na fakultu</a></li> <li><a href="#vstup-na-fakultu">Vstup na fakultu</a></li>
<li><a href="#provoz-budov">Provoz budov</a></li> <li><a href="#provoz-budov">Provoz budov</a></li>
<li><a href="#testovani">Testování</a></li> <li><a href="#testovani">Testování</a></li>
<li><a href="#ubytovani">Ubytování na koleji</a></li> <li><a href="#ubytovani">Ubytování</a></li>
</ul> </ul>
</nav> </nav>