MMN
/
pi-www-theme-soho
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Convert rem's to em's in breakpoints to fix layout jerking issue in e.g. iPad and when resizing viewport.

This commit is contained in:
Antti Järvinen 2015-04-08 21:59:45 +03:00
parent 47f2ba81ad
commit 6d6546011f
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
static/css/hyde.css
View File

@ -34,12 +34,12 @@
html { html {
font-family: "PT Sans", Helvetica, Arial, sans-serif; font-family: "PT Sans", Helvetica, Arial, sans-serif;
} }
@media (min-width: 48rem) { @media (min-width: 48em) {
html { html {
font-size: 16px; font-size: 16px;
} }
} }
@media (min-width: 58rem) { @media (min-width: 58em) {
html { html {
font-size: 20px; font-size: 20px;
} }
@ -59,7 +59,7 @@ html {
color: rgba(255,255,255,.5); color: rgba(255,255,255,.5);
background-color: #202020; background-color: #202020;
} }
@media (min-width: 48rem) { @media (min-width: 48em) {
.sidebar { .sidebar {
position: fixed; position: fixed;
top: 0; top: 0;
@ -105,7 +105,7 @@ a.sidebar-nav-item:focus {
* contents to the bottom of the sidebar in tablets and up. * contents to the bottom of the sidebar in tablets and up.
*/ */
@media (min-width: 48rem) { @media (min-width: 48em) {
.sidebar-sticky { .sidebar-sticky {
position: absolute; position: absolute;
right: 1rem; right: 1rem;
@ -126,7 +126,7 @@ a.sidebar-nav-item:focus {
padding-bottom: 4rem; padding-bottom: 4rem;
} }
@media (min-width: 48rem) { @media (min-width: 48em) {
.content { .content {
max-width: 38rem; max-width: 38rem;
margin-left: 20rem; margin-left: 20rem;
@ -134,7 +134,7 @@ a.sidebar-nav-item:focus {
} }
} }
@media (min-width: 64rem) { @media (min-width: 64em) {
.content { .content {
margin-left: 22rem; margin-left: 22rem;
margin-right: 4rem; margin-right: 4rem;
@ -148,7 +148,7 @@ a.sidebar-nav-item:focus {
* Flip the orientation of the page by placing the `.sidebar` on the right. * Flip the orientation of the page by placing the `.sidebar` on the right.
*/ */
@media (min-width: 48rem) { @media (min-width: 48em) {
.layout-reverse .sidebar { .layout-reverse .sidebar {
left: auto; left: auto;
right: 0; right: 0;
@ -159,7 +159,7 @@ a.sidebar-nav-item:focus {
} }
} }
@media (min-width: 64rem) { @media (min-width: 64em) {
.layout-reverse .content { .layout-reverse .content {
margin-left: 4rem; margin-left: 4rem;
margin-right: 22rem; margin-right: 22rem;

6
static/css/poole.css
View File

@ -52,7 +52,7 @@ html {
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
} }
@media (min-width: 38rem) { @media (min-width: 38em) {
html { html {
font-size: 20px; font-size: 20px;
} }
@ -193,7 +193,7 @@ blockquote {
blockquote p:last-child { blockquote p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@media (min-width: 30rem) { @media (min-width: 30em) {
blockquote { blockquote {
padding-right: 5rem; padding-right: 5rem;
padding-left: 1.25rem; padding-left: 1.25rem;
@ -382,7 +382,7 @@ a.pagination-item:hover {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
@media (min-width: 30rem) { @media (min-width: 30em) {
.pagination { .pagination {
margin: 3rem 0; margin: 3rem 0;
} }