xarxaprod-wp-theme/sass/base/elements/_body.scss

272 lines
7.5 KiB
SCSS
Raw Normal View History

2024-01-09 16:13:20 +01:00
body {
//Fallback for when there is no custom background color defined.
background: $color__background-body;
position: relative;
&.admin-bar {
//if else breaks the WordPress inline styles when front end editing
position: inherit;
}
}
:root{
//check colors at sass/abstracts/variables/_colors.scss
--color-xxp-black: #000000;
--color-xxp-white: #ffffff;
--color-xxp-red: #f27173;
--color-xxp-yellow: #f6cc4c;
--color-xxp-green: #84c779;
--color-xxp-cyan: #61cae4;
--color-xxp-lila: #de7fb4;
--color-xxp-pink: #f58b77;
--color-xxp-violet: #5859a7;
//default bubble color definition
--bubble-color-01: var(--color-xxp-red);
--bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: var(--color-xxp-cyan);
--bubble-color-04: var(--color-xxp-green);
}
@media screen {
.home {
--bubble-color-01: var(--color-xxp-white);
--bubble-color-02: var(--color-xxp-red);
--bubble-color-03: var(--color-xxp-yellow);
--bubble-color-04: var(--color-xxp-white);
}
.page-id-617 //que es xarxaprod
{
--bubble-color-01: var(--color-xxp-violet);
--bubble-color-02: var(--color-xxp-white);
--bubble-color-03: var(--color-xxp-white);
--bubble-color-04: var(--color-xxp-yellow);
}
.page-id-626, //qui som junta
.page-id-2936, //comisions
.page-id-2937 //ofi tecnica
{
--bubble-color-01: var(--color-xxp-yellow);
--bubble-color-02: var(--color-xxp-white);
--bubble-color-03: var(--color-xxp-yellow);
--bubble-color-04: var(--color-xxp-lila);
}
.page-id-634 //que oferim
{
--bubble-color-01: var(--color-xxp-white);
--bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: var(--color-xxp-violet);
--bubble-color-04: var(--color-xxp-white);
}
.page-id-659 //premsa
{
--bubble-color-01: var(--color-xxp-cyan);
--bubble-color-02: var(--color-xxp-cyan);
--bubble-color-03: var(--color-xxp-yellow);
--bubble-color-04: var(--color-xxp-white);
}
.page-template-associats-search,
.post-type-archive-xarxaprod-associat
{
--bubble-color-01: var(--color-xxp-white);
--bubble-color-02: var(--color-xxp-green);
--bubble-color-03: var(--color-xxp-pink);
--bubble-color-04: var(--color-xxp-pink);
}
.single-xarxaprod-associat {
--bubble-color-01: var(--color-xxp-pink);
--bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: var(--color-xxp-pink);
--bubble-color-04: var(--color-xxp-white);
}
.page-template-arxiu-general,
.page-id-643 //arxiu-convos vell
{
--bubble-color-01: var(--color-xxp-white);
--bubble-color-02: var(--color-xxp-red);
--bubble-color-03: var(--color-xxp-red);
--bubble-color-04: var(--color-xxp-white);
}
.page-template-convos-search,
.post-type-archive-xarxaprod-convo
{
--bubble-color-01: var(--color-xxp-white);
--bubble-color-02: var(--color-xxp-pink);
--bubble-color-03: var(--color-xxp-green);
--bubble-color-04: var(--color-xxp-white);
}
.single-xarxaprod-convo {
--bubble-color-01: var(--color-xxp-lila);
--bubble-color-02: var(--color-xxp-white);
--bubble-color-03: var(--color-xxp-violet);
--bubble-color-04: var(--color-xxp-lila);
}
.page-template-agenda-search {
--bubble-color-01: var(--color-xxp-lila);
--bubble-color-02: var(--color-xxp-white);
--bubble-color-03: var(--color-xxp-white);
--bubble-color-04: var(--color-xxp-red);
}
.category-activitats {
--bubble-color-01: var(--color-xxp-white);
--bubble-color-02: var(--color-xxp-green);
--bubble-color-03: var(--color-xxp-cyan);
--bubble-color-04: var(--color-xxp-white);
}
.page-id-28, //espai assesorament
.page-template-faqs-page
{
--bubble-color-01: var(--color-xxp-white);
--bubble-color-02: var(--color-xxp-cyan);
--bubble-color-03: var(--color-xxp-violet);
--bubble-color-04: var(--color-xxp-white);
}
.page-template-ajut-search,
.post-type-archive-xarxaprod-ajut,
.single-xarxaprod-ajut
//.custom-post-type-ajuts
{
--bubble-color-01: var(--color-xxp-cyan);
--bubble-color-02: var(--color-xxp-white);
--bubble-color-03: var(--color-xxp-white);
--bubble-color-04: var(--color-xxp-violet);
}
.page-id-1673 //XarxaREC
{
--bubble-color-01: var(--color-xxp-yellow);
--bubble-color-02: var(--color-xxp-white);
--bubble-color-03: var(--color-xxp-green);
--bubble-color-04: var(--color-xxp-yellow);
}
.page-id-2366 //Firas i mercats
{
--bubble-color-01: var(--color-xxp-white);
--bubble-color-02: var(--color-xxp-violet);
--bubble-color-03: var(--color-xxp-red);
--bubble-color-04: var(--color-xxp-white);
}
.page-id-2364 //Sostenibilitat
{
--bubble-color-01: var(--color-xxp-green);
--bubble-color-02: var(--color-xxp-white);
--bubble-color-03: var(--color-xxp-white);
--bubble-color-04: var(--color-xxp-violet);
}
.page-id-2365 //projecte educatiu
{
--bubble-color-01: var(--color-xxp-lila);
--bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: var(--color-xxp-lila);
--bubble-color-04: var(--color-xxp-yellow);
}
.page-id-1760 //Mentoratge
{
--bubble-color-01: var(--color-xxp-cyan);
--bubble-color-02: var(--color-xxp-white);
--bubble-color-03: var(--color-xxp-lila);
--bubble-color-04: var(--color-xxp-cyan);
}
.liquid-bubbles {
overflow: hidden;
float: left;
position: fixed;
top: 0;
left: 0;
z-index: -1000;
width: 100vw;
height: 100vh;
}
.bubbles {
//--size: 40vw;
//--position: -5vw;
//filter: blur(8rem);
position:absolute;
width: var(--size);
height: var(--size);
border-radius: 20%;
background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
//animation: 4s ease-in-out 4s infinite alternate bubble-move;
&.bubble-01{
top: var(--position);
left: var(--position);
--bgcolor: var(--bubble-color-01);
//--bgangle: to bottom right;
--bgangle: 135deg;
animation: 5s ease-in-out 2s infinite alternate bubble-move;
}
&.bubble-02{
top: var(--position);
right: var(--position);
--bgcolor: var(--bubble-color-02);
//--bgangle: to bottom left;
--bgangle: 225deg;
animation: 3s ease-in-out 0s infinite alternate bubble-move;
}
&.bubble-03{
bottom: var(--position);
left: var(--position);
--bgcolor: var(--bubble-color-03);
//--bgangle: to top right;
--bgangle: 45deg;
animation: 2s ease-in-out 3s infinite alternate bubble-move;
}
&.bubble-04{
bottom: var(--position);
right: var(--position);
--bgcolor: var(--bubble-color-04);
//--bgangle: to top left;
--bgangle: 325deg;
animation: 4s ease-in-out 1s infinite alternate bubble-move;
}
}
2024-04-11 13:30:03 +02:00
}
@media screen and (max-width: 48em) {
@keyframes bubble-move {
from {
width: 50vw;
height: 70vh;
filter: blur(3rem);
/* transform: rotate(0);*/
}
to {
width: 100vw;
height: 40vh;
filter: blur(8rem);
/* transform: rotate(5deg);*/
}
}
.bubbles {
--size: 50vw;
--position: 0vw;
height: 70vh;
filter: blur(3rem);
border-radius: 3%;
}
2024-04-11 13:30:03 +02:00
}
@media screen and (min-width: 48em) {
@keyframes bubble-move {
from {
width: 40vw;
height: 40vw;
filter: blur(10rem);
/* transform: rotate(0);*/
}
to {
width: 90vw;
height: 20vw;
filter: blur(20rem);
/* transform: rotate(5deg);*/
}
}
.bubbles {
--size: 40vw;
--position: -5vw;
filter: blur(20rem);
}
2024-04-11 13:30:03 +02:00
}
@media screen and (min-width: 80em) {
2024-04-11 13:30:03 +02:00
}