Mercurial > web

diff index.html @ 67:6019514100d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
html: fix random scaling shit on >1080p monitors thanks twitter user for telling me
author Paper <mrpapersonic@gmail.com>
date Mon, 28 Aug 2023 16:52:30 -0400
parents ba20211d6b00
children de57aed2d203
line wrap: on
line diff
--- a/index.html	Tue Mar 28 16:46:44 2023 -0400
+++ b/index.html	Mon Aug 28 16:52:30 2023 -0400
@@ -9,70 +9,18 @@
 	<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
 	<style nonce="paper-web-inline">
-		.navbar {
-			text-align: left; /* Override body text align */
-			box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
-		}
-		.container {
-			width: 98%;
-			margin-top: 1%;
-		}
-		@media (min-aspect-ratio: 16/9) {
-			#bg {
-				height: auto;
-				width:100%;
-			}
-		}
-		@media (max-aspect-ratio: 16/9) {
-			#bg {
-				height: 100%;
-				width: auto;
-			}
-		}
-		#bg {
-			bottom: 0;
-			left: 50%;
-			min-height: 100%;
-			min-width: 100%;
-			overflow: hidden;
-			position: fixed;
-			right: 0;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			z-index: -1;
-			display: none;
-		}
 		body {
-			background: url('landscapeposter.jpg') no-repeat center center fixed;
+			background-size: cover;
+			background-image: url("landscapeposter.jpg");
+			background-position: center top;
 			background-size: cover;
 			background-color: 1F255A;
-			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+			// font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 			overflow: hidden;
 			text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
 		}
-		div.box {
-			background-color: rgba(0, 0, 0, 0.5);
-			box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5) inset;
-			color: white;
-			left: 0;
-			margin: auto;
-			padding: 10px;
-			position: fixed;
-			right: 0;
-			text-align: center;
-			top: 50%;
-			transform: translate(0, -50%);
-			width: 300px;
-		}
-		div.box-in-a-box {
-			left: 0;
-			margin: 5% auto;
-			right: 0;
-		}
 		div.logos {
 			filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
-		}
-		image#mod-archive {
 			image-rendering: pixelated;
 		}
 	</style>
@@ -96,13 +44,19 @@
 	</script>
 </head>
 <body>
-	<video muted loop playsinline id="bg" poster="landscapeposter.jpg">
-		<source src="landscapeloop.mp4" type="video/mp4"> <!-- from Hibike! Euphonium -->
-	</video>
-	<div class="box">
-		<div class="box-in-a-box">
-		<h2>I'm Paper!</h2>
-		<p>I make YTPMV and chiptunes.</p>
+	<div class="navbar navbar-inverse">
+		<div class="navbar-inner">
+			<a class="brand" href="#">Paper's website</a>
+			<ul class="nav">
+				<li class="active"><a href="#">Home</a></li>
+				<li><a href="music.html">Music</a></li>
+				<li><a href="projects.html">Projects</a></li>
+			</ul>
+		</div>
+	</div>
+	<p class="btn btn-primary btn-large center">
+		I'm Paper!
+		I make YTPMV and chiptunes.
 		<div class="fs-4 mb-3 logos">
 			<a href="https://www.youtube.com/c/PaperYTPMV"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-youtube" viewBox="0 0 16 16">
 				<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
@@ -122,20 +76,5 @@
 				<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"/>
 			</svg></a>
 		</div>
-		</div>
 	</div>
-    <div class="navbar-wrapper">
-		<div class="container paper-navbar">
-			<div class="navbar navbar-inverse">
-				<div class="navbar-inner">
-					<a class="brand" href="#">Paper's website</a>
-					<ul class="nav">
-						<li class="active"><a href="#">Home</a></li>
-						<li><a href="music.html">Music</a></li>
-						<li><a href="projects.html">Projects</a></li>
-					</ul>
-				</div>
-			</div>
-		</div>
-    </div>
 </body>