diff --git a/assets/base.css b/assets/base.css index d48e1ab..71117c9 100644 --- a/assets/base.css +++ b/assets/base.css @@ -1,7 +1,7 @@ @import url(fonts.css); :root { - --vh: 1vh + --vh: 1vh; } html { @@ -30,6 +30,10 @@ p, d { margin-bottom: 0 } +d:not(d:only-child):hover { + color: var(--c-bg); background-color: var(--c-fg) +} + a { font-family: "mono"; color: var(--c-highlight); @@ -105,26 +109,16 @@ li { } } -@media screen and (min-width: 420px) and (max-width: 649px) { - .ascii-2 { - display: block !important - } -} - -@media screen and (min-width: 650px) { - .ascii-1 { - display: block !important - } -} - /* styling for the basic border when no js */ body > .nojs { + border: 2px solid var(--c-border); + box-sizing: border-box; + position: fixed; width: calc(100vw - 16px); height: calc(var(--vh) * 100 - 16px); - box-sizing: border-box; - border: 8px double var(--c-border); - overflow: hidden + top: 8px; + left: 8px } main, .js > div > div { @@ -135,6 +129,21 @@ main, .js > div > div { box-sizing: border-box; } +main { + overflow-y: auto !important +} + +.nojs li > :is(a, d):hover + p { + visibility: visible; + display: block; + position: fixed; + box-sizing: border-box; + padding: 16px; + margin-top: 0; + margin-bottom: 0; + overflow: hidden +} + /* styling for the js mode! */ .js { visibility: hidden; @@ -147,21 +156,23 @@ main, .js > div > div { left: 8px } -.js > div { +.js > div, .nojs > :is(div, main) { box-sizing: border-box; border: 2px solid var(--c-border); overflow: hidden; position: fixed; } +/* stuff for shaping squares */ + @media screen and (min-aspect-ratio: 1/1) { - .js > div:first-child { + :is(.js, .nojs) > :is(div:first-child, main) { width: calc(50vw - 4px - 11px); height: calc(var(--vh) * 100 - 16px - 10px); top: 13px; left: 13px } - .js > div:last-child { + :is(.js, .nojs) > div:last-child, .nojs li > :is(a, d):hover + p { width: calc(50vw - 4px - 11px); height: calc(var(--vh) * 100 - 16px - 10px); top: 13px; @@ -174,13 +185,13 @@ main, .js > div > div { } @media screen and (max-aspect-ratio: 1000/1001) { - .js > div:first-child { + :is(.js, .nojs) > :is(div:first-child, main) { width: calc(100vw - 16px - 10px); height: calc(var(--vh) * 50 - 4px - 11px); top: 13px; left: 13px } - .js > div:last-child { + :is(.js, .nojs) > div:last-child, .nojs li > :is(a, d):hover + p { width: calc(100vw - 16px - 10px); height: calc(var(--vh) * 50 - 4px - 11px); bottom: 13px; @@ -192,6 +203,16 @@ main, .js > div > div { } } +@media (max-width: 430px) and (max-height: 430px) { + .nojs > div:last-child, .nojs li > :is(a, d):hover + p { + display: none !important + } + .nojs > main { + width: calc(100vw - 16px - 10px) !important; + height: calc(var(--vh) * 100 - 16px - 10px) !important; + } +} + .js > div:only-child { width: calc(100vw - 16px - 10px); height: calc(var(--vh) * 100 - 16px - 10px); @@ -199,6 +220,8 @@ main, .js > div > div { left: 13px } +/* buttons and focus */ + .buttons { white-space: pre; margin-left: 24px diff --git a/assets/main.js b/assets/main.js index eaf6b7c..d6aef21 100644 --- a/assets/main.js +++ b/assets/main.js @@ -15,7 +15,9 @@ back.innerHTML = `⬑Back` window.addEventListener("load", () => { stylesheet = document.styleSheets[0]; - document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) + document.documentElement.style.setProperty("--vh", `${window.innerHeight * 0.01}px`) + + document.styleSheets[3].disabled = true // this one is for non-js // randomize loading text fetch("/assets/loading.txt") @@ -29,13 +31,15 @@ window.addEventListener("load", () => { document.body.appendChild(skipNode); // get rid of shit since we have javascript babyyyyyyy - if (matchMedia("(min-width: 430px) or (min-height: 430px").matches) { + if (matchMedia("(min-width: 430px) or (min-height: 430px)").matches) { for (let node of document.getElementsByClassName("nojs")) { node.style.display = "none" } stylesheet.insertRule(".js { visibility: visible }", stylesheet.cssRules.length) stylesheet.insertRule(".skip-notice { opacity: 1 }", stylesheet.cssRules.length) stylesheet.insertRule("d:focus { color: var(--c-bg); background-color: var(--c-fg) }", stylesheet.cssRules.length) + stylesheet.insertRule(`@media screen and (min-width: 420px) and (max-width: 649px) { .ascii-2 { display: block !important } }`, stylesheet.cssRules.length) + stylesheet.insertRule(`@media screen and (min-width: 650px) { .ascii-1 { display: block !important } }`, stylesheet.cssRules.length) document.querySelectorAll("head style").forEach(style => style.remove()); jsDiv = document.getElementsByClassName("js")[0] diff --git a/assets/nojs-atmedia.css b/assets/nojs-atmedia.css new file mode 100644 index 0000000..94d9c17 --- /dev/null +++ b/assets/nojs-atmedia.css @@ -0,0 +1,27 @@ +@media screen and (min-aspect-ratio: 1000/1000) { + @media screen and (min-width: 840px) and (max-width: 1299px) { + .ascii-2 { + display: block !important + } + } + + @media screen and (min-width: 1300px) { + .ascii-1 { + display: block !important + } + } +} + +@media screen and (max-aspect-ratio: 1000/1001) { + @media screen and (min-width: 420px) and (max-width: 649px) { + .ascii-2 { + display: block !important + } + } + + @media screen and (min-width: 650px) { + .ascii-1 { + display: block !important + } + } +} \ No newline at end of file diff --git a/index.html b/index.html index 1461996..90d56ad 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + @@ -65,7 +66,7 @@
  • Cinny

    The good matrix client

  • Element

    The bad matrix client. But it has LaTeX, in case you're into that.

    • - +
    Description
    site by Magdalunaa :3 Click / space to skip