Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat: responsiveness #51

Merged
merged 5 commits into from
Nov 15, 2023
Merged

feat: responsiveness #51

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b8d200a
feat: some responsiveness
renancaraujo Nov 14, 2023
a005efe
more responsiveness
renancaraujo Nov 14, 2023
814b58d
everything responsive
renancaraujo Nov 14, 2023
f60842c
format everythin
renancaraujo Nov 14, 2023
1fb545e
format everythin
renancaraujo Nov 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ GEM
eventmachine (1.2.7)
ffi (1.15.5)
forwardable-extended (2.6.0)
google-protobuf (3.23.4-x86_64-darwin)
google-protobuf (3.23.4-x86_64-linux)
http_parser.rb (0.8.0)
i18n (1.14.1)
Expand Down Expand Up @@ -63,6 +64,8 @@ GEM
rexml (3.2.5)
rouge (4.1.2)
safe_yaml (1.0.5)
sass-embedded (1.64.1-x86_64-darwin)
renancaraujo marked this conversation as resolved.
Show resolved Hide resolved
google-protobuf (~> 3.23)
sass-embedded (1.64.1-x86_64-linux-gnu)
google-protobuf (~> 3.23)
terminal-table (3.0.2)
Expand All @@ -71,6 +74,7 @@ GEM
webrick (1.8.1)

PLATFORMS
x86_64-darwin-23
x86_64-linux

DEPENDENCIES
Expand Down
7 changes: 7 additions & 0 deletions _includes/gamecard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<a href="{{ include.link }}" class="flex flex-col items-center gamecard" title="{{ include.title }}">
<div class="main-border max-w-full">
<div class="main-border-inner max-w-full w-36 md:w-44 lg:w-56 h-36 md:h-44 lg:h-56 bg-no-repeat bg-center bg-cover" style="background-image: url('{{ include.icon }}');"></div>
</div>
<p class="text-accent font-bold text-base md: lg:text-[20px] py-5 ">{{ include.title }}</p>
<p class="text-center w-8/12 leading-tight font-medium max-w-noice md:max-w-none lg:max-w-none">{{ include.description }}</p>
</a>
3 changes: 2 additions & 1 deletion _includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,6 @@

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@100;300;400;600;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:100,200,300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:b,bi&display=swap" rel="stylesheet">
</head>
7 changes: 4 additions & 3 deletions _includes/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@
</a>
</div>
<div class="flex flex-wrap items-center justify-center justify-items-center text-accent font-extrabold space-x-8">
<a href="https://docs.flame-engine.org/latest/">Docs</a>

<a href="https://pub.dev/documentation/flame/latest/">API</a>
<a href="https://examples.flame-engine.org/">Examples</a>
<a href="https://github.com/flame-engine/flame">GitHub</a>
<a href="https://discord.gg/pxrBmy4">Discord</a>
<a href="https://examples.flame-engine.org/">Examples</a>
<a href="https://docs.flame-engine.org/latest/">Docs</a>

</div>
</nav>
3 changes: 3 additions & 0 deletions _includes/separator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div class="separator flex items-center justify-center">
<img src="assets/images/separator.png" />
</div>
18 changes: 18 additions & 0 deletions _includes/testimonial.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div class="max-w-testimonial-sm md:max-w-testimonial testimonial">
<div class="main-border mb-8">
<div class="main-border-inner py-6 px-4 md:py-10 md:px-8 ">
<p class="text-center text-sm md:text-base">
"{{ include.quote }}"
</p>
</div>
<div class="main-border-triangle"></div>
</div>
<div class="flex flex-row justify-end items-end space-x-2">
<div class="flex flex-col items-end">
<p class=" text-sm">{{ include.author }}</p>
<p class="text-accent text-xs font-bold">{{ include.authorTagline }}</p>
</div>
<div class="w-10 h-10 bg-white author-photo" style="background-image: url('{{ include.picture }}');"></div>

</div>
</div>
64 changes: 51 additions & 13 deletions assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,29 +12,54 @@
display: inline-block;
box-shadow: -2px 2px 0px #960D1C;
color: white;
text-align: center;
}

nav {
font-size: 14px;
}

nav a {
text-align: right;
}

.flame-demo {
background-image: url('/assets/images/t-rex.png');
background-position: center left;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
}

:root {
--main-border-color: #FF8835;
--main-border-thickness: 2px;
--main-border-indentation: 16px;
--main-border-square-size: 10px;
--main-border-thickness: 4px;
--main-border-indentation: 13px;
--main-border-square-size: 7px;
--main-border-square-displacement: 2px;
--main-border-indentation-sub: 9px; /* indentation - thickness */
}

.main-border {
position: relative;
}

.gamecard {
flex: 1;
}

.main-border > .main-border-inner {
position: relative;
border: var(--main-border-thickness) solid var(--main-border-color);
clip-path: polygon(
0 0,
calc(100% - var(--main-border-indentation)) 0,
100% var(--main-border-indentation),
calc(100% - var(--main-border-indentation-sub)) 0,
calc(100% - var(--main-border-indentation-sub)) var(--main-border-indentation-sub),
100% var(--main-border-indentation-sub),
100% 100%,
var(--main-border-indentation) 100%,
0 calc(100% - var(--main-border-indentation))
var(--main-border-indentation-sub) 100%,
var(--main-border-indentation-sub) calc(100% - var(--main-border-indentation-sub)),
0 calc(100% - var(--main-border-indentation-sub))
);
}

Expand All @@ -44,7 +69,8 @@
position: absolute;
width: var(--main-border-indentation);
height: var(--main-border-indentation);
background: transparent;
background-color:#140603;
z-index: -1;
border: var(--main-border-thickness) solid var(--main-border-color);
}

Expand All @@ -68,13 +94,14 @@
}

.main-border::before {
top: 0px;
right: 0px;
top: calc(-1 * var(--main-border-square-displacement));
right: calc(-1 * var(--main-border-square-displacement));
z-index: 1;
}

.main-border::after {
bottom: 0px;
left: 0px;
bottom: calc(-1 * var(--main-border-square-displacement));
left: calc(-1 * var(--main-border-square-displacement));
}

.main-border .main-border-triangle {
Expand All @@ -86,5 +113,16 @@

border-top: 0px solid transparent;
border-bottom: 20px solid transparent;
border-right: 26px solid var(--main-border-color);
border-right: 21px solid var(--main-border-color);
}

.author-photo {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}

.author-photo-min {
background-repeat: no-repeat;
background-position: bottom right;
}
126 changes: 53 additions & 73 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,98 +3,78 @@
layout: master
---

<div class="flex flex-col items-center space-y-32 text-white pt-16">
<div class="flex flex-col items-center space-y-8">
<img src="assets/images/t-rex.png" />
<p class="font-bold text-4xl center">
<div class="flex flex-col items-stretch text-white pt-4 md:pt-6 lg:pt-4 space-y-16 md:space-y-24 lg:space-y-32">
<div class="flex flex-col items-center space-y-8 hero py-16 md:py-18 lg:py-28">

<div class="flame-demo h-40" ></div>

<p class="font-bold center font-accent text-center text-2xl md:text-5xl lg:text-5xl">
Versatile, Open Source & Runs Everywhere
spydon marked this conversation as resolved.
Show resolved Hide resolved
</p>
<p>
<p class="text-center text-sm md:text-sm lg:text-base">
Flame is a game engine built on top of Flutter. It runs on mobile, desktop, and web.
</p>
<div class="space-y-8 flex flex-col md:space-y-0 md:space-x-8 md:flex-row">
<a class="main-button" href="https://docs.flame-engine.org/latest/">Get Started</a>
<a class="main-button" href="https://github.com/flame-engine/flame">GitHub</a>
<div class="space-y-4 flex flex-col sm:space-y-0 sm:space-x-8 sm:flex-row">
<a class="main-button text-sm md:text-sm lg:text-bas font-bold" href="https://docs.flame-engine.org/latest/">Get Started</a>
<a class="main-button text-sm md:text-sm lg:text-bas font-bold" href="https://github.com/flame-engine/flame">GitHub</a>
</div>
</div>

<div class="my-8">
<img src="assets/images/separator.png" />
</div>
{% include separator.html %}
renancaraujo marked this conversation as resolved.
Show resolved Hide resolved

<div class="flex flex-col items-center space-y-8">
<h2 class="text-accent text-2xl font-bold">Made with Flame</h2>
<p>Games and app made with the Flame Engine</p>
<div class="flex flex-row space-x-16">
<div class="flex flex-col items-center space-y-1">
<div class="main-border">
<div class="main-border-inner">
<img src="assets/icons/favicon.png" width="150" />
</div>
</div>
<p class="text-accent text-xl">Game 1</p>
<p>Game 1 description</p>
</div>
<div class="flex flex-col items-center space-y-1">
<div class="main-border">
<div class="main-border-inner">
<img src="assets/icons/favicon.png" width="150" />
</div>
</div>
<p class="text-accent text-xl">Game 2</p>
<p>Game 2 description</p>
</div>
<div class="flex flex-col items-center space-y-1">
<div class="main-border">
<div class="main-border-inner">
<img src="assets/icons/favicon.png" width="150" />
</div>
</div>
<p class="text-accent text-xl">Game 3</p>
<p>Game 3 description</p>
</div>
<div class="flex flex-col items-center space-y-1 lg:space-y-8 ">
<h2 class="text-accent font-bold font-accent text-center text-3xl md:text-4xl lg:text-4xl">Made with Flame</h2>
<p class="max-w-sm text-center">Games and apps made with the help of Flame</p>
<div class="flex flex-col md:flex-row lg:flex-row space-y-20 md:space-y-0 lg:space-x-16 py-24">
{% include gamecard.html
title="Watchsteroids"
description="A Code challenge t build a Flame game in 17 days, By the Flutter team"
icon="assets/icons/favicon.png"
link="/" %}

{% include gamecard.html
title="Watchsteroids"
description="A Code challenge t build a Flame game in 17 days, By the Flutter team"
icon="assets/icons/favicon.png"
link="/" %}

{% include gamecard.html
title="Watchsteroids"
description="A Code challenge t build a Flame game in 17 days, By the Flutter team"
icon="assets/icons/favicon.png"
link="/" %}
</div>

<div class="h-8"></div>


<div class="flex flex-col items-center">
<p>Millions of people have played countless Flame games.</p>
<p>Check out some of them on the Awesome Flame list.</p>
<p class="text-center w-8/12 leading-tight font-medium mb-8">Millions of people have played countless Flame games. <br />
Check out some of them on the Awesome Flame list.</p>
<a class="main-button text-sm md:text-base font-bold" href="https://github.com/flame-engine/awesome-flame">View Awesome Flame</a>
</div>
<a class="main-button" href="https://github.com/flame-engine/awesome-flame">View Awesome Flame</a>

</div>

<div class="my-8">
<img src="assets/images/separator.png" />
</div>
{% include separator.html %}

<div class="flex flex-row space-x-16">
<div class="flex flex-col items-end space-y-8 w-[420px]">
<div class="main-border">
<div class="main-border-inner">
<p class="p-8">
"This is a quote by someone in the community. Flame is the best, I want to have Flame for dinner."
</p>
</div>
<div class="main-border-triangle"></div>
</div>
<div class="flex flex-row items-end space-x-2">
<div class="flex flex-col items-end">
<p>Ms Flame Mc User</p>
<p class="text-accent">Game Developer</p>
</div>
<div class="w-16 h-16 bg-white"></div>
<div class="w-4 h-4 bg-white"></div>
</div>
</div>
<div class="flex flex-col items-center space-y-4 w-[420px]">
<p class="text-accent font-bold text-4xl">From the community, <br />for the community</p>
<p>Flame was created and is maintained by independent members of the Flutter community.</p>
<p>Today, thousands of developers use Flame to ship games everyday.</p>
<div class="flex flex-col md:flex-row-reverse lg:flex-row-reverse space-y-20 md:space-y-0 md:space-x-16">
<div class="flex flex-col items-center justify-center flex-1 space-y-10 px-8">
<p class="text-accent font-accent font-bold text-4xl text-center leading-tight">From the community, for the community</p>
<p class="text-center max-w-testimonial font-medium">Flame was created and is maintained by independent members of the Flutter community. <br />
Today, thousands of developers use Flame to ship games everyday.</p>
<div>
<a class="main-button" href="https://discord.gg/pxrBmy4">Join our Discord</a>
<a class="main-button font-bold" href="https://discord.gg/pxrBmy4">Join our Discord</a>
</div>
</div>
<div class="flex flex-col items-center justify-center flex-1">
{% include testimonial.html
quote="This is a quote by someone in the community. Flame is the best, I want to have Flame for dinner."
author="Ms Flame Mc User"
authorTagline="Game Developer"
picture="https://pbs.twimg.com/profile_images/1428343958355292166/jMFX5zS3_400x400.jpg"
%}
</div>

</div>

<div class="h-8"></div>
Expand Down
8 changes: 7 additions & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,16 @@ module.exports = {

},
fontFamily: {
sans: ['"Exo 2"', 'sans-serif'],
sans: ['"IBM Plex Mono"', 'sans-serif'],
serif: ['Firealistic', 'sans-serif'],
accent: ['PT sans', 'sans-serif'],
},
extend: {
maxWidth: {
'testimonial-sm': '220px',
'noice': '300px',
'testimonial': '340px',
},
colors: {
'accent': '#FF8835',
'bg': '#140003',
Expand Down