Chiebot-Mirror
/
ultralytics
mirror of https://github.com/ultralytics/ultralytics.git
9
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Muhammad Rizwan Munawar <muhammadrizwanmunawar123@gmail.com>
pull/16337/head^2
Sergiu Waxmann 2 months ago committed by GitHub
parent 2173c37238
commit e2e6eb4fb0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 122 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      docs/overrides/main.html
  2. 109
      docs/overrides/stylesheets/style.css

50
docs/overrides/main.html
Unescape View File

@ -1,30 +1,38 @@
<!--Ultralytics YOLO 🚀, AGPL-3.0 license-->
{% extends "base.html" %}
{% block announce %}
<a
href="https://github.com/ultralytics/ultralytics/releases/tag/v8.2.0"
target="_blank"
class="banner-wrapper"
>
<img
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66cb78d08408c438e54a6f2f_yolov82_release.avif"
loading="lazy"
alt="Ultralytics YOLOv8.2 Release"
class="banner-content desktop"
/>
{% 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/66cb7a122db51139d6c0b4a8_yolov82_release_mobile.avif"
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a87cfc78245ffa51d6f0_w_yv24.svg"
loading="lazy"
alt="Ultralytics YOLOv8.2 Release Mobile"
class="banner-content mobile"
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/66cb779fc2ff285f3efceea1_arrow_effects.avif"
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a87cdfbd25e409560ed8_l_yv24.svg"
loading="lazy"
alt="Ultralytics YOLOv8.2 Release Arrow"
class="banner-arrow"
width="20"
height="20"
alt="YOLO Vision 24"
/>
</a>
<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')"
>
Register now
</button>
</div>
</div>
</div>
{% endblock %}

109
docs/overrides/stylesheets/style.css
Unescape View File

@ -51,7 +51,7 @@ div.highlight {
/* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */
.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-position: center;
}
@ -61,44 +61,109 @@ div.highlight {
margin-bottom: 0 !important;
}
.banner-wrapper {
.banner-wrapper,
.banner-wrapper > .banner-content-wrapper,
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.banner-wrapper,
.banner-wrapper > .banner-content-wrapper {
flex-direction: column;
}
.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;
}
height: 64px;
.banner-wrapper > .banner-content-wrapper > p,
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p {
margin: 0;
}
overflow: hidden;
.banner-wrapper > .banner-content-wrapper > p {
font-size: 20px;
font-weight: 500;
}
.banner-content {
max-height: 64px;
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p,
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
font-size: 14px;
}
.banner-content.desktop {
display: none;
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p {
color: #f3f3f3;
}
.banner-arrow {
display: none;
max-height: 80px;
margin-left: -16px;
transition: transform ease-in-out 0.5s;
.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:hover > .banner-arrow {
transform: translateX(8px);
.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-content.mobile {
display: none;
.banner-wrapper,
.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) -------------------------------------------------------------- */

Write Preview
Loading…
Cancel
Save