attempted bugfix on ios
This commit is contained in:
parent
cecdfeea2b
commit
6b1be7caa3
1 changed files with 12 additions and 15 deletions
27
index.html
27
index.html
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue