feat: 🎨 adjust CSS style to give more room to the post on small screens
This commit is contained in:
parent
16fb45aaf4
commit
0d9bedcaca
5 changed files with 53 additions and 38 deletions
|
|
@ -23,7 +23,7 @@ body {
|
|||
position: relative;
|
||||
|
||||
min-height: 100vh;
|
||||
padding-bottom: 4em;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
:link {
|
||||
|
|
@ -44,7 +44,7 @@ a:hover {
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
padding-bottom: 0.7em;
|
||||
padding-bottom: 0.7rem;
|
||||
}
|
||||
#main_banner_img {
|
||||
position: absolute;
|
||||
|
|
@ -61,9 +61,9 @@ a:hover {
|
|||
#main_banner_img_link {
|
||||
position: absolute;
|
||||
right: 2vw;
|
||||
bottom: 0.5em;
|
||||
bottom: 0.5rem;
|
||||
|
||||
font-size: 0.8em;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#nav_bar {
|
||||
|
|
@ -72,37 +72,45 @@ a:hover {
|
|||
justify-content: center;
|
||||
|
||||
list-style-type: none;
|
||||
margin-top: 1em;
|
||||
margin-top: 1rem;
|
||||
padding: 0px;
|
||||
}
|
||||
#nav_bar li {
|
||||
padding: 0em 0.3em 0em 0.3em;
|
||||
padding: 0rem 0.3rem 0rem 0.3rem;
|
||||
}
|
||||
|
||||
#big_title {
|
||||
text-align: center;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 0.2em;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
#main_header h2 {
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
margin-bottom: 0.2em;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
#title_separator {
|
||||
height: 1.5px;
|
||||
background-color: #ddd;
|
||||
opacity: 0.5;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
#main_content_wrapper {
|
||||
padding: 0em 1em 1em 1em;
|
||||
--content-width: min(100vw, calc(20rem + 40vw));
|
||||
--content-total-margin: calc(calc(100vw - var(--content-width)) / 2);
|
||||
|
||||
--content-padding: max(0px, min(1rem, var(--content-total-margin)));
|
||||
--content-margin: max(0px, calc(var(--content-total-margin) - 1rem));
|
||||
|
||||
padding: 0rem var(--content-padding) 1rem var(--content-padding);
|
||||
width: auto;
|
||||
margin-left: max(0.75em, min(max(20vmin, 50vw - 30rem), 50vw - 25rem));
|
||||
margin-right: max(0.75em, min(max(20vmin, 50vw - 30rem), 50vw - 25rem));
|
||||
|
||||
|
||||
margin-left: var(--content-margin);
|
||||
margin-right: var(--content-margin);
|
||||
margin-top: 0px;
|
||||
|
||||
min-height: 100%;
|
||||
|
|
@ -128,9 +136,9 @@ a:hover {
|
|||
}
|
||||
|
||||
#post_file_titles * {
|
||||
padding: 0.5em;
|
||||
padding: 0.5rem;
|
||||
font-style: bold;
|
||||
font-size: 1.3em;
|
||||
font-size: 1.3rem;
|
||||
|
||||
background: var(--highlight_1);
|
||||
}
|
||||
|
|
@ -138,7 +146,7 @@ a:hover {
|
|||
#post_file_path {
|
||||
width: 100%;
|
||||
font-style: italic;
|
||||
padding-left: 0.5em;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
background: var(--highlight_1);
|
||||
|
||||
|
|
@ -148,21 +156,21 @@ a:hover {
|
|||
}
|
||||
#post_file_path a {
|
||||
color: var(--text_1);
|
||||
padding-right: 0.2em;
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
|
||||
#main_content_wrapper article {
|
||||
background: var(--bg_3);
|
||||
|
||||
border-radius: 0em 0em 0.8em 0.8em;
|
||||
border-radius: 0rem 0rem 0.8rem 0.8rem;
|
||||
box-shadow: 3px 7px 7px 0px #00000040;
|
||||
|
||||
padding: 0.75em;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
#main_content_wrapper article h1 {
|
||||
text-align: left;
|
||||
padding-left: 3vmin;
|
||||
margin-bottom: 0.2em;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
border-bottom: solid 1px darkgrey;
|
||||
}
|
||||
|
|
@ -171,7 +179,7 @@ a:hover {
|
|||
display: block;
|
||||
max-width: 100%;
|
||||
|
||||
max-height: 80vh;
|
||||
max-height: 70vh;
|
||||
|
||||
margin: 1vmin;
|
||||
margin-right: auto;
|
||||
|
|
@ -181,7 +189,7 @@ a:hover {
|
|||
#main_footer {
|
||||
display: flex;
|
||||
|
||||
height: 2.5em;
|
||||
height: 2.5rem;
|
||||
text-align: center;
|
||||
background-color: #3a3a3a;
|
||||
margin: 0px;
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@ table.directory {
|
|||
|
||||
table.directory caption {
|
||||
text-align: left;
|
||||
font-size: 1.5em;
|
||||
font-size: 1.5rem;
|
||||
|
||||
padding-left: 2em;
|
||||
padding-left: 3vmin;
|
||||
}
|
||||
|
||||
table.directory td {
|
||||
padding: 0.2em;
|
||||
padding: 0.2rem;
|
||||
text-align: left;
|
||||
}
|
||||
table.directory th {
|
||||
padding: 0.2em;
|
||||
padding: 0.2rem;
|
||||
text-align: left;
|
||||
|
||||
padding-bottom: 0.05em;
|
||||
padding-bottom: 0.05rem;
|
||||
}
|
||||
|
||||
table.directory tr.entry:hover {
|
||||
|
|
@ -32,5 +32,12 @@ table.directory tr.entry .entry_title {
|
|||
|
||||
table.directory .entry_update_time {
|
||||
display: block;
|
||||
width: 10em;
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
table.directory .entry_update_time {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
|
||||
article {
|
||||
margin-top: 0.8em;
|
||||
margin-top: 0.8rem;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
|
@ -10,9 +10,9 @@ figcaption {
|
|||
text-align: center;
|
||||
|
||||
border-bottom: solid 3px darkgrey;
|
||||
font-size: 2em;
|
||||
font-size: 2rem;
|
||||
|
||||
margin-bottom: 0.3em;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
#gallery_image {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
|
||||
|
||||
#rrr_header {
|
||||
font-size: 2em;
|
||||
font-size: 2rem;
|
||||
|
||||
border-bottom: 1px solid grey;
|
||||
padding-bottom: 0.2em;
|
||||
margin-bottom: 0.3em;
|
||||
padding-bottom: 0.2rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
#rrr_code {
|
||||
font-size: 1.5em;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Title</th>
|
||||
<th>Modified</th>
|
||||
<th class="entry_update_time">Modified</th>
|
||||
</tr>
|
||||
{% for subpost in subposts %}
|
||||
<tr class="entry">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue