diff --git a/app.py b/app.py
index e92215ab1c31aa0fc8e58348a4a94a341705c027..706d02b8b09cca80f97c59d627cfd591c19e7e84 100644
--- a/app.py
+++ b/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)
diff --git a/static/fonts/Acumin Pro Black.otf b/static/fonts/Acumin Pro Black.otf
new file mode 100644
index 0000000000000000000000000000000000000000..d7ec13517705a6cdc05619426a166c1bc619fa63
Binary files /dev/null and b/static/fonts/Acumin Pro Black.otf differ
diff --git a/static/fonts/Acumin Pro Bold.otf b/static/fonts/Acumin Pro Bold.otf
new file mode 100644
index 0000000000000000000000000000000000000000..d9adf44fbe507c5efa616020b346a6e539a16199
Binary files /dev/null and b/static/fonts/Acumin Pro Bold.otf differ
diff --git a/static/fonts/Acumin Pro Book.otf b/static/fonts/Acumin Pro Book.otf
new file mode 100644
index 0000000000000000000000000000000000000000..d92b09a35694f743494d349c2cf9ed86862efd59
Binary files /dev/null and b/static/fonts/Acumin Pro Book.otf differ
diff --git a/static/fonts/Acumin Pro ExtraLight.otf b/static/fonts/Acumin Pro ExtraLight.otf
new file mode 100644
index 0000000000000000000000000000000000000000..28566bc1145e4768cf180b8d5f27ac30cc085249
Binary files /dev/null and b/static/fonts/Acumin Pro ExtraLight.otf differ
diff --git a/static/fonts/Acumin Pro Light.otf b/static/fonts/Acumin Pro Light.otf
new file mode 100644
index 0000000000000000000000000000000000000000..a3ccda3afbb229efd3323d7ca7fcc7757b1aa9f5
Binary files /dev/null and b/static/fonts/Acumin Pro Light.otf differ
diff --git a/static/fonts/Acumin Pro Medium.otf b/static/fonts/Acumin Pro Medium.otf
new file mode 100644
index 0000000000000000000000000000000000000000..3d1a73abc1da6f739a4703894e6a19bd908a24b6
Binary files /dev/null and b/static/fonts/Acumin Pro Medium.otf differ
diff --git a/static/fonts/Acumin Pro Semibold.otf b/static/fonts/Acumin Pro Semibold.otf
new file mode 100644
index 0000000000000000000000000000000000000000..dd2dc4cad09cf58df634f1d08926b7e27a668921
Binary files /dev/null and b/static/fonts/Acumin Pro Semibold.otf differ
diff --git a/static/fonts/Acumin Pro Thin.otf b/static/fonts/Acumin Pro Thin.otf
new file mode 100644
index 0000000000000000000000000000000000000000..03a655439990b743a234f15e2ea858529b322517
Binary files /dev/null and b/static/fonts/Acumin Pro Thin.otf differ
diff --git a/static/fonts/Acumin Pro UltraBlack.otf b/static/fonts/Acumin Pro UltraBlack.otf
new file mode 100644
index 0000000000000000000000000000000000000000..3c4c27d45d64ed9750abc0ee30a21ca61e2bff84
Binary files /dev/null and b/static/fonts/Acumin Pro UltraBlack.otf differ
diff --git a/static/style.css b/static/style.css
index 741900efbb14c11110f886de4ec1ed34731c53b7..c04fa5397588960c75b659ddcf07c58e3dea5897 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,4 +1,5 @@
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);
+
+}
diff --git a/wiki/pages/example.html b/wiki/pages/example.html
new file mode 100644
index 0000000000000000000000000000000000000000..95bf9284266dbf92d19383b65657829b34e40607
--- /dev/null
+++ b/wiki/pages/example.html
@@ -0,0 +1,136 @@
+{% 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 %}
+
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index c27b35163c95c2e1642496b25228d34808014a74..ff572a4ed7927a0d648639f0e509a4f5072359d9 100644
--- a/wiki/pages/home.html
+++ b/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>
diff --git a/wiki/pages/human-practices.html b/wiki/pages/human-practices.html
index 720c536fc56b68b60c87f6942952a715e3b0b6b4..9c4ddb467ced7256d0a0fe1af6e0384430551a81 100644
--- a/wiki/pages/human-practices.html
+++ b/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>