Difference between revisions of "Widget:Homepage"
From LINKS Community Center
(27 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<noinclude>Second version of the LINKS Community Center homepage.<br><strong style="color: red;">Do not modify!</strong></noinclude> | <noinclude>Second version of the LINKS Community Center homepage.<br><strong style="color: red;">Do not modify!</strong></noinclude> | ||
<includeonly><style> | <includeonly><style> | ||
+ | :root { | ||
+ | --compass-color: #C31980; | ||
+ | --handbook-color: #C2902D; | ||
+ | --safe-color: #80C319; | ||
+ | } | ||
#hp-wrapper { | #hp-wrapper { | ||
--hp-border: 1px solid rgba(0, 0, 0, .5); | --hp-border: 1px solid rgba(0, 0, 0, .5); | ||
Line 113: | Line 118: | ||
@media screen and (min-width: 992px) { | @media screen and (min-width: 992px) { | ||
− | #hp-heading { padding: 3em; margin-bottom: | + | #hp-heading { padding: 3em; margin-bottom: 4em; } |
#hp-heading h1 { font-size: 5em; } | #hp-heading h1 { font-size: 5em; } | ||
#hp-heading .hp-lead { max-width: 50%; font-size: 2em; } | #hp-heading .hp-lead { max-width: 50%; font-size: 2em; } | ||
Line 145: | Line 150: | ||
margin: 4em 0; | margin: 4em 0; | ||
} | } | ||
− | .snippet { | + | .snippet { |
+ | display: block; | ||
+ | text-decoration: none !important; | ||
+ | color: transparent; | ||
+ | background-color: transparent; | ||
+ | perspective: 1000px; | ||
+ | height: 7em; | ||
+ | } | ||
+ | .snippet .snippet-inner { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | transition: transform 500ms; | ||
+ | transform-style: preserve-3d; | ||
+ | } | ||
+ | .snippet:hover .snippet-inner { | ||
+ | transform: rotateY(180deg); | ||
+ | } | ||
+ | .snippet-header, .snippet-body { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | padding: 1em; | ||
+ | border: 2px solid; | ||
+ | border-radius: 5px; | ||
display: flex; | display: flex; | ||
− | |||
align-items: center; | align-items: center; | ||
− | + | justify-content: center; | |
− | + | text-align: center; | |
− | + | -webkit-backface-visibility: hidden; /* Safari */ | |
+ | backface-visibility: hidden; | ||
} | } | ||
.snippet-header { | .snippet-header { | ||
− | |||
− | |||
− | |||
− | |||
color: #fff; | color: #fff; | ||
} | } | ||
.snippet-body { | .snippet-body { | ||
− | + | transform: rotateY(180deg); | |
− | |||
} | } | ||
− | .snippet.TL { color: var(--links-blue); } | + | .snippet.TL .snippet-body { color: var(--links-blue); } |
+ | |||
+ | .snippet.GL .snippet-body { color: var(--links-orange); } | ||
− | .snippet. | + | .snippet.UCL .snippet-body { color: var(--links-cyan); } |
− | .snippet. | + | .snippet.ICH .snippet-body { color: var(--handbook-color); } |
− | .snippet. | + | .snippet.FS .snippet-body { color: var(--safe-color); } |
− | .snippet. | + | .snippet.RW .snippet-body { color: var(--links-grey); } |
.snippet.TL .snippet-header { | .snippet.TL .snippet-header { | ||
Line 188: | Line 214: | ||
background-color: var(--links-cyan); | background-color: var(--links-cyan); | ||
border-color: var(--links-cyan); | border-color: var(--links-cyan); | ||
+ | } | ||
+ | |||
+ | .snippet.RW .snippet-header { | ||
+ | background-color: var(--links-grey); | ||
+ | border-color: var(--links-grey); | ||
} | } | ||
Line 199: | Line 230: | ||
border-color: var(--safe-color); | border-color: var(--safe-color); | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
Line 218: | Line 242: | ||
<div id="hp-wrapper"> | <div id="hp-wrapper"> | ||
<div id="hp-heading"> | <div id="hp-heading"> | ||
− | <h1> | + | <h1 translate="no"> |
<span>LINKS</span> | <span>LINKS</span> | ||
<span>Community</span> | <span>Community</span> | ||
Line 241: | Line 265: | ||
</div> | </div> | ||
− | <div id=" | + | <div id="hp-main"> |
+ | <div id="snippets"></div> | ||
− | |||
<form class="hp-search form-inline w-100" onsubmit="search(event)"> | <form class="hp-search form-inline w-100" onsubmit="search(event)"> | ||
<input id="hp-search-input" class="form-control form-control-lg flex-grow-1" type="text" | <input id="hp-search-input" class="form-control form-control-lg flex-grow-1" type="text" | ||
Line 383: | Line 407: | ||
</div> | </div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div id="hp-recent" class="container-fluid"> | <div id="hp-recent" class="container-fluid"> | ||
Line 426: | Line 435: | ||
{ | { | ||
"title": "Do you want to be prepared when disaster strikes?", | "title": "Do you want to be prepared when disaster strikes?", | ||
− | "body": "Learn from | + | "body": "Learn from many use cases about social media and crowdsourcing.", |
"action": "/index.php/List_of_Use_Cases", | "action": "/index.php/List_of_Use_Cases", | ||
"product": "UCL", | "product": "UCL", | ||
+ | }, | ||
+ | { | ||
+ | "title": "How to protect children during disaster?", | ||
+ | "body": "Child friendly disaster risk reduction.", | ||
+ | "action": "/index.php/Feel_Safe", | ||
+ | "product": "FS", | ||
+ | }, | ||
+ | { | ||
+ | "title": "Be successful with your social media engagement!", | ||
+ | "body": "Find a plan in our library and develop your own strategy!", | ||
+ | "action": "/index.php/List_of_Guidelines?do=JTdCJTIyZmlsdGVyJTIyJTNBJTdCJTIyQ292ZXJzJTIwVGhlbWF0aWMlMjIlM0ElN0IlMjJDcmlzaXMlMjBjb21tdW5pY2F0aW9uJTIyJTNBdHJ1ZSUyQyUyMlNvY2lhbCUyME1lZGlhJTIwU3RyYXRlZ3klMjIlM0F0cnVlJTdEJTdEJTdE", | ||
+ | "product": "GL", | ||
+ | }, | ||
+ | { | ||
+ | "title": "Do you know how to engage with vulnerable groups?", | ||
+ | "body": "In this helpful guide we walk you through a few actions that can be taken.", | ||
+ | "action": "/index.php/Including_Citizens_Handbook#making_information_accessible", | ||
+ | "product": "ICH", | ||
+ | }, | ||
+ | { | ||
+ | "title": "Want to advance your organization’s use of social media?", | ||
+ | "body": "Try the Resilience Wheel.", | ||
+ | "action": "/index.php/Resilience_Wheel", | ||
+ | "product": "RW", | ||
+ | }, | ||
+ | { | ||
+ | "title": "Do you struggle with managing volunteers in disasters?", | ||
+ | "body": "Take part in the course on mobilizing volunteers.", | ||
+ | "action": "/index.php/Including_Citizens_Handbook#mobilizing_volunteers", | ||
+ | "product": "ICH", | ||
}, | }, | ||
]; | ]; | ||
Line 452: | Line 491: | ||
const snippet = snippets[index]; | const snippet = snippets[index]; | ||
let el = '<a class="snippet ' + snippet.product + '" href="' + snippet.action + '">'; | let el = '<a class="snippet ' + snippet.product + '" href="' + snippet.action + '">'; | ||
+ | el += '<div class="snippet-inner">'; | ||
el += '<div class="snippet-header">' + snippet.title + '</div>'; | el += '<div class="snippet-header">' + snippet.title + '</div>'; | ||
el += '<div class="snippet-body">' + snippet.body + '</div>'; | el += '<div class="snippet-body">' + snippet.body + '</div>'; | ||
− | el += '</a>'; | + | el += '</div></a>'; |
container.innerHTML += el; | container.innerHTML += el; | ||
} | } | ||
</script> | </script> | ||
</includeonly> | </includeonly> |
Revision as of 14:36, 10 January 2024
Second version of the LINKS Community Center homepage.
Do not modify!