Update Antora UI template (#266)

antora-ui/src/css/antora-ui.css

@@ -0,0 +1,270 @@
+/* Antora UI Default Styles */
+
+/* Global Styles */
+
+html.is-clipped--nav {
+  overflow-y: visible;
+}
+
+.body {
+  max-width: 80rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media screen and (min-width: 769px) {
+  .body {
+    display: flex;
+    gap: 1rem;
+    padding: 0.75rem;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .body {
+    display: flex;
+    padding: 1rem;
+  }
+}
+
+body.article {
+  background-color: #d1d5db;
+}
+
+.max-width-reset {
+  max-width: none;
+}
+
+/* Document Styles */
+main.article {
+  min-width: 0;
+}
+
+html.is-clipped--nav main.article {
+  display: none;
+  visibility: hidden;
+}
+
+html:not(.is-clipped--nav) main.article {
+  display: block;
+  visibility: visible;
+}
+
+.doc {
+  padding: 1rem 1rem 4rem;
+}
+
+@media screen and (min-width: 1024px) {
+  .doc {
+    margin: 0;
+  }
+
+  .content {
+    gap: 1rem;
+  }
+}
+
+/* Card Styles */
+.card {
+  background-color: #fff;
+}
+
+@media screen and (min-width: 769px) {
+  .card {
+    border-radius: 1rem;
+    padding: 1rem;
+    height: 100%;
+  }
+}
+
+/* Navigation Styles */
+aside.nav {
+  background-color: #fff;
+  height: auto;
+}
+
+html.is-clipped--nav .nav-close {
+  display: block;
+  visibility: visible;
+}
+
+.nav {
+  position: initial;
+  box-shadow: none;
+}
+
+.nav .panels {
+  height: 100%;
+}
+
+.nav-list {
+  margin-left: 0;
+}
+
+.nav-list > .nav-list {
+  margin-left: 1rem;
+}
+
+.nav-list li {
+  padding-top: 0.45rem;
+}
+
+.nav-menu {
+  padding: 0;
+}
+
+.nav-panel-menu {
+  overflow-y: auto;
+}
+
+/* Navigation Toggle Styles */
+.nav-toggle.is-active ~ .spirit-nav {
+  display: none;
+  visibility: hidden;
+}
+
+@media screen and (min-width: 769px) {
+  .nav-toggle {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .nav-toggle.is-active ~ .spirit-nav {
+    display: block;
+    visibility: visible;
+  }
+}
+
+.nav-toggle {
+  background-position-x: 0;
+  background-position-y: 50%;
+}
+
+.nav-close {
+  display: none;
+  background: url(../img/back.svg) 0% 40% no-repeat;
+  background-size: 41.5%;
+  border: none;
+  outline: none;
+  line-height: inherit;
+  padding: 0;
+  height: var(--toolbar-height);
+  width: var(--toolbar-height);
+  margin-right: -0.25rem;
+}
+
+.nav-container.is-active {
+  position: static;
+  padding: 1rem;
+}
+
+@media screen and (min-width: 769px) {
+  .nav-container {
+    position: static;
+    visibility: visible;
+    flex: 0 0 20%;
+    min-width: 14rem;
+  }
+
+  .nav-container.is-active {
+    padding-left: 1rem;
+    padding-top: 1rem;
+  }
+}
+
+.nav-menu a,
+.nav-link,
+.nav-text {
+  color: #424242;
+}
+
+/* Toolbar Styles */
+.toolbar {
+  background-color: #fff;
+  box-shadow: unset;
+  height: 2rem;
+  top: 0;
+  justify-content: space-between;
+}
+
+@media screen and (min-width: 769px) {
+  .toolbar {
+    justify-content: flex-end;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .toolbar {
+    align-items: center;
+  }
+}
+
+.toolbar .breadcrumbs ul,
+.breadcrumbs {
+  padding-left: 0;
+}
+
+/* Breadcrumbs Styles */
+.breadcrumbs a {
+  color: #424242;
+  font-weight: 500;
+}
+
+.breadcrumbs li::after {
+  padding: 0 0.25rem;
+}
+
+@media screen and (min-width: 769px) {
+  .breadcrumbs {
+    display: block;
+    visibility: visible;
+  }
+}
+
+/* Auxiliary Styles */
+.edit-this-page {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2rem;
+  padding: 0;
+}
+
+/* Top Navigation Styles */
+.spirit-nav {
+  padding-top: 0;
+}
+
+.spirit-nav a {
+  width: 1.5rem;
+}
+
+/* Table of Contents Styles */
+.toc.sidebar .toc-menu {
+  top: 0;
+}
+
+.toc.sidebar {
+  height: fit-content;
+}
+
+.toc.sidebar .toc-menu h3 {
+  height: auto;
+  justify-content: flex-start;
+  color: #424242;
+}
+
+.toc.embedded {
+  padding-top: 0.5rem;
+}
+
+/* Pagination Styles */
+nav.pagination {
+  padding: 1rem;
+}
+
+nav.pagination a::after,
+nav.pagination a::before {
+  width: 0.75rem;
+}

antora-ui/src/css/site.css

@@ -18,3 +18,4 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+@import "antora-ui.css";