ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-30 14:44:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: no navigation on 768px width

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
src/app.scss
View File

@ -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; box-sizing: inherit;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: var(--main-font); font-family: var(--main-font);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 100%; font-size: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow-y: scroll; overflow-y: scroll;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: var(--bg-color); background-color: var(--bg-color);
} }
html, html,
body { body {
max-width: 100%; max-width: 100%;
} }
.wrapper { .wrapper {
margin-inline: auto; margin-inline: auto;
width: min(90%, 80rem); width: min(90%, 80rem);
margin-top: 7rem; margin-top: 7rem;
} }
:root { :root {
/* TODO properly name these */ /* 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; --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
--white: hsl(206, 100%, 94%); --white: hsl(206, 100%, 94%);
--accent-color: hsl(206, 100%, 81%); --accent-color: hsl(206, 100%, 81%);
--accent-color-two: hsl(208, 75%, 82%); --accent-color-two: hsl(208, 75%, 82%);
--accent-low-opacity: hsla(205, 91%, 69%, 0.15); --accent-low-opacity: hsla(205, 91%, 69%, 0.15);
--bg-color: hsl(252, 10%, 11%); --bg-color: hsl(252, 10%, 11%);
--grey-one: hsl(210, 14%, 17%); --grey-one: hsl(210, 14%, 17%);
--grey-two: hsl(212, 19%, 19%); --grey-two: hsl(212, 19%, 19%);
--grey-three: hsl(221, 17%, 26%); --grey-three: hsl(221, 17%, 26%);
--grey-four: hsl(226, 48%, 18%); --grey-four: hsl(226, 48%, 18%);
--grey-five: hsl(208, 30%, 75%); --grey-five: hsl(208, 30%, 75%);
--grey-six: hsl(230, 9%, 13%); --grey-six: hsl(230, 9%, 13%);
--grey-seven: hsl(240, 9%, 13.5%); --grey-seven: hsl(240, 9%, 13.5%);
--grey-eight: hsla(207, 30%, 75%, 0.577); --grey-eight: hsla(207, 30%, 75%, 0.577);
--grey-nine: hsla(240, 6%, 7%, 0.3); --grey-nine: hsla(240, 6%, 7%, 0.3);
--grey-ten: hsl(230, 9.5%, 17.5%); --grey-ten: hsl(230, 9.5%, 17.5%);
--grey-eleven: hsl(208, 10%, 40%); --grey-eleven: hsl(208, 10%, 40%);
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94); --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), --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); 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
} }
::selection { ::selection {
background-color: var(--accent-low-opacity); background-color: var(--accent-low-opacity);
} }
/*-----headings-----*/ /*-----headings-----*/
h1 { h1 {
color: var(--white); color: var(--white);
line-height: 4rem; line-height: 4rem;
font-size: 3.5rem; font-size: 3.5rem;
font-weight: 700; font-weight: 700;
letter-spacing: -0.025em; letter-spacing: -0.025em;
} }
h2 { h2 {
color: var(--grey-five); color: var(--grey-five);
font-size: 2.5rem; font-size: 2.5rem;
letter-spacing: -0.04rem; letter-spacing: -0.04rem;
font-weight: 600; font-weight: 600;
} }
h3 { h3 {
font-size: 1.25rem; font-size: 1.25rem;
color: var(--accent-color-two); color: var(--accent-color-two);
font-weight: 600; font-weight: 600;
} }
h4 { h4 {
color: var(--accent-color-two); color: var(--accent-color-two);
font-weight: 400; font-weight: 400;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
line-height: 2rem; line-height: 2rem;
} }
h5 { h5 {
color: var(--grey-five); color: var(--grey-five);
font-weight: 400; font-weight: 400;
font-size: 0.9rem; font-size: 0.9rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
} }
h6 { h6 {
color: var(--grey-five); color: var(--grey-five);
font-weight: 500; font-weight: 500;
font-size: 0.85rem; font-size: 0.85rem;
} }
p { p {
color: var(--grey-five); color: var(--grey-five);
font-weight: 400; font-weight: 400;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 767px) {
h1 { h1 {
font-size: 2.6rem; font-size: 2.6rem;
line-height: 3.75rem; line-height: 3.75rem;
} }
h2 { h2 {
font-size: 2rem; font-size: 2rem;
} }
} }
/*---------------*/ /*---------------*/
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: 5px;
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--accent-color); background-color: var(--accent-color);
background-clip: content-box; background-clip: content-box;
border-radius: 100px; border-radius: 100px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: var(--grey-three); background-color: var(--grey-three);
} }
hr { hr {
display: block; display: block;
height: 1px; height: 1px;
border: 0; border: 0;
border-top: 1px solid var(--grey-three); border-top: 1px solid var(--grey-three);
} }
input { input {
padding: 1rem; padding: 1rem;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--grey-three); border: 1px solid var(--grey-three);
background-color: transparent; background-color: transparent;
color: var(--accent-color-two); color: var(--accent-color-two);
} }
input:focus { input:focus {
outline: 1px solid var(--accent-color); outline: 1px solid var(--accent-color);
} }

2
src/layout/Hero/HeroSection.svelte
View File

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

2
src/layout/Hero/SocialHost.svelte
View File

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

2
src/layout/Navbar/NavButton.svelte
View File

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

2
src/layout/Navbar/NavHost.svelte
View File

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

2
src/routes/+page.svelte
View File

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

2
src/routes/contributors/+page.svelte
View File

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

2
src/routes/contributors/ContributorPerson.svelte
View File

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

2
src/routes/contributors/ContributorSection.svelte
View File

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

2
src/routes/patches/+page.svelte
View File

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

2
src/routes/patches/Package.svelte
View File

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

7
src/routes/patches/PackageMenu.svelte
View File

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