Changed layout

package-lock.json

@@ -12,7 +12,6 @@
         "@types/node": "^20.10.1",
         "@types/react": "^18.2.39",
         "@types/react-dom": "^18.2.17",
-        "purecss": "^3.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -3853,11 +3852,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/purecss": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/purecss/-/purecss-3.0.0.tgz",
-      "integrity": "sha512-IdYbGwbmuA7Hy9ACIO1q7ks4xGLcJSVHxJT2BXIz2c4Ve1aSrNU5bAzA1ILT4Gmdy5K59ruWoRPf9WvJZU5fbA=="
-    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",

package.json

@@ -22,7 +22,6 @@
     "@types/node": "^20.10.1",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
-    "purecss": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

src/css/style.css

@@ -1,284 +1,101 @@
-@import 'npm:purecss/build/pure.css';
+:root {
+    --menu-header-color: #FF99C9;
+    --menu-header-text: #FFEBF4;
+    --menu-background-color: #C1BDDB;
+    --menu-item-color: #A2C7E5;
+    --menu-item-hover: #B7D8BE;
+    --menu-selected-color: #CBE896;
+    --main-background: #FCDFA6;
+}
 
 body {
-    color: #777;
-}
-
-.pure-img-responsive {
-    max-width: 100%;
-    height: auto;
-}
-
-/*
-Add transition to containers so they can push in and out.
-*/
-#layout,
-#menu,
-.menu-link {
-    -webkit-transition: all 0.2s ease-out;
-    -moz-transition: all 0.2s ease-out;
-    -ms-transition: all 0.2s ease-out;
-    -o-transition: all 0.2s ease-out;
-    transition: all 0.2s ease-out;
-}
-
-/*
-This is the parent `<div>` that contains the menu and the content area.
-*/
-#layout {
-    position: relative;
-    left: 0;
-    padding-left: 0;
-}
-
-#layout.active #menu {
-    left: 150px;
-    width: 150px;
-}
-
-#layout.active .menu-link {
-    left: 150px;
-}
-
-/*
-The content `<div>` is where all your content goes.
-*/
-.content {
-    margin: 0 auto;
-    padding: 0 2em;
-    margin-left: 150px;
-
-    /* max-width: 800px; */
-    margin-bottom: 50px;
-    line-height: 1.6em;
-}
-
-.content video {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    min-width: 100%;
-    min-height: 100%;
-    width: auto;
-    height: auto;
-    z-index: -100;
-    background-size: cover;
     overflow: hidden;
+    height: 100vh;
+    margin: 0px;
 }
 
-.content p {
+#main {
-    padding-left: 5em;
+    flex: 1 1 auto;
+    height: 100%;
+    background-color: var(--main-background);
 }
 
-.header {
+.video-wrapper {
-    margin: 0;
+    justify-content: left;
-    color: #333;
+    align-items: left;
-    text-align: center;
-    padding: 2.5em 2em 0;
-    border-bottom: 1px solid #eee;
 }
 
-.header h1 {
+video {
-    margin: 0.2em 0;
+    position: absolute;
-    font-size: 3em;
+    height: 100%;
-    font-weight: 300;
+    width: auto; 
 }
 
-.header h2 {
+main {
-    font-weight: 300;
-    color: #ccc;
-    padding: 0;
-    margin-top: 0;
-}
-
-.content-subhead {
-    margin: 50px 0 20px 0;
-    font-weight: 300;
-    color: #888;
-}
-
-
-
-/*
-The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
-appears on the left side of the page.
-*/
-
-#menu {
-    margin-left: -150px;
-    /* "#menu" width */
-    width: 240px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 1000;
-    /* so the menu or its navicon stays above all content */
-    background: #191818;
     overflow-y: auto;
 }
 
-/*
+aside {
-    All anchors inside the menu should be styled like this.
+    width: max-content;
-    */
+    flex: 1 0 auto;
-#menu a {
+    margin-left: 0px;
-    color: #999;
+    padding-left: 0px;
-    border: none;
+    background-color: var(--menu-background-color);
-    padding: 0.6em 0 0.6em 0.6em;
+    height: 100%;
 }
 
-/*
+.menu-list {
-    Remove all background/borders, since we are applying them to #menu.
+    list-style: none;
-    */
+    background-color: brown;
-#menu .pure-menu,
+    margin-top: 0px;
-#menu .pure-menu ul {
-    border: none;
-    background: transparent;
 }
 
-/*
+ul.menu-list {
-    Add that light border to separate items into groups.
+    padding-left: 0;
-    */
-#menu .pure-menu ul,
-#menu .pure-menu .menu-item-divided {
-    border-top: 1px solid #333;
 }
 
-/*
+a.menu-link {
-        Change color of the anchor links on hover/focus.
-        */
-#menu .pure-menu li a:hover,
-#menu .pure-menu li a:focus {
-    background: #333;
-}
-
-/*
-    This styles the selected menu item `<li>`.
-    */
-#menu .pure-menu-selected,
-#menu .pure-menu-heading {
-    background: #1f8dd6;
-}
-
-/*
-        This styles a link within a selected menu item `<li>`.
-        */
-#menu .pure-menu-selected a {
-    color: #fff;
-}
-
-/*
-    This styles the menu heading.
-    */
-#menu .pure-menu-heading {
-    font-size: 110%;
-    color: #fff;
-    margin: 0;
-}
-
-/* -- Dynamic Button For Responsive Menu -------------------------------------*/
-
-/*
-The button to open/close the Menu is custom-made and not part of Pure. Here's
-how it works:
-*/
-
-/*
-`.menu-link` represents the responsive menu toggle that shows/hides on
-small screens.
-*/
-.menu-link {
-    position: fixed;
-    display: block;
-    /* show this only on small screens */
-    top: 0;
-    left: 0;
-    /* "#menu width" */
-    background: #000;
-    background: rgba(0, 0, 0, 0.7);
-    font-size: 10px;
-    /* change this value to increase/decrease button size */
-    z-index: 10;
-    width: 2em;
-    height: auto;
-    padding: 2.1em 1.6em;
-}
-
-.menu-link:hover,
-.menu-link:focus {
-    background: #000;
-}
-
-.menu-link span {
-    position: relative;
-    display: block;
-}
-
-.menu-link span,
-.menu-link span:before,
-.menu-link span:after {
-    background-color: #fff;
-    pointer-events: none;
-    width: 100%;
-    height: 0.2em;
-}
-
-.menu-link span:before,
-.menu-link span:after {
-    position: absolute;
-    margin-top: -0.6em;
-    content: " ";
-}
-
-.menu-link span:after {
-    margin-top: 0.6em;
-}
-
-
-/* -- Responsive Styles (Media Queries) ------------------------------------- */
-
-/*
-Hides the menu at `48em`, but modify this based on your app's needs.
-*/
-@media (min-width: 48em) {
-
-    .header,
-    .content {
     padding-left: 2em;
-        padding-right: 2em;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: larger;
+    margin-right: auto;
 }
 
-    #layout {
+.menu-heading {
-        padding-left: 150px;
+    padding-left: 1em;
-        /* left col width "#menu" */
+    padding-right: 1em;
-        left: 0;
+    background-color: var(--menu-header-color);
+    color: var(--menu-header-text);
+    font-size: larger;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-    #menu {
+a.menu-heading {
-        left: 150px;
+    text-decoration: none;
 }
 
-    .menu-link {
+.menu-item a {
-        position: fixed;
+    color: aliceblue;
-        left: 150px;
+    text-decoration: none;
-        display: none;
 }
 
-    #layout.active .menu-link {
+.menu-item {
-        left: 150px;
+    cursor: pointer;
-    }
 }
 
-@media (max-width: 48em) {
+li.menu-item {
+    background-color: var(--menu-item-color);
+    margin-top: 1px;
+}
+li.menu-item:hover {
+    background-color: var(--menu-item-hover);
+}
 
-    /* Only apply this when the window is small. Otherwise, the following
+li.menu-selected {
-    case results in extra padding on the left:
+    background-color: var(--menu-selected-color)
-        * Make the window small.
-        * Tap the menu to trigger the active state.
-        * Make the window large again.
-    */
-    #layout.active {
-        position: relative;
-        left: 150px;
 }
+
+#app {
+    display: flex;
+    height: 100%;
 }

src/js/media.tsx

@@ -121,9 +121,11 @@ export class MediaContainer extends React.Component<MediaContainerProps, MediaCo
     render() {
         return (
             <div id="main">
-                <div className="content">
+                <main>
+                    <div className="video-wrapper">
                         {this.renderVideo()}
                     </div>
+                </main>
             </div>
         )
     }

src/js/menu.tsx

@@ -17,12 +17,12 @@ export class Menu extends React.Component<MenuProps> {
     render() {
         return (
             <div id="menu">
-                <div className="pure-menu">
+                <aside>
-                    <a className="pure-menu-heading" href="#">stream.t-juice.club</a>
+                    <a className="menu-heading" href="#">stream.t-juice.club</a>
-                    <ul className="pure-menu-list">
+                    <ul className="menu-list">
                         {this.menuitems()}
                     </ul>
-                </div>
+                </aside>
             </div>
         )
     }
@@ -32,11 +32,11 @@ export class Menu extends React.Component<MenuProps> {
             <>
                 {this.props.items.map((value, idx) => {
                     if (this.props.selectedItem == value) {
-                        return <li key={idx} className="pure-menu-item pure-menu-selected"><a href={"#" + value} className="pure-menu-link">{value}</a></li>
+                        return <li key={idx} className="menu-item menu-selected"><a href={"#" + value} className="menu-link">{value}</a></li>
                     } else {
                         return <li key={idx} onClick={() => {
                             this.props.selectCallback(value)
-                        }} className="pure-menu-item"><a href={"#" + value} className="pure-menu-link">{value}</a></li>
+                        }} className="menu-item"><a href={"#" + value} className="menu-link">{value}</a></li>
                     }
                 })}
             </>