diff --git a/www/fontawesome.php b/www/fontawesome.php index 61f4c87..91b82d5 100644 --- a/www/fontawesome.php +++ b/www/fontawesome.php @@ -3,6 +3,7 @@ $FONT_AWESOME_ARRAY=[ 'markdown' => '', 'image' => '', + 'images' => '', 'folder' => '', 'rss' => '' ]; diff --git a/www/static/dergstyle.css b/www/static/dergstyle.css index b0798fe..ccde5fa 100644 --- a/www/static/dergstyle.css +++ b/www/static/dergstyle.css @@ -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; diff --git a/www/static/gallerystyle.css b/www/static/gallerystyle.css new file mode 100644 index 0000000..c73ab1a --- /dev/null +++ b/www/static/gallerystyle.css @@ -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; +} \ No newline at end of file diff --git a/www/static/modest.css b/www/static/modest.css new file mode 100644 index 0000000..d45177d --- /dev/null +++ b/www/static/modest.css @@ -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; +} \ No newline at end of file diff --git a/www/static/solarized-dark.css b/www/static/solarized-dark.css new file mode 100644 index 0000000..b4c0da1 --- /dev/null +++ b/www/static/solarized-dark.css @@ -0,0 +1,84 @@ +/* + +Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull + +*/ + +.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; +} diff --git a/www/templates/post_types/directory.html b/www/templates/post_types/directory.html index 8f4c405..ffacda0 100644 --- a/www/templates/post_types/directory.html +++ b/www/templates/post_types/directory.html @@ -8,8 +8,8 @@ {%block content_article%} {% if subposts|length > 0 %} +

Directory contents:

- diff --git a/www/templates/root.html b/www/templates/root.html index 5950c0b..11f0c14 100644 --- a/www/templates/root.html +++ b/www/templates/root.html @@ -3,9 +3,12 @@ {{og.site_name}} - {{og.title}} + + + - + {% block feed_links %}
Directory contents:
Name