mirror of
https://github.com/xemu-project/xemu-website.git
synced 2024-11-23 03:19:44 +00:00
Tweaks
This commit is contained in:
Matt Borgerson
parent
282c02446a
commit
2a6b2daf9d
@ -85,17 +85,16 @@
|
||||
|
||||
<main role="main">
|
||||
{% block jumbotron %}{% endblock %}
|
||||
<div class="container">
|
||||
<div class="col-lg-10 mx-auto mt-5">
|
||||
{% block content %}{% endblock %}
|
||||
<footer class="my-5 text-muted text-center text-small">
|
||||
{% block content %}{% endblock %}
|
||||
<footer>
|
||||
<div class="container text-muted">
|
||||
{% block append_footer %}{% endblock %}
|
||||
<p><strong>Disclaimer:</strong>
|
||||
All product names, logos, and brands are property of their respective owners. All company, product and service names and/or images used in this website are for identification purposes only.
|
||||
</p>
|
||||
<p>© 2020-2023 xemu Project</p>
|
||||
</footer>
|
||||
<p>© 2023 xemu Project</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
{% block append_foot %}{% endblock %}
|
||||
|
||||
@ -3,88 +3,16 @@
|
||||
{% extends "template_base.html" %}
|
||||
{% block append_head %}
|
||||
<style type="text/css">
|
||||
/* https://www.gungorbudak.com/blog/2018/12/12/bootstrap-4-search-box-with-search-icon/ */
|
||||
.has-search .form-control {
|
||||
padding-left: 2.375rem;
|
||||
}
|
||||
.has-search .form-control-feedback {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 2.375rem;
|
||||
height: 2.375rem;
|
||||
line-height: 2.375rem;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
{% for key in title_status_colors %}
|
||||
.text-color-{{ key }} {
|
||||
color: {{ title_status_colors[key] }};
|
||||
}
|
||||
.fill-color-{{ key }} {
|
||||
background-color: {{ title_status_colors[key] }};
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
{% endfor %}
|
||||
|
||||
.title-card a {
|
||||
color: #fff;
|
||||
font-weight: bolder;
|
||||
text-decoration: none;
|
||||
}
|
||||
.title-card-container {
|
||||
width: 10rem;
|
||||
background-color: #373737;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.title-card-image-container {
|
||||
background-image: url('cover_front_default.png');
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 14.18rem;
|
||||
}
|
||||
.title-card-image-container img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Account for the fixed header (which otherwise would occlude anchor targets) */
|
||||
/* Via https://stackoverflow.com/a/28824157 */
|
||||
:target::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 60px; /* fixed header height*/
|
||||
margin: -60px 0 0; /* negative fixed header height */
|
||||
height: 5rem; /* fixed header height*/
|
||||
margin: -5rem 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 {
|
||||
width: 3.5rem;
|
||||
margin: 0;
|
||||
margin-left: -3.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
display: inline-block;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
#logo-canvas {
|
||||
display: block;
|
||||
@ -119,19 +47,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1em;
|
||||
.button-icon {
|
||||
display: inline-block;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
.screenshot-window {
|
||||
box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.6);
|
||||
border-radius: 10px;
|
||||
max-width: 642px;
|
||||
margin: auto;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
.screenshot-titlebar {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#screenshot-carousel {
|
||||
@ -139,6 +69,74 @@ h2 {
|
||||
border-top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
min-height: 100%;
|
||||
padding: 1rem 1rem 1rem 4.5rem;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 4.5rem;
|
||||
margin: 0 0 0 -4.5rem;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
{% for key in title_status_colors %}
|
||||
.text-color-{{ key }} {
|
||||
color: {{ title_status_colors[key] }};
|
||||
}
|
||||
.fill-color-{{ key }} {
|
||||
background-color: {{ title_status_colors[key] }};
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
{% endfor %}
|
||||
|
||||
.title-card a {
|
||||
color: #fff;
|
||||
font-weight: bolder;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title-card-container {
|
||||
width: 10rem;
|
||||
background-color: #373737;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title-card-image-container {
|
||||
background-image: url('cover_front_default.png');
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 14.18rem;
|
||||
}
|
||||
|
||||
.title-card-image-container img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* https://www.gungorbudak.com/blog/2018/12/12/bootstrap-4-search-box-with-search-icon/ */
|
||||
.has-search .form-control {
|
||||
padding-left: 2.375rem;
|
||||
}
|
||||
.has-search .form-control-feedback {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 2.375rem;
|
||||
height: 2.375rem;
|
||||
line-height: 2.375rem;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
color: #aaa;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@ -156,15 +154,14 @@ h2 {
|
||||
<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>
|
||||
<p class="lead">
|
||||
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">
|
||||
<div class="d-flex flex-wrap m" style="column-gap: 1em;">
|
||||
<div>
|
||||
<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>
|
||||
@ -178,8 +175,8 @@ h2 {
|
||||
<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')}})
|
||||
<div class="text-nowrap">
|
||||
Version {{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>
|
||||
@ -187,33 +184,21 @@ h2 {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<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="body-alt-section">
|
||||
<div class="container">
|
||||
<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" />
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/screenshots/1.png" class="img-fluid lazy" />
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/screenshots/2.png" class="img-fluid lazy" />
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/screenshots/3.png" class="img-fluid lazy" />
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/screenshots/4.png" class="img-fluid lazy" />
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/screenshots/5.png" class="img-fluid lazy" />
|
||||
{% for i in range(6) %}
|
||||
<div class="carousel-item {% if i<1 %}active{% endif %}">
|
||||
<img src="/screenshots/{{ i }}.png" class="img-fluid lazy" />
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#screenshot-carousel" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
@ -223,11 +208,13 @@ h2 {
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mb-4 text-center">Features</h2>
|
||||
<div class="row">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 p-1">
|
||||
<div class="feature-card">
|
||||
<h4><i class="fab fa-github feature-icon"></i>Open Source</h4>
|
||||
@ -276,16 +263,21 @@ h2 {
|
||||
<p>xemu has a thriving online community of original Xbox fans. Set up multiplayer matches, get help running xemu, and more by joining our community on <a href="https://discord.gg/ayyjsuM">Discord</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<div id="title_stats" style="height: 120px"></div>
|
||||
<div class="form-group has-search">
|
||||
<div class="body-alt-section">
|
||||
<div class="container">
|
||||
<h2 id="compatibility" class="mb-4 text-center">Compatibility</h2>
|
||||
<div class="col-lg-10 mx-auto mt-2">
|
||||
<p>
|
||||
<b>Note:</b> 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>
|
||||
<div id="title_stats" style="height: 120px"></div>
|
||||
<div class="form-group has-search">
|
||||
<span class="fa fa-search form-control-feedback"></span>
|
||||
<input class="form-control" type="text" placeholder="Search" id="filter">
|
||||
</div>
|
||||
<div class="container mt-2">
|
||||
</div>
|
||||
<div class="row" id="results">
|
||||
{% for title in titles %}
|
||||
<div class="col px-1 mb-4 title-card" data-title-name="{{ title.title_name }}" data-title-status="{{ title.status }}">
|
||||
@ -306,6 +298,8 @@ h2 {
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@ -23,6 +23,9 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="body-alt-section">
|
||||
<div class="container">
|
||||
|
||||
<!-- Game Identification -->
|
||||
<div class="py-5 row flex-md-nowrap text-center text-md-left align-items-center justify-content-center justify-content-md-start">
|
||||
{% if title.xtimage_url %}
|
||||
@ -143,9 +146,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<p class="text-muted mt-5"><b>Note:</b> 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>
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block append_footer %}
|
||||
<p class="text-muted">
|
||||
<b>Note:</b> 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>
|
||||
{% endblock %}
|
||||
|
||||
{% block append_foot %}
|
||||
|
||||
19
theme.scss
19
theme.scss
@ -49,9 +49,13 @@ $yiq-contrasted-threshold: 175 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: $gray-900 !default;
|
||||
$body-bg: #181818 !default;
|
||||
$body-color: $gray-400;
|
||||
|
||||
.body-alt-section {
|
||||
background-color: $gray-900;
|
||||
}
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $white !default;
|
||||
@ -63,10 +67,6 @@ $font-family-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Sego
|
||||
|
||||
$font-size-base: 1.025rem !default;
|
||||
|
||||
$h1-font-size: 3rem !default;
|
||||
$h2-font-size: 2.5rem !default;
|
||||
$h3-font-size: 2rem !default;
|
||||
|
||||
$text-muted: $gray-500 !default;
|
||||
|
||||
// Tables
|
||||
@ -463,4 +463,13 @@ $pre-color: inherit !default;
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: "Chakra Petch", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user