language-servers/roc
1
0
Fork 0
mirror of https://github.com/roc-lang/roc.git synced 2025-09-29 06:44:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

Fix some docs styles on mobile

Browse source
This commit is contained in:
Richard Feldman 2021-03-26 08:21:32 -04:00
parent 6e95d05a57
commit e0e08110f1
1 changed files with 39 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

83
docs/src/static/styles.css
View file

@ -66,16 +66,14 @@ a:hover {
}
.pkg-and-logo {
min-width: 0;
/* necessary for text-overflow: ellipsis to work in descendants */
min-width: 0; /* necessary for text-overflow: ellipsis to work in descendants */
display: flex;
align-items: center;
height: 100%;
background-color: var(--top-bar-bg);
}
.pkg-and-logo a,
.pkg-and-logo a:visited {
.pkg-and-logo a, .pkg-and-logo a:visited {
color: var(--top-bar-fg);
}
@ -84,18 +82,11 @@ a:hover {
text-decoration: none;
}
.main-container {
min-width: 0;
/* necessary for text-overflow: ellipsis to work in descendants */
}
.search-button {
flex-shrink: 0;
/* always shrink the package name before these; they have a relatively constrained length */
flex-shrink: 0; /* always shrink the package name before these; they have a relatively constrained length */
padding: 12px 18px;
margin-right: 42px;
display: none;
/* only show this in the mobile view */
display: none; /* only show this in the mobile view */
}
.version {
@ -127,6 +118,8 @@ main {
line-height: 1.85em;
margin-top: 2px;
padding: 48px;
min-width: 0; /* necessary for text-overflow: ellipsis to work in descendants */
}
#sidebar-nav {
@ -165,8 +158,7 @@ main {
font-family: var(--font-sans);
font-size: 24px;
height: 100%;
min-width: 0;
/* necessary for text-overflow: ellipsis to work in descendants */
min-width: 0; /* necessary for text-overflow: ellipsis to work in descendants */
}
.top-header-triangle {
@ -181,8 +173,8 @@ main {
}
p {
overflow-wrap: break-word;
margin: 24px 0;
overflow-wrap: break-word;
margin: 24px 0;
}
footer {
@ -240,8 +232,7 @@ footer p {
margin-bottom: 48px;
}
.module-name a,
.module-name a:visited {
.module-name a, .module-name a:visited {
color: inherit;
}
@ -259,8 +250,7 @@ footer p {
text-overflow: ellipsis;
}
a,
a:visited {
a, a:visited {
color: var(--link-color);
}
@ -325,20 +315,19 @@ pre code {
height: 0;
}
#module-search,
#module-search:focus {
#module-search, #module-search:focus {
opacity: 1;
padding: 12px 16px;
height: 48px;
}
/* Show the "Search" label link when the text input has a placeholder */
#module-search:placeholder-shown+#search-link {
#module-search:placeholder-shown + #search-link {
display: flex;
}
/* Hide the "Search" label link when the text input has focus */
#module-search:focus+#search-link {
#module-search:focus + #search-link {
display: none;
}
@ -398,13 +387,13 @@ pre code {
}
}
@media only screen and (max-device-width: 480px) {
@media only screen and (max-device-width: 480px) and (orientation: portrait) {
.search-button {
display: block;
/* This is only visible in mobile. */
display: block; /* This is only visible in mobile. */
}
.top-header {
justify-content: space-between;
width: auto;
}
@ -443,21 +432,19 @@ pre code {
}
main {
grid-column-start: none;
grid-column-end: none;
grid-row-start: above-footer;
grid-row-end: above-footer;
padding: 18px;
font-size: 16px;
}
.container {
margin: 0;
min-width: 320px;
max-width: 100%;
}
.content {
flex-direction: column;
}
.sidebar {
#sidebar-nav {
grid-column-start: none;
grid-column-end: none;
grid-row-start: sidebar;
grid-row-end: sidebar;
margin-top: 0;
padding-left: 0;
width: auto;
@ -478,12 +465,20 @@ pre code {
font-size: 16px;
}
.top-header {
justify-content: space-between;
}
body {
grid-template-columns: auto;
grid-template-rows: [top-header] var(--top-header-height) [before-sidebar] auto [sidebar] auto [main-content] auto [above-footer] auto [footer] auto;
/* [before-sidebar] 1fr [sidebar] var(--sidebar-width) [main-content] fit-content(calc(1280px - var(--sidebar-width))) [end] 1fr; */
margin: 0;
min-width: 320px;
max-width: 100%;
.content {
/* Display the sidebar below <main> without affecting tab index */
flex-direction: column-reverse;
}
}
.top-header-triangle {
display: none;
}
}