arrows

jpsca · Jul 2, 2024 · fb55838 · fb55838
1 parent aea9b88
commit fb55838
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 20 deletions.
diff --git a/docs/components/Home.jinja b/docs/components/Home.jinja
@@ -152,7 +152,7 @@
   <section class="engage">
     <div class="wrapper">
       <h3>Ready to get going? Engage!</h3>
-      <a href="./guide/">Get started ⟶</a>
+      <a href="./guide/">Get started <i>🠚</i></a>
       <div class="hint">Millions of people clicked a button in the last week alone!</div>
     </div>
   </section>

diff --git a/docs/content/ui/index.md b/docs/content/ui/index.md
@@ -1,5 +1,5 @@
 ---
-title: JinjaX UI
+title: UI components
 ---
 
 <Header title="UI components" :section="false">

diff --git a/docs/static/docs.css b/docs/static/docs.css
@@ -376,6 +376,9 @@
   }
 
   & a {
+    display: flex-inline;
+    align-items: center;
+    justify-content: center;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 1.25rem;
@@ -400,6 +403,10 @@
     background-image: linear-gradient(to top right, #a3e635, #a3e635);
     color: rgb(0 0 0);
   }
+  & a i {
+    font-style: normal;
+    font-size: 1.2rem;
+  }
 
   & .hint  {
     font-size: 0.75rem;

diff --git a/docs/static/theme.css b/docs/static/theme.css
@@ -1045,7 +1045,7 @@ h6:hover a.headerlink {
   scroll-behavior: smooth;
   overflow: hidden;
 
-  @media (min-height: 640px) {
+  @media (min-width: 1024px and min-height: 768px) {
     & {
       top: 3rem;
       height: calc(100vh - 3rem);
@@ -1208,8 +1208,7 @@ h6:hover a.headerlink {
   & a.next {
     display: flex;
     align-items: center;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
+    padding: 0.75rem 0.25rem;
     text-decoration: none;
     width: 50%;
     border: 1px solid var(--cd-border-color);
@@ -1218,13 +1217,11 @@ h6:hover a.headerlink {
     transition: all 0.2s ease-in;
   }
   & a.prev {
-    padding-right: 0.5rem;
     margin-right: 1.25rem;
     justify-content: flex-start;
     text-align: left;
   }
   & a.next {
-    padding-left: 0.5rem;
     margin-left: auto;
     justify-content: flex-end;
     text-align: right;
@@ -1247,10 +1244,11 @@ h6:hover a.headerlink {
     font-size: 0.9rem;
     line-height: 1.1;
   }
-  & .icon {
-    width: 2rem;
-    font-size: 1.6rem;
-    line-height: 1;
+  & i {
+    opacity: 0.8;
+    font-style: normal;
+    font-size: 1.4rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -1382,13 +1380,9 @@ h6:hover a.headerlink {
       transition-delay: 0.3s;
     }
   }
-  & .light-text {
-    margin-left: 0.5rem;
-    display: none;
-    white-space: nowrap;
-  }
-  & .dark-text {
-    padding: 0 0.5rem 0 0.25rem;
+  & .light-text,
+  & .dark-text  {
+    padding: 0.5rem;
     display: none;
     white-space: nowrap;
   }

diff --git a/docs/theme/PrevNext.jinja b/docs/theme/PrevNext.jinja
@@ -3,7 +3,7 @@
 <nav {{ attrs.render(class="tPrevNext") }}>
   {% if prev.url -%}
   <a href="{{ prev.url }}" class="prev">
-    <i class="icon">keyboard_arrow_left</i>
+    <i>🠘</i>
     <div>
       <div class="section">
         {{ prev.section or "Previous" if prev.section != curr.section else "Previous" }}
@@ -20,7 +20,7 @@
       </div>
       <div class="title">{{ next.title }}</div>
     </div>
-    <i class="icon">keyboard_arrow_right</i>
+    <i>🠚</i>
   </a>
   {%- endif %}
 </nav>