...
 
Commits (7)
.screen-reader-text {
display: none;
}
\ No newline at end of file
......@@ -2,4 +2,18 @@
list-style-type: none;
padding: 0;
margin: 0;
}
@mixin plusko-image-hover() {
position: relative;
top: rem-calc( -10 );
left: rem-calc( -15 );
transition: top 0.2s, left 0.2s;
&:hover {
top: 0;
left: 0;
transition: top 0.2s, left 0.2s;
}
}
\ No newline at end of file
......@@ -11,12 +11,14 @@ $c-plusko-orange: #e6a400;
$c-plusko-gray: #424242;
$c-plusko-bodyfont: #4c4c4c;
$plusko-input-radius: rem-calc( 5 );
$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
primary: $c-plusko-green,
secondary: #767676,
secondary: #fff,
success: #3adb76,
warning: #ffae00,
alert: #cc4b37,
......@@ -403,7 +405,7 @@ $form-label-font-weight: $global-weight-normal;
$form-label-line-height: 1.8;
$select-background: $white;
$select-triangle-color: $dark-gray;
$select-radius: $global-radius;
$select-radius: $plusko-input-radius;
$input-color: $black;
$input-placeholder-color: $medium-gray;
$input-font-family: inherit;
......@@ -413,7 +415,7 @@ $input-line-height: $global-lineheight;
$input-background: $white;
$input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray;
$input-border: 1px solid $white;
$input-border-focus: 1px solid $dark-gray;
$input-padding: $form-spacing / 2;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
......@@ -421,7 +423,7 @@ $input-shadow-focus: 0 0 5px $medium-gray;
$input-cursor-disabled: not-allowed;
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
$input-number-spinners: true;
$input-radius: $global-radius;
$input-radius: $plusko-input-radius;
$form-button-radius: $global-radius;
// 21. Label
......
......@@ -64,6 +64,7 @@
@include motion-ui-animations;
@import 'mixins';
@import 'common';
// components
@import 'components/*';
......@@ -28,15 +28,22 @@
$property: map-get( $sizes-map, 'h1' );
$size: map-get( $property, 'font-size' );
font-size: rem-calc( $size ) ;
line-height: 1;
margin-bottom: 0;
}
&__dates {
@include reset-list();
font-family: $header-font-family;
font-size: rem-calc( 36 );
line-height: rem-calc( 48 );
opacity: 0.5;
}
&__more {
background-color: $white;
color: $c-plusko-green;
margin-bottom: 0;
}
......@@ -55,16 +62,7 @@
}
&__img {
position: relative;
top: rem-calc( -10 );
left: rem-calc( -15 );
transition: top 0.2s, left 0.2s;
&:hover {
top: 0;
left: 0;
transition: top 0.2s, left 0.2s;
}
@include plusko-image-hover();
}
}
}
\ No newline at end of file
.nav-links {
display: flex;
justify-content: center;
margin: rem-calc( 32 0 );
.page-numbers {
margin: rem-calc( 0 16 );
border-radius: 0;
padding: rem-calc( 10 20 );
}
}
\ No newline at end of file
.news {
&-item {
display: flex;
flex-flow: column;
margin: rem-calc( 0 40 20);
&__imagepart {
margin-bottom: rem-calc( 20 );
}
&__contentpart {
}
&__img {
display: inline-block;
background-color: $c-plusko-green;
img {
@include plusko-image-hover();
}
}
&__meta {
color: #c9c9c9;
display: inline-block;
margin-bottom: 16px;
}
&__excerpt {
}
@include breakpoint( medium ) {
@include xy-grid();
margin: 0;
margin-bottom: rem-calc( 40 );
&__title {
font-size: rem-calc( 40 );
}
&__imagepart {
@include xy-cell( 6 );
order: 1;
}
&__contentpart {
@include xy-cell( 6 );
order: 2;
}
&:nth-of-type( 2n ) &__imagepart {
order: 3;
}
&:nth-of-type( 2n ) &__contentpart {
}
}
@include breakpoint( large ) {
margin-bottom: rem-calc( 60 );
&__imagepart {
@include xy-cell( 4 );
}
&__contentpart {
@include xy-cell( 7 );
@include xy-cell-offset( 1 )
}
&:nth-of-type( 2n ) &__imagepart {
@include xy-cell-offset(1);
}
&:nth-of-type( 2n ) &__contentpart {
@include xy-cell-offset(0);
}
}
}
}
\ No newline at end of file
.newsletter {
background-color: $c-plusko-green;
text-align: center;
&,
& .section__title,
& label {
color: $white;
}
}
\ No newline at end of file
.partners {
@include reset-list();
@include xy-grid();
@include xy-grid-layout( 4, '.partners__item' );
justify-content: center;
&__item {
margin-bottom: rem-calc( 20 );
}
@include breakpoint( medium ) {
@include xy-grid-layout( 5, '.partners__item' );
}
@include breakpoint( large ) {
@include xy-grid-layout( 6, '.partners__item' );
}
}
\ No newline at end of file
.photogrid {
&__secondary {
display: flex;
flex-flow: column;
}
&__sidebyside {
display: flex;
}
&__image {
position: relative;
}
&__caption {
position: absolute;
color: white;
bottom: 0;
right: 0;
left: 0;
text-align: center;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 10%,rgba(230,230,230,0) 100%,rgba(255,255,255,0) 100%);
padding: rem-calc( 0 8 );
p {
margin-top: rem-calc( 16 );
font-size: rem-calc( 14 );
}
}
@include breakpoint( medium ) {
display: flex;
}
}
\ No newline at end of file
.section {
padding: rem-calc( 50 0 );
padding: rem-calc( 50 50 );
&--notopspace {
padding-top: 0;
}
&--nospace {
padding: 0;
}
&__title {
margin-bottom: rem-calc( 30 );
}
@include breakpoint( medium ) {
padding: rem-calc( 80 0 );
&--nospace {
padding: 0;
}
&--title {
padding-bottom: 0;
}
&__title {
margin-bottom: rem-calc( 60 );
}
}
}
\ No newline at end of file
......@@ -15,160 +15,67 @@ cta-action-link: /nase-akcie-pre-verejnost/
{{> hero this}}
{{> cta-section this}}
<main class="site-content" role="main">
{{> section-cta this}}
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<h1>Welcome to Foundation, madafaka</h1>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<div class="callout">
<h3>We&rsquo;re stoked you want to try Foundation! </h3>
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
<p>Once you've exhausted the fun in this document, you should check out:</p>
<div class="grid-x grid-padding-x">
<div class="large-4 medium-4 cell">
<p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
</div>
<div class="large-4 medium-4 cell">
<p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
</div>
<div class="large-4 medium-4 cell">
<p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
</div>
<section class="section section--notopspace">
<div class="grid-container">
<h2 class="section__title entry-title">Čo sa u nás deje</h2>
<div class="news">
<div class="news__item news-item">
<div class="news-item__imagepart">
<a href="" class="news-item__img"><img src="{{../root}}assets/img/20160227_PLUSKO-valne(byPospo)-0314@2x.png" alt=""></a>
</div>
<div class="grid-x grid-padding-x">
<div class="large-4 medium-4 medium-push-2 cell">
<p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
</div>
<div class="large-4 medium-4 medium-pull-2 cell">
<p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
<div class="news-item__contentpart">
<h1 class="news-item__title">Prijímame prihlášky nových Dofákov (DofE)</h1>
<span class="post-meta news-item__meta">Pred 2 dňami</span>
<p class="news-item__excerpt">
Aj tento rok sa môžu mladí ľudia, ktorí chcú na sebe pracovať a neboja sa výziev, zapojiť cez Plusko do programu DofE-Medzinárodná cena Vojvodu z Edinburghu.
</p>
<a href="" class="button">Viac</a>
</div>
</div>
<div class="news__item news-item">
<div class="news-item__imagepart">
<a href="" class="news-item__img"><img src="{{../root}}assets/img/20160227_PLUSKO-valne(byPospo)-0314@2x.png" alt=""></a>
</div>
<div class="news-item__contentpart">
<h1 class="news-item__title">Posledný februárový víkend sa uskutoční Valné 2019</h1>
<span class="post-meta news-item__meta">Pred 2 dňami</span>
<p class="news-item__excerpt">
Aj tento rok sa môžu mladí ľudia, ktorí chcú na sebe pracovať a neboja sa výziev, zapojiť cez Plusko do programu DofE-Medzinárodná cena Vojvodu z Edinburghu.
</p>
<a href="" class="button">Viac</a>
</div>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-8 medium-8 cell">
<h5>Here&rsquo;s your basic grid:</h5>
<!-- Grid Example -->
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<div class="primary callout">
<p><strong>This is a twelve cell section in a grid-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-6 medium-6 cell">
<div class="primary callout">
<p>Six cell</p>
</div>
</div>
<div class="large-6 medium-6 cell">
<div class="primary callout">
<p>Six cell</p>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-4 medium-4 small-4 cell">
<div class="primary callout">
<p>Four cell</p>
</div>
</div>
<div class="large-4 medium-4 small-4 cell">
<div class="primary callout">
<p>Four cell</p>
</div>
</div>
<div class="large-4 medium-4 small-4 cell">
<div class="primary callout">
<p>Four cell</p>
</div>
</div>
</div>
</section>
<hr />
{{> section-photogrid }}
<h5>We bet you&rsquo;ll need a form somewhere:</h5>
<form>
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<label>Input Label</label>
<input type="text" placeholder="large-12.cell" />
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-4 medium-4 cell">
<label>Input Label</label>
<input type="text" placeholder="large-4.cell" />
</div>
<div class="large-4 medium-4 cell">
<label>Input Label</label>
<input type="text" placeholder="large-4.cell" />
</div>
<div class="large-4 medium-4 cell">
<div class="grid-x">
<label>Input Label</label>
<div class="input-group">
<input type="text" placeholder="small-9.cell" class="input-group-field" />
<span class="input-group-label">.com</span>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<label>Select Box</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-6 medium-6 cell">
<label>Choose Your Favorite</label>
<input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
</div>
<div class="large-6 medium-6 cell">
<label>Check these out</label>
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<label>Textarea Label</label>
<textarea placeholder="small-12.cell"></textarea>
</div>
</div>
</form>
</div>
{{> section-cta this}}
<div class="large-4 medium-4 cell">
<h5>Try one of these buttons:</h5>
<p><a href="#" class="button">Simple Button</a><br/>
<a href="#" class="success button">Success Btn</a><br/>
<a href="#" class="alert button">Alert Btn</a><br/>
<a href="#" class="secondary button">Secondary Btn</a></p>
<div class="callout">
<h5>So many components, girl!</h5>
<p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
<a href="https://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a>
</div>
</div>
<section class="section">
<div class="grid-container">
<h2 class="section__title entry-title">Naši kamoši</h2>
<ul class="partners">
<li class="partners__item"><a href="" class="partners__href"><img src="{{../root}}assets/img/logo-placeholder.png" alt="logo"></a></li>
<li class="partners__item"><a href="" class="partners__href"><img src="{{../root}}assets/img/logo-placeholder.png" alt="logo"></a></li>
<li class="partners__item"><a href="" class="partners__href"><img src="{{../root}}assets/img/logo-placeholder.png" alt="logo"></a></li>
<li class="partners__item"><a href="" class="partners__href"><img src="{{../root}}assets/img/logo-placeholder.png" alt="logo"></a></li>
<li class="partners__item"><a href="" class="partners__href"><img src="{{../root}}assets/img/logo-placeholder.png" alt="logo"></a></li>
</ul>
</div>
</div>
</section>
{{> section-newsletter }}
</main>
......@@ -71,6 +71,21 @@ events:
</li>
{{/each}}
</ul>
<nav class="navigation pagination" role="navigation" aria-label="Posts">
<h2 class="screen-reader-text">Posts navigation</h2>
<div class="nav-links">
<a class="prev page-numbers" href="https://gigster.com/thought-leadership/">&larr; Predchádzajúce</a>
<a class="page-numbers" href="https://gigster.com/thought-leadership/">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="https://gigster.com/thought-leadership/page/3/">3</a>
<a class="next page-numbers" href="https://gigster.com/thought-leadership/page/3/">Ďalšie &rarr;</a>
</div>
</nav>
</div>
</section>
<section class="section">
<div class="grid-container text-center">
<a href="#" class="button large">Archív</a>
</div>
</section>
</main>
<section class="section newsletter">
<div class="grid-container">
<h2 class="section__title">
Posielame málo, zato výživne
</h2>
<p>
Možno aj ty si radšej niekde vonku ako za klávesnicou... Máme to podobne :)
Newsletter neposielame často, ale zato doňho narveme
všetko, čo by nemalo ujsť tvojej pozornosti!
</p>
<form action="" class="mailchimp">
<input type="text">
<label for="">
<input type="checkbox"> Verím vám a súhlasím so spracovaním mojich údajov na účely popísané v <a href="">Ochrane osobných údajov</a>
</label>
<input type="submit" class="button secondary" value="odoslat">
</form>
</div>
</section>
\ No newline at end of file
<section class="section section--nospace">
<div class="photogrid">
<div class="photogrid__main">
<div class="photogrid__image">
<img src="{{../root}}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="">
</div>
<div class="photogrid__image">
<img src="{{../root}}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="">
</div>
</div>
</div>
</div>
</section>
\ No newline at end of file