- commit
- ec0ffde9a9fffb97c59a6d361976e528e2d630f0
- parent
- 33247bf58601dddf8defd87c5af9f7398b2d7e7a
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2023-07-01 18:40
apply neddit styling
Diffstat
| M | plutopluto/index.html | 21 | +++++++++++---------- |
| D | plutopluto/static/color.css | 20 | -------------------- |
| D | plutopluto/static/plutopluto.css | 72 | ------------------------------------------------------------ |
| A | plutopluto/static/style.css | 150 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
4 files changed, 161 insertions, 102 deletions
diff --git a/plutopluto/index.html b/plutopluto/index.html
@@ -9,20 +9,21 @@ 9 9 <script src="/static/jqlite.js" type="text/javascript" ></script> 10 10 <script src="/static/mustache.js" type="text/javascript" ></script> 11 11 <script src="/static/plutopluto.js" type="text/javascript" ></script>12 -1 <link rel="stylesheet" href="/static/plutopluto.css" type="text/css" />13 -1 <link rel="stylesheet" href="/static/color.css" type="text/css" />-1 12 <link rel="stylesheet" href="/static/style.css" type="text/css" /> 14 13 </head> 15 14 16 15 <body>17 -1 <ul id="stream">18 -1 <li>19 -1 <div class="meta">20 -1 {{#formatDate}}{{dt}}{{/formatDate}}21 -1 <a class="source" href="{{link}}" title="{{title}}">{{source}}</a>22 -1 </div>23 -1 <div class="body">-1 16 <ul id="stream" class="posts"> -1 17 <li class="post"> -1 18 <article> -1 19 <header> -1 20 <a class="source u-bold" href="{{link}}" title="{{title}}">{{source}}</a> -1 21 <span class="meta"> -1 22 · Posted on <a href="{{link}}">{{#formatDate}}{{dt}}{{/formatDate}}</a> -1 23 </span> -1 24 </header> 24 25 {{{content}}}25 -1 </div>-1 26 </article> 26 27 </li> 27 28 </ul> 28 29 <span class="loading" title="click here if nothing happens">loading...</span>
diff --git a/plutopluto/static/color.css b/plutopluto/static/color.css
@@ -1,20 +0,0 @@1 -1 body {2 -1 color: black;3 -1 background-color: #adb8bf;4 -1 }5 -16 -1 #stream > li {7 -1 color: #6951a2;8 -1 background-color: #eaeff2;9 -1 }10 -111 -1 .loading, .meta {12 -1 color: #b7c1c7;13 -1 background-color: #43285B;14 -115 -1 background: -webkit-linear-gradient(135deg, #43285b 0%,#83509f 100%);16 -1 background: -moz-linear-gradient(135deg, #43285b 0%,#83509f 100%);17 -1 background: -o-linear-gradient(135deg, #43285b 0%,#83509f 100%);18 -1 background: -ms-linear-gradient(135deg, #43285b 0%,#83509f 100%);19 -1 background: linear-gradient(135deg, #43285b 0%,#83509f 100%);20 -1 }
diff --git a/plutopluto/static/plutopluto.css b/plutopluto/static/plutopluto.css
@@ -1,72 +0,0 @@1 -1 a img {2 -1 border: none;3 -1 }4 -15 -1 a {6 -1 color: inherit;7 -1 text-decoration: underline;8 -1 }9 -110 -1 a:hover, a:focus {11 -1 text-decoration: none;12 -1 }13 -114 -1 blockquote {15 -1 margin: 1em 1.5em 1em 0.5em;16 -1 padding-left: 0.5em;17 -1 border-left: 0.2em solid;18 -1 }19 -120 -1 body {21 -1 margin: 4em auto;22 -1 width: 60%;23 -1 max-width: 54em;24 -1 min-width: 20em;25 -1 font-family: sans-serif;26 -1 }27 -128 -1 #stream > li,29 -1 .loading {30 -1 display: block;31 -1 margin-bottom: 4em;32 -1 overflow: hidden;33 -1 box-shadow: 0.1em 0.2em 0.6em 0.1em black;34 -1 }35 -136 -1 #stream {37 -1 list-style-type: none;38 -1 margin: 0;39 -1 padding: 0;40 -1 }41 -142 -1 .meta {43 -1 padding: 0.4em 0.6em;44 -1 overflow: hidden;45 -1 font-size: smaller;46 -1 }47 -148 -1 .body {49 -1 padding: 0.6em;50 -1 line-height: 1.2;51 -1 }52 -153 -1 .body img {54 -1 max-width: 100%;55 -1 }56 -157 -1 .loading {58 -1 padding: 0.6em;59 -1 text-align: center;60 -1 cursor: pointer;61 -1 }62 -163 -1 .meta, .loading {64 -1 color: white;65 -1 background: black;66 -1 }67 -168 -1 iframe.youtube,69 -1 img[alt^="https://www.youtube"] {70 -1 width: 480px;71 -1 height: 360px;72 -1 }
diff --git a/plutopluto/static/style.css b/plutopluto/static/style.css
@@ -0,0 +1,150 @@
-1 1 html {
-1 2 --bg-color: #fff;
-1 3 --bg-tint-color: #f6f6f6;
-1 4 --fg-tint-color: #777;
-1 5 --focus-color: #0079d3;
-1 6 --border-color: #ccc;
-1 7 --button-color: #aaa;
-1 8 --button-hover-color: #bbb;
-1 9
-1 10 background: #dae0e6;
-1 11 color: #222;
-1 12 line-height: 1.5;
-1 13 }
-1 14
-1 15 body {
-1 16 max-inline-size: 45em;
-1 17 margin-block: 0;
-1 18 margin-inline: auto;
-1 19 padding-block: 4em 1em;
-1 20 padding-inline: 0;
-1 21 }
-1 22
-1 23 a {
-1 24 color: var(--focus-color);
-1 25 }
-1 26
-1 27 h1, h2, h3, h4, h5 {
-1 28 line-height: 1.2;
-1 29 font-weight: 500;
-1 30 margin-block: 0 0.3em;
-1 31 }
-1 32
-1 33 pre {
-1 34 font-size: 90%;
-1 35 font-family: monospace;
-1 36 padding: 0.5em;
-1 37 border: 1px solid var(--border-color);
-1 38 background-color: var(--bg-tint-color);
-1 39 overflow: auto;
-1 40 tab-size: 4;
-1 41 }
-1 42
-1 43 p {
-1 44 margin-block: 0 0.8em;
-1 45 }
-1 46
-1 47 blockquote {
-1 48 font-style: italic;
-1 49 font-size: small;
-1 50 padding-inline-start: 0.5em;
-1 51 border-inline-start: 0.4em solid var(--border-color);
-1 52 margin-inline-start: 0;
-1 53 }
-1 54
-1 55 hr {
-1 56 border: 0;
-1 57 border-block-end: 1px solid var(--border-color);
-1 58 }
-1 59
-1 60 #stream {
-1 61 padding: 0;
-1 62 margin: 0;
-1 63 }
-1 64
-1 65 .post {
-1 66 display: flow-root;
-1 67 background: var(--bg-color);
-1 68 border-radius: 4px;
-1 69 border: 1px solid var(--border-color);
-1 70 padding: 0.5em;
-1 71 margin-block-end: 1em;
-1 72 }
-1 73
-1 74 .post header {
-1 75 margin-block-end: 0.5em;
-1 76 font-size: small;
-1 77 }
-1 78
-1 79 .post header a {
-1 80 color: inherit;
-1 81 text-decoration: none;
-1 82 }
-1 83
-1 84 .post header a:hover,
-1 85 .post header a:focus {
-1 86 text-decoration: underline;
-1 87 }
-1 88
-1 89 .post footer {
-1 90 display: flex;
-1 91 gap: 1em;
-1 92 color: var(--fg-tint-color);
-1 93 font-weight: bold;
-1 94 font-size: small;
-1 95 margin-block-start: 0.5em;
-1 96 }
-1 97 .post footer a {
-1 98 color: inherit;
-1 99 text-decoration: none;
-1 100 }
-1 101
-1 102 .post img,
-1 103 .post video {
-1 104 display: block;
-1 105 margin-inline: -0.5em;
-1 106 inline-size: calc(100% + 1em);
-1 107 max-block-size: 90vb;
-1 108 object-fit: contain;
-1 109 }
-1 110
-1 111 .u-bold {
-1 112 font-weight: bold;
-1 113 }
-1 114
-1 115 .meta {
-1 116 color: var(--fg-tint-color);
-1 117 }
-1 118
-1 119 .loading {
-1 120 display: block;
-1 121 inline-size: 100%;
-1 122 background: var(--button-color);
-1 123 color: inherit;
-1 124 text-decoration: none;
-1 125 padding: 0.5em;
-1 126 border: 0;
-1 127 text-align: center;
-1 128 border-radius: 4px;
-1 129 text-transform: uppercase;
-1 130 font-weight: bold;
-1 131 }
-1 132
-1 133 .loading:focus,
-1 134 .loading:hover {
-1 135 background: var(--button-hover-color);
-1 136 }
-1 137
-1 138 @media (prefers-color-scheme: dark) {
-1 139 html {
-1 140 --bg-color: #111;
-1 141 --bg-tint-color: #000;
-1 142 --fg-tint-color: #888;
-1 143 --border-color: #222;
-1 144 --button-color: #222;
-1 145 --button-hover-color: #333;
-1 146
-1 147 background: #000;
-1 148 color: #fff;
-1 149 }
-1 150 }