Skip to content

verso-manual: Increase responsive layout breakpoints #686

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AmateurECE wants to merge 1 commit into
base: main
Choose a base branch
from
Open

verso-manual: Increase responsive layout breakpoints #686

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/verso-manual/VersoManual/Html/Style.lean
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ header {
padding-left: .5rem;
}

@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
.header-logo-wrapper {
display: none;
}
Expand Down Expand Up @@ -174,7 +174,7 @@ header {
}
}

@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
/* There's no header logo on mobile, so the title just needs to reserve space for the burger */
.header-title {
margin-left: calc(var(--verso-burger-width) + 1.5rem); /* There's 0.5 rem padding on the burger, and we want some space */
Expand Down Expand Up @@ -215,7 +215,7 @@ main [id] {
}

/** Mobile **/
@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
.with-toc > main {
padding-left: 0;
}
Expand All @@ -233,7 +233,7 @@ main [id] {
display: none;
}

@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
.toc-backdrop {
display: block;
}
Expand All @@ -258,7 +258,7 @@ main [id] {
width: var(--verso-toc-width);
}

@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
#toc {
/* Push the toc off the page on mobile */
right: 100%;
Expand Down Expand Up @@ -510,7 +510,7 @@ main [id] {
display: none;
}

@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
#toggle-toc-click {
display: inline-flex;
cursor: pointer;
Expand Down Expand Up @@ -692,7 +692,7 @@ main > section {
position: relative;
}

@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
/* Remove extra margin on mobile. */
main > section > :first-child {
margin-top: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/verso-manual/VersoManual/Index.lean
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,7 +448,7 @@ where
scroll-margin-top: calc(var(--verso-header-height) + 7.5rem);
}

@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
/* On mobile, the sticky index takes up half the screen. */
main .theIndex nav {
position: static;
Expand Down
10 changes: 5 additions & 5 deletions static-web/search/search-box.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
--selected-color: var(--verso-selected-color, #def);
}

@media screen and (700px < width) {
@media screen and (992px < width) {
:root {
--search-bar-width: 24rem;
}
}

@media screen and (width <= 700px) {
@media screen and (width <= 992px) {
:root {
--search-bar-width: 12rem;
}
Expand Down Expand Up @@ -104,7 +104,7 @@

/* Couple the domain tighter with the search term on smaller screens,
otherwise it's easy to get lost in the results. */
@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
#search-wrapper .search-result {
gap: 0;
padding: 0.3rem 0.2rem;
Expand Down Expand Up @@ -135,7 +135,7 @@

/* Couple the domain tighter with the search term on smaller screens,
otherwise it's easy to get lost in the results. */
@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
#search-wrapper [role="listbox"].focus li[aria-selected="true"],
#search-wrapper .search-result:hover {
padding-bottom: calc(0.3rem - 1px);
Expand Down Expand Up @@ -187,7 +187,7 @@

/* Couple the domain tighter with the search term on smaller screens,
otherwise it's easy to get lost in the results. */
@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
#search-wrapper .search-result .domain {
text-align: left;
}
Expand Down
4 changes: 2 additions & 2 deletions static-web/search/search-highlight.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
display: flex;
}

@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
#highlight-controls {
width: 100%;
bottom: 0px;
Expand All @@ -46,7 +46,7 @@
border: 1px solid #ddd;
}

@media screen and (max-width: 700px) {
@media screen and (max-width: 992px) {
/* Touch-friendly sizing */
#highlight-prev,
#highlight-next,
Expand Down
Loading