feat: new site (#53)

Co-authored-by: Luan Nico <[email protected]>
flame-engine · Nov 15, 2023 · 834d2a5 · 834d2a5
1 parent 56f06fd
commit 834d2a5
Show file tree

Hide file tree

Showing 22 changed files with 372 additions and 73 deletions.
diff --git 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
@@ -1,12 +1,23 @@
-<footer class="
-        w-full bg-footer-gray 
-        text-xs text-slate-50 flex-ni uppercase
-        flex flex-col space-y-8 py-8 mt-8 items-center justify-center
-        md:h-16 md:space-x-8 md:space-y-0 md:mt-0 md:flex-row 
-">
-    <a href="https://flameengine.creator-spring.com/">Merch</a>
-    <a href="https://github.com/flame-engine/awesome-flame">Awesome Flame</a>
-    <a href="https://www.youtube.com/playlist?list=PL1sAA7o4TIZoAAea6FluJbqE9U6IeA7w9">Flamecon</a>
-    <a href="https://github.com/flame-engine/brand">Media</a>
-    <a href="mailto:[email protected]">Contact</a>
-</footer>
+<footer class="w-full bg-footer">
+  <div
+    class="container mx-auto flex-1 text-xs text-accent flex-ni flex flex-col md:flex-row py-16 items-center justify-between footer"
+  >
+    <div
+      class="flex font-extrabold space-x-0 md:space-x-10 flex-col md:flex-row space-y-4 md:space-y-0 w-full md:w-auto pb-4 md:pb-0"
+    >
+      <a href="https://docs.flame-engine.org/latest/">Docs</a>
+      <a href="https://pub.dev/documentation/flame/latest/">API</a>
+      <a href="https://discord.gg/pxrBmy4">Discord</a>
+      <a href="https://examples.flame-engine.org/">Examples</a>
+      <a href="https://github.com/flame-engine/flame">Github</a>
+    </div>
+
+    <div class="flex flex-col space-y-4 text-xs w-full md:w-auto">
+      <a href="https://blue-fire.xyz/">Blue Fire</a>
+      <a href="https://www.youtube.com/@FlameEngineDev">Youtube</a>
+      <a href="https://github.com/flame-engine/awesome-flame">Awesome Flame</a>
+      <a href="https://flameengine.creator-spring.com/">Swag Store</a>
+      <a href="https://pub.dev/packages/flame">Flame on pub.dev</a>
+    </div>
+  </div>
+</footer>
diff --git a/_includes/gamecard.html b/_includes/gamecard.html
@@ -0,0 +1,21 @@
+<a
+  href="{{ include.link }}"
+  class="flex flex-col items-center gamecard"
+  title="{{ include.title }}"
+  target="_blank"
+>
+  <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-10/12 leading-tight font-medium max-w-noice md:max-w-none lg:max-w-none"
+  >
+    {{ include.description }}
+  </p>
+</a>
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,33 +1,45 @@
 <head>
+
+    <!-- Setup -->
     <meta charset="UTF-8">
     <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-    <meta name="description" content="Flame Engine Website">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <link rel="manifest" href="manifest.json">
+    <base href="/">
+
+    <!-- Title -->
+    <title>Flame Engine</title>
+    <meta property="og:title" content="Flame Engine">
+    <meta name="twitter:text:title" content="Flame Engine">
+    <meta name="twitter:title" content="Flame Engine">
+    <meta name="apple-mobile-web-app-title" content="Flame Engine">
+
+    <!-- Description -->
+    <meta name="description" content="Flame is a game engine built on top of Flutter. It runs on mobile, desktop, and web.">
+    <meta property="og:description" content="Flame is a game engine built on top of Flutter. It runs on mobile, desktop, and web."/>
+    <meta name="twitter:description" content="Flame is a game engine built on top of Flutter. It runs on mobile, desktop, and web.">
+
+    <!-- Open Graph Data -->
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="https://flame-engine.org/">
+    <meta property="og:image" content="/assets/images/share_image.png?alt=media">
 
-    <!-- iOS meta tags & icons -->
+    <!-- Twitter Share Data -->
+    <meta name="twitter:image" content="/assets/images/share_image.png?alt=media">
+    <meta name="twitter:card" content="summary_large_image">
+
+    <!-- iOS  -->
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="Flame Engine Website">
     <link rel="apple-touch-icon" href="assets/icons/Icon-192.png">
 
     <!-- Favicon -->
     <link rel="icon" type="image/png" href="assets/icons/favicon.png"/>
 
-    <title>Flame Engine</title>
-    <base href="/">
-    <link rel="manifest" href="manifest.json">
-
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta data-react-helmet="true" name="description" content="2D game engine made on top of Flutter"/>
-    <meta data-react-helmet="true" property="og:title" content="Flame"/>
-    <meta data-react-helmet="true" property="og:description" content="2D game engine made on top of Flutter"/>
-    <meta data-react-helmet="true" property="og:type" content="website"/>
-    <meta data-react-helmet="true" name="twitter:card" content="summary"/>
-    <meta data-react-helmet="true" name="twitter:title" content="Flame"/>
-    <meta data-react-helmet="true" name="twitter:description" content="2D game engine made on top of Flutter"/>
-
+    <!-- Css and stuff -->
     <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
-
     <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>
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,14 +1,19 @@
-<nav class="h-16 md:h-32 flex items-center justify-between">
-    <div class="flex-initial items-center collapse md:visible">
-        <a href="/">
-            <img src="assets/images/cornerlogo.jpg"/>
-        </a>
-    </div>
-    <div class="flex flex-wrap items-center justify-center justify-items-center text-slate-50 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>
-    </div>
-</nav>
+<nav
+  class="h-32 md:h-16 flex flex-col md:flex-row md:items-center justify-center md:justify-between space-y-8 md:space-y-0"
+>
+  <div
+    class="flex-initial flex flex-col items-center justify-center md:justify-end"
+  >
+    <a href="/">
+      <img src="assets/images/corner-logo.png" />
+    </a>
+  </div>
+  <div
+    class="flex flex-wrap items-center justify-center justify-items-center text-accent font-extrabold space-x-8"
+  >
+    <a href="https://pub.dev/documentation/flame/latest/">API</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>
diff --git a/_includes/separator.html b/_includes/separator.html
@@ -0,0 +1,3 @@
+<div class="separator flex items-center justify-center">
+  <img src="assets/images/separator.png" />
+</div>
diff --git a/_includes/testimonial.html b/_includes/testimonial.html
@@ -0,0 +1,23 @@
+<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">
+      <a href="{{ include.link }}" target="_blank">
+        <p class="text-lg">{{ include.author }}</p>
+      </a>
+      <a href="{{ include.link }}" target="_blank">
+        <p class="text-accent text-xs font-bold">
+          {{ include.authorTagline }}
+        </p>
+      </a>
+    </div>
+    <a href="{{ include.link }}" target="_blank">
+      <div class="w-10 h-10 bg-white author-photo" style="background-image: url('{{ include.picture }}');"></div>
+    </a>
+  </div>
+</div>
diff --git a/_layouts/master.html b/_layouts/master.html
@@ -1,15 +1,14 @@
 <!DOCTYPE html>
 <html>
-{% include head.html %}
+  {% include head.html %}
 
-<body class="bg-black h-screen flex flex-col">
-  <div class="container mx-auto flex-1 flex flex-col">
-    {% include nav.html %}
-    <main class="flex-1">
-      {{ content }}
-    </main>
-  </div>
-  {% include footer.html %}
-</body>
-
-</html>
+  <body
+    class="bg-[url('/assets/images/bg.png')] bg-no-repeat bg-top bg-bg h-screen flex flex-col"
+  >
+    <div class="container mx-auto flex-1 flex flex-col">
+      {% include nav.html %}
+      <main class="flex-1">{{ content }}</main>
+    </div>
+    {% include footer.html %}
+  </body>
+</html>
diff --git 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;
-}
+  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
diff --git a/assets/images/corner-logo.png b/assets/images/corner-logo.png
diff --git a/assets/images/cornerlogo.jpg b/assets/images/cornerlogo.jpg
diff --git a/assets/images/filip.jpeg b/assets/images/filip.jpeg
diff --git a/assets/images/game1.jpeg b/assets/images/game1.jpeg
diff --git a/assets/images/game2.png b/assets/images/game2.png
diff --git a/assets/images/game3.png b/assets/images/game3.png
diff --git a/assets/images/rectangle.png b/assets/images/rectangle.png
diff --git a/assets/images/separator.png b/assets/images/separator.png
diff --git a/assets/images/share_image.jpg b/assets/images/share_image.jpg
diff --git a/assets/images/t-rex.png b/assets/images/t-rex.png