Difference between revisions of "Widget:Homepage"
From LINKS Community Center
| Line 2: | Line 2: | ||
<includeonly><style> | <includeonly><style> | ||
#hp-wrapper { font-family: 'Open Sans'; } | #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 { | #hp-heading { | ||
padding: 1em; | padding: 1em; | ||
| Line 14: | Line 19: | ||
} | } | ||
.loaded #hp-heading { clip-path: inset(0); } | .loaded #hp-heading { clip-path: inset(0); } | ||
| − | #hp-heading h1 { | + | #hp-heading h1 { font-size: 3.7em; margin-bottom: .5em; } |
#hp-heading h1 span { | #hp-heading h1 span { | ||
display: block; | 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 { display: flex; flex-direction: column; align-items: center; margin-bottom: 2em; text-decoration: none; cursor: pointer; } | ||
.hp-area:hover { text-decoration: none; } | .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 { flex: 1 0; margin-right: 1em; user-select: none; } | ||
.hp-area-icon svg { width: 100px; height: 100px; } | .hp-area-icon svg { width: 100px; height: 100px; } | ||
.hp-area-text { flex: 1 1 75%; } | .hp-area-text { flex: 1 1 75%; } | ||
| − | |||
.hp-area-text p { font-size: 1.2em; margin: 0 0 0 .1em; } | .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; } | .hp-area-arrow { flex: 1 0; font-size: 3em; margin-left: 1em; user-select: none; } | ||
| Line 109: | Line 114: | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
<div class="hp-areas"> | <div class="hp-areas"> | ||
| + | <h2> | ||
| + | Social Media and Crowdsourcing Libraries | ||
| + | </h2> | ||
<a class="hp-area blue"> | <a class="hp-area blue"> | ||
<div class="hp-area-icon"> | <div class="hp-area-icon"> | ||
| Line 119: | Line 124: | ||
</div> | </div> | ||
<div class="hp-area-text"> | <div class="hp-area-text"> | ||
| − | < | + | <h3>Technologies </h3> |
<p> | <p> | ||
Software for interaction with, within or among communities in case of a disaster and for analysis of these interactions. | Software for interaction with, within or among communities in case of a disaster and for analysis of these interactions. | ||
| Line 132: | Line 137: | ||
</div> | </div> | ||
<div class="hp-area-text"> | <div class="hp-area-text"> | ||
| − | < | + | <h3>Guidelines </h3> |
<p> | <p> | ||
Expert guidelines for usage of social media and crowdsourcing in disasters. | Expert guidelines for usage of social media and crowdsourcing in disasters. | ||
Revision as of 14:26, 25 May 2022
Development verstion of the DCT Homepage.
Not ready for production!