freifunk/hamburg-freifunk-wp-theme
0
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor media queries (mobile first). improve smallscreen/desktop stylez

Browse source
This commit is contained in:
ut 2019-02-08 21:47:28 +01:00
parent 92abbba31e
commit a145be0b67
3 changed files with 73 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
header.php
View file

@ -25,7 +25,7 @@
<header class="site-header" role="banner">
<div class="site-title-bar title-bar" <?php foundationpress_title_bar_responsive_toggle(); ?>>
<div class="site-title-bar title-bar" data-responsive-toggle="mobile-menu" data-hide-for="large">
<div class="title-bar-left">
<button aria-label="<?php _e( 'Main Menu', 'foundationpress' ); ?>" class="menu-icon" type="button" data-toggle="<?php foundationpress_mobile_menu_id(); ?>"></button>
<span class="site-mobile-title title-bar-title">

9
src/assets/scss/modules/_navigation.scss
View file

@ -1,12 +1,17 @@
// Navigation breakpoints
.mobile-menu,
.site-title-bar {
@include hide-for(medium);
/* @include hide-for(medium); */
/* display: none !important; */
@include hide-for(large);
}
.desktop-menu,
.site-navigation .top-bar-left {
@include show-for(medium);
/* @include show-for(medium); */
/* display: block !important; */
@include show-for(large);
}
// Site title

105
src/assets/scss/templates/freifunk.scss
View file

@ -1,8 +1,17 @@
/* hamburg-freifunk-wp-theme (2018) */
/* hamburg-freifunk-wp-theme (2019) */
$freifunk-color-magenta: rgb(220,0,103);
$freifunk-color-yellow: rgb(255,180,0);
$freifunk-color-blue: rgb(0,158,224);
$dark-color: #2C3840;
$verylarge-up: "(min-width: 74.063em)";
$large-only: "(max-width: 74.063em) and (min-width: 64.063em)";
$large-up: "(min-width: 64.063em)";
$medium-only: "(max-width: 64.063em) and (min-width: 43em)";
$medium-up: "(min-width: 43em)";
$small-only: "(max-width: 43em)";
body {
font-family: hk_groteskmedium, "Helvetica Neue", sans-serif;
@ -22,12 +31,13 @@ h6 {
p, li, blockquote {
margin-bottom: 1rem;
font-size: inherit;
line-height: 1.6;
text-rendering: optimizeLegibility;
font-size: 17px;
@media screen and (max-width: 39.9375em) {
line-height: 1.5;
font-size: 18px;
font-size: 18px;
line-height: 1.5;
word-break: break-word;
@media screen and #{$large-up} {
font-size: 17px;
line-height: 1.6;
}
}
@ -52,10 +62,11 @@ header.site-header {
.title-bar-title {
padding-left: 5px;
position: relative;
vertical-align: sub;
}
.top-bar-outer {
background-color: #2C3840;
background-color: $dark-color;
nav.top-bar {
max-width: 90rem;
@ -120,14 +131,21 @@ header.site-header {
}
}
.top-bar-right {
background-color: #2C3840;
background-color: $dark-color;
margin-top: 0;
@media screen and (min-width: 39.9375em) {
margin-top: 30px;
@media screen and #{$large-up} {
margin-top: 40px;
}
@media screen and #{$verylarge-up} {
margin-top: 0;
}
.menu {
margin-right: 1rem;
margin-top: 100px;
margin-top: 110px;
margin-bottom: 10px;
@media screen and #{$large-up} {
margin-top: 0;
}
li, li:not(:last-child), li:not(.menu-text) {
border-right: 0px solid #4e4e4e;
@ -184,10 +202,11 @@ header.site-header {
.main-container {
margin-top: 235px;
margin-top: 20px;
margin-left: 30px;
@media screen and (max-width: 39.9375em) {
margin-top: 20px;
@media screen and #{$large-up} {
margin: 235px auto 0;
}
.entry-content {
margin-bottom: 50px;
@ -206,11 +225,16 @@ header.site-header {
}
}
h1.entry-title, h2.entry-title {
margin-left: -16px;
color: #dc0067;
color: $freifunk-color-magenta;
@media screen and (max-width: 39.9375em) {
font-size: 1.55rem;
margin-left: -8px;
line-height: 1.2;
margin-left: 0;
text-indent: -42px;
font-size: 1.55rem;
@media screen and #{$large-up} {
margin-left: 33px;
text-indent: -49px;
font-size: 2.5rem;
}
}
h1.entry-title::before,
@ -219,13 +243,17 @@ header.site-header {
display: inline-block;
color: #ffb400;
line-height: 0;
transform: scale(0.82);
vertical-align: -5px;
width: 48px;
@media screen and (max-width: 39.9375em) {
transform: scale(0.55);
vertical-align: -10px;
width: 42px;
transform: scale(0.55);
vertical-align: -10px;
width: 42px;
padding-right: 0px;
text-align: right;
@media screen and #{$large-up} {
transform: scale(0.82);
vertical-align: -5px;
width: 50px;
padding-right: 10px;
}
@ -234,23 +262,20 @@ header.site-header {
article p {
margin-left: 32px;
margin-right: 65px;
@media screen and (max-width: 39.9375em) {
margin-left: 0;
margin-right: 0;
margin-left: 0;
margin-right: 0;
@media screen and #{$large-up} {
margin-left: 32px;
margin-right: 65px;
}
}
p.edit-link,
p.byline.author {
color: #644;
font-size: 15px;
@media screen and (max-width: 39.9375em) {
font-size: 15px;
@media screen and #{$large-up} {
}
a {
color: #644;
@ -291,13 +316,13 @@ header.site-header {
display: inline-block;
color: #ffb400;
line-height: 0;
transform: scale(0.6);
transform: scale(0.5);
vertical-align: -10px;
width: 38px;
@media screen and (max-width: 39.9375em) {
transform: scale(0.5);
width: 42px;
@media screen and #{$large-up} {
transform: scale(0.6);
vertical-align: -10px;
width: 42px;
width: 38px;
}
}
}