Fix images border, center logo and add media query

Also:
 * Use <main> instead of <div> for root container
 * Fix margin/padding/width hell
 * Fix HTML indentation
 * Add media query so that in a desktop the content will
   be placed in a centered column, while on a small handheld
   device it will span through almost the whole viewport.
This commit is contained in:
crudo 2018-06-08 13:19:31 +02:00
parent 8d0ee00723
commit 8f776359f0
2 changed files with 89 additions and 98 deletions

View File

@ -20,12 +20,19 @@ html {
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
body { body {
width: 100%;
padding: 2rem 0.5rem;
} }
.mainContainer { main {
margin-left: 40vw; width: 100%;
margin: 2rem 1rem;
}
@media (min-width: 426px) {
main {
width: 30vw;
margin: 2rem auto;
}
} }
@ -35,9 +42,9 @@ body {
h1 { h1 {
margin-top: 0; margin: 0;
margin-bottom: 0.3rem;
font-size: 4rem; font-size: 4rem;
line-height: 4rem;
} }
p, li { p, li {
@ -59,7 +66,9 @@ a:hover {
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
header { header {
margin-bottom: 2rem; width: 100%;
margin: 2rem auto 2rem auto;
text-align: center;
} }
header > img, header > img,
@ -70,7 +79,6 @@ header > h1 {
header > img { header > img {
width: 4rem; width: 4rem;
margin-right: 1rem;
} }
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
@ -120,11 +128,16 @@ section > p {
section > p > span { section > p > span {
padding: 0.1rem 0; padding: 0.1rem 0;
background: #000000; background: #000000;
box-shadow: 0rem 0 0 #000000, 0rem 0 0 #000000; box-shadow: 0 0 0 #000000, 0 0 0 #000000;
color: #ffffff; color: #ffffff;
} }
section > p:first-child > span { section > p:first-child > span {
background: #378ab4; background: #378ab4;
box-shadow: 0rem 0 0 #378ab4, 0rem 0 0 #378ab4; box-shadow: 0 0 0 #378ab4, 0 0 0 #378ab4;
}
section > img {
width: 100%;
height: auto;
} }

View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -33,25 +33,27 @@
<title>Unit</title> <title>Unit</title>
</head> </head>
<body> <body>
<div class="mainContainer"> <main>
<header>
<header>
<img alt="Unit logo" src="assets/images/logo.svg"> <img alt="Unit logo" src="assets/images/logo.svg">
<h1>Unit</h1> <h1>Unit</h1>
</header> </header>
<nav> <nav>
<ul> <ul>
<li><a href="https://wiki.unit.macaomilano.org">Wiki</a></li> <li><a href="https://wiki.unit.macaomilano.org">Wiki</a></li>
<li><a href="https://git.unit.macaomilano.org">Git</a></li> <li><a href="https://git.unit.macaomilano.org">Git</a></li>
<li><a href="https://wiki.unit.macaomilano.org/Calendar">Calendar</a></li> <li><a href="https://wiki.unit.macaomilano.org/Calendar">Calendar</a></li>
<li><a href="https://noise.autistici.org/mailman/listinfo/unit-news">Newsletter</a></li> <li><a href="https://noise.autistici.org/mailman/listinfo/unit-news">Newsletter</a></li>
</ul> </ul>
</nav> </nav>
<section> <section>
<p><span> <p><span>
<a href="https://www.openstreetmap.org/node/2709091290" target="_blank"> <a href="https://www.openstreetmap.org/node/2709091290"
target="_blank">
Viale Molise 68, Milano</a> Viale Molise 68, Milano</a>
</span></p> </span></p>
<p><span> <p><span>
@ -62,70 +64,46 @@
<a href="irc://irc.autistici.org:6697/unit"> <a href="irc://irc.autistici.org:6697/unit">
#unit on irc.autistici.org</a> #unit on irc.autistici.org</a>
</span></p> </span></p>
</section> </section>
<section> <section>
<p><span> <p><span>
<a href="https://wiki.unit.macaomilano.org/LaboratorioElettronica"> <a href="https://wiki.unit.macaomilano.org/LaboratorioElettronica">
Laboratorio di elettronica</a> Laboratorio di elettronica</a>
</span></p> </span></p>
<p><span> <p><span>ogni mercoledì pomeriggio (o anche il sabato)</span></p>
ogni mercoledì pomeriggio (o anche il sabato) </section>
</span></p>
</section>
<section> <section>
<p><span> <p><span>
<a href="https://wiki.unit.macaomilano.org/FHF"> <a href="https://wiki.unit.macaomilano.org/FHF">
Free Hacking Friday</a> Free Hacking Friday</a>
</span></p> </span></p>
<p><span> <p><span>Venerdì sera/notte</span></p>
Venerdì sera/notte </section>
</span></p>
</section>
<section> <section>
<p> <p><span>
<span>
<a href="https://saperiproibiti.noblogs.org/"> <a href="https://saperiproibiti.noblogs.org/">
Saperi proibiti</a> Saperi proibiti</a>
</span> </span></p>
</p> <p><span>Téchne e stati modificati di coscienza</span></p>
<p> <p><span>15 e 16 giugno 2018</span></p>
<span> <p><span>Cascina autogestita torchiera</span></p>
15-16 giugno 2018<br> <img alt="Techne flyer" src="assets/images/techne.jpg">
Téchne e stati modificati di coscienza<br> </section>
Cascina autogestita torchiera<br>
<A HREF="https://saperiproibiti.noblogs.org/">
<img src="assets/images/techne.jpg"
width="400" alt="Techne">
</img>
</A>
</span>
</p>
</section>
<section> <section>
<p> <p><span>
<span>
<a href="http://macaomilano.org/spip.php?article742"> <a href="http://macaomilano.org/spip.php?article742">
Saturnalia</a> Saturnalia</a>
</span> </span></p>
</p> <p><span>Musica e lan party</span></p>
<p> <p><span>Dalle ore 06.00 del 23 giugno alle 12.00 del 24 giugno 2018</span></p>
<span> <img alt="Saturnalia flyer" src="assets/images/saturnalia.jpg">
23-24 giugno 2018<br> </section>
Musica e lan party<br>
Macao dalle ore 06 del 23 alle ore 12 del 24<br>
<A HREF="http://macaomilano.org/spip.php?article742">
<img src="assets/images/saturnalia.jpg"
width="400" alt="Saturnalia">
</img>
</A>
</span>
</p>
</section>
</main>
</html> </html>
<!-- <!--