Side-by-side

static/css/toledot.css

@@ -37,6 +37,53 @@ ul {
     display: none;
 }
 
+.hero {
+    max-width: 960px;
+    margin: 0 auto;
+    font-family: "Gentium Plus", serif;
+    font-size: 18pt;
+    display: flex;
+    flex-wrap: wrap;
+    line-height: 1.5;
+}
+
+.hero blockquote {
+    margin: 1rem 0;
+    padding: 0 0 0 2rem;
+    border-left: 3px solid #ddd;
+}
+
+.hero p {
+    text-indent: 2rem;
+}
+
+.hero blockquote p {
+    text-indent: 0;
+    margin-bottom: 0.5rem;
+}
+
+.hero ul {
+    font-size: 20pt;
+    color: #444444;
+    background-color: #fafafa;
+    list-style-type: none;
+    text-align: center;
+    flex: 2 1 100%;
+    margin: 0;
+    padding: 1rem;
+}
+
+.hero ul li {
+    margin: 1rem 0;
+    padding: 0;
+}
+
+.hero .half {
+    flex: 1 0 400px;
+    margin: 0 1rem;
+    max-width: 100%;
+}
+
 @media (max-device-width: 450px) {
     .nav-desktop {
         display: none;
@@ -47,4 +94,22 @@ ul {
     nav ul li {
         padding-bottom: 0.5rem !important;
     }
+    .hero {
+        display: block;
+        margin: 0;
+        padding: 0 2rem;
+        width: 100%;
+    }
+    .hero  ul {
+        flex: none;
+        width: 100%;
+        padding: 0;
+        background-color: initial;
+    }
+    .hero .half {
+        flex: none;
+        width: auto;
+        margin: 0;
+        padding: 0;
+    }
 }