home page updated

This commit is contained in:
Ömercan Kömür 2024-04-18 17:39:07 +00:00
parent e19f1ec64a
commit 05c3290e53
2 changed files with 188 additions and 23 deletions

View file

@ -1,15 +1,22 @@
<!-- Custom HTML site displayed as the Home chapter -->
{% extends "main.html" %} {% extends "main.html" %}
<!-- Render hero under tabs -->
{% block tabs %} {% block tabs %}
{{ super() }} {{ super() }}
<style>
<!-- Additional styles for landing page --> .md-main {
<style> flex-grow: 0
}
.md-main__inner {
display: flex;
height: 100%;
}
.tx-container { .tx-container {
padding-top: .0rem; padding-top: .0rem;
background: linear-gradient(#58598a, #8a8bad); background: linear-gradient(to bottom, var(--md-primary-fg-color), rgb(122, 86, 194) 99%,#fff 99%)
} }
.tx-hero { .tx-hero {
@ -30,8 +37,8 @@
} }
.tx-hero__image{ .tx-hero__image{
max-width: auto; width:17rem;
height: auto; height:17rem;
order:1; order:1;
padding-right: 2.5rem; padding-right: 2.5rem;
} }
@ -54,10 +61,164 @@
color: var(--md-default-bg-color); color: var(--md-default-bg-color);
border-color: var(--md-accent-fg-color) border-color: var(--md-accent-fg-color)
} }
</style>
<!-- Hero for landing page --> .feature-item h2 svg {
<section class="tx-container"> height: 30px;
float: left;
margin-right: 10px;
transform: translateY(10%);
}
.top-hr {
margin-top: 42px;
}
.feature-item {
font-family: 'Lato', sans-serif;
font-weight: 300;
box-sizing: border-box;
padding: 0 15px;
word-break: break-word
}
.feature-item h2 {
color: #333;
font-weight: 300;
font-size: 25px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: normal;
margin-top: 20px;
margin-bottom: 10px;
font-family: inherit;
}
.feature-item p {
font-size: 16px;
line-height: 1.8em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
color: #111;
margin: 0 0 10px;
display: block;
}
@media screen and (max-width:30em) {
.tx-hero h1 {
font-size: 1.4rem
}
}
@media screen and (min-width:60em) {
.md-sidebar--secondary {
display: none
}
.tx-hero {
display: flex;
align-items: center;
justify-content: center;
}
.tx-hero__content {
max-width: 22rem;
margin-top: 3.5rem;
margin-bottom: 3.5rem;
margin-left: 1.0rem;
margin-right: 4.0rem;
align-items: center;
}
}
@media screen and (min-width:76.25em) {
.md-sidebar--primary {
display: none
}
.top-hr {
width: 100%;
display: flex;
max-width: 61rem;
margin-right: auto;
margin-left: auto;
padding: 0 .2rem;
}
.bottom-hr {
margin-top: 10px;
width: 100%;
display: flex;
max-width: 61rem;
margin-right: auto;
margin-left: auto;
padding: 0 .2rem;
}
.feature-item {
flex: 1;
min-width: 0;
}
.feature-item:hover {
background-color: #526cfe47;
border-radius: 3px;
}
}
.hr {
border-bottom: 1px solid #eee;
width: 100%;
margin: 20px 0;
}
.text-center {
text-align: center;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
font-family: 'Lato', sans-serif;
font-size: 23px;
font-weight: 300;
padding-bottom: 10px;
}
.logos {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
margin: 0 auto;
}
.logos img {
flex: 1 1 auto;
padding: 25px;
max-height: 130px;
vertical-align: middle;
}
.hr-logos {
margin-top: 0;
margin-bottom: 30px;
}
.md-footer-meta__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 1.0rem;
}
.md-footer-social {
padding-top: 20px;
}
</style>
<!-- Main site Entry button descriptions -->
<section class="tx-container">
<div class="md-grid md-typeset"> <div class="md-grid md-typeset">
<div class="tx-hero"> <div class="tx-hero">
<div class="tx-hero__image"> <div class="tx-hero__image">
@ -69,20 +230,24 @@
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary"> <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary">
Get started Get started
</a> </a>
<a href="https://www.retroarch.com/index.php?page=platforms" class="md-button"> <a href="https://www.retroarch.com/index.php?page=platforms" title="{{ lang.t('source.link.title') }}" class="md-button">
Download Download
</a>
<a href="https://docs.libretro.com/development/libretro-overview/" class="md-button">
Developer
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Main site box descriptions -->
<div class="top-hr">
<div class="feature-item">
<p>Among other things, it enables you to run classic games on a wide range of computers and consoles through its slick graphical interface. Settings are also unified so configuration is done once and for all.
In addition to this, you are able to run original game discs (CDs) from RetroArch.</p>
</div>
</div>
{% endblock %} {% endblock %}
<!-- Content -->
{% block content %}{% endblock %} {% block content %}{% endblock %}
{% block footer %}{% endblock %}
<!-- Application footer -->
{% block footer %}{% endblock %}

View file

@ -519,8 +519,8 @@ markdown_extensions:
mode: accept mode: accept
- pymdownx.details - pymdownx.details
- pymdownx.emoji: - pymdownx.emoji:
emoji_index: !!python/name:materialx.emoji.twemoji emoji_index: !!python/name:material.extensions.emoji.twemoji
emoji_generator: !!python/name:materialx.emoji.to_svg emoji_generator: !!python/name:material.extensions.emoji.to_svg
- pymdownx.highlight - pymdownx.highlight
# linenums_style: pymdownx-inline # linenums_style: pymdownx-inline
- pymdownx.inlinehilite - pymdownx.inlinehilite