From a0ab7106c8be78ae67a8db2cca5a77530e8a1018 Mon Sep 17 00:00:00 2001
From: Katie Spivakovsky <kspivakovsky@gmail.com>
Date: Thu, 10 Aug 2023 13:24:21 -0400
Subject: [PATCH] home animation
---
static/scripts/functions.js | 5 +++--
static/style.css | 23 ++++++++++++++++++++---
wiki/pages/home.html | 12 ++++++++++--
3 files changed, 33 insertions(+), 7 deletions(-)
diff --git a/static/scripts/functions.js b/static/scripts/functions.js
index f3ca302..318dffc 100644
--- a/static/scripts/functions.js
+++ b/static/scripts/functions.js
@@ -71,8 +71,9 @@ function countTo(start, end, element, withPercent, intervalLength){
/* HOME PAGE */
if (window.location.href.endsWith("mit/") || window.location.href.indexOf("index") > -1) {
- document.querySelector('header').style.height = '50vh'
- document.querySelector('.header-title').style.font_size = 'calc(2.5*(1.475rem + 2.7vw))'
+ document.querySelector('#home-header-container').style.height = '50vh'
+ document.querySelector('#home-header').style.font_size = 'calc(2.5*(1.475rem + 2.7vw))'
+ document.querySelector('#home-lead').style.color = '#fff'
setTimeout(function() {
// count up/down for statistics and set intervals to end at same time
diff --git a/static/style.css b/static/style.css
index 3f561f4..9ae5aa0 100644
--- a/static/style.css
+++ b/static/style.css
@@ -32,7 +32,7 @@ h1, .gradient-header {
}
.header-title {
- animation: animated-gradient 8s infinite alternate-reverse;
+ animation: animated-gradient 8s infinite alternate-reverse;
}
.subheader-title {
@@ -41,11 +41,28 @@ h1, .gradient-header {
margin-left:6px
}
-header {
+#home-header-container {
+ height:100vh;
transition-property: height;
transition-duration: 1s;
transition-timing-function: ease-in-out;
- transition-delay: 1.1s;
+ transition-delay: 2s;
+}
+
+#home-header {
+ font-size: calc(3*(1.475rem + 2.7vw));
+ transition-property: font-size;
+ transition-duration: 1s;
+ transition-timing-function: ease-in-out;
+ transition-delay: 2s;
+}
+
+#home-lead {
+ color:rgba(255, 255, 255, 0);
+ transition-property: color;
+ transition-duration: 1s;
+ transition-timing-function: ease-in-out;
+ transition-delay: 0.8s;
}
/* body */
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index 122cf66..0f10388 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -1,7 +1,15 @@
{% extends "layout.html" %}
-{% block title %}CAR-P Diem{% endblock %}
-{% block lead %}<b>Fighting cancer cachexia with engineered macrophages.</b>{% endblock %}
+<header id='home-header-container' class="bg-hero py-5 mb-5">
+ <div class="container h-100">
+ <div class="row h-100 align-items-center">
+ <div class="col-lg-12">
+ <h1 id='home-header' class="display-4 header-title mt-5 mb-2">CAR-P Diem</h1>
+ <p id='home-lead' class="lead mb-5 subheader-title">Fighting cancer cachexia with engineered macrophages.</p>
+ </div>
+ </div>
+ </div>
+</header>
{% block page_content %}
--
GitLab