Last active
May 18, 2018 09:26
-
-
Save garrett/589fcb885d4556e5ccbed7ab3fc23c11 to your computer and use it in GitHub Desktop.
vim.org responsive hacks (for mobile support)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
td { | |
/* Bump up line height to make text easier to read */ | |
line-height: 1.4; | |
} | |
img:not([src*=spacer]) { | |
/* Non-spacer images should fit the width and scale down if necessary */ | |
max-width: 100%; | |
height: auto; | |
} | |
.roweven, | |
.rowodd { | |
/* Force wrapping to better use space in tables (mainly for download tables) */ | |
white-space: normal; | |
word-wrap: break-word; | |
} | |
.roweven:last-child, | |
.rowodd:last-child { | |
/* Content descriptions should be wrapped at 72 characters */ | |
max-width: 72ch; | |
} | |
@supports (display: grid) { | |
@media screen and (max-width: 800px) { | |
body > table > tbody > tr[valign=top] { | |
/* Table used for layout; let's override this to reformat the doc */ | |
display: grid; | |
} | |
body > table > tbody > tr[valign=top] > .sidebar:first-child { | |
/* Left sidebar */ | |
} | |
body > table > tbody > tr[valign=top] > .sidebar:first-child > table { | |
/* Sidebar should fill available space */ | |
width: 100%; | |
} | |
body > table > tbody > tr[valign=top] > .sidebar:first-child table > tbody { | |
/* Wrap sidebar items */ | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: center; | |
align-items: baseline; | |
} | |
body > table > tbody > tr[valign=top] > .sidebar:first-child table > tbody > tr:nth-child(2) { | |
/* Put search on its own line and center it */ | |
width: 100%; | |
justify-content: center; | |
} | |
.download { | |
/* Download styling messes with layout, plus downloading on a phone is odd anyway. Let's reset it. */ | |
padding: 0; | |
background: inherit; | |
} | |
.sidebarheader { | |
/* Selected item inherits sidebarheader properties */ | |
color: #333; | |
padding: 0 0.5ex; | |
} | |
body > table > tbody > tr[valign=top] > .sidebar:first-child > table tbody > tr { | |
/* Flow sidebar TRs */ | |
display: flex; | |
} | |
body > table > tbody > tr[valign=top] > .sidebar:last-child { | |
/* Ad sidebar */ | |
} | |
body > table > tbody > tr[valign=top] > td:not([class]) { | |
/* Body area */ | |
} | |
body > table > tbody > tr[valign=top] > td:not([class]) tr { | |
/* Deconstruct in-body tables too */ | |
display: grid; | |
} | |
body > table > tbody > tr[valign=top] > td:not([class]) td { | |
/* Content area table parts should not get too wide */ | |
width: auto; | |
max-width: 100vw; | |
} | |
.sidebar .darkbg { | |
/* .darkbg doesn't work as intended as dividers in the sidebar */ | |
display: none; | |
} | |
.example { | |
/* Make example <pre>s scrollable, if needed */ | |
overflow: auto; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment