public/css/master.css

@@ -1,37 +1,206 @@
-:root {
+@font-face {
-    --pattern: hsl(280, 63%, 81%);
+    font-family: 'BigBlue TerminalPlus';
-    --links: hsl(280, 50%, 57%);
+    src: url('/fonts/BigBlue_TerminalPlus.woff2') format('woff2'),
-    --background: hsl(280, 20%, 88%);
+    url('/fonts/BigBlue_TerminalPlus.woff') format('woff');
-    --border: 1px solid hsl(0, 0%, 20%);
+    font-weight: normal;
-    --foreground: hsl(0, 0%, 0%);
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: pixel nes;
+    src: url("/fonts/Pixel_NES.eot?") format("eot"),
+    url("/fonts/Pixel_NES.woff") format("woff"),
+    url("/fonts/Pixel_NES.ttf") format("truetype");
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: nec_apc3;
+    src: url("/fonts/Web437_NEC_APC3_8x16.woff") format("woff");
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: nec_apc3;
+    src: url("/fonts/Web437_Nix8810_M16.woff") format("woff");
+    font-style: normal;
+    font-weight: 700;
+}
+
+@supports (-moz-appearance:none) {
+    h2 {
+        text-shadow: var(--firefox-shadow) var(--shadow) !important;
+    }
+}
+
+html,
+body,
+.container {
+    height: 100%;
 }
 
 body {
-    background-image: url("/images/background.svg");
+    background-color: var(--background);
-    background-color: var(--pattern);
+    color: var(--foreground);
-    background-size: 150px;
+}
-    margin: 0;
+
-    font-family: "Gill Sans", sans-serif;
+body,
+button,
+select {
+    font-family: russiangothic, ms ui gothic, "nec_apc3", Tahoma, sans-serif;
+}
+
+h1,
+h2 {
+    font-family: "pixel nes", sans-serif;
 }
 
 h1,
 h2,
 h3,
 h4,
-p,
 ul,
-ol {
+p {
     margin: 0;
 }
 
+hr {
+    border: none;
+    border-top: 1px solid var(--foreground);
+}
+
 a {
     color: var(--links);
     text-decoration: underline dotted;
 }
 
 a:hover {
-    opacity: 80%;
+    text-decoration: underline;
-    text-decoration: underline solid;
+}
+
+ul {
+    list-style: square;
+    padding-left: 0;
+    list-style-position: inside;
+}
+
+.container {
+    display: flex;
+    /*align-items: center;*/
+    justify-content: center;
+}
+
+.page {
+    min-width: var(--page-width);
+    max-width: var(--page-width);
+}
+
+.navbar {
+    border: var(--foreground) solid 1px;
+}
+
+.navbar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.navbar li {
+    float: left;
+    border-right: solid var(--foreground) 1px;
+}
+
+.navbar li a {
+    display: block;
+    text-align: center;
+    color: var(--foreground);
+    text-decoration: none;
+    padding: 5px 7px 5px 5px;
+}
+
+.navbar li a:hover {
+    background-color: var(--foreground);
+    color: var(--background);
+}
+
+.pathbar {
+    border: 1px solid var(--foreground);
+    padding: 5px;
+}
+
+.content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding: 0;
+}
+
+.section {
+    border: var(--foreground) 1px solid;
+    padding: 10px;
+}
+
+.sidebar {
+    flex-basis: var(--sidebar-width);
+    flex-grow: 1;
+}
+
+main {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: 50%;
+}
+
+.navbar,
+.content,
+header,
+footer {
+    margin: 10px 10px 0 0;
+}
+
+header,
+footer,
+.navbar {
+    padding: 5px;
+}
+
+footer {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    grid-template-rows: 1fr;
+    grid-column-gap: 0;
+    grid-row-gap: 0;
+}
+
+footer div:last-child {
+    text-align: right;
+}
+
+select {
+    background-color: var(--background-secondary);
+    border: 1px solid var(--foreground);
+    color: var(--foreground);
+    padding: 0.25em;
+}
+
+button {
+    background-color: var(--background);
+    color: var(--foreground);
+    border: 1px solid var(--foreground);
+    padding: 0.25em 0.5em;
+}
+
+button:hover {
+    background-color: var(--foreground);
+    color: var(--background);
+}
+
+img.pixel {
+    image-rendering: pixelated;
 }
 
 a.button,
@@ -43,88 +212,132 @@ a.button:hover img {
     opacity: 80%;
 }
 
-img.pixel {
+main > .section,
-    image-rendering: pixelated;
+.sidebar > .section {
+    margin-bottom: 10px;
 }
 
-div.page-container {
+main > .section:last-child,
-    color: var(--foreground);
+.sidebar > .section:last-child {
-    height: calc(100vh - 20px);
-    width: calc(100vw - 20px);
-    display: grid;
-    grid-template-columns: minmax(auto, 400px) minmax(50vw, auto);
-    grid-template-rows: 1fr;
-    grid-column-gap: 1vw;
-    grid-row-gap: 0px;
-}
-
-div.page-container > div:first-child > div:first-child {
-    margin-top: 0;
-}
-
-div.page-container > div:first-child > div:last-child {
     margin-bottom: 0;
 }
 
-div.page-container {
-    margin: 10px;
-}
-div.page-container > div:first-child > div {
-    margin: 10px 0;
-}
-
-div.page-container > div:nth-child(2),
-div.page-container > div:first-child > div,
-div.page-container > div:last-child {
-    padding: 10px;
-    height: auto;
-    background-color: var(--background);
-    border: var(--border);
-}
-
-div.page-container > div:first-child {
-    height: fit-content;
-    height: auto;
-}
-
-div.page-container > div:first-child,
-div.page-container > div:nth-child(2) {
-    overflow: scroll;
-}
-
-div.page-container > div.footer {
-    grid-area: 2 / 1 / 3 / 3;
-    margin-top: 10px;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 0;
-    grid-row-gap: 0;
-}
-
-div.footer > div:first-child {
-    margin-left: 5px;
-}
-
-div.footer > div:last-child {
-    text-align: right;
-}
-
-div.footer > div {
-    vertical-align: middle;
-    height: fit-content;
-    width: 100%;
-    margin: auto;
-}
-
-div.pa .navlinks {
-    padding-left: 10px;
-}
-
 .navbar-icon {
     margin-right: 0.25em;
 }
 
+.navlinks {
+    padding-left: 10px;
+}
+
 .online-status {
     display: inline;
 }
+
+.centerbox {
+    text-align: center;
+}
+
+.quote {
+    padding-left: 10px;
+    border-left: solid 2px var(--foreground);
+}
+
+.music-top10 {
+    width: 100%;
+}
+
+.music-top10 td,
+.music-top10 th {
+    border: none;
+    border-left: 1px dotted var(--foreground);
+    padding: 2px 5px
+}
+
+.music-top10 tr:nth-child(1) th {
+    border-bottom: 1px dotted var(--foreground);
+}
+
+.music-top10 tr:nth-child(2) td {
+    padding-top: 5px;
+}
+
+.music-top10 td:first-child,
+.music-top10 th:first-child {
+    border: none;
+}
+
+.music-top10 tr th:first-child {
+    text-align: right;
+}
+
+.music-top10 td {
+    max-width: 200px;
+    white-space: nowrap;
+    text-overflow:ellipsis;
+    overflow: hidden;
+}
+
+.music-top10 tr td:first-child {
+    text-align: right;
+}
+
+.music-top10 tr td:nth-child(2),
+.music-top10 tr td:nth-child(3) {
+}
+
+
+.current-track h2 {
+    margin: 0;
+}
+
+table.computers {
+    table-layout: auto;
+    width: 75%;
+}
+
+table.computers td ul {
+    margin: 0;
+    padding-left: 20px;
+}
+
+table.computers .section-title {
+    text-decoration: underline;
+    font-style: italic;
+    font-weight: bold;
+}
+
+table.computers p.description {
+    font-style: italic;
+    margin: 5px 0 2px 0;
+}
+
+table.computers th {
+    background-color: var(--background-secondary);
+}
+
+table.computers td:first-child {
+    white-space: nowrap;
+}
+
+table.computers td,
+table.computers th {
+    border: var(--foreground) solid 1px;
+    padding: 5px;
+}
+
+.calculator-spec-table td {
+    border: var(--foreground) solid 1px;
+}
+
+.calculator-spec-table td {
+    padding: 5px 10px 5px 5px;
+}
+
+.calculator-spec-table tr td:first-child {
+    background-color: var(--background-secondary);
+}
+
+.sidebar > .section > button {
+    margin-top: 5px;
+}

public/images/background.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 800 800" preserveAspectRatio="xMidYMid slice"><defs><pattern id="pppixelate-pattern" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="translate(0 0) scale(8) rotate(0)" shape-rendering="crispEdges">
-    <rect width="1" height="1" x="9" y="0" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="0" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="1" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="1" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="2" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="2" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="3" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="3" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="4" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="4" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="5" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="5" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="6" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="6" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="7" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="7" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="8" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="8" fill="#FFFFFF80"></rect><rect width="1" height="1" x="0" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="1" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="2" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="3" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="4" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="5" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="6" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="7" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="8" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="9" fill="#FFFFFFbf"></rect><rect width="1" height="1" x="10" y="9" fill="#FFFFFFbf"></rect><rect width="1" height="1" x="11" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="12" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="13" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="14" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="15" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="16" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="17" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="18" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="19" y="9" fill="#FFFFFF80"></rect><rect width="1" height="1" x="0" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="1" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="2" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="3" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="4" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="5" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="6" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="7" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="8" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="10" fill="#FFFFFFbf"></rect><rect width="1" height="1" x="10" y="10" fill="#FFFFFFbf"></rect><rect width="1" height="1" x="11" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="12" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="13" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="14" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="15" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="16" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="17" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="18" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="19" y="10" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="11" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="11" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="12" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="12" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="13" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="13" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="14" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="14" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="15" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="15" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="16" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="16" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="17" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="17" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="18" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="18" fill="#FFFFFF80"></rect><rect width="1" height="1" x="9" y="19" fill="#FFFFFF80"></rect><rect width="1" height="1" x="10" y="19" fill="#FFFFFF80"></rect>
-  </pattern></defs><rect width="100%" height="100%" fill="url(#pppixelate-pattern)"></rect></svg>

resources/views/components/layout.blade.php

@@ -22,24 +22,39 @@
     <meta property="og:title" content="{{ str_replace("www.", "", Request::getHost()) }} | {{ $title }}">
     <meta property="og:image" content="/favicon-128x128.png">
 </head>
-<body>
+<body onload="setSchemeSelector()">
-<div class="page-container">
+<div class="container">
-    <div>
+    <div class="page">
-        <div id="site-header">
+        <header>
-            <h1>niko's site</h1>
+            <h1>{{ str_replace("www.", "", Request::getHost()) }}</h1>
+        </header>
+        <div class="navbar">
+            <p>
+                <strong>Current Path:</strong>
+                @if(Request::getRequestUri() == "/")
+                    /
+                @else
+                    {{ str_replace("/", " / ", rtrim(Request::getRequestUri(), "/")) }}
+                @endif
+            </p>
         </div>
-        <div><x-navigation/></div>
+        <div class="content">
+            <main>
+                {{ $slot }}
+            </main>
+            <div class="sidebar">
+                <div class="section"><nav><x-navigation/></nav></div>
+                <div class="section"><x-settings/></div>
                 <div class="section centerbox"><x-discord-status/></div>
                 <div class="section"><x-weather/></div>
             </div>
-    <div>
-        {{ $slot }}
         </div>
-    <div class="footer">
+        <footer>
             <div>
                 (c) floppydisk 2021-{{ date('Y') }}<br>
                 v{{ config('app.version') }},
-            <a href="https://git.frzn.dev/fwoppydwisk/diskfloppy.me/releases/latest">Source</a><br>
+                <a href="https://git.frzn.dev/fwoppydwisk/diskfloppy.me/releases/latest">Source</a>,
+                <a href="/privacy">Privacy Policy?</a><br>
                 Served by {{ gethostname() }}
             </div>
             <div>
@@ -55,10 +70,10 @@ class="pixel" alt="julimiro">
                     <img src="{{ URL::asset('images/buttons/x86.gif') }}" width="88" height="31"
                          class="pixel" alt="x86Overflow">
                 </a>
-            <img src="{{ URL::asset('images/buttons/transrights.gif') }}" width="88" height="31"
+                <img src="{{ URL::asset('images/buttons/brokenimage.gif') }}" width="88" height="31"
-                 class="pixel" alt="Trans rights now!">
+                     class="pixel" alt="Made with my own two paws">
-            <img src="{{ URL::asset('images/buttons/yuri.gif') }}" width="88" height="31"
+                <img src="{{ URL::asset('images/buttons/brokenimage.gif') }}" width="88" height="31"
-                 class="pixel" alt="Catgirl yuri now!">
+                     class="pixel" alt="Made with my own two paws">
                 <img src="{{ URL::asset('images/buttons/brokenimage.gif') }}" width="88" height="31"
                      class="pixel" alt="Made with my own two paws"><br>
                 <a href="https://dimden.dev/" class="button">
@@ -82,51 +97,8 @@ class="pixel" alt="I heart aliasing!">
                 <img src="{{ URL::asset('images/buttons/paws.gif') }}" width="88" height="31"
                      class="pixel" alt="Made with my own two paws">
             </div>
+        </footer>
     </div>
 </div>
-
 </body>
 </html>
-
-{{--<div class="container">--}}
-{{--    <div class="page">--}}
-{{--        <header>--}}
-{{--            <h1>{{ str_replace("www.", "", Request::getHost()) }}</h1>--}}
-{{--        </header>--}}
-{{--        <div class="navbar">--}}
-{{--            <p>--}}
-{{--                <strong>Current Path:</strong>--}}
-{{--                @if(Request::getRequestUri() == "/")--}}
-{{--                    /--}}
-{{--                @else--}}
-{{--                    {{ str_replace("/", " / ", rtrim(Request::getRequestUri(), "/")) }}--}}
-{{--                @endif--}}
-{{--            </p>--}}
-{{--        </div>--}}
-{{--        <div class="content">--}}
-{{--            <main>--}}
-{{--                {{ $slot }}--}}
-{{--            </main>--}}
-{{--            <div class="sidebar">--}}
-{{--                <div class="section"><nav><x-navigation/></nav></div>--}}
-{{--                <div class="section"><x-settings/></div>--}}
-{{--                <div class="section centerbox"><x-discord-status/></div>--}}
-{{--                <div class="section"><x-weather/></div>--}}
-{{--            </div>--}}
-{{--        </div>--}}
-{{--        <footer>--}}
-{{--            <div>--}}
-{{--                (c) floppydisk 2021-{{ date('Y') }}<br>--}}
-{{--                v{{ config('app.version') }},--}}
-{{--                <a href="https://git.frzn.dev/fwoppydwisk/diskfloppy.me/releases/latest">Source</a>,--}}
-{{--                <a href="/privacy">Privacy Policy?</a><br>--}}
-{{--                Served by {{ gethostname() }}--}}
-{{--            </div>--}}
-{{--            <div>--}}
-
-{{--            </div>--}}
-{{--        </footer>--}}
-{{--    </div>--}}
-{{--</div>--}}
-{{--</body>--}}
-{{--</html>--}}

resources/views/components/navigation.blade.php

@@ -1,14 +1,30 @@
-<nav>
 <p><strong>Navigation:</strong></p>
 <div class="navlinks">
-        <a href="/">/home/niko</a><br>
+<a href="/">
-        <a href="//git.diskfloppy.me/">~/git</a><br>
+    <img class="pixel navbar-icon" src="{{ asset('images/icons/nav/home2.png') }}" width="16" height="16" alt="">Home
-        <a href="/pub/">~/pub</a><br>
+</a><br>
-        <a href="/computers/">~/computers</a><br>
+<a href="//git.diskfloppy.me/">
-        <a href="/calculators/">~/calculators</a><br>
+    <img class="pixel navbar-icon" src="{{ asset('images/icons/nav/repo.png') }}" width="16" height="16" alt="">Git
-        <a href="/bookmarks/">~/bookmarks</a><br>
+</a><br>
-        <a href="/guestbook/">~/guestbook</a><br>
+<a href="/pub/">
-        <a href="//weather.diskfloppy.me/">~/weather</a><br>
+	<img class="pixel navbar-icon" src="{{ asset('images/icons/nav/pubfiles.png') }}" width="16" height="16" alt="">Public Files
-        <a href="/music/">~/music</a><br>
+</a><br>
+<a href="/computers/">
+	<img class="pixel navbar-icon" src="{{ asset('images/icons/nav/computers.png') }}" width="16" height="16" alt="">Computers
+</a><br>
+<a href="/calculators/">
+	<img class="pixel navbar-icon" src="{{ asset('images/icons/nav/calculators.png') }}" width="16" height="16" alt="">Calculators
+</a><br>
+<a href="/bookmarks/">
+	<img class="pixel navbar-icon" src="{{ asset('images/icons/nav/bookmarks.png') }}" width="16" height="16" alt="">Bookmarks
+</a><br>
+<a href="/guestbook/">
+	<img class="pixel navbar-icon" src="{{ asset('images/icons/nav/guestbook.png') }}" width="16" height="16" alt="">Guestbook
+</a><br>
+<a href="//weather.diskfloppy.me/">
+	<img class="pixel navbar-icon" src="{{ asset('images/icons/nav/weather.png') }}" width="16" height="16" alt="">Weather
+</a><br>
+<a href="/music/">
+	<img class="pixel navbar-icon" src="{{ asset('images/icons/nav/music.png') }}" width="16" height="16" alt="">Music
+</a><br>
 </div>
-</nav>