Initial commit

This commit is contained in:
2021-05-31 22:36:54 +02:00
commit 50801d45ce
99 changed files with 4299 additions and 0 deletions

View File

@@ -0,0 +1 @@
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 757.18 757.18"><path d="M755.59,378.59c0-1.81,0-3.62,0-5.43,0-14.52-.25-29-.85-43.23-3.4-94.25-19.29-182.2-84.5-243-60.77-65.09-148.54-81-242.62-84.44-14.4-.61-29-.86-43.62-.86H373.16c-14.65,0-29.21.25-43.61.86C235.47,5.87,147.69,21.79,86.92,86.88,21.71,147.73,5.83,235.68,2.42,329.93c-.59,14.28-.84,28.71-.84,43.23,0,1.81,0,3.62,0,5.43s0,3.61,0,5.42c0,14.53.25,29,.84,43.23,3.41,94.25,19.29,182.21,84.5,243.06,60.77,65.08,148.55,81,242.63,84.44,14.4.6,29,.86,43.61.86H384c14.66,0,29.22-.26,43.62-.86,94.08-3.44,181.85-19.36,242.62-84.44,65.21-60.85,81.1-148.81,84.5-243.06.6-14.27.85-28.7.85-43.23C755.6,382.2,755.59,380.4,755.59,378.59Z"/></svg>

After

Width:  |  Height:  |  Size: 735 B

View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 9.4 9.3" style="enable-background:new 0 0 9.4 9.3;" xml:space="preserve">
<style type="text/css">
.st0{fill:#6CC11F;}
.st1{fill:#243887;}
.st2{fill:#1D1D1B;}
.st3{fill:#FF5300;}
.st4{fill:#FFFFFF;}
.st5{clip-path:url(#SVGID_2_);}
</style>
<path class="st0" d="M4.7,0C0.8,0,0,2.1,0,4.6c0,2.3,0.2,4.5,3.9,4.7V6H2.8V4.7h1.2v-1c0-1.2,0.7-1.8,1.8-1.8c0.5,0,1,0.1,1,0.1v1.2
H6.2c-0.6,0-0.8,0.4-0.8,0.7v0.9h1.3L6.5,6H5.4v3.3c3.5-0.2,4-2.3,4-4.7C9.4,2.2,8.9,0,4.7,0z"/>
</svg>

After

Width:  |  Height:  |  Size: 752 B

View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 9.4 9.4" style="enable-background:new 0 0 9.4 9.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:#6CC11F;}
.st1{fill:#FFFFFF;}
</style>
<path class="st0" d="M4.7,0C0.8,0,0,2.1,0,4.6C0,7,0.3,9.4,4.7,9.4c4.1,0,4.7-2.2,4.7-4.7S8.9,0,4.7,0z"/>
<g>
<g>
<path class="st1" d="M4.7,3.2c0.8,0,1.4,0.6,1.4,1.4S5.5,6,4.7,6S3.3,5.4,3.3,4.6C3.3,3.8,3.9,3.2,4.7,3.2z M3.8,4.6
c0,0.5,0.4,0.9,0.9,0.9s0.9-0.4,0.9-0.9S5.2,3.7,4.7,3.7C4.2,3.7,3.8,4.1,3.8,4.6z"/>
<path class="st1" d="M5.9,7.6H3.5c-0.9,0-1.7-0.8-1.7-1.7V3.5c0-0.9,0.8-1.7,1.7-1.7h2.3c0.9,0,1.7,0.8,1.7,1.7v2.3
C7.6,6.8,6.8,7.6,5.9,7.6z M5.9,7.2c0.7,0,1.3-0.6,1.3-1.3V3.5c0-0.7-0.6-1.3-1.3-1.3H3.5c-0.7,0-1.3,0.6-1.3,1.3v2.3
c0,0.7,0.6,1.3,1.3,1.3H5.9z"/>
</g>
<circle class="st1" cx="6.3" cy="3.1" r="0.3"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 9.4 9.4" style="enable-background:new 0 0 9.4 9.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:#6CC11F;}
.st1{fill:#243887;}
.st2{fill:#1D1D1B;}
.st3{fill:#FF5300;}
.st4{fill:#FFFFFF;}
.st5{clip-path:url(#SVGID_2_);}
</style>
<path class="st0" d="M9.4,4.6c0,2.6-0.6,4.7-4.7,4.7C0.3,9.4,0,7,0,4.6C0,2.1,0.8,0,4.7,0C8.9,0,9.4,2.2,9.4,4.6z M1.9,7.3h1.2V3.6
H1.9V7.3z M2.5,1.7C2.1,1.7,1.8,2,1.8,2.4c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C3.2,2,2.9,1.7,2.5,1.7z M6.1,3.5
c-0.6,0-0.9,0.3-1.1,0.6h0V3.6H3.8v3.8H5V5.5c0-0.5,0.1-1,0.7-1c0.6,0,0.6,0.6,0.6,1v1.8h1.2V5.3C7.5,4.3,7.2,3.5,6.1,3.5z"/>
</svg>

After

Width:  |  Height:  |  Size: 897 B

View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 9.4 9.4" style="enable-background:new 0 0 9.4 9.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:#6CC11F;}
.st1{fill:#243887;}
.st2{fill:#1D1D1B;}
.st3{fill:#FF5300;}
.st4{fill:#FFFFFF;}
.st5{clip-path:url(#SVGID_2_);}
</style>
<path class="st0" d="M4.7,0C0.8,0,0,2.1,0,4.6C0,7,0.3,9.4,4.7,9.4c4.1,0,4.7-2.2,4.7-4.7C9.4,2.2,8.9,0,4.7,0z M7,3.5
c0,0.1,0,0.1,0,0.2c0,1.6-1.2,3.4-3.4,3.4c-0.7,0-1.3-0.2-1.8-0.5c0.1,0,0.2,0,0.3,0c0.6,0,1.1-0.2,1.5-0.5C3,6,2.6,5.7,2.4,5.2
c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.3,0C2.4,5.1,2,4.6,2,4c0,0,0,0,0,0c0.2,0.1,0.3,0.1,0.5,0.1C2.2,3.9,2,3.5,2,3.1
c0-0.2,0.1-0.4,0.2-0.6c0.6,0.7,1.5,1.2,2.5,1.3c0-0.1,0-0.2,0-0.3c0-0.7,0.5-1.2,1.2-1.2c0.3,0,0.7,0.1,0.9,0.4
C7,2.6,7.2,2.5,7.4,2.4C7.4,2.7,7.2,2.9,6.9,3.1C7.2,3,7.4,3,7.6,2.9C7.4,3.1,7.2,3.3,7,3.5z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 9.4 9.4" style="enable-background:new 0 0 9.4 9.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:#6CC11F;}
.st1{fill:#243887;}
.st2{fill:#1D1D1B;}
.st3{fill:#FF5300;}
.st4{fill:#FFFFFF;}
.st5{clip-path:url(#SVGID_2_);}
</style>
<g>
<path class="st0" d="M4.7,0C0.8,0,0,2.1,0,4.6C0,7,0.3,9.4,4.7,9.4c4.1,0,4.7-2.2,4.7-4.7C9.4,2.2,8.9,0,4.7,0z M7.4,6
C7.4,6.3,7.2,6.5,6.9,6.5C6.5,6.6,4.7,6.6,4.7,6.6s-1.8,0-2.2-0.1C2.2,6.5,2,6.3,1.9,6C1.8,5.6,1.8,4.6,1.8,4.6s0-0.9,0.1-1.4
C2,3,2.2,2.8,2.4,2.7c0.4-0.1,2.2-0.1,2.2-0.1s1.8,0,2.2,0.1C7.2,2.8,7.4,3,7.4,3.2c0.1,0.4,0.1,1.4,0.1,1.4S7.5,5.6,7.4,6z"/>
<polygon class="st0" points="4.1,5.5 4.1,3.8 5.6,4.6 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 962 B

View File

@@ -0,0 +1,9 @@
function navbarToggleOnScroll() {
var el = document.getElementById("navbar");
if (window.pageYOffset >= 500) {
el.classList.add("scroll");
} else {
el.classList.remove("scroll");
}
};
window.addEventListener("scroll", navbarToggleOnScroll);

View File

@@ -0,0 +1,68 @@
@font-face {
font-family: "Manometer";
src: url("/fonts/manometer.woff2") format("woff2"),
url("/fonts/manometer.woff") format("woff");
}
@font-face {
font-family: "Bitter";
font-style: normal;
src: url("/fonts/Bitter-Regular.woff") format("woff");
}
$basefont: Bitter;
$brandfont: Manometer;
body {
font-family: $basefont;
margin: 0;
padding: 0;
}
.brand {
font-family: $brandfont;
}
h1, h2, h3, h4, h5, h6 {
font-family: Manometer;
font-weight: normal;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.3em;
}
h3 {
font-size: 1em;
}
h4 {
font-size: 0.8em;
}
p {
font-size: 1em;
}
#content {
margin-top: 3em;
}
.container {
margin: auto;
max-width: 1000px;
}
.cap {
text-transform: uppercase;
}
a {
text-decoration: none;
color: $brandblue;
}

View File

@@ -0,0 +1,3 @@
$breakpoint-prone: 600px !default;
$breakpoint-tablet: 992px !default;

View File

@@ -0,0 +1,18 @@
$bubbleshape: '<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 757.18 757.18"><path d="M755.59,378.59c0-1.81,0-3.62,0-5.43,0-14.52-.25-29-.85-43.23-3.4-94.25-19.29-182.2-84.5-243-60.77-65.09-148.54-81-242.62-84.44-14.4-.61-29-.86-43.62-.86H373.16c-14.65,0-29.21.25-43.61.86C235.47,5.87,147.69,21.79,86.92,86.88,21.71,147.73,5.83,235.68,2.42,329.93c-.59,14.28-.84,28.71-.84,43.23,0,1.81,0,3.62,0,5.43s0,3.61,0,5.42c0,14.53.25,29,.84,43.23,3.41,94.25,19.29,182.21,84.5,243.06,60.77,65.08,148.55,81,242.63,84.44,14.4.6,29,.86,43.61.86H384c14.66,0,29.22-.26,43.62-.86,94.08-3.44,181.85-19.36,242.62-84.44,65.21-60.85,81.1-148.81,84.5-243.06.6-14.27.85-28.7.85-43.23C755.6,382.2,755.59,380.4,755.59,378.59Z"/></svg>';
.bg-bubble {
mask-image: url("data:image/svg+xml;charset=utf-8,#{$bubbleshape}");
}
.icon-bubble {
display: flex;
text-align: center;
img {
justify-content: center;
align-items: center;
margin: auto;
width: 65%;
}
}

View File

@@ -0,0 +1,111 @@
$brandblue: #243887 !default;
$green: #6cc11f !default;
$orange: #ff5300 !default;
$yellow: #ffdd00 !default;
$red: #ff1300 !default;
$lightblue: #00beff !default;
$blue: #907eff !default;
$white: #ffffff !default;
/* Defaults parameters */
$primarycolor: $brandblue !default;
$secondarycolor: $green !default;
$warningcolor: $red !default;
$backgroundcolor: $white !default;
$reversecolor: $white !default;
/* TEXT COLORS */
.primary {
color: $primarycolor;
}
.secondary {
color: $secondarycolor;
}
.warning {
color: $warningcolor;
}
.reverse {
color: $reversecolor;
}
.brandblue {
color: $brandblue;
}
.green {
color: $green;
}
.orange {
color: $orange;
}
.yellow {
color: $yellow;
}
.red {
color: $red;
}
.lightblue {
color: $lightblue;
}
.blue {
color: $blue;
}
.white {
color: $white;
}
/* BACKGROUNDS */
.bg-primary {
background-color: $primarycolor;
}
.bg-secondary {
background-color: $secondarycolor;
}
.bg-warning {
background-color: $warningcolor;
}
.bg-brandblue {
background-color: $brandblue;
}
.bg-green {
background-color: $green;
}
.bg-orange {
background-color: $orange;
}
.bg-yellow {
background-color: $yellow;
}
.bg-red {
background-color: $red;
}
.bg-lightblue {
background-color: $lightblue;
}
.bg-blue {
background-color: $blue;
}
.bg-white {
background-color: $white;
}

View File

@@ -0,0 +1,23 @@
.flex-row {
display: flex;
}
.flex-1 {
flex: 1;
}
.wrap {
flex-wrap: wrap;
}
.j-center {
justify-content: center;
}
.ai-center {
align-items: center;
}
.direction-row-reverse {
flex-direction: row-reverse;
}

View File

@@ -0,0 +1,77 @@
/* WIDTH */
$widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1024);
@each $width in $widthvalues {
.w-#{$width} {
width: #{$width}px;
}
.max-w-#{$width} {
max-width: #{$width}px;
}
.min-w-#{$width} {
min-width: #{$width}px;
}
.h-#{$width} {
height: #{$width}px;
}
.max-h-#{$width} {
max-height: #{$width}px;
}
.min-h-#{$width} {
min-height: #{$width}px;
}
}
.w-full {
width: 100% !important;
}
/* POSITIONING */
.ta-r {
text-align: right;
}
.ta-l {
text-align: left;
}
.ta-c {
text-align: center;
}
.ta-j {
text-align: justify;
}
/* SPACINGS */
.m-auto {
margin: auto;
}
$spaceamounts: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 200, 300);
$sides: (top, bottom, left, right);
@each $space in $spaceamounts {
.m-#{$space} {
margin: #{$space}px !important;
}
.p-#{$space} {
padding: #{$space}px !important;
}
@each $side in $sides {
.m-#{str-slice($side, 0, 1)}-#{$space} {
margin-#{$side}: #{$space}px !important;
}
.p-#{str-slice($side, 0, 1)}-#{$space} {
padding-#{$side}: #{$space}px !important;
}
}
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,28 @@
nav {
z-index: 100;
height: 3em;
display: flex;
justify-content: flex-between;
align-items: center;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
/* Menus */
ul {
justify-content: flex-evenly;
display: flex;
li {
flex: 1;
display: inline;
text-align: center;
list-style: none;
a {
color: inherit;
text-decoration: none;
}
}
}
}

View File

@@ -0,0 +1 @@
@import 'colors', 'breakpoints', 'base', 'helpers', 'nav', 'flexbox', 'bubbles'

View File

@@ -0,0 +1,82 @@
@import 'coopgo-web-ui-kit/styles';
// @import 'colors' <- we use the library's default values for colors, we don't need this
nav {
.left {
flex:0;
text-align: left;
background-color: $backgroundcolor;
img {
margin: 1em;
height: 1.3em;
}
}
.center {
flex:1;
color: $primarycolor;
font-size: 1em;
background-color: $backgroundcolor;
}
.right {
font-family: $brandfont;
color: $white;
}
@media(max-width: $breakpoint-tablet) {
.right {
display: none;
}
}
}
.content {
h1 {
padding-top: 50px;
text-align: center;
color: $primarycolor;
}
h2 {
text-align: justify;
color: $secondarycolor;
}
div {
min-width: 200px;
}
p {
text-align: justify;
}
img {
max-width: 100%;
}
}
.scroll {
.right {
background-color: $primarycolor;
}
}
#footer {
#realFooter {
border-top: 1px solid $primarycolor;
}
ul {
li {
list-style: none;
}
}
}
@media(max-width: $breakpoint-tablet) {
.featuredimage {
display: none;
}
}