feat: ✨ stylistic tweaks for mobile compatibility
This commit is contained in:
parent
614bf9d3b6
commit
8e69a9139f
7 changed files with 366 additions and 10 deletions
|
|
@ -3,6 +3,7 @@
|
|||
$FONT_AWESOME_ARRAY=[
|
||||
'markdown' => '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M593.8 59.1H46.2C20.7 59.1 0 79.8 0 105.2v301.5c0 25.5 20.7 46.2 46.2 46.2h547.7c25.5 0 46.2-20.7 46.1-46.1V105.2c0-25.4-20.7-46.1-46.2-46.1zM338.5 360.6H277v-120l-61.5 76.9-61.5-76.9v120H92.3V151.4h61.5l61.5 76.9 61.5-76.9h61.5v209.2zm135.3 3.1L381.5 256H443V151.4h61.5V256H566z"/></svg>',
|
||||
'image' => '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>',
|
||||
'images' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 32c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H160zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320H328 280 200c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120V344c0 75.1 60.9 136 136 136H456c13.3 0 24-10.7 24-24s-10.7-24-24-24H136c-48.6 0-88-39.4-88-88V120z"/></svg>',
|
||||
'folder' => '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"/></svg>',
|
||||
'rss' => '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>'
|
||||
];
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ body {
|
|||
--highlight_2: #edd29e;
|
||||
|
||||
--text_1: #FFFFFF;
|
||||
--text_border: #A0A0A080;
|
||||
|
||||
color: var(--text_1);
|
||||
background: var(--bg_1);
|
||||
|
|
@ -149,11 +150,15 @@ a:hover {
|
|||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
:target {
|
||||
scroll-margin-top: 6rem;
|
||||
}
|
||||
|
||||
#main_content_wrapper {
|
||||
--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-padding: max(0.5rem, 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);
|
||||
|
|
@ -175,6 +180,9 @@ a:hover {
|
|||
top: 0px;
|
||||
|
||||
background: var(--bg_2);
|
||||
|
||||
box-shadow: 0px 5px 5px 0px #00000040;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
#post_file_titles {
|
||||
|
|
@ -223,13 +231,6 @@ a:hover {
|
|||
|
||||
padding: 0.75rem;
|
||||
}
|
||||
#main_content_wrapper article h1 {
|
||||
text-align: left;
|
||||
padding-left: 3vmin;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
border-bottom: solid 1px darkgrey;
|
||||
}
|
||||
|
||||
#main_content_wrapper article img {
|
||||
display: block;
|
||||
|
|
|
|||
64
www/static/gallerystyle.css
Normal file
64
www/static/gallerystyle.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
flex-flow: row wrap;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
list-style-type: none;
|
||||
margin-top: 1rem;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.gallery li {
|
||||
margin: 0.2rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--text_border);
|
||||
float: left;
|
||||
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0px 5px 5px 0px #00000040;
|
||||
|
||||
background: var(--bg_2);
|
||||
|
||||
height: auto;
|
||||
|
||||
transition: 0.3s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.gallery li:hover {
|
||||
border: 1px solid var(--text_1);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
#main_content_wrapper .gallery img {
|
||||
width: 100%;
|
||||
height: 15rem;
|
||||
margin: 0;
|
||||
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 48rem) {
|
||||
.gallery li {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
#main_content_wrapper .gallery img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#main_content_wrapper .gallery figure {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery figcaption {
|
||||
padding: 0.1rem;
|
||||
text-align: center;
|
||||
}
|
||||
203
www/static/modest.css
Normal file
203
www/static/modest.css
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
/*
|
||||
modest.css, licensed under MIT license, Crafted with <3 by John Otander (@4lpine).
|
||||
|
||||
Taken from: https://github.com/markdowncss/modest
|
||||
|
||||
Modified to fit Dergsite needs
|
||||
*/
|
||||
|
||||
@media print {
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
a[href^="#"]:after,
|
||||
a[href^="javascript:"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: Menlo, Monaco, "Courier New", monospace;
|
||||
}
|
||||
|
||||
.modest-no-decoration {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 32rem) and (max-width: 48rem) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
html {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
article p,
|
||||
.modest-p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1.3rem;
|
||||
}
|
||||
|
||||
article h1,
|
||||
.modest-h1,
|
||||
article h2,
|
||||
.modest-h2,
|
||||
article h3,
|
||||
.modest-h3,
|
||||
article h4,
|
||||
.modest-h4 {
|
||||
margin: 1.5em 0 .3em;
|
||||
font-weight: inherit;
|
||||
line-height: 1.42;
|
||||
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
article > :first-child {
|
||||
margin-top: 0.3rem !important;
|
||||
}
|
||||
|
||||
article h1,
|
||||
.modest-h1 {
|
||||
margin-top: 0;
|
||||
font-size: 1.998rem;
|
||||
}
|
||||
|
||||
article h2,
|
||||
.modest-h2 {
|
||||
font-size: 1.427rem;
|
||||
}
|
||||
|
||||
article h3,
|
||||
.modest-h3 {
|
||||
font-size: 1.299rem;
|
||||
}
|
||||
|
||||
article h4,
|
||||
.modest-h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
article h5,
|
||||
.modest-h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
article h6,
|
||||
.modest-h6 {
|
||||
font-size: .88rem;
|
||||
}
|
||||
|
||||
article small,
|
||||
.modest-small {
|
||||
font-size: .707rem;
|
||||
}
|
||||
|
||||
/* https://github.com/mrmrs/fluidity */
|
||||
|
||||
article h1,
|
||||
article h2,
|
||||
article h3 {
|
||||
border-bottom: 1px solid var(--text_border);
|
||||
padding-bottom: .3rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 0.8rem;
|
||||
margin-left: 0.8rem;
|
||||
margin-right: 4em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid var(--text_border);
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
pre {
|
||||
border-radius: 0.5rem;
|
||||
|
||||
box-shadow: 2px 5px 5px 0px #00000040;
|
||||
|
||||
border-left: 4px solid #206475;
|
||||
background-color: var(--bg_2);
|
||||
margin-bottom: 1.3rem;
|
||||
margin-left: 0.8rem;
|
||||
margin-right: 4em;
|
||||
}
|
||||
pre code {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 32rem) {
|
||||
pre, blockquote {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
article ul,
|
||||
article ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
84
www/static/solarized-dark.css
Normal file
84
www/static/solarized-dark.css
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
/*
|
||||
|
||||
Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #002b36;
|
||||
color: #839496;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #586e75;
|
||||
}
|
||||
|
||||
/* Solarized Green */
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-addition {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* Solarized Cyan */
|
||||
.hljs-number,
|
||||
.hljs-string,
|
||||
.hljs-meta .hljs-meta-string,
|
||||
.hljs-literal,
|
||||
.hljs-doctag,
|
||||
.hljs-regexp {
|
||||
color: #2aa198;
|
||||
}
|
||||
|
||||
/* Solarized Blue */
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-name,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Solarized Yellow */
|
||||
.hljs-attribute,
|
||||
.hljs-attr,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-type {
|
||||
color: #b58900;
|
||||
}
|
||||
|
||||
/* Solarized Orange */
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-subst,
|
||||
.hljs-meta,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-link {
|
||||
color: #cb4b16;
|
||||
}
|
||||
|
||||
/* Solarized Red */
|
||||
.hljs-built_in,
|
||||
.hljs-deletion {
|
||||
color: #dc322f;
|
||||
}
|
||||
|
||||
.hljs-formula {
|
||||
background: #073642;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -8,8 +8,8 @@
|
|||
|
||||
{%block content_article%}
|
||||
{% if subposts|length > 0 %}
|
||||
<h3>Directory contents:</h3>
|
||||
<table class="directory">
|
||||
<caption>Directory contents:</caption>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="hsmol_hide">Name</th>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,12 @@
|
|||
<head>
|
||||
<title>{{og.site_name}} - {{og.title}}</title>
|
||||
<link rel="stylesheet" href="/static/dergstyle.css">
|
||||
<link rel="stylesheet" href="/static/modest.css">
|
||||
<link rel="stylesheet" href="/static/solarized-dark.css">
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="/static/icon.jpeg">
|
||||
|
||||
<meta name="viewport" content="width=device-width,initial-scale=0.8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
|
||||
{% block feed_links %}
|
||||
<link rel="alternate" type="application/rss+xml" title="{{og.site_name}} Global Feed" href="{{site_config.uri_prefix}}/feed">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue