Refactoring fx

fjelltopp · Sep 19, 2024 · 6ffe3cc · 6ffe3cc
1 parent a5a44a3
commit 6ffe3cc
Show file tree

Hide file tree

Showing 4 changed files with 211 additions and 5 deletions.
diff --git a/ckanext/fjelltopp_theme/assets/css/_partials/_magic.scss b/ckanext/fjelltopp_theme/assets/css/_partials/_magic.scss
@@ -12,7 +12,7 @@
   z-index: 999;
 }
 
-// animations (uncomment to use)
+ //animations (uncomment to use)
 //@keyframes waveMotion {
 //  0% {
 //    background-position: 0 0;
@@ -49,3 +49,113 @@
   z-index: 1;
 }
 
+.radial-dot {
+    position: absolute;
+    bottom: 50%;
+    left: 100%;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    transform-origin: right 74px;
+}
+
+
+.radial-dot:nth-child(-n+35) {
+    background-color: config.$primary25;
+}
+
+.radial-dot:nth-child(n+11) {
+    background-color: config.$secondary;
+}
+
+.radial-dot:nth-child(1) { transform: rotate(90deg) translateY(-425px); }
+.radial-dot:nth-child(2) { transform: rotate(86deg) translateY(-425px); }
+.radial-dot:nth-child(3) { transform: rotate(82deg) translateY(-425px); }
+.radial-dot:nth-child(4) { transform: rotate(78deg) translateY(-425px); }
+.radial-dot:nth-child(5) { transform: rotate(74deg) translateY(-425px); }
+.radial-dot:nth-child(6) { transform: rotate(70deg) translateY(-425px); }
+.radial-dot:nth-child(7) { transform: rotate(66deg) translateY(-425px); }
+.radial-dot:nth-child(8) { transform: rotate(62deg) translateY(-425px); }
+.radial-dot:nth-child(9) { transform: rotate(58deg) translateY(-425px); }
+.radial-dot:nth-child(10) { transform: rotate(54deg) translateY(-425px); }
+.radial-dot:nth-child(11) { transform: rotate(50deg) translateY(-425px); }
+.radial-dot:nth-child(12) { transform: rotate(46deg) translateY(-425px); }
+.radial-dot:nth-child(13) { transform: rotate(42deg) translateY(-425px); }
+.radial-dot:nth-child(14) { transform: rotate(38deg) translateY(-425px); }
+.radial-dot:nth-child(15) { transform: rotate(34deg) translateY(-425px); }
+.radial-dot:nth-child(16) { transform: rotate(30deg) translateY(-425px); }
+.radial-dot:nth-child(17) { transform: rotate(26deg) translateY(-425px); }
+.radial-dot:nth-child(18) { transform: rotate(22deg) translateY(-425px); }
+.radial-dot:nth-child(19) { transform: rotate(18deg) translateY(-425px); }
+.radial-dot:nth-child(20) { transform: rotate(14deg) translateY(-425px); }
+.radial-dot:nth-child(21) { transform: rotate(10deg) translateY(-425px); }
+.radial-dot:nth-child(22) { transform: rotate(6deg) translateY(-425px); }
+.radial-dot:nth-child(23) { transform: rotate(2deg) translateY(-425px); }
+.radial-dot:nth-child(24) { transform: rotate(-2deg) translateY(-425px); }
+.radial-dot:nth-child(25) { transform: rotate(-6deg) translateY(-425px); }
+.radial-dot:nth-child(26) { transform: rotate(-10deg) translateY(-425px); }
+.radial-dot:nth-child(27) { transform: rotate(-14deg) translateY(-425px); }
+.radial-dot:nth-child(28) { transform: rotate(-18deg) translateY(-425px); }
+.radial-dot:nth-child(29) { transform: rotate(-22deg) translateY(-425px); }
+.radial-dot:nth-child(30) { transform: rotate(-26deg) translateY(-425px); }
+.radial-dot:nth-child(31) { transform: rotate(-30deg) translateY(-425px); }
+.radial-dot:nth-child(32) { transform: rotate(-34deg) translateY(-425px); }
+.radial-dot:nth-child(33) { transform: rotate(-38deg) translateY(-425px); }
+.radial-dot:nth-child(34) { transform: rotate(-42deg) translateY(-425px); }
+.radial-dot:nth-child(35) { transform: rotate(-46deg) translateY(-425px); }
+.radial-dot:nth-child(36) { transform: rotate(-50deg) translateY(-425px); }
+.radial-dot:nth-child(37) { transform: rotate(-54deg) translateY(-425px); }
+.radial-dot:nth-child(38) { transform: rotate(-58deg) translateY(-425px); }
+.radial-dot:nth-child(39) { transform: rotate(-62deg) translateY(-425px); }
+.radial-dot:nth-child(40) { transform: rotate(-66deg) translateY(-425px); }
+.radial-dot:nth-child(41) { transform: rotate(-70deg) translateY(-425px); }
+.radial-dot:nth-child(42) { transform: rotate(-74deg) translateY(-425px); }
+.radial-dot:nth-child(43) { transform: rotate(-78deg) translateY(-425px); }
+.radial-dot:nth-child(44) { transform: rotate(-82deg) translateY(-425px); }
+.radial-dot:nth-child(45) { transform: rotate(-86deg) translateY(-425px); }
+.radial-dot:nth-child(46) { transform: rotate(-90deg) translateY(-425px); }
+.radial-dot:nth-child(47) { transform: rotate(-94deg) translateY(-425px); }
+.radial-dot:nth-child(48) { transform: rotate(-98deg) translateY(-425px); }
+.radial-dot:nth-child(49) { transform: rotate(-102deg) translateY(-425px); }
+.radial-dot:nth-child(50) { transform: rotate(-106deg) translateY(-425px); }
+.radial-dot:nth-child(51) { transform: rotate(-110deg) translateY(-425px); }
+.radial-dot:nth-child(52) { transform: rotate(-114deg) translateY(-425px); }
+.radial-dot:nth-child(53) { transform: rotate(-118deg) translateY(-425px); }
+.radial-dot:nth-child(54) { transform: rotate(-122deg) translateY(-425px); }
+.radial-dot:nth-child(55) { transform: rotate(-126deg) translateY(-425px); }
+.radial-dot:nth-child(56) { transform: rotate(-130deg) translateY(-425px); }
+.radial-dot:nth-child(57) { transform: rotate(-134deg) translateY(-425px); }
+.radial-dot:nth-child(58) { transform: rotate(-138deg) translateY(-425px); }
+.radial-dot:nth-child(59) { transform: rotate(-142deg) translateY(-425px); }
+.radial-dot:nth-child(60) { transform: rotate(-146deg) translateY(-425px); }
+.radial-dot:nth-child(61) { transform: rotate(-150deg) translateY(-425px); }
+.radial-dot:nth-child(62) { transform: rotate(-154deg) translateY(-425px); }
+.radial-dot:nth-child(63) { transform: rotate(-158deg) translateY(-425px); }
+.radial-dot:nth-child(64) { transform: rotate(-162deg) translateY(-425px); }
+.radial-dot:nth-child(65) { transform: rotate(-166deg) translateY(-425px); }
+.radial-dot:nth-child(66) { transform: rotate(-170deg) translateY(-425px); }
+.radial-dot:nth-child(67) { transform: rotate(-174deg) translateY(-425px); }
+.radial-dot:nth-child(68) { transform: rotate(-178deg) translateY(-425px); }
+.radial-dot:nth-child(69) { transform: rotate(-182deg) translateY(-425px); }
+.radial-dot:nth-child(70) { transform: rotate(-186deg) translateY(-425px); }
+.radial-dot:nth-child(71) { transform: rotate(-190deg) translateY(-425px); }
+.radial-dot:nth-child(72) { transform: rotate(-194deg) translateY(-425px); }
+.radial-dot:nth-child(73) { transform: rotate(-198deg) translateY(-425px); }
+.radial-dot:nth-child(74) { transform: rotate(-202deg) translateY(-425px); }
+.radial-dot:nth-child(75) { transform: rotate(-206deg) translateY(-425px); }
+.radial-dot:nth-child(76) { transform: rotate(-210deg) translateY(-425px); }
+.radial-dot:nth-child(77) { transform: rotate(-214deg) translateY(-425px); }
+.radial-dot:nth-child(78) { transform: rotate(-218deg) translateY(-425px); }
+.radial-dot:nth-child(79) { transform: rotate(-222deg) translateY(-425px); }
+.radial-dot:nth-child(80) { transform: rotate(-226deg) translateY(-425px); }
+.radial-dot:nth-child(81) { transform: rotate(-230deg) translateY(-425px); }
+.radial-dot:nth-child(82) { transform: rotate(-234deg) translateY(-425px); }
+.radial-dot:nth-child(83) { transform: rotate(-238deg) translateY(-425px); }
+.radial-dot:nth-child(84) { transform: rotate(-242deg) translateY(-425px); }
+.radial-dot:nth-child(85) { transform: rotate(-246deg) translateY(-425px); }
+.radial-dot:nth-child(86) { transform: rotate(-250deg) translateY(-425px); }
+.radial-dot:nth-child(87) { transform: rotate(-254deg) translateY(-425px); }
+.radial-dot:nth-child(88) { transform: rotate(-258deg) translateY(-425px); }
+.radial-dot:nth-child(89) { transform: rotate(-262deg) translateY(-425px); }
+.radial-dot:nth-child(90) { transform: rotate(-266deg) translateY(-425px); }
+.radial-dot:nth-child(91) { transform: rotate(-270deg) translateY(-425px); }
diff --git a/ckanext/fjelltopp_theme/assets/css/fjelltopp-theme.scss b/ckanext/fjelltopp_theme/assets/css/fjelltopp-theme.scss
@@ -616,7 +616,8 @@ $data-hub-stats-height: 374px;
     }
         .insight-small-rect {
         background-color: config.$primary;
-        border: config.$light 1px solid;
+        //border: config.$light 1px solid;
+        box-shadow: 0 0 0 0.4px config.$light;
         color: config.$primary25;
         p:first-child {
             @include apply-font-style(700, 18px, 24px, config.$primary25);
@@ -934,13 +935,15 @@ H2.dataset-heading a {
 
 /* subscribe to updates */
 .subscribe {
-    background-color: config.$primary;
+    //background-color: config.$primary;
+
 
     .container {
         padding-top: 64px;
     }
     .highlight-box {
         background-color: config.$highlight-box-bgcolor;
+        box-shadow: 0 0 0 0.4px config.$light;
         border-radius: 4px;
         padding: 36px;
 
@@ -1038,7 +1041,7 @@ H2.dataset-heading a {
     background: config.$primary;
     width: 100%;
     padding: 0;
-    margin-bottom: -25px;
+    margin-bottom: -10px;
 
     .list-unstyled {
         width: 100%;

diff --git a/ckanext/fjelltopp_theme/templates/page.html b/ckanext/fjelltopp_theme/templates/page.html
@@ -53,7 +53,8 @@
 
 
 {% block footer %}
-    <div class="big-footer {% if c.userobj %}connected{% endif %}">
+    <div class="big-footer {% if c.userobj %}connected{% endif %} dynamic-wave-background">
+        {% snippet "snippets/fx/circle.html" %}
     {{ super() }}
     </div>
 {% endblock %}
diff --git a/ckanext/fjelltopp_theme/templates/snippets/fx/circle.html b/ckanext/fjelltopp_theme/templates/snippets/fx/circle.html
@@ -0,0 +1,92 @@
+
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>
+<div class="radial-dot"></div>