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