Upload website

dist/css/analytics.css

@@ -0,0 +1,68 @@
+/* 
+    Analytics 
+*/
+.analytics-notice {
+    z-index: 10000;
+    bottom: -450px;
+    right: 5px;
+    width: 300px;
+    height: 400px;
+    position: fixed;
+    background-color: var( --color-background-analytics );
+    border-radius: 20px;
+    padding: 10px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: scroll;
+    transition: bottom 1s;
+}
+
+.analytics-notice.show {
+    bottom: 5px;
+}
+
+/* Close button  */
+.analytics-button {
+    color: var( --color-text-primary );
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+#matomo-opt-out {
+    color: var( --color-text-primary ) !important;
+}
+
+/* The small icon on the side that is shown when main panel is closed */
+.analytics-notice .small-symbol {
+    position: fixed;
+    bottom: 20px;
+    right: 0px;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    background-color: var( --color-background-analytics );
+    border: solid black 1px;
+    cursor: pointer;
+    transition: all 1s;
+    padding-left: 5px;
+    padding-right: 10px;
+    padding-bottom: 20px;
+    padding-top: 20px;
+    transition-delay: 2s;
+    z-index: 10001;
+}
+
+.analytics-notice .small-symbol .material-symbols-outlined {
+    font-size: 1.75rem;
+}
+
+.analytics-notice.show .small-symbol {
+    right: -100px;
+    transition-delay: 0s;
+}

dist/css/colors.css

@@ -0,0 +1,15 @@
+#theme-switcher-icon {
+    font-size: 1rem;
+    margin-right: 5px;
+}
+
+.theme-selector {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.slider-controls {
+    background-color: var( --color-background-accent ) !important;
+}

dist/css/footer.css

@@ -0,0 +1,80 @@
+footer {
+    border-top: solid black 1px;
+    background-color: var( --color-background-accent );
+    width: 100vw;
+    margin-top: 40px;
+}
+
+footer .logo {
+    margin-top: 20px;
+    height: 40vh;
+    border-radius: 20px;
+}
+
+.footer-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 50px;
+}
+
+.footer-text-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-width: calc( ( 100% - 40vh - 50px ) / 2 );
+    width: 80%;
+}
+
+.footer-category {
+    display: flex;
+    flex-direction: column;
+    width: 80%;
+}
+
+.footer-category a {
+    color: var( --color-text-primary );
+    text-decoration: none;
+    transition: all 0.5s;
+    transform: scale(1);
+    transition: transform 0.75s;
+}
+
+.footer-category a:hover {
+    color: var( --color-button-hover );
+    transform: scale(1.1);
+}
+
+
+
+@media only screen and (min-width: 999px) {
+    footer .logo {
+        margin-top: unset;
+        border-radius: 0;
+    }
+    .footer-container {
+        flex-direction: row;
+        margin-bottom: unset;
+    }
+
+    .footer-text-container {
+        align-items: flex-start;
+        justify-content: flex-start;
+        flex-direction: row;
+        width: unset;
+        max-width: 65%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    
+    .footer-category {
+        margin-left: auto;
+        margin-right: auto;
+        width: unset;
+        min-width: max-content;
+        margin: 5px;
+    }
+}

dist/css/nav.css

@@ -0,0 +1,290 @@
+nav {
+    width: 100vw;
+    height: 15vh;
+}
+
+.nav-placeholder {
+    height: 15vh;
+}
+
+.nav-menu .logo-wrapper {
+    display: none;
+    height: 90%;
+    border-radius: 20px;
+    overflow: hidden;
+}
+
+.nav-menu .logo {
+    height: 100%;
+}
+
+.nav-top-bar .logo-wrapper:hover {
+    transform: unset;
+}
+
+nav a {
+    /* TODO: Update colours */
+    color: var(--color-text-primary);
+    text-decoration: none;
+    transform: scale(1);
+    transition: transform 0.75s;
+}
+
+nav a:hover {
+    transform: scale(1.1);
+}
+
+.nav-link-wrapper {
+    margin-bottom: 30px;
+}
+
+.nav-link-dropdown a {
+    font-size: 1.1rem;
+}
+
+.nav-icon {
+    font-size: 2rem;
+}
+
+.nav-menu {
+    position: fixed;
+    left: -100vw;
+    top: 15vh;
+    padding-top: 2.5vh;
+    padding-bottom: 2.5vh;
+    padding-left: 2.5vw;
+    padding-right: 2.5vw;
+    height: 80vh;
+    width: 95vw;
+    display: flex;
+    flex-direction: column;
+    z-index: 100;
+    background-color: var(--color-background-accent);
+    transition: left 0.5s, top 0.5s;
+}
+
+.nav-top-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 15vh;
+    background-color: var(--color-background-accent);
+    display: flex;
+    align-items: center;
+    z-index: 100;
+    border-bottom: black 1px solid;
+    transition: top 0.5s;
+}
+
+.nav-top-bar.slide-up {
+    top: -20vh;
+}
+
+.nav-top-bar .logo {
+    height: 100%;
+}
+
+.nav-top-bar .logo-wrapper {
+    display: unset;
+    height: 90%;
+    border-radius: 20px;
+    margin-left: 20px;
+    overflow: hidden;
+}
+
+.nav-menu.active {
+    left: 0;
+}
+
+.nav-link-header {
+    font-size: 1.2rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.5s;
+}
+
+.nav-link-dropdown {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+
+/* Nav-Toggle button idea from here: https://codepen.io/alvarotrigo/pen/wvrzPWL*/
+.nav-toggle {
+    margin-left: auto;
+    margin-right: 20px;
+    text-decoration: none;
+    color: var(--color-text-primary);
+    font-size: 5vh;
+    cursor: pointer;
+    width: 35px;
+    height: 25px;
+    z-index: 1;
+    transition: 0.8s;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.line {
+    display: block;
+    width: 100%;
+    height: 2px;
+    background-color: var(--color-text-primary);
+}
+
+#line1 {
+    transform-origin: 0% 0%;
+    transition: transform 0.4s ease-in-out;
+}
+
+#line2 {
+    transition: transform 0.2s ease-in-out;
+}
+
+#line3 {
+    transform-origin: 0% 100%;
+    transition: transform 0.4s ease-in-out;
+}
+
+.nav-toggle.active #line1 {
+    transform: rotate(45deg) scaleX(0.95);
+}
+
+.nav-toggle.active #line2 {
+    transform: scaleY(0);
+}
+
+.nav-toggle.active #line3 {
+    transform: rotate(-45deg) scaleX(0.95);
+}
+
+
+@media only screen and (min-width: 900px) {
+    nav {
+        height: 20vh;
+    }
+
+    nav a:hover {
+        transform: unset;
+    }
+
+    .nav-placeholder {
+        height: 20vh;
+    }
+
+    .nav-menu .logo-wrapper {
+        display: unset;
+    }
+
+    .nav-top-bar {
+        display: none;
+    }
+
+    .nav-menu {
+        padding: 0;
+        height: 20vh;
+        width: 100vw;
+        justify-content: center;
+        align-items: center;
+        flex-direction: row;
+        top: 0;
+        left: 0;
+        border-bottom: var(--color-text-primary) 1px solid;
+    }
+
+    .nav-menu.slide-up {
+        top: -20vh;
+    }
+
+    .nav-link-dropdown {
+        transform: scaleY(0);
+        align-items: unset;
+        justify-content: unset;
+        position: absolute;
+        top: 100%;
+        min-width: 175px;
+        width: max-content;
+        transform-origin: top;
+        transition: transform 0.5s;
+        background-color: var(--color-background-primary);
+        border-radius: 10px;
+        padding: 15px;
+        z-index: 2;
+    }
+
+    .nav-link-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        cursor: pointer;
+        position: relative;
+        margin-left: 3%;
+        margin-right: 3%;
+        margin-bottom: unset;
+    }
+
+    .nav-link-header {
+        flex-direction: column;
+        min-width: 100px;
+        padding: 10px;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        position: relative;
+        z-index: 3;
+    }
+
+    .nav-link-header::before,
+    .nav-link-header::after {
+        opacity: 0;
+        border: var(--color-background-primary) 15px solid;
+        border-top-color: transparent;
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        content: " ";
+        z-index: -1;
+        transition: opacity 0.4s;
+        bottom: -15px;
+    }
+
+    .nav-link-header::before {
+        border-left-color: transparent;
+        border-bottom-right-radius: 30px;
+        right: calc(100% - 15px);
+    }
+
+    .nav-link-header::after {
+        border-right-color: transparent;
+        border-bottom-left-radius: 30px;
+        left: calc(100% - 15px);
+    }
+
+    .nav-link-dropdown a:hover {
+        text-decoration: underline;
+    }
+
+    .nav-link-wrapper:hover .nav-link-header {
+        background-color: var(--color-background-primary);
+    }
+
+    .nav-link-wrapper:hover .nav-link-dropdown {
+        transform: scaleY(1);
+    }
+
+    .nav-link-wrapper:hover .nav-link-header::before,
+    .nav-link-wrapper:hover .nav-link-header::after {
+        transition-delay: 0.1s;
+        opacity: 1;
+    }
+
+    .nav-toggle {
+        display: none;
+    }
+}

dist/css/pages/index.css

@@ -0,0 +1,4 @@
+.title-video {
+    width: 100vw;
+    height: 90vh;
+}

dist/css/side-by-side.css

@@ -0,0 +1,29 @@
+.side-by-side {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.side-by-side-item {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+}
+
+
+@media only screen and (min-width: 999px) {
+    .side-by-side {
+        flex-direction: row;
+    }
+    
+    .side-by-side-item {
+        width: 48%;
+        margin: 0.5%;
+    }
+}

dist/css/style.css

@@ -0,0 +1,273 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+@import url('/css/nav.css');
+@import url('/css/colors.css');
+@import url('/css/footer.css');
+@import url('/css/analytics.css');
+
+/* Color Theme */
+:root,
+:root.light {
+    --color-text-primary: black;
+    --color-text-accent: #303030;
+    --color-link: #1e24a1ff;
+    --color-background-primary: white;
+    --color-background-accent: rgb(226, 226, 226);
+    --color-background-analytics: rgb(193, 193, 223);
+    --color-background-yt-embed: rgb(173, 173, 173);
+    --color-slider-info: rgba(255, 255, 255, 0.85);
+    --color-button: rgb(21, 43, 92);
+    --color-button-hover: rgb(2, 10, 27);
+}
+
+:root.dark {
+    --color-text-primary: white;
+    --color-text-accent: #b5b5b5;
+    --color-link: #005aacff;
+    --color-background-primary: #151515;
+    --color-background-accent: black;
+    --color-background-analytics: #303030;
+    --color-background-yt-embed: #404040;
+    --color-slider-info: rgba(0, 0, 0, 0.85);
+    --color-button: rgb(20, 150, 200);
+    --color-button-hover: rgb(15, 125, 175);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-text-primary: white;
+        --color-text-accent: #b5b5b5;
+        --color-link: #005aacff;
+        --color-background-primary: #151515;
+        --color-background-accent: black;
+        --color-background-analytics: #303030;
+        --color-background-yt-embed: #404040;
+        --color-slider-info: rgba(0, 0, 0, 0.85);
+        --color-button: rgb(20, 150, 200);
+        --color-button-hover: rgb(15, 125, 175);
+    }
+}
+
+/* 
+ * MAIN 
+ */
+body {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    font-family: 'Manrope', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: var(--color-background-primary);
+    color: var(--color-text-primary);
+}
+
+body.loaded {
+    transition: color 0.5s, background-color 0.5s;
+}
+
+a {
+    color: var(--color-link);
+}
+
+.material-symbols-outlined {
+    font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 48
+}
+
+.content {
+    width: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    min-height: 80vh;
+}
+
+.no-scroll {
+    overflow: hidden;
+}
+
+.button {
+    padding: 20px;
+    background-color: var(--color-button);
+    color: white;
+    text-decoration: none;
+    border-radius: 10px;
+    transition: all 0.5s;
+    width: fit-content;
+    height: fit-content;
+}
+
+.button:hover {
+    border-radius: 5px;
+    background-color: var(--color-button-hover);
+}
+
+.divider {
+    width: 100%;
+    margin-bottom: 2%;
+    margin-top: 2%;
+    border-color: var(--color-text-primary);
+}
+
+.slider {
+    width: 100vw;
+    height: calc(100vw / 16 * 11);
+}
+
+.slider-element {
+    background-color: lightblue;
+}
+
+.slider-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-slider-info);
+    padding: 20px;
+    border-radius: 20px;
+    max-width: 70%;
+}
+
+.slider-controls {
+    font-size: 2.6rem;
+    padding: 0.25rem 0.5rem;
+}
+
+.slider-control-left {
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+}
+
+.slider-control-right {
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+}
+
+.offset-button {
+    position: absolute;
+    bottom: 5%;
+}
+
+.yt-embed {
+    background-color: var(--color-background-yt-embed) !important;
+}
+
+.pullquote-lines {
+    border-color: var(--color-text-primary);
+    margin-bottom: 2%;
+    margin-top: 2%;
+    width: 100%;
+}
+
+.quotes-text {
+    font-size: 150%;
+    font-style: italic;
+    font-weight: normal;
+    text-align: center;
+}
+
+.quotes-author {
+    text-align: right;
+    font-style: italic;
+    width: 80%;
+    margin-right: auto;
+    font-weight: lighter;
+    margin-top: 0;
+}
+
+
+.project-logo {
+    margin-top: 12vh;
+    width: 80vw;
+    height: auto;
+    border-radius: 20px;
+}
+
+.project-logo.small-logo {
+    width: 50%;
+    height: auto;
+}
+
+.inline-elements {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+@media only screen and (max-width: 999px) {
+    .inline-elements .button {
+        width: 100%;
+        text-align: center;
+    }
+}
+
+.inline-elements * {
+    margin: 5px;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.rounded-corners {
+    border: none;
+    border-radius: 20px;
+}
+
+.circle {
+    border-radius: 5000px;
+}
+
+.bigger {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+.no-margin {
+    margin: 5px;
+}
+
+@media only screen and (min-width: 550px) and (max-width: 999px) {
+    .project-logo {
+        margin-top: 10vh;
+        width: 50vw;
+    }
+}
+
+@media only screen and (min-width: 1000px) {
+    .project-logo {
+        margin-top: 4vh;
+        width: auto;
+        height: 40vh;
+    }
+
+    .project-logo.small-logo {
+        width: 25%;
+        height: auto;
+    }
+
+    .inline-elements {
+        flex-direction: row;
+    }
+}
+
+@media only screen and (min-width: 800px) {
+    .slider {
+        width: 100vw;
+        height: 80vh;
+    }
+
+    .slider-controls {
+        font-size: 3rem;
+    }
+}

dist/css/timeline.css

@@ -0,0 +1,49 @@
+.timeline {
+    position: relative;
+    display: block;
+    flex-direction: column;
+    height: 100%;
+}
+
+.timeline-el {
+    z-index: 3;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    margin-top: 30px;
+    background: none;
+}
+
+.timeline-dot {
+    width: 20px;
+    height: 20px;
+    background-color: rgb(21, 43, 92);
+    border-radius: 20px;
+}
+
+.timeline-year {
+    margin-right: 20px;
+    color: var( --color-text-accent );
+    font-style: italic;
+    width: 5rem;
+}
+
+.timeline-desc {
+    font-style: italic;
+    font-weight: lighter;
+    margin-left: 20px;
+    max-width: calc( 100% - 5rem - 60px );
+}
+
+.timeline-line {
+    position: absolute;
+    z-index: 1;
+    height: calc(100% - 10px);
+    top: 5px;
+    width: 4px;
+    background-color: rgb(110, 110, 110);
+    display: flex;
+    left: calc( 5rem + 28px );
+}

dist/css/wrapfig.css

@@ -0,0 +1,48 @@
+.wrapfig-wrapper {
+    width: 100%;
+    position: relative;
+}
+
+.wrapfig {
+    width: 100%;
+}
+
+.wrapfig.left {
+    float: none;
+}
+
+.wrapfig.right {
+    float: none;
+}
+
+.wrapfig-text {
+    margin: 5px;
+    width: 100%;
+}
+
+
+@media only screen and (min-width: 999px) {
+    .wrapfig {
+        width: 40%;
+    }
+    
+    .wrapfig.left {
+        float: left;
+    }
+    
+    .wrapfig.right {
+        float: right;
+    }
+    
+    .wrapfig-text {
+        width: 58%;
+    }
+
+    .wrapfig-text.left {
+        margin-right: auto;
+    }
+    
+    .wrapfig-text.right {
+        margin-left: auto;
+    }    
+}