libretic
/
grav-theme-libretic
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial Mediaqueries

This commit is contained in:
Karol Orzeł 2015-01-21 13:29:23 +01:00
parent 21db411871
commit 96975256b1
9 changed files with 211 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
css-compiled/template.css
View File

@ -76,10 +76,18 @@ b, strong, label, th {
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, .modular .footer { .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, .modular .footer {
padding-left: 14rem; padding-left: 14rem;
padding-right: 14rem; } padding-right: 14rem; }
@media only all and (min-width: 60em) and (max-width: 74.938em) {
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, .modular .footer {
padding-left: 7rem;
padding-right: 7rem; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, .modular .footer {
padding-left: 7rem;
padding-right: 7rem; } }
@media only all and (max-width: 47.938em) { @media only all and (max-width: 47.938em) {
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, .modular .footer { .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, .modular .footer {
padding-left: 8rem; padding-left: 5rem;
padding-right: 8rem; } } padding-right: 5rem; } }
.padding-vert { .padding-vert {
padding-top: 3rem; padding-top: 3rem;
@ -96,6 +104,9 @@ b, strong, label, th {
height: 50%; } height: 50%; }
#header .fa { #header .fa {
color: #000; } color: #000; }
@media only all and (max-width: 47.938em) {
#header .logo h3 {
font-size: 1.9rem; } }
#header .search-box { #header .search-box {
display: block; display: block;
float: right; float: right;
@ -137,6 +148,16 @@ b, strong, label, th {
color: transparent; } color: transparent; }
#header .search-box input::-webkit-input-placeholder { #header .search-box input::-webkit-input-placeholder {
color: transparent; } color: transparent; }
@media only all and (max-width: 47.938em) {
#header .search-box {
float: left;
text-align: left; }
#header .search-box i {
left: 0.6rem; }
#header .search-box input[type=search] {
padding-left: 2rem; }
#header .search-box input[type=search]:focus {
width: 8rem; } }
#header #navbar { #header #navbar {
font-size: 1.1rem; } font-size: 1.1rem; }
#header #navbar ul { #header #navbar ul {
@ -182,12 +203,18 @@ b, strong, label, th {
#header #navbar ul.navigation li:hover li.active > a { #header #navbar ul.navigation li:hover li.active > a {
background: #87b672; background: #87b672;
color: #fff; } color: #fff; }
@media only all and (max-width: 59.938em) {
#header #navbar ul.navigation {
display: none; } }
#header #navbar .panel-activation { #header #navbar .panel-activation {
padding: 1rem; padding: 1rem;
display: none; display: none;
font-size: 1.8rem; font-size: 1.8rem;
cursor: pointer; cursor: pointer;
float: right; } float: right; }
@media only all and (max-width: 59.938em) {
#header #navbar .panel-activation {
display: inline-block; } }
.header-image.fullwidth #body { .header-image.fullwidth #body {
padding-left: 0; padding-left: 0;
@ -279,10 +306,10 @@ h1 + h2 {
font-weight: 300; } font-weight: 300; }
@media only all and (min-width: 48em) and (max-width: 59.938em) { @media only all and (min-width: 48em) and (max-width: 59.938em) {
h1 + h2 { h1 + h2 {
font-size: 1.6rem; } } font-size: 1.3rem; } }
@media only all and (max-width: 47.938em) { @media only all and (max-width: 47.938em) {
h1 + h2 { h1 + h2 {
font-size: 1.5rem; } } font-size: 1rem; } }
h2 + h3 { h2 + h3 {
margin: 0.5rem 0 2rem 0; margin: 0.5rem 0 2rem 0;
@ -500,7 +527,8 @@ td {
color: #ddd; } color: #ddd; }
#panel .navigation { #panel .navigation {
list-style: none; list-style: none;
padding: 0; } padding: 0;
margin-left: 0; }
#panel .navigation li { #panel .navigation li {
border-bottom: 1px solid #3d3d3d; } border-bottom: 1px solid #3d3d3d; }
#panel .navigation li a { #panel .navigation li a {
@ -704,8 +732,12 @@ ul.pagination {
color: #FFFFFF; } color: #FFFFFF; }
.modular.header-image #header #navbar a { .modular.header-image #header #navbar a {
color: #FFFFFF; } color: #FFFFFF; }
.modular .slideme { .modular .slideme, .modular .slideme_container {
height: 17rem !important; } height: 17rem !important; }
.modular .slideme:after, .modular .slideme_container:after {
content: "";
display: table;
clear: both; }
.modular .showcase { .modular .showcase {
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -718,19 +750,32 @@ ul.pagination {
.modular .showcase h1 { .modular .showcase h1 {
font-size: 2.2rem; font-size: 2.2rem;
margin-top: 0; margin-top: 0;
padding-left: 14rem;
padding-right: 14rem;
text-transform: uppercase; } text-transform: uppercase; }
@media only all and (min-width: 48em) and (max-width: 59.938em) { @media only all and (min-width: 48em) and (max-width: 59.938em) {
.modular .showcase h1 { .modular .showcase h1 {
font-size: 3rem; } } font-size: 1.5rem; } }
@media only all and (max-width: 47.938em) { @media only all and (max-width: 47.938em) {
.modular .showcase h1 { .modular .showcase h1 {
font-size: 2.5rem; font-size: 1.3rem;
line-height: 1.2; line-height: 1.2;
margin-bottom: 2.5rem; } } padding-left: 0;
padding-right: 0;
margin-left: 4rem;
margin-right: 4rem; } }
.modular .showcase h1 strong, .modular .showcase h1 label, .modular .showcase h1 th { .modular .showcase h1 strong, .modular .showcase h1 label, .modular .showcase h1 th {
color: #87b672; } color: #87b672; }
.modular .showcase h2 { .modular .showcase h2 {
text-transform: none; } text-transform: none;
padding-left: 14rem;
padding-right: 14rem; }
@media only all and (max-width: 47.938em) {
.modular .showcase h2 {
padding-left: 0;
padding-right: 0;
margin-left: 4rem;
margin-right: 4rem; } }
.modular .showcase .button { .modular .showcase .button {
color: #FFFFFF; color: #FFFFFF;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
@ -757,14 +802,28 @@ ul.pagination {
font-size: 2.5rem; font-size: 2.5rem;
opacity: 0.5; opacity: 0.5;
color: #000; } color: #000; }
@media only all and (max-width: 47.938em) {
.modular .slideme_container .arrow {
font-size: 1.5rem;
line-height: 2.8rem; } }
.modular .slideme_container .arrow:hover { .modular .slideme_container .arrow:hover {
opacity: 1; } opacity: 1; }
.modular .slideme_container .arrow.prev { .modular .slideme_container .arrow.prev {
left: 4rem; } left: 4rem; }
@media only all and (max-width: 47.938em) {
.modular .slideme_container .arrow.prev {
left: 1rem; } }
.modular .slideme_container .arrow.next { .modular .slideme_container .arrow.next {
right: 4rem; } right: 4rem; }
@media only all and (max-width: 47.938em) {
.modular .slideme_container .arrow.next {
right: 1rem; } }
.modular .slideme_container .arrow:disabled { .modular .slideme_container .arrow:disabled {
opacity: 0.1; } opacity: 0.1; }
@media only all and (max-width: 47.938em) {
.modular .slideme_container .arrow {
width: 2.7rem;
height: 2.7rem; } }
.modular .slideme_container .arrow.next:before { .modular .slideme_container .arrow.next:before {
content: '\f054'; content: '\f054';
font-family: FontAwesome; font-family: FontAwesome;
@ -1021,6 +1080,9 @@ ul.pagination {
overflow: hidden; overflow: hidden;
clear: both; clear: both;
position: relative; } position: relative; }
@media only all and (max-width: 59.938em) {
.callout {
text-align: center; } }
.callout .callout-line { .callout .callout-line {
background: #fff; background: #fff;
width: 100%; width: 100%;

4
css-compiled/template.css.map
View File

File diff suppressed because one or more lines are too long

3
scss/nucleus/mixins/_breakpoints.scss
View File

@ -21,4 +21,7 @@
@else if $breakpoint == mobile-only { @else if $breakpoint == mobile-only {
@media only #{$media} and (max-width: $tablet-container - 0.062) { @content; } @media only #{$media} and (max-width: $tablet-container - 0.062) { @content; }
} }
@else if $breakpoint == desktop-only {
@media only #{$media} and (max-width: $desktop-container - 0.062) { @content; }
}
} }

15
scss/template/_extensions.scss
View File

@ -5,14 +5,17 @@
.padding-horiz { .padding-horiz {
padding-left: $padding-horiz; padding-left: $padding-horiz;
padding-right: $padding-horiz; padding-right: $padding-horiz;
@include breakpoint(desktop-only) { @include breakpoint(desktop-range) {
padding-left: $padding-horiz - 3rem; padding-left: $padding-horiz - 7rem;
padding-right: $padding-horiz - 3rem; padding-right: $padding-horiz - 7rem;
}
@include breakpoint(tablet-range) {
padding-left: $padding-horiz - 7rem;
padding-right: $padding-horiz - 7rem;
} }
@include breakpoint(mobile-only) { @include breakpoint(mobile-only) {
padding-left: $padding-horiz - 6rem; padding-left: $padding-horiz - 9rem;
padding-right: $padding-horiz - 6rem; padding-right: $padding-horiz - 9rem;
} }
} }

124
scss/template/_header.scss
View File

@ -9,7 +9,6 @@
background-color: rgba(255,255,255,0.90); background-color: rgba(255,255,255,0.90);
box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15); box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15);
// set heights for vertical centering
> .grid, .logo, #navbar, .social-navigation { > .grid, .logo, #navbar, .social-navigation {
height: 50%; height: 50%;
} }
@ -20,6 +19,10 @@
.logo { .logo {
h3 { h3 {
@extend %vertical-align; @extend %vertical-align;
@include breakpoint(mobile-only) {
font-size: 1.9rem;
}
} }
ul { ul {
&.social-icons { &.social-icons {
@ -76,6 +79,21 @@
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: transparent; color: transparent;
} }
@include breakpoint(mobile-only) {
float: left;
text-align: left;
i {
left: 0.6rem;
}
input[type=search] {
padding-left: 2rem;
&:focus {
width: 8rem;
}
}
}
} }
#navbar { #navbar {
@ -108,73 +126,69 @@
padding-left: 0; padding-left: 0;
} }
// Dropdown Menu Styles ul {
ul { display: none;
display: none; padding: 0;
padding: 0; box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15) !important;
box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15) !important; }
}
ul ul { ul ul {
left: 100%; left: 100%;
top: 0; top: 0;
} }
&:hover { &:hover {
& > ul { & > ul {
display: block; display: block;
position: absolute; position: absolute;
background: rgba($white, 0.9); background: rgba($white, 0.9);
width: 10rem; width: 10rem;
} }
li { li {
float: none; float: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
a { a {
padding: 0.5rem 0.8rem; padding: 0.5rem 0.8rem;
display: block; display: block;
&:before, &:after { &:before, &:after {
display: none; display: none;
} }
}
&.active {
& > a {
background: $core-accent;
color: $white;
}
}
}
}
}
@include breakpoint(desktop-only) {
display: none;
}
}
} }
&.active { .panel-activation {
& > a { @extend %vertical-align;
background: $core-accent; padding: 1rem;
color: $white; display: none;
font-size: 1.8rem;
cursor: pointer;
float: right;
@include breakpoint(desktop-only) {
display: inline-block;
} }
} }
} }
} }
}
@include breakpoint(desktop-only) {
display: none;
}
}
}
.panel-activation {
@extend %vertical-align;
padding: 1rem;
display: none;
font-size: 1.8rem;
cursor: pointer;
float: right;
@include breakpoint(desktop-only) {
display: inline-block;
}
}
}
}
// Header Image
.header-image { .header-image {
&.fullwidth { &.fullwidth {
#body { #body {

1
scss/template/_panel.scss
View File

@ -12,6 +12,7 @@ $panel-text: #ddd;
.navigation { .navigation {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin-left: 0;
li { li {
a { a {

4
scss/template/_typography.scss
View File

@ -68,10 +68,10 @@ h1 + h2 {
margin: -2rem 0 2rem 0; margin: -2rem 0 2rem 0;
font-size: 1.4rem; font-size: 1.4rem;
@include breakpoint(tablet-range) { @include breakpoint(tablet-range) {
font-size: 1.6rem; font-size: 1.3rem;
} }
@include breakpoint(mobile-only) { @include breakpoint(mobile-only) {
font-size: 1.5rem; font-size: 1rem;
} }
line-height: 1; line-height: 1;
text-align: center; text-align: center;

61
scss/template/modular/_showcase.scss
View File

@ -15,11 +15,10 @@
} }
} }
} }
.slideme, .slideme_container {
.slideme {
height: $header-height + 5rem !important; height: $header-height + 5rem !important;
@include clearfix;
} }
.showcase { .showcase {
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -33,13 +32,18 @@
h1 { h1 {
font-size: 2.2rem; font-size: 2.2rem;
margin-top: 0; margin-top: 0;
padding-left: $padding-horiz;
padding-right: $padding-horiz;
@include breakpoint(tablet-range) { @include breakpoint(tablet-range) {
font-size: 3rem; font-size: 1.5rem;
} }
@include breakpoint(mobile-only) { @include breakpoint(mobile-only) {
font-size: 2.5rem; font-size: 1.3rem;
line-height: 1.2; line-height: 1.2;
margin-bottom: 2.5rem; padding-left: 0;
padding-right: 0;
margin-left: 4rem;
margin-right: 4rem;
} }
strong { strong {
color: $core-accent; color: $core-accent;
@ -48,6 +52,14 @@
} }
h2 { h2 {
text-transform: none; text-transform: none;
padding-left: $padding-horiz;
padding-right: $padding-horiz;
@include breakpoint(mobile-only) {
padding-left: 0;
padding-right: 0;
margin-left: 4rem;
margin-right: 4rem;
}
} }
.button { .button {
@extend .default-animation; @extend .default-animation;
@ -69,11 +81,42 @@
.slideme_container { .slideme_container {
.arrow { .arrow {
@extend .default-animation; @extend .default-animation;
position: absolute;display: block;width: 3.7rem;height: 3.7rem;cursor: pointer;z-index: 50;text-align: center;line-height: 3.8rem;background: $white;top: 10%;border-radius: 100%;font-size: 2.5rem;opacity: 0.5;color: $black; position: absolute;
display: block;
width: 3.7rem;
height: 3.7rem;
cursor: pointer;
z-index: 50;
text-align: center;
line-height: 3.8rem;
background: $white;
top: 10%;
border-radius: 100%;
font-size: 2.5rem;
opacity: 0.5;
color: $black;
@include breakpoint(mobile-only) {
font-size: 1.5rem;
line-height: 2.8rem;
}
&:hover {opacity: 1;} &:hover {opacity: 1;}
&.prev {left: 4rem;} &.prev {
&.next {right: 4rem;} left: 4rem;
@include breakpoint(mobile-only) {
left: 1rem;
}
}
&.next {
right: 4rem;
@include breakpoint(mobile-only) {
right: 1rem;
}
}
&:disabled {opacity: 0.1} &:disabled {opacity: 0.1}
@include breakpoint(mobile-only) {
width: 2.7rem;
height: 2.7rem;
}
} }
.arrow.next:before {content: '\f054';font-family: FontAwesome;margin-left: 0.4rem;} .arrow.next:before {content: '\f054';font-family: FontAwesome;margin-left: 0.4rem;}
.arrow.prev:before {content: '\f053';font-family: FontAwesome;margin-right: 0.5rem;} .arrow.prev:before {content: '\f053';font-family: FontAwesome;margin-right: 0.5rem;}

1
templates/modular.html.twig
View File

@ -34,6 +34,7 @@
<li class="{{ current_module }}"><a href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li> <li class="{{ current_module }}"><a href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
<span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
{% else %} {% else %}
{{ parent() }} {{ parent() }}
{% endif %} {% endif %}