libretic/grav-theme-libretic
6
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Initial Mediaqueries

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

124
scss/template/_header.scss
View file

@ -9,7 +9,6 @@
background-color: rgba(255,255,255,0.90);
box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15);
// set heights for vertical centering
> .grid, .logo, #navbar, .social-navigation {
height: 50%;
}
@ -20,6 +19,10 @@
.logo {
h3 {
@extend %vertical-align;
@include breakpoint(mobile-only) {
font-size: 1.9rem;
}
}
ul {
&.social-icons {
@ -76,6 +79,21 @@
input::-webkit-input-placeholder {
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 {
@ -108,73 +126,69 @@
padding-left: 0;
}
// Dropdown Menu Styles
ul {
display: none;
padding: 0;
box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15) !important;
}
ul {
display: none;
padding: 0;
box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15) !important;
}
ul ul {
left: 100%;
top: 0;
}
ul ul {
left: 100%;
top: 0;
}
&:hover {
& > ul {
display: block;
position: absolute;
background: rgba($white, 0.9);
width: 10rem;
}
&:hover {
& > ul {
display: block;
position: absolute;
background: rgba($white, 0.9);
width: 10rem;
}
li {
float: none;
margin: 0;
padding: 0;
li {
float: none;
margin: 0;
padding: 0;
a {
padding: 0.5rem 0.8rem;
display: block;
a {
padding: 0.5rem 0.8rem;
display: block;
&:before, &:after {
display: none;
}
&:before, &:after {
display: none;
}
}
&.active {
& > a {
background: $core-accent;
color: $white;
}
}
}
}
}
@include breakpoint(desktop-only) {
display: none;
}
}
}
&.active {
& > a {
background: $core-accent;
color: $white;
.panel-activation {
@extend %vertical-align;
padding: 1rem;
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 {
&.fullwidth {
#body {

1
scss/template/_panel.scss
View file

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

4
scss/template/_typography.scss
View file

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

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

@ -15,11 +15,10 @@
}
}
}
.slideme {
.slideme, .slideme_container {
height: $header-height + 5rem !important;
@include clearfix;
}
.showcase {
position: relative;
z-index: 1;
@ -33,13 +32,18 @@
h1 {
font-size: 2.2rem;
margin-top: 0;
padding-left: $padding-horiz;
padding-right: $padding-horiz;
@include breakpoint(tablet-range) {
font-size: 3rem;
font-size: 1.5rem;
}
@include breakpoint(mobile-only) {
font-size: 2.5rem;
font-size: 1.3rem;
line-height: 1.2;
margin-bottom: 2.5rem;
padding-left: 0;
padding-right: 0;
margin-left: 4rem;
margin-right: 4rem;
}
strong {
color: $core-accent;
@ -48,6 +52,14 @@
}
h2 {
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 {
@extend .default-animation;
@ -69,11 +81,42 @@
.slideme_container {
.arrow {
@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;}
&.prev {left: 4rem;}
&.next {right: 4rem;}
&.prev {
left: 4rem;
@include breakpoint(mobile-only) {
left: 1rem;
}
}
&.next {
right: 4rem;
@include breakpoint(mobile-only) {
right: 1rem;
}
}
&: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.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>
{% endfor %}
</ul>
<span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
{% else %}
{{ parent() }}
{% endif %}