Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add platform-support component #326

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+105 −0
Open

Add platform-support component #326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions _includes/platform-support.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<div class=".container-fluid mb-4">
<div class="full-bleed">
<h2 class="h3 mb-3 fw-bold text-stride">Develop once, deploy cross-platform</h2>
<div class="grid">
<div class="main">
<img alt="stride-logo" height="37" width="124" src="/images/svg/stride-logo-dark.svg" />
</div>

<div class="main center">Windows <i class="fa-brands fa-windows"></i></div>
<div class="main center">MacOS <i class="fa-brands fa-apple"></i></div>
<div class="main center">Linux <i class="fa-brands fa-linux"></i></div>
<div class="main center">Android <i class="fa-brands fa-android"></i></div>
<div class="main center">IOS <i class="fa-brands fa-apple"></i></div>

<div class="main">Deploy</div>
<div class="secondary check"><i class="fa-solid fa-circle-check"></i></div>
<div class="secondary check"><i class="fa-solid fa-circle-check"></i></div>
<div class="secondary check"><i class="fa-solid fa-circle-check"></i></div>
<div class="secondary check"><i class="fa-solid fa-circle-check"></i></div>
<div class="secondary check"><i class="fa-solid fa-circle-check"></i></div>

<div class="main">Code only</div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would replace word "Code only" with word "Runtime".
That's because Runtime is a wider term and AFAIK code-only is a part of Stride Community toolkit and It's basically one of two flavors of developing game. First is unity-like (default one) in which you visually adding or creating an assets by using GameStudio. This however does not mean that you need GameStudio to run your game.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe good idea would be adding Tooltip that this also includes code only approach (example: https://fluent2.microsoft.design/components/web/react/tooltip/usage/)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that "Code Only" isn't the best term for this, though it is what has been used so far for it. "Runtime" might not be the best either as imo it has more of a connotation of the actual running application (especially true if you look at Unity). Maybe "Framework" would make sense? Generally I see the term used when refering to 'game engines' that don't have a visual editor. So, just the API/code.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now you see, why this PR might take some time to resolve 🤣🙈

<div class="secondary check"><i class="fa-solid fa-circle-check"></i></div>
<div class="secondary check"><i class="fa-solid fa-circle-check"></i></div>
<div class="secondary check"><i class="fa-solid fa-circle-check"></i></div>
<div class="secondary check"><i class="fa-solid fa-circle-check"></i></div>
<div class="secondary xmark"><i class="fa-solid fa-circle-xmark"></i></div>

<div class="main">Game studio</div>
<div class="secondary xmark"><i class="fa-solid fa-circle-xmark"></i></div>
<div class="secondary xmark"><i class="fa-solid fa-circle-xmark"></i></div>
<div class="secondary xmark"><i class="fa-solid fa-circle-xmark"></i></div>
<div class="secondary xmark"><i class="fa-solid fa-circle-xmark"></i></div>
<div class="secondary xmark"><i class="fa-solid fa-circle-xmark"></i></div>
</div>
</div>
</div>
66 changes: 66 additions & 0 deletions css/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,4 +288,70 @@ svg path.logo-path {
background-size: 50px 50px;
}


// Platform support component

.full-bleed {
display: flex;
flex-direction: column;
background-color: #24292e;
border-bottom: solid 12px #49535c;
overflow-x: scroll;
padding: 60px;

.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
min-width: 970px;

.main {
padding: 15px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom: solid 3px rgba(255, 0, 0, 0.438);
font-size: 1.2rem;
color: #abb9c5;

&:first-child {
border: none;
}
}

.main.center {
text-align: center;
}

.secondary {
display: flex;
align-items: center;
justify-content: center;
}

.secondary.check {
> i {
color: rgb(89, 218, 164);
}
}

.secondary.xmark {
> i {
color: rgb(196, 63, 63);
}
}
}

@media screen and (min-width: 1280px) {
overflow-x: hidden;
padding: 60px 120px;
}

@media screen and (min-width: 1600px) {
padding: 60px 200px;
}

@media screen and (min-width: 1920px) {
padding: 60px 240px;
}
}

@import "syntax-highlighting";
2 changes: 2 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@ <h2 class="h3 mb-3 fw-bold text-stride">Collaborate with us</h2>
</div>
</div>

{% include platform-support.html %}

{% include blog-home.html %}

<div class="container-xl">
Expand Down