First steps towards making this thing look good on mobile
This commit is contained in:
parent
3cc5303f80
commit
1d8fdef22c
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>About</title>
|
||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Music</title>
|
||||
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>My setup</title>
|
||||
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Blog</title>
|
||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>deeptwisty.com 2nd anniversary - A History of This Bullshit</title>
|
||||
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Guide - How to Block User Agents With Nginx</title>
|
||||
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Guide - Self-Host Safely with WireGuard</title>
|
||||
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Guide - Things I Keep Having to Google</title>
|
||||
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Greenhouse</title>
|
||||
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>More</title>
|
||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<!--style type="text/css">
|
||||
|
@ -69,7 +70,16 @@
|
|||
<a target="_blank" href="https://deeptwisty.com/"><img src="buttons/deeptwisty_button.png" /></a>
|
||||
</div>
|
||||
<h2>TODO</h2>
|
||||
<iframe id="todowindow" class="embed" src="todo.html"></iframe>
|
||||
<ul>
|
||||
<li>Add a changelog to this page by parsing the atom feed</li>
|
||||
<li>Make a cool 404 page</li> <!-- Line Item -->
|
||||
<li>Add my CD collection to the music page</li>
|
||||
<li>Optimize this thing for mobile displays</li>
|
||||
<li>Make a page for games I like</li>
|
||||
<li>Update the navigation on the landing page to a vertical layout</li>
|
||||
<li>Write another blog post</li>
|
||||
<li>Update privacy policy</li>
|
||||
</ul>
|
||||
<div id="leftsidebg" style="background-image: url(bg.png); --distancefromcenter: -10%;"
|
||||
title="Pictured: A millipede, because I couldn't think of anything better to put here and I like them."></div>
|
||||
<?php include($_SERVER['DOCUMENT_ROOT'] . '/chromealert.php'); ?>
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>#quotes</title>
|
||||
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
|
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Changelog</title>
|
||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<link href="../embedded.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Add a changelog to this page by parsing the atom feed</li>
|
||||
<li>Make a cool 404 page</li> <!-- Line Item -->
|
||||
<li>Add my CD collection to the music page</li>
|
||||
<li>Optimize this thing for mobile displays</li>
|
||||
<li>Make a page for games I like</li>
|
||||
<li>Update the navigation on the landing page to a vertical layout</li>
|
||||
<li>Write another blog post</li>
|
||||
<li>Update privacy policy</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Guestbook</title>
|
||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
|
@ -83,6 +84,32 @@
|
|||
.message {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
@media only screen and (hover: none) {
|
||||
td {
|
||||
display: block;
|
||||
}
|
||||
form td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
input[type="text"], input[type="email"], textarea {
|
||||
background: none;
|
||||
border: 2px solid #00000033;
|
||||
border-bottom: 2px solid #888888;
|
||||
}
|
||||
article {
|
||||
width: 100%;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
article td:nth-child(2) {
|
||||
text-align: left;
|
||||
}
|
||||
article td:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
article td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
|
||||
</head>
|
||||
|
@ -136,8 +163,7 @@
|
|||
|
||||
<?php if($return == "success") { echo "<td></td><td><span class='success'>Successfully posted!</span></td>"; } ?>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><input type="reset"><input type="submit" value="Post"></td>
|
||||
<td colspan="2"><input type="reset"><input type="submit" value="Post"></td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="style.css" rel="stylesheet" type="text/css" media="all"/>
|
||||
<style type="text/css">
|
||||
body {
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Links</title>
|
||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Stats</title>
|
||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<style type="text/css">
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Items</title>
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
|
|
|
@ -142,6 +142,7 @@ if($feed // A basic check to m
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>RSS Filter</title>
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
|
|
68
style.css
68
style.css
|
@ -7,6 +7,7 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--stdfont);
|
||||
background-color: var(--bgcolor);
|
||||
|
@ -52,7 +53,7 @@ nav {
|
|||
box-shadow: var(--shadowsize) 0 var(--shadowsize) calc(0rem - var(--shadowsize)) black inset;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4.4rem;
|
||||
font-size: 4.4em;
|
||||
margin: 0;
|
||||
padding: 0 3rem 3rem 3rem;
|
||||
background-image: url(images/isopod.php);
|
||||
|
@ -60,6 +61,19 @@ h1 {
|
|||
background-size: contain;
|
||||
text-shadow: 2px 2px 5px black;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
h5 {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
h1 > a {
|
||||
color: inherit;
|
||||
|
@ -73,7 +87,7 @@ h1 + h2#caption {
|
|||
margin-top: -4.2rem;
|
||||
margin-right: -20rem;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.2em;
|
||||
z-index: 2;
|
||||
text-shadow: 1px 1px 3px black;
|
||||
}
|
||||
|
@ -87,7 +101,11 @@ h2 + h5, h3 + h5 {
|
|||
margin-top: -1.5rem;
|
||||
}
|
||||
nav {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
nav a, nav span {
|
||||
margin: 0 0.7rem;
|
||||
|
@ -141,7 +159,7 @@ code {
|
|||
}
|
||||
:is(main,body) > code {
|
||||
display: block;
|
||||
width: 32rem;
|
||||
width: 75%;
|
||||
margin: auto;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.7rem;
|
||||
|
@ -181,15 +199,6 @@ blockquote .attr {
|
|||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media(max-width: 650px) {
|
||||
body {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
h1 + h2#caption {
|
||||
margin-right: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.CboxOpenBtn img {
|
||||
opacity: 0;
|
||||
transition-duration: 0.2s;
|
||||
|
@ -246,4 +255,37 @@ blockquote .attr {
|
|||
75%{color: rgb(127,0,255); text-shadow: 0 0 4px rgb(103, 0, 206);}
|
||||
83%{color: rgb(255,0,255); text-shadow: 0 0 4px rgb(211, 0, 211);}
|
||||
91%{color: rgb(255,0,127); text-shadow: 0 0 4px rgb(211, 0, 105);}
|
||||
}
|
||||
@media only screen and (hover: none) {
|
||||
body {
|
||||
font-size: 1.65vh;
|
||||
--bodywidth: 90vw;
|
||||
}
|
||||
h1 {
|
||||
padding-left: unset;
|
||||
padding-right: unset;
|
||||
}
|
||||
h1 + h2#caption {
|
||||
margin-right: unset;
|
||||
margin-top: -3.5rem;
|
||||
}
|
||||
:is(main,body) > code {
|
||||
border-width: .1rem;
|
||||
}
|
||||
.buttons > * {
|
||||
width: 19%;
|
||||
}
|
||||
.buttons > a > img {
|
||||
width: 100%;
|
||||
}
|
||||
code {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
#leftsidebg, #rightsidebg {
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
box-shadow: 100vw 0 0 #00000088 inset;
|
||||
}
|
||||
tr:hover {
|
||||
background-color: initial;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue