attempted bugfix on ios

This commit is contained in:
a 2022-01-14 21:24:06 -06:00
parent cecdfeea2b
commit 6b1be7caa3

View file

@ -15,7 +15,7 @@
<!-- default styling -----------------------------------------------> <!-- default styling ----------------------------------------------->
<style> <style>
/* do some resets */ /* do some resets */
* {margin: 0; padding: 0; box-sizing: border-box;} * {margin: 0; padding: 0; box-sizing: border-box}
html {font-family: -apple-system, BlinkMacSystemFont, html {font-family: -apple-system, BlinkMacSystemFont,
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue", "Segoe UI", sans-serif} "Fira Sans", "Droid Sans", "Helvetica Neue", "Segoe UI", sans-serif}
@ -25,12 +25,9 @@ header p {font-size: clamp(1em, 5vw, 1.5em); line-height: 1.5; max-width: 32ch}
h2 {font-size: 1.5em; line-height: 1.333} h2 {font-size: 1.5em; line-height: 1.333}
p {font-size: 1em; line-height: 1.5} p {font-size: 1em; line-height: 1.5}
/* layout */ /* layout */
body {margin: auto;} body {margin: auto}
@media (min-width: 40em) { @media (min-width: 40em) {
body { body {margin: 0; width: 20em}
margin: 0;
width: 20em;
}
header h1 {font-size: 1.5em} header h1 {font-size: 1.5em}
header p {font-size: 1em} header p {font-size: 1em}
} }
@ -39,18 +36,20 @@ header {
background-size: contain; background-size: contain;
width: 100%; aspect-ratio: 1; width: 100%; aspect-ratio: 1;
padding: 1em; padding: 1em;
display: flex; flex-flow: column; justify-content: end display: grid; grid-template-rows: 1fr auto auto
} }
section {padding: 1rem;} header h1 {grid-row: 2}
dl {display: grid; grid-template-columns: 6em 1fr} header p {grid-row: 3}
section {padding: 1rem}
dl {display: grid; grid-template-columns: 6.25em 1fr}
dt {grid-column: 1; font-weight: 700; line-height: 1.5} dt {grid-column: 1; font-weight: 700; line-height: 1.5}
dd {grid-column: 2; line-height: 1.5; text-align: right} dd {grid-column: 2; line-height: 1.5; text-align: right}
dt, dd {margin-top: 0.5em} dt, dd {margin-top: 0.5em}
dl p {grid-column: span 2; max-width: 18em} dl p {grid-column: span 2; max-width: 18em}
#gaming h2 {margin-bottom: 0.5em} #gaming h2 {margin-bottom: 0.5em}
#gaming div {display: flex; gap: 1em} #gaming div {display: flex}
#gaming a {display: flex; width: 2em; height: 2em; align-items: center;} #gaming a {display: flex; width: 2em; height: 2em; align-items: center; margin-right: 1em}
#gaming span {font-size: 1em; line-height: 2; flex-grow: 1; text-align: right;} #gaming span {font-size: 1em; line-height: 2; flex-grow: 1; text-align: right}
#work a, #concerts a, #support a {display: flex; gap: 1em; margin-top: 1em; max-width: max-content} #work a, #concerts a, #support a {display: flex; gap: 1em; margin-top: 1em; max-width: max-content}
#work span, #concerts span, #support span {display: block; font-size: 1em; line-height: 2} #work span, #concerts span, #support span {display: block; font-size: 1em; line-height: 2}
/* coloring */ /* coloring */
@ -66,7 +65,7 @@ body:before {
background-position: center; background-position: center;
filter: blur(1em) hue-rotate(-135deg); filter: blur(1em) hue-rotate(-135deg);
opacity: 0.5; opacity: 0.5;
z-index: -1; z-index: -1
} }
html {background-color: #212121} html {background-color: #212121}
header, section {background-color: #28201d; color: white; filter: hue-rotate(-135deg)} header, section {background-color: #28201d; color: white; filter: hue-rotate(-135deg)}
@ -152,7 +151,6 @@ img {color: white}
</a> </a>
</section> </section>
</main> </main>
<!--
<script type="text/javascript"> <script type="text/javascript">
var sc_project=10574713; var sc_project=10574713;
var sc_invisible=1; var sc_invisible=1;
@ -166,6 +164,5 @@ href="http://statcounter.com/" target="_blank"><img
class="statcounter" class="statcounter"
src="//c.statcounter.com/10574713/0/b5296783/1/" alt="Web src="//c.statcounter.com/10574713/0/b5296783/1/" alt="Web
Analytics"></a></div></noscript> Analytics"></a></div></noscript>
-->
</body> </body>
</html> </html>