...
 
Commits (3)
// Foundation for Sites Settings
// -----------------------------
//
// Table of Contents:
//
// 1. Global
// 2. Breakpoints
// 3. The Grid
// 4. Base Typography
// 5. Typography Helpers
// 6. Abide
// 7. Accordion
// 8. Accordion Menu
// 9. Badge
// 10. Breadcrumbs
// 11. Button
// 12. Button Group
// 13. Callout
// 14. Card
// 15. Close Button
// 16. Drilldown
// 17. Dropdown
// 18. Dropdown Menu
// 19. Flexbox Utilities
// 20. Forms
// 21. Label
// 22. Media Object
// 23. Menu
// 24. Meter
// 25. Off-canvas
// 26. Orbit
// 27. Pagination
// 28. Progress Bar
// 29. Prototype Arrow
// 30. Prototype Border-Box
// 31. Prototype Border-None
// 32. Prototype Bordered
// 33. Prototype Display
// 34. Prototype Font-Styling
// 35. Prototype List-Style-Type
// 36. Prototype Overflow
// 37. Prototype Position
// 38. Prototype Rounded
// 39. Prototype Separator
// 40. Prototype Shadow
// 41. Prototype Sizing
// 42. Prototype Spacing
// 43. Prototype Text-Decoration
// 44. Prototype Text-Transformation
// 45. Prototype Text-Utilities
// 46. Responsive Embed
// 47. Reveal
// 48. Slider
// 49. Switch
// 50. Table
// 51. Tabs
// 52. Thumbnail
// 53. Title Bar
// 54. Tooltip
// 55. Top Bar
// 56. Xy Grid
@import 'util/util';
......@@ -94,7 +35,7 @@ $global-padding: 1rem;
$global-position: 1rem;
$global-weight-normal: normal;
$global-weight-bold: 800; //extra bold
$global-radius: 0;
$global-radius: 50px;
$global-menu-padding: 0.7rem 1rem;
$global-menu-nested-margin: 1rem;
$global-text-direction: ltr;
......@@ -143,7 +84,7 @@ $block-grid-max: 8;
// 4. Base Typography
// ------------------
$header-font-family: $body-font-family;
$header-font-family: 'Baloo', cursive;
$header-font-weight: $global-weight-bold;
$header-font-style: normal;
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
......@@ -152,15 +93,23 @@ $header-lineheight: 1.4;
$header-margin-bottom: 0.5rem;
$header-styles: (
small: (
'h1': ('font-size': 24),
'h2': ('font-size': 20),
'h1': ('font-size': 40),
'h2': ('font-size': 30),
'h3': ('font-size': 19),
'h4': ('font-size': 18),
'h5': ('font-size': 17),
'h6': ('font-size': 16),
),
medium: (
'h1': ('font-size': 48),
'h1': ('font-size': 50),
'h2': ('font-size': 40),
'h3': ('font-size': 31),
'h4': ('font-size': 25),
'h5': ('font-size': 20),
'h6': ('font-size': 16),
),
large: (
'h1': ('font-size': 80),
'h2': ('font-size': 40),
'h3': ('font-size': 31),
'h4': ('font-size': 25),
......@@ -297,9 +246,9 @@ $breadcrumbs-item-separator-color: $medium-gray;
// 11. Button
// ----------
$button-font-family: inherit;
$button-font-family: $header-font-family;
$button-font-weight: null;
$button-padding: 0.85em 1em;
$button-padding: 0.85em 3em;
$button-margin: 0 0 $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
......@@ -312,7 +261,7 @@ $button-hollow-border-width: 1px;
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
default: 1rem,
large: 1.25rem,
);
$button-palette: $foundation-palette;
......
.button {
min-width: rem-calc( 230 );
}
\ No newline at end of file
.cta-section {
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;
&__button {
margin-top: rem-calc( 30 );
background-color: $white;
color: $c-plusko-orange;
}
@include breakpoint( medium ) {
font-size: rem-calc( 31 ); //TODO exactly size of header 3
p {
max-width: 50%;
margin: 0 auto;
}
}
}
\ No newline at end of file
.eventbox {
background-color: $c-plusko-green;
margin-bottom: rem-calc( 32 );
color: #fff;
&:nth-child( 4n+2 ),
&:nth-child( 4n+3 ) {
background-color: $c-plusko-orange;
&__more {
color: $c-plusko-orange;
}
}
&__img {
display: inline-block;
margin-bottom: rem-calc( 16 );
}
&__content {
padding: rem-calc( 0 15 30 );
}
&__title {
$sizes-map: map-get( $header-styles, 'small');
$property: map-get( $sizes-map, 'h1' );
$size: map-get( $property, 'font-size' );
font-size: rem-calc( $size ) ;
}
&__dates {
@include reset-list();
}
&__more {
background-color: $white;
color: $c-plusko-green;
}
@include breakpoint( medium ) {
flex: 0 1 calc( 50% - 30px );
margin-right: rem-calc( 15 );
&:nth-child( 2n+2 ) {
margin-left: rem-calc( 15 );
margin-right: 0;
}
&__content {
padding: rem-calc( 0 40 50 );
}
&__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;
}
}
}
}
\ No newline at end of file
.events {
@include reset-list();
@include breakpoint( medium ) {
display: flex;
flex-flow: row wrap;
}
}
\ No newline at end of file
.header {
@include xy-grid-container();
z-index: 2; //to be above hero image content
&__logo {
display: none;
......@@ -10,7 +11,7 @@
}
}
.title-bar {
.title-bar { //holder of everything - logo, menu, social links
justify-content: space-between;
align-items: center;
......@@ -27,6 +28,17 @@
}
}
.top-bar { //holder of menu
background-color: rgba(255, 255, 255, 0.8);
}
.home &,
.page & { //header should overlap hero picture
position: absolute;
left: 0;
right: 0;
}
@include breakpoint( medium ) {
margin-top: rem-calc( 50 );
&__logo {
......@@ -40,6 +52,7 @@
.top-bar {
align-items: stretch;
background-color: transparent;
}
.top-bar-right {
......
/**
There are three variants of hero section:
1. Homepage - title + introtext (both in H1 tag), header with logo and menu overlays the image. Choosing the right image is a must.
2. Static page - title and optional subtitle, again care must be given to image choice for good contrast
TODO - make alternative menu colors and logo image for dark bg
3. Event - Here the title and subtitle is separated into H1 and H2 tags respectively - unlike page/homepage,
here it actually means two information - name of event and short description
**/
.hero {
min-height: 90vh;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
&__content {
text-align: center;
color: $white;
font-family: $header-font-family;
padding: rem-calc( 0 25 );
position: relative;
z-index: 1;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
&::after {
content: '';
background-color: $c-plusko-green;
width: 80%;
height: 85%;
position: absolute;
top: rem-calc( -10 );
left: 50%;
transform: translateX(-50%) rotate(-5deg);
z-index: -1;
opacity: 0.8;
}
}
&__title {
}
&__introtext {
font-size: rem-calc( 20 );
}
&__fake-subtitle {
display: block;
font-size: rem-calc( 30 );
}
@include breakpoint( medium ) {
&__content {
max-width: 90%;
margin-top: rem-calc( 120 );
&::after {
width: 75%;
height: 95%;
top: rem-calc( -10 );
}
}
&__introtext {
max-width: 70%;
}
}
@include breakpoint( large ) {
min-height: 95vh;
&__content {
max-width: 55%;
&::after {
width: 55%;
}
}
&__introtext {
max-width: 60%;
}
}
&--static &__content {
&::after {
width: 120%;
}
}
}
\ No newline at end of file
.main-nav {
font-family: 'Baloo', cursive;
font-family: $header-font-family;
font-size: rem-calc( 24 );
a {
......
.section {
padding: rem-calc( 50 0 );
@include breakpoint( medium ) {
padding: rem-calc( 80 0 );
}
}
\ No newline at end of file
.site-content {
h2 {
color: $c-plusko-green;
text-align: center;
}
}
\ No newline at end of file
......@@ -7,10 +7,10 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
<link rel="stylesheet" href="{{root}}assets/css/app.css?ver=0.0.2">
<link href="https://fonts.googleapis.com/css?family=Baloo|Montserrat:400,800&display=swap&subset=latin-ext" rel="stylesheet">
</head>
<body>
<body class="{{bodyclass}}">
{{> header}}
......
---
bodyclass: page
imagename: Jednotky 2018-176.jpg
css-modifyer: static
main-title: Vzorova akcia
main-subtitle:
hero-introtext:
hero-cta:
hero-cta-link:
---
{{> hero this}}
---
bodyclass: home
imagename: splavegidio-145.jpg
css-modifyer: main
main-title: ... o zážitok viac
main-subtitle:
hero-introtext: V Plusku nám ide predovšetkým o mladých ľudí, o rozvoj ich potenciálu, sebapoznania, vzbudenia záujmu a zvedavosti o okolitý svet a jeho pozitívne pretváranie.
hero-cta: Viac o nás
hero-cta-link: /o-nas/
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}}
{{> cta-section this}}
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
......
---
bodyclass: page
imagename: DSC_0830 (1).jpg
css-modifyer: static
main-title: Naše akcie
main-subtitle: pre verejnosť
hero-introtext:
hero-cta:
hero-cta-link:
events:
-
image: splavegidio-145.jpg
title: ČaVelo
age: 18+
dates:
- 18. 8. 2019 – 25. 8. 2019
description: Krajinou na dvoch kolesach
link: /akcie/vzorova-akcia/
-
image: DSC_0830 (1).jpg
title: Banket 2018 - 16. narodeniny Pluska
age: &infin;
dates:
- 13. 01. 2018
description: V januári tradične oslavujeme narodenie Pluska, ktoré nám už dospelo do stredoškolského veku :)
link: /akcie/vzorova-akcia/
-
image: Jednotky 2018-176.jpg
title: Kinderká (detský tábor)
age: 7-14
dates:
- 04. 08. 2019 – 10. 08. 2019
description: viac info čoskoro
link: /akcie/vzorova-akcia/
-
image: Jednotky 2018-1.jpg
title: Zimný kurz Cestou Zimy 2020
age: 18+
dates:
- 08.02.2020 - 15.02.2020
description: Zažiješ si mráz až na kosť a overíš si, že telo sa so zimou vysporiada po svojom. A možno tak ako my, odhalíš svojské čaro zimy aj cez skrehnuté prsty, studené nohy či zmrznutý spacák ;)
link: /akcie/vzorova-akcia/
---
{{> hero this}}
<main class="site-content" role="main">
<section class="section section--title">
<div class="grid-container">
<h2 class="entry-title">Pripravujeme</h2>
</div>
</section>
<section class="section">
<div class="grid-container">
<ul class="events">
{{#each 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>
<ul class="eventbox__dates">
{{#each dates}}
<li class="eventbox__date">{{this}}</li>
{{/each}}
</ul>
<p class="eventbox__description">{{description}}</p>
<a href="{{link}}" class="button eventbox__more">viac</a>
</div>
</li>
{{/each}}
</ul>
</div>
</section>
</main>
---
bodyclass: page
imagename: Jednotky 2018-176.jpg
css-modifyer: static
main-title: O Plusku
main-subtitle:
hero-introtext:
hero-cta:
hero-cta-link:
---
{{> hero this}}
---
bodyclass: page
imagename: Jednotky 2018-1.jpg
css-modifyer: static
main-title: Školenie inštruktorov
main-subtitle: ...alias akreditované školenie inštruktorov zážitkovej pedagogiky
hero-introtext:
hero-cta:
hero-cta-link:
---
{{> hero this}}
\ No newline at end of file
<section class="section cta-section">
<div class="grid-container">
{{#each cta-text}}
<p>{{this}}</p>
{{/each}}
<a href="{{cta-action-link}}" class="button cta-section__button">{{cta-action-text}}</a>
</div>
</section>
\ No newline at end of file
......@@ -16,17 +16,17 @@
<li>
<a href="#">Čo robíme</a>
<ul class="vertical menu">
<li><a href="#">Akcie pre verejnosť</a></li>
<li><a href="#">Školenie inštruktorov</a></li>
<li><a href="/nase-akcie-pre-verejnost/">Akcie pre verejnosť</a></li>
<li><a href="/skolenie-instruktorov/">Školenie inštruktorov</a></li>
<li><a href="#">Akcie na kľúč</a></li>
<li><a href="#">Adaptačné kurzy</a></li>
<li><a href="#">DofE</a></li>
</ul>
</li>
<li>
<a href="#">O nás</a>
<a href="/o-nas/">O nás</a>
<ul class="vertical menu">
<li><a href="#">O Plusku</a></li>
<li><a href="/o-nas/">O Plusku</a></li>
<li><a href="#">Podporte nás</a></li>
<li><a href="#">Dve peercentá</a></li>
<li><a href="#">Pomôžeme, požičiame</a></li>
......
<section class="hero hero--{{css-modifyer}}" style="background-image: url('{{root}}assets/img/{{imagename}}');">
<div class="hero__content">
<h1 class="hero__title">{{main-title}}
{{#if main-subtitle}}
<span class="hero__fake-subtitle">{{main-subtitle}}</span>
{{/if}}
</h1>
{{#if hero-introtext}}
<p class="hero__introtext">
{{hero-introtext}}
</p>
{{/if}}
{{#if hero-cta}}
<a href="{{hero-cta-link}}" class="button hero__cta">{{hero-cta}}</a>
{{/if}}
</div>
</section>
\ No newline at end of file