added corporate colors and defined bubble colors

This commit is contained in:
jorge 2024-04-12 12:43:46 +02:00
parent 7e88861955
commit db6dc06d56
8 changed files with 803 additions and 663 deletions

View File

@ -30,15 +30,15 @@ A WordPress theme for the Xarxaprod.cat
### Colors ### Colors
The colors used in the design are: The colors used in the design are:
- black: #000000 - black: `#000000` `rgb(0,0,0)`
- white: #ffffff - white: `#ffffff` `rgb(255,255,255)`
- salmon: #ff866f - red: `#f27173` `rgb(242,113,115)`
- yellow: #ffcb1f - yellow: `#f6cc4c` `rgb(246,204,076)`
- pink: #ff6bc3 - green: `#84c779` `rgb(132,199,121)`
- violet: #651aff - cyan: `#61cae4` `rgb(97,202,228)`
- cyan: #00d1ec - lila: `#de7fb4` `rgb(222,127,180)`
- green: #00f274 - pink: `#f58b77` `rgb(245,139,119)`
- red: #ff5a69 - violet: `#5859a7` `rgb(88,89,167)`
### Fonts ### Fonts

View File

@ -970,151 +970,162 @@ Add your custom styles in this file so it is easier to update the theme.
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper :root { .edit-post-visual-editor__content-area .editor-styles-wrapper :root {
--bubble-color-01: #ff5a69; --color-xxp-black: #000;
--bubble-color-02: #ffcb1f; --color-xxp-white: #fff;
--bubble-color-03: #00d1ec; --color-xxp-red: #f27173;
--bubble-color-04: #00f274; --color-xxp-yellow: #f6cc4c;
--color-xxp-green: #84c779;
--color-xxp-cyan: #61cae4;
--color-xxp-lila: #de7fb4;
--color-xxp-pink: #f58b77;
--color-xxp-violet: #5859a7;
--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 {
.edit-post-visual-editor__content-area .editor-styles-wrapper .home { .edit-post-visual-editor__content-area .editor-styles-wrapper .home {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #ff79a8; --bubble-color-02: var(--color-xxp-red);
--bubble-color-03: #ff9221; --bubble-color-03: var(--color-xxp-yellow);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-617 { .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-617 {
--bubble-color-01: #4a30f4; --bubble-color-01: var(--color-xxp-violet);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #fff; --bubble-color-03: var(--color-xxp-white);
--bubble-color-04: #f6ca43; --bubble-color-04: var(--color-xxp-yellow);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-626, .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-626,
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2936, .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2936,
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2937 { .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2937 {
--bubble-color-01: #ffcb1f; --bubble-color-01: var(--color-xxp-yellow);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #fff; --bubble-color-03: var(--color-xxp-yellow);
--bubble-color-04: #ff79a8; --bubble-color-04: var(--color-xxp-lila);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-634 { .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-634 {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #f6ca43; --bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: #4a30f4; --bubble-color-03: var(--color-xxp-violet);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-659 { .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-659 {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-cyan);
--bubble-color-02: #6cd3eb; --bubble-color-02: var(--color-xxp-cyan);
--bubble-color-03: #f6ca43; --bubble-color-03: var(--color-xxp-yellow);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-associats-search, .edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-associats-search,
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-associat { .edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-associat {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #68ed81; --bubble-color-02: var(--color-xxp-green);
--bubble-color-03: #ff79a8; --bubble-color-03: var(--color-xxp-pink);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-pink);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat { .edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat {
--bubble-color-01: #ff9221; --bubble-color-01: var(--color-xxp-pink);
--bubble-color-02: #f6ca43; --bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: #ff866f; --bubble-color-03: var(--color-xxp-pink);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-arxiu-general, .edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-arxiu-general,
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-643 { .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-643 {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #f61818; --bubble-color-02: var(--color-xxp-red);
--bubble-color-03: #f61818; --bubble-color-03: var(--color-xxp-red);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-convos-search, .edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-convos-search,
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-convo { .edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-convo {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #ff5a69; --bubble-color-02: var(--color-xxp-pink);
--bubble-color-03: #00f274; --bubble-color-03: var(--color-xxp-green);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-convo { .edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-convo {
--bubble-color-01: #e572ba; --bubble-color-01: var(--color-xxp-lila);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #4a30f4; --bubble-color-03: var(--color-xxp-violet);
--bubble-color-04: #e572ba; --bubble-color-04: var(--color-xxp-lila);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-agenda-search { .edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-agenda-search {
--bubble-color-01: #e158ae; --bubble-color-01: var(--color-xxp-lila);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #fff; --bubble-color-03: var(--color-xxp-white);
--bubble-color-04: #ff5a69; --bubble-color-04: var(--color-xxp-red);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .category-activitats { .edit-post-visual-editor__content-area .editor-styles-wrapper .category-activitats {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #00f274; --bubble-color-02: var(--color-xxp-green);
--bubble-color-03: #6cd3eb; --bubble-color-03: var(--color-xxp-cyan);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-28, .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-28,
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-faqs-page { .edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-faqs-page {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #6cd3eb; --bubble-color-02: var(--color-xxp-cyan);
--bubble-color-03: #4a30f4; --bubble-color-03: var(--color-xxp-violet);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-ajut-search, .edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-ajut-search,
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-ajut, .edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-ajut,
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-ajut { .edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-ajut {
--bubble-color-01: #6cd3eb; --bubble-color-01: var(--color-xxp-cyan);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #fff; --bubble-color-03: var(--color-xxp-white);
--bubble-color-04: #4a30f4; --bubble-color-04: var(--color-xxp-violet);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-1673 { .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-1673 {
--bubble-color-01: #f6ca43; --bubble-color-01: var(--color-xxp-yellow);
--bubble-color-02: #ff9221; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #00f274; --bubble-color-03: var(--color-xxp-green);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-yellow);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2366 { .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2366 {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #4a30f4; --bubble-color-02: var(--color-xxp-violet);
--bubble-color-03: #ff5a69; --bubble-color-03: var(--color-xxp-red);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2364 { .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2364 {
--bubble-color-01: #00f274; --bubble-color-01: var(--color-xxp-green);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #fff; --bubble-color-03: var(--color-xxp-white);
--bubble-color-04: #4a30f4; --bubble-color-04: var(--color-xxp-violet);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2365 { .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2365 {
--bubble-color-01: #e572ba; --bubble-color-01: var(--color-xxp-lila);
--bubble-color-02: #f6ca43; --bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: #e572ba; --bubble-color-03: var(--color-xxp-lila);
--bubble-color-04: #f6ca43; --bubble-color-04: var(--color-xxp-yellow);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-1760 { .edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-1760 {
--bubble-color-01: #6cd3eb; --bubble-color-01: var(--color-xxp-cyan);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #fff; --bubble-color-03: var(--color-xxp-lila);
--bubble-color-04: #6cd3eb; --bubble-color-04: var(--color-xxp-cyan);
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .liquid-bubbles { .edit-post-visual-editor__content-area .editor-styles-wrapper .liquid-bubbles {
@ -1128,29 +1139,7 @@ Add your custom styles in this file so it is easier to update the theme.
height: 100vh; height: 100vh;
} }
@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);*/
}
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles { .edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles {
--size: 40vw;
--position: -5vw;
filter: blur(20rem);
position: absolute; position: absolute;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
@ -1189,6 +1178,65 @@ Add your custom styles in this file so it is easier to update the theme.
--bgangle: 325deg; --bgangle: 325deg;
animation: 4s ease-in-out 1s infinite alternate bubble-move; animation: 4s ease-in-out 1s infinite alternate bubble-move;
} }
}
@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);*/
}
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles {
--size: 50vw;
--position: 0;
height: 70vh;
filter: blur(3rem);
border-radius: 3%;
}
}
@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);*/
}
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles {
--size: 40vw;
--position: -5vw;
filter: blur(20rem);
}
}
.edit-post-visual-editor__content-area .editor-styles-wrapper hr { .edit-post-visual-editor__content-area .editor-styles-wrapper hr {
background-color: #000; background-color: #000;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,21 +1,21 @@
$color__xxp-black: #000000; $color__xxp-black: #000000;
$color__xxp-black-rgb: rgb(0,0,0);
$color__xxp-white: #ffffff; $color__xxp-white: #ffffff;
$color__xxp-salmon: #ff866f; $color__xxp-white-rgb: rgb(255,255,255);
$color__xxp-yellow: #ffcb1f; $color__xxp-red: #f27173;
$color__xxp-pink: #ff6bc3; $color__xxp-red-rgb: rgb(242,113,115);
$color__xxp-violet: #651aff; $color__xxp-yellow: #f6cc4c;
$color__xxp-cyan: #00d1ec; $color__xxp-yellow-rgb: rgb(246,204,076);
$color__xxp-green: #00f274; $color__xxp-green: #84c779;
$color__xxp-red: #ff5a69; $color__xxp-green-rgb: rgb(132,199,121);
$color__xxp-lila: #ff79a8; $color__xxp-cyan: #61cae4;
$color__xxp-orange: #ff9221; $color__xxp-cyan-rgb: rgb(97,202,228);
$color__xxp-blue: #4a30f4; $color__xxp-lila: #de7fb4;
$color__xxp-yellow-2: #f6ca43; $color__xxp-lila-rgb: rgb(222,127,180);
$color__xxp-green-2: #68ed81; $color__xxp-pink: #f58b77;
$color__xxp-pink: #e572ba; $color__xxp-pink-rgb: rgb(245,139,119);
$color__xxp-red-2: #f61818; $color__xxp-violet: #5859a7;
$color__xxp-cyan: #6cd3eb; $color__xxp-violet-rgb: rgb(88,89,167);
$color__xxp-lila-2: #e158ae;
$color__white: #fff; $color__white: #fff;
$color__white-dark: #fdfdfd; $color__white-dark: #fdfdfd;

View File

@ -1,161 +1,170 @@
body { body {
background: $color__background-body; // Fallback for when there is no custom background color defined. //Fallback for when there is no custom background color defined.
//background-image: url(./assets/img/background-colors-02.jpg); background: $color__background-body;
//background-size: cover;
//background-position: center center;
//background-repeat: no-repeat;
position: relative; position: relative;
&.admin-bar { //if else breaks the WordPress inline styles when front end editing &.admin-bar {
//if else breaks the WordPress inline styles when front end editing
position: inherit; position: inherit;
} }
} }
:root{ :root{
//check colors at sass/abstracts/variables/_colors.scss //check colors at sass/abstracts/variables/_colors.scss
--bubble-color-01: #ff5a69; //$color__xxp-red; --color-xxp-black: #000000;
--bubble-color-02: #ffcb1f; //$color__xxp-yellow; --color-xxp-white: #ffffff;
--bubble-color-03: #00d1ec; //$color__xxp-cyan; --color-xxp-red: #f27173;
--bubble-color-04: #00f274; //$color__xxp-green; --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);
} }
//bubble color definition @media screen {
.home { .home {
--bubble-color-01: #ffffff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #ff79a8; //$color__xxp-lila; --bubble-color-02: var(--color-xxp-red);
--bubble-color-03: #ff9221; //$color__xxp-orange; --bubble-color-03: var(--color-xxp-yellow);
--bubble-color-04: #ffffff; --bubble-color-04: var(--color-xxp-white);
} }
.page-id-617 //que es xarxaprod .page-id-617 //que es xarxaprod
{ {
--bubble-color-01: #4a30f4; //$color__xxp-blue; --bubble-color-01: var(--color-xxp-violet);
--bubble-color-02: #ffffff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #ffffff; --bubble-color-03: var(--color-xxp-white);
--bubble-color-04: #f6ca43; //$color__xxp-yellow-2; --bubble-color-04: var(--color-xxp-yellow);
} }
.page-id-626, //qui som junta .page-id-626, //qui som junta
.page-id-2936, //comisions .page-id-2936, //comisions
.page-id-2937 //ofi tecnica .page-id-2937 //ofi tecnica
{ {
--bubble-color-01: #ffcb1f; --bubble-color-01: var(--color-xxp-yellow);
--bubble-color-02: #ffffff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #ffffff; --bubble-color-03: var(--color-xxp-yellow);
--bubble-color-04: #ff79a8; --bubble-color-04: var(--color-xxp-lila);
} }
.page-id-634 //que oferim .page-id-634 //que oferim
{ {
--bubble-color-01: #ffffff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #f6ca43; --bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: #4a30f4; --bubble-color-03: var(--color-xxp-violet);
--bubble-color-04: #ffffff; --bubble-color-04: var(--color-xxp-white);
} }
.page-id-659 //premsa .page-id-659 //premsa
{ {
--bubble-color-01: #ffffff; --bubble-color-01: var(--color-xxp-cyan);
--bubble-color-02: #6cd3eb; --bubble-color-02: var(--color-xxp-cyan);
--bubble-color-03: #f6ca43; --bubble-color-03: var(--color-xxp-yellow);
--bubble-color-04: #ffffff; --bubble-color-04: var(--color-xxp-white);
} }
.page-template-associats-search, .page-template-associats-search,
.post-type-archive-xarxaprod-associat .post-type-archive-xarxaprod-associat
{ {
--bubble-color-01: #ffffff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #68ed81; --bubble-color-02: var(--color-xxp-green);
--bubble-color-03: #ff79a8; --bubble-color-03: var(--color-xxp-pink);
--bubble-color-04: #ffffff; --bubble-color-04: var(--color-xxp-pink);
} }
.single-xarxaprod-associat { .single-xarxaprod-associat {
--bubble-color-01: #ff9221; --bubble-color-01: var(--color-xxp-pink);
--bubble-color-02: #f6ca43; --bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: #ff866f; --bubble-color-03: var(--color-xxp-pink);
--bubble-color-04: #ffffff; --bubble-color-04: var(--color-xxp-white);
} }
.page-template-arxiu-general, .page-template-arxiu-general,
.page-id-643 //arxiu-convos vell .page-id-643 //arxiu-convos vell
{ {
--bubble-color-01: #ffffff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #f61818; --bubble-color-02: var(--color-xxp-red);
--bubble-color-03: #f61818; --bubble-color-03: var(--color-xxp-red);
--bubble-color-04: #ffffff; --bubble-color-04: var(--color-xxp-white);
} }
.page-template-convos-search, .page-template-convos-search,
.post-type-archive-xarxaprod-convo .post-type-archive-xarxaprod-convo
{ {
--bubble-color-01: #ffffff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #ff5a69; --bubble-color-02: var(--color-xxp-pink);
--bubble-color-03: #00f274; --bubble-color-03: var(--color-xxp-green);
--bubble-color-04: #ffffff; --bubble-color-04: var(--color-xxp-white);
} }
.single-xarxaprod-convo { .single-xarxaprod-convo {
--bubble-color-01: #e572ba; --bubble-color-01: var(--color-xxp-lila);
--bubble-color-02: #ffffff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #4a30f4; --bubble-color-03: var(--color-xxp-violet);
--bubble-color-04: #e572ba; --bubble-color-04: var(--color-xxp-lila);
} }
.page-template-agenda-search { .page-template-agenda-search {
--bubble-color-01: #e158ae; --bubble-color-01: var(--color-xxp-lila);
--bubble-color-02: #ffffff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #ffffff; --bubble-color-03: var(--color-xxp-white);
--bubble-color-04: #ff5a69; --bubble-color-04: var(--color-xxp-red);
} }
.category-activitats { .category-activitats {
--bubble-color-01: #ffffff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #00f274; --bubble-color-02: var(--color-xxp-green);
--bubble-color-03: #6cd3eb; --bubble-color-03: var(--color-xxp-cyan);
--bubble-color-04: #ffffff; --bubble-color-04: var(--color-xxp-white);
} }
.page-id-28, //espai assesorament .page-id-28, //espai assesorament
.page-template-faqs-page .page-template-faqs-page
{ {
--bubble-color-01: #ffffff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #6cd3eb; --bubble-color-02: var(--color-xxp-cyan);
--bubble-color-03: #4a30f4; --bubble-color-03: var(--color-xxp-violet);
--bubble-color-04: #ffffff; --bubble-color-04: var(--color-xxp-white);
} }
.page-template-ajut-search, .page-template-ajut-search,
.post-type-archive-xarxaprod-ajut, .post-type-archive-xarxaprod-ajut,
.single-xarxaprod-ajut .single-xarxaprod-ajut
//.custom-post-type-ajuts //.custom-post-type-ajuts
{ {
--bubble-color-01: #6cd3eb; --bubble-color-01: var(--color-xxp-cyan);
--bubble-color-02: #ffffff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #ffffff; --bubble-color-03: var(--color-xxp-white);
--bubble-color-04: #4a30f4; --bubble-color-04: var(--color-xxp-violet);
} }
.page-id-1673 //XarxaREC .page-id-1673 //XarxaREC
{ {
--bubble-color-01: #f6ca43; --bubble-color-01: var(--color-xxp-yellow);
--bubble-color-02: #ff9221; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #00f274; --bubble-color-03: var(--color-xxp-green);
--bubble-color-04: #ffffff; --bubble-color-04: var(--color-xxp-yellow);
} }
.page-id-2366 //Firas i mercats .page-id-2366 //Firas i mercats
{ {
--bubble-color-01: #ffffff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #4a30f4; --bubble-color-02: var(--color-xxp-violet);
--bubble-color-03: #ff5a69; --bubble-color-03: var(--color-xxp-red);
--bubble-color-04: #ffffff; --bubble-color-04: var(--color-xxp-white);
} }
.page-id-2364 //Sostenibilitat .page-id-2364 //Sostenibilitat
{ {
--bubble-color-01: #00f274; --bubble-color-01: var(--color-xxp-green);
--bubble-color-02: #ffffff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #ffffff; --bubble-color-03: var(--color-xxp-white);
--bubble-color-04: #4a30f4; --bubble-color-04: var(--color-xxp-violet);
} }
.page-id-2365 //projecte educatiu .page-id-2365 //projecte educatiu
{ {
--bubble-color-01: #e572ba; --bubble-color-01: var(--color-xxp-lila);
--bubble-color-02: #f6ca43; --bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: #e572ba; --bubble-color-03: var(--color-xxp-lila);
--bubble-color-04: #f6ca43; --bubble-color-04: var(--color-xxp-yellow);
} }
.page-id-1760 //Mentoratge .page-id-1760 //Mentoratge
{ {
--bubble-color-01: #6cd3eb; --bubble-color-01: var(--color-xxp-cyan);
--bubble-color-02: #ffffff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #ffffff; --bubble-color-03: var(--color-xxp-lila);
--bubble-color-04: #6cd3eb; --bubble-color-04: var(--color-xxp-cyan);
} }
.liquid-bubbles { .liquid-bubbles {
overflow: hidden; overflow: hidden;
@ -168,24 +177,10 @@ body {
height: 100vh; height: 100vh;
} }
@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 { .bubbles {
--size: 40vw; //--size: 40vw;
--position: -5vw; //--position: -5vw;
filter: blur(20rem); //filter: blur(8rem);
position:absolute; position:absolute;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
@ -225,3 +220,52 @@ body {
animation: 4s ease-in-out 1s infinite alternate bubble-move; animation: 4s ease-in-out 1s infinite alternate bubble-move;
} }
} }
}
@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%;
}
}
@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);
}
}
@media screen and (min-width: 80em) {
}

252
style.css
View File

@ -827,151 +827,162 @@ body.admin-bar {
} }
:root { :root {
--bubble-color-01: #ff5a69; --color-xxp-black: #000;
--bubble-color-02: #ffcb1f; --color-xxp-white: #fff;
--bubble-color-03: #00d1ec; --color-xxp-red: #f27173;
--bubble-color-04: #00f274; --color-xxp-yellow: #f6cc4c;
--color-xxp-green: #84c779;
--color-xxp-cyan: #61cae4;
--color-xxp-lila: #de7fb4;
--color-xxp-pink: #f58b77;
--color-xxp-violet: #5859a7;
--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 { .home {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #ff79a8; --bubble-color-02: var(--color-xxp-red);
--bubble-color-03: #ff9221; --bubble-color-03: var(--color-xxp-yellow);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.page-id-617 { .page-id-617 {
--bubble-color-01: #4a30f4; --bubble-color-01: var(--color-xxp-violet);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #fff; --bubble-color-03: var(--color-xxp-white);
--bubble-color-04: #f6ca43; --bubble-color-04: var(--color-xxp-yellow);
} }
.page-id-626, .page-id-626,
.page-id-2936, .page-id-2936,
.page-id-2937 { .page-id-2937 {
--bubble-color-01: #ffcb1f; --bubble-color-01: var(--color-xxp-yellow);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #fff; --bubble-color-03: var(--color-xxp-yellow);
--bubble-color-04: #ff79a8; --bubble-color-04: var(--color-xxp-lila);
} }
.page-id-634 { .page-id-634 {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #f6ca43; --bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: #4a30f4; --bubble-color-03: var(--color-xxp-violet);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.page-id-659 { .page-id-659 {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-cyan);
--bubble-color-02: #6cd3eb; --bubble-color-02: var(--color-xxp-cyan);
--bubble-color-03: #f6ca43; --bubble-color-03: var(--color-xxp-yellow);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.page-template-associats-search, .page-template-associats-search,
.post-type-archive-xarxaprod-associat { .post-type-archive-xarxaprod-associat {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #68ed81; --bubble-color-02: var(--color-xxp-green);
--bubble-color-03: #ff79a8; --bubble-color-03: var(--color-xxp-pink);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-pink);
} }
.single-xarxaprod-associat { .single-xarxaprod-associat {
--bubble-color-01: #ff9221; --bubble-color-01: var(--color-xxp-pink);
--bubble-color-02: #f6ca43; --bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: #ff866f; --bubble-color-03: var(--color-xxp-pink);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.page-template-arxiu-general, .page-template-arxiu-general,
.page-id-643 { .page-id-643 {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #f61818; --bubble-color-02: var(--color-xxp-red);
--bubble-color-03: #f61818; --bubble-color-03: var(--color-xxp-red);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.page-template-convos-search, .page-template-convos-search,
.post-type-archive-xarxaprod-convo { .post-type-archive-xarxaprod-convo {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #ff5a69; --bubble-color-02: var(--color-xxp-pink);
--bubble-color-03: #00f274; --bubble-color-03: var(--color-xxp-green);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.single-xarxaprod-convo { .single-xarxaprod-convo {
--bubble-color-01: #e572ba; --bubble-color-01: var(--color-xxp-lila);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #4a30f4; --bubble-color-03: var(--color-xxp-violet);
--bubble-color-04: #e572ba; --bubble-color-04: var(--color-xxp-lila);
} }
.page-template-agenda-search { .page-template-agenda-search {
--bubble-color-01: #e158ae; --bubble-color-01: var(--color-xxp-lila);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #fff; --bubble-color-03: var(--color-xxp-white);
--bubble-color-04: #ff5a69; --bubble-color-04: var(--color-xxp-red);
} }
.category-activitats { .category-activitats {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #00f274; --bubble-color-02: var(--color-xxp-green);
--bubble-color-03: #6cd3eb; --bubble-color-03: var(--color-xxp-cyan);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.page-id-28, .page-id-28,
.page-template-faqs-page { .page-template-faqs-page {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #6cd3eb; --bubble-color-02: var(--color-xxp-cyan);
--bubble-color-03: #4a30f4; --bubble-color-03: var(--color-xxp-violet);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.page-template-ajut-search, .page-template-ajut-search,
.post-type-archive-xarxaprod-ajut, .post-type-archive-xarxaprod-ajut,
.single-xarxaprod-ajut { .single-xarxaprod-ajut {
--bubble-color-01: #6cd3eb; --bubble-color-01: var(--color-xxp-cyan);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #fff; --bubble-color-03: var(--color-xxp-white);
--bubble-color-04: #4a30f4; --bubble-color-04: var(--color-xxp-violet);
} }
.page-id-1673 { .page-id-1673 {
--bubble-color-01: #f6ca43; --bubble-color-01: var(--color-xxp-yellow);
--bubble-color-02: #ff9221; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #00f274; --bubble-color-03: var(--color-xxp-green);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-yellow);
} }
.page-id-2366 { .page-id-2366 {
--bubble-color-01: #fff; --bubble-color-01: var(--color-xxp-white);
--bubble-color-02: #4a30f4; --bubble-color-02: var(--color-xxp-violet);
--bubble-color-03: #ff5a69; --bubble-color-03: var(--color-xxp-red);
--bubble-color-04: #fff; --bubble-color-04: var(--color-xxp-white);
} }
.page-id-2364 { .page-id-2364 {
--bubble-color-01: #00f274; --bubble-color-01: var(--color-xxp-green);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #fff; --bubble-color-03: var(--color-xxp-white);
--bubble-color-04: #4a30f4; --bubble-color-04: var(--color-xxp-violet);
} }
.page-id-2365 { .page-id-2365 {
--bubble-color-01: #e572ba; --bubble-color-01: var(--color-xxp-lila);
--bubble-color-02: #f6ca43; --bubble-color-02: var(--color-xxp-yellow);
--bubble-color-03: #e572ba; --bubble-color-03: var(--color-xxp-lila);
--bubble-color-04: #f6ca43; --bubble-color-04: var(--color-xxp-yellow);
} }
.page-id-1760 { .page-id-1760 {
--bubble-color-01: #6cd3eb; --bubble-color-01: var(--color-xxp-cyan);
--bubble-color-02: #fff; --bubble-color-02: var(--color-xxp-white);
--bubble-color-03: #fff; --bubble-color-03: var(--color-xxp-lila);
--bubble-color-04: #6cd3eb; --bubble-color-04: var(--color-xxp-cyan);
} }
.liquid-bubbles { .liquid-bubbles {
@ -985,29 +996,7 @@ body.admin-bar {
height: 100vh; height: 100vh;
} }
@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 { .bubbles {
--size: 40vw;
--position: -5vw;
filter: blur(20rem);
position: absolute; position: absolute;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
@ -1046,6 +1035,65 @@ body.admin-bar {
--bgangle: 325deg; --bgangle: 325deg;
animation: 4s ease-in-out 1s infinite alternate bubble-move; animation: 4s ease-in-out 1s infinite alternate bubble-move;
} }
}
@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: 0;
height: 70vh;
filter: blur(3rem);
border-radius: 3%;
}
}
@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);
}
}
hr { hr {
background-color: #000; background-color: #000;

File diff suppressed because one or more lines are too long