mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
fix: no navigation on 768px width
This commit is contained in:
Ushie
parent
11b25d04eb
commit
1ecf9a9738
188
src/app.scss
188
src/app.scss
@ -1,162 +1,162 @@
|
||||
@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;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--main-font);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
box-sizing: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--main-font);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: scroll;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--bg-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-inline: auto;
|
||||
width: min(90%, 80rem);
|
||||
margin-top: 7rem;
|
||||
margin-inline: auto;
|
||||
width: min(90%, 80rem);
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* TODO properly name these */
|
||||
--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%);
|
||||
--accent-color-two: hsl(208, 75%, 82%);
|
||||
--accent-low-opacity: hsla(205, 91%, 69%, 0.15);
|
||||
--bg-color: hsl(252, 10%, 11%);
|
||||
--grey-one: hsl(210, 14%, 17%);
|
||||
--grey-two: hsl(212, 19%, 19%);
|
||||
--grey-three: hsl(221, 17%, 26%);
|
||||
--grey-four: hsl(226, 48%, 18%);
|
||||
--grey-five: hsl(208, 30%, 75%);
|
||||
--grey-six: hsl(230, 9%, 13%);
|
||||
--grey-seven: hsl(240, 9%, 13.5%);
|
||||
--grey-eight: hsla(207, 30%, 75%, 0.577);
|
||||
--grey-nine: hsla(240, 6%, 7%, 0.3);
|
||||
--grey-ten: hsl(230, 9.5%, 17.5%);
|
||||
--grey-eleven: hsl(208, 10%, 40%);
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
--drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
/* TODO properly name these */
|
||||
--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%);
|
||||
--accent-color-two: hsl(208, 75%, 82%);
|
||||
--accent-low-opacity: hsla(205, 91%, 69%, 0.15);
|
||||
--bg-color: hsl(252, 10%, 11%);
|
||||
--grey-one: hsl(210, 14%, 17%);
|
||||
--grey-two: hsl(212, 19%, 19%);
|
||||
--grey-three: hsl(221, 17%, 26%);
|
||||
--grey-four: hsl(226, 48%, 18%);
|
||||
--grey-five: hsl(208, 30%, 75%);
|
||||
--grey-six: hsl(230, 9%, 13%);
|
||||
--grey-seven: hsl(240, 9%, 13.5%);
|
||||
--grey-eight: hsla(207, 30%, 75%, 0.577);
|
||||
--grey-nine: hsla(240, 6%, 7%, 0.3);
|
||||
--grey-ten: hsl(230, 9.5%, 17.5%);
|
||||
--grey-eleven: hsl(208, 10%, 40%);
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
--drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--accent-low-opacity);
|
||||
background-color: var(--accent-low-opacity);
|
||||
}
|
||||
|
||||
/*-----headings-----*/
|
||||
|
||||
h1 {
|
||||
color: var(--white);
|
||||
line-height: 4rem;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--white);
|
||||
line-height: 4rem;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--grey-five);
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: -0.04rem;
|
||||
font-weight: 600;
|
||||
color: var(--grey-five);
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: -0.04rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
line-height: 2rem;
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.02rem;
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.02rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--grey-five);
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
color: var(--grey-five);
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
line-height: 1.75rem;
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2.6rem;
|
||||
line-height: 3.75rem;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
h1 {
|
||||
font-size: 2.6rem;
|
||||
line-height: 3.75rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------*/
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
background-color: transparent;
|
||||
width: 5px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--accent-color);
|
||||
background-clip: content-box;
|
||||
border-radius: 100px;
|
||||
background-color: var(--accent-color);
|
||||
background-clip: content-box;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--grey-three);
|
||||
background-color: var(--grey-three);
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--grey-three);
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--grey-three);
|
||||
background-color: transparent;
|
||||
color: var(--accent-color-two);
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--grey-three);
|
||||
background-color: transparent;
|
||||
color: var(--accent-color-two);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid var(--accent-color);
|
||||
outline: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
.hero {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
@media screen and (max-width: 767px) {
|
||||
.social-host {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -232,7 +232,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
.nav-wrapper {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
.wrappezoid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
h5 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -219,7 +219,7 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
main {
|
||||
grid-template-columns: none;
|
||||
flex-direction: column;
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
.package {
|
||||
border-radius: 0px;
|
||||
font-size: 0.9rem;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user