63 sass/partials/buttons.scss → sass/partials/_buttons.scss
View file
@@ -14,7 +14,7 @@ nav a:hover,nav a:active,nav a:focus{}
.nav-tabs{border-top:1px solid $dark-border;}
.nav-tabs-list{margin-top:-1px;text-align:left;}
.nav-tabs-list li{display:inline-block;margin-right:$space;}
.nav-tabs-list li a{padding:$space-half 0;color:$gray-on-dark;font-family:$bariol}
.nav-tabs-list li a{padding:$space-half 0;color:$gray-on-dark;font-family:$bariol-reg}
.nav-tabs-list li a:hover{color:$white}
.nav-tabs-list .active{border:1px solid $blue;border-width:1px 0 0;}
.nav-tabs-list .active a{color:$white}
@@ -27,25 +27,33 @@ nav a:hover,nav a:active,nav a:focus{}
.posts-nav{padding:$space-2 0;}
.prev,.next{}

.btn,.posts-nav a,input.btn{position:relative;display:inline;display:inline-block;padding:0.25rem $space;margin-right:$space-half;border:1px solid transparent;border-radius:3px;
background-color:$green;
font:normal normal 400 #{$size-0}/1.1875 $body-font;color:$white;text-shadow:0 1px rgba(0, 0, 0, 0.1);text-decoration:none;text-transform:none;text-align:center;white-space:nowrap;}
.btn,.posts-nav a,input.btn{position:relative;display:inline;display:inline-block;padding:0.25rem $space;border:1px solid transparent;border-radius:3px;background-color:$green;font:normal normal 400 #{$size-0}/1.1875 $body-font;color:$white;text-shadow:0 1px rgba(0, 0, 0, 0.1);text-decoration:none;text-transform:none;text-align:center;white-space:nowrap;}
.btn:link,.btn:visited{color:$white}

.btn:hover,.btn:focus{background-color:$green-hover;color:$white !important;text-decoration:none;outline:none}
.btn:hover,.btn:focus{background-color:$green-hover;color:$white;text-decoration:none;outline:none}
.btn:focus{border-color:$green-border;}

.btn:link:active{position:relative;transform:translate(1px,1px);}
.btn:link:active{//transform:translate(0,1px);
background:$dark;
}

p .btn,.posts-nav a{vertical-align:top;margin-right:0.05rem}
.centered > .btn{margin-right:0}
.centered > .btn{margin-right:0;
@media #{$m400}{
display:block;
}
}

// NEw code
//.btn ~ .btn,.btn ~ .btn-secondary,.btn-secondary ~ .btn{margin-top:$space;}


.btn-c,.btn-c:link,.posts-nav a,.btn-footer{width:auto;vertical-align:middle}
.posts-nav a,.btn-footer{padding:0.25rem 0.75rem;}
.btn-c,.btn-c:link,.posts-nav a{background-color:$beige;color:$font-semi-dark !important;background-image:none;}
.btn-c:hover,.btn-c:focus,.posts-nav a:hover,.posts-nav a:focus{background-color:$beige-hover;background-image:none;color:$font-dark !important;}
.btn-c:focus,.posts-nav a:focus{border-color:$beige-border;}
.btn-footer{margin-top:-3px}
.btn-footer{margin-top:-3px;margin-right:$space-half;}

.btn-2{background-color:$orange}
.btn-2:hover,.btn-2:focus{background-color:$orange-hover}
@@ -66,17 +74,23 @@ p .btn,.posts-nav a{vertical-align:top;margin-right:0.05rem}
.btn-blue:hover,.btn-blue:focus,input.btn-blue:hover,input.btn-blue:focus{background-color:$blue-hover}
.btn-blue:focus,input.btn-blue:focus{border-color:$blue-border;}

.btn-second{margin-left:$space;
@media #{$m770}{
.btn-fb{background-color:#3b5998;}
.btn-fb:hover,.btn-fb:focus{background-color:#3b5998;border-color:$dark;}

.btn-white{background-color:$white;border-color:transparent;color:$font-dark;}
.btn-white:hover,.btn-white:focus{background-color:$white;border-color:$dark;color:$font-dark;}


.btn-secondary{display:inline;
@media #{$m400}{
margin-left:0;margin-top:$space;
}
}
.btn-secondary{display:inline-block;margin-left:$space;margin-bottom:$space-half}
.btn-secondary-left{display:inline-block;margin-right:$space;margin-bottom:$space-half}
.btn-secondary-left{display:inline-block;margin-right:$space;margin-bottom:$space-half;}
// Rephrase to use modifiers
.btn-secondary-alone{display:inline-block;margin-bottom:$space-half}


.posts-nav a{padding:$space-half $space-2;}
.btn-s-2,.btn-huge,input.btn-huge{padding:$space-half $space-2;font-size:$size-1;white-space:normal}
.btn-s-4{padding:$space-half $space-4;font-size:$size-1;white-space:normal}

@@ -95,10 +109,16 @@ p .btn,.posts-nav a{vertical-align:top;margin-right:0.05rem}


.check{width:auto;margin-bottom:$space-half;margin-top:$space}

.check + .check{margin-left:$space-half;padding-left:$space;padding-right:$space;}

/* Icons */
.icon{position:relative;width:20px;height:20px;background:url('i/icons.png') no-repeat 0 0;}
.icon{position:relative;width:20px;height:20px;background:url('i/icons.png') no-repeat 0 0;
@media #{$m400}{
//background-size:75%;
// TU CHCEMY ZROBIĆ RESPONSIVE
}

}
.i-film{}
.i-ark{background-position:-20px 0}
.i-ex{background-position:-40px 0}
@@ -112,6 +132,7 @@ p .btn,.posts-nav a{vertical-align:top;margin-right:0.05rem}
.btn-c .icon{background-color:$beige}
.btn-c:hover .icon{background-color:$beige-hover}

.i-fb{padding-left:30px;background:url('i/icon_fb.png') no-repeat 0 center;}



@@ -120,17 +141,11 @@ a.m{margin:0 0 $space}
.top{color:$font-light;padding-left:$space-half;float:right;}
.top:hover,.top:focus{color:#000;}

a[href$=".pdf"]:before{display:block;position:absolute;top:$space-half;left:$space-half;width:17px;height:21px;background:url('/c/i/file.png') no-repeat;content:'';
.btn-file:before{display:block;position:absolute;top:$space-half;left:$space-half;width:17px;height:22px;background:url('/c/i/file.png') no-repeat scroll 0 1px;content:'';
transition:transform 0.5s, -moz-transform 0.5s, -webkit-transform 0.5s, -o-transform 0.5s;
-webkit-transition:-webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
}
a[href$=".pdf"]{position:relative;border:1px solid $beige;border-radius:10px;padding:$space-half $space $space-half 2.25rem;}
a[href$=".pdf"]:hover{padding-left:$space-2;}
a[href$=".pdf"]:hover:before{
transform:rotateY(180deg);
}

aside a[href$=".pdf"]:before{display:none;}
aside a[href$=".pdf"],aside a[href$=".pdf"]:hover{border:0;padding:0;}
.btn-file{position:relative;border:1px solid $beige;border-radius:10px;padding:$space-half $space $space-half 2.25rem;}
.btn-file:hover{border-color:$beige-border;}
27 sass/partials/forms.scss → sass/partials/_forms.scss
View file
@@ -8,26 +8,27 @@

// Much to update and rethink here
form{margin:0 0 $space-2;}
form p{margin:0 0 $space-half}
form p,label{margin:0 0 $space-half}
button,input,select,textarea,label{margin:0;font-family:inherit;font-size:100%;font-size:$size-0;vertical-align:baseline;*vertical-align:middle;
//-webkit-appearance:none;
box-shadow:none;}
input,textarea,button{display:block;margin-bottom:$space-half;padding:$space-half $space;border:1px solid $dark;border-radius:3px !important;line-height:1.1875;background:$white;}
input,textarea,button{display:block;padding:$space-half $space;border:1px solid $dark;border-radius:3px;line-height:1.1875;background:$white;}
input{width:70%;}
input[type="submit"],.btn-input{width:auto;border:1px solid transparent;background-color:$blue;color:$white !important;font-size:1rem;}
input[type="submit"]:hover,input[type="submit"]:focus,.btn-input:hover,.btn-input:focus{background-color:$blue-hover;outline:none}
input[type="submit"]:active,.btn-input:active{position:relative;top:1px;left:1px}
input[type="checkbox"],input[type="radio"]{width:auto;display:inline;margin:0;padding:0;}
input[type="image"]{width:auto;border:0;background:none}
label{width:auto;cursor:pointer}
label input[type="radio"]{margin-right:$space-half;}
.form-kursy{margin-left:3.75rem;padding-left:$space-2}
.form-green{border-left:1px solid $green-light}
.form-orange{border-left:1px solid $orange-light}
.form-red{border-left:1px solid $red-light}
.form-green input{border-color:$green}
.form-orange input{border-color:$orange}
.form-red input{border-color:$red}
.form-long label{display:block;margin:0;padding:0;}
.form-long label{display:block;margin:0 0 3px;padding:0;}
.form-long input{display:inline;width:100%;margin-bottom:$space;}
.form-long .no-margin{margin-bottom:0}
.form-long input[type="radio"]{width:auto;height:$size-1;float:left;margin-right:$space-half}
@@ -47,17 +48,35 @@ textarea{width:100%;height:$space-8;overflow:auto;vertical-align:top;}
input:focus,textarea:focus{border-color:$dark}

.comment-form{}
.comment-form label{display:inline-block;}
.comment-form * + label,.comment-form input[type="submit"]{margin-top:$space-half;}
.comment-form textarea{}
.comment-form input{width:50%;}
.comment-form textarea,.comment-form input{
@media #{$m400}{
width:100%
}
}
input + .note{margin-top:$space-half;}


.form-100{}
.form-100 label{display:block;text-align:left}
.form-100 input,.form-100 button{display:block;width:100%;margin:0 auto $space-half;}

/* TRZEBA ujednolicić formy, tam gdzie 100% width */
/* TRZEBA ujednolicić formy, tam gdzie 100% width */


// Treningi
.form-treningi{}
.form-treningi .hidden-input{display:none;}

.form-treningi h4{margin:$space 0 0;}
.form-treningi label, .form-treningi-email {margin:$space-half $space-half 0 0;}


.form-treningi input:checked + label{background:$green;color:$white;}
.form-treningi input:checked + label:hover{background:$green-hover;color:$white;}

.form-treningi-email{border:1px solid $beige;}
.form-treningi-email:focus{border-color:$dark;}
20 sass/partials/grids.scss → sass/partials/_grids.scss
View file
@@ -36,13 +36,25 @@
.p-10 > blockquote .share{left:auto;right:$space;top:auto;bottom:0}

.col-9,.p-9 > p{width:$col-9}
.col-8,.p-8 > p{width:$col-8}
.col-8,.p-8 > p{width:$col-8;
@media #{$m770} {
width:auto;float:none;
}
}
.col-7,.p-7 > p{width:$col-7}
.col-6,.p-6 > p{width:$col-6}
.col-5,.p-5 > p{width:$col-5}
.col-4,.p-4 > p{width:$col-4}
.col-4,.p-4 > p{width:$col-4;
@media #{$m770} {
width:$col-8;
}
}
.col-3,.p-3 > p{width:$col-3}
.col-2,.p-2 > p{width:$col-2}
.col-2,.p-2 > p{width:$col-2;
@media #{$m770} {
width:$col-4;
}
}
.col-1,.p-1 > p{width:$col-1}

.p-center > p{float:none;margin-left:auto;margin-right:auto;}
@@ -56,7 +68,7 @@
.l-4{margin-left:$col-4;}

.l-1-32,.l-1,.l-2,.l-3,.l-4{
@media #{$m770} {
@media #{$m640} {
margin-left:0;
}
}
0 sass/partials/images.scss → sass/partials/_images.scss
View file
File renamed without changes.
90 sass/partials/_media.scss
View file
@@ -0,0 +1,90 @@
//
// @Media
//

@media screen and (max-width: 1024px){
[class*='section-levels']:before,.hr:before{display:none;}
[class*='section-line-']{right:0;margin-right:3.5rem;}
.aside-main{left:auto;right:0;margin:0 $space 0 0;}
img{height:auto !important;}
}

@media screen and (max-width: 905px){
.content .col-10{width:auto;}
.about-top h1{width:50%;font-size:$size-3;}

.aside-main{position:static;width:auto;padding:0 $space;margin:0 auto;}
.aside-bubble{width:280px;max-width:100%;margin:0 auto;}
.aside-newsletter-fields{float:left;width:48%}
.aside-newsletter-bottom ul{float:right;width:48%;margin-top:$space-half;}

.col-10,.p-10{float:none}
.textarea-big{width:100%}

.sowa{margin-top:0;}

.divider,.hr-short{margin:$space-2 auto;}
.like-warsztaty{margin-top:(-$space)}

.hero-arrow{width:4rem}

.recommends .alignleft{float:none;overflow:auto}
.recommends-single-img{width:49%;float:left}
.recommends-single-img:first-child{margin-right:1%;}
.recommends-single-img:last-child{margin-left:1%;}
.recommends-single-img:only-child{width:auto;float:none;margin-left:auto;margin-right:auto}
.recommends-single{margin-left:0}
}

@media #{$m770}{
.col-4:nth-child(2n+1){clear:left;}
.col-4:nth-child(n+3){margin-top:$space-2;}
.space-x4 .col-4:nth-child(2n+3){margin-top:$space-4;}

.textarea-big{width:100%;margin-bottom:$space-half}
[class*="section-levels"]{padding-right:$space;}
.about-top h1{position:static;width:auto;padding:$space $space-half 0;margin:0;color:#000;font-size:1.5rem;text-shadow:none;}
.about-quotes-author{margin:0 0 $space;text-align:right;}
.bigquote{width:auto;margin-left:$space;margin-right:$space;}
.about-quotes blockquote{margin:0;}
.section-levels-b{padding-bottom:$space;}

.cloud-sowa{max-height:$space-8;}
.cloud-wrap:before,.cloud-wrap:after{display:none}

.aside-main-alt [type="text"],.aside-main-alt [type="email"]{width:45%;font-size:1rem;}
.aside-main-alt [type="submit"]{margin-left:0;}
.aside-main-alt .intro{font-size:1.25rem;}

.section-recommends .col-8{overflow:hidden}

.form-long{margin-left:0;padding:0;border:0}
}

@media #{$m640}{
[class*="col-"]{float:none;width:auto}
[class*="col-"] + [class*="col-"]{margin-top:$space-2}

form .row [class*="col-"],.section-8-0 [class*="col-"]{margin:0;}
}

@media screen and (max-width:400px){
html{font-size:75%}
input{width:100%}
.header-main a{font-size:$size-2}
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){
.header-main{-webkit-text-stroke-width:0.6px;}
.hero{height:auto}
}
@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape){
.header-main{-webkit-text-stroke-width:0.6px;}
}

@media print {
article > *, header, footer, #search{display:none;}
article:before{content:"NocnaSowa.pl";font:$size-3 $bariol;display:block;width:100%;text-align:center;margin-bottom:$space-2;}
article:after{content:attr(data-title);font:$size-2 $body-font;display:block;width:100%;text-align:center;}

}
1 sass/partials/reset.scss → sass/partials/_reset.scss
View file
@@ -15,3 +15,4 @@ button,html input[type="button"],input[type="reset"],input[type="submit"]{-webki
fieldset{padding:0;margin:0;border:0}


table{border-collapse:collapse;border-spacing:0}
11 sass/partials/scaffolding.scss → sass/partials/_scaffolding.scss
View file
@@ -16,23 +16,22 @@ font:normal normal normal 1em/1.25 $body-font;color:$font-dark;
html,body{height:100%;width:auto;margin:0;padding:0}

body{
position:relative;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/headers/hIEfix.png,sizingMethod=crop) /* IE fonts fix */;
zoom:1;
// Kerning options of the future
text-rendering:optimizelegibility;
font-feature-settings:"kern";
-webkit-font-feature-settings:"kern";
-moz-font-feature-settings:"kern";
-moz-font-feature-settings:"kern=1";
font-feature-settings:"kern" 1;
-webkit-font-feature-settings: "kern" 1, "liga" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1;
font-feature-settings: "kern" 1, "liga" 1;
font-kerning:normal;
-webkit-font-smoothing:subpixel-antialiased;
}


// Links
a,a:before{color:$blue;background:transparent}
a,a:before,a:after,.ex i,.ex img,input,div,.btn,.nav,.dropdown-nav,button,a span{ transition:all 0.4s ease; }
a,a:before,a:after,.ex i,.ex img,input,div,.btn,.nav,.dropdown-nav,button,a span,.search-icon,.form-treningi-label{ transition:all 0.4s ease; }
a:link{}
a:visited{color:$blue-border}
a:hover,a:focus{color:$dark;}
80 sass/partials/sections.scss → sass/partials/_sections.scss
View file
@@ -26,10 +26,7 @@
float:none;
}
}
.header-content a{padding:0.4375rem $space;border:1px solid $dark;border-width:0 1px 0 0;z-index:100;font:normal normal 200 #{$size-1}/1.3 $bariol;color:$gray-on-dark;text-decoration:none;
@media #{$m770}{
border:0;
}
.header-content a{padding:0.4375rem $space;z-index:100;font-style:normal;font-variant:normal;font-weight:200;font-size:$size-1;line-height:1.3;font-family:$bariol-reg;color:$gray;text-decoration:none;
}

.logo span{color:$blue;}
@@ -55,6 +52,7 @@
}
}
.search-button-x{background-image:url('i/x.png');}
.search-button-x:hover{opacity:1;}

a.active{color:$white;opacity:1}
.logo:hover,.logo:focus{color:$white;}
@@ -79,7 +77,7 @@ a.active{color:$white;opacity:1}
.dropdown-nav a{border-width:1px 0 0}

.search-form{margin-bottom:$space-4}
.search-form .s{display:inline-block;width:70%;margin:0 $space-half 0 0;font:normal normal normal $size-1/normal $body-font;}
.search-form .s{display:inline-block;width:72.5%;margin:0 2.5% 0 0;font:normal normal normal $size-1/normal $body-font;}
.search-form .btn-search{width:25%;}

.dropdown-pushed{transform:translate3d(0,100%,0);bottom:0;}
@@ -88,20 +86,20 @@ a.active{color:$white;opacity:1}
/* front, footer */
.section-trans {position:relative;color:$white;background:transparent center center no-repeat;background-attachment:fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;zoom:1;}
.touch .section-trans{background-attachment:scroll}
.section-black {background:#000 center center;color:$white}
.section-white {border-top:1px solid $white;border-bottom:1px solid transparent;background:$white}
.section-beige {border-top:1px solid $white;border-bottom:1px solid $beige-border;background:$beige}
.section-blue {border-top:1px solid $blue-light;border-bottom:1px solid #166599;background:$blue;color:$white}
.section-green {border-top:1px solid $green-light;border-bottom:1px solid $green-border;background:$green;color:$white}
.section-orange{border-top:1px solid $orange-light;border-bottom:1px solid $orange-border;background:$orange;color:$white}
.section-red {border-top:1px solid $red-light;border-bottom:1px solid $red-border;background:$red;color:$white}
.section-dark{border-top:1px solid $dark-light;border-bottom:1px solid $dark-border;background:$dark-btn;color:$white}
.section-black {background-color:$outer-space;}
.section-white {background-color:$white}
.section-beige {background-color:$beige}
.section-blue {background-color:$blue;}
.section-green {background-color:$green;}
.section-orange{background-color:$orange;}
.section-red {background-color:$red;}
.section-dark {background-color:$dark-btn;}
.section-footer{}
.section-footer p{padding:0 $space;font-size:$size-0}
.section-footer a:hover{color:$white}
.below-trans{border-top:0}

.black {background:#000;color:$white}
.black {background:$outer-space;color:$white}
.white {background:$white}
.beige {background:$beige}
.blue {background:$blue;color:$white}
@@ -120,19 +118,22 @@ a.active{color:$white;opacity:1}
.top-orange{border-top:0.625rem solid $orange;}
.top-red{border-top:0.625rem solid $red;}

.rounded{border-radius:3px}
.rounded{border-radius:3px;overflow:hidden;}

.section-dark a,.section-black a,.section-trans a{color:$blue-light;}
.section-dark .btn,.section-trans .btn,
.section-dark, .section-blue, .section-green, .section-orange, .section-red, .section-dark,.section-dark .btn,.section-trans .btn,
.section-dark .index-h a,
.section-dark a:hover,.section-dark a:focus,
.section-black a:hover,.section-black a:focus,
.section-black, .section-black a:hover,.section-black a:focus,
.section-trans a:hover,.section-trans a:focus,
.section-blue a,.section-blue a:visited,
.section-green a,.section-green a:visited,
.section-orange a,.section-orange a:visited,
.section-red a,.section-red a:visited,
.section-trans blockquote:before{color:$white}
.section-trans blockquote:before,
.section-dark .section-beige .btn:hover,
.section-dark .beige .btn:hover,
.section-dark .beige .btn:focus{color:$white}


.level-button{margin-top:0;margin-bottom:0.75rem;font-size:$size-0;text-align:center;}
@@ -156,25 +157,30 @@ a.active{color:$white;opacity:1}
.section-recommends figure{margin:0 0 0 11.25rem}
.section-recommends .recommends-img{margin:0}

.section-0-0{padding-top:0;padding-bottom:0;}
.section-0-2{padding-top:0;padding-bottom:$space-2}
.section-1-1{padding-top:$space;padding-bottom:$space}
.section-2-2{padding-top:$space-2;padding-bottom:$space-2}
.section-2-4{padding-top:$space-2;padding-bottom:$space-4}
.section-4-2{padding-top:$space-4;padding-bottom:$space-2}
// 4-4 is not needed as it is default
.section-4-6{padding-top:$space-4;padding-bottom:$space-6}
.section-6-4{padding-top:$space-6;padding-bottom:$space-4}
.section-8-0{padding-top:$space-8;padding-bottom:0;
@media #{$m770}{
padding-top:$space-4
}
}
.section-8-2{padding-top:$space-8;padding-bottom:$space-2}
.section-8-4{padding-top:$space-8;padding-bottom:$space-4}
.section-8-6{padding-top:$space-8;padding-bottom:$space-6}
.section-8-8{padding-top:$space-8;padding-bottom:$space-8}
.section-shorter{padding-bottom:0}

.hidden{height:0}

.section-100{min-height:100%}
.section-100{min-height:100%;}
.wrapper{height:100%;position:relative;overflow:auto;-webkit-overflow-scrolling: touch}


// Old sections to remove?
@@ -217,9 +223,24 @@ a.active{color:$white;opacity:1}

/* Warsztaty */
.warsztaty{height:100%}
.hero{position:relative;text-align:center;}
.hero{position:relative;text-align:center;
@media #{$m400}{
height:auto;
}
}
.hero .section-8-6{
@media #{$m400}{
padding-top:$space-6;padding-bottom:$space-4;
}
}

.hero-arrow{display:block;width:$space-4;height:$space-4;margin:0 auto;background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB2aWV3Qm94PSIwIDAgODUgNTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHRpdGxlPmFycm93X2Rvd25fMzwvdGl0bGU+PGRlZnM+PC9kZWZzPjxnIGlkPSJQYWdlIDEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGcgaWQ9ImFycm93X2Rvd25fMyIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjUiPjxwYXRoIGQ9Ik03Ljk4Nzc5Mjk3LDguOTgyNzA0MTYgTDQyLjUsNDEuMDE3Mjk1OCBMNzcuMDEyMjA3LDguOTgyNzA0MiIgaWQ9IlBhdGggNiBjb3B5Ij48L3BhdGg+PC9nPjwvZz48L3N2Zz4=') no-repeat center center;background-size:contain;cursor:pointer}

.hero h1{
@media #{$m400}{
font-size:$size-5;
}
}
.hero span,.hero-arrow,.section-opened,.section-closed{ transition:all 0.5s ease; }
.hero span+span{ transition-delay:0.4s; }
.hero-arrow{ transition-delay:0.7s; }
@@ -254,7 +275,7 @@ a.active{color:$white;opacity:1}
}
.map-abs{display:block;position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;}
.map-back{background-color:$beige;z-index:-1;}
.map-box{position:relative;z-index:1;padding:$space $space-2;border-radius:3px;background:$white;color:$font-dark;}
.map-box{position:relative;z-index:1;padding:$space $space-2;border-radius:3px;background:rgba(255,255,255,0.9);color:$font-dark;}
.map .col-8{
@media #{$m770}{
width:50%;
@@ -319,7 +340,7 @@ a.active{color:$white;opacity:1}

// Section Moving
.section-moving{opacity:0;position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow-y:scroll;visibility:hidden;
transition:all 0.5s cubic-bezier(.645,.045,.355,1);
transition:all 0.4s cubic-bezier(.645,.045,.355,1);
transform:translate3d(100%,0,0);
backface-visibility:hidden;
-webkit-overflow-scrolling:touch;
@@ -349,7 +370,7 @@ backface-visibility:hidden;
.recommends-quote p{font-size:$size-1;}
.recommends-quote p{}
.recommends-text{font-size:$size-1;text-indent:-0.5em;}
.recommends-block{position:relative;padding:$space $space-2;margin:0 0 $space-4 12.5rem;border-radius:3px;background:$white;
.recommends-block{position:relative;padding:$space $space-2;margin:0 0 $space-4 12.5rem;border-radius:3px;background:$white;color:$font-dark;
@media #{$m770}{
margin-left:8.5rem;
}
@@ -424,6 +445,8 @@ backface-visibility:hidden;
.wp-maszyna-img{height:100%;width:50%;position:absolute;right:0;top:0;background:url('/c/i/wp/wp_maszyna.jpg') no-repeat 0 center;background-size:cover}


// Treningi
.hero-treningi{background-image:url('/c/i/treningi/20151225_Oslo_GOPR9075.jpg');background-color:$dark}


/* content - blog */
@@ -442,7 +465,7 @@ backface-visibility:hidden;

// BLOG
.post-index .index-h{font-size:$size-4}
.post-index .intro{font-size:$size-1}
.post-index .intro{font-size:$size-1;line-height:$line-1;}


.footer-author{margin-top:$space-4}
@@ -482,7 +505,6 @@ backface-visibility:hidden;
.ex .tick{display:none;position:absolute;left:(-$space-2);top:2px;width:20px;height:20px;vertical-align:text-top;}
.ex br+i{margin:0;}
.ex li{position:relative;overflow:visible;}
.ex ol ol{font-size:$size-0;list-style:lower-alpha;}
.ex .btn-4,.ex .btn-ex-fb{display:none;}
.ex .btn-ex-fb{padding-top:$space;opacity:0.5}
.ex .btn-ex-fb:hover{opacity:1}
@@ -552,9 +574,9 @@ li .np+p{padding-left:$space;}


/* below content */
.h4-sources{color:$dark-gray;font-size:$size-mini}
.h4-sources{color:$dark-gray;font-size:$size-mini;}
.ol-sources{font-size:$size-0;}
.ol-sources li{margin-bottom:0.3125rem;background:none;font:normal normal 400 $size-mini/1.15 $helvetica;color:$dark-gray;}
.ol-sources li{margin-bottom:0.3125rem;background:none;font-size:$size-mini;line-height:1.15;color:$dark-gray;}
.ol-sources a{color:$dark-gray;}
.ol-sources a:hover{color:#000}

@@ -611,7 +633,7 @@ li .np+p{padding-left:$space;}
.aside-newsletter{position:relative;padding-bottom:0.666rem;border-radius:3px;border-bottom:3px solid $blue;background:$beige;overflow:hidden;}

.aside-newsletter-top{position:relative;padding:$space-half;border-bottom:1px solid #000;border-radius:3px 3px 0 0;background:$dark;}
.aside-newsletter .aside-h{margin:0 0 0.1rem;font:normal normal 700 1.85rem/1.2 $helvetica;color:$white;}
.aside-newsletter .aside-h{margin:0 0 0.1rem;color:$white;}
.aside-newsletter .aside-sub{margin:0;color:$white;}

.aside-newsletter-bottom{padding:0.333rem 0.666rem 0;margin:0;border-top:1px solid $white;}
@@ -637,7 +659,7 @@ li .np+p{padding-left:$space;}
.aside-poll{}
.aside-poll .PDS_Poll *{margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;color:$font-dark !important;font:normal normal 400 #{$size-0}/1.15 $body-font !important;}
.aside-poll .PDS_Poll .pds-box{width:auto !important;}
.aside-poll .PDS_Poll .pds-question-top{width:auto !important;padding:0 0 $space !important;font:normal normal 700 #{$size-0}/1.15 $helvetica !important;}
.aside-poll .PDS_Poll .pds-question-top{width:auto !important;padding:0 0 $space !important;font-weight:700;font-size:$size-0;line-height:1.15;}
.aside-poll .PDS_Poll .pds-answer-group{width:auto !important;padding:0 0 $space !important;position:relative !important}
.aside-poll .PDS_Poll .pds-answer-span{width:auto !important;}
.aside-poll .PDS_Poll .pds-feedback-group{width:auto !important;padding:0 0 $space !important;}
104 sass/partials/_shame.scss
View file
@@ -0,0 +1,104 @@
/*
* Spinner
* When .btn-spinner is clicked, it's direct child receives a new class "ball-pulse-sync"
*/

@keyframes ball-pulse-sync {
33% { transform: translateY(5px); }
66% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}
.ball-pulse-sync{position:relative;display:inline-block;top:-3px;margin-left:3px;}
.ball-pulse-sync > div:nth-child(0) {animation: ball-pulse-sync 0.6s -0.21s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(1) {animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(2) {animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(3) {animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; }
.ball-pulse-sync > div {display: inline-block;width:5px;height:5px;border-radius:100%;margin:0 2px;vertical-align:middle;background-color:#fff;animation-fill-mode: both;}
.ball-pulse-sync-dark > div{background-color:$font-dark;}



/*
* Nowe zapisy na Warsztaty
*/

.warsztaty-list{margin:0 0 $space;padding:0;text-align:left;}
.warsztaty-list li::before{display:none;}
.warsztaty-list li{margin:0;padding:$space 30% $space $space;background:$white;border-radius:3px;border:1px solid $white;position:relative;transition:all 0.4s ease;
@media #{$m770}{
padding-right:$space;
}
}
.warsztaty-list li:hover{border-color:$beige-border;}
.warsztaty-list li + li{margin-top:$space;}
.warsztaty-list h3,.warsztaty-list p{margin:0;}

.btn-warsztaty-list,.btn-warsztaty-list-alt{position:absolute;right:$space;bottom:$space;margin:0;
@media #{$m770}{
position:static;margin-top:$space;
}
}
.btn-warsztaty-list-alt{right:$space-2;bottom:$space-2;
@media #{$m770}{
margin-top:0;
}
}

.warsztaty-list .inactive{opacity:0.5;}
.warsztaty-list .inactive .btn-warsztaty-list{font-style:italic;}
.warsztaty-list .inactive:hover{border-color:$white;}


.warsztaty-zapisy-note{padding-top:$space-half;display:block;}


.warsztaty-calendar{position:relative;padding-top:$space;font-size:0;text-align:center;
@media #{$m905}{
padding-top:0;margin-bottom:$space-2;text-align:center;
}
}
.warsztaty-calendar-line{display:inline-block;border-top:1px solid $gray-on-dark;padding-top:3px;
@media #{$m905}{
border:0;text-align:left;
}
}
.warsztaty-calendar-day{display:inline-block;width:2em;height:2em;margin:1px;text-align:center;line-height:2em;font-size:$size-0;}
.warsztaty-calendar-day-active{color:#fff;border-radius:50%;}
.warsztaty-calendar-day-green{background:$green;}
.warsztaty-calendar-day-orange{background:$orange;}
.warsztaty-calendar-day-red{background:$red;}


.warsztaty-calendar-month{position:absolute;bottom:100%;margin-bottom:-1.25rem;font-style:italic;font-size:$size-0;
@media #{$m905}{
position:static;display:block;border-bottom:1px solid $gray-on-dark;margin-bottom:3px;
}
}

.warsztaty-calendar-month + .warsztaty-calendar-day + .warsztaty-calendar-month{margin-left:3rem;
@media #{$m905}{
margin-left:0;
}
}

.warsztaty-calendar-day + .warsztaty-calendar-month{
@media #{$m905}{
margin-top:$space-half;
}
}

.warsztaty-oslo-form{color:$font-dark;}
.warsztaty-oslo-form label{display:block;margin-bottom:3px;padding:0;}
.warsztaty-oslo-form input{display:inline-block;width:100%;margin-bottom:$space;}



// Treningi Liczb i podobne tematy

.trening-liczb-section{opacity:0;position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;visibility:hidden;
transition:all 0.4s cubic-bezier(.645,.045,.355,1);
transform:scale(0);
backface-visibility:hidden;
-webkit-overflow-scrolling:touch;
}
.trening-liczb-section-open{transform:scale(1);opacity:1;z-index:9999}
87 sass/partials/typography.scss → sass/partials/_typography.scss
View file
@@ -3,32 +3,45 @@
//

@font-face {
font-family:'bariol_lightlight';
src:url('f/bariol_light-webfont.eot');
src:url('f/bariol_light-webfont.eot?#iefix') format('embedded-opentype'),
url('f/bariol_light-webfont.woff') format('woff'),
url('f/bariol_light-webfont.ttf') format('truetype'),
url('f/bariol_light-webfont.svg#bariol_lightlight') format('svg');
font-weight:200;
font-style:normal;
font-family: 'bariol_lightlight';
src: url('http://nocnasowa.pl/c/f/bariol_light-webfont.eot');
src: url('http://nocnasowa.pl/c/f/bariol_light-webfont.eot?#iefix') format('embedded-opentype'),
url('http://nocnasowa.pl/c/f/bariol_light-webfont.woff2') format('woff2'),
url('http://nocnasowa.pl/c/f/bariol_light-webfont.woff') format('woff'),
url('http://nocnasowa.pl/c/f/bariol_light-webfont.ttf') format('truetype'),
url('http://nocnasowa.pl/c/f/bariol_light-webfont.svg#bariol_lightlight') format('svg');
font-weight:200;
font-style:normal;
}

@font-face {
font-family: 'bariol_regularregular';
src: url('http://nocnasowa.pl/c/f/bariol_regula-webfont.eot');
src: url('http://nocnasowa.pl/c/f/bariol_regula-webfont.eot?#iefix') format('embedded-opentype'),
url('http://nocnasowa.pl/c/f/bariol_regula-webfont.woff2') format('woff2'),
url('http://nocnasowa.pl/c/f/bariol_regula-webfont.woff') format('woff'),
url('http://nocnasowa.pl/c/f/bariol_regula-webfont.ttf') format('truetype'),
url('http://nocnasowa.pl/c/f/bariol_regula-webfont.svg#bariol_regularregular') format('svg');
font-weight: 400;
font-style: normal;
}



small{font-weight:400;font-size:1rem;font-variant:small-caps}
.small{font-size:$size-0}
small{font-weight:400;font-size:$size-0;font-variant:small-caps}
.small{font-size:$size-0;}
b,strong{font-weight:700}
abbr{border:none;text-decoration:none;font-variant:small-caps;text-transform:uppercase/*???*/}
q,i,em{font-style:italic}
cite{}
.note{display:block;margin-bottom:$space;font-size:$size-mini;font-style:italic}
.normal{font-style:normal}
.normal{font-style:normal;font-variant:normal;}


ul,ol,p,dl{padding:0;font-size:$size-1;line-height:$line-1;}


ul{margin:0 0 $space-2 $space;padding:0;font-size:$size-1;line-height:1.5;list-style-position:outside}
ol{margin:0 0 $space-2;padding:0;font-size:$size-1;line-height:1.5;list-style-position:outside}
ul{margin:0 0 $space-2 $space;list-style-position:outside}
ol{margin:0 0 $space-2;list-style-position:outside}
ol > li {
@media #{$m770} {
margin-left:2.5rem
@@ -40,18 +53,15 @@ ul > li{position:relative;margin-left:(-$space);padding:0 0 0 $space;list-style:
margin-left:1.25rem
}
}
ul > li:before{content:"";position:absolute;left:0;top:0.6em;width:$space-half / 2;height:$space-half / 2;border-radius:1px;background:$dark;}
ul > li:before{content:"";position:absolute;left:0;top:0.6875em;width:$space-half / 2;height:$space-half / 2;border-radius:1px;background:$dark;}
.light-dots > li:before{background:$white;}
ol ol{margin-left:$space;}
ol ol{margin-left:$space;margin-bottom:$space;list-style:lower-alpha;}
.nodots li:before{display:none}
.no-margin+ul li{margin-bottom:0}



dt{font-weight:700}
dd{margin:0 0 $space}

p,dl{margin:0 0 $space;padding:0;font-size:$size-1;line-height:$line-1}
p,dl,dd{margin:0 0 $space;}
.post dd{margin:0 0 $space-half $space}


@@ -61,12 +71,21 @@ p,dl{margin:0 0 $space;padding:0;font-size:$size-1;line-height:$line-1}
.plan+ul{margin-bottom:$space-2}
.no-margin{margin-bottom:0}

.double-margin{margin-bottom:$space-2} // TO DELETE - check where used
.p-short{line-height:1.333}
.p-quote{text-indent:-0.55rem}




// 201604
// New example format
.post .dl-eg{padding-left:$space-2;}
.dl-eg dt{font-weight:400;font-style:italic;}
.dl-eg dd{margin:0 0 0 1.25rem;font-size:$size-0;line-height:$line-0;color:$dark-gray;}
.dl-eg dd + dt{margin-top:$space-half;}
.tr{color:$dark-gray;}


// DO POPRAWY
.note a{color:$white;text-decoration:underline}

@@ -76,6 +95,7 @@ p,dl{margin:0 0 $space;padding:0;font-size:$size-1;line-height:$line-1}

.centered{text-align:center}
.rightened{text-align:right}
.leftened{text-align:left !important}

.err{color:$red;}

@@ -132,19 +152,19 @@ hr{position:relative;height:0;margin:$space-2 0;padding:0;border:1px solid $gray

.divider{display:block;width:$space-4;height:1rem;border:0;margin:$space-4 auto;
text-align:center;
background:linear-gradient(left,$green 0%,$green 20%,transparent 20%,transparent 40%,$orange 40%,$orange 60%,transparent 60%,transparent 80%,$red 80%,$red);
background-image:linear-gradient(to right,$green 0%,$green 20%,transparent 20%,transparent 40%,$orange 40%,$orange 60%,transparent 60%,transparent 80%,$red 80%,$red);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.divider+h2{margin-top:0}



// Trzeba przeliczyć jeszcze raz naszą skalę

/* headers */
h1,h2,h3,h4,h5,h6{padding:0;text-decoration:none;}
h1,.h1,.index-h,.section-h-thin,.section-h-thin.btn{margin:0 0 $space;font:normal normal 200 #{$size-5}/1.1 $bariol}
h1,h2,h3,h4{padding:0;text-decoration:none;}
h1,.h1,.index-h,.section-h-thin,.section-h-thin.btn{margin:0 0 $space;font-weight:200;font-variant:normal;font-style:normal;font-size:$size-5;line-height:1.1;font-family:$bariol;}
.section-h-thin{margin:0 0 $space-half;}
.index-h,.section-h-thin{
@media #{$m770} {
@@ -156,23 +176,28 @@ h1,.h1,.index-h,.section-h-thin,.section-h-thin.btn{margin:0 0 $space;font:norma
font-size:$size-5;
}
}
h2,.h2,.recommends-h,h3,.h3{margin:$space-4 0 $space;font:normal normal 400 #{$size-4}/1.15 $body-font;}
h2,.h2,h3,.h3,.recommends-h{margin:$space-4 0 $space;font-weight:400;font-variant:normal;font-style:normal;font-size:$size-4;line-height:1.15;font-family:$body-font;}
h2,.h2{
@media #{$m400} {
font-size:$size-3;
}
}
h3,.h3{font-size:$size-2;font-weight:700}
h4,.h4{margin:0 0 $space-half;font:normal normal 700 #{$size-0}/1.15 $helvetica;}
h5,.h5{margin:0 0 $space;font:normal normal 700 #{$size-1}/1.15 $body-font;}
.h2{margin:0}
h4,.h4{margin:0 0 $space-half;font-weight:700;font-variant:normal;font-style:normal;font-size:$size-0;line-height:1.15;font-family:$body-font;}
.h2{margin:0} // ???????????

h2 + h3{margin-top:$space-2}

h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited,h6 a:visited{text-decoration:none;color:#000;}
h1 a,h2 a,h3 a,h4 a,h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited{text-decoration:none;color:#000;}

h2:first-child,h3:first-child,.h2:first-child,.h3:first-child,.recommends-h{margin-top:0;}
.index-h a:hover,.index-h a:focus{text-decoration:underline}
.index-h-white a,.index-h-white a:visited,.index-h-white a:hover{color:$white}

.section-h{margin:0;font:normal normal 700 #{$size-5}/1.15 $helvetica;}

/* Table in position: static; */
.con-table{width:100%;margin:0 0 $space-2;overflow:hidden;text-align:left;}
.con-table td,.con-table th{padding:$space-half $space;margin:0;vertical-align:top}
.con-table tr{margin:0;}
.con-table tr + tr{border-top:1px solid $beige;}
.con-table thead tr{border-bottom:1px solid $beige-border;}
9 sass/partials/utilities.scss → sass/partials/_utilities.scss
View file
@@ -11,18 +11,18 @@
* html .group{zoom:1}/*IE6*/
*:first-child+html .group{zoom:1}/*IE7*/


.velocity-animating{transition:none}

.alignleft{float:left}
.alignright{float:right}
.center{display:block;float:none;margin-left:auto;margin-right:auto;}
.col-pad-top{padding-top:$space;}
.col-pad-bottom{padding-bottom:$space;}

.no-break{white-space:nowrap;}


.relative{position:relative}
.block{display:block}
.relative{position:relative;}
.block{display:block;}

.size-0{font-size:$size-0}
.size-1{font-size:$size-1;line-height:$line-1}
@@ -32,6 +32,7 @@
.size-5{font-size:$size-5}
.size-6{font-size:$size-6}

.space-0{margin-bottom:0;}
.space-half{margin-bottom:$space-half}
.space{margin-bottom:$space;}
.space-x2{margin-bottom:$space-2;}
37 sass/pisanie.scss
View file
@@ -97,9 +97,9 @@ font-style:normal;
.f-comment{position:relative;padding-top:$space-half;overflow:hidden}
.f-comment-tick{padding-bottom:$space-half}

.f-comment-child q, .q-rettet{background:$green-light;border-radius:3px;padding:3px 6px}
.f-comment-child q:before{content:""}
.f-comment-child q:after{content:""}
.f-comment-child q, .q-rettet{background:$green-light;border-radius:3px;padding:1px 6px;display:inline-block;}
.f-comment-child q:before{content:"";display:none;}
.f-comment-child q:after{content:"";display:none;}

.green a{color:$dark-btn}

@@ -123,18 +123,21 @@ font-style:normal;

.f-time{font-size:$size-0;font-style:italic;}

.f-comment-note{display:inline-block;padding-left:1.25rem;margin:0}
.f-comment-note{display:inline-block;padding-left:1.25rem;margin:0;}

.f-push{opacity:0.25;display:block;position:absolute;right:0;bottom:0;width:$space-2;height:$space-2;margin:0;cursor:pointer;background-position:center center}
.f-push:hover{opacity:1}
.f-comment-pushed .f-push{opacity:1}
.f-push{opacity:0.25;display:block;position:absolute;right:0;bottom:0;width:$space-2;height:$space-2;margin:0;cursor:pointer;background-position:center center;}
.f-push:hover{opacity:1;}
.f-comment-pushed .f-push{opacity:1;}

.pad > p:last-child{margin:0}
.pad > p:last-child{margin:0;}


.comment-parent:first-child .f-push::before{position:absolute;right:100%;width:20rem;bottom:3px;color:$dark-gray;content:"Naciśnij, by otworzyć sprawdzenie \2192";text-align:right;}



/* Forum */
.header-forum{position:absolute}
.header-forum{position:absolute;}

.section-forum{position:relative;background:transparent url('/c/i/wp/warsztaty_pisania.jpg') center center no-repeat;background-attachment:fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;zoom:1;}
.section-forum-h{color:$white}
@@ -224,17 +227,17 @@ font:normal normal 400 #{$size-0}/1.1875 $body-font;color:$white;text-shadow:0 1


@media print{
.print-only{display:block;visibility:visible}
.screen-only{display:none}
html,body{height:auto;margin:0;padding:0}
html{font-size:90%}
h2{font-size:$size-5}
.print-only{display:block;visibility:visible;}
.screen-only{display:none;}
html,body{height:auto;margin:0;padding:0;}
html{font-size:90%;}
h2{font-size:$size-5;}

.page-break{page-break-after:always;break-after:always}

.header-main{position:static}
.header-content a:last-child{display:none}
.header-trans{opacity:1;border:0;background:$blue}
.header-main{position:static !important;display:block;}
.header-content .col-10 a:last-child{display:none;}
.header-trans{opacity:1;border:0;background:$blue !important;}
.header-content .logo{color:#fff !important;font-size:$size-2}

.nav-chain{position:static;height:auto;padding:$space 0 0}
90 sass/s.scss
View file
@@ -30,7 +30,10 @@ Properties:
// Utilities
@import "partials/utilities";

@import "partials/shame";

//Media
@import "partials/media";



@@ -42,7 +45,9 @@ Properties:



.share{display:inline-block;padding:0 5px 0 22px;border-radius:3px;background:$beige url('/c/i/f_logo_12.png') 5px 4px no-repeat;text-decoration:none;font:12px/22px $helvetica;opacity:0.5;}


.share{display:inline-block;padding:0 5px 0 24px;border-radius:3px;background:$beige url('/c/i/f_logo_29.png') 4px 4px no-repeat;background-size:16px;text-decoration:none;font:12px/24px $body-font;opacity:0.5;}
.share:hover,.share:focus{text-decoration:underline;opacity:1;}
blockquote .share{display:block;position:absolute;top:100%;right:0;margin-top:5px;}
.figure-quote:hover .share,blockquote:hover .share{opacity:1}
@@ -78,86 +83,3 @@ img + figcaption{margin:0;padding:0;font-size:$size-0;text-align:center;font-sty




/* @media */
@media screen and (max-width: 1024px){
[class*='section-levels']:before,.hr:before{display:none;}
[class*='section-line-']{right:0;margin-right:3.5rem;}
.aside-main{left:auto;right:0;margin:0 $space 0 0;}
img{height:auto !important;}
}

@media screen and (max-width: 905px){
.content .col-10{width:auto;}
.about-top h1{width:50%;font-size:$size-3;}

.aside-main{position:static;width:auto;padding:0 $space;margin:0 auto;}
.aside-bubble{width:280px;max-width:100%;margin:0 auto;}
.aside-newsletter-fields{float:left;width:48%}
.aside-newsletter-bottom ul{float:right;width:48%;margin-top:$space-half;}

.col-10,.p-10{float:none}
.textarea-big{width:100%}

.sowa{margin-top:0;}

.divider,.hr-short{margin:$space-2 auto;}
.like-warsztaty{margin-top:(-$space)}

.hero-arrow{width:4rem}

.recommends .alignleft{float:none;overflow:auto}
.recommends-single-img{width:49%;float:left}
.recommends-single-img:first-child{margin-right:1%;}
.recommends-single-img:last-child{margin-left:1%;}
.recommends-single-img:only-child{width:auto;float:none;margin-left:auto;margin-right:auto}
.recommends-single{margin-left:0}
}

@media #{$m770}{

[class*="col-"]{float:none;width:auto}
[class*="col-"] + [class*="col-"]{margin-top:$space-2}

form .row [class*="col-"],.section-8-0 [class*="col-"]{margin:0;}
.textarea-big{width:100%;margin-bottom:$space-half}
[class*="section-levels"]{padding-right:$space;}
.about-top h1{position:static;width:auto;padding:$space $space-half 0;margin:0;color:#000;font-size:1.5rem;text-shadow:none;}
.about-quotes-author{margin:0 0 $space;text-align:right;}
.bigquote{width:auto;margin-left:$space;margin-right:$space;}
.about-quotes blockquote{margin:0;}
.section-levels-b{padding-bottom:$space;}

.cloud-sowa{max-height:$space-8;}
.cloud-wrap:before,.cloud-wrap:after{display:none}

.aside-main-alt [type="text"],.aside-main-alt [type="email"]{width:45%;font-size:1rem;}
.aside-main-alt [type="submit"]{margin-left:0;}
.aside-main-alt .intro{font-size:1.25rem;}

.section-recommends .col-8{overflow:hidden}

.form-long{margin-left:0;padding:0;border:0}
}

@media screen and (max-width:400px){
html{font-size:75%}
input{width:100%}
.hero{height:auto}
.header-main a{font-size:$size-2}
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){
.header-main{-webkit-text-stroke-width:0.6px;}
.hero{height:auto}
}
@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape){
.header-main{-webkit-text-stroke-width:0.6px;}
}

@media print {
.print .section-beige{background:none;border:0}
.print .section-content{padding:0}
.print .col-10{width:auto;float:none}
.no-print{display:none}
}
208 sass/twoja.scss
View file
@@ -0,0 +1,208 @@
@import "partials/base";

/* Main changes */
@font-face {
font-family:'bariol_lightlight';
src:url('http://dziennik.nocnasowa.pl/wp-content/themes/warsztaty-pisania/f/bariol_light-webfont.eot');
src:url('http://dziennik.nocnasowa.pl/wp-content/themes/warsztaty-pisania/f/bariol_light-webfont.eot?#iefix') format('embedded-opentype'),
url('http://dziennik.nocnasowa.pl/wp-content/themes/warsztaty-pisania/f/bariol_light-webfont.woff') format('woff'),
url('http://dziennik.nocnasowa.pl/wp-content/themes/warsztaty-pisania/f/bariol_light-webfont.ttf') format('truetype'),
url('http://dziennik.nocnasowa.pl/wp-content/themes/warsztaty-pisania/f/bariol_light-webfont.svg#bariol_lightlight') format('svg');
font-weight:normal;
font-style:normal;
}

.logo{float:none;
@media screen and (max-width: 440px) {
margin-left:-#{$space};
}
}
.header-content{text-align:center;font-size:0;
@media screen and (max-width: 440px) {
text-align:left;
}
}
.header-content a{display:inline-block;border:0;color:#000}
.header-content .logo{color:$blue;}
.header-content a:hover,.header-content a:active,.header-content a:focus{background:$blue;color:$white}
.header-content .logo + a{position:absolute;right:0}
.header-content .active{background:$dark;color:$white}

.header-trans{opacity:0.95;border-bottom:1px solid $beige-border;background:$white;}
.header-trans:after{display:none}

.header-content [class*="col-"]{
margin-bottom:0;
}

.section-100{min-height:100%}

#loginform .input{width:100%}

.bottom{background:$beige-hover;border-top:1px solid $beige-border;}
.bottom .section-content{padding-top:$space-half;padding-bottom:0}
.bottom p{font-size:12px;margin-bottom:$space-half}
.logout{float:right;
@media #{$m770} {
float:none;
}
}


/* Wordpress login */
.login{background:$beige;height:auto;min-height:100%}
.login label{display:inline}
.login h1 a{width:auto;height:auto;background:none;text-indent:0;font-size:$size-2;font-family:$body-font;color:#000}
.login form .forgetmenot{margin-bottom:$space-half !important}


/* Panel Sterowania */
.btn-round{padding:0;border-radius:50%;width:1.5rem;line-height:1.5rem;height:1.5rem;text-align:center;vertical-align:baseline;display:inline-block;margin-left:0.625rem;margin-right:0.625rem}

.special-btn .btn-blue{padding:0.25rem 0.5rem;opacity:0.5;font-size:0.8rem}
.special-btn .btn-blue:hover{opacity:1}

.numbers {
counter-reset: p;
}
.numbers p a:before{
counter-increment:p;
content: counter(p) ". ";
}


/* Chain */
.nav-chain{position:fixed;left:0;bottom:0;z-index:1000;height:100%;padding-top:$space-2;-webkit-backface-visibility:hidden;
@media #{$m400} {
padding-top:3rem;
}
}
.nav-chain ul{margin:0;padding:0;height:100%;}
.chain-dot{position:relative;padding:0 $space;height:3.33%;margin:0;
@media #{$m770} {
padding:0 $space-half
}
}
.chain-dot a{display:block;position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:$white;
@media #{$m770} {
width:4px;height:4px;margin:-2px 0 0 -2px;
}
}
.chain-dot-active a{border-color:$blue;background-color:$blue}


/* Dziennik */
.comment-parent{position:relative}
.f-comment-green{background:$green;color:$white}
.f-comment{position:relative;padding-top:$space-half;overflow:hidden}
.f-comment-tick{padding-bottom:$space-half}

.f-comment-child q, .q-rettet{background:$green-light;border-radius:3px;padding:1px 6px;display:inline-block;}
.f-comment-child q:before{content:"";display:none;}
.f-comment-child q:after{content:"";display:none;}

.green a{color:$dark-btn}

.f-comment-child{opacity:0;padding-top:0;height:0;margin-bottom:0;
transform:translate3d(100%,0,0);
}
.f-comment-child p{font-size:$size-0;
opacity:0;
transition:all 0.4s 0.4s ease;
}

.f-comment-pushed + .f-comment-child {
transform:translate3d(0,0,0);
padding-top:0.625rem;
margin-bottom:$space-2;
opacity:1;
}
.f-comment-pushed + .f-comment-child p{
opacity:1;
}

.f-time{font-size:$size-0;font-style:italic;}

.f-comment-note{display:inline-block;padding-left:1.25rem;margin:0;}

.f-push{opacity:0.25;display:block;position:absolute;right:0;bottom:0;width:$space-2;height:$space-2;margin:0;cursor:pointer;background-position:center center;}
.f-push:hover{opacity:1;}
.f-comment-pushed .f-push{opacity:1;}

.pad > p:last-child{margin:0;}


.comment-parent:first-child .f-push::before{position:absolute;right:100%;width:20rem;bottom:3px;color:$dark-gray;content:"Naciśnij, by otworzyć sprawdzenie \2192";text-align:right;}




/* Update 2016 */

.twoja-list-section{position:fixed;top:0;bottom:0;left:0;width:25%;overflow-y:scroll;background:$white;
@media #{$m770}{
position:relative;width:auto;overflow:auto;
}
}

.twoja-list{font-size:$size-0;margin:0 0 $space;border-top:0;}

.btn-twoja-list{display:none;
@media #{$m770}{
display:block;position:fixed;right:0;bottom:0;left:0;border-radius:0;
}
}

.twoja-list li{margin:0;padding:0;list-style:none;}
.twoja-list a{position:relative;display:block;margin:0;padding:$space-half;color:$dark-btn;text-decoration:none;}
.twoja-list li + li a{border-top:1px solid $beige;}

.twoja-list a:hover{border-top-color:transparent;background:$blue-hover;color:$white;}




@media print{
.print-only{display:block;visibility:visible;}
.screen-only{display:none;}
html,body{height:auto;margin:0;padding:0;}
html{font-size:90%;}
h2{font-size:$size-5;}

.page-break{page-break-after:always;break-after:always}

.header-main{position:static !important;display:block;}
.header-content .col-10 a:last-child{display:none;}
.header-trans{opacity:1;border:0;background:$blue !important;}
.header-content .logo{color:#fff !important;font-size:$size-2}

.nav-chain{position:static;height:auto;padding:$space 0 0}
.chain-dot{display:inline-block;width:3.33%;padding:0 $space-half}
.nav-chain ul{height:auto}
.chain-dot a{position:static;margin:0 auto;background:$beige}
.chain-dot-active a{background:$blue}

.section-beige{background:transparent;border:0}
.section-content{max-width:100%;width:100%;padding-left:$space-2;padding-right:$space-2}
.section-top{padding-top:$space-8}

.f-time{font-size:$size-2}

.comment-parent{page-break-after:always;padding-top:$space}
.comment-parent:after{content:'.';display:block;clear:both;height:0;visibility:hidden;font-size:0;}
.comment-parent .f-comment-tick{width:$col-9;float:left;margin:0;border-radius:0;}
.comment-parent .f-comment-child{width:$col-7;float:right;border-radius:3px;opacity:1 !important;height:auto !important;padding-top:$space-half;margin:3.75rem 0 0;transform:translate3d(0,0,0);display:block;}
.f-push{display:none}
.comment-parent .f-comment-child p{opacity:1}

.f-comment-child a{color:#fff;}
.f-comment-child a:after{content:" [ " attr(href) " ]";}

.print-last-page{padding-top:24rem}

.bottom{display:none}
}

@page {
margin: 0mm !important;
}