Docs: Update Banner (#19643)

This commit is contained in:
Sergiu Waxmann 2025-03-11 17:21:46 +02:00 committed by GitHub
parent 1503aab031
commit 5a26107620
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 95 deletions

View File

@ -2,37 +2,17 @@
{% extends "base.html" %} {% block announce %}
<div class="banner-wrapper">
<div class="banner-content-wrapper">
<p>YOLO Vision 2024 is here!</p>
<div class="banner-info-wrapper">
<img
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a87cfc78245ffa51d6f0_w_yv24.svg"
loading="lazy"
width="20"
height="20"
alt="YOLO Vision 24"
/>
<p>September 27, 2024</p>
</div>
<div class="banner-info-wrapper">
<img
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a87cdfbd25e409560ed8_l_yv24.svg"
loading="lazy"
width="20"
height="20"
alt="YOLO Vision 24"
/>
<p>Free hybrid event</p>
</div>
</div>
<div class="banner-button-wrapper">
<div class="banner-button-wrapper large">
<button
onclick="window.open('https://www.ultralytics.com/events/yolovision', '_blank')"
>
Join now
</button>
</div>
<div
class="banner-content-wrapper"
onclick="window.open('https://docs.ultralytics.com/models/yolo11')"
>
<p>Introducing</p>
<img
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/67d044caa316aa50fba40a08_Ultralytics_YOLO11_Logotype_Reverse.svg"
loading="lazy"
height="40"
alt="Ultralytics YOLO11"
/>
</div>
</div>
{% endblock %}

View File

@ -49,9 +49,9 @@ div.highlight {
max-height: 75vh;
}
/* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */
/* Banner ----------------------------------------------------------------------------------------------------------- */
.md-banner {
background-image: url(https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a211bf6831d112fd6ce3_banner_yv24.avif);
background-image: url(https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/67d043abf9a0da7eef6c046a_banner_yolo11.webp);
background-size: cover;
background-position: center;
}
@ -62,10 +62,10 @@ div.highlight {
}
.banner-wrapper,
.banner-wrapper > .banner-content-wrapper,
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
.banner-wrapper > .banner-content-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.banner-wrapper,
@ -74,75 +74,19 @@ div.highlight {
}
.banner-wrapper {
justify-content: space-between;
gap: 16px;
padding: 16px;
}
.banner-wrapper > .banner-content-wrapper,
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
justify-content: center;
}
.banner-wrapper > .banner-content-wrapper {
gap: 8px;
}
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
gap: 4px;
}
.banner-wrapper > .banner-content-wrapper > p,
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p {
margin: 0;
}
.banner-wrapper > .banner-content-wrapper > p {
margin: 0;
font-size: 20px;
font-weight: 500;
}
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p,
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
font-size: 14px;
}
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p {
color: #f3f3f3;
}
.banner-wrapper > .banner-button-wrapper,
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper,
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
border-radius: 100px;
}
.banner-wrapper > .banner-button-wrapper,
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper {
padding: 2px;
background-color: rgba(222, 255, 56, 0.2);
}
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper.large {
padding: 4px;
}
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
cursor: pointer;
min-width: 132px;
padding: 10px;
font-weight: 500;
color: #111f68;
background-color: rgb(222, 255, 56);
}
.banner-wrapper
> .banner-button-wrapper
> .banner-button-wrapper
> button:hover {
background-color: rgba(222, 255, 56, 0.85);
}
@media screen and (min-width: 768px) {
.banner-wrapper,
.banner-wrapper > .banner-content-wrapper {
@ -150,16 +94,15 @@ div.highlight {
}
.banner-wrapper {
gap: 32px;
padding: 12px;
}
.banner-wrapper > .banner-content-wrapper {
gap: 24px;
gap: 16px;
margin: 0 auto;
}
}
/* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */
/* Banner ----------------------------------------------------------------------------------------------------------- */
/* MkDocs Ultralytics Plugin ---------------------------------------------------------------------------------------- */
.git-info,