diff --git a/html/styles/main.css b/html/styles/main.css index 18679ed..14ee2d1 100644 --- a/html/styles/main.css +++ b/html/styles/main.css @@ -19,6 +19,10 @@ nav { top: 0; } +nav .hamburger { + display: none; +} + nav ul { list-style-type: none; display: block; @@ -297,4 +301,126 @@ h2 { bottom: 0; left: 2px; font-size: 12px; -} \ No newline at end of file +} + +@media (max-aspect-ratio: 1/1.4) { + nav { + background: transparent; + height: 60px; + width: 60px; + left: initial; + right: 0; + border: none; + transition: background-color 0.3s, width 0.3s, height 0.3s; + z-index: 10; + } + + nav .hamburger { + position: absolute; + right: 0; + display: block; + font-size: 40px; + padding: 10px; + margin: 0; + transition: color 0.3s; + } + + nav .hamburger .checkbox { + position: absolute; + right: 5px; + width: 40px; + height: 40px; + cursor: pointer; + opacity: 0; + } + + nav:has(> .hamburger input[type="checkbox"]:checked) { + width: 100%; + height: 100%; + background-color: black; + } + + nav:has(> .hamburger input[type="checkbox"]:checked) .hamburger { + color: white; + } + + nav ul { + margin-top: 60px; + display: none; + width: 50%; + } + + nav .left { + left: 0; + } + + nav .right { + right: 0; + } + + nav ul li, nav ul li a { + display: block; + width: 50vw; + font-size: 40px; + } + + nav .right a { + text-align: right; + } + + nav ul li a:hover, nav ul li.active a { + box-shadow: inset 50vw 0 0 0 white; + } + + nav:has(> .hamburger input[type="checkbox"]:checked) ul { + display: block; + } + + h1 { + font-size: 35px; + margin-top: 0; + margin-bottom: 3vh; + } + + .selection { + flex-direction: column; + max-width: 90vw; + align-items: center; + height: 100%; + } + + + .separator { + height: 13vh; + width: 100%; + } + + .separator .new-pairing { + bottom: 0; + } + + .mob { + width: 25vh; + height: 30vh; + } + + .mob h2 { + margin: 0; + } + + .mob img { + width: 25vh; + height: 25vh; + margin-top: 5vh; + margin-left: 0; + } + + .middle .or, .middle .spinner{ + top: 57%; + } + + .middle .spinner img { + width: auto; + height: 7vh; + } +} diff --git a/view/layout.php b/view/layout.php index 316af23..108d235 100644 --- a/view/layout.php +++ b/view/layout.php @@ -18,9 +18,14 @@ +