personal/werc-1.5.0-tweaks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add and use css to make site readable on mobile

Browse Source
This commit is contained in:
Nuno Sempere 2022-09-11 21:57:03 +00:00
parent a582d4fa50
commit 536cb770e8
2 changed files with 53 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/default_master.tpl
View File

@ -9,7 +9,7 @@
</header> </header>
% if(! ~ $#handlers_bar_left 0) { % if(! ~ $#handlers_bar_left 0) {
<nav id="side-bar"> <nav id="side-bar" class="hidden-mobile">
% for(h in $handlers_bar_left) { % for(h in $handlers_bar_left) {
<div> <div>
% run_handler $$h % run_handler $$h
@ -24,6 +24,6 @@
% run_handlers $handlers_body_foot % run_handlers $handlers_body_foot
</article> </article>
<footer> <footer class="hidden-mobile">
% cat `{ get_lib_file footer.inc } % cat `{ get_lib_file footer.inc }
</footer> </footer>

63
pub/style/style.css
View File

@ -29,17 +29,6 @@ body {
} }
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
body {
font-size: 1em;
}
.hidden-mobile {
display: none;
}
}
/* header */ /* header */
header { header {
flex-basis: 100%; flex-basis: 100%;
@ -164,7 +153,7 @@ img {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 300px; width: 25%;
} }
.img-medium-center { .img-medium-center {
@ -223,4 +212,54 @@ li{
/* list-style-type: '- ' /* ndash, a*/ /* list-style-type: '- ' /* ndash, a*/
} }
/* Tables */
table {
border-collapse: collapse;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: 1em;
}
td,
th {
border: 1px solid var(--border);
text-align: left;
padding: 0.5rem;
}
th {
background: var(--accent-bg);
font-weight: bold;
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 1400px) {
body {
display: block;
font-size: 1em;
}
.hidden-mobile {
display: none;
}
article{
flex-basis: 100%;
padding: 3px;
}
header h1 {
margin-left: 0;
}
.img-frontpage-center {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
}
@media screen and (min-width: 1400px) {
.hide-not-mobile {
display: none;
}
}