fix: no navigation on 768px width

This commit is contained in:
Ushie 2023-06-07 21:10:56 +03:00
parent 11b25d04eb
commit 1ecf9a9738
No known key found for this signature in database
GPG Key ID: 0EF73F1CA38B2D5F
12 changed files with 108 additions and 107 deletions

View File

@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
box-sizing: inherit;
@ -35,7 +35,7 @@ body {
:root {
/* TODO properly name these */
--main-font: "Manrope", sans-serif;
--main-font: 'Manrope', sans-serif;
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
--white: hsl(206, 100%, 94%);
--accent-color: hsl(206, 100%, 81%);
@ -114,7 +114,7 @@ p {
line-height: 1.75rem;
}
@media screen and (max-width: 768px) {
@media screen and (max-width: 767px) {
h1 {
font-size: 2.6rem;
line-height: 3.75rem;

View File

@ -43,7 +43,7 @@
color: var(--accent-color);
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.hero {
padding-bottom: 0;
}

View File

@ -23,7 +23,7 @@
left: 0;
}
@media screen and (max-width: 768px) {
@media screen and (max-width: 767px) {
.social-host {
left: 0;
width: 100%;

View File

@ -72,7 +72,7 @@
color: var(--accent-color);
}
@media (max-width: 768px) {
@media (max-width: 767px) {
li {
padding: 0.75rem 1.25rem;
text-align: left;

View File

@ -232,7 +232,7 @@
}
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.nav-wrapper {
flex-direction: column;
gap: 0.5rem;

View File

@ -43,7 +43,7 @@
display: none;
}
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.wrappezoid {
display: flex;
justify-content: center;

View File

@ -91,7 +91,7 @@
a:hover::after {
transform: translateX(5px);
}
@media screen and (max-width: 768px) {
@media screen and (max-width: 767px) {
.text-container {
padding: 2rem 1.75rem;
margin-bottom: 2rem;

View File

@ -48,7 +48,7 @@
user-select: none;
}
@media (max-width: 768px) {
@media (max-width: 767px) {
h5 {
display: none;
}

View File

@ -93,7 +93,7 @@
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.contrib-host {
padding: 0.75rem;
gap: 0.25rem;

View File

@ -219,7 +219,7 @@
display: none;
}
}
@media (max-width: 768px) {
@media (max-width: 767px) {
main {
grid-template-columns: none;
flex-direction: column;

View File

@ -63,7 +63,7 @@
color: var(--white);
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.package {
border-radius: 0px;
font-size: 0.9rem;

View File

@ -1,6 +1,6 @@
<div class="menu">
<h6>Packages</h6>
<hr/>
<hr />
<div class="slot">
<slot />
</div>
@ -40,13 +40,14 @@
color: var(--accent-color);
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.menu {
padding: 0.75rem;
height: unset;
}
h6, hr {
h6,
hr {
display: none;
}
}