Repository navigation
Home page redesign #14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
Dogo6647
wants to merge
3
commits into
nightly
Choose a base branch
from
feat/new-homepage
base: nightly
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <!-- dogo note: as a "vanilla" html writer i hate vitepress and all js component frameworks so much, | ||
| this could've just been a single file change like replacing index.md with index.html but nah --> | ||
|
|
||
| <template> | ||
| <iframe | ||
| :src="iframeSrc" | ||
| class="no-vue" | ||
| frameborder="0" | ||
| ></iframe> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { computed } from 'vue' | ||
| const path = window.location.pathname.replace(/^\/+/, '') | ||
| const resolvedPath = path === '' ? 'index' : path | ||
| const iframeSrc = computed(() => `/static/${resolvedPath}.htm`) | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .no-vue { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100vw; | ||
| height: 100vh; | ||
| border: none; | ||
| } | ||
| </style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,20 @@ | ||
| import DefaultTheme from "vitepress/theme"; | ||
| import BlankLayout from '../layouts/BlankLayout.vue' | ||
| import "@catppuccin/vitepress/theme/mocha/yellow.css"; | ||
| import "./custom.css"; | ||
|
|
||
| export default DefaultTheme; | ||
| import { useData } from "vitepress"; | ||
| import { h } from "vue"; | ||
|
|
||
| export default { | ||
| extends: DefaultTheme, | ||
| Layout: () => { | ||
| const { frontmatter } = useData(); | ||
|
|
||
| if (frontmatter.value.layout === 'blank') { | ||
| return h(BlankLayout); | ||
| } | ||
|
|
||
| return h(DefaultTheme.Layout); | ||
| } | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Scratch Everywhere!</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link href="style.css" rel="stylesheet" /> | ||
| </head> | ||
| <body> | ||
| <div id="scrollArrow">↓</div> | ||
| <script> | ||
| const arrow = document.getElementById('scrollArrow'); | ||
| arrow.addEventListener('click', () => { | ||
| window.scrollBy({ | ||
| top: window.innerHeight, | ||
| behavior: 'smooth' | ||
| }); | ||
| }); | ||
|
|
||
| window.addEventListener('scroll', () => { | ||
| if (window.scrollY > 100) { | ||
| arrow.classList.add('hidden'); | ||
| } else { | ||
| arrow.classList.remove('hidden'); | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| <div id="hero"> | ||
| <div class="upper"> | ||
| <img class="logo" src="https://github.com/ScratchEverywhere/ScratchEverywhere/raw/main/gfx/menu/logo.png" /> | ||
| <h2 class="splash">Custom Scratch Runtime made in C++!</h2> | ||
| </div> | ||
| <div class="lower"> | ||
| <a href="/intro" target="_top"><button><img class="icon" src="/static/assets/book.svg" /> Get started</button></a> | ||
| <a href="/install" target="_top"><button><img class="icon" src="/static/assets/download.svg" /> Installation</button></a> | ||
| <a href="https://scratcheverywhere.github.io/ScratchEverywhere" target="_top"><button><img class="icon" src="/static/assets/play.svg" /> Try it out on the web!</button></a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="content"> | ||
| <div class="cards"> | ||
| <div> | ||
| <h2>Cross-Platform</h2> | ||
| Scratch Everywhere! is designed to be a cross-platform Scratch runtime for old homebrew consoles. | ||
| </div> | ||
| <div> | ||
| <h2>Fast</h2> | ||
| Thanks to the programming language Scratch Everywhere! is written in (C++), it's extremely fast compared to normal Scratch. | ||
| </div> | ||
| <div> | ||
| <h2>Easy to Use</h2> | ||
| Scratch Everywhere! is extremely easy to use. Just download it from the app store, add your projects, and start playing! | ||
| </div> | ||
| </div> | ||
| <img src="https://github.com/ScratchEverywhere/ScratchEverywhere/raw/main/docs/demo.gif" style="border-radius: 12px; margin: 2rem auto; width: 100%; filter: drop-shadow(0 0px 64px #885686);" /> | ||
| <br> | ||
| <h1>Nightly builds</h1> | ||
| <hr> | ||
| <div style="display: flex; flex-direction: column; gap: 10px;"> | ||
| <a href="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-3ds.yml" target="_top"><img src="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-3ds.yml/badge.svg" alt="3DS Nightly Build"></a> | ||
| <a href="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-nds.yml" target="_top"><img src="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-nds.yml/badge.svg" alt="NDS Nightly Build"></a> | ||
| <a href="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-wiiu.yml" target="_top"><img src="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-wiiu.yml/badge.svg" alt="Wii U Nightly Build"></a> | ||
| <a href="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-wii.yml" target="_top"><img src="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-wii.yml/badge.svg" alt="Wii Nightly Build"></a> | ||
| <a href="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-gamecube.yml" target="_top"><img src="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-gamecube.yml/badge.svg" alt="GameCube Nightly Build"></a> | ||
| <a href="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-switch.yml" target="_top"><img src="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-switch.yml/badge.svg" alt="Switch Nightly Build"></a> | ||
| <a href="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-vita.yml" target="_top"><img src="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-vita.yml/badge.svg" alt="Vita Nightly Build"></a> | ||
| <a href="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-psp.yml" target="_top"><img src="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-psp.yml/badge.svg" alt="PSP Nightly Build"></a> | ||
| <a href="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-ps4.yml" target="_top"><img src="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-ps4.yml/badge.svg" alt="PS4 Nightly Build"></a> | ||
| <a href="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-pc.yml" target="_top"><img src="https://github.com/ScratchEverywhere/ScratchEverywhere/actions/workflows/nightly-pc.yml/badge.svg" alt="PC Nightly Build"></a> | ||
| </div> | ||
| <br> | ||
| <h1>Find us on...</h1> | ||
| <hr> | ||
| <div class="cards"> | ||
| <iframe src="https://discord.com/widget?id=1408875318248345612&theme=dark" width="100%" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe> | ||
| <a href="https://github.com/ScratchEverywhere" class="card" target="_top" style="--card-accent: black;"> | ||
| <h2><img class="icon" src="/static/assets/github.svg" /> GitHub </h2> | ||
| ScratchEverywhere | ||
| </a> | ||
| <a href="https://reddit.com/r/ScratchEverywhere" class="card" target="_top" style="--card-accent: #ff4500;"> | ||
| <h2><img class="icon" src="/static/assets/reddit.svg" /> Reddit</h2> | ||
| r/ScratchEverywhere | ||
| </a> | ||
| <a href="https://youtube.com/@NateXS" class="card" target="_top" style="--card-accent: red;"> | ||
| <h2><img class="icon" src="/static/assets/youtube.svg" /> YouTube</h2> | ||
| NateXS | ||
| </a> | ||
| </div> | ||
| <hr> | ||
| This project is not affiliated with Scratch, the Scratch Team, or any of the supported platforms' parent companies or organizations. | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,178 @@ | ||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| html, body { | ||
| margin: 0 auto; | ||
| text-align: center; | ||
| height: 100vh; | ||
| color: #eff1f5; | ||
| background: #4c4f69; | ||
| font-family: "Noto Sans", "Arial", sans-serif; | ||
| } | ||
|
|
||
| #hero { | ||
| background: #eff1f5; | ||
| color: #4c4f69; | ||
| overflow: hidden; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 100vh; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| #hero .upper { | ||
| animation: float 2.5s ease-in-out infinite; | ||
| margin-bottom: 5em; | ||
| } | ||
|
|
||
| #hero .lower button { | ||
| border: 10px solid rgba(255, 255, 255, 0.25); | ||
| background: #df8e1d; | ||
| color: white; | ||
| font-weight: 600; | ||
| padding: 10px 16px; | ||
| font-size: 1.25em; | ||
| margin: 0.5em; | ||
| border-radius: 1em; | ||
| font-family: "Noto Sans", "Arial", sans-serif; | ||
| transition: outline 0.25s cubic-bezier(0.25, 3, 0.5, 1), | ||
| transform 0.2s cubic-bezier(0.25, 3, 0.5, 1); | ||
| outline: 0px solid black; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| #hero .lower button .icon { | ||
| display: block; | ||
| width: 100%; | ||
| height: 128px; | ||
| padding: 1em; | ||
| } | ||
|
|
||
| #hero .lower button:hover { | ||
| outline: 6px solid #4c4f69; | ||
| /*animation: expand 0.6s ease-in-out infinite;*/ | ||
| } | ||
|
|
||
| #hero .lower button:active { | ||
| outline: 10px solid #4c4f69; | ||
| transform: scale(0.875); | ||
| } | ||
|
|
||
| #content { | ||
| margin: 0 auto; | ||
| text-align: left; | ||
| padding: 2em; | ||
| max-width: 1200px; | ||
| } | ||
|
|
||
| #scrollArrow { | ||
| position: fixed; | ||
| bottom: 32px; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| font-size: 4rem; | ||
| cursor: pointer; | ||
| opacity: 0.25; | ||
| transition: opacity 0.2s, transform 0.2s; | ||
| color: black; | ||
| } | ||
|
|
||
| #scrollArrow:hover { | ||
| opacity: 1; | ||
| transform: translateX(-50%) scale(1.2); | ||
| } | ||
|
|
||
| .hidden { | ||
| display: none; | ||
| } | ||
|
|
||
| hr { | ||
| color: inherit; | ||
| margin-bottom: 1.5em; | ||
| } | ||
|
|
||
| .logo { | ||
| height: 35vw; | ||
| max-height: 256px; | ||
| width: auto; | ||
| filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3)); | ||
| user-select: none; | ||
| } | ||
|
|
||
| .splash { | ||
| animation: expand 0.6s ease-in-out infinite; | ||
| } | ||
|
|
||
| .cards { | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| gap: 2em; | ||
| padding: 2em; | ||
| } | ||
|
|
||
| .cards div, .cards a { | ||
| flex: 1 1 300px; | ||
| } | ||
|
|
||
| .card { | ||
| border-radius: 1em; | ||
| background: rgba(0, 0, 0, 0.25); | ||
| padding: 2em; | ||
| } | ||
|
|
||
| a.card { | ||
| color: white; | ||
| text-decoration: none; | ||
| transition: background 0.2s ease; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| a.card:hover { | ||
| color: white; | ||
| text-decoration: none; | ||
| background: var(--card-accent); | ||
| } | ||
|
|
||
| a.card:hover .icon { | ||
| transform: scale(4) translateX(-8px); | ||
| } | ||
|
|
||
| .card h2 { | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .icon { | ||
| display: inline; | ||
| filter: brightness(0) invert(1); | ||
| height: 1.25rem; | ||
| width: auto; | ||
| transition: transform 0.2s ease; | ||
| } | ||
|
|
||
| @keyframes float { | ||
| 0% { | ||
| transform: translateY(0px); | ||
| } | ||
| 50% { | ||
| transform: translateY(-40px); | ||
| } | ||
| 100% { | ||
| transform: translateY(0px); | ||
| } | ||
| } | ||
|
|
||
| @keyframes expand { | ||
| 0% { | ||
| transform: scale(1); | ||
| } | ||
| 50% { | ||
| transform: scale(1.15); | ||
| } | ||
| 100% { | ||
| transform: scale(1); | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Appears strange.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Apparently this is intentional. If no one else objects to it I'll ignore it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Well the "ScratchEverywhere" is overlapping the logo making the S hard to see. Also if you're going to cut off the GitHub logo why not do half?