xemu-project/xemu-website
1
0
Fork 0
mirror of https://github.com/xemu-project/xemu-website.git synced 2024-11-26 21:00:33 +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 %}

86
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 %}
@ -148,10 +179,8 @@ h2 {
</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">
<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 class="col-md-4">
</div>
<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 class="col-md-4">
<h4><i class="fas fa-people-arrows feature-icon"></i> System Link</h4>
</div>
<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 class="col-md-4">
</div>
<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 class="col-md-4">
</div>
<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 class="col-md-4">
</div>
<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";
}