Mercurial > web

comparison 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
comparison
equal deleted inserted replaced
66:ba20211d6b00 67:6019514100d4
7 <!-- bootstrap 2.3.2 gives an error that the `zoom` css property isn't supported, 7 <!-- bootstrap 2.3.2 gives an error that the `zoom` css property isn't supported,
8 but we don't have anything that uses it anyway --> 8 but we don't have anything that uses it anyway -->
9 <link href="./css/bootstrap.min.css" rel="stylesheet" media="screen"> 9 <link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
10 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?"> 10 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
11 <style nonce="paper-web-inline"> 11 <style nonce="paper-web-inline">
12 .navbar {
13 text-align: left; /* Override body text align */
14 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
15 }
16 .container {
17 width: 98%;
18 margin-top: 1%;
19 }
20 @media (min-aspect-ratio: 16/9) {
21 #bg {
22 height: auto;
23 width:100%;
24 }
25 }
26 @media (max-aspect-ratio: 16/9) {
27 #bg {
28 height: 100%;
29 width: auto;
30 }
31 }
32 #bg {
33 bottom: 0;
34 left: 50%;
35 min-height: 100%;
36 min-width: 100%;
37 overflow: hidden;
38 position: fixed;
39 right: 0;
40 top: 50%;
41 transform: translate(-50%, -50%);
42 z-index: -1;
43 display: none;
44 }
45 body { 12 body {
46 background: url('landscapeposter.jpg') no-repeat center center fixed; 13 background-size: cover;
14 background-image: url("landscapeposter.jpg");
15 background-position: center top;
47 background-size: cover; 16 background-size: cover;
48 background-color: 1F255A; 17 background-color: 1F255A;
49 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 18 // font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
50 overflow: hidden; 19 overflow: hidden;
51 text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 20 text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
52 } 21 }
53 div.box {
54 background-color: rgba(0, 0, 0, 0.5);
55 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5) inset;
56 color: white;
57 left: 0;
58 margin: auto;
59 padding: 10px;
60 position: fixed;
61 right: 0;
62 text-align: center;
63 top: 50%;
64 transform: translate(0, -50%);
65 width: 300px;
66 }
67 div.box-in-a-box {
68 left: 0;
69 margin: 5% auto;
70 right: 0;
71 }
72 div.logos { 22 div.logos {
73 filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); 23 filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
74 }
75 image#mod-archive {
76 image-rendering: pixelated; 24 image-rendering: pixelated;
77 } 25 }
78 </style> 26 </style>
79 <script nonce="paper-web-inline"> 27 <script nonce="paper-web-inline">
80 function setbg() { 28 function setbg() {
94 } 42 }
95 } 43 }
96 </script> 44 </script>
97 </head> 45 </head>
98 <body> 46 <body>
99 <video muted loop playsinline id="bg" poster="landscapeposter.jpg"> 47 <div class="navbar navbar-inverse">
100 <source src="landscapeloop.mp4" type="video/mp4"> <!-- from Hibike! Euphonium --> 48 <div class="navbar-inner">
101 </video> 49 <a class="brand" href="#">Paper's website</a>
102 <div class="box"> 50 <ul class="nav">
103 <div class="box-in-a-box"> 51 <li class="active"><a href="#">Home</a></li>
104 <h2>I'm Paper!</h2> 52 <li><a href="music.html">Music</a></li>
105 <p>I make YTPMV and chiptunes.</p> 53 <li><a href="projects.html">Projects</a></li>
54 </ul>
55 </div>
56 </div>
57 <p class="btn btn-primary btn-large center">
58 I'm Paper!
59 I make YTPMV and chiptunes.
106 <div class="fs-4 mb-3 logos"> 60 <div class="fs-4 mb-3 logos">
107 <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"> 61 <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">
108 <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"/> 62 <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"/>
109 </svg></a> 63 </svg></a>
110 &nbsp; 64 &nbsp;
120 &nbsp; 74 &nbsp;
121 <a href="https://c.im/@paper"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-mastodon" viewBox="0 0 16 16"> 75 <a href="https://c.im/@paper"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-mastodon" viewBox="0 0 16 16">
122 <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"/> 76 <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"/>
123 </svg></a> 77 </svg></a>
124 </div> 78 </div>
125 </div>
126 </div> 79 </div>
127 <div class="navbar-wrapper">
128 <div class="container paper-navbar">
129 <div class="navbar navbar-inverse">
130 <div class="navbar-inner">
131 <a class="brand" href="#">Paper's website</a>
132 <ul class="nav">
133 <li class="active"><a href="#">Home</a></li>
134 <li><a href="music.html">Music</a></li>
135 <li><a href="projects.html">Projects</a></li>
136 </ul>
137 </div>
138 </div>
139 </div>
140 </div>
141 </body> 80 </body>