chill_hugoplate/assets/scss/custom.scss

196 lines
4.9 KiB
SCSS
Executable File

///// HOMEPAGE
/// Chill brand colors
$chill-blue: #334d5c;
$chill-green: #43b29d;
$chill-beige: #d3c7b1;
$chill-red: #dc516d;
$chill-pink: #e57469;
$chill-orange: #e89463;
$chill-lightgray: #efefef;
$chill-yellow: #f1d275;
/// Other custom colors
$bg-dark-blue: #0d242e;
$bg-light-blue: #a0dcff;
$btn-orange: #f46839;
$text-green: #56c4aa;
$icon-red: #f0384d;
$icon-yellow: #fcc958;
// Pattern
// hugo needs to precompile images in public dir, and make it automatically with images called from content.
// here we need to use it in css, then need to generate it, calling it first from a content md file.
@mixin add-bg-pattern($id) {
background-repeat: repeat;
background-position: top center;
background-image: url('../images/bg/pattern-#{$id}.png');
}
// Sections bg transitions
@mixin add-horizontal-curve($id, $pos) {
position: relative;
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: url('../images/svg/curve-#{$id}.svg');
background-size: contain;
background-position: $pos center;
background-repeat: no-repeat;
pointer-events: none;
}
}
// Colored design element: square or circle
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1 , $pos: -70px) {
position: relative;
z-index: 1;
&:before {
content: '';
position: absolute;
width: 45px * $scale;
height: 45px * $scale;
left: $pos;
top: -20px;
background-color: $color;
z-index: 0;
@if $shape == 'circle' {
border-radius: 25px;
}
@else {
border-radius: 0;
}
}
}
// Theme custom sections
header.header {
background-color: $bg-dark-blue;
}
main > section {
h2 {
width: fit-content;
}
&.hero {
background-color: $bg-dark-blue;
@include add-bg-pattern(1);
@include add-horizontal-curve(1, bottom);
h1 { color: $text-green; }
}
&.section-1 {
li { font-weight: 600; }
}
&.section-2 {
background-color: transparentize($color: $text-green, $amount: 0.7)
}
&.section-3 {
background-color: $text-green;
//@include add-horizontal-curve(4, bottom);
h2 {
@include add-decorative-shape($icon-red, 'circle');
}
}
&.section-4 {
//@include add-horizontal-curve(2, bottom);
}
&.section-5 {
background-color: transparentize($color: $text-green, $amount: 0.5)
}
&.section-6 {
background-color: $bg-dark-blue;
@include add-bg-pattern(1);
}
&.section-7 {
background-color: $text-green;
h2 {
@include add-decorative-shape($icon-yellow);
}
}
}
.dark > footer {
margin-top: 4rem;
@include add-horizontal-curve(3, top);
&:before {
top: -70px;
}
}
section {
// Change bulletlists rendering in flex bloc
&.li-block {
.container .row {
& > div {
&:last-child {
width: 100%;
}
h2, p {
margin-left: auto;
margin-right: auto;
}
ul {
display: flex;
li {
i:first-child {
display: none;
}
flex: 1 0 0;
margin: 0.5em;
padding: 1.5em;
text-align: center;
border-radius: 4px;
background-color: #ffffff3b;
}
}
}
}
// Add custom colored icons on each item
&.section-1 {
ul li {
&:nth-child(1) {
@include add-decorative-shape($text-green, 'square', 0.7, 110px);
}
&:nth-child(2) {
@include add-decorative-shape($icon-red, 'circle', 0.7, 110px);
}
&:nth-child(3) {
@include add-decorative-shape($chill-orange, 'square', 0.7, 110px);
}
&:nth-child(4) {
@include add-decorative-shape($icon-yellow, 'circle', 0.7, 110px);
}
}
}
}
// Only big centered text
&.big-text {
p.text-xl {
//font-size: 1.4rem;
}
}
}
// Dark context (homepage header, hero, footer)
.dark {
// Overwrite primary button design
.btn-primary {
background-color: $btn-orange;
color: white;
border: 1px solid $btn-orange;
border-radius: 2em;
}
}
// Dark but only in sections
section.dark {
p {
color: white;
font-weight: bolder;
}
}
.btn {
text-transform: unset;
}