diff --git a/website/theme/static/css/styles.css b/website/theme/static/css/styles.css index cd1f13a..f8ae86b 100644 --- a/website/theme/static/css/styles.css +++ b/website/theme/static/css/styles.css @@ -116,3 +116,179 @@ IMAGES .imageCrop { object-fit: none; } + +/* --------------------------------------------------- +ANIMATION +----------------------------------------------------*/ +.a-040-010 circle { + animation: show-hide-14 14s ease infinite; + transform-origin: center; +} +.a-040-010 rect { + opacity: 0; + animation: hide-show-14 14s ease infinite; + transform-origin: center; +} +/* ---------- */ +.a-040-030 circle { + animation: show-hide-10 10s ease infinite; + transform-origin: center; +} +/* ---------- */ +.a-040-070 circle { + animation: show-hide-16 16s ease infinite; + transform-origin: center; +} +.a-040-070 rect { + opacity: 0; + animation: hide-show-16 16s ease infinite; + transform-origin: center; +} +/* ---------- */ +.a-040-090 rect { + animation: show-hide-10 10s ease infinite; + transform-origin: center; +} +/* ---------- */ +.a-040-120 rect { + animation: show-hide-20 20s ease infinite; + transform-origin: center; +} + +/* --- KEYFRAMES --- */ +/* --- 10 ------------------ */ +@keyframes show-hide-10 { + 0% { + opacity: 1; + transform: scale(1); + } + 22% { + opacity: 1; + transform: scale(1); + } + 26% { + opacity: 0; + transform: scale(0.8); + } + 46% { + opacity: 0; + transform: scale(0.8); + } + 50% { + opacity: 1; + transform: scale(1); + } +} +/* --- 14 ------------------ */ +@keyframes show-hide-14 { + 0% { + opacity: 1; + transform: scale(1); + } + 46% { + opacity: 1; + transform: scale(1); + } + 48% { + opacity: 0; + transform: scale(0.8); + } + 98% { + opacity: 0; + transform: scale(0.8); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +@keyframes hide-show-14 { + 0% { + opacity: 0; + transform: scale(0.8); + } + 48% { + opacity: 0; + transform: scale(0.8); + } + 50% { + opacity: 1; + transform: scale(1); + } + 96% { + opacity: 1; + transform: scale(1); + } + 98% { + opacity: 0; + transform: scale(0.8); + } +} +/* --- 16 ------------------ */ +@keyframes show-hide-16 { + 0% { + opacity: 1; + transform: scale(1); + } + 56% { + opacity: 1; + transform: scale(1); + } + 58% { + opacity: 0; + transform: scale(0.8); + } + 98% { + opacity: 0; + transform: scale(0.8); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +@keyframes hide-show-16 { + 0% { + opacity: 0; + transform: scale(0.8); + } + 58% { + opacity: 0; + transform: scale(0.8); + } + 60% { + opacity: 1; + transform: scale(1); + } + 96% { + opacity: 1; + transform: scale(1); + } + 98% { + opacity: 0; + transform: scale(0.8); + } +} +/* --- 20 ------------------ */ +@keyframes show-hide-20 { + 0% { + opacity: 1; + transform: scale(1); + } + 74% { + opacity: 1; + transform: scale(1); + } + 76% { + opacity: 0; + transform: scale(0.8); + } + 86% { + opacity: 0; + transform: scale(0.8); + } + 88% { + opacity: 1; + transform: scale(1); + } +} diff --git a/website/theme/templates/base.html b/website/theme/templates/base.html index d959aa4..01e2579 100644 --- a/website/theme/templates/base.html +++ b/website/theme/templates/base.html @@ -37,12 +37,16 @@ {% endblock %} {% if template == 'index' %} -