TheShinyMelon/layer-8
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CHANGE: kinda added scuffed mobile layout query to styles and fixed the menu bar when hovering

Browse Source
This commit is contained in:
TheShinyMelon 2025-03-12 01:03:18 +01:00
parent 3584792c3a
commit 2002abd324
6 changed files with 130 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/db_utilities.php
View File

@ -2,17 +2,22 @@
$toolbar = <<<TOOLBAR $toolbar = <<<TOOLBAR
<form class='db_utilities' method='POST'> <form class='db_utilities' method='POST'>
<label for='sel_order'>order by:</label> <label>
<select name='sel_order' id='sel_order'> order by:
<option value='new'>newest</option> <select name='sel_order'>
<option value='old'>oldest</option> <option value='new'>newest</option>
<option value='az'>A - Z</option> <option value='old'>oldest</option>
<option value='za'>Z -A</option> <option value='az'>A - Z</option>
</select> <option value='za'>Z -A</option>
<label for='inp_search'>search:</label> </select>
<input type='search' name='inp_search' id='inp_search'></input> </label>
<label for='submit'> </label> <label>
<input type='submit' name='submit' value='&nbsp;filter&nbsp;'></input> search:
<input type='search' name='inp_search'></input>
</label>
<label for='submit'>
<input type='submit' name='submit' value='&nbsp;filter&nbsp;'></input>
</label>
</form> </form>
TOOLBAR; TOOLBAR;

4
public/about.php
View File

@ -1,4 +1,4 @@
<h1 class='cat_heading'>> chosen file type: person<br>&nbsp;&nbsp;getting to know me is futile...<br>&nbsp;&nbsp;listing files...<br>$<img src='./resources/img/cursor_blinking.gif' class='pixelart' style='height: 1em;'></h1> <h1 class='cat_heading'>> chosen file type: person<br>&nbsp;&nbsp;getting to know me is futile...<br>&nbsp;&nbsp;listing files...<br>$<img src='./resources/img/cursor_blinking.gif' class='pixelart blinky_cursor' style='height: 1em;'></h1>
<div style='margin: auto; width: 85vw;'> <div style='margin: auto; width: 85vw;'>
<h2>I am a human. Treat me as such. I will reciprocate.</h2> <h2>I am a human. Treat me as such. I will reciprocate.</h2>
@ -14,7 +14,7 @@
So, in turn, this site represents my personality traits in the '''real''' world. 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...)<br><br> (People of culture would call this 'edgy tsundere behavior', but what do they know...)<br><br>
Let's all love Lain! &#10084;<br> Let's all love Lain! &#10084;<br>
- Dani aka TheShinyMelon - Dani
</p> </p>
<img src='./resources/img/about-me.gif' style='height: 10rem; margin: 5rem;' class='pixelart'> <img src='./resources/img/about-me.gif' style='height: 10rem; margin: 5rem;' class='pixelart'>
</div> </div>

2
public/audio.php
View File

@ -1,4 +1,4 @@
<h1 class='cat_heading'>> chosen file type: audio<br>&nbsp;&nbsp;listing files...<br>$<img src='./resources/img/cursor_blinking.gif' class='pixelart' style='height: 1em;'></h1> <h1 class='cat_heading'>> chosen file type: audio<br>&nbsp;&nbsp;listing files...<br>$<img src='./resources/img/cursor_blinking.gif' class='pixelart blinky_cursor' style='height: 1em;'></h1>
<?php <?php
include_once('../app/db_connector.php'); include_once('../app/db_connector.php');

2
public/image.php
View File

@ -1,4 +1,4 @@
<h1 class='cat_heading'>> chosen file type: image<br>&nbsp;&nbsp;listing files...<br>$<img src='./resources/img/cursor_blinking.gif' class='pixelart' style='height: 1em;'></h1> <h1 class='cat_heading'>> chosen file type: image<br>&nbsp;&nbsp;listing files...<br>$<img src='./resources/img/cursor_blinking.gif' class='pixelart blinky_cursor' style='height: 1em;'></h1>
<?php <?php
include_once('../app/db_connector.php'); include_once('../app/db_connector.php');

4
public/index.php
View File

@ -9,7 +9,7 @@
<body> <body>
<?php <?php
if(!isset($_GET['el']) || $_GET['el'] == 'index') { if(!isset($_GET['el']) || $_GET['el'] == 'index') {
echo('<div style="height: 24vh;"></div>'); } echo('<div class="massive_spacer" style="height: 24vh;"></div>'); }
?> ?>
<a href='index.php' class='logo_link'> <a href='index.php' class='logo_link'>
<div class='logo_group'> <div class='logo_group'>
@ -72,7 +72,7 @@
<a href='./index.php?el=privacy'>privacy policy</a> <a href='./index.php?el=privacy'>privacy policy</a>
<a href='./index.php?el=contact'>contact</a> <a href='./index.php?el=contact'>contact</a>
</p> </p>
<p class='footer_element'><a href='https://layer-8.moe/'>layer-8.moe</a> - non-commercial homepage run by a private individual <?php echo date("Y"); ?></p> <p class='footer_element footer_flavor'><a href='https://layer-8.moe/'>layer-8.moe</a> - non-commercial homepage run by a private individual <?php echo date("Y"); ?></p>
<p class='footer_element'> <p class='footer_element'>
&nbsp;<a href='https://layer-8.moe/' target='_blank'><img src='./resources/img/site-ad.gif'></a> &nbsp;<a href='https://layer-8.moe/' target='_blank'><img src='./resources/img/site-ad.gif'></a>
&nbsp;<a href='https://quintern.xyz/' target='_blank'><img src='./resources/img/site-ad-quintern.gif'></a> &nbsp;<a href='https://quintern.xyz/' target='_blank'><img src='./resources/img/site-ad-quintern.gif'></a>

118
public/resources/stylesheet.css
View File

@ -1,23 +1,23 @@
@font-face { @font-face {
font-family: 'sans'; font-family: 'sans';
src: url('../resources/fonts/LiberationSans.woff') format('woff'), src: url('./fonts/LiberationSans.woff') format('woff'),
url('../resources/fonts/LiberationSans.ttf') format('truetype'); url('./fonts/LiberationSans.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'mono'; font-family: 'mono';
src: url('../resources/fonts/LiberationMono.woff') format('woff'), src: url('./fonts/LiberationMono.woff') format('woff'),
url('../resources/fonts/LiberationMono.ttf') format('truetype'); url('./fonts/LiberationMono.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'hyper'; font-family: 'hyper';
src: url('../resources/fonts/RealityHyperRegular.woff') format('woff'), src: url('./fonts/RealityHyperRegular.woff') format('woff'),
url('../resources/fonts/RealityHyperRegular.ttf') format('truetype'); url('./fonts/RealityHyperRegular.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -77,17 +77,17 @@ footer {
font-family: 'mono'; font-family: 'mono';
font-size: 2rem; font-size: 2rem;
text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A, text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A,
0 7px 0 #17202A, 0 8px 0 #17202A, 0 3px 0 #17202A, 0 4px 0 #17202A,
0 11px 0 #17202A, 0 12px 0 #17202A; 0 5px 0 #17202A, 0 6px 0 #17202A;
} }
.menu_bar li { .menu_bar li {
list-style-type: none; list-style-type: none;
margin: 1rem;
} }
.menu_bar li a { .menu_bar li a {
text-decoration: none; text-decoration: none;
font-family: 'mono';
} }
.menu_bar li a:hover { .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 { .menu_bar li a:hover:before {
content: '~/'; content: '~/';
} }
.menu_bar li a:hover:after { .menu_bar li a:hover:after {
content: '/ '; content: '/\00a0';
} }
.menu_bar li a:active { .menu_bar li a:active {
@ -154,6 +162,10 @@ footer {
color: #FFF; color: #FFF;
} }
.blinky_cursor {
margin-left: 1rem;
}
.pixelart { .pixelart {
image-rendering: pixelated; image-rendering: pixelated;
image-rendering: -moz-crisp-edges; image-rendering: -moz-crisp-edges;
@ -181,6 +193,7 @@ footer {
form > label { form > label {
margin-left: 1rem; margin-left: 1rem;
white-space: nowrap;
} }
.music_player { .music_player {
@ -188,3 +201,88 @@ form > label {
flex-direction: column; flex-direction: column;
width: 30%; 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;
}
}