...
 
Commits (3)
......@@ -91,6 +91,7 @@ function sass() {
].filter(Boolean);
return gulp.src('src/assets/scss/app.scss')
.pipe($.sassGlob())
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
......
......@@ -5087,8 +5087,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
......@@ -5109,14 +5108,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -5131,20 +5128,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -5261,8 +5255,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -5274,7 +5267,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -5289,7 +5281,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -5297,14 +5288,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -5323,7 +5312,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -5404,8 +5392,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -5417,7 +5404,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -5503,8 +5489,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -5540,7 +5525,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -5560,7 +5544,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -5604,14 +5587,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
......@@ -6310,6 +6291,35 @@
}
}
},
"gulp-sass-glob": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/gulp-sass-glob/-/gulp-sass-glob-1.1.0.tgz",
"integrity": "sha512-BYDCjb68iMAxLGt2uuw7jaZ51cnWxAbQ4EtFDOOsMXOc0Ul+SFW1iiMOSI/efpO27ycmX9U8Eb4Clerww5Tf5Q==",
"dev": true,
"requires": {
"glob": "^7.1.4",
"minimatch": "^3.0.4",
"slash": "^3.0.0",
"through2": "^3.0.1"
},
"dependencies": {
"slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
"dev": true
},
"through2": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz",
"integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==",
"dev": true,
"requires": {
"readable-stream": "2 || 3"
}
}
}
},
"gulp-sourcemaps": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/gulp-sourcemaps/-/gulp-sourcemaps-2.6.4.tgz",
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g>
<g>
<path fill="#5D5D5D" d="M165.965-0.001H34.204c-18.894,0-34.208,15.304-34.208,34.179v131.656
c0,18.878,15.314,34.178,34.208,34.178h72.21v-76.791H80.553V93.292h25.861V71.223c0-25.614,15.656-39.559,38.521-39.559
c10.955,0,20.367,0.815,23.112,1.177v26.768l-15.858,0.008c-12.438,0-14.842,5.901-14.842,14.568v19.107h29.657l-3.86,29.927
h-25.797v76.791h28.617c18.893,0,34.206-15.299,34.206-34.177V34.178C200.171,15.303,184.855-0.001,165.965-0.001z"/>
</g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g>
<g>
<path fill="#FFFFFF" d="M165.965-0.001H34.204c-18.894,0-34.208,15.304-34.208,34.179v131.656
c0,18.878,15.314,34.177,34.208,34.177h72.21V123.22H80.553V93.292h25.861V71.223c0-25.614,15.657-39.559,38.521-39.559
c10.956,0,20.368,0.815,23.113,1.177v26.768l-15.859,0.008c-12.438,0-14.842,5.901-14.842,14.568v19.107h29.658l-3.861,29.927
h-25.797v76.791h28.618c18.892,0,34.206-15.299,34.206-34.177V34.178C200.171,15.303,184.856-0.001,165.965-0.001z"/>
</g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<path fill="#5D5D5D" d="M138.42,0H61.729C27.692,0,0,29.005,0,64.656v70.787c0,35.653,27.692,64.661,61.729,64.661h76.691
c34.031,0,61.727-29.008,61.727-64.661V64.656C200.146,29.005,172.451,0,138.42,0z M186.426,135.442
c0,27.732-21.536,50.292-48.006,50.292H61.729c-26.473,0-48.009-22.56-48.009-50.292V64.656c0-27.729,21.537-50.287,48.009-50.287
h76.691c26.47,0,48.006,22.558,48.006,50.287V135.442z"/>
<path fill="#5D5D5D" d="M154.181,32.322c-6.298,0-11.404,5.347-11.404,11.945c0,6.592,5.106,11.939,11.404,11.939
c6.294,0,11.398-5.348,11.398-11.939C165.579,37.669,160.475,32.322,154.181,32.322z"/>
<path fill="#5D5D5D" d="M100.075,44.498c-30.301,0-54.946,23.814-54.946,55.553c0,31.738,24.645,55.558,54.946,55.558
c30.295,0,54.945-23.82,54.945-55.558C155.021,68.312,130.37,44.498,100.075,44.498z M100.075,141.237
c-22.736,0-41.232-17.372-41.232-41.187c0-23.814,18.496-41.188,41.232-41.188c22.731,0,41.228,17.374,41.228,41.188
C141.303,123.865,122.807,141.237,100.075,141.237z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<path fill="#FFFFFF" d="M138.42,0H61.729C27.692,0,0,29.005,0,64.656v70.787c0,35.653,27.692,64.661,61.729,64.661h76.691
c34.031,0,61.727-29.008,61.727-64.661V64.656C200.146,29.005,172.451,0,138.42,0z M186.426,135.442
c0,27.732-21.536,50.292-48.006,50.292H61.729c-26.473,0-48.009-22.56-48.009-50.292V64.656c0-27.729,21.537-50.287,48.009-50.287
h76.691c26.47,0,48.006,22.558,48.006,50.287V135.442z"/>
<path fill="#FFFFFF" d="M154.181,32.322c-6.298,0-11.404,5.347-11.404,11.945c0,6.592,5.106,11.939,11.404,11.939
c6.294,0,11.398-5.348,11.398-11.939C165.579,37.669,160.475,32.322,154.181,32.322z"/>
<path fill="#FFFFFF" d="M100.075,44.498c-30.301,0-54.946,23.814-54.946,55.553c0,31.738,24.645,55.558,54.946,55.558
c30.295,0,54.945-23.82,54.945-55.558C155.021,68.312,130.37,44.498,100.075,44.498z M100.075,141.237
c-22.736,0-41.232-17.372-41.232-41.187c0-23.814,18.496-41.188,41.232-41.188c22.731,0,41.228,17.374,41.228,41.188
C141.303,123.865,122.807,141.237,100.075,141.237z"/>
</svg>
@mixin reset-list() {
list-style-type: none;
padding: 0;
margin: 0;
}
\ No newline at end of file
......@@ -65,30 +65,35 @@
// 1. Global
// ---------
$c-plusko-green: #91B029;
$c-plusko-orange: #e6a400;
$c-plusko-gray: #424242;
$c-plusko-bodyfont: #4c4c4c;
$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
primary: #1779ba,
primary: $c-plusko-green,
secondary: #767676,
success: #3adb76,
warning: #ffae00,
alert: #cc4b37,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$medium-gray: $c-plusko-gray;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-font-color: $c-plusko-bodyfont;
$body-font-family: 'Montserrat', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
$global-position: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-weight-bold: 800; //extra bold
$global-radius: 0;
$global-menu-padding: 0.7rem 1rem;
$global-menu-nested-margin: 1rem;
......@@ -139,7 +144,7 @@ $block-grid-max: 8;
// ------------------
$header-font-family: $body-font-family;
$header-font-weight: $global-weight-normal;
$header-font-weight: $global-weight-bold;
$header-font-style: normal;
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
$header-color: inherit;
......@@ -409,7 +414,7 @@ $dropdown-sizes: (
// -----------------
$dropdownmenu-arrows: true;
$dropdownmenu-arrow-color: $anchor-color;
$dropdownmenu-arrow-color: $c-plusko-bodyfont;
$dropdownmenu-arrow-size: 6px;
$dropdownmenu-arrow-padding: 1.5rem;
$dropdownmenu-min-width: 200px;
......@@ -418,7 +423,7 @@ $dropdownmenu-submenu-background: $white;
$dropdownmenu-padding: $global-menu-padding;
$dropdownmenu-nested-margin: 0;
$dropdownmenu-submenu-padding: $dropdownmenu-padding;
$dropdownmenu-border: 1px solid $medium-gray;
$dropdownmenu-border: none;//1px solid $medium-gray;
$dropdown-menu-item-color-active: get-color(primary);
$dropdown-menu-item-background-active: transparent;
......@@ -845,11 +850,11 @@ $thumbnail-radius: $global-radius;
// 53. Title Bar
// -------------
$titlebar-background: $black;
$titlebar-color: $white;
$titlebar-padding: 0.5rem;
$titlebar-background: transparent;
$titlebar-color: $body-font-color;
$titlebar-padding: 1rem 0.5rem;
$titlebar-text-font-weight: bold;
$titlebar-icon-color: $white;
$titlebar-icon-color: $black;
$titlebar-icon-color-hover: $medium-gray;
$titlebar-icon-spacing: 0.25rem;
......@@ -872,8 +877,8 @@ $tooltip-radius: $global-radius;
// -----------
$topbar-padding: 0.5rem;
$topbar-background: $light-gray;
$topbar-submenu-background: $topbar-background;
$topbar-background: transparent;
$topbar-submenu-background: rgba(255, 255, 255, 0.8);
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
$topbar-input-width: 200px;
$topbar-unstack-breakpoint: medium;
......
......@@ -62,3 +62,8 @@
// Motion UI
@include motion-ui-transitions;
@include motion-ui-animations;
@import 'mixins';
// components
@import 'components/*';
.footer {
background-color: $c-plusko-gray;
padding: rem-calc( 30 0 20 0 );
color: $white;
&__logo {
max-width: 80%;
margin-bottom: rem-calc( 15 );
}
&__copyright {
font-size: rem-calc( 12 );
text-align: center;
margin: rem-calc( 20 0 );
}
.menu {
flex-flow: column nowrap;
a {
padding-left: 0;
}
}
.widget-title {
margin-top: rem-calc( 40 );
}
@include breakpoint( medium ) {
padding: rem-calc( 80 0 10 0 );
&__logo {
margin-bottom: rem-calc( 25 );
}
.widget-title {
margin-top: rem-calc( 50 );
}
&__copyright {
margin-top: rem-calc( 30 );
}
}
}
.header {
@include xy-grid-container();
&__logo {
display: none;
.title-bar-title & {
display: block;
max-width: rem-calc( 100 );
}
}
.title-bar {
justify-content: space-between;
align-items: center;
.menu-icon {
color: $body-font-color;
margin-left: rem-calc( 16 );
width: rem-calc( 40 );
height: rem-calc( 31 );
&::after {
box-shadow: 0 13px 0 $body-font-color, 0 26px 0 $body-font-color;
height: 5px;
}
}
}
@include breakpoint( medium ) {
margin-top: rem-calc( 50 );
&__logo {
display: block;
img {
max-width: rem-calc( 230 );
}
}
.top-bar {
align-items: stretch;
}
.top-bar-right {
display: flex;
align-items: center;
}
}
}
\ No newline at end of file
.main-nav {
font-family: 'Baloo', cursive;
font-size: rem-calc( 24 );
a {
color: $c-plusko-bodyfont;
&:hover {
color: $c-plusko-green;
}
}
.is-dropdown-submenu {
// border: none;
}
}
\ No newline at end of file
.social-links {
@include reset-list();
display: flex;
flex-flow: row nowrap;
margin: rem-calc( 20 0 );
&__href {
display: block;
width: rem-calc( 40 );
height: rem-calc( 40 );
margin-right: rem-calc( 20 );
background: transparent url( '../img/facebook-white.svg') no-repeat center;
background-size: contain;
&--in {
background-image: url( '../img/instagram-white.svg');
}
}
.header & {
justify-content: center;
&__href {
width: rem-calc( 30 );
height: rem-calc( 30 );
background-image: url( '../img/facebook-grey.svg');
&--in {
background-image: url( '../img/instagram-grey.svg');
}
}
}
@include breakpoint( medium ) {
.header & {
margin-left: rem-calc( 40 );
}
}
}
......@@ -8,12 +8,17 @@
<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 href="https://fonts.googleapis.com/css?family=Baloo|Montserrat:400,800&display=swap&subset=latin-ext" rel="stylesheet">
</head>
<body>
{{> header}}
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}
{{> footer}}
<script src="{{root}}assets/js/app.js"></script>
</body>
</html>
<footer class="footer">
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell small-6 large-4">
<img src="{{root}}assets/img/logo-plusko-dark-bg.png" alt="" class="footer__logo">
<p>
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.
</p>
</div>
<div class="cell small-6 large-3">
<h3 class="widget-title">Čo robíme</h3>
<ul id="menu-footer-menu" class="menu">
<li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-123"><a href="#">Akcie pre verejnosť</a></li>
<li id="menu-item-332" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-332"><a href="#">Školenie</a></li>
<li id="menu-item-167" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-167"><a href="#">Akcie na kľúč</a></li>
<li id="menu-item-165" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-165"><a target="_blank" rel="noopener noreferrer" href="#">adaptačné kurzy</a></li>
<li id="menu-item-166" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-166"><a target="_blank" rel="noopener noreferrer" href="#">Cena vojvodu z Edinburghu</a></li>
</ul>
</div>
<div class="cell small-6 large-3">
<h3 class="widget-title">O nás</h3>
<ul id="menu-footer-menu" class="menu">
<li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-123"><a href="#">O Plusku</a></li>
<li id="menu-item-332" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-332"><a href="#">Podporte nás</a></li>
<li id="menu-item-167" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-167"><a href="#">Dve percentá</a></li>
<li id="menu-item-165" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-165"><a target="_blank" rel="noopener noreferrer" href="#">Pomôžeme, požičiame</a></li>
<li id="menu-item-166" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-166"><a target="_blank" rel="noopener noreferrer" href="#">Plusácky Herník</a></li>
</ul>
</div>
<div class="cell small-6 large-2">
<h3 class="widget-title">&nbsp;</h3>
<ul id="menu-footer-menu" class="menu">
<li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-123"><a href="#">Kontakt</a></li>
<li id="menu-item-332" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-332"><a href="#">Zásady ochrany osobných údajov</a></li>
</ul>
{{> social-links}}
</div>
<div class="cell small-12">
<p class="footer__copyright">
© 2020 MO Plusko
</p>
</div>
</div>
</div>
</footer>
\ No newline at end of file
<header class="header">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<div class="title-bar-title">
<a href="{{root}}" class="header__logo site-logo"><img src="{{root}}assets/img/logo-plusko-light-bg.png" alt="Logo Pluska" title="Na home page"></a>
</div>
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
</div>
<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<a href="{{root}}" class="header__logo site-logo"><img src="{{root}}assets/img/logo-plusko-light-bg.png" alt="Logo Pluska" title="Na home page"></a>
</div>
<div class="top-bar-right">
<!-- custom wp_nav_menu walker needed to add classes to submenu ul: https://wordpress.stackexchange.com/questions/300573/how-do-i-give-class-to-the-dropdown-sub-menu-in-the-wp-nav-menu -->
<ul class="main-nav vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
<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="#">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>
<ul class="vertical menu">
<li><a href="#">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>
<li><a href="#">Herník</a></li>
</ul>
</li>
<li>
<a href="#">Kontakt</a>
</li>
<li>
<a href="#">English</a>
</li>
</ul>
{{> social-links}}
</div>
</div>
</header>
\ No newline at end of file
<ul class="social-links">
<li class="social-links__item"><a href="https://www.facebook.com/plusko.net/" class="social-links__href social-links__href--fb" target="_blank"></a></li>
<li class="social-links__item"><a href="https://www.instagram.com/mo_plusko/" class="social-links__href social-links__href--in" target="_blank"></a></li>
</ul>
\ No newline at end of file