split comments css

app/static/css/comments.css

@@ -0,0 +1,43 @@
+
+.comments h3 {
+    font-weight: bold;
+    padding: 4px;
+    padding-left: 0;
+    margin: 0;
+    //display: none;
+}
+.comments.active h3 {
+    display: block;
+}
+
+.comments .icon svg {
+    width: 12px;
+    height: 12px;
+}
+
+.add-comment {
+    width: 100%;
+    height: 30vh;
+    text-align: center;
+}
+.add-comment input {
+    width: 100px;
+}
+.add-comment textarea {
+    width: 80%;
+    display: block;
+    background: black;
+    color: white;
+    margin: auto;
+    padding: 0;
+    border: 0;
+}
+.add-comment button {
+    background: red;
+    border: 0;
+}
+
+.comment .text {
+    white-space: pre-line;
+}
+

app/static/css/reset.css

@@ -1,4 +1,4 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
+/* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
 */
@@ -9,11 +9,11 @@ a, abbr, acronym, address, big, cite,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 u, i, center,
-ol, 
+ol,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
@@ -24,7 +24,7 @@ time, mark, audio, video {
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
+article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }

app/static/css/style.css

@@ -86,6 +86,16 @@ video, .poster {
 .layer.active:first-child {
     padding-top: 0px;
 }
+.layer h3 {
+    font-weight: bold;
+    padding: 4px;
+    padding-left: 0;
+    margin: 0;
+    //display: none;
+}
+.layer.active h3 {
+    display: block;
+}
 
 .annotation {
     padding: 4px;
@@ -107,20 +117,10 @@ video, .poster {
     }
 }
 
-.layer h3,
-.comments h3 {
-    font-weight: bold;
-    padding: 4px;
-    padding-left: 0;
-    margin: 0;
-    //display: none;
+.layer h3 {
     cursor: pointer;
 }
-.layer.active h3 {
-    display: block;
-}
-.layer .icon svg,
-.comments .icon svg {
+.layer .icon svg {
     width: 12px;
     height: 12px;
 }

app/templates/item.html

@@ -1,40 +1,8 @@
 {% extends "base.html" %}
 {% block head %}
-<style>
-    body {
-        margin: 0;
-        padding: 0;
-        background: turquoise;
-    }
-    .add-comment {
-        width: 100%;
-        height: 30vh;
-        text-align: center;
-    }
-    .add-comment input {
-        width: 100px;
-    }
-    .add-comment textarea {
-        width: 80%;
-        display: block;
-        background: black;
-        color: white;
-        margin: auto;
-        padding: 0;
-        border: 0;
-    }
-    .add-comment button {
-        background: red;
-        border: 0;
-    }
-
-    .comment .text {
-        white-space: pre-line;
-    }
-
-</style>
 <link rel="stylesheet" href="/static/css/reset.css"></link>
 <link rel="stylesheet" href="/static/css/style.css"></link>
+<link rel="stylesheet" href="/static/css/comments.css"></link>
 {% endblock %}
 {% block main %}
     <div class="content">