refactor css

static/style/media-card.css

@@ -0,0 +1,88 @@
+button {
+    all: unset;
+    cursor: pointer;
+}
+
+.media-card {
+    background-color: white;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.media-card button {
+    display: inline-block;
+    padding: 10px 15px;
+    margin-bottom: 1rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    text-decoration: none;
+    border-radius: 4px;
+}
+
+.media-card form {
+    padding-top: 0;
+    margin-top: 0;
+}
+
+.media-card a {
+    display: inline-block;
+    padding: 10px 15px;
+    margin: 1rem;
+    background-color: #007bff;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+}
+
+.media-card h3 {
+    padding: 15px;
+    margin: 0;
+    font-size: 18px;
+    background-color: #f8f8f8;
+}
+
+.new-transcode form {
+    display: flex;
+    flex-direction: column;
+}
+
+.new-transcode .selects {
+    display: flex;
+    flex-direction: row;
+}
+
+.new-transcode select {
+    padding: 0.5rem;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    flex-grow: 1;
+    margin: 1rem;
+}
+
+.audio-container audio {
+    width: 100%;
+}
+
+.video-container video {
+    width: 100%;
+    max-width: 600px;
+    display: block;
+    margin: 0 auto;
+}
+
+.media-buttons {
+    text-align: center;
+}
+
+.delete-button {
+    background-color: red;
+    color: white;
+    margin-top: 0;
+    padding-top: 0;
+}
+
+.transcode-button {
+    background-color: green;
+    color: white;
+}

static/style/video.css

@@ -1,8 +1,3 @@
-button {
-    all: unset;
-    cursor: pointer;
-}
-
 .media-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -12,90 +7,6 @@ button {
     margin-bottom: 1rem;
 }
 
-.media-card {
-    background-color: white;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.media-card button {
-    display: inline-block;
-    padding: 10px 15px;
-    margin-bottom: 1rem;
-    margin-left: 1rem;
-    margin-right: 1rem;
-    text-decoration: none;
-    border-radius: 4px;
-}
-
-.media-card form {
-    padding-top: 0;
-    margin-top: 0;
-}
-
-.media-card a {
-    display: inline-block;
-    padding: 10px 15px;
-    margin: 1rem;
-    background-color: #007bff;
-    color: white;
-    text-decoration: none;
-    border-radius: 4px;
-}
-
-.media-card h3 {
-    padding: 15px;
-    margin: 0;
-    font-size: 18px;
-    background-color: #f8f8f8;
-}
-
-.new-transcode form {
-    display: flex;
-    flex-direction: column;
-}
-
-.new-transcode .selects {
-    display: flex;
-    flex-direction: row;
-}
-
-.new-transcode select {
-    padding: 0.5rem;
-    border-radius: 4px;
-    border: 1px solid #ccc;
-    flex-grow: 1;
-    margin: 1rem;
-}
-
-.audio-container audio {
-    width: 100%;
-}
-
-.video-container video {
-    width: 100%;
-    max-width: 600px;
-    display: block;
-    margin: 0 auto;
-}
-
-.media-buttons {
-    text-align: center;
-}
-
-.delete-button {
-    background-color: red;
-    color: white;
-    margin-top: 0;
-    padding-top: 0;
-}
-
-.transcode-button {
-    background-color: green;
-    color: white;
-}
-
 /* narrower than 600px */
 @media (max-width: 600px) {
     .media-grid {

templates/video.html

@@ -7,6 +7,7 @@
     <title>{{.original.Title}}</title>
     <link rel="stylesheet" href="/static/style/common.css">
     <link rel="stylesheet" href="/static/style/video.css">
+    <link rel="stylesheet" href="/static/style/media-card.css">
     {{template "footer-css" .}}
 </head>