diff --git a/Gemfile.lock b/Gemfile.lock index baa270ff..29065cdd 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -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) @@ -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) + google-protobuf (~> 3.23) sass-embedded (1.64.1-x86_64-linux-gnu) google-protobuf (~> 3.23) terminal-table (3.0.2) @@ -71,6 +74,7 @@ GEM webrick (1.8.1) PLATFORMS + x86_64-darwin-23 x86_64-linux DEPENDENCIES diff --git a/_includes/footer.html b/_includes/footer.html index 42cb885c..5e13cd7c 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,12 +1,23 @@ - \ No newline at end of file + diff --git a/_includes/gamecard.html b/_includes/gamecard.html new file mode 100644 index 00000000..660fc352 --- /dev/null +++ b/_includes/gamecard.html @@ -0,0 +1,21 @@ + +
+
+
+

+ {{ include.title }} +

+

+ {{ include.description }} +

+ diff --git a/_includes/head.html b/_includes/head.html index 7b701c9c..02775b20 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -1,33 +1,45 @@ + + - + + + + + + Flame Engine + + + + + + + + + + + + + + - + + + + + - - Flame Engine - - - - - - - - - - - - + - - + + \ No newline at end of file diff --git a/_includes/nav.html b/_includes/nav.html index ca649967..e043c3a6 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -1,14 +1,19 @@ - \ No newline at end of file + diff --git a/_includes/separator.html b/_includes/separator.html new file mode 100644 index 00000000..47d51dee --- /dev/null +++ b/_includes/separator.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/_includes/testimonial.html b/_includes/testimonial.html new file mode 100644 index 00000000..efd89d7f --- /dev/null +++ b/_includes/testimonial.html @@ -0,0 +1,23 @@ +
+
+
+

"{{ include.quote }}"

+
+
+
+
+
+ +

{{ include.author }}

+ + +

+ {{ include.authorTagline }} +

+ +
+ +
+ +
+
\ No newline at end of file diff --git a/_layouts/master.html b/_layouts/master.html index d528b3e0..6f5c32fc 100644 --- a/_layouts/master.html +++ b/_layouts/master.html @@ -1,15 +1,14 @@ -{% include head.html %} + {% include head.html %} - -
- {% include nav.html %} -
- {{ content }} -
-
- {% include footer.html %} - - - \ No newline at end of file + +
+ {% include nav.html %} +
{{ content }}
+
+ {% include footer.html %} + + diff --git a/assets/css/main.css b/assets/css/main.css index 0b65d3eb..01f4a2a0 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -6,9 +6,140 @@ @tailwind utilities; .main-button { - background-color: #EB1930; - padding: 12px 32px; - border-radius: 4px; - color: white; - text-transform: uppercase; -} \ No newline at end of file + background-color: #eb1930; + padding: 8px 16px; + cursor: pointer; + 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%; + max-width: 700px; +} + +:root { + --main-border-color: #ff8835; + --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-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-sub) 100%, + var(--main-border-indentation-sub) + calc(100% - var(--main-border-indentation-sub)), + 0 calc(100% - var(--main-border-indentation-sub)) + ); +} + +.main-border > .main-border-inner::before, +.main-border > .main-border-inner::after { + content: ""; + position: absolute; + width: var(--main-border-indentation); + height: var(--main-border-indentation); + background-color: #140603; + z-index: -1; + border: var(--main-border-thickness) solid var(--main-border-color); +} + +.main-border > .main-border-inner::before { + top: calc(-1 * var(--main-border-thickness)); + right: calc(-1 * var(--main-border-thickness)); +} + +.main-border > .main-border-inner::after { + bottom: calc(-1 * var(--main-border-thickness)); + left: calc(-1 * var(--main-border-thickness)); +} + +.main-border::before, +.main-border::after { + content: ""; + position: absolute; + width: var(--main-border-square-size); + height: var(--main-border-square-size); + background: var(--main-border-color); +} + +.main-border::before { + top: calc(-1 * var(--main-border-square-displacement)); + right: calc(-1 * var(--main-border-square-displacement)); + z-index: 1; +} + +.main-border::after { + bottom: calc(-1 * var(--main-border-square-displacement)); + left: calc(-1 * var(--main-border-square-displacement)); +} + +.main-border .main-border-triangle { + position: absolute; + bottom: -20px; + right: 8px; + width: 0; + height: 0; + + border-top: 0px solid transparent; + border-bottom: 20px solid transparent; + 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; +} + +footer { + position: relative; +} + +footer::before { + content: ""; + position: absolute; + width: 100%; + height: 30px; + background-image: url("/assets/images/rectangle.png"); + background-size: auto 100%; + top: -30px; +} diff --git a/assets/images/bg.png b/assets/images/bg.png new file mode 100644 index 00000000..7648f3fc Binary files /dev/null and b/assets/images/bg.png differ diff --git a/assets/images/corner-logo.png b/assets/images/corner-logo.png new file mode 100644 index 00000000..fe1a61de Binary files /dev/null and b/assets/images/corner-logo.png differ diff --git a/assets/images/cornerlogo.jpg b/assets/images/cornerlogo.jpg deleted file mode 100644 index a18fb38b..00000000 Binary files a/assets/images/cornerlogo.jpg and /dev/null differ diff --git a/assets/images/filip.jpeg b/assets/images/filip.jpeg new file mode 100644 index 00000000..ab83eb02 Binary files /dev/null and b/assets/images/filip.jpeg differ diff --git a/assets/images/game1.jpeg b/assets/images/game1.jpeg new file mode 100644 index 00000000..c0740ecf Binary files /dev/null and b/assets/images/game1.jpeg differ diff --git a/assets/images/game2.png b/assets/images/game2.png new file mode 100644 index 00000000..cd8a218e Binary files /dev/null and b/assets/images/game2.png differ diff --git a/assets/images/game3.png b/assets/images/game3.png new file mode 100644 index 00000000..ef3b37a3 Binary files /dev/null and b/assets/images/game3.png differ diff --git a/assets/images/rectangle.png b/assets/images/rectangle.png new file mode 100644 index 00000000..53dc5225 Binary files /dev/null and b/assets/images/rectangle.png differ diff --git a/assets/images/separator.png b/assets/images/separator.png new file mode 100644 index 00000000..1ed3f987 Binary files /dev/null and b/assets/images/separator.png differ diff --git a/assets/images/share_image.jpg b/assets/images/share_image.jpg new file mode 100644 index 00000000..96e8834c Binary files /dev/null and b/assets/images/share_image.jpg differ diff --git a/assets/images/t-rex.png b/assets/images/t-rex.png new file mode 100644 index 00000000..5a0c4525 Binary files /dev/null and b/assets/images/t-rex.png differ diff --git a/index.html b/index.html index 74daff23..5b3983c5 100644 --- a/index.html +++ b/index.html @@ -3,16 +3,98 @@ layout: master --- -
-
- -
-
-
2D game engine made on top of Flutter
-
- Get Started - GitHub +
+
+
+ +

+ Flexible, Open Source & Runs Everywhere +

+

+ Flame is a game engine built on top of + Flutter. It runs on + mobile, + desktop, and web. +

+
+ Get + Started + GitHub +
+
+ + {% include separator.html %} + +
+

+ Made with Flame +

+

+ Games and apps made with the help of Flame +

+
+ {% include gamecard.html + title="Orbit Guard" + description="As an Orbit Guard, you are tasked with a mission of cosmic proportions - defend the galaxy's planets against the enclosing magnetic storms. Quick reflexes and tactical taps are your primary weapons. With each planet you guard, you're one step closer to becoming the ultimate guardian of the galaxy!" + icon="/assets/images/game1.jpeg" + link="https://play.google.com/store/apps/details?id=com.raitissaripo.orbitguard&pcampaignid=web_share" + %} + {% include gamecard.html + title="Gunslinger" + description="A 2D shooter roguelike game with chaotic battles to test your survival skills for 10 intense minutes, Armed with unique weaponry that suits your playstyle." + icon="/assets/images/game2.png" + link="https://play.google.com/store/apps/details?id=dev.studiocloud.gunslinger" + %} + {% include gamecard.html + title="Watchsteroids" + description="An open source Asteroids-ish game made for WearOS using the Flame Engine, Flutter and watch controls." + icon="/assets/images/game3.png" + link="https://github.com/renancaraujo/watchsteroids" + %} +
+ +
+

+ Millions of people have played countless Flame games.
+ Check out some of them on the Awesome Flame list. +

+ View Awesome Flame +
+
+ + {% include separator.html %} + +
+
+

+ From the community, for the community +

+

+ Flame was created and is maintained by independent members of the + Flutter community.
+ Today, thousands of developers use Flame to ship games every day. +

+
+
+ {% include testimonial.html + quote="Flame strikes a great balance for + developers like me, who are forever torn between the desire to build our + own game engines, and actually shipping games. With Flame, I can get as + low-level as I want, while also leaving the more boring and laborious + details in the capable hands of Flame's maintainers." + author="Filip Hracek" + authorTagline="Game Developer" + picture="/assets/images/filip.jpeg" + link="https://mastodon.social/@filiph" + %} +
+ +
\ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 62ea17ed..c0c56520 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -27,12 +27,20 @@ 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': '320px', + 'noice': '300px', + 'testimonial': '410px', + }, colors: { - 'footer-gray': '#272727', + 'accent': '#FF8835', + 'bg': '#140003', + 'footer': '#431C01', }, }, },