Skip to content
Snippets Groups Projects
Verified Commit efc6b865 authored by Jake's avatar Jake :speech_balloon:
Browse files

fixed UI problems on mobile 

closes #48
parent d74b596f
No related branches found
No related tags found
No related merge requests found
Pipeline #317749 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
theme/static/css/main.css
+ 84
− 58
View file @ efc6b865
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
--category-contrast-color: #FFFFFF; --category-contrast-color: #FFFFFF;
--header-menu-bg-color: rgb(240, 240, 240, 0.8); --header-menu-bg-color: rgb(240, 240, 240, 0.8);
--header-menu-hover-bg-color: #E6E6E6; --header-menu-hover-bg-color: #E6E6E6;
--header-menu-button-size: 3rem;
} }
* { * {
...@@ -135,6 +136,9 @@ body > header img { ...@@ -135,6 +136,9 @@ body > header img {
#sitemenu-container .show-header-menu { #sitemenu-container .show-header-menu {
display: none; display: none;
font-size: 1rem;
font-style: normal;
/*padding: 1rem;*/
background-color: var(--header-menu-bg-color); background-color: var(--header-menu-bg-color);
-webkit-user-select: none; /* Safari */ -webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */ -moz-user-select: none; /* Firefox */
...@@ -145,6 +149,10 @@ body > header img { ...@@ -145,6 +149,10 @@ body > header img {
top: 0; top: 0;
left: 0; left: 0;
z-index: 11; z-index: 11;
width: var(--header-menu-button-size);
height: var(--header-menu-button-size);
padding-top: calc(var(--header-menu-button-size) / 2 - 0.75rem);
text-align: center;
} }
#sitemenu-container .show-header-menu:hover { #sitemenu-container .show-header-menu:hover {
background-color: var(--header-menu-hover-bg-color); background-color: var(--header-menu-hover-bg-color);
...@@ -170,62 +178,6 @@ body > header img { ...@@ -170,62 +178,6 @@ body > header img {
display: none; display: none;
} }
@media only screen and (max-width: 94ch) {
body > header a {
justify-content: center;
flex-wrap: wrap;
}
#sitemenu-container {
margin-bottom: 0.2rem;
font-size: 1.2rem;
}
#sitemenu-container nav {
display: none;
border-top: 0;
position: fixed;
top: 3.2rem;
left: 0;
z-index: 10;
width: 100%;
}
#sitemenu-container nav > ul {
flex-direction: column;
max-height: calc(100vh - 3.2rem);
overflow: scroll;
}
#sitemenu-container nav > ul > li {
width: 100%;
background-color: var(--category-contrast-color);
}
#sitemenu-container .show-header-menu {
display: inline-block;
font-style: normal;
padding: 1rem;
}
#sitemenu-container a {
width: 100%;
/*! margin-top: 0.2rem; */
/* padding-bottom: 0.2rem;*/
box-sizing: border-box;
display: block;
line-height: 2rem;
/* border-top: 0.1rem solid #333; */
}
/*#sitemenu-container a:hover {
border-bottom: 0.1rem solid #536;
}*/
#sitemenu-container input[type=checkbox]:checked ~ .show-header-menu-bg {
display: block;
}
#sitemenu-container input[type=checkbox]:checked ~ nav {
display: block;
}
:root {
--site-header-height: 3rem;
/* --sitemenu-nav-height: 3rem; */
}
}
...@@ -402,6 +354,7 @@ sup { ...@@ -402,6 +354,7 @@ sup {
.content iframe { .content iframe {
width: 100%; width: 100%;
min-height: var(--site-width); min-height: var(--site-width);
overflow: scroll;
} }
.content p, .content p,
...@@ -457,10 +410,12 @@ sup { ...@@ -457,10 +410,12 @@ sup {
.content .codeinline, .content .codeinline,
.content .codeblock { .content .codeblock {
white-space: pre-wrap; /*white-space: pre-wrap;
overflow-wrap: break-word; overflow-wrap: break-word;
word-break: keep-all; word-break: keep-all;*/
overflow: scroll;
} }
.content .codeinline { .content .codeinline {
background-color: rgba(0, 0, 0, 0.04); background-color: rgba(0, 0, 0, 0.04);
color: inherit; color: inherit;
...@@ -482,13 +437,16 @@ sup { ...@@ -482,13 +437,16 @@ sup {
.content img { .content img {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
overflow: scroll;
} }
.content table { .content table {
width: 100%; width: 100%;
display: block; display: block;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
overflow: scroll;
} }
.content table tr { .content table tr {
...@@ -697,3 +655,71 @@ ul.cards li a:hover { ...@@ -697,3 +655,71 @@ ul.cards li a:hover {
color:#843534; color:#843534;
} }
@media only screen and (max-width: 94ch) {
body > header {
margin-left: var(--header-menu-button-size);
}
body > header a {
justify-content: center;
flex-wrap: wrap;
}
#sitemenu-container {
margin-bottom: 0.2rem;
font-size: 1.2rem;
}
#sitemenu-container nav {
display: none;
border-top: 0;
position: fixed;
top: var(--header-menu-button-size);
left: 0;
z-index: 10;
width: 100%;
}
#sitemenu-container nav > ul {
flex-direction: column;
max-height: calc(100vh - var(--header-menu-button-size));
overflow: scroll;
}
#sitemenu-container nav > ul > li {
width: 100%;
background-color: var(--category-contrast-color);
}
#sitemenu-container .show-header-menu {
display: inline-block;
}
#sitemenu-container a {
width: 100%;
/*! margin-top: 0.2rem; */
/* padding-bottom: 0.2rem;*/
box-sizing: border-box;
display: block;
line-height: 2rem;
/* border-top: 0.1rem solid #333; */
}
/*#sitemenu-container a:hover {
border-bottom: 0.1rem solid #536;
}*/
#sitemenu-container input[type=checkbox]:checked ~ .show-header-menu-bg {
display: block;
}
#sitemenu-container input[type=checkbox]:checked ~ nav {
display: block;
}
:root {
--site-header-height: 3rem;
/* --sitemenu-nav-height: 3rem; */
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
margin-top: 0.2em;
margin-bottom: 0.2em;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment