From 2002abd324419ac1a185be55d03199c630b9a62b Mon Sep 17 00:00:00 2001 From: TheShinyMelon Date: Wed, 12 Mar 2025 01:03:18 +0100 Subject: [PATCH] CHANGE: kinda added scuffed mobile layout query to styles and fixed the menu bar when hovering --- app/db_utilities.php | 27 +++++--- public/about.php | 4 +- public/audio.php | 2 +- public/image.php | 2 +- public/index.php | 4 +- public/resources/stylesheet.css | 118 +++++++++++++++++++++++++++++--- 6 files changed, 130 insertions(+), 27 deletions(-) diff --git a/app/db_utilities.php b/app/db_utilities.php index c828f77..eac011d 100755 --- a/app/db_utilities.php +++ b/app/db_utilities.php @@ -2,17 +2,22 @@ $toolbar = << - - - - - - + + + TOOLBAR; diff --git a/public/about.php b/public/about.php index a87fe43..30355b4 100755 --- a/public/about.php +++ b/public/about.php @@ -1,4 +1,4 @@ -

> chosen file type: person
  getting to know me is futile...
  listing files...
$

+

> chosen file type: person
  getting to know me is futile...
  listing files...
$

I am a human. Treat me as such. I will reciprocate.

@@ -14,7 +14,7 @@ So, in turn, this site represents my personality traits in the '''real''' world. (People of culture would call this 'edgy tsundere behavior', but what do they know...)

Let's all love Lain! ❤
- - Dani aka TheShinyMelon + - Dani

diff --git a/public/audio.php b/public/audio.php index bcf811d..2ce956b 100755 --- a/public/audio.php +++ b/public/audio.php @@ -1,4 +1,4 @@ -

> chosen file type: audio
  listing files...
$

+

> chosen file type: audio
  listing files...
$

> chosen file type: image
  listing files...
$ +

> chosen file type: image
  listing files...
$

'); } + echo('
'); } ?>
@@ -72,7 +72,7 @@ privacy policy contact

-

layer-8.moe - non-commercial homepage run by a private individual

+

layer-8.moe - non-commercial homepage run by a private individual

    diff --git a/public/resources/stylesheet.css b/public/resources/stylesheet.css index 4dcba36..2176f68 100755 --- a/public/resources/stylesheet.css +++ b/public/resources/stylesheet.css @@ -1,23 +1,23 @@ @font-face { font-family: 'sans'; - src: url('../resources/fonts/LiberationSans.woff') format('woff'), - url('../resources/fonts/LiberationSans.ttf') format('truetype'); + src: url('./fonts/LiberationSans.woff') format('woff'), + url('./fonts/LiberationSans.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'mono'; - src: url('../resources/fonts/LiberationMono.woff') format('woff'), - url('../resources/fonts/LiberationMono.ttf') format('truetype'); + src: url('./fonts/LiberationMono.woff') format('woff'), + url('./fonts/LiberationMono.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'hyper'; - src: url('../resources/fonts/RealityHyperRegular.woff') format('woff'), - url('../resources/fonts/RealityHyperRegular.ttf') format('truetype'); + src: url('./fonts/RealityHyperRegular.woff') format('woff'), + url('./fonts/RealityHyperRegular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @@ -77,17 +77,17 @@ footer { font-family: 'mono'; font-size: 2rem; text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A, - 0 7px 0 #17202A, 0 8px 0 #17202A, - 0 11px 0 #17202A, 0 12px 0 #17202A; + 0 3px 0 #17202A, 0 4px 0 #17202A, + 0 5px 0 #17202A, 0 6px 0 #17202A; } .menu_bar li { list-style-type: none; - margin: 1rem; } .menu_bar li a { text-decoration: none; + font-family: 'mono'; } .menu_bar li a:hover { @@ -99,12 +99,20 @@ footer { */ } +.menu_bar li a:before { + content: '\00a0\00a0'; +} + +.menu_bar li a:after { + content: '\00a0\00a0'; +} + .menu_bar li a:hover:before { content: '~/'; } .menu_bar li a:hover:after { - content: '/ '; + content: '/\00a0'; } .menu_bar li a:active { @@ -154,6 +162,10 @@ footer { color: #FFF; } +.blinky_cursor { + margin-left: 1rem; +} + .pixelart { image-rendering: pixelated; image-rendering: -moz-crisp-edges; @@ -181,6 +193,7 @@ footer { form > label { margin-left: 1rem; + white-space: nowrap; } .music_player { @@ -188,3 +201,88 @@ form > label { flex-direction: column; width: 30%; } + + +@viewport { + width: device-width; +} + +@media only screen and (max-width: 600px) { + footer { + padding: 0.1rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + } + + .footer_element { + padding: 0.1rem; + } + + .footer_element a { + padding: 0.5rem; + } + + .footer_flavor { + display: none; + } + + .logo_font { + color: #FFF; + font-family: 'hyper'; + font-size: 4rem; + text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A, + 0 7px 0 #17202A, 0 8px 0 #17202A, + 0 11px 0 #17202A, 0 12px 0 #17202A; + z-index: 999; + padding-left: 0rem; + margin-right: 4rem; + } + + .logo_gif { + height: 6rem; + margin: -6rem; + z-index: 998; + } + + .logo_group { + display: flex; + align-items: center; + pointer-events: none; + margin-bottom: -4rem; + } + + .logo_link { + text-decoration: none; + } + + .menu_bar { + margin-top: 3rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: 'mono'; + font-size: 2rem; + text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A, + 0 3px 0 #17202A, 0 4px 0 #17202A, + 0 5px 0 #17202A, 0 6px 0 #17202A; + } + + .menu_bar li { + margin: 0.5rem; + } + + .massive_spacer { + display: none; + } + + .cat_heading { + font-family: 'mono'; + font-size: 1rem; + padding-left: 0rem; + padding-bottom: 1rem; + color: #FFF; + } +} \ No newline at end of file