Widget: Homepage: Difference between revisions

Revision as of 13:26, 25 May 2022

Development verstion of the DCT Homepage.
Not ready for production!

@@ Line 2: / Line 2: @@
 <includeonly><style>
          #hp-wrapper { font-family: 'Open Sans'; }
+        #hp-wrapper h1,  #hp-wrapper h2,  #hp-wrapper h3 {
+            font-family: 'Raleway';
+            font-weight: 300;
+            letter-spacing: .06em;
+        }
          #hp-heading {
              padding: 1em;
@@ Line 14: / Line 19: @@
          }
          .loaded #hp-heading { clip-path: inset(0); }
-         #hp-heading h1 { font-family: 'Raleway'; font-size: 3.7em; margin-bottom: .5em; }
+         #hp-heading h1 { font-size: 3.7em; margin-bottom: .5em; }
          #hp-heading h1 span {
              display: block;
@@ Line 44: / Line 49: @@
          .hp-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 2em; text-decoration: none; cursor: pointer; }
          .hp-area:hover { text-decoration: none; }
+        .hp-area h2 { text-align: center; }
          .hp-area-icon { flex: 1 0; margin-right: 1em; user-select: none; }
          .hp-area-icon svg { width: 100px; height: 100px; }
          .hp-area-text { flex: 1 1 75%; }
-        .hp-area-text h2, #hp-recent h3 { font-family: 'Raleway'; font-weight: 300; letter-spacing: .06em; }
          .hp-area-text p { font-size: 1.2em; margin: 0 0 0 .1em; }
          .hp-area-arrow { flex: 1 0; font-size: 3em; margin-left: 1em; user-select: none; }
@@ Line 109: / Line 114: @@
              </div>
-            <h2>
-                Social Media and Crowdsourcing Libraries
-            </h2>
              <div class="hp-areas">
+                <h2>
+                    Social Media and Crowdsourcing Libraries
+                </h2>
                  <a class="hp-area blue">
                      <div class="hp-area-icon">
@@ Line 119: / Line 124: @@
                      </div>
                      <div class="hp-area-text">
-                         <h2>Technologies </h2>
+                         <h3>Technologies </h3>
                          <p>
                              Software for&nbsp;interaction with, within or&nbsp;among communities in&nbsp;case of a&nbsp;disaster and for&nbsp;analysis of&nbsp;these interactions.
@@ Line 132: / Line 137: @@
                      </div>
                      <div class="hp-area-text">
-                         <h2>Guidelines </h2>
+                         <h3>Guidelines </h3>
                          <p>
                              Expert guidelines for&nbsp;usage of&nbsp;social media and&nbsp;crowdsourcing in&nbsp;disasters.