Skip to content

Commit

Permalink
desktop layout cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaames
jaames committed Apr 15, 2022
1 parent 9264f29 commit b37c47d
Show file tree
Hide file tree
Showing 7 changed files with 162 additions and 121 deletions.
8 changes: 5 additions & 3 deletions website/src/components/Button.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const { href, type } = Astro.props
}

.Button__inner {
font-weight: bold;
text-align: center;
display: block;
cursor: pointer;
Expand All @@ -33,11 +34,12 @@ const { href, type } = Astro.props
border: 5px solid $color-bg;

.Button__inner {
font-weight: normal;
color: $color-text;
background: $color-bg;
border: 3px solid rgb(103, 103, 115);
border-right-color: #000;
border-bottom-color: #000;
border: 3px solid #9090a1;
border-right-color: #000;
border-bottom-color: #000;
}
}
</style>
4 changes: 2 additions & 2 deletions website/src/components/Hero.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Button from '../components/Button.astro';
---
<header class="Hero">
<div class="Hero__head">
<Nav/>
<!-- <Nav/> -->
</div>
<div class="Hero__body">
<div class="Hero__wrap">
Expand Down Expand Up @@ -48,7 +48,7 @@ import Button from '../components/Button.astro';
}

.Hero__wrap {
margin-top: -$navbar-height;
// margin-top: -$navbar-height;
display: grid;
align-items: center;
grid-template-columns: 1fr;
Expand Down
6 changes: 6 additions & 0 deletions website/src/icons/icon_hint.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions website/src/icons/icon_warn.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 0 additions & 5 deletions website/src/layouts/BaseLayout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,6 @@ let locale = 'en';
<main class="Content">
<slot/>
</main>
<footer>
Built by James
Flipnote&nbsp;Studio is &copy; Nintendo. This project isn't affiliated with or endorsed by them.
Playdate is &copy; Panic, Inc.
</footer>
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "19224d7a1dc44932ab159e5f8466b712"}'></script>
</body>
</html>
252 changes: 142 additions & 110 deletions website/src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,10 @@ import Button from '../components/Button.astro';
Why make a Flipnote player for the Playdate?
</div>
<div class="FaqList__answer">
Little else has single-handedly fueled my penchant for making things quite as much as Flipnote&nbsp;Studio. It's left a lasting impact on me and in a roundabout way was influencial in pushing me towards a creative career, so this app is a love-letter to a weird little animation tool and community that I and many others appreciate very much.
It also just kinda happens that using the Playdate's crank to scroll through one of <a href="https://twitter.com/Kekeflipnote">Kéké's</a> animations is pretty fun!
Little else has single-handedly fueled my penchant for making things quite as much as Flipnote&nbsp;Studio. It's left a lasting impact on me and in a roundabout way was influencial in pushing me towards a creative career, so this app is a love-letter to a weird little animation tool and community that inspired me and many others.
<br/>
<br/>
It also just so happens that using the Playdate's crank to scroll through one of <a href="https://twitter.com/Kekeflipnote">Kéké's</a> animations is pretty fun!
</div>
</div>
<div class="FaqList__item">
Expand Down Expand Up @@ -123,120 +125,125 @@ import Button from '../components/Button.astro';

<section class="Section CreditsSection" id="credits">
<h2 class="Section__title">Credits</h2>
<div class="Section__body">
<div class="CreditGroup">
<h5 class="CreditGroup__title">Programming and UI Design</h5>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/rakujira">James Daniel</a>
</div>
</div>
<div class="CreditGroup">
<h5 class="CreditGroup__title">Flipnote Parser</h5>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/itssimontime">Simon Aarons</a>
</div>
</div>
<div class="CreditGroup">
<h5 class="CreditGroup__title">Sound & Music</h5>
<div class="CreditEntry">
<span class="CreditEntry__title">Sound Design</span>
<a class="CreditEntry__name" href="https://NewtonsDarkRoom.com">Talon Stradley</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Credits Beat</span>
<a class="CreditEntry__name" href="https://madwurmz.com">madwurmz</a>
</div>
</div>
<div class="CreditGroup CreditGroup--artists">
<h5 class="CreditGroup__title">Flipnote Artists</h5>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/Kekeflipnote">Kéké</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://flipnot.es/9F990EE00074AC4D">mrjohn</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://www.instagram.com/gsupnet_">bokeh f/2 (who cares)</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/pekira1227">ぺきら (pekira)</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://beeyt.carrd.co/">Bee</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://www.instagram.com/akemixes">Melaina King (Akemi)</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://www.sudomemo.net/user/5907142059918D1F@DSi">Scarecrow</a>
</div>
</div>
<div class="CreditGroup CreditGroup--breakColumn">
<h5 class="CreditGroup__title">Translation</h5>
<div class="CreditEntry">
<span class="CreditEntry__title">Français</span>
<a class="CreditEntry__name" href="https://www.evalauren.co.uk">Eva Lauren Kelly (thejsa)</a>
<a class="CreditEntry__name" href="https://twitter.com/thomasnet_mc_">thomasnet</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Nederlands</span>
<a class="CreditEntry__name" href="https://twitter.com/therealprocyon">Célistine Oosting</a>
<a class="CreditEntry__name" href="https://kaasiand.cool">Daniël van Melle</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">日本語</span>
<a class="CreditEntry__name" href="http://ryusite.cyber-ninja.jp/">RYU-N</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Español</span>
<a class="CreditEntry__name" href="https://github.com/meemo">Meemo</a>
<div class="Section__body Credits">
<div class="Credits__main">
<div class="CreditGroup">
<h5 class="CreditGroup__title">Programming and UI Design</h5>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/rakujira">James Daniel</a>
</div>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Deutsch</span>
<a class="CreditEntry__name" href="https://twitter.com/zothynine">Mario Zoth</a>
<div class="CreditGroup">
<h5 class="CreditGroup__title">Flipnote Decoding Library</h5>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/itssimontime">Simon Aarons</a>
</div>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Italiano</span>
<a class="CreditEntry__name" href="https://www.finecurry.newgrounds.com">Curren French</a>
<div class="CreditGroup">
<h5 class="CreditGroup__title">Sound & Music</h5>
<div class="CreditEntry">
<span class="CreditEntry__title">Sound Design</span>
<a class="CreditEntry__name" href="https://NewtonsDarkRoom.com">Talon Stradley</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Credits Beat</span>
<a class="CreditEntry__name" href="https://madwurmz.com">madwurmz</a>
</div>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Polski</span>
<a class="CreditEntry__name" href="https://twitter.com/twarda8">Twarda</a>
<div class="CreditGroup CreditGroup--breakColumn">
<h5 class="CreditGroup__title">Flipnote Artists</h5>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/Kekeflipnote">Kéké</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://flipnot.es/9F990EE00074AC4D">mrjohn</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://www.instagram.com/gsupnet_">bokeh f/2 (who cares)</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/pekira1227">ぺきら (pekira)</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://beeyt.carrd.co/">Bee</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://www.instagram.com/akemixes">Melaina King (Akemi)</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://www.sudomemo.net/user/5907142059918D1F@DSi">Scarecrow</a>
</div>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Русский</span>
<a class="CreditEntry__name" href="https://youtube.com/channel/UCbyMzNGlTGHxLRlShJDoD3Q">Denis Chernesov (Kashey)</a>
<a class="CreditEntry__name" href="https://youtube.com/channel/UCbyMzNGlTGHxLRlShJDoD3Q">Alina Smirnova (\m/eerkat)</a>
<div class="CreditGroup">
<h5 class="CreditGroup__title">Translation</h5>
<div class="CreditEntry">
<span class="CreditEntry__title">日本語</span>
<a class="CreditEntry__name" href="http://ryusite.cyber-ninja.jp/">RYU-N</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Français</span>
<a class="CreditEntry__name" href="https://www.evalauren.co.uk">Eva Lauren Kelly (thejsa)</a>
<a class="CreditEntry__name" href="https://twitter.com/thomasnet_mc_">thomasnet</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Español</span>
<a class="CreditEntry__name" href="https://github.com/meemo">Meemo</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Deutsch</span>
<a class="CreditEntry__name" href="https://twitter.com/zothynine">Mario Zoth</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Italiano</span>
<a class="CreditEntry__name" href="https://www.finecurry.newgrounds.com">Curren French</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Nederlands</span>
<a class="CreditEntry__name" href="https://twitter.com/therealprocyon">Célistine Oosting</a>
<a class="CreditEntry__name" href="https://kaasiand.cool">Daniël van Melle</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Polski</span>
<a class="CreditEntry__name" href="https://twitter.com/twarda8">Twarda</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Русский</span>
<a class="CreditEntry__name" href="https://youtube.com/channel/UCbyMzNGlTGHxLRlShJDoD3Q">Denis Chernesov (Kashey)</a>
<a class="CreditEntry__name" href="https://youtube.com/channel/UCbyMzNGlTGHxLRlShJDoD3Q">Alina Smirnova (\m/eerkat)</a>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Cymraeg</span>
<a class="CreditEntry__name" href="https://www.evalauren.co.uk">Eva Lauren Kelly (thejsa)</a>
</div>
</div>
<div class="CreditEntry">
<span class="CreditEntry__title">Cymraeg</span>
<a class="CreditEntry__name" href="https://www.evalauren.co.uk">Eva Lauren Kelly (thejsa)</a>
<div class="CreditGroup">
<h5 class="CreditGroup__title">Special Thanks</h5>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/gingerbeardman">Matt Sephton</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/kaeru.world">Kaeru Team</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://www.sudomemo.net">Rob</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/AustinSudomemo">Austin Burk</a>
</div>
</div>
</div>
<div class="CreditGroup">
<h5 class="CreditGroup__title">Special Thanks</h5>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/gingerbeardman">Matt Sephton</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/kaeru.world">Kaeru Team</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://www.sudomemo.net">Rob</a>
</div>
<div class="CreditEntry">
<a class="CreditEntry__name" href="https://twitter.com/AustinSudomemo">Austin Burk</a>
</div>
<div class="Credits__foot">
<p>Flipnote&nbsp;Studio is &copy; Nintendo. This project isn't affiliated with or endorsed by them.</p>
<p>Playdate is a registered trademark of Panic.</p>
</div>

</div>
</section>
</BaseLayout>

<style lang="scss">

.Section {
margin-top: 7rem;
margin-top: 5rem;
margin-bottom: 2rem;

@include wrapper;
Expand Down Expand Up @@ -337,7 +344,7 @@ import Button from '../components/Button.astro';
border-bottom-left-radius: 24px;
padding: 32px;
// padding-right: 3rem;
width: 250px;
// width: 250px;
}

.DownloadCard__body {
Expand Down Expand Up @@ -449,20 +456,45 @@ import Button from '../components/Button.astro';

.CreditsSection {
.Section__body {
background: white;
background: white;
max-width: grid-span(8, 12);
padding: 32px;
margin: 0 auto;
column-count: 2;
padding: 32px;
}
}

.CreditGroup {
margin-bottom: 1.75rem;
}
.Credits {
font-size: .9rem;
}

.Credits__main {
column-count: 2;
column-gap: 20px;
}

.Credits__foot {
font-size: .8rem;
color: $color-text-alt;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;

p {
margin: 0;
}
}

.CreditGroup {
margin-bottom: 1.92em;
}

.CreditGroup--breakColumn {
break-before: column;
break-after: column;
margin-bottom: 1rem;
}

.CreditGroup:last-of-type {
margin-bottom: 1rem;
}

.CreditGroup__title {
Expand All @@ -471,7 +503,7 @@ import Button from '../components/Button.astro';
}

.CreditEntry {
font-size: .9rem;
font-size: .9em;
display: grid;
grid-template-columns: 1fr 2fr;
margin-bottom: .25rem;
Expand Down
2 changes: 1 addition & 1 deletion website/src/styles/vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
$font-stack-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
$font-stack-global: 'Inter UI', $font-stack-system;

$font-size-global: 18px;
$font-size-global: 20px;
$font-size-global-mobile: 16px;
$font-size-header: 1.3rem;

Expand Down

0 comments on commit b37c47d

Please sign in to comment.