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"> <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"> <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> <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"> <span class="site-mobile-title title-bar-title">

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

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