lucidergs/dragon_fire
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat: 🎨 adjust CSS style to give more room to the post on small screens

Browse source
This commit is contained in:
David Bailey 2023-12-12 22:36:33 +01:00
parent 16fb45aaf4
commit 0d9bedcaca
5 changed files with 53 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

56
www/static/dergstyle.css
View file

@ -23,7 +23,7 @@ body {
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
padding-bottom: 4em; padding-bottom: 4rem;
} }
:link { :link {
@ -44,7 +44,7 @@ a:hover {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
padding-bottom: 0.7em; padding-bottom: 0.7rem;
} }
#main_banner_img { #main_banner_img {
position: absolute; position: absolute;
@ -61,9 +61,9 @@ a:hover {
#main_banner_img_link { #main_banner_img_link {
position: absolute; position: absolute;
right: 2vw; right: 2vw;
bottom: 0.5em; bottom: 0.5rem;
font-size: 0.8em; font-size: 0.8rem;
} }
#nav_bar { #nav_bar {
@ -72,37 +72,45 @@ a:hover {
justify-content: center; justify-content: center;
list-style-type: none; list-style-type: none;
margin-top: 1em; margin-top: 1rem;
padding: 0px; padding: 0px;
} }
#nav_bar li { #nav_bar li {
padding: 0em 0.3em 0em 0.3em; padding: 0rem 0.3rem 0rem 0.3rem;
} }
#big_title { #big_title {
text-align: center; text-align: center;
font-size: 2.5em; font-size: 2.5rem;
margin-bottom: 0.2em; margin-bottom: 0.2rem;
} }
#main_header h2 { #main_header h2 {
text-align: center; text-align: center;
font-size: 2em; font-size: 2rem;
margin-bottom: 0.2em; margin-bottom: 0.2rem;
} }
#title_separator { #title_separator {
height: 1.5px; height: 1.5px;
background-color: #ddd; background-color: #ddd;
opacity: 0.5; opacity: 0.5;
margin-left: 2em; margin-left: 2rem;
margin-right: 2em; margin-right: 2rem;
} }
#main_content_wrapper { #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; 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; margin-top: 0px;
min-height: 100%; min-height: 100%;
@ -128,9 +136,9 @@ a:hover {
} }
#post_file_titles * { #post_file_titles * {
padding: 0.5em; padding: 0.5rem;
font-style: bold; font-style: bold;
font-size: 1.3em; font-size: 1.3rem;
background: var(--highlight_1); background: var(--highlight_1);
} }
@ -138,7 +146,7 @@ a:hover {
#post_file_path { #post_file_path {
width: 100%; width: 100%;
font-style: italic; font-style: italic;
padding-left: 0.5em; padding-left: 0.5rem;
background: var(--highlight_1); background: var(--highlight_1);
@ -148,21 +156,21 @@ a:hover {
} }
#post_file_path a { #post_file_path a {
color: var(--text_1); color: var(--text_1);
padding-right: 0.2em; padding-right: 0.2rem;
} }
#main_content_wrapper article { #main_content_wrapper article {
background: var(--bg_3); 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; box-shadow: 3px 7px 7px 0px #00000040;
padding: 0.75em; padding: 0.75rem;
} }
#main_content_wrapper article h1 { #main_content_wrapper article h1 {
text-align: left; text-align: left;
padding-left: 3vmin; padding-left: 3vmin;
margin-bottom: 0.2em; margin-bottom: 0.2rem;
border-bottom: solid 1px darkgrey; border-bottom: solid 1px darkgrey;
} }
@ -171,7 +179,7 @@ a:hover {
display: block; display: block;
max-width: 100%; max-width: 100%;
max-height: 80vh; max-height: 70vh;
margin: 1vmin; margin: 1vmin;
margin-right: auto; margin-right: auto;
@ -181,7 +189,7 @@ a:hover {
#main_footer { #main_footer {
display: flex; display: flex;
height: 2.5em; height: 2.5rem;
text-align: center; text-align: center;
background-color: #3a3a3a; background-color: #3a3a3a;
margin: 0px; margin: 0px;

19
www/static/directorystyle.css
View file

@ -6,20 +6,20 @@ table.directory {
table.directory caption { table.directory caption {
text-align: left; text-align: left;
font-size: 1.5em; font-size: 1.5rem;
padding-left: 2em; padding-left: 3vmin;
} }
table.directory td { table.directory td {
padding: 0.2em; padding: 0.2rem;
text-align: left; text-align: left;
} }
table.directory th { table.directory th {
padding: 0.2em; padding: 0.2rem;
text-align: left; text-align: left;
padding-bottom: 0.05em; padding-bottom: 0.05rem;
} }
table.directory tr.entry:hover { table.directory tr.entry:hover {
@ -32,5 +32,12 @@ table.directory tr.entry .entry_title {
table.directory .entry_update_time { table.directory .entry_update_time {
display: block; display: block;
width: 10em; width: 12rem;
}
@media only screen and (max-width: 600px) {
table.directory .entry_update_time {
visibility: hidden;
display: none;
}
} }

6
www/static/imagestyle.css
View file

@ -1,7 +1,7 @@
article { article {
margin-top: 0.8em; margin-top: 0.8rem;
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
} }
@ -10,9 +10,9 @@ figcaption {
text-align: center; text-align: center;
border-bottom: solid 3px darkgrey; border-bottom: solid 3px darkgrey;
font-size: 2em; font-size: 2rem;
margin-bottom: 0.3em; margin-bottom: 0.3rem;
} }
#gallery_image { #gallery_image {

8
www/static/rrrorstyle.css
View file

@ -1,13 +1,13 @@
#rrr_header { #rrr_header {
font-size: 2em; font-size: 2rem;
border-bottom: 1px solid grey; border-bottom: 1px solid grey;
padding-bottom: 0.2em; padding-bottom: 0.2rem;
margin-bottom: 0.3em; margin-bottom: 0.3rem;
} }
#rrr_code { #rrr_code {
font-size: 1.5em; font-size: 1.5rem;
} }

2
www/templates/post_types/directory.html
View file

@ -14,7 +14,7 @@
<th></th> <th></th>
<th>Name</th> <th>Name</th>
<th>Title</th> <th>Title</th>
<th>Modified</th> <th class="entry_update_time">Modified</th>
</tr> </tr>
{% for subpost in subposts %} {% for subpost in subposts %}
<tr class="entry"> <tr class="entry">