colors and titles

app/static/css/site.scss

@@ -1,5 +1,7 @@
 :root {
     --fg: rgb(240, 240, 240);
+    --blue: rgb(110, 194, 240);
+    --title: rgb(110, 194, 240);
 }
 
 @font-face {
@@ -41,9 +43,8 @@ header {
 }
 
 .index {
-    padding-top: 16px;
     .item {
-        border-bottom: 1px solid blueviolet;
+        //border-bottom: 1px solid blueviolet;
         padding-bottom: 4px;
         margin-bottom: 8px;
 
@@ -51,7 +52,14 @@ header {
             text-decoration: none;
             color: var(--fg);
             h1 {
+                color: var(--title);
                 text-decoration: underline;
+                font-size: 16px;
+            }
+            h2 {
+                border-bottom: 1px solid pink;
+                font-size: 18px;
+                font-weight: bold;
             }
         }
         h1 {
@@ -77,6 +85,7 @@ header {
     }
     .archive {
         text-align: center;
+        padding-bottom: 32px;
     }
     &.archive {
         h2.week {
@@ -95,6 +104,10 @@ header {
             }
         }
         .item {
+            h2 {
+                font-size: 16px;
+                font-weight: initial;
+            }
             .comments {
                 text-align: right;
                 padding-right: 4px;
@@ -104,6 +117,18 @@ header {
         }
     }
 }
+@media(max-width:768px) {
+    .index {
+        .item {
+            a {
+                h1, h2 {
+                    padding-left: 4px;
+                    padding-right: 4px;
+                }
+            }
+        }
+    }
+}
 
 nav.overlay {
     position: absolute;

app/static/css/style.css

@@ -20,7 +20,7 @@ body {
 }
 
 a {
-    color: rgb(128, 128, 255)
+    color: var(--blue)
 }
 iframe {
     max-width: 100%;
@@ -38,12 +38,19 @@ video, .poster {
     min-height: 100vh;
     max-width: 1000px;
     margin: auto;
+    padding-top: 16px;
+}
+.item-title {
+    color: var(--title);
+    text-decoration: underline;
+    padding-bottom: 0;
+    font-size: 16px;
+    text-wrap: balance;
 }
 .title {
-    padding-top: 16px;
     padding-bottom: 0;
     margin-bottom: 4px;
-    font-size: 14pt;
+    font-size: 18px;
     font-weight: bold;
     border-bottom: 1px solid pink;
     text-wrap: balance;
@@ -58,6 +65,7 @@ video, .poster {
     padding-bottom: 0px;
 }
 @media(max-width:768px) {
+    .item-title,
     .title,
     .byline {
         padding-left: 4px;

app/static/js/render.js

@@ -3,7 +3,8 @@ function renderItemInfo(data) {
     div = document.createElement('div')
     div.className = "content"
     div.innerHTML = `
-        <div class="title">${data.title}</div>
+        <h1 class="item-title">${item.title}</h1>
+        <h2 class="title">${data.title}</h2>
         <div class="byline">${data.byline}</div>
         <figure>
             <img src="${data.icon}">
@@ -12,6 +13,9 @@ function renderItemInfo(data) {
             <a href="${data.link}">Open on ${data.site}</a>
         </div>
     `
+    if (!item.title) {
+        div.querySelector('item-title').remove()
+    }
     document.querySelector(".content").replaceWith(div)
 }
 
@@ -25,7 +29,8 @@ function renderItem(data) {
     div = document.createElement('div')
     div.className = "content"
     div.innerHTML = `
-        <div class="title">${data.title}</div>
+        <h1 class="item-title">${item.title}</h1>
+        <h2 class="title">${data.title}</h2>
         <div class="byline">${data.byline}</div>
         <div class="player">
             <div class="video"></div>
@@ -38,6 +43,9 @@ function renderItem(data) {
             <a href="${data.link}">Open on ${data.site}</a>
         </div>
     `
+    if (!item.title) {
+        div.querySelector('item-title').remove()
+    }
 
     if (window.renderComments) {
         renderComments(div.querySelector('.comments'), data)

app/templates/item.html

@@ -52,6 +52,10 @@
 <script>
     var comments = {{ comments }};
     var user = {{ user }};
+    var item = {
+        id: {{ item.id }},
+        title: '{{ item.title|escapejs }}'
+    };
 </script>
 {% compress js file m %}
 <script src="/static/js/utils.js"></script>

app/templates/listitem.html

@@ -2,7 +2,7 @@
         <a href="{{ item.get_absolute_url }}">
             <div class="info">
                 <h1>{{ item.title }}</h1>
-                {{ item.data.title }}
+                <h2>{{ item.data.title }}</h2>
             </div>
             <div class="image">
                 <img src={{ item.data.thumbnail }}>