109 lines
2.5 KiB
SCSS
Executable File
109 lines
2.5 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 apply-bgpattern-01() {
|
|
background-repeat: repeat;
|
|
background-position: bottom center;
|
|
background-image: url('../images/bg/dessin-3.png');
|
|
}
|
|
|
|
|
|
// Theme Custom sections
|
|
header.header {
|
|
background-color: $bg-dark-blue;
|
|
}
|
|
main > section {
|
|
&.hero {
|
|
background-color: $bg-dark-blue;
|
|
@include apply-bgpattern-01();
|
|
h1 {
|
|
color: $text-green;
|
|
}
|
|
p {
|
|
color: white;
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
&.section-1 {
|
|
background-color: $bg-light-blue;
|
|
}
|
|
&.section-2 {
|
|
}
|
|
&.section-3 {
|
|
background-color: $text-green;
|
|
}
|
|
&.section-4 {
|
|
}
|
|
&.section-5 {
|
|
background-color: transparentize($color: $text-green, $amount: 0.7)
|
|
}
|
|
&.section-6 {
|
|
background-color: $bg-dark-blue;
|
|
@include apply-bgpattern-01();
|
|
}
|
|
&.section-7 {
|
|
background-color: $bg-light-blue;
|
|
}
|
|
}
|
|
|
|
// Change bulletlists rendering in flex bloc
|
|
section.section-1,
|
|
section.section-5,
|
|
section.section-7 {
|
|
.container .row {
|
|
& > div {
|
|
&:last-child {
|
|
width: 100%;
|
|
}
|
|
h2, p {
|
|
text-align: center;
|
|
}
|
|
ul {
|
|
display: flex;
|
|
li {
|
|
i:first-child {
|
|
display: none;
|
|
}
|
|
flex: 1 0 0;
|
|
margin: 0.5em;
|
|
padding: 1.5em;
|
|
text-align: center;
|
|
border: 1px solid #767676;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
} |