xemu-project/xemu-website
1
0
Fork 0
mirror of https://github.com/xemu-project/xemu-website.git synced 2024-11-23 03:19:44 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Style tweaks

Browse Source
This commit is contained in:
Matt Borgerson 2023-01-17 23:43:59 -07:00
parent b9b9d3b2ff
commit 9103b11835
5 changed files with 135 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/stylesheets/extra.css
View File

@ -40,7 +40,7 @@
--md-primary-fg-color--light: var(--gray-800);
--md-primary-fg-color--dark: #00ff00;
--md-accent-fg-color: var(--gray-600);
--md-accent-fg-color: #8dc103;
--md-accent-fg-color--transparent: var(--gray-800);
--md-accent-bg-color: var(--gray-200);
--md-accent-bg-color--light: var(--gray-200);

BIN
resources/linux_title_bar_dark_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

3
templates/template_base.html
View File

@ -21,10 +21,9 @@
<link rel="apple-touch-icon" sizes="180x180" href="{{ main_url_base }}/xemu_180x180.png">
<link rel="icon" sizes="192x192" href="{{ main_url_base }}/xemu_192x192.png">
<link rel="stylesheet" href="{{ main_url_base }}/theme.css">
<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=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Roboto&display=swap" rel="stylesheet">
<title>{%block title %}{% endblock %}{% if self.title() %} | {% endif %}xemu: Original Xbox Emulator</title>
{% block append_head %}{% endblock %}

172
templates/template_index.html
View File

@ -55,10 +55,24 @@
margin: -60px 0 0; /* negative fixed header height */
}
.feature-card {
background-color: #181818;
border: 1px #0e0e0e solid;
border-radius: 5px;
min-height: 100%;
padding: 1rem;
padding-left: 3.5rem;
}
.feature-card p {
margin: 0;
}
.feature-icon {
font-size: 0.7em;
padding-right: 0.25em;
vertical-align: 10%;
width: 3.5rem;
margin: 0;
margin-left: -3.5rem;
text-align: center;
}
.button-icon {
@ -102,6 +116,23 @@
h2 {
margin-top: 1em;
}
.screenshot-window {
box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.6);
border-radius: 10px;
max-width: 642px;
margin: auto;
}
.screenshot-titlebar {
width: 100%;
}
#screenshot-carousel {
border: 1px rgba(0, 0, 0, 0.6) solid;
border-top: 0;
width: 100%;
}
</style>
{% endblock %}
@ -111,47 +142,45 @@ h2 {
<div class="container">
<div class="row mt-5">
<div class="col-md-6 mt-4 pb-5 pb-md-0 text-center">
<img src="xbox_logo.png" id="xbox-logo" class="img-fluid" width=450 />
<img src="xbox_logo.png" id="xbox-logo" class="img-fluid" width=450 />
</div>
<div class="col-md-6">
<h1 class="display-3">
<canvas id="logo-canvas" class="gl-logo"></canvas>
<img id="logo-fallback" alt="xemu logo" src="/logo-green-jumbotron.svg" style="height: 1.03em;">
</h1>
<h4 class="card-subtitle mb-2">Original Xbox Emulator</h4>
<p>
A free and open-source application that emulates the original Microsoft
Xbox game console, enabling people to play their original Xbox games on
Windows, macOS, and Linux systems.
</p>
<h1 class="display-3">
<canvas id="logo-canvas" class="gl-logo"></canvas>
<img id="logo-fallback" alt="xemu logo" src="/logo-green-jumbotron.svg" style="height: 1.03em;">
</h1>
<h4 class="card-subtitle mb-2">Original Xbox Emulator</h4>
<p>
A free and open-source application that emulates the original Microsoft
Xbox game console, enabling people to play their original Xbox games on
Windows, macOS, and Linux systems.
</p>
<div class="container pl-2 p-0">
<div class="row">
<div class="column text-center text-md-left p-2">
<a class="btn btn-green btn-lg" role="button" id="download-gen" href="/docs/download">
<i class="fa fa-laptop button-icon" aria-hidden="true"></i>View Download Options
</a>
<a class="btn btn-green btn-lg" role="button" id="download-win" style="display: none" href="https://github.com/xemu-project/xemu/releases/latest/download/xemu-win-release.zip">
<i class="fab fa-windows button-icon" aria-hidden="true"></i>Download for Windows
</a>
<a class="btn btn-green btn-lg" role="button" id="download-mac" style="display: none" href="https://github.com/xemu-project/xemu/releases/latest/download/xemu-macos-universal-release.zip">
<i class="fab fa-apple button-icon" aria-hidden="true"></i>Download for macOS
</a>
<a class="btn btn-green btn-lg" role="button" id="download-linux" style="display: none" href="/docs/download/#download-for-linux">
<i class="fab fa-linux button-icon" aria-hidden="true"></i>Download for Linux
</a>
</div>
<div class="column p-2">
<strong>Latest release:</strong> v{{xemu_build_version}} ({{xemu_build_date.strftime('%b %-d, %Y')}})
<br />
<a href="/docs/download" id="download-options" style="display: none">Alternative download options</a>
<div class="container pl-2 p-0">
<div class="row">
<div class="column text-center text-md-left p-2">
<a class="btn btn-green btn-lg" role="button" id="download-gen" href="/docs/download">
<i class="fa fa-laptop button-icon" aria-hidden="true"></i>View Download Options
</a>
<a class="btn btn-green btn-lg" role="button" id="download-win" style="display: none" href="https://github.com/xemu-project/xemu/releases/latest/download/xemu-win-release.zip">
<i class="fab fa-windows button-icon" aria-hidden="true"></i>Download for Windows
</a>
<a class="btn btn-green btn-lg" role="button" id="download-mac" style="display: none" href="https://github.com/xemu-project/xemu/releases/latest/download/xemu-macos-universal-release.zip">
<i class="fab fa-apple button-icon" aria-hidden="true"></i>Download for macOS
</a>
<a class="btn btn-green btn-lg" role="button" id="download-linux" style="display: none" href="/docs/download/#download-for-linux">
<i class="fab fa-linux button-icon" aria-hidden="true"></i>Download for Linux
</a>
</div>
<div class="column p-2">
<strong>Latest release:</strong> v{{xemu_build_version}} ({{xemu_build_date.strftime('%b %-d, %Y')}})
<br />
<a href="/docs/download" id="download-options" style="display: none">Alternative download options</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
@ -159,63 +188,78 @@ h2 {
{% block content %}
<h2 class="mb-4 text-center">Features</h2>
<div class="row">
<div class="col-md-4">
<h4><i class="fab fa-github feature-icon"></i> Open Source</h4>
<p>The source code for xemu is publicly available. Users are invited to help improve the project!</p>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fab fa-github feature-icon"></i>Open Source</h4>
<p>The source code for xemu is publicly available. Users are invited to help improve the project!</p>
</div>
</div>
<div class="col-md-4">
<h4><i class="fas fa-users feature-icon"></i> Cross Platform</h4>
<p>xemu runs natively on Windows, macOS, and Linux platforms. Pre-compiled binaries are available for Windows, macOS, and Ubuntu.</p>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-users feature-icon"></i>Cross Platform</h4>
<p>xemu runs natively on Windows, macOS, and Linux platforms. Pre-compiled binaries are available for Windows, macOS, and Ubuntu.</p>
</div>
</div>
<div class="col-md-4">
<h4><i class="fas fa-people-arrows feature-icon"></i> System Link</h4>
<p>Networking is supported out of the box. Connect to other instances of xemu and even real Xboxes, locally or over the Internet.</p>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-people-arrows feature-icon"></i>Networking</h4>
<p>Networking is supported out of the box. Connect to other instances of xemu and even real Xboxes, locally or over the Internet.</p>
</div>
</div>
<div class="col-md-4">
<h4><i class="fas fa-gamepad feature-icon"></i> Gamepad Support</h4>
<p>Built on SDL2, xemu supports virtually all gamepads. Connect up to 4 controllers at any time, just like a real Xbox.</p>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-gamepad feature-icon"></i>Gamepad Support</h4>
<p>Built on SDL2, xemu supports virtually all gamepads. Connect up to 4 controllers at any time, just like a real Xbox.</p>
</div>
</div>
<div class="col-md-4">
<h4><i class="fas fa-history feature-icon"></i> Snapshots (Save States)</h4>
<p>No need to wait for game checkpoints. xemu supports saving the current state and loading it back up at any time.</p>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-history feature-icon"></i>Snapshots (Save States)</h4>
<p>No need to wait for game checkpoints. xemu supports saving the current state and loading it back up at any time.</p>
</div>
</div>
<div class="col-md-4">
<h4><i class="fas fa-expand-alt feature-icon"></i> Render Scaling</h4>
<p>Breathe new life into your original Xbox games by easily scaling up the resolution that games render at.</p>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-expand-alt feature-icon"></i>Render Scaling</h4>
<p>Breathe new life into your original Xbox games by easily scaling up the resolution that games render at.</p>
</div>
</div>
</div>
<h2 id="screenshots" class="mb-4 text-center">Screenshots</h2>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="screenshot-window">
<img src="linux_title_bar_dark_2x.png" class="screenshot-titlebar" />
<div id="screenshot-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/screenshots/0.png" class="img-fluid lazy col" />
<img src="/screenshots/0.png" class="img-fluid lazy" />
</div>
<div class="carousel-item">
<img src="/screenshots/1.png" class="img-fluid lazy col" />
<img src="/screenshots/1.png" class="img-fluid lazy" />
</div>
<div class="carousel-item">
<img src="/screenshots/2.png" class="img-fluid lazy col" />
<img src="/screenshots/2.png" class="img-fluid lazy" />
</div>
<div class="carousel-item">
<img src="/screenshots/3.png" class="img-fluid lazy col" />
<img src="/screenshots/3.png" class="img-fluid lazy" />
</div>
<div class="carousel-item">
<img src="/screenshots/4.png" class="img-fluid lazy col" />
<img src="/screenshots/4.png" class="img-fluid lazy" />
</div>
<div class="carousel-item">
<img src="/screenshots/5.png" class="img-fluid lazy col" />
<img src="/screenshots/5.png" class="img-fluid lazy" />
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<a class="carousel-control-prev" href="#screenshot-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<a class="carousel-control-next" href="#screenshot-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<h2 id="compatibility" class="mb-4 text-center">Compatibility</h2>
<p>Title compatibility status is provided by volunteer reporters in the community, as the reporter experienced the title in the current version of xemu on their computer at time of reporting. As the project evolves, reports may need to be updated. You are invited to help improve the project by submitting an updated compatibility report. Join the Discord server to learn how to contribute!</p>

28
theme.scss
View File

@ -55,7 +55,7 @@ $body-color: $gray-400;
// Links
$link-color: $white !default;
$link-hover-color: $white !default;
$link-hover-color: #8dc103 !default;
// Fonts
@ -115,7 +115,7 @@ $nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-colo
/*$navbar-padding-y: 1rem !default;*/
$navbar-dark-color: $link-color !default;
$navbar-dark-hover-color: $white !default;
$navbar-dark-hover-color: $link-hover-color !default;
$navbar-light-color: rgba($gray-900, .7) !default;
$navbar-light-hover-color: $gray-900 !default;
@ -437,7 +437,25 @@ $pre-color: inherit !default;
}
.btn-green {
@include button-outline-variant(#82b540, $gray-900, #8dc103, #8dc103);
@include button-variant(#8dc103, $gray-900, #8dc103, #8dc103);
color: rgba(0, 0, 0, 0.9);
}
.btn-green:hover {
color: rgba(0, 0, 0, 0.9);
}
.btn-green {
background: linear-gradient(128deg, rgba(2,0,36,0) 0%, rgba(134, 186, 64, 0.4) 150%);
color: #86ba41;
border: 1px #86ba41 solid;
}
.btn-green:hover {
background-color: #5f7200;
color: #091100;
box-shadow: 0 0 25px 5px #a6c102 inset;
border: 1px #93ac00 solid;
}
.nav-social {
@ -450,3 +468,7 @@ $pre-color: inherit !default;
background-color: rgba(0, 0, 0, 0.6) !important;
transition: background-color 200ms linear;
}
h1, h2, h3, h4, h5 {
font-family: "Chakra Petch", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}