From 8f776359f06020e0019ef8f1f3dede7132c3f899 Mon Sep 17 00:00:00 2001 From: crudo Date: Fri, 8 Jun 2018 13:19:31 +0200 Subject: [PATCH] Fix images border, center logo and add media query Also: * Use
instead of
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. --- assets/styles/site.css | 35 +++++++--- index.html | 152 ++++++++++++++++++----------------------- 2 files changed, 89 insertions(+), 98 deletions(-) diff --git a/assets/styles/site.css b/assets/styles/site.css index 27e8269..f49706e 100644 --- a/assets/styles/site.css +++ b/assets/styles/site.css @@ -11,7 +11,7 @@ html { } *, *:before, *:after { - box-sizing: inherit; + box-sizing: inherit; } @@ -20,12 +20,19 @@ html { * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ body { - - padding: 2rem 0.5rem; + width: 100%; } -.mainContainer { - margin-left: 40vw; +main { + width: 100%; + margin: 2rem 1rem; +} + +@media (min-width: 426px) { + main { + width: 30vw; + margin: 2rem auto; + } } @@ -35,9 +42,9 @@ body { h1 { - margin-top: 0; - margin-bottom: 0.3rem; + margin: 0; font-size: 4rem; + line-height: 4rem; } p, li { @@ -59,7 +66,9 @@ a:hover { * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ header { - margin-bottom: 2rem; + width: 100%; + margin: 2rem auto 2rem auto; + text-align: center; } header > img, @@ -70,7 +79,6 @@ header > h1 { header > img { width: 4rem; - margin-right: 1rem; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * @@ -120,11 +128,16 @@ section > p { section > p > span { padding: 0.1rem 0; background: #000000; - box-shadow: 0rem 0 0 #000000, 0rem 0 0 #000000; + box-shadow: 0 0 0 #000000, 0 0 0 #000000; color: #ffffff; } section > p:first-child > span { 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; } diff --git a/index.html b/index.html index 6492a1d..0b5a03d 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + @@ -33,99 +33,77 @@ Unit - -
-
- Unit logo -

Unit

-
+ +
- +
+ Unit logo +

Unit

+
-
-

- - Viale Molise 68, Milano -

-

- - unit at paranoici dot org -

-

- - #unit on irc.autistici.org -

-
+ -
-

- - Laboratorio di elettronica -

-

- ogni mercoledì pomeriggio (o anche il sabato) -

-
+
+

+ + Viale Molise 68, Milano +

+

+ + unit at paranoici dot org +

+

+ + #unit on irc.autistici.org +

+
-
-

- - Free Hacking Friday -

-

- Venerdì sera/notte -

-
+
+

+ + Laboratorio di elettronica +

+

ogni mercoledì pomeriggio (o anche il sabato)

+
-
-

- - - Saperi proibiti - -

-

- - 15-16 giugno 2018
- Téchne e stati modificati di coscienza
- Cascina autogestita torchiera
- - Techne - - - -

-
+
+

+ + Free Hacking Friday +

+

Venerdì sera/notte

+
-
-

- - - Saturnalia - -

-

- - 23-24 giugno 2018
- Musica e lan party
- Macao dalle ore 06 del 23 alle ore 12 del 24
- - Saturnalia - - - -

-
+
+

+ + Saperi proibiti +

+

Téchne e stati modificati di coscienza

+

15 e 16 giugno 2018

+

Cascina autogestita torchiera

+ Techne flyer +
+
+

+ + Saturnalia +

+

Musica e lan party

+

Dalle ore 06.00 del 23 giugno alle 12.00 del 24 giugno 2018

+ Saturnalia flyer +
+ +