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 a6fa01db..5e13cd7c 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,26 +1,23 @@ - - diff --git a/_includes/gamecard.html b/_includes/gamecard.html new file mode 100644 index 00000000..08962883 --- /dev/null +++ b/_includes/gamecard.html @@ -0,0 +1,20 @@ + +
+
+
+

+ {{ include.title }} +

+

+ {{ include.description }} +

+ diff --git a/_includes/head.html b/_includes/head.html index 7b701c9c..9aec0d60 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -29,5 +29,6 @@ - + + \ No newline at end of file diff --git a/_includes/nav.html b/_includes/nav.html index 9d56b860..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..632dff75 --- /dev/null +++ b/_includes/testimonial.html @@ -0,0 +1,18 @@ +
+
+
+

"{{ include.quote }}"

+
+
+
+
+
+

{{ include.author }}

+

{{ include.authorTagline }}

+
+
+
+
diff --git a/_layouts/master.html b/_layouts/master.html index a0bfd3f1..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 d6b2c2ce..01f4a2a0 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -6,85 +6,140 @@ @tailwind utilities; .main-button { - background-color: #EB1930; - padding: 8px 16px; - cursor: pointer; - display: inline-block; - box-shadow: -2px 2px 0px #960D1C; - color: white; + 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: 2px; - --main-border-indentation: 16px; - --main-border-square-size: 10px; + --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; + 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), - 100% 100%, - var(--main-border-indentation) 100%, - 0 calc(100% - var(--main-border-indentation)) - ); + 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: transparent; - border: var(--main-border-thickness) solid var(--main-border-color); + 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)); + 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)); + 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); + content: ""; + position: absolute; + width: var(--main-border-square-size); + height: var(--main-border-square-size); + background: var(--main-border-color); } .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 { - position: absolute; - bottom: -20px; - right: 8px; - width: 0; - height: 0; - - border-top: 0px solid transparent; - border-bottom: 20px solid transparent; - border-right: 26px solid var(--main-border-color); -} \ No newline at end of file + 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/footer.png b/assets/images/footer.png deleted file mode 100644 index 5f7ce06a..00000000 Binary files a/assets/images/footer.png and /dev/null 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/index.html b/index.html index 15be1ad5..2a997aec 100644 --- a/index.html +++ b/index.html @@ -3,99 +3,108 @@ layout: master --- -
-
- -

+

+
+
+ +

Versatile, Open Source & Runs Everywhere

-

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

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

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

Made with Flame

-

Games and app made with the Flame Engine

-
-
-
-
- -
-
-

Game 1

-

Game 1 description

-
-
-
-
- -
-
-

Game 2

-

Game 2 description

-
-
-
-
- -
-
-

Game 3

-

Game 3 description

-
+
+

+ Made with Flame +

+

+ Games and apps made with the help of Flame +

+
+ {% 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="/" %}
-
-
-

Millions of people have played countless Flame games.

-

Check out some of them on the Awesome Flame list.

+

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

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

- "This is a quote by someone in the community. Flame is the best, I want to have Flame for dinner." -

-
-
-
-
-
-

Ms Flame Mc User

-

Game Developer

-
-
-
-
-
-
-

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 everyday.

+
+
+

+ 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 everyday. +

+
+ {% 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" + %} +
-
\ No newline at end of file +
diff --git a/tailwind.config.js b/tailwind.config.js index 659b15a3..a6483c98 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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',