From 5c2b84e641ab5325a0068f2a39b783d8dd06f37d Mon Sep 17 00:00:00 2001 From: hendr-ik Date: Wed, 17 Jan 2024 20:37:27 +0100 Subject: [PATCH] animation (#21) Reviewed-on: https://git.offen.dev/offen.software/website/pulls/21 Co-authored-by: hendr-ik Co-committed-by: hendr-ik --- website/theme/static/css/styles.css | 176 ++++++++++++++++++++++++++++ website/theme/templates/base.html | 12 +- website/theme/templates/index.html | 85 +++++++++++--- 3 files changed, 254 insertions(+), 19 deletions(-) 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 b017818..0785052 100644 --- a/website/theme/templates/base.html +++ b/website/theme/templates/base.html @@ -37,12 +37,16 @@ {% endblock %} {% if template == 'index' %} -
-

offen.software

 +
+
+

offen.software

 +
{% else %} -
-

offen.software

 +
+
+

offen.software

 +
{% endif %} diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html index 30655cb..cf50d99 100644 --- a/website/theme/templates/index.html +++ b/website/theme/templates/index.html @@ -38,7 +38,7 @@

- The world is in flux, and it’s a unique opportunity to facilitate change for the better. + The world is in flux, and it's a unique opportunity to facilitate change for the better.

We want to enable the makers that are driving this change by providing them with independent, fair and tailor made software that meet the highest standards when it comes to transparency, integrity and privacy. @@ -55,7 +55,7 @@

- Located in Berlin, we’re a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live. + Located in Berlin, we're a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live.

Working fully open source allows us to be transparent, keep in touch with the community, and contribute back to an ever growing common body of freely available knowledge. @@ -79,7 +79,12 @@

- pattern +
+ + + + +
@@ -101,11 +106,23 @@

- pattern +
+ + + +
- pattern - pattern +
+ + + +
+
+ + + +
@@ -124,7 +141,12 @@
- pattern +
+ + + + +
@@ -146,8 +168,19 @@
- pattern - pattern +
+ + + + +
+ +
+ + + + +
@@ -169,11 +202,24 @@

- pattern +
+ + + +
- pattern - pattern +
+ + + +
+ +
+ + + +
@@ -195,11 +241,20 @@
- pattern - pattern +
+ + + + +
+ +
+ + + +
-