Ryubing/Website
1
0
Fork 0
mirror of https://github.com/Ryubing/Website.git synced 2025-05-13 03:00:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix mobile overflow

Browse source
This commit is contained in:
donut 2025-03-10 00:38:15 -04:00
parent d33309514c
commit 786c3fe608
6 changed files with 65 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/layout/footer.astro
View file

@ -62,9 +62,25 @@ import "./styleconstants.astro"
.copyright-section {
.wordmark {
width: 140px;
height: auto;
width: 50%;
max-width: 250px;
height: auto;
display: block;
}
@media (max-width: 768px) {
.wordmark {
width: 70%;
max-width: 200px;
}
}
@media (max-width: 480px) {
.wordmark {
width: 70%;
max-width: 200px;
}
}
.copyright {
font-size: 0.9rem;

18
src/components/layout/marketing.astro
View file

@ -1,13 +1,6 @@
---
import StyleConstants from "./styleconstants.astro"
interface Props {
title: string
backgroundColor?: string
foregroundColor?: string
}
const { title, backgroundColor } = Astro.props
---
<!doctype html>
@ -15,22 +8,23 @@ const { title, backgroundColor } = Astro.props
<head>
<meta charset="UTF-8" />
<meta
name="description"content="Ryubing/Ryujinx is a fork of the discontinued Switch emulator witten in C#!"/>
name="description"content="Ryubing/Ryujinx is a fork of the discontinued Nintendo Switch emulator, written in C#. It offers excellent accuracy, high performance, a user-friendly interface, and consistent builds."/>
<meta name="keywords" content="Ryujinx, switch emulator, fork, emulator, switch, ryubing, ldn, open-source"/>
<meta name="author" content="Ryujinx" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width initial-scale=1.0" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<title>Ryujinx - Nintendo Switch Emulator</title>
<StyleConstants />
</head>
<body>
<slot />
</body>
</html>
<style is:global define:vars={{ backgroundColor }}>
<style is:global>
body {
max-width: 100vw;
max-width: 100%;
overflow-x: hidden;
margin: 0;
padding: 0;

23
src/components/layout/navbar.astro
View file

@ -8,7 +8,7 @@ import "./styleconstants.astro"
<nav class="site-navbar">
<div class="nav-inner">
<a href="/">
<img src={wordmark.src} width="100px" height="50px" font-weight="750" alt="Ryujinx" />
<img src={wordmark.src} width="100px" height="50px" font-weight="750" alt="Ryujinx" class="wordmark" />
</a>
<div class="links desktop">
<NavLinks />
@ -59,6 +59,27 @@ import "./styleconstants.astro"
}
}
.wordmark {
width: 50%;
max-width: 250px;
height: auto;
display: block;
}
@media (max-width: 768px) {
.wordmark {
width: 70%;
max-width: 200px;
}
}
@media (max-width: 480px) {
.wordmark {
width: 70%;
max-width: 200px;
}
}
.mobile > button {
background: none;
border: none;

10
src/pages/donate/index.astro
View file

@ -6,8 +6,16 @@ import MarketingLayout from "../../components/layout/marketing.astro"
export const prerender = false;
---
<head>
<title>Ryujinx - Donate</title>
<meta
name="description"content="Donate to support the Ryujinx project and help us continue improving the emulator.">
<meta name="keywords" content="Ryujinx, switch emulator, fork, emulator, switch, ryubing, ldn, open-source"/>
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="author" content="Ryujinx" />
<meta name="viewport" content="width=device-width" />
</head>
<MarketingLayout
title="Ryujinx - Donate"
backgroundColor="#150E2A"
>
<Navbar />

10
src/pages/download/index.astro
View file

@ -9,8 +9,16 @@ import Consts from "../../lib/consts"
export const prerender = false;
---
<head>
<title>Ryujinx - Download</title>
<meta
name="description"content="Download Ryujinx for Windows, MacOS, Linux, and Linux ARM.">
<meta name="keywords" content="Ryujinx, switch emulator, fork, emulator, switch, ryubing, ldn, open-source"/>
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="author" content="Ryujinx" />
<meta name="viewport" content="width=device-width" />
</head>
<MarketingLayout
title="Ryujinx - Download"
backgroundColor="#150E2A"
>
<Navbar />

2
src/pages/index.astro
View file

@ -8,7 +8,7 @@ import Compatibility from "src/components/compatibilitysection.astro"
import Getintouch from "src/components/getintouchsection.astro"
---
<Layout title="Ryujinx - Nintendo Switch Emulator" backgroundColor="#090b11">
<Layout backgroundColor="#090b11">
<Navbar />
<IndexHero />
<Copyrightsection />