Set AcumPro as standard font

app.py

@@ -32,4 +32,4 @@ def pages(page):
 
 # Main Function, Runs at http://0.0.0.0:8080
 if __name__ == "__main__":
-    app.run(port=3013)
+    app.run(port=3014)

static/style.css

 body { 
+  font-family: 'AcuminPro';
   padding-top: 56px; 
   background-color: var(--offwhite);
   color: var(--offblack);
@@ -7,6 +8,13 @@ body {
 .bg-dark { background-color: var(--darkpurple) !important; }
 .bg-hero { background-color: var(--purple) }
 
+
+@font-face {
+  font-family: 'AcuminPro';
+  src: url('static/fonts/Acumin Pro Black.otf'), url('static/fonts/Acumin Pro Bold.otf'), url('static/fonts/Acumin Pro Book.otf'), url('static/fonts/Acumin Pro ExtraLight.otf'), url('static/fonts/Acumin Pro Light.otf'), url('static/fonts/Acumin Pro Medium.otf'), url('static/fonts/Acumin Pro Semibold.otf'), url('static/fonts/Acumin Pro Thin.otf'), url('static/fonts/Acumin Pro Ultrablack.otf'),  format('otf');
+  font-weight: normal;
+  font-style: normal;
+}
 /* header */ 
 
 /*navbar design*/
@@ -69,11 +77,13 @@ footer a:hover { color: white; text-decoration: underline; }
     /* our colours*/
     --darkpurple: #850F78; 
     /*--purple: #B85BD1; */
-    --orange: #F57D22; 
-    --yellow: #F4CC1E; 
+    --highlight2: #F57D22; 
+    --highlight: #F4CC1E; 
     --lightblue: #A0A7F3 ; 
     --offblack: #32232C ; 
-    --offwhite: #FFF6F2; 
+    --offwhite: #e9dff1; 
+    --ourbeige: #FFF6F2; 
+    --background: #4ea194; 
     /*igem colours*/
     --igemdarkgreen: #006530; 
     --igemmediumgreen: #019968; 
@@ -85,17 +95,16 @@ footer a:hover { color: white; text-decoration: underline; }
 .sidebar{
     border-left: 8px solid;
     border-left-color: currentcolor;
-    border-color: var(--orange);
+    border-color: var(--highlight);
     list-style-type: none;
     line-height: 280%;
     margin: 0px 0px;
     padding: 0px 0px;
 }
 .sidebarEntry {
-  font-family: ebgaramond-bold;
   font-size: 20px;
   color: #191308;
-  background: linear-gradient(var(--orange) 0 0) var(--p, 0) / var(--p, 0) no-repeat;
+  background: linear-gradient(var(--highlight) 0 0) var(--p, 0) / var(--p, 0) no-repeat;
   transition: .2s, background-position 0s;
 }
 
@@ -127,7 +136,7 @@ footer a:hover { color: white; text-decoration: underline; }
 
 /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 .active, .collapsible:hover {
-  background-color: var(--orange);
+  background-color: var(--highlight);
 }
 
 /* Style the collapsible content. Note: hidden by default */
@@ -135,7 +144,7 @@ footer a:hover { color: white; text-decoration: underline; }
   padding: 18px 18px;
   display: none;
   overflow: hidden;
-  background-color: var(--yellow);
+  background-color: var(--highlight);
   border-radius: 3px;
 } 
 
@@ -145,4 +154,18 @@ footer a:hover { color: white; text-decoration: underline; }
   color: var(--offwhite);
   width: 50%;
   padding: 40px;
-}
\ No newline at end of file
+}
+
+/* Headings */ 
+h2{
+  font-size: 4rem;
+  -webkit-background-clip: text;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: var(--darkpurple);
+  background-clip: text;
+  color: transparent;
+}
+h2:nth-of-type(1){
+  background-image: repeating-linear-gradient(-45deg, var(--darkpurple) 0, var(--darkpurple) 2px, var(--offwhite) 2px, var(--offwhite) 4px);
+
+}

wiki/pages/example.html

+{% extends "layout.html" %}
+
+{% block title %}<!-- empty -->{% endblock %}
+{% block lead %}<!-- empty -->{% endblock %}
+
+
+{% block sidebar %}
+<!-- sidebar -->
+{% endblock %}
+
+{% block page_content %}
+
+<svg viewbox="0 0 100 20">
+    <defs>
+    <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="5%" stop-color="#326384"/>
+        <stop offset="95%" stop-color="#123752"/>
+    </linearGradient>
+    <pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
+        <path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" mask="url(#mask)" fill="url(#gradient)"> 
+        <animateTransform
+            attributeName="transform"
+            begin="0s"
+            dur="1.5s"
+            type="translate"
+            from="0,0"
+            to="40,0"
+            repeatCount="indefinite" />
+        </path>
+    </pattern>
+    </defs>
+    <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)"  fill-opacity="0.6">WAVES</text>
+    <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.1">WAVES</text>
+</svg>
+<!-- -->
+<h1 class="playful" aria-label="Wash your hands">
+    <span aria-hidden="true">W</span><span aria-hidden="true">a</span><span aria-hidden="true">s</span><span aria-hidden="true">h</span><span aria-hidden="true"> </span><span aria-hidden="true">y</span><span aria-hidden="true">o</span><span aria-hidden="true">u</span><span aria-hidden="true">r</span><span aria-hidden="true"> </span><span aria-hidden="true">h</span><span aria-hidden="true">a</span><span aria-hidden="true">n</span><span aria-hidden="true">d</span><span aria-hidden="true">s</span><span aria-hidden="true">!</span>
+  </h1>
+
+<style>
+@function textShadow($precision, $size, $color){
+  $value: null;
+  $offset: 0;
+  $length: $size * (1 / $precision) - 1;
+
+  @for $i from 0 through $length {
+    $offset: $offset + $precision;
+    $shadow: $offset + px $offset + px $color;
+    $value: append($value, $shadow, comma);
+  }
+
+  @return $value;
+}
+
+.playful span {
+  position: relative;
+  color: #5362F6;
+  text-shadow: textShadow(0.25, 6, #E485F8);
+  animation: scatter 1.75s infinite;
+}
+
+.playful span:nth-child(2n) {
+  color: #ED625C;
+  text-shadow: textShadow(0.25, 6, #F2A063);
+  animation-delay: 0.3s;
+}
+
+.playful span:nth-child(3n) {
+  color: #FFD913;
+  text-shadow: textShadow(0.25, 6, #6EC0A9);
+  animation-delay: 0.15s;
+}
+
+.playful span:nth-child(5n) {
+  color: #555BFF;
+  text-shadow: textShadow(0.25, 6, #E485F8);
+  animation-delay: 0.4s;
+}
+
+.playful span:nth-child(7n), .playful span:nth-child(11n) {
+  color: #FF9C55;
+  text-shadow: textShadow(0.25, 6, #FF5555);
+  animation-delay: 0.25s;
+}
+
+@keyframes scatter {
+  0% {
+    top: 0;
+  }
+  50% {
+    top: -10px;
+  }
+  100% {
+    top: 0;
+  }
+}
+
+h1 {
+  font-size: 65px;
+  text-transform: uppercase;
+  font-family: "Archivo Black", "Archivo", sans-serif;
+  font-weight: normal;
+  display: block;
+  width: 666px;
+  max-width: 80vw;
+  min-height: 90px;
+  height: auto;
+  text-align: center;
+} 
+
+</style>
+<!-- -->
+<p>Text with fancy <span class="fancy">background</span></p>
+<style>
+
+
+p {
+  font-size: 8vw;
+  text-transform: uppercase;
+  text-align: center;
+  line-height: 1;
+}
+     .fancy {
+  @supports (background-clip: text) or (-webkit-background-clip: text) {
+    background-image: 
+      url("data:image/svg+xml,%3Csvg width='2250' height='900' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath fill='%2300A080' d='M0 0h2255v899H0z'/%3E%3Ccircle cx='366' cy='207' r='366' fill='%2300FDCF'/%3E%3Ccircle cx='1777.5' cy='318.5' r='477.5' fill='%2300FDCF'/%3E%3Ccircle cx='1215' cy='737' r='366' fill='%23008060'/%3E%3C/g%3E%3C/svg%3E%0A");
+    background-size: 110% auto;
+    background-position: center;
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+}   
+</style>
+{% endblock %}
+

wiki/pages/home.html

@@ -4,6 +4,9 @@
 
 {% block page_content %}
 
+
+
+
 <div class="container-fluid">
   <div class="col">
     <h2>Our project will be presented here, soon.</h2>

wiki/pages/human-practices.html

@@ -15,21 +15,8 @@
 
 
 {% block page_content %}
-<script>
-    AOS.init();
-  </script>
 
-<div class="col">
-    
-    <div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine">
-        <div class="test-container">
-                Test text
-        </div>
 
-    </div>
-
-
-</div>