Initial commit

1 files changed, 176 insertions, 0 deletions

@@ -0,0 +1,176 @@
+body {
+    background: #888;
+}
+
+main {
+    position: relative;
+    display: flex;
+    flex: column nowrap;
+}
+
+#items {
+    max-width: 70ch;
+}
+
+.entries tr {
+    vertical-align: baseline;
+}
+
+.fresh {
+    font-weight: bold;
+}
+
+.entry-timestamp {
+    font-family: monospace;
+    padding-right: 8px;
+}
+
+#list {
+    padding: 2ch;
+}
+
+aside {
+    flex-grow: 1;
+}
+
+aside li {
+    list-style: none;
+    text-align: right;
+}
+
+aside li:nth-child(even),
+tr:nth-child(even)
+{
+    background: inherit;
+}
+
+aside li:nth-child(odd),
+tr:nth-child(odd)
+{
+    background: #aaa;
+}
+
+a { display: block; }
+
+a:link {
+    text-decoration: none;
+    color: black;
+}
+a:visited {
+    font-style: italic;
+    color: inherit;
+}
+aside a:visited { font-style: normal; }
+a:hover {
+    background: yellow;
+}
+a:active{
+    background: cyan;
+}
+
+header {
+    display: flex;
+    flex: row wrap;
+    margin: 1ch 0;
+    align-items: baseline;
+    justify-content: space-between;
+}
+header h2, header h1 {
+    margin: 0;
+}
+header h2 a { display: inline; }
+header .top {
+    font-size: 80%;
+    text-align: right;
+    flex-grow: 1;
+}
+
+body>nav {
+    border-bottom: 1px solid black;
+    margin-top: 0;
+    text-align: right;
+}
+body>nav a { display: inline; }
+
+.last-updated {
+    font-style: italic;
+    font-size: 80%;
+    text-align: right;
+}
+
+.entries { border-collapse: collapse; }
+
+.entries, .entry-title { width: 100%; }
+.entry-extra a { color: blue; display: inline; }
+
+header a { display: inline; }
+
+@media screen and (max-width: 720px) {
+    main, header {
+        flex-flow: row wrap;
+        padding:0; margin: 0;
+    }
+    * { border: none; }
+    .entries, .entry-title { width: 100%; }
+    html, body, #list, #items { padding: 0; margin: 0; max-width: 100%; }
+    header h2, header p { margin: 4px; }
+    aside a { display: inline; }
+    aside {
+        padding: 2ch;
+        order: 1;
+        border-bottom: 1px solid black;
+    }
+    aside ul { margin: 0; padding: 0; }
+    #list { order: 2; }
+    aside li {
+        display: inline;
+        background: inherit !important;
+    }
+    aside li::after {
+        background: inherit;
+        font-weight: normal;
+        content: " //";
+    }
+    aside li:last-child::after {
+        content: "";
+    }
+    .entry-timestamp {
+        display: none;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    body { background: white; color: black; }
+    aside li:nth-child(even),
+    tr:nth-child(even) { background: white; }
+    aside li:nth-child(odd),
+    tr:nth-child(odd) { background: #eee; }
+    a:link { color: black; }
+    a:hover { background: yellow; }
+    a:active { background: cyan; }
+    .entry-extra a { color: blue; }
+    body>nav { border-bottom: 1px solid black; }
+}
+
+@media (prefers-color-scheme: dark) {
+    body { background: black; color: white; }
+    aside li:nth-child(even),
+    tr:nth-child(even) { background: black; }
+    aside li:nth-child(odd),
+    tr:nth-child(odd) { background: #222; }
+    a:link { color: white; }
+    a:hover { color: yellow; background: inherit; }
+    a:active { color: cyan; background: inherit; }
+    .entry-extra a { color: cyan; }
+    body>nav { border-bottom: 1px solid white; }
+}
+
+@media screen and (max-width: 720px) and (prefers-color-scheme: dark) {
+    aside { border-bottom: 1px solid white; }
+    aside li { background: black !important; }
+}
+
+@media screen and (max-width: 720px) and (prefers-color-scheme: light) {
+    aside { border-bottom: 1px solid black; }
+    aside li { background: white !important; }
+}