HongChuang/ultralytics-ascend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Docs banner for https://ultralytics.com/yolo-vision (#16338)

Browse source 
Co-authored-by: Muhammad Rizwan Munawar <muhammadrizwanmunawar123@gmail.com>
This commit is contained in:
Sergiu Waxmann 2024-09-18 14:42:25 +03:00 • committed by GitHub
parent 2173c37238
commit e2e6eb4fb0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 124 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

62
docs/overrides/main.html
View file

@ -1,30 +1,38 @@
<!--Ultralytics YOLO 🚀, AGPL-3.0 license--> <!--Ultralytics YOLO 🚀, AGPL-3.0 license-->
{% extends "base.html" %} {% extends "base.html" %} {% block announce %}
<div class="banner-wrapper">
{% block announce %} <div class="banner-content-wrapper">
<a <p>YOLO Vision 2024 is here!</p>
href="https://github.com/ultralytics/ultralytics/releases/tag/v8.2.0" <div class="banner-info-wrapper">
target="_blank" <img
class="banner-wrapper" src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a87cfc78245ffa51d6f0_w_yv24.svg"
> loading="lazy"
<img width="20"
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66cb78d08408c438e54a6f2f_yolov82_release.avif" height="20"
loading="lazy" alt="YOLO Vision 24"
alt="Ultralytics YOLOv8.2 Release" />
class="banner-content desktop" <p>September 27, 2024</p>
/> </div>
<img <div class="banner-info-wrapper">
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66cb7a122db51139d6c0b4a8_yolov82_release_mobile.avif" <img
loading="lazy" src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a87cdfbd25e409560ed8_l_yv24.svg"
alt="Ultralytics YOLOv8.2 Release Mobile" loading="lazy"
class="banner-content mobile" width="20"
/> height="20"
<img alt="YOLO Vision 24"
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66cb779fc2ff285f3efceea1_arrow_effects.avif" />
loading="lazy" <p>Free hybrid event</p>
alt="Ultralytics YOLOv8.2 Release Arrow" </div>
class="banner-arrow" </div>
/> <div class="banner-button-wrapper">
</a> <div class="banner-button-wrapper large">
<button
onclick="window.open('https://www.ultralytics.com/events/yolovision', '_blank')"
>
Register now
</button>
</div>
</div>
</div>
{% endblock %} {% endblock %}

113
docs/overrides/stylesheets/style.css
View file

@ -51,7 +51,7 @@ div.highlight {
/* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */ /* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */
.md-banner { .md-banner {
background-image: url(https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/6627a0cab2de939ad35939ed_banner_82.webp); background-image: url(https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a211bf6831d112fd6ce3_banner_yv24.avif);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
@ -61,44 +61,109 @@ div.highlight {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.banner-wrapper { .banner-wrapper,
.banner-wrapper > .banner-content-wrapper,
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
height: 64px;
overflow: hidden;
} }
.banner-content { .banner-wrapper,
max-height: 64px; .banner-wrapper > .banner-content-wrapper {
flex-direction: column;
} }
.banner-content.desktop { .banner-wrapper {
display: none; justify-content: space-between;
gap: 16px;
padding: 16px;
} }
.banner-arrow { .banner-wrapper > .banner-content-wrapper,
display: none; .banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
max-height: 80px; justify-content: center;
margin-left: -16px;
transition: transform ease-in-out 0.5s;
} }
.banner-wrapper:hover > .banner-arrow { .banner-wrapper > .banner-content-wrapper {
transform: translateX(8px); 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 {
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) { @media screen and (min-width: 768px) {
.banner-content.mobile { .banner-wrapper,
display: none; .banner-wrapper > .banner-content-wrapper {
flex-direction: row;
} }
.banner-content.desktop {
display: revert; .banner-wrapper {
gap: 32px;
padding: 12px;
} }
.banner-arrow {
display: revert; .banner-wrapper > .banner-content-wrapper {
gap: 24px;
margin: 0 auto;
} }
} }
/* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */ /* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */