From 0df2057f3f8f5abf28894e7f879a602f31d55923 Mon Sep 17 00:00:00 2001 From: Nikos Roussos Date: Sun, 3 Feb 2019 14:24:16 +0100 Subject: [PATCH] Fix mobile responsiveness of header This makes the header, and especially the values block, more responsive for mobile/tablet resolutions. It also tidies up the html template. There was a mix of spaces and tabs, and 2/4 space indentation. --- index.html | 69 ++++++++++++++++++++++++++++++------------------------ style.css | 52 +++++++++++++++++++++++----------------- 2 files changed, 70 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index c3c35d5..fb6b3d6 100644 --- a/index.html +++ b/index.html @@ -1,36 +1,45 @@ - - - - libreho.st - the librehosters network - - - -
+ + + + libreho.st - the librehosters network + + + +
+
+ +
+

libreho.st - the librehosters network

+
+ +
+
+ librehosters is a network of cooperation and solidarity that uses free software to encourage decentralisation through federation and distributed platforms. Our values connect transparency, fairness and privacy with a culture of data portability and public contributions to the commons.
-
-

libreho.st - the librehosters network

-
-
-
- librehosters is a network of cooperation and solidarity that uses free software to encourage decentralisation through federation and distributed platforms. Our values connect transparency, fairness and privacy with a culture of data portability and public contributions to the commons. -
-
-
+ +
Animation adapted from Alex released CC BY 4.0
-
-

How to participate in the project?

-

- We currently have a discussion ongoing at talk.libreho.st and are developing tools at lab.libreho.st. -

-

If you would like to be included in this list please add a librehost.json file to your projects website and add the project itself to the librehosters directory repository. -


- -
- - +
+ +
+

How to participate in the project?

+ +

+ We currently have a discussion ongoing at talk.libreho.st and are developing tools at lab.libreho.st. +

+ +

+ If you would like to be included in this list please add a librehost.json file to your projects website and add the project itself to the librehosters directory repository. +

+ + +
+ + + diff --git a/style.css b/style.css index 798c450..04de19c 100644 --- a/style.css +++ b/style.css @@ -22,25 +22,15 @@ html, body { width: 100%; } -#attribution { - display: inline-block; - position: absolute; - top: 55vh; - right: 0.5rem; - margin-top: 2.5rem; - color: white; - background: hsla(0, 0%, 0%, 0.5); - padding: 0.5rem; - border-radius: 0.5rem; -} - .header { - padding: 0 1rem; - text-align: center; + padding: 1rem; color: white; min-height: 5rem; - line-height: 5rem; background: hsla(208, 56%, 46%, 1); + display: flex; + align-items: center; + justify-content: center; + text-align: center; } a { @@ -53,21 +43,29 @@ h1 { .ideals { color: white; - height: 55vh; display: flex; - align-items: center; - align-content: center; - flex-direction: row-reverse; + flex-direction: column; } .block { - margin-right: 10vw; display: inline-block; background: hsla(0, 0%, 0%, 0.5); - max-width: 30%; + max-width: 90%; padding: 2rem; border-radius: 0.2rem; font-size: 1.6rem; + margin: 40px 20px; +} + +.attribution { + color: white; + background: hsla(0, 0%, 0%, 0.5); + padding: 0.5rem; + border-radius: 0.5rem; + font-size: 0.8rem; + display: inline-block; + margin-bottom: 10px; + align-self: end; } .block a { @@ -87,3 +85,15 @@ h1 { text-align: center; padding: 1rem; } + +.directory { + margin-top: 20px; +} + +@media (min-width: 992px) { + .block { + align-self: end; + margin-right: 10vw; + max-width: 30%; + } +} -- GitLab