navigation

RGB-WG · Sep 2, 2024 · 4d1e5ec · 4d1e5ec
1 parent ab01a87
commit 4d1e5ec
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 102 deletions.
diff --git a/content/glossary/user/assignment.md b/content/glossary/user/assignment.md
@@ -1,6 +1,6 @@
 +++
 description = "Combination of state (data) with single-use seal definition"
-template = "contents.html"
+template = "page.html"
 permalink = "/glossary/user/assignment"
 +++
 

diff --git a/content/glossary/user/consignment.md b/content/glossary/user/consignment.md
@@ -1,6 +1,6 @@
 +++
 description = "Consignment is data package exchanged between users of RGB smart contracts"
-template = "contents.html"
+template = "page.html"
 permalink = "/glossary/user/consignment"
 +++
 

diff --git a/sass/_base.sass b/sass/_base.sass
@@ -2,79 +2,15 @@ $gray: #2a3439
 $code: #2b303b
 $yellow: #ffc832
 $footer-gray: $gray
+$link-color: #4299bf
 
 @media screen and (max-width: 30em)
   html
     font-size: 75%
 
-html
-  height: 100%
-
-body
+body, html
   padding: 0
   margin: 0
-  font-family: "Inter", Helvetica, Arial, sans-serif
-  display: flex
-  flex-direction: column
-  min-height: 100vh
-
-  > main
-    flex: 1
-
-  > footer
-    padding: 2rem
-    background-color: $footer-gray
-    color: white
-    display: flex
-    align-items: center
-
-    > *:first-child
-      text-align: left
-    > *
-      text-align: center
-    > *:last-child
-      text-align: right
-
-    > p
-      flex: 3 1
-    > div
-      flex: 1 0 fit-content
-      display: flex
-      justify-content: center
-      align-content: center
-      align-items: center
-      a
-        display: block
-        flex: 1 0 fit-content
-
-    p
-      margin: 0
-
-    ul
-      list-style-type: none
-      padding-left: 0
-      margin-top: 0
-
-    li
-      margin-bottom: 1rem
-
-    a
-      color: $yellow
-      text-decoration: none
-      &:hover
-        color: $yellow
-        text-decoration: underline
-
-    h4
-      font-size: 1.2em
-      font-weight: 600
-      margin-top: 0
-      margin-bottom: 2rem
-
-    img
-      width: 40px
-      padding: 0 10px
-
 
 table
   border-spacing: 0

diff --git a/sass/front.sass b/sass/front.sass
@@ -1,27 +1,107 @@
 @import "_base"
 
-$body-font: "Inter", Helvetica, Arial, sans-serif
-$header-font: "Inter", Helvetica, Arial, sans-serif
+html
+  height: 100%
 
-$link-color: #4299bf
+body
+  font-family: "Inter", Helvetica, Arial, sans-serif
+  display: flex
+  flex-direction: column
+  min-height: 100vh
 
-.nav a
-  color: $gray
+  > nav
+    background-color: $gray
+    color: white
+    padding: 4pt
+    display: flex
+    align-items: center
+    gap: 0.5rem
+
+    #logo, #logo:visited, #logo:active, #logo:hover
+      text-decoration: none !important
+
+    #logo
+      display: inline-flex
+      img
+        width: 3em
+        height: 3em
+
+    a, a:visited, a:active
+      color: white
+      text-decoration: none
+    a:hover
+      color: $yellow
+      text-decoration: underline
+
+    ol
+      margin: 0
+      padding: 0
+      display: flex
+      list-style: none
+      gap: 3pt
+      li
+        padding: 0
+        margin: 0
+
+  > main
+    flex: 1
+
+  > footer
+    padding: 2rem
+    background-color: $footer-gray
+    color: white
+    display: flex
+    align-items: center
+
+    > *:first-child
+      text-align: left
+    > *
+      text-align: center
+    > *:last-child
+      text-align: right
+
+    > p
+      flex: 3 1
+    > div
+      flex: 1 0 fit-content
+      display: flex
+      justify-content: center
+      align-content: center
+      align-items: center
+      a
+        display: block
+        flex: 1 0 fit-content
+
+    p
+      margin: 0
 
-#logo
-  margin-top: 3px
+    ul
+      list-style-type: none
+      padding-left: 0
+      margin-top: 0
 
-  a
-    @extend .ml0-l
-    @extend .v-mid
-    display: inline-flex
+    li
+      margin-bottom: 1rem
 
-  img
-    width: 66px
-    height: 66px
+    a
+      color: $yellow
+      text-decoration: none
+      &:hover
+        color: $yellow
+        text-decoration: underline
 
-article h1
-  margin: 0
+    h4
+      font-size: 1.2em
+      font-weight: 600
+      margin-top: 0
+      margin-bottom: 2rem
+
+    img
+      width: 40px
+      padding: 0 10px
+
+.nav a
+  color: $gray
 
 #title
   font-size: 8rem
@@ -48,13 +128,3 @@ article h1
   &:hover,
   &:focus
     outline: 0
-
-.button.button-secondary
-  font-size: 0.8em
-
-.button-additional
-  display: inline-block
-  text-align: center
-  width: 100%
-  font-size: 0.8em
-
diff --git a/templates/article.html b/templates/article.html
@@ -13,3 +13,12 @@
 
 <meta name="twitter:site" content="@lnp_bp">
 {% endblock social_media %}
+
+{% block breadcrumbs %}
+    {% set_global path = "" %}
+    {% for item in page.components %}
+        {% set_global path = path ~ "/" ~ item %}
+        <li>/</li>
+        <li><a href='{{ path }}'>{{ item | capitalize }}</a></li>
+    {% endfor %}
+{% endblock breadcrumbs %}
diff --git a/templates/base.html b/templates/base.html
@@ -20,14 +20,15 @@
 </head>
 
 <body>
-<!-- nav>
-  <div id="logo">
-    <a href="/">
-      <img alt="RGB Logo" src="/logo/rgb-symbol-color.svg">
-    </a>
-  </div>
-  {% block breadcrumbs %} {% endblock %}
-</nav -->
+<nav>
+  <a id="logo" href="/">
+    <img alt="RGB Logo" src="/logo/rgb-symbol-color.svg">
+  </a>
+  <ol>
+  <li><a href="/">RGB FAQ</a></li>
+    {% block breadcrumbs %} {% endblock %}
+  </ol>
+</nav>
 
 <main>
   {% block content %} {% endblock %}