woah is that a new design

2024-11-04 23:12:59 +00:00 · 2024-11-04 23:12:59 +00:00 · 098d68b393
commit 098d68b393
parent 5dc6252c4c
6 changed files with 207 additions and 405 deletions
--- a/public/css/master.css
+++ b/public/css/master.css
@ -1,206 +1,37 @@
-@font-face {
-    font-family: 'BigBlue TerminalPlus';
-    src: url('/fonts/BigBlue_TerminalPlus.woff2') format('woff2'),
-    url('/fonts/BigBlue_TerminalPlus.woff') format('woff');
-    font-weight: normal;
-    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%;
+:root {
+    --pattern: hsl(280, 63%, 81%);
+    --links: hsl(280, 50%, 57%);
+    --background: hsl(280, 20%, 88%);
+    --border: 1px solid hsl(0, 0%, 20%);
+    --foreground: hsl(0, 0%, 0%);
 }

 body {
-    background-color: var(--background);
-    color: var(--foreground);
-}
-
-body,
-button,
-select {
-    font-family: russiangothic, ms ui gothic, "nec_apc3", Tahoma, sans-serif;
-}
-
-h1,
-h2 {
-    font-family: "pixel nes", sans-serif;
+    background-image: url("/images/background.svg");
+    background-color: var(--pattern);
+    background-size: 150px;
+    margin: 0;
+    font-family: "Gill Sans", sans-serif;
 }

 h1,
 h2,
 h3,
 h4,
+p,
 ul,
-p {
+ol {
    margin: 0;
 }

-hr {
-    border: none;
-    border-top: 1px solid var(--foreground);
-}
-
 a {
    color: var(--links);
    text-decoration: underline dotted;
 }

 a:hover {
-    text-decoration: underline;
-}
-
-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;
+    opacity: 80%;
+    text-decoration: underline solid;
 }

 a.button,
@ -212,132 +43,88 @@ a.button:hover img {
    opacity: 80%;
 }

-main > .section,
-.sidebar > .section {
-    margin-bottom: 10px;
+img.pixel {
+    image-rendering: pixelated;
 }

-main > .section:last-child,
-.sidebar > .section:last-child {
+div.page-container {
+    color: var(--foreground);
+    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;
-}
--- a/public/images/background.svg
+++ b/public/images/background.svg
@ -0,0 +1,3 @@
+<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>
--- a/public/images/buttons/transrights.gif
+++ b/public/images/buttons/transrights.gif
--- a/public/images/buttons/yuri.gif
+++ b/public/images/buttons/yuri.gif
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@ -22,39 +22,24 @@
    <meta property="og:title" content="{{ str_replace("www.", "", Request::getHost()) }} | {{ $title }}">
    <meta property="og:image" content="/favicon-128x128.png">
 </head>
-<body onload="setSchemeSelector()">
-<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>
+<body>
+<div class="page-container">
+    <div>
+        <div id="site-header">
+            <h1>niko's site</h1>
        </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><x-navigation/></div>
        <div class="section centerbox"><x-discord-status/></div>
        <div class="section"><x-weather/></div>
    </div>
+    <div>
+        {{ $slot }}
    </div>
-        <footer>
+    <div class="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>
+            <a href="https://git.frzn.dev/fwoppydwisk/diskfloppy.me/releases/latest">Source</a><br>
            Served by {{ gethostname() }}
        </div>
        <div>
@ -70,10 +55,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/brokenimage.gif') }}" width="88" height="31"
-                     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">
+            <img src="{{ URL::asset('images/buttons/transrights.gif') }}" width="88" height="31"
+                 class="pixel" alt="Trans rights now!">
+            <img src="{{ URL::asset('images/buttons/yuri.gif') }}" width="88" height="31"
+                 class="pixel" alt="Catgirl yuri now!">
            <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">
@ -97,8 +82,51 @@ 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>--}}
--- a/resources/views/components/navigation.blade.php
+++ b/resources/views/components/navigation.blade.php
@ -1,30 +1,14 @@
-<p><strong>Navigation:</strong></p>
-<div class="navlinks">
-<a href="/">
-    <img class="pixel navbar-icon" src="{{ asset('images/icons/nav/home2.png') }}" width="16" height="16" alt="">Home
-</a><br>
-<a href="//git.diskfloppy.me/">
-    <img class="pixel navbar-icon" src="{{ asset('images/icons/nav/repo.png') }}" width="16" height="16" alt="">Git
-</a><br>
-<a href="/pub/">
-	<img class="pixel navbar-icon" src="{{ asset('images/icons/nav/pubfiles.png') }}" width="16" height="16" alt="">Public Files
-</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>
+    <p><strong>Navigation:</strong></p>
+    <div class="navlinks">
+        <a href="/">/home/niko</a><br>
+        <a href="//git.diskfloppy.me/">~/git</a><br>
+        <a href="/pub/">~/pub</a><br>
+        <a href="/computers/">~/computers</a><br>
+        <a href="/calculators/">~/calculators</a><br>
+        <a href="/bookmarks/">~/bookmarks</a><br>
+        <a href="/guestbook/">~/guestbook</a><br>
+        <a href="//weather.diskfloppy.me/">~/weather</a><br>
+        <a href="/music/">~/music</a><br>
+    </div>
+</nav>