beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Morden: Update responsive logic to fix alignwide issues and make outerwrapper flexible width up to 1200px, fix typo in google font url

Browse source
This commit is contained in:
Allan Cole 2019-08-19 19:59:40 -04:00
parent 5d48d84c99
commit ec4a731e63
4 changed files with 67 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
morden/functions.php
View file

@ -136,7 +136,7 @@ function morden_fonts_url() {
if ( 'off' !== $notosans ) {
$font_families = array();
$font_families[] = 'Noto+Sans:400,400i,700,700i';
$font_families[] = 'Noto Sans:400,400i,700,700i';
$query_args = array(
'family' => urlencode( implode( '|', $font_families ) ),

16
morden/sass/_extra-child-theme.scss
View file

@ -24,10 +24,21 @@ a {
margin-left: auto;
margin-right: auto;
@extend %responsive-alignwide;
@include media(mobile) {
box-shadow: 0 0 30px rgba(#000, 0.2);
max-width: 95vw;
}
@include media(tablet) {
max-width: 92vw;
}
@include media(desktop) {
max-width: 87vw;
}
@include media(wide) {
max-width: 1200px;
}
}
@ -281,6 +292,7 @@ body {
// alignwide spaceing
.entry-content > .alignwide {
@include media(mobile) {
width: 100%;
padding-left: #{2 * map-deep-get($config-global, "spacing", "unit")};
padding-right: #{2 * map-deep-get($config-global, "spacing", "unit")};
}

32
morden/style-rtl.css
View file

@ -3194,7 +3194,7 @@ img#wpstats {
}
}
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(100% + 256px);
max-width: calc(100vw - 32px);
margin-right: auto;
@ -3202,35 +3202,35 @@ img#wpstats {
}
@media only screen and (min-width: 560px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 560px - 32px) + 256px);
max-width: calc(100vw - 32px);
}
}
@media only screen and (min-width: 640px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 640px - 32px) + 256px);
max-width: calc(100vw - 32px);
}
}
@media only screen and (min-width: 782px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100vw - 32px);
}
}
@media only screen and (min-width: 1024px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100vw - 32px);
}
}
@media only screen and (min-width: 1280px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100vw - 32px);
}
@ -3395,6 +3395,25 @@ p:not(.site-title) a:hover {
@media only screen and (min-width: 560px) {
#page {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
max-width: 95vw;
}
}
@media only screen and (min-width: 640px) {
#page {
max-width: 92vw;
}
}
@media only screen and (min-width: 1024px) {
#page {
max-width: 87vw;
}
}
@media only screen and (min-width: 1280px) {
#page {
max-width: 1200px;
}
}
@ -3628,6 +3647,7 @@ p:not(.site-title) a:hover {
@media only screen and (min-width: 560px) {
.entry-content > .alignwide {
width: 100%;
padding-right: 32px;
padding-left: 32px;
}

32
morden/style.css
View file

@ -3198,7 +3198,7 @@ img#wpstats {
}
}
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(100% + 256px);
max-width: calc(100vw - 32px);
margin-left: auto;
@ -3206,35 +3206,35 @@ img#wpstats {
}
@media only screen and (min-width: 560px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 560px - 32px) + 256px);
max-width: calc(100vw - 32px);
}
}
@media only screen and (min-width: 640px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 640px - 32px) + 256px);
max-width: calc(100vw - 32px);
}
}
@media only screen and (min-width: 782px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100vw - 32px);
}
}
@media only screen and (min-width: 1024px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100vw - 32px);
}
}
@media only screen and (min-width: 1280px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100vw - 32px);
}
@ -3411,6 +3411,25 @@ p:not(.site-title) a:hover {
@media only screen and (min-width: 560px) {
#page {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
max-width: 95vw;
}
}
@media only screen and (min-width: 640px) {
#page {
max-width: 92vw;
}
}
@media only screen and (min-width: 1024px) {
#page {
max-width: 87vw;
}
}
@media only screen and (min-width: 1280px) {
#page {
max-width: 1200px;
}
}
@ -3644,6 +3663,7 @@ p:not(.site-title) a:hover {
@media only screen and (min-width: 560px) {
.entry-content > .alignwide {
width: 100%;
padding-left: 32px;
padding-right: 32px;
}