forked from unit/website
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:
parent
8d0ee00723
commit
8f776359f0
|
|
@ -11,7 +11,7 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
*, *:before, *:after {
|
*, *:before, *:after {
|
||||||
box-sizing: inherit;
|
box-sizing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
152
index.html
152
index.html
|
|
@ -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,99 +33,77 @@
|
||||||
<title>Unit</title>
|
<title>Unit</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="mainContainer">
|
<main>
|
||||||
<header>
|
|
||||||
<img alt="Unit logo" src="assets/images/logo.svg">
|
|
||||||
<h1>Unit</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<nav>
|
<header>
|
||||||
<ul>
|
<img alt="Unit logo" src="assets/images/logo.svg">
|
||||||
<li><a href="https://wiki.unit.macaomilano.org">Wiki</a></li>
|
<h1>Unit</h1>
|
||||||
<li><a href="https://git.unit.macaomilano.org">Git</a></li>
|
</header>
|
||||||
<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>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<section>
|
<nav>
|
||||||
<p><span>
|
<ul>
|
||||||
<a href="https://www.openstreetmap.org/node/2709091290" target="_blank">
|
<li><a href="https://wiki.unit.macaomilano.org">Wiki</a></li>
|
||||||
Viale Molise 68, Milano</a>
|
<li><a href="https://git.unit.macaomilano.org">Git</a></li>
|
||||||
</span></p>
|
<li><a href="https://wiki.unit.macaomilano.org/Calendar">Calendar</a></li>
|
||||||
<p><span>
|
<li><a href="https://noise.autistici.org/mailman/listinfo/unit-news">Newsletter</a></li>
|
||||||
<a href="mailto:unit at paranoici dot org">
|
</ul>
|
||||||
unit at paranoici dot org</a>
|
</nav>
|
||||||
</span></p>
|
|
||||||
<p><span>
|
|
||||||
<a href="irc://irc.autistici.org:6697/unit">
|
|
||||||
#unit on irc.autistici.org</a>
|
|
||||||
</span></p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<p><span>
|
<p><span>
|
||||||
<a href="https://wiki.unit.macaomilano.org/LaboratorioElettronica">
|
<a href="https://www.openstreetmap.org/node/2709091290"
|
||||||
Laboratorio di elettronica</a>
|
target="_blank">
|
||||||
</span></p>
|
Viale Molise 68, Milano</a>
|
||||||
<p><span>
|
</span></p>
|
||||||
ogni mercoledì pomeriggio (o anche il sabato)
|
<p><span>
|
||||||
</span></p>
|
<a href="mailto:unit at paranoici dot org">
|
||||||
</section>
|
unit at paranoici dot org</a>
|
||||||
|
</span></p>
|
||||||
|
<p><span>
|
||||||
|
<a href="irc://irc.autistici.org:6697/unit">
|
||||||
|
#unit on irc.autistici.org</a>
|
||||||
|
</span></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<p><span>
|
<p><span>
|
||||||
<a href="https://wiki.unit.macaomilano.org/FHF">
|
<a href="https://wiki.unit.macaomilano.org/LaboratorioElettronica">
|
||||||
Free Hacking Friday</a>
|
Laboratorio di elettronica</a>
|
||||||
</span></p>
|
</span></p>
|
||||||
<p><span>
|
<p><span>ogni mercoledì pomeriggio (o anche il sabato)</span></p>
|
||||||
Venerdì sera/notte
|
</section>
|
||||||
</span></p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<p>
|
<p><span>
|
||||||
<span>
|
<a href="https://wiki.unit.macaomilano.org/FHF">
|
||||||
<a href="https://saperiproibiti.noblogs.org/">
|
Free Hacking Friday</a>
|
||||||
Saperi proibiti</a>
|
</span></p>
|
||||||
</span>
|
<p><span>Venerdì sera/notte</span></p>
|
||||||
</p>
|
</section>
|
||||||
<p>
|
|
||||||
<span>
|
|
||||||
15-16 giugno 2018<br>
|
|
||||||
Téchne e stati modificati di coscienza<br>
|
|
||||||
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="https://saperiproibiti.noblogs.org/">
|
||||||
<a href="http://macaomilano.org/spip.php?article742">
|
Saperi proibiti</a>
|
||||||
Saturnalia</a>
|
</span></p>
|
||||||
</span>
|
<p><span>Téchne e stati modificati di coscienza</span></p>
|
||||||
</p>
|
<p><span>15 e 16 giugno 2018</span></p>
|
||||||
<p>
|
<p><span>Cascina autogestita torchiera</span></p>
|
||||||
<span>
|
<img alt="Techne flyer" src="assets/images/techne.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>
|
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p><span>
|
||||||
|
<a href="http://macaomilano.org/spip.php?article742">
|
||||||
|
Saturnalia</a>
|
||||||
|
</span></p>
|
||||||
|
<p><span>Musica e lan party</span></p>
|
||||||
|
<p><span>Dalle ore 06.00 del 23 giugno alle 12.00 del 24 giugno 2018</span></p>
|
||||||
|
<img alt="Saturnalia flyer" src="assets/images/saturnalia.jpg">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user