Update Docs CSS (#15062)

Signed-off-by: Glenn Jocher <glenn.jocher@ultralytics.com>
Co-authored-by: UltralyticsAssistant <web@ultralytics.com>

docs/overrides/stylesheets/style.css

@@ -103,65 +103,99 @@ div.highlight {
 }
 /* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */
 
+/* MkDocs Ultralytics Plugin ---------------------------------------------------------------------------------------- */
+.git-info,
+.dates-container,
+.authors-container,
+.share-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
 
-/* MkDocs Ultralytics Plugin ---------------------------------------------------------------------------------------- */
+.git-info {
-.git-info, .share-buttons {
+  font-size: 0.8em;
-    font-size: 0.8em;
+  color: grey;
-    color: grey;
+  margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-bottom: 10px;
 }
-.dates {
+
-    display: flex;
+.dates-container,
-    align-items: center;
+.authors-container {
-}
+  margin-bottom: 10px;
-.dates span, .author-link, .share-button {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-}
-.dates span {
-    margin-right: 10px;
-}
-.hover-item {
-    transition: all 0.2s ease;
-    filter: grayscale(100%);
-}
-.dates .hover-item {
-    font-size: 1.6em;
-    margin-right: 5px;
-}
-.author-link .hover-item {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    margin-right: 1px;
-}
-.hover-item:hover {
-    transform: scale(1.2);
-    filter: grayscale(0%);
 }
+
+.date-item,
+.author-link,
 .share-button {
-    background-color: #1da1f2;
+  display: flex;
-    color: white;
+  align-items: center;
-    padding: 6px 12px;
+  cursor: pointer;
-    border-radius: 5px;
-    border: none;
-    font-size: 0.95em;
-    margin-left: 5px;
-    transition: all 0.2s ease;
 }
+
+.date-item {
+  margin-right: 10px;
+}
+
+.hover-item {
+  transition: all 0.2s ease;
+  filter: grayscale(100%);
+}
+
+.date-item .hover-item {
+  font-size: 1.6em;
+  margin-right: 5px;
+}
+
+.author-link .hover-item {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 3px;
+}
+
+.hover-item:hover {
+  transform: scale(1.2);
+  filter: grayscale(0%);
+}
+
+.share-buttons {
+  margin-top: 10px;
+}
+
+.share-button {
+  background-color: #1da1f2;
+  color: white;
+  padding: 6px 12px;
+  border-radius: 5px;
+  border: none;
+  font-size: 0.95em;
+  margin: 5px;
+  transition: all 0.2s ease;
+}
+
 .share-button:hover {
-    transform: scale(1.1);
+  transform: scale(1.1);
-    filter: brightness(1.2);
+  filter: brightness(1.2);
 }
+
 .share-button.linkedin {
-    background-color: #0077b5;
+  background-color: #0077b5;
 }
+
 .share-button i {
-    margin-right: 5px;
+  margin-right: 5px;
-    font-size: 1.1em;
+  font-size: 1.1em;
+}
+
+@media (max-width: 1024px) {
+  .git-info {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+  .dates-container,
+  .authors-container {
+    width: 100%;
+  }
 }
 /* MkDocs Ultralytics Plugin ---------------------------------------------------------------------------------------- */

pyproject.toml

@@ -93,7 +93,7 @@ dev = [
     "mkdocstrings[python]",
     "mkdocs-jupyter", # for notebooks
     "mkdocs-redirects", # for 301 redirects
-    "mkdocs-ultralytics-plugin>=0.1.0", # for meta descriptions and images, dates and authors
+    "mkdocs-ultralytics-plugin>=0.1.2", # for meta descriptions and images, dates and authors
 ]
 export = [
     "onnx>=1.12.0", # ONNX export