CHANGE: kinda added scuffed mobile layout query to styles and fixed the menu bar when hovering
This commit is contained in:
TheShinyMelon
parent
3584792c3a
commit
2002abd324
@ -2,17 +2,22 @@
|
||||
|
||||
$toolbar = <<<TOOLBAR
|
||||
<form class='db_utilities' method='POST'>
|
||||
<label for='sel_order'>order by:</label>
|
||||
<select name='sel_order' id='sel_order'>
|
||||
<label>
|
||||
order by:
|
||||
<select name='sel_order'>
|
||||
<option value='new'>newest</option>
|
||||
<option value='old'>oldest</option>
|
||||
<option value='az'>A - Z</option>
|
||||
<option value='za'>Z -A</option>
|
||||
</select>
|
||||
<label for='inp_search'>search:</label>
|
||||
<input type='search' name='inp_search' id='inp_search'></input>
|
||||
<label for='submit'> </label>
|
||||
</label>
|
||||
<label>
|
||||
search:
|
||||
<input type='search' name='inp_search'></input>
|
||||
</label>
|
||||
<label for='submit'>
|
||||
<input type='submit' name='submit' value=' filter '></input>
|
||||
</label>
|
||||
</form>
|
||||
TOOLBAR;
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<h1 class='cat_heading'>> chosen file type: person<br> getting to know me is futile...<br> 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> getting to know me is futile...<br> listing files...<br>$<img src='./resources/img/cursor_blinking.gif' class='pixelart blinky_cursor' style='height: 1em;'></h1>
|
||||
|
||||
<div style='margin: auto; width: 85vw;'>
|
||||
<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.
|
||||
(People of culture would call this 'edgy tsundere behavior', but what do they know...)<br><br>
|
||||
Let's all love Lain! ❤<br>
|
||||
- Dani aka TheShinyMelon
|
||||
- Dani
|
||||
</p>
|
||||
<img src='./resources/img/about-me.gif' style='height: 10rem; margin: 5rem;' class='pixelart'>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<h1 class='cat_heading'>> chosen file type: audio<br> 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> listing files...<br>$<img src='./resources/img/cursor_blinking.gif' class='pixelart blinky_cursor' style='height: 1em;'></h1>
|
||||
|
||||
<?php
|
||||
include_once('../app/db_connector.php');
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<h1 class='cat_heading'>> chosen file type: image<br> 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> listing files...<br>$<img src='./resources/img/cursor_blinking.gif' class='pixelart blinky_cursor' style='height: 1em;'></h1>
|
||||
|
||||
<?php
|
||||
include_once('../app/db_connector.php');
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<body>
|
||||
<?php
|
||||
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'>
|
||||
<div class='logo_group'>
|
||||
@ -72,7 +72,7 @@
|
||||
<a href='./index.php?el=privacy'>privacy policy</a>
|
||||
<a href='./index.php?el=contact'>contact</a>
|
||||
</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'>
|
||||
<a href='https://layer-8.moe/' target='_blank'><img src='./resources/img/site-ad.gif'></a>
|
||||
<a href='https://quintern.xyz/' target='_blank'><img src='./resources/img/site-ad-quintern.gif'></a>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user