Skip to content

Commit

Permalink
feat: Add hover states to all elements (#56)
Browse files Browse the repository at this point in the history
* add variables to our colors on CSS
* add hover versions of the text colors (normal and accent)
* make links standard (bold, no underline, orange, hoverable)
* add some special cases for the links (game cards, etc)
* rename gamecard to game-card

## Preview


https://github.com/flame-engine/flame-engine-site/assets/882703/74e540a7-8264-483a-a743-8666132aec27
  • Loading branch information
luanpotter authored Nov 19, 2023
1 parent 7019d65 commit 63ae669
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 24 deletions.
6 changes: 3 additions & 3 deletions _includes/gamecard.html → _includes/game-card.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<a
href="{{ include.link }}"
class="flex flex-col items-center gamecard"
class="flex flex-col items-center game-card"
title="{{ include.title }}"
target="_blank"
>
Expand All @@ -10,11 +10,11 @@
style="background-image: url('{{ include.icon }}');"
></div>
</div>
<p class="text-accent font-bold text-base md: lg:text-[20px] py-5">
<p class="accent-with-hover 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"
class="text-with-hover text-center w-10/12 leading-tight font-medium max-w-noice md:max-w-none lg:max-w-none"
>
{{ include.description }}
</p>
Expand Down
2 changes: 1 addition & 1 deletion _includes/testimonial.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<p class="text-lg">{{ include.author }}</p>
</a>
<a href="{{ include.link }}" target="_blank">
<p class="text-accent text-xs font-bold">
<p class="text-white text-xs font-bold">
{{ include.authorTagline }}
</p>
</a>
Expand Down
69 changes: 55 additions & 14 deletions assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,52 @@
@tailwind components;
@tailwind utilities;

.main-button {
:root {
--accent: #ff8835;
--accent-hover: #b35926;
--text: white;
--text-hover: #ccc;
}

a {
font-weight: 600;
color: var(--accent);
}

a:hover {
color: var(--accent-hover);
}

a.main-button {
background-color: #eb1930;
padding: 8px 16px;
cursor: pointer;
display: inline-block;
box-shadow: -2px 2px 0px #960d1c;
color: white;
color: var(--text);
text-align: center;
}

a.main-button:hover {
color: var(--text-hover);
}

a > .accent-with-hover {
color: var(--accent);
}

a:hover > .accent-with-hover {
color: var(--accent-hover);
}

a > .text-with-hover {
color: var(--text);
}

a:hover > .text-with-hover {
color: var(--text-hover);
}

nav {
font-size: 14px;
}
Expand All @@ -33,7 +69,8 @@ nav a {
}

:root {
--main-border-color: #ff8835;
--main-border-color: var(--accent);
--main-border-hover: var(--accent-hover);
--main-border-thickness: 4px;
--main-border-indentation: 13px;
--main-border-square-size: 7px;
Expand All @@ -45,7 +82,7 @@ nav a {
position: relative;
}

.gamecard {
.game-card {
flex: 1;
}

Expand All @@ -66,6 +103,10 @@ nav a {
);
}

a:hover > .main-border > .main-border-inner {
border-color: var(--main-border-hover);
}

.main-border > .main-border-inner::before,
.main-border > .main-border-inner::after {
content: "";
Expand All @@ -77,6 +118,11 @@ nav a {
border: var(--main-border-thickness) solid var(--main-border-color);
}

a:hover > .main-border > .main-border-inner::before,
a:hover > .main-border > .main-border-inner::after {
border-color: var(--main-border-hover);
}

.main-border > .main-border-inner::before {
top: calc(-1 * var(--main-border-thickness));
right: calc(-1 * var(--main-border-thickness));
Expand All @@ -96,6 +142,11 @@ nav a {
background: var(--main-border-color);
}

a:hover > .main-border::before,
a:hover > .main-border::after {
background: var(--main-border-hover);
}

.main-border::before {
top: calc(-1 * var(--main-border-square-displacement));
right: calc(-1 * var(--main-border-square-displacement));
Expand Down Expand Up @@ -143,13 +194,3 @@ footer::before {
background-size: auto 100%;
top: -30px;
}

.link {
color: #ff8835;
text-decoration: underline;
font-weight: 600;
}

.link:hover {
color: #b35926;
}
12 changes: 6 additions & 6 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<div class="main-border w-full">
<div class="main-border-inner p-4">
<p class="text-center">
Our <a class="link" href="https://itch.io/jam/flame-jam-3">Flame Game Jam 3.0</a> is happening on 8-10th of December on itch.io! You do not want to miss it!
Our <a href="https://itch.io/jam/flame-jam-3">Flame Game Jam 3.0</a> is happening on 8-10th of December on itch.io! You do not want to miss it!
</p>
</div>
</div>
Expand All @@ -20,7 +20,7 @@
</p>
<p class="text-center text-sm md:text-sm lg:text-base">
Flame is a game engine built on top of
<a class="link" href="https://flutter.dev/" target="_blank">Flutter</a>. It runs on
<a href="https://flutter.dev/" target="_blank">Flutter</a>. It runs on
mobile,
desktop, and web.
</p>
Expand All @@ -38,23 +38,23 @@
<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">
<p class="max-w-md 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
{% include game-card.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
{% include game-card.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
{% include game-card.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"
Expand Down

0 comments on commit 63ae669

Please sign in to comment.