Difference between revisions of "Widget:Homepage"
From LINKS Community Center
(19 intermediate revisions by the same user not shown) | |||
Line 150: | Line 150: | ||
margin: 4em 0; | margin: 4em 0; | ||
} | } | ||
− | .snippet { | + | .snippet { |
− | display: | + | display: block; |
− | |||
− | |||
− | |||
− | |||
text-decoration: none !important; | 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-header { | + | .snippet:hover .snippet-inner { |
+ | transform: rotateY(180deg); | ||
+ | } | ||
+ | .snippet-header, .snippet-body { | ||
+ | position: absolute; | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
− | border | + | padding: 1em; |
− | + | border: 2px solid; | |
+ | border-radius: 5px; | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | justify-content: center; | ||
text-align: center; | text-align: center; | ||
− | + | -webkit-backface-visibility: hidden; /* Safari */ | |
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | .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 { color: var(--links-orange); } | + | .snippet.GL .snippet-body { color: var(--links-orange); } |
− | .snippet.UCL { color: var(--links-cyan); } | + | .snippet.UCL .snippet-body { color: var(--links-cyan); } |
− | .snippet.ICH { color: var(--handbook-color); } | + | .snippet.ICH .snippet-body { color: var(--handbook-color); } |
− | .snippet.FS { color: var(--safe-color); } | + | .snippet.FS .snippet-body { color: var(--safe-color); } |
− | .snippet.RW { color: var(--links-grey); } | + | .snippet.RW .snippet-body { color: var(--links-grey); } |
.snippet.TL .snippet-header { | .snippet.TL .snippet-header { | ||
Line 215: | Line 230: | ||
border-color: var(--safe-color); | border-color: var(--safe-color); | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
Line 235: | 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 258: | Line 265: | ||
</div> | </div> | ||
− | <div id="snippets"></div> | + | <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 400: | Line 407: | ||
</div> | </div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div id="hp-recent" class="container-fluid"> | <div id="hp-recent" class="container-fluid"> | ||
Line 443: | 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", | ||
Line 452: | Line 444: | ||
"action": "/index.php/Feel_Safe", | "action": "/index.php/Feel_Safe", | ||
"product": "FS", | "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", | ||
}, | }, | ||
{ | { | ||
Line 467: | Line 465: | ||
{ | { | ||
"title": "Do you struggle with managing volunteers in disasters?", | "title": "Do you struggle with managing volunteers in disasters?", | ||
− | "body": " | + | "body": "Take part in the course on mobilizing volunteers.", |
− | "action": "/index.php/ | + | "action": "/index.php/Including_Citizens_Handbook#mobilizing_volunteers", |
− | "product": " | + | "product": "ICH", |
}, | }, | ||
]; | ]; | ||
Line 493: | 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!