From 5b6f162809f5f56258d231b53bbe4f4992b94830 Mon Sep 17 00:00:00 2001 From: minish Date: Mon, 22 Apr 2024 21:04:26 -0400 Subject: [PATCH] better mobile support --- .gitignore | 2 ++ index.html | 6 ++++-- style.css | 56 ++++++++++++++++++++++++++++++++++-------------------- 3 files changed, 41 insertions(+), 23 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0a58aae --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +# old revisions +scrap diff --git a/index.html b/index.html index b009ecd..27199d0 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,8 @@ min.rip + + @@ -23,7 +25,6 @@
-

hi, world!

i am minish

@@ -35,7 +36,7 @@ a simple, performant file upload server
  • - hls_convert - + hls_convert - easily download videos and fix embeds
  • @@ -51,6 +52,7 @@
  • cafe de touhou
    • +
    diff --git a/style.css b/style.css index 66ed1e2..08c007e 100644 --- a/style.css +++ b/style.css @@ -20,9 +20,8 @@ body { position: absolute; top: 0; left: 0; - width: calc(100% - calc(2px * 2)); + width: calc(100vw - calc(2px * 2)); height: calc(100vh - calc(2px * 2)); - z-index: -97; margin: 2px; @@ -34,20 +33,18 @@ body { content: ""; top: 0; left: 0; - width: 100%; + width: 100vw; height: 100vh; - z-index: -98; - backdrop-filter: blur(0px); + /* backdrop-filter: blur(2px); */ } #bg { position: absolute; top: 0; left: 0; - width: 100%; + width: 100vw; height: 100vh; - z-index: -99; background-image: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.53)), url(/assets/bg.webp); background-attachment: fixed; @@ -62,6 +59,9 @@ main { left: 50%; transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + font-size: 10pt; line-height: 2em; @@ -77,34 +77,49 @@ main { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } -a:link, a:visited, a:hover, a:active { +@media only screen and (max-width: 700px) { + main { + min-width: 90dvw; + } + + #bordeur { + border-width: 0px; + } + + #icon { + display: none; + } +} + +a:link, +a:visited, +a:hover, +a:active { color: var(--accent-b) } -main * { - margin: 0px; -} - -main h2 { +h2 { font-size: medium; font-weight: lighter; margin-bottom: 4px; } +#floats { + display: flex; +} + #icon { - float: right; - position: relative; + justify-self: right; /* make some space around it */ - margin-bottom: 6px; margin-left: 24px; height: 7em; } #yapping { - float: left; + justify-self: right; } ul { @@ -126,7 +141,7 @@ li { vertical-align: middle; } -main hr { +hr { margin-bottom: 10px; margin-top: 12px; @@ -143,8 +158,7 @@ main hr { } #cont { - /* This has to be here or the separator margin disappears. Dear god i have no idea what the hell i am doing. */ padding-top: 1px; - - clear: both; + + margin-top: auto; } \ No newline at end of file