feat: Add main design elements

flame-engine · Nov 6, 2023 · 9fa86ac · 9fa86ac
1 parent 020d56a
commit 9fa86ac
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 26 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,12 +1,26 @@
+<img
+    src="assets/images/footer.png"
+    class="w-full h-auto"
+    style="object-fit: repeat; object-position: center"
+/>
 <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 
+        w-full bg-footer 
+        text-xs text-text flex-ni
+        flex flex-row space-x-32 py-4 items-center justify-center
 ">
-    <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>
+    <div class="flex space-x-2">
+        <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>
+
+    <div class="flex flex-col space-y-2">
+        <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>
 </footer>
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -4,7 +4,7 @@
             <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">
+    <div class="flex flex-wrap items-center justify-center justify-items-center text-text 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>

diff --git a/_layouts/master.html b/_layouts/master.html
@@ -2,7 +2,7 @@
 <html>
 {% include head.html %}
 
-<body class="bg-[url('/assets/images/bg.png')] bg-[#140003] bg-blend-overlay h-screen flex flex-col">
+<body class="bg-[url('/assets/images/bg.png')] bg-no-repeat bg-center 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">

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -7,8 +7,9 @@
 
 .main-button {
     background-color: #EB1930;
-    padding: 12px 32px;
-    border-radius: 4px;
+    padding: 8px 16px;
+    cursor: pointer;
+    display: inline-block;
+    box-shadow: -2px 2px 0px #960D1C;
     color: white;
-    text-transform: uppercase;
 }
diff --git a/assets/images/bg.png b/assets/images/bg.png
diff --git a/assets/images/footer.png b/assets/images/footer.png
diff --git a/assets/images/t-rex.png b/assets/images/t-rex.png
diff --git a/index.html b/index.html
@@ -3,16 +3,16 @@
 layout: master
 ---
 
-<div class="grid place-items-center text-white">
-  <div class="md:grid md:grid-cols-2">
-    <img src="assets/images/flame-icon.png" height="50%" />
-    <div class="grid grid-cols-1 content-center gap-4 gap-y-8">
-      <div><img src="assets/images/flame-logo.png" /></div>
-      <div class="text-2xl">2D game engine made on top of Flutter</div>
-      <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>
-    </div>
+<div class="flex flex-col items-center space-y-8 text-white pt-16">
+  <img src="assets/images/t-rex.png" />
+  <div class="font-bold text-6xl">
+    Versatile, Open Source & Portable
+  </div>
+  <div>
+    Flame is a game engine built on top of Flutter. It runs on mobile, desktop, and web.
+  </div>
+  <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>
 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -32,7 +32,9 @@ module.exports = {
     },
     extend: {
       colors: {
-        'footer-gray': '#272727',
+        'text': '#FF8835',
+        'bg': '#140003',
+        'footer': '#431C01',
       },
     },
   },