Skip to content
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

Increase mobile breakpoint #40

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Increase mobile breakpoint #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b769b3e
Unify side bar queries into a single query
rossjrw Dec 16, 2020
cfefb45
Extract mobile topbar queries into a new section
rossjrw Dec 18, 2020
fe6f0ff
Change the mobile sidebar and topbar breakpoints to 1024px
rossjrw Dec 18, 2020
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
1 change: 1 addition & 0 deletions .stylelintrc.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ rules:
rule-empty-line-before:
- always
- except: ['after-single-line-comment', 'first-nested']
ignore: ['after-comment']
property-case: lower
value-keyword-case: lower
string-quotes: single
Expand Down
257 changes: 106 additions & 151 deletions sigma9.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ a.newpage {
left: 1em;
bottom: 0;
z-index: 0;
max-width: 90%;
}

body {
Expand Down Expand Up @@ -327,17 +328,40 @@ sup {
color: #a01;
}

.top-bar ul li:last-of-type ul {
/* The last dropdown in the topbar should point to the left to avoid
* potentially overflowing offscreen */
.top-bar ul li:last-of-type ul,
.mobile-top-bar ul li:last-of-type ul {
right: 0;
}

@media (max-width: 1023px) {
/* On mobile, show the mobile top bar instead of the regular one */
.mobile-top-bar {
display: block;
}

.top-bar {
display: none;
}
}

@media (max-width: 385px) {
/* At very small screen sizes, increase the width of the mobile top bar to
* avoid the links overflowing onto a new line */
.mobile-top-bar {
width: 100%;
}
}

/* IE7 HACK */
#top-bar ul > li > ul {
*margin-top: -4px;
}

/* SIDE MENU */
#side-bar {
display: block;
clear: none;
float: none;
position: absolute;
Expand All @@ -346,7 +370,6 @@ sup {
width: 17em;
padding: 0;
border: none;
display: block;
overscroll-behavior: none;
}

Expand Down Expand Up @@ -445,6 +468,78 @@ sup {
padding: 0 5px 0;
}

.close-menu {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .3) 1px 1px repeat;
z-index: -1;
}

/* The button that shows the sidebar on mobile */
#top-bar .open-menu a {
position: fixed;
top: .5em;
left: .5em;
z-index: 15;
font-family: 'Nanum Gothic', sans-serif;
font-size: 30px;
font-weight: 700;
width: 30px;
height: 30px;
line-height: .9em;
text-align: center;
border: .2em solid #888;
background-color: #fff;
border-radius: 3em;
color: #888;
}

#top-bar .open-menu a:hover {
text-decoration: none;
box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
}

@media (max-width: 1023px) {
/* On mobile, the sidebar is tucked away to the left */
#side-bar {
position: fixed;
top: 0;
left: -25em;
height: 100%;
background-color: rgb(184, 134, 134);
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
transition: left .5s ease-in-out .1s;
}

/* XXX What is this for? */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change to TODO? XXX should be for development, not added to master.

#side-bar::after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 100%;
background-color: rgba(0, 0, 0, .2);
}

/* When the sidebar is the URL target, move it to the right */
#side-bar:target {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a comment explaining that this is why we have the page#side-bar addition?

left: 0;
border: 1px solid #dedede;
z-index: 10;
}

/* When the sidebar is the URL target, show the darkened close area */
#side-bar:target .close-menu {
display: block;
}
}

/* CONTENT */
#main-content {
margin: 0 2em 0 22em;
Expand Down Expand Up @@ -1069,10 +1164,6 @@ img, embed, video, object, iframe, table {
float: left;
}

.mobile-top-bar ul li:last-of-type ul {
right: 0;
}

span, a {
word-break: break-all;
}
Expand All @@ -1096,22 +1187,10 @@ img, embed, video, object, iframe, table {
width: 100%;
}

#header, .mobile-top-bar {
#header {
max-width: 90%;
}

#side-bar {
width: 80%;
position: relative;
}

.top-bar {
display: none;
}

.mobile-top-bar {
display: block;
padding: 0;
background-position: 0 5.5em;
background-size: 55px 55px;
}

.page-options-bottom a {
Expand All @@ -1130,11 +1209,6 @@ img, embed, video, object, iframe, table {
font-size: .8em;
}

#header {
background-position: 0 5.5em;
background-size: 55px 55px;
}

#header h1, #header h2 {
margin-left: 66px;
}
Expand Down Expand Up @@ -1183,10 +1257,6 @@ img, embed, video, object, iframe, table {
max-width: 100%;
}

.mobile-top-bar {
width: 100%;
}

#top-bar li a {
padding: 10px .5em;
}
Expand All @@ -1202,21 +1272,10 @@ img, embed, video, object, iframe, table {
margin: 0 2em 0 2em;
}

#header, .mobile-top-bar {
#header {
max-width: 90%;
}

#side-bar {
width: 80%;
position: relative;
}

.top-bar {
display: none;
}

.mobile-top-bar {
display: block;
background-position: .5em 4.5em;
background-size: 66px 66px;
}

.page-options-bottom a {
Expand All @@ -1235,11 +1294,6 @@ img, embed, video, object, iframe, table {
font-size: .85em;
}

#header {
background-position: .5em 4.5em;
background-size: 66px 66px;
}

#header h1, #header h2 {
margin-left: 80px;
}
Expand Down Expand Up @@ -1268,25 +1322,14 @@ img, embed, video, object, iframe, table {
width: 8em;
}

#side-bar {
width: 80%;
position: relative;
}

#main-content {
margin: 0 3em 0 2em;
}

#header, .mobile-top-bar {
#header {
max-width: 90%;
}

.top-bar {
display: none;
}

.mobile-top-bar {
display: block;
background-position: 1em 4em;
background-size: 77px 77px;
}

.page-options-bottom a {
Expand All @@ -1301,11 +1344,6 @@ img, embed, video, object, iframe, table {
font-size: .9em;
}

#header {
background-position: 1em 4em;
background-size: 77px 77px;
}

#header h1, #header h2 {
margin-left: 93px;
}
Expand Down Expand Up @@ -1361,11 +1399,6 @@ img, embed, video, object, iframe, table {
}
}

/* off-canvas */
.close-menu {
display: none;
}

@media (max-width: 767px) {
.page-history tbody tr td:last-child {
width: 35%;
Expand Down Expand Up @@ -1401,33 +1434,6 @@ img, embed, video, object, iframe, table {
display: none;
}

#top-bar .open-menu a {
position: fixed;
top: .5em;
left: .5em;
z-index: 15;
font-family: 'Nanum Gothic', sans-serif;
font-size: 30px;
font-weight: 700;
width: 30px;
height: 30px;
line-height: .9em;
text-align: center;
border: .2em solid #888;
background-color: #fff;
border-radius: 3em;
color: #888;
}

#top-bar .open-menu a:hover {
text-decoration: none;
-webkit-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
-moz-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
-ms-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
-o-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
}

#main-content {
max-width: 90%;
margin: 0 5%;
Expand All @@ -1438,57 +1444,6 @@ img, embed, video, object, iframe, table {
-o-transition: .5s ease-in-out .1s;
transition: .5s ease-in-out .1s;
}

#side-bar {
display: block;
position: fixed;
top: 0;
left: -25em;
width: 17em;
height: 100%;
background-color: rgb(184, 134, 134);
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
-webkit-transition: left .5s ease-in-out .1s;
-moz-transition: left .5s ease-in-out .1s;
-ms-transition: left .5s ease-in-out .1s;
-o-transition: left .5s ease-in-out .1s;
transition: left .5s ease-in-out .1s;
}

#side-bar::after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 100%;
background-color: rgba(0, 0, 0, .2);
}

#side-bar:target {
display: block;
left: 0;
width: 17em;
margin: 0;
border: 1px solid #dedede;
z-index: 10;
}

#side-bar:target + #main-content {
left: 0;
}

#side-bar:target .close-menu {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .3) 1px 1px repeat;
z-index: -1;
}
}

div.scpnet-interwiki-wrapper {
Expand Down