...
 
Commits (9)
......@@ -15,3 +15,38 @@ require('foundation-sites');
$(document).foundation();
jQuery(document).ready(function($) {
///////////////
// Teammembers expander
// TODO load this conditionally on single event page
///////////////
var $readMoreLinks = $( '.js-teammember-readmore' ),
$teammemberContent = $('.js-teammember-content'),
readmoreShrinkClass = 'teammembers__content--shrinked',
readmoreClass = 'js-teammember-readmore',
readmoreHiddenClass = 'teammembers__readmore--hidden';
$.each( $teammemberContent, function( index, elem ) {
var $this = $(elem);
if( $this.outerHeight() > 200 ) {
$this.addClass( readmoreShrinkClass );
$this.siblings( '.' + readmoreClass ).removeClass( readmoreHiddenClass );
}
});
$.each( $readMoreLinks, function( index, elem ) {
var $this = $(elem);
$this.on( 'click', function( e ) {
e.preventDefault();
$(this).siblings('.js-teammember-content').toggleClass(readmoreShrinkClass);
});
});
});
......@@ -23,7 +23,7 @@ $foundation-palette: (
warning: #ffae00,
alert: #cc4b37,
);
$light-gray: #e6e6e6;
$light-gray: #e2e2e2;
$medium-gray: $c-plusko-gray;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
......@@ -128,7 +128,7 @@ $paragraph-text-rendering: optimizeLegibility;
$enable-code-inline: true;
$anchor-color: $primary-color;
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
$anchor-text-decoration: none;
$anchor-text-decoration: underline;
$anchor-text-decoration-hover: none;
$hr-width: $global-width;
$hr-border: 1px solid $medium-gray;
......@@ -142,9 +142,9 @@ $list-nested-side-margin: 1.25rem;
$defnlist-margin-bottom: 1rem;
$defnlist-term-weight: $global-weight-bold;
$defnlist-term-margin-bottom: 0.3rem;
$blockquote-color: $dark-gray;
$blockquote-color: $white;
$blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid $medium-gray;
$blockquote-border: none;
$enable-cite-block: true;
$keystroke-font: $font-family-monospace;
$keystroke-color: $black;
......@@ -164,9 +164,9 @@ $subheader-font-weight: $global-weight-normal;
$subheader-margin-top: 0.2rem;
$subheader-margin-bottom: 0.5rem;
$stat-font-size: 2.5rem;
$cite-color: $dark-gray;
$cite-font-size: rem-calc(13);
$cite-pseudo-content: '\2014 \0020';
$cite-color: $white;
$cite-font-size: rem-calc(16);
$cite-pseudo-content: none;
$code-color: $black;
$code-font-family: $font-family-monospace;
$code-font-weight: $global-weight-normal;
......@@ -192,14 +192,18 @@ $input-error-font-weight: $global-weight-bold;
$accordion-background: $white;
$accordion-plusminus: true;
$accordion-plus-content: '\002B';
$accordion-minus-content: '\2013';
// $accordion-plus-content: '\002B';
$accordion-plus-content: url("data:image/svg+xml,%3Csvg width='14' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l7-10H0l7 10z' fill='%2391B029'/%3E%3C/svg%3E");
// $accordion-minus-content: '\2013';
$accordion-minus-content: url("data:image/svg+xml,%3Csvg width='14' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 0l7 10H0L7 0z' fill='%2391B029'/%3E%3C/svg%3E");
$accordion-title-font-size: rem-calc(12);
$accordion-title-border-radius: rem-calc( 5 );
$accordion-title-border: 2px solid $light-gray;
$accordion-item-color: $primary-color;
$accordion-item-background-hover: $light-gray;
$accordion-item-padding: 1.25rem 1rem;
$accordion-content-background: $white;
$accordion-content-border: 1px solid $light-gray;
$accordion-content-border: none;
$accordion-content-color: $body-font-color;
$accordion-content-padding: 1rem;
......
.accordion {
&-title {
border: $accordion-title-border;
border-radius: $accordion-title-border-radius;
font-size: rem-calc( 20 );
color: $black;
font-family: $header-font-family;
&:hover {
color: $black;
}
}
&-item {
&:first-child > :first-child,
&:last-child:not(.is-active) > .accordion-title {
border-radius: $accordion-title-border-radius;
border-bottom: $accordion-title-border;
}
}
@include breakpoint( medium ) {
max-width: rem-calc( 620 );
margin: 0 auto;
}
}
\ No newline at end of file
.section-quote {
background-color: $c-plusko-orange;
font-family: $header-font-family;
color: $white;
font-size: rem-calc( 20 );
// display: flex;
// justify-content: center;
text-align: center;
.blockquote {
position: relative;
&::before,
&::after {
content: '\0022';
font-family: $header-font-family;
font-size: rem-calc( 250 );
line-height: 1;
opacity: 0.45;
position: absolute;
}
&::before {
top: rem-calc( -40 );
left: rem-calc( -10 );
}
&::after {
bottom: rem-calc( -150 );
right: rem-calc( -20 );
}
footer {
opacity: 0.75;
// &::before,
// &::after {
// content: '–';
// display: inline-block;
// }
// &::before {
// margin-right: rem-calc( 5 );
// }
// &::after {
// margin-left: rem-calc( 5 );
// }
}
cite {
display: inline-block;
font-family: $body-font-family;
font-style: normal;
}
}
@include breakpoint( medium ) {
.blockquote {
max-width: 50%;
margin: 0 auto;
font-size: rem-calc( 31 ); //TODO exactly size of header 3
&::before {
top: rem-calc( -60 );
left: unset;
right: 100%;
}
&::after {
bottom: rem-calc( -150 );
right: unset;
left: 100%;
}
cite {
font-size: rem-calc( 26 );
}
}
}
}
\ No newline at end of file
.businesscard {
display: flex;
max-width: rem-calc( 620 );
margin: 0 auto;
background-color: $c-plusko-green;
color: $white;
&__photo {
max-width: 30%;
position: relative;
top: rem-calc( -5 );
left: rem-calc( -10 );
}
&__content {
padding: rem-calc( 15 15 15 5 );
}
&__name {
margin-bottom: 0;
font-family: $body-font-family;
}
&__whoisit {
font-family: $body-font-family;
font-size: 1rem;
font-weight: normal;
}
&__contact {
color: $white;
display: block;
font-family: $header-font-family;
padding: rem-calc( 7 0 );
&:hover {
color: $white;
}
}
@include breakpoint( medium ) {
&__photo {
top: rem-calc( -15 );
left: rem-calc( -20 );
}
&__content {
padding: rem-calc( 50 );
}
&__contact {
padding: 0;
}
}
}
\ No newline at end of file
......@@ -30,6 +30,10 @@
font-size: rem-calc( $size ) ;
line-height: 1;
margin-bottom: 0;
a {
color: $white;
}
}
&__dates {
......
......@@ -33,7 +33,8 @@
}
.home &,
.page & { //header should overlap hero picture
.page &,
.archive & { //header should overlap hero picture, except on detail akcie
position: absolute;
left: 0;
right: 0;
......
......@@ -92,12 +92,11 @@ here it actually means two information - name of event and short description
&__introtext {
max-width: 60%;
}
}
&--static &__content {
&::after {
width: 120%;
&--static &__content {
&::after {
width: 120%;
}
}
}
}
\ No newline at end of file
.main-nav {
.main-nav.dropdown.menu {
font-family: $header-font-family;
font-size: rem-calc( 24 );
......@@ -10,6 +10,18 @@
}
}
.contrast-header & {
>li {
>a {
color: $white;
&::after {
border-color: $white transparent transparent;
}
}
}
}
.is-dropdown-submenu {
// border: none;
}
......
.section {
padding: rem-calc( 50 50 );
padding: rem-calc( 50 25 );
&--notopspace {
padding-top: 0;
......
......@@ -23,10 +23,13 @@
&__href {
width: rem-calc( 30 );
height: rem-calc( 30 );
background-image: url( '../img/facebook-grey.svg');
&--in {
background-image: url( '../img/instagram-grey.svg');
body:not(.contrast-header) & {
background-image: url( '../img/facebook-grey.svg');
&--in {
background-image: url( '../img/instagram-grey.svg');
}
}
}
}
......
.teammembers {
@include reset-list()
@include xy-grid();
@include xy-grid-layout( 1, '.teammembers__item');
&__item {
background-color: $c-plusko-green;
padding: rem-calc( 30 );
color: $white;
margin-bottom: rem-calc( 30 );
&:nth-of-type(2n+2) {
background-color: $c-plusko-orange;
}
}
&__image {
max-width: 75%;
position: relative;
top: rem-calc( -35 );
left: rem-calc( -40 );
}
&__content {
max-height: 9999px;
overflow: hidden;
&--shrinked {
max-height: rem-calc( 200 );
transition: max-height 0.5s;
}
}
&__readmore {
font-family: $header-font-family;
color: $white;
font-size: rem-calc( 18 );
&--hidden {
display: none;
}
&:hover {
color: $white;
}
&::before {
content: '+ ';
}
}
@include breakpoint( medium ) {
@include xy-grid-layout( 2, '.teammembers__item');
}
@include breakpoint( large ) {
@include xy-grid-layout( 3, '.teammembers__item');
}
}
\ No newline at end of file
-
q: "Čo budem so sebou potrebovať?"
a: "Na ČaVelo budeš potrebovať:
minimálne priemernú kondičku
vek 16 rokov a viac
crossový/trekkingový alebo horský bicykel (z dôvodu kombinovaného terénu nie je cestný bicykel vhodný)
cyklo-nosič, cyklo-vaky a iné doplnky (zoznam upresníme v samostatnom odporúčaní)
stan
spací vak
karimatku"
link: "asdf234a"
-
q: "Kadiaľ povedie trasa?"
a: "Jak říká jeden náš kolega „Jednou za čas je potřeba vypustit rybník a pořádně ho vyčistit.“ A my jsme ten rybník měli celkem zanesenej. Produkty přicházely a odcházely, jejich legacy zůstávalo, a těžko se nám dařilo mezi nimi manévrovat tak, aby zákazník dobře pochopil jejich propojenost a přínos."
link: "asdfaasd"
-
q: "Where do babies come from?"
a: "sdfg"
link: "asdffffa"
-
q: "How much salt is in the ocean?"
a: "Pud sebezáchovy a mírná panika donutila leaderku projektu vyžádat si menší tým, který s mapou pomůže. Zároveň jsme si taky řekli, že tým se bude minimálně na polovinu své kapacity věnovat výhradně customer journey. Tohle je důležité. Dejte tomu focus, kapacity. Jinak se vám to rozplizne."
link: "aasdfsdfa"
-
q: "Why does it rain?"
a: "ag"
link: "asdfaz"
quote: "Ja keď sa teraz obzriem späť, zdá sa mi, že ČaVelo trvalo akosi dlhšie, tie dni boli také dlhé a plné nových úžasných zážitkov. Boli to pre mňa jedni z najkrajších dní tohto leta :)"
author: "Kaja"
whoisit: "účastníčka ČaVelo! 2019"
\ No newline at end of file
-
name: Erika
bio:
- "asdf"
photo: teammember-placeholder.jpg
-
name: Martin
bio:
- "Vášnivý cyklista, do práce aj do kopca :) Keďže je z Bratislavy, pravidelne vymetá rakúske cyklocesty a bratislavský lesopark. Keď čas dovolí, rád navštívi okolité bajk parky a nepohrdne ani viacdňovým cyklo výletom.
Povolaním IT geek, vo voľnom čase sa venuje bratislavským cyklo komunitám.
V Plusku je od roku 2016. Za ten čas spoluorganizoval horo akcie a splavy."
photo: teammember-placeholder.jpg
-
name: Šárka
bio:
- "Ako jediná nemá kolesá dve, ale rovno štyri. Copywriterka na voľnej nohe sa totiž podujala na dvojrolu - okrem šoférovania podporného vozidla, ktoré vie v prípade potreby operatívne pomôcť v neplánovaných situáciách je zároveň hlavou kuchyne. Počas prvého ročníka sa zaslúžila o dočasnú zmenu názvu akcie na ŽraVelo."
photo: teammember-placeholder.jpg
-
name: Cyril
bio:
- "Štvornohý člen tímu robí počas dňa podporu podpornému vozidlu a vo chvíľach voľna poskytuje svoje terapeutické uši na škrabkamie unaveným cyklistom. Ako jediný bol proti bezmäsitej strave na akcii."
photo: teammember-placeholder.jpg
---
bodyclass: page
bodyclass: page contrast-header
imagename: Jednotky 2018-176.jpg
css-modifyer: static
main-title: Vzorova akcia
main-subtitle:
main-subtitle: Krajinou na dvoch kolesach
hero-introtext:
hero-cta:
hero-cta-link:
cta-text:
- Našou špecialitou sú zážitkové akcie, kurzy a programy
cta-action-text: Pozri sa čo chystáme
cta-action-link: /nase-akcie-pre-verejnost/
---
{{> hero this}}
{{> section-team}}
{{>section-photogrid}}
{{>section-faq}}
{{>section-quote}}
{{>section-contact_person}}
......@@ -58,7 +58,7 @@ events:
<li class="eventbox eventbox--{{class}}">
<a href="{{link}}" class="eventbox__img"><img src="{{../root}}assets/img/{{image}}" alt=""></a>
<div class="eventbox__content">
<h3 class="eventbox__title">{{title}}</h3>
<h3 class="eventbox__title"><a href="{{link}}">{{title}}</a></h3>
<ul class="eventbox__dates">
{{#each dates}}
<li class="eventbox__date">{{this}}</li>
......
---
bodyclass: page
bodyclass: page contrast-header
imagename: Jednotky 2018-1.jpg
css-modifyer: static
main-title: Školenie inštruktorov
......
<section class="section">
<div class="grid-container">
<div class="businesscard">
<div class="businesscard__photo">
<img src="/assets/img/teammember-placeholder.jpg" alt="Fotografia kontaktnej osoby">
</div>
<div class="businesscard__content">
<h4 class="businesscard__name">Martin Mojzeš</h4>
<h5 class="businesscard__whoisit">kontakt s verejnosťou</h5>
<a href="tel:00421905123456" class="businesscard__contact" title="Zavolať">+421 905 123 456</a>
<a href="mailto:ada@plusko.net" class="businesscard__contact" title="Napísať">ada@plusko.net</a>
</div>
</div>
</div>
</section>
\ No newline at end of file
<section class="section ">
<div class="grid-container">
<ul class="accordion" data-accordion data-allow-all-closed="true" data-deep-link="true">
{{#each faq}}
<li class="accordion-item" data-accordion-item>
<a href="#otazka_{{link}}" class="accordion-title">{{this.q}}</a> {{!-- TODO add index to anchor like otazka_01 --}}
<!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
<div class="accordion-content" data-tab-content>
{{this.a}}
</div>
</li>
{{/each}}
<!-- ... -->
</ul>
</div>
</section>
\ No newline at end of file
......@@ -2,23 +2,23 @@
<div class="photogrid">
<div class="photogrid__main">
<div class="photogrid__image">
<img src="{{../root}}assets/img/photogrid/photogrid01.png" alt="">
<img src="/assets/img/photogrid/photogrid01.png" alt="">
<div class="photogrid__caption"><p>Optional photo caption</p></div>
</div>
</div>
<div class="photogrid__secondary">
<div class="photogrid__sidebyside">
<div class="photogrid__image">
<img src="{{../root}}assets/img/photogrid/photogrid02.png" alt="">
<img src="/assets/img/photogrid/photogrid02.png" alt="">
</div>
<div class="photogrid__image">
<img src="{{../root}}assets/img/photogrid/photogrid03.png" alt="">
<img src="/assets/img/photogrid/photogrid03.png" alt="">
<div class="photogrid__caption"><p>Optional photo caption</p></div>
</div>
</div>
<div class="photogrid__wide">
<div class="photogrid__image">
<img src="{{../root}}assets/img/photogrid/photogrid04.png" alt="">
<img src="/assets/img/photogrid/photogrid04.png" alt="">
</div>
</div>
</div>
......
<section class="section section-quote">
<div class="grid-container">
<blockquote class="blockquote">
<p>
{{quote.quote}}
</p>
<footer>&mdash;{{quote.author}}, <cite>{{quote.whoisit}}</cite></footer>
</blockquote>
</div>
</section>
\ No newline at end of file
<section class="section">
<div class="grid-container">
<ul class="teammembers">
{{#each teammembers as |member|}}
<li class="teammembers__item">
<img src="/assets/img/{{member.photo}}" class="teammembers__image" alt="Fotka {{member.name}}">
<h4 class="teammembers__name">{{member.name}}</h4>
<div class="teammembers__content js-teammember-content">
{{#each member.bio as |paragraph|}}
<p class="teammembers__bio">
{{paragraph}}
</p>
{{/each}}
</div>
<a href="#" class="teammembers__readmore teammembers__readmore--hidden js-teammember-readmore">čítať viac</a>
</li>
{{/each}}
</ul>
</div>
</section>
\ No newline at end of file