Initial Commit

assets/css/main.scss

@@ -0,0 +1,69 @@
+body {
+    background-image: linear-gradient(to bottom right, #7f00be, #0080bf);
+    background-color: #0080bf;
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    text-align: center;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 120px 1fr 60px;
+}
+
+*, *:active, *:focus, *:hover, *:visited, *:link {
+    color: #ffffff;
+}
+
+* {
+    font-family: sans-serif;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+h1 {
+    margin-bottom: 0px;
+    margin-top: 0px;
+}
+
+p {
+    margin-top: 0px;
+}
+
+a {
+    text-decoration: none;
+}
+
+header, footer {
+    background-color: #111111;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    a {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        height: 100%;
+        font-size: large;
+    
+        span {
+            font-weight: bold;
+            font-size: small;
+        }
+
+        img {
+            height: 50%;
+            user-select: text;
+        }
+    }
+
+    a:focus, a:hover {
+        background-color: #222222;
+    }
+}
+
+nav {
+    display: none;
+}

assets/css/player.scss

@@ -0,0 +1,95 @@
+main {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    section#schedule {
+    }
+
+    section#player {
+        max-width: 100%;
+        overflow: hidden;
+
+        .button {
+            background-color: #00000099;
+            display: flex;
+            width: 100%;
+            height: 40px;
+            font-weight: bold;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .button:focus, .button:hover {
+            background-color: #00000066;
+        }
+
+        .button i {
+            margin-right: 5px;
+        }
+
+        audio {
+            display: block;
+            width: 100%;
+        }
+
+        video {
+            width: 100%;
+            height: initial !important;
+        }
+
+        .video-js {
+            width: 100% !important;
+            height: initial !important;
+            border: 5px solid #222222;
+        }
+
+        .video-js .vjs-tech {
+            position: initial !important;
+            top: initial !important;
+            left: initial !important;
+        }
+
+        .video-js .vjs-control-bar {
+            position: initial !important;
+            opacity: 1 !important;
+        }
+
+        .video-js .vjs-error-display {
+            display: none;
+        }
+
+        .video-js .vjs-big-play-button {
+            top: 50%;
+            left: 50%;
+            margin-left: -1em;
+            margin-top: -1em;
+            width: 2em;
+            height: 2em;
+            line-height: 2em;
+            border: none;
+            border-radius: 50%;
+            font-size: 3.5em;
+            background-color: rgba(0,0,0,.45);
+            color: #fff;
+            -webkit-transition: border-color .4s,outline .4s,background-color .4s;
+            -moz-transition: border-color .4s,outline .4s,background-color .4s;
+            -ms-transition: border-color .4s,outline .4s,background-color .4s;
+            -o-transition: border-color .4s,outline .4s,background-color .4s;
+            transition: border-color .4s,outline .4s,background-color .4s
+        }
+
+        .video-js .vjs-big-play-button {
+            background-color: rgba(0,0,0,0.45);
+            font-size: 2.5em;
+            border-radius: 50%;
+            height: 2em !important;
+            line-height: 2em !important;
+            margin-top: -1em !important
+        }
+
+        .video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active {
+            background-color: rgba(0,199,248,0.9)
+        }
+    }
+}