Adjust page styling

ExcaliburZero · Oct 8, 2023 · f506b36 · f506b36
1 parent 9734970
commit f506b36
Showing 1 changed file with 70 additions and 18 deletions.
diff --git a/cbpickaxe_scripts/templates/base.html b/cbpickaxe_scripts/templates/base.html
@@ -8,30 +8,82 @@
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <style>
+    body {
+      font-family: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
+    }
+
+    a {
+      color: #7629db;
+      text-decoration: none;
+    }
+
+    a:visited {
+      color: #382376;
+    }
+
+    a:hover {
+      color: #382376;
+    }
+
+    .sidebar {
+      background-color: #ffffff;
+      border-left: 10px solid #ab75e8;
+      border-right: 10px solid #ab75e8;
+      border-top: 70px solid #ab75e8;
+      padding: 0px;
+    }
+
+    a.sidebar-root-link {
+      color: #ffffff;
+      font-size: 14pt;
+      font-family: 'Neu5Land', 'Segoe UI', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
+      font-weight: bold;
+    }
+
+    a.sidebar-sub-link {
+      color: #000000;
+      font-size: 12pt;
+      font-family: 'Neu5Land', 'Segoe UI', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
+      font-weight: bold;
+    }
+
+    .sidebar-root {
+      background-color: #ab75e8;
+      margin-top: 8px;
+      margin-right: 10px;
+      -webkit-clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
+      clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
+    }
+
+    .sidebar-sub {
+      margin-top: 4px;
+      margin-left: 10px;
+    }
+  </style>
 </head>
 
 <body>
   <div class="container-fluid">
     <div class="row">
-      <div class="col-2 d-none d-lg-block bg-secondary p-3 min-vh-100">
-        <ul class="list-group mt-4">
+      <div class="col-2 d-none d-lg-block min-vh-100 sidebar">
+        <div>
           {% for root in roots %}
-          <li class="list-unstyled border-0 p-2"><a href="{{ root.root_link }}" class="text-light">{{ root.name }}</a>
-            {% if root.moves|length > 0 %}
-            <ul>
-              <li class="list-unstyled border-0 p-2"><a href="{{ root.root_link }}_moves" class="text-light">Moves</a>
-              </li>
-            </ul>
-            {% endif %}
-            {% if root.monsters|length > 0 %}
-            <ul>
-              <li class="list-unstyled border-0 p-2"><a href="{{ root.root_link }}_monsters"
-                  class="text-light">Monsters</a>
-              </li>
-            </ul>
-            {% endif %}
-            {% endfor %}
-        </ul>
+          <div class="list-unstyled border-0 p-2 sidebar-root"><a href="{{ root.root_link }}"
+              class="sidebar-root-link">{{
+              root.name }}</a></div>
+          {% if root.moves|length > 0 %}
+          <div class="list-unstyled border-0 p-2 sidebar-sub"><a href="{{ root.root_link }}_moves"
+              class="sidebar-sub-link">Moves</a>
+          </div>
+          {% endif %}
+          {% if root.monsters|length > 0 %}
+          <div class="list-unstyled border-0 p-2 sidebar-sub"><a href="{{ root.root_link }}_monsters"
+              class="sidebar-sub-link">Monsters</a>
+          </div>
+          {% endif %}
+          {% endfor %}
+        </div>
       </div>
       <div class="col-12 col-lg-10 d-flex flex-column min-vh-100">
         <main class="wrapper flex-grow-1">