add 'resources' boxes linking to interesting further content

lektura
max.mehl 2019-01-23 16:43:09 +01:00
parent d9d0d2a0e5
commit c79d2fa3ef
No known key found for this signature in database
GPG Key ID: 2704E4AB371E2E92
11 changed files with 234 additions and 23 deletions

View File

@ -18,6 +18,7 @@ enableGitInfo = true
fbPageID = "336939393138306"
twitterUser = "@fsfe"
# Arguments
[[params.arguments.list]]
no = "1"
icon = "fa-eur"
@ -31,6 +32,24 @@ enableGitInfo = true
no = "4"
icon = "fa-lightbulb-o"
# Resources
[[params.resources.list]]
no = 1
img = "/img/resources/foi.jpg"
link = "https://fsfe.org/tags/tagged-pmpc"
target = "_blank"
[[params.resources.list]]
no = 2
img = "/img/resources/brochure.jpg"
link = "https://fsfe.org/campaigns/publiccode/brochure"
target = "_blank"
[[params.resources.list]]
no = 3
img = "/img/resources/write.jpg"
link = "/media"
target = "_self"
# === TRANSLATIONS ===
[Languages]

View File

@ -15,6 +15,8 @@ other= "Über"
other= "Argumente"
[navigation_links_action]
other= "Werde aktiv"
[navigation_links_resources]
other= "Ressourcen"
[navigation_links_spread]
other= "Weitersagen"
@ -106,6 +108,20 @@ other = "Nationale NGOs"
[organisations_regional_ngo]
other = "Regionale NGOs"
# Resources section
[resources_list_title_1]
other= "Neuigkeiten"
[resources_list_description_1]
other= "Aktuelle Informationen über diese Kampagne und öffentlichen Code in Europa"
[resources_list_title_2]
other= "Umfassende Broschüre"
[resources_list_description_2]
other= "Die brandneue Broschüre erläutert die Vorteile Freier Software für die öffentliche Verwaltung, geschrieben von Experten auf diesem Gebiet"
[resources_list_title_3]
other= "Presse und Medien"
[resources_list_description_3]
other= "Logos, prägnante Informationen und Kontaktdaten für Artikel"
# Spread the word section
[spread_headline]
other= "Weitersagen!"

View File

@ -15,6 +15,8 @@ other= "About"
other= "Reasons"
[navigation_links_action]
other= "Take Action"
[navigation_links_resources]
other= "Resources"
[navigation_links_spread]
other= "Spread the Word"
@ -106,6 +108,20 @@ other = "National NGOs"
[organisations_regional_ngo]
other = "Regional NGOs"
# Resources section
[resources_list_title_1]
other= "Latest News"
[resources_list_description_1]
other= "Recent updates about this campaign and public code in Europe"
[resources_list_title_2]
other= "Expert Brochure"
[resources_list_description_2]
other= "Get the latest brochure explaining the benefits of Free Software for public administration, written by experts in the field"
[resources_list_title_3]
other= "Press and Media"
[resources_list_description_3]
other= "Find logos, condensed information, and contacts for your articles"
# Spread the word section
[spread_headline]
other= "Spread the word!"

View File

@ -18,6 +18,8 @@
{{ partial "organisations.html" . }}
{{ partial "resources.html" . }}
{{ partial "spread.html" . }}
{{ partial "language.html" . }}

View File

@ -34,6 +34,9 @@
<li>
<a class="page-scroll" href="#action">{{ i18n "navigation_links_action" }}</a>
</li>
<li>
<a class="page-scroll" href="#resources">{{ i18n "navigation_links_resources" }}</a>
</li>
<li>
<a class="page-scroll" href="#spread">{{ i18n "navigation_links_spread" }}</a>
</li>

View File

@ -6,24 +6,18 @@
<div class="row no-gutter">
{{ range .Site.Params.resources.list }}
<div class="col-lg-4 col-sm-6">
<a href="{{ .link }}" class="resources-box resources-link">
<img src="/img/resources/{{ .img }}" class="img-responsive" alt="">
{{ if .title }}
<div class="resources-box-caption">
<div class="resources-box-caption-content">
{{ with .title }}
<div class="resource-name">
{{ . }}
</div>
{{ end }}
{{ with .description }}
<div class="resource-description">
{{ . }}
</div>
{{ end }}
<a href="{{ replaceRE "^/(.*)" ("$1" | relLangURL) .link }}" target="{{ .target }}" class="resources-box resources-link">
<img src="{{ .img }}" class="img-responsive" alt="" />
<div class="resources-box-caption">
<div class="resources-box-caption-content">
<div class="resource-name">
{{ i18n (delimit (slice "resources_list_title_" .no) "") }}
</div>
<div class="resource-description">
{{ i18n (delimit (slice "resources_list_description_" .no) "") }}
</div>
</div>
{{ end }}
</div>
</a>
</div>
{{ end }}

View File

@ -394,32 +394,33 @@ header .header-content .header-content-inner p {
}
.resources-box .resources-box-caption .resources-box-caption-content .resource-category,
.resources-box .resources-box-caption .resources-box-caption-content .resource-name {
padding: 0 15px;
.resources-box .resources-box-caption .resources-box-caption-content .resource-name,
.resources-box .resources-box-caption .resources-box-caption-content .resource-description {
padding: 0 40px;
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}
.resources-box .resources-box-caption .resources-box-caption-content .resource-description {
margin-top: 10px;
font-size: 14px;
font-size: 16px;
font-weight: 600;
}
.resources-box .resources-box-caption .resources-box-caption-content .resource-name {
font-size: 20px;
font-size: 30px;
}
.resources-box:hover .resources-box-caption {
background: rgba(76, 189, 56, .9);
background: rgba(22, 142, 193, .9);
}
@media(min-width:768px) {
.resources-box .resources-box-caption .resources-box-caption-content .resource-description {
font-size: 14px;
font-size: 16px;
}
.resources-box .resources-box-caption .resources-box-caption-content .resource-name {
font-size: 22px;
font-size: 30px;
}
}

View File

@ -409,6 +409,8 @@ a:hover {
.btn:hover { border: 0 !important; }
.hiddenlink { border: 0 !important;}
.hiddenlink:hover { border: 0 !important; }
.resources-link { border: 0 !important;}
.resources-link:hover { border: 0 !important; }
/* BOUNCING DOWN ARROW */

View File

@ -0,0 +1,158 @@
/*
Put this file in /static/css/hugo-easy-gallery.css
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
*/
/*
Grid Layout Styles
*/
.gallery {
overflow: hidden;
margin: 10px;
max-width: 768px;
}
.gallery .box {
float: left;
position: relative;
/* Default: 1 tile wide */
width: 100%;
padding-bottom: 100%;
}
@media only screen and (min-width : 365px) {
/* Tablet view: 2 tiles */
.gallery .box {
width: 50%;
padding-bottom: 50%;
}
}
@media only screen and (min-width : 480px) {
/* Small desktop / ipad view: 3 tiles */
.gallery .box {
width: 33.3%;
padding-bottom: 33.3%; /* */
}
}
@media only screen and (min-width : 9999px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
padding-bottom: 25%;
}
}
/*
Transition styles
*/
.gallery.hover-transition figure,
.gallery.hover-effect-zoom .img,
.gallery:not(.caption-effect-appear) figcaption,
.fancy-figure:not(.caption-effect-appear) figcaption {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/*
figure styles
*/
figure {
position:relative; /* purely to allow absolution positioning of figcaption */
overflow: hidden;
}
.gallery figure {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
}
.gallery.hover-effect-grow figure:hover {
transform: scale(1.05);
}
.gallery.hover-effect-shrink figure:hover {
transform: scale(0.95);
}
.gallery.hover-effect-slidedown figure:hover {
transform: translateY(5px);
}
.gallery.hover-effect-slideup figure:hover {
transform: translateY(-5px);
}
/*
img / a styles
*/
.gallery .img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.gallery.hover-effect-zoom figure:hover .img {
transform: scale(1.05);
}
.gallery img {
display: none; /* only show the img if not inside a gallery */
}
figure a {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/*
figcaption styles
*/
.gallery figcaption,
.fancy-figure figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #000;
color: #FFF;
text-align: center;
font-size: 75%; /* change this if you want bigger text */
background: rgba(0, 0, 0, 0.5);
opacity: 1;
cursor: pointer;
}
.gallery.caption-position-none figcaption,
.fancy-figure.caption-position-none figcaption {
display: none;
}
.gallery.caption-position-center figcaption,
.fancy-figure.caption-position-center figcaption {
top: 0;
padding: 40% 5px;
}
.gallery.caption-position-bottom figcaption,
.fancy-figure.caption-position-bottom figcaption {
padding: 5px;
}
.gallery.caption-effect-fade figure:not(:hover) figcaption,
.gallery.caption-effect-appear figure:not(:hover) figcaption,
.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
background: rgba(0, 0, 0, 0);
opacity: 0;
}
.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
margin-bottom: -100%;
}
.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption {
top: 100%;
}
figcaption p {
margin: auto; /* override style in theme */
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB