Skip to content

Commit

Permalink
Update feature section with grid-like design + other general styling …
Browse files Browse the repository at this point in the history 
…improvements

sorry jeremy (bro wont even see this!!) it's 11, this commit is a liiiittttlee messy
  • Loading branch information
@vapidinfinity
vapidinfinity committed Oct 10, 2024
1 parent b3ed9a7 commit f8d9928
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 37 deletions.
2 changes: 1 addition & 1 deletion .astro/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"_variables": {
"lastUpdateCheck": 1722002543768
"lastUpdateCheck": 1728399114239
}
}
8 changes: 7 additions & 1 deletion src/components/sections/FeatureSection.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,22 @@ import { Image } from "astro:assets";
background-color: var(--secondary-nav-color);
padding: 20px;
border-radius: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
margin-bottom: 20px;
height: 100%;
}

.feature-image {
width: 100%;
height: auto;
}

.feature-image img {
width: 100%;
height: auto;
object-fit: cover;
}

.feature-text h3 {
font-size: 1.5rem;
margin-bottom: 10px;
Expand Down
184 changes: 149 additions & 35 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,55 @@ import CTAImage from "../images/mythic-screenshot.png";
import FeatureSection from "../components/sections/FeatureSection.astro";
import AccountsScreenshot from "../images/accounts.png";
import ImportScreenshot from "../images/import.png";
import BottlesSCreenshot from "../images/bottles.png";
import FullscreenLibraryScreenshotLight from "../images/app/light/fs_library.png"
import GameSettingsScreenshotLight from "../images/app/light/gamesettings.png"
import ImportSheetScreenshotLight from "../images/app/light/importsheet.png"
import ContainerConfigurationScreenshotLight from "../images/app/light/containerconfiguration.png"
import AccountManagerScreenshotLight from "../images/app/light/accountmanager.png"
import SupportViewScreenshotLight from "../images/app/light/supportview.png"
import MythicXcodeScreenshotLight from "../images/app/light/mythic_xcode.png"
import SocialCard from "../components/ui/SocialCard.astro";
import Footer from "../components/navigation/Footer.astro";
const features = [
{
title: "Import your own titles",
desc: "Epic not enough? Import your own macOS or Windows® titles directly into Mythic, and the rest is history.",
image: ImportScreenshot,
{
title: "Your library, your way.",
desc: "Easily manage all your games in one place, with a beautiful and customizable library.",
image: FullscreenLibraryScreenshotLight,
color: "#2294b1",
},
{
title: "Open-source, open season!",
desc: "Something isn't as good as it should be? Dig through the source code and help make it better.",
image: MythicXcodeScreenshotLight,
color: "#e241da",
},
{
title: "Multiple launchers, one place",
desc: "Install, set up, and launch all your games from an external launcher, from Epic, or by yourself.",
image: AccountsScreenshot,
desc: "Install, set up, and launch all your games from an external launcher, or by yourself.",
image: AccountManagerScreenshotLight,
color: "#3d44c3",
},
{
title: "Virtualized your way",
desc: "Create multiple environments of Windows® directly within Mythic, and keep all your games isolated safely from one another.",
image: BottlesSCreenshot,
title: "Game management, without the fuss.",
desc: "Need to move your games around? Maybe, edit some settings? Add some flags? Mythic has you covered.",
image: GameSettingsScreenshotLight,
color: "#2294b1",
},
{
title: "Import your own titles",
desc: "Epic not enough? Import your own macOS or Windows® titles directly into Mythic, and the rest is history.",
image: ImportSheetScreenshotLight,
color: "#e241da",
},
{
title: "Virtualization? Child's play.",
desc: "Create multiple environments of Windows® directly within Mythic, and keep all your games isolated safely from one another.",
image: ContainerConfigurationScreenshotLight,
color: "#3d44c3",
},
];
const socials = [
Expand Down Expand Up @@ -72,7 +94,7 @@ const socials = [
<h1 class="mythic-gradient-text">
The best way to play Windows games on Mac.
</h1>
<p style="margin-top: 15px; max-width: 800px;">
<p>
An open-source macOS game launcher to play Windows games through our
implementation of Apple's Game Porting Toolkit - supporting many launchers.
</p>
Expand All @@ -90,29 +112,86 @@ const socials = [
/>

<div class="cta-after">
<h1 class="mythic-gradient-text" style="text-align: left;">
Gaming on a Mac has never been this easy
<h1
class="mythic-gradient-text"
style="text-align: left; margin-bottom: 0;"
>
Friends gaming without you?
</h1>
<h1 style="text-align: left; margin: 0;">
Mythic can fix that.
</h1>
<p style="margin-top: 15px; text-align: left;">
Time to throw all your virtual machines, wine bottles and subscriptions
out of the window.
<p style="text-align: left; margin-top: 0;">
Time to throw all your virtual machines and subscriptions out of the
window.
</p>
{
features.map((feature, index) => (

<!-- unfortunately i'm not a webdev and am too lazy to deal with modularity -->
<div class="grid-container" style="grid-template-columns: 3fr 1fr;">
<div class="large-tile">
<FeatureSection
title={feature.title}
desc={feature.desc}
image={feature.image}
id={String(index + 1)}
color={feature.color}
title={features[0].title}
desc={features[0].desc}
image={features[0].image}
id="1"
color={features[0].color}
/>
))
}
</div>
<div class="small-tile">
<FeatureSection
title={features[1].title}
desc={features[1].desc}
image={features[1].image}
id="2"
color={features[1].color}
/>
</div>
<div class="small-tile">
<FeatureSection
title={features[2].title}
desc={features[2].desc}
image={features[2].image}
id="3"
color={features[2].color}
/>
</div>
</div>

<div class="grid-container" style="grid-template-columns: 1fr 3fr;">
<div class="large-tile" style="grid-column: 2;">
<FeatureSection
title={features[3].title}
desc={features[3].desc}
image={features[3].image}
id="3"
color={features[3].color}
/>
</div>
<div class="small-tile" style="grid-column: 1;">
<FeatureSection
title={features[4].title}
desc={features[4].desc}
image={features[4].image}
id="4"
color={features[4].color}
/>
</div>
<div class="small-tile" style="grid-column: 1;">
<FeatureSection
title={features[5].title}
desc={features[5].desc}
image={features[5].image}
id="5"
color={features[5].color}
/>
</div>
</div>

<sub>
We have even more to come, see{" "}
We have even more to come, check out the{" "}
<span>
<a href="https://github.com/orgs/MythicApp/projects/2/views/2">
roadmap
roadmap.
</a>
</span>
</sub>
Expand All @@ -138,6 +217,46 @@ const socials = [
</Layout>

<style>
.grid-container {
display: grid;
gap: 1rem;
row-gap: 0;
align-items: center;
height: 100%;
}

.large-tile {
grid-column: 1;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 100%;
}

.small-tile {
grid-column: 2;
padding: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}

@media only screen and (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto;
}

.large-tile,
.small-tile {
grid-column: 1;
grid-row: auto;
height: auto;
}
}

.ctalogo {
width: 124px;
height: 124px;
Expand All @@ -146,7 +265,6 @@ const socials = [
.mythic-gradient-text {
display: inline;
--bg-size: 400%;
font-size: 60px;
background: linear-gradient(
90deg,
var(--color-one),
Expand All @@ -157,7 +275,7 @@ const socials = [
color: transparent;
-webkit-background-clip: text;
background-clip: text;
animation: move-bg 40s infinite linear;
animation: move-bg 40s infinite ease-in-out;
margin-bottom: 0;
}

Expand Down Expand Up @@ -227,10 +345,6 @@ const socials = [
height: 64px;
}

.mythic-gradient-text {
font-size: 36px;
}

sub {
font-size: 12px;
}
Expand Down

0 comments on commit f8d9928

Please sign in to comment.