diff --git a/sophisticated-business/sass/navigation/_next-previous.scss b/sophisticated-business/sass/navigation/_next-previous.scss index fb60aa347..a99a63614 100644 --- a/sophisticated-business/sass/navigation/_next-previous.scss +++ b/sophisticated-business/sass/navigation/_next-previous.scss @@ -3,37 +3,30 @@ // Singular navigation .post-navigation { - margin: calc(3 * 1rem) 0; + margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit; @include media(tablet) { - margin: calc(3 * 1rem) auto; - max-width: calc(6 * (100vw / 12)); + margin: calc(3 * 1rem) auto calc(1rem / 2); + max-width: $size__site-tablet-content; } @include media(desktop) { - margin: calc(3 * 1rem) 0; - max-width: 100%; + max-width: $size__site-desktop-content; } .nav-links { - margin: 0 $size__spacing-unit; + max-width: 100%; display: flex; flex-direction: column; @include media(tablet) { - margin: 0; - } - - @include media(desktop) { flex-direction: row; - margin: 0 auto; - max-width: $size__site-desktop-content; } a { .meta-nav { - color: $color__text-light; + color: $color__text-main; user-select: none; &:before, @@ -41,7 +34,7 @@ display: none; content: "—"; width: 2em; - color: $color__text-light; + color: $color__text-main; height: 1em; } } @@ -55,21 +48,9 @@ } } - .nav-previous, - .nav-next { - - @include media(desktop) { - min-width: calc(50% - 2 * #{$size__spacing-unit}); - } - } - .nav-previous { order: 2; - @include media(desktop) { - order: 1; - } - + .nav-next { margin-bottom: $size__spacing-unit; } @@ -82,11 +63,10 @@ } .nav-next { - order: 1; - - @include media(desktop) { + @include media(tablet) { order: 2; padding-left: $size__spacing-unit; + margin-left: auto; } .meta-nav { diff --git a/sophisticated-business/sass/site/primary/_posts-and-pages.scss b/sophisticated-business/sass/site/primary/_posts-and-pages.scss index 481458961..00f1180a5 100644 --- a/sophisticated-business/sass/site/primary/_posts-and-pages.scss +++ b/sophisticated-business/sass/site/primary/_posts-and-pages.scss @@ -36,9 +36,13 @@ text-align: center; @include media(tablet) { - max-width: $size__site-desktop-content; + max-width: $size__site-tablet-content; margin: calc(3 * #{ $size__spacing-unit}) auto auto; } + + @include media(desktop) { + max-width: $size__site-desktop-content; + } } .entry-title { @@ -103,7 +107,7 @@ max-width: $size__site-tablet-content; } - @include media(tablet) { + @include media(desktop) { max-width: $size__site-desktop-content; } } diff --git a/sophisticated-business/style-rtl.css b/sophisticated-business/style-rtl.css index 4199e71ad..f6ed7ed33 100644 --- a/sophisticated-business/style-rtl.css +++ b/sophisticated-business/style-rtl.css @@ -7,7 +7,7 @@ Author URI: https://automattic.com/ Template: twentynineteen Description: Your classy establishment needs an equally classy website to showcase your delicious food and special concoctions! With its bold typography and chic color scheme, Sophisticated Business exudes the same cool, intimate atmosphere as an upscale bar, lounge, or pub. Requires at least: WordPress 4.9.6 -Version: 1.1 +Version: 1.2 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: sophisticated-business @@ -1623,14 +1623,13 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .post-navigation { margin: calc(3 * 1rem) auto; - max-width: calc(6 * (100vw / 12)); + max-width: calc(8 * (100vw / 12) - 28px); } } @media only screen and (min-width: 1168px) { .post-navigation { - margin: calc(3 * 1rem) 0; - max-width: 100%; + max-width: calc(6 * (100vw / 12) - 28px); } } @@ -2339,11 +2338,17 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .entry .entry-header { - max-width: calc(6 * (100vw / 12) - 28px); + max-width: calc(8 * (100vw / 12) - 28px); margin: calc(3 * 1rem) auto auto; } } +@media only screen and (min-width: 1168px) { + .entry .entry-header { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + .entry .entry-title { margin: 0; } @@ -2409,7 +2414,7 @@ body.page .main-navigation { } } -@media only screen and (min-width: 768px) { +@media only screen and (min-width: 1168px) { .entry .entry-footer { max-width: calc(6 * (100vw / 12) - 28px); } diff --git a/sophisticated-business/style.css b/sophisticated-business/style.css index 4ae83b7c3..3640d083a 100644 --- a/sophisticated-business/style.css +++ b/sophisticated-business/style.css @@ -7,7 +7,7 @@ Author URI: https://automattic.com/ Template: twentynineteen Description: Your classy establishment needs an equally classy website to showcase your delicious food and special concoctions! With its bold typography and chic color scheme, Sophisticated Business exudes the same cool, intimate atmosphere as an upscale bar, lounge, or pub. Requires at least: WordPress 4.9.6 -Version: 1.1 +Version: 1.2 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: sophisticated-business @@ -1617,46 +1617,36 @@ body.page .main-navigation { --------------------------------------------------------------*/ /* Next/Previous navigation */ .post-navigation { - margin: calc(3 * 1rem) 0; + margin: calc(3 * 1rem) 1rem 1rem; } @media only screen and (min-width: 768px) { .post-navigation { - margin: calc(3 * 1rem) auto; - max-width: calc(6 * (100vw / 12)); + margin: calc(3 * 1rem) auto calc(1rem / 2); + max-width: calc(8 * (100vw / 12) - 28px); } } @media only screen and (min-width: 1168px) { .post-navigation { - margin: calc(3 * 1rem) 0; - max-width: 100%; + max-width: calc(6 * (100vw / 12) - 28px); } } .post-navigation .nav-links { - margin: 0 1rem; max-width: 100%; display: flex; flex-direction: column; } @media only screen and (min-width: 768px) { - .post-navigation .nav-links { - margin: 0; - } -} - -@media only screen and (min-width: 1168px) { .post-navigation .nav-links { flex-direction: row; - margin: 0 auto; - max-width: calc(6 * (100vw / 12) - 28px); } } .post-navigation .nav-links a .meta-nav { - color: #cccccc; + color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -1667,7 +1657,7 @@ body.page .main-navigation { display: none; content: "—"; width: 2em; - color: #cccccc; + color: #fff; height: 1em; } @@ -1681,23 +1671,10 @@ body.page .main-navigation { color: #b59439; } -@media only screen and (min-width: 1168px) { - .post-navigation .nav-links .nav-previous, - .post-navigation .nav-links .nav-next { - min-width: calc(50% - 2 * 1rem); - } -} - .post-navigation .nav-links .nav-previous { order: 2; } -@media only screen and (min-width: 1168px) { - .post-navigation .nav-links .nav-previous { - order: 1; - } -} - .post-navigation .nav-links .nav-previous + .nav-next { margin-bottom: 1rem; } @@ -1706,14 +1683,11 @@ body.page .main-navigation { display: inline; } -.post-navigation .nav-links .nav-next { - order: 1; -} - -@media only screen and (min-width: 1168px) { +@media only screen and (min-width: 768px) { .post-navigation .nav-links .nav-next { order: 2; padding-left: 1rem; + margin-left: auto; } } @@ -2345,11 +2319,17 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .entry .entry-header { - max-width: calc(6 * (100vw / 12) - 28px); + max-width: calc(8 * (100vw / 12) - 28px); margin: calc(3 * 1rem) auto auto; } } +@media only screen and (min-width: 1168px) { + .entry .entry-header { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + .entry .entry-title { margin: 0; } @@ -2415,7 +2395,7 @@ body.page .main-navigation { } } -@media only screen and (min-width: 768px) { +@media only screen and (min-width: 1168px) { .entry .entry-footer { max-width: calc(6 * (100vw / 12) - 28px); } diff --git a/sophisticated-business/style.scss b/sophisticated-business/style.scss index 348a43f17..ef836cf74 100644 --- a/sophisticated-business/style.scss +++ b/sophisticated-business/style.scss @@ -6,7 +6,7 @@ Author URI: https://automattic.com/ Template: twentynineteen Description: Your classy establishment needs an equally classy website to showcase your delicious food and special concoctions! With its bold typography and chic color scheme, Sophisticated Business exudes the same cool, intimate atmosphere as an upscale bar, lounge, or pub. Requires at least: WordPress 4.9.6 -Version: 1.1 +Version: 1.2 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: sophisticated-business