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">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>About</title>
|
<title>About</title>
|
||||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
|
<?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Music</title>
|
<title>Music</title>
|
||||||
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>My setup</title>
|
<title>My setup</title>
|
||||||
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Blog</title>
|
<title>Blog</title>
|
||||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<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>
|
<title>deeptwisty.com 2nd anniversary - A History of This Bullshit</title>
|
||||||
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Guide - How to Block User Agents With Nginx</title>
|
<title>Guide - How to Block User Agents With Nginx</title>
|
||||||
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Guide - Self-Host Safely with WireGuard</title>
|
<title>Guide - Self-Host Safely with WireGuard</title>
|
||||||
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Guide - Things I Keep Having to Google</title>
|
<title>Guide - Things I Keep Having to Google</title>
|
||||||
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Greenhouse</title>
|
<title>Greenhouse</title>
|
||||||
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>More</title>
|
<title>More</title>
|
||||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<!--style type="text/css">
|
<!--style type="text/css">
|
||||||
|
@ -69,7 +70,16 @@
|
||||||
<a target="_blank" href="https://deeptwisty.com/"><img src="buttons/deeptwisty_button.png" /></a>
|
<a target="_blank" href="https://deeptwisty.com/"><img src="buttons/deeptwisty_button.png" /></a>
|
||||||
</div>
|
</div>
|
||||||
<h2>TODO</h2>
|
<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%;"
|
<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>
|
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'); ?>
|
<?php include($_SERVER['DOCUMENT_ROOT'] . '/chromealert.php'); ?>
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>#quotes</title>
|
<title>#quotes</title>
|
||||||
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<style type="text/css">
|
<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">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Guestbook</title>
|
<title>Guestbook</title>
|
||||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
@ -83,6 +84,32 @@
|
||||||
.message {
|
.message {
|
||||||
padding-top: 1.5rem;
|
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>
|
</style>
|
||||||
<?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
|
<?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
|
||||||
</head>
|
</head>
|
||||||
|
@ -136,8 +163,7 @@
|
||||||
|
|
||||||
<?php if($return == "success") { echo "<td></td><td><span class='success'>Successfully posted!</span></td>"; } ?>
|
<?php if($return == "success") { echo "<td></td><td><span class='success'>Successfully posted!</span></td>"; } ?>
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
<td colspan="2"><input type="reset"><input type="submit" value="Post"></td>
|
||||||
<td><input type="reset"><input type="submit" value="Post"></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8"/>
|
<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"/>
|
<link href="style.css" rel="stylesheet" type="text/css" media="all"/>
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body {
|
body {
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Links</title>
|
<title>Links</title>
|
||||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Stats</title>
|
<title>Stats</title>
|
||||||
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Items</title>
|
<title>Items</title>
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
@font-face {
|
@font-face {
|
||||||
|
|
|
@ -142,6 +142,7 @@ if($feed // A basic check to m
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>RSS Filter</title>
|
<title>RSS Filter</title>
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
html, body {
|
html, body {
|
||||||
|
|
68
style.css
68
style.css
|
@ -7,6 +7,7 @@
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: var(--stdfont);
|
font-family: var(--stdfont);
|
||||||
background-color: var(--bgcolor);
|
background-color: var(--bgcolor);
|
||||||
|
@ -52,7 +53,7 @@ nav {
|
||||||
box-shadow: var(--shadowsize) 0 var(--shadowsize) calc(0rem - var(--shadowsize)) black inset;
|
box-shadow: var(--shadowsize) 0 var(--shadowsize) calc(0rem - var(--shadowsize)) black inset;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 4.4rem;
|
font-size: 4.4em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 3rem 3rem 3rem;
|
padding: 0 3rem 3rem 3rem;
|
||||||
background-image: url(images/isopod.php);
|
background-image: url(images/isopod.php);
|
||||||
|
@ -60,6 +61,19 @@ h1 {
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
text-shadow: 2px 2px 5px black;
|
text-shadow: 2px 2px 5px black;
|
||||||
text-align: center;
|
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 {
|
h1 > a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
@ -73,7 +87,7 @@ h1 + h2#caption {
|
||||||
margin-top: -4.2rem;
|
margin-top: -4.2rem;
|
||||||
margin-right: -20rem;
|
margin-right: -20rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2em;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
text-shadow: 1px 1px 3px black;
|
text-shadow: 1px 1px 3px black;
|
||||||
}
|
}
|
||||||
|
@ -87,7 +101,11 @@ h2 + h5, h3 + h5 {
|
||||||
margin-top: -1.5rem;
|
margin-top: -1.5rem;
|
||||||
}
|
}
|
||||||
nav {
|
nav {
|
||||||
text-align: center;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
max-width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
nav a, nav span {
|
nav a, nav span {
|
||||||
margin: 0 0.7rem;
|
margin: 0 0.7rem;
|
||||||
|
@ -141,7 +159,7 @@ code {
|
||||||
}
|
}
|
||||||
:is(main,body) > code {
|
:is(main,body) > code {
|
||||||
display: block;
|
display: block;
|
||||||
width: 32rem;
|
width: 75%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
padding: 0.7rem;
|
padding: 0.7rem;
|
||||||
|
@ -181,15 +199,6 @@ blockquote .attr {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 650px) {
|
|
||||||
body {
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
}
|
|
||||||
h1 + h2#caption {
|
|
||||||
margin-right: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.CboxOpenBtn img {
|
.CboxOpenBtn img {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition-duration: 0.2s;
|
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);}
|
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);}
|
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);}
|
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