Improve landing-page display on small screens
## Before this PR
![image](https://user-images.githubusercontent.com/92586/48776206-1fbe1c80-ecc7-11e8-848c-9a5c33b3d4a8.png)
## After this PR
![image](https://user-images.githubusercontent.com/92586/48776242-3f554500-ecc7-11e8-98cc-6aa2b7c0aaf3.png)
section.cover.show {
/* docsify randomizes backgrounds */
background: #F5F8FA !important;
+ /* coverpage content can be taller than the screen on mobile */
+ height: auto;
+ min-height: 100vh;
+ }
+
+ section.cover .cover-main {
+ /* ensures the logo doesn't get cut off on small screens */
+ margin-top: 4px;
}
section.cover ul {
- display: grid;
- grid-column-gap: 16px;
- grid-template-columns: repeat(2, 50%);
max-width: 60%;
}
text-align: left;
}
+ @media only screen and (min-width: 600px) {
+ section.cover ul {
+ display: grid;
+ grid-column-gap: 16px;
+ grid-template-columns: repeat(2, 50%);
+ }
+
section.cover ul li:nth-child(odd) {
text-align: right;
}
+ }
aside.sidebar strong>a {
font-weight: bold;
