mobile styling
This commit is contained in:
parent
611688bdb6
commit
f947a95f49
2
build.py
2
build.py
|
|
@ -164,7 +164,7 @@ def index_dir(dir):
|
||||||
title: '{dir}'
|
title: '{dir}'
|
||||||
---
|
---
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="panel">
|
<div class="panel m">
|
||||||
<h2>{dir}</h2>
|
<h2>{dir}</h2>
|
||||||
<a href="..">back</a>
|
<a href="..">back</a>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
||||||
|
|
@ -69,17 +69,17 @@ a:hover, .a:hover, .fa:hover span, #vol:hover span {
|
||||||
.dn { display: none; }
|
.dn { display: none; }
|
||||||
.f { flex: 1 }
|
.f { flex: 1 }
|
||||||
.fg { flex-grow: 1; }
|
.fg { flex-grow: 1; }
|
||||||
.c { text-align: center; }
|
|
||||||
.c2 {
|
|
||||||
justify-content: center;
|
|
||||||
padding: 10vh;
|
|
||||||
}
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: var(--width);
|
max-width: var(--width);
|
||||||
}
|
}
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
#content .container {
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
.panel {
|
.panel {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
|
@ -88,6 +88,13 @@ a:hover, .a:hover, .fa:hover span, #vol:hover span {
|
||||||
min-width: 130px;
|
min-width: 130px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.m { width: max-content; }
|
||||||
|
.c {
|
||||||
|
text-align: center;
|
||||||
|
width: min-content;
|
||||||
|
margin: 10vh auto;
|
||||||
|
}
|
||||||
|
.c2 { justify-content: center; }
|
||||||
header {
|
header {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue