hswaw/site: attempt multi-column layout
Change-Id: I19924b40cbed51866ed25260962bb5454fb8e544
diff --git a/hswaw/site/static/landing.css b/hswaw/site/static/landing.css
index 6d32537..431d8ea 100644
--- a/hswaw/site/static/landing.css
+++ b/hswaw/site/static/landing.css
@@ -9,10 +9,76 @@
}
#page {
- max-width: 42rem;
+ max-width: 75rem;
margin: auto;
padding-top: 2rem;
padding: 1rem;
+
+ display: flex;
+ flex-direction: column;
+}
+
+.top {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 1rem;
+}
+
+.top .logo {
+ display: flex;
+ flex-direction: row;
+ flex-grow: 1;
+ justify-content: right;
+}
+
+.top .logo img {
+ margin-top: 2rem;
+ max-height: 25rem
+}
+
+.top .mapcontainer {
+ flex-grow: 1;
+ min-width: 35%;
+}
+
+#map {
+ margin-bottom: 1rem;
+ height: 16rem;
+}
+
+
+.logo h1 {
+ display: block;
+ max-width: 20rem;
+ text-align: center;
+ font-size: 52px;
+ margin-right: 8rem;
+ padding-top: 5rem;
+}
+
+.covid {
+ padding: 1rem 2rem;
+ background-color: #9f0000;
+}
+
+.covid span {
+ font-size: 20px;
+ font-style: italic;
+}
+
+.bottom {
+ display: flex;
+ flex-direction: row;
+}
+
+.bottom .about {
+ padding: 1rem 1rem 1rem 2rem;
+}
+
+.bottom .blog {
+ padding: 1rem 2rem 1rem 1rem;
+ flex-grow: 1;
+ min-width: 40%;
}
p {
@@ -20,11 +86,6 @@
text-align: justify;
}
-.logo {
- max-width: 10rem;
- max-height: 20vh
-}
-
h1 {
font-size: 30px;
}
@@ -33,11 +94,7 @@
}
h1, h2, h3, h4 {
- padding-top: 1rem;
- text-align: center;
font-family: 'Allerta', sans-serif;
- margin: 0;
- color: #fff;
}
pre {
@@ -65,12 +122,6 @@
font-size: 0.8em;
}
-#map {
- width: 100%;
- height: 40vh;
- margin-bottom: 1rem;
-}
-
#background-logo {
position: absolute;
width: 100%;