champs-libres/chill_hugoplate
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make styling more interesting

Browse Source
This commit is contained in:
Julie Lenaerts 2024-01-18 19:17:44 +01:00
parent 591b2fc93e
commit 7fd5000f99
5 changed files with 185 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/illustrations/collection-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

241
assets/scss/custom.scss
View File

@ -2,7 +2,7 @@
/// Chill brand colors
$chill-blue: #334d5c;
$chill-green: #43b29d;
$chill-green: rgba(67, 178, 157, 0.61);
$chill-beige: #d3c7b1;
$chill-red: #dc516d;
$chill-pink: #e57469;
@ -13,10 +13,10 @@ $chill-yellow: #f1d275;
/// Other custom colors
$bg-dark-blue: #0d242e;
$bg-light-blue: #a0dcff;
$btn-orange: #f46839;
$orange: #f46839;
$text-green: #56c4aa;
$icon-red: #f0384d;
$icon-yellow: #fcc958;
$red: #f0384d;
$yellow: #fcc958;
// Pattern
@mixin add-bg-pattern($id) {
@ -42,7 +42,7 @@ $icon-yellow: #fcc958;
}
// Colored design element: square or circle
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1, $pos-top: -60%, $pos-left: 47%) {
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1, $pos-top: -50%, $pos-left: 44%) {
position: relative;
z-index: 1;
&:before {
@ -54,88 +54,118 @@ $icon-yellow: #fcc958;
top: $pos-top;
margin-left: -35px;
background-color: $color;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
z-index: 0;
@if $shape == 'circle' {
border-radius: 50px;
@if $shape == 'circle' {
border-radius: 50px;
}
@else {
border-radius: 0;
}
@else {
border-radius: 0;
}
}
}
body{
font-family: 'Lato', serif;
.highlight {
padding: .5rem;
font-family: 'Trocchi', serif;
font-size: 2rem;
}
.highlight-1 {
background-color: $chill-green;
}
.highlight-2 {
background-color: $chill-pink;
}
.highlight-3 {
background-color: $chill-yellow;
}
}
// Theme custom sections
header.header {
background-color: $bg-dark-blue;
}
.chill-pres {
padding-top: 0rem;
}
main > section {
&.hero {
height: 84vh;
height: 100vh;
background-color: $bg-dark-blue;
//@include add-bg-pattern(1);
h1 { color: $text-green; }
h1 { color: $chill-green; }
.hero-img {
padding-top: 3rem;
}
.btn-primary {
background-color: $orange;
color: white;
border-color: $orange;
}
}
&.section-1 {
padding-top: 27rem;
background-color: white;
padding-top: 10rem;
li { font-weight: 600; }
}
&.section-2 {
.container {
color: $bg-dark-blue;
text-align: center;
margin-top: 4rem;
h2 {
line-height: 3.5rem;
}
}
background-color: transparentize($color: $text-green, $amount: 0.7)
background: rgb(233,227,216);
background: linear-gradient(180deg, rgba(233,227,216,1) 0%, rgba(239,239,239,1) 100%);
}
&.section-3 {
background-color: $text-green;
//@include add-horizontal-curve(4, bottom);
background: rgb(239,239,239);
background: linear-gradient(180deg, rgba(239,239,239,1) 0%, rgba(255,255,255,1) 100%);
h2 {
@include add-decorative-shape($icon-red, 'circle', .7, -30%, -10%);
@include add-decorative-shape($orange, 'circle', .7, -30%, -10%);
}
}
&.section-4 {
//@include add-horizontal-curve(2, bottom);
position: relative;
background-color: white;
.row {
padding-bottom: 5rem;
}
h4 {
font-weight: bold;
color: $bg-dark-blue;
border: 1px dashed $bg-dark-blue;
border-radius: 15px;
padding: 3rem;
}
.btn-primary {
position: absolute;
top: 52%;
left: 28%;
}
}
&.section-5 {
background-color: transparentize($color: $text-green, $amount: 0.5)
background-color: transparentize($color: $chill-green, $amount: 0.5)
}
&.section-6 {
background-color: $bg-dark-blue;
background-color: $bg-dark-blue !important;
@include add-bg-pattern(1);
}
&.section-7 {
background-color: $text-green;
h2 {
@include add-decorative-shape($icon-yellow, 'square', .7, -30%, -15%);
@include add-decorative-shape($yellow, 'square', .7, -30%, -15%);
}
}
}
.hero-relative {
position: relative;
}
.curve {
position: absolute;
top: 500px;
z-index: -1;
}
.dark > footer {
margin-top: 4rem;
//@include add-horizontal-curve(3, top);
&:before {
top: -100px;
}
}
section {
h2.title {
color: #0c362d;
color: $bg-dark-blue;
}
// Centered text
&.big-text,
@ -174,10 +204,9 @@ section {
}
flex: 1 0 0;
margin: 0.5em 2rem 0.5em 2rem;
padding: 2.5em 1em 1em 1em;
padding: 2em 1em 1em 1em;
text-align: center;
border-radius: 20px;
background-color: #ffffff3b;
}
}
}
@ -188,23 +217,84 @@ section {
ul li {
font-weight: 500;
font-size: large;
&:nth-child(1) {
position: relative;
//border: 1.5px dashed $bg-dark-blue;
&:nth-child(1) {
@include add-decorative-shape($text-green, 'square', 1);
&:after {
content: "\f4d7";
}
}
&:nth-child(2) {
@include add-decorative-shape($icon-red, 'circle', 1);
@include add-decorative-shape($red, 'circle', 1);
}
&:nth-child(3) {
@include add-decorative-shape($chill-orange, 'square', 1);
}
&:nth-child(4) {
@include add-decorative-shape($icon-yellow, 'circle', 1);
@include add-decorative-shape($yellow, 'circle', 1);
}
}
}
&.section-5 {
.container .row {
h2 {
text-transform: capitalize;
}
p {
margin-bottom: 5rem;
}
ul li {
border-radius: 1em;
background: transparentize(white, 0.8);
backdrop-filter: blur(20px);
width: 400px;
height: 180px;
padding: .85rem;
position: relative;
z-index: 0;
overflow: hidden;
transition: 0.6s ease-in;
&::before {
content: "";
position: absolute;
z-index: -1;
top: -15px;
right: -15px;
height:220px;
width: 25px;
border-radius: 32px;
transform: scale(1);
transform-origin: 50% 50%;
transition: transform 0.25s ease-out;
}
&:nth-child(1)::before {
background-color: rgba(240, 56, 77, 0.85);
}
&:nth-child(2)::before {
background-color: rgba(232, 148, 99, 0.85);
}
&:nth-child(3)::before {
background-color: rgba(67, 178, 157, 0.85);
}
&:nth-child(4)::before {
background-color: rgb(241, 210, 117);
}
&:hover::before {
transition-delay:0.2s ;
transform: scale(40);
}
&:hover {
color: #ffffff;
h5 {
color: $chill-lightgray;
}
}
h5 {
color: $bg-dark-blue;
font-weight: bold;
}
}
}
}
// button styling
a.btn-chill {
background-color: #fc3636;
@ -213,16 +303,16 @@ section {
}
// Dark context (homepage header, hero, footer)
.dark {
//.dark {
// Overwrite primary button design
.btn-primary {
background-color: $btn-orange;
color: white;
border: 1px solid $btn-orange;
border-radius: 2em;
}
.btn-primary {
background-color: $orange;
color: white;
border: 1px solid $orange;
border-radius: 2em;
}
//}
// Dark but only in sections
section.dark {
@ -241,16 +331,47 @@ section.dark {
main > section {
&.page-hero {
height: 40vh;
background-color: $bg-dark-blue;
//@include add-bg-pattern(1);
//@include add-horizontal-curve(1, bottom);
@include add-bg-pattern(1);
h1 { color: $text-green; }
}
.content-subtitle {
text-transform: uppercase;
padding-left: 2rem;
}
.bord-1 {
border-left: 4px solid $chill-orange;
}
.bord-2 {
border-left: 4px solid $chill-beige;
}
.bord-3 {
border-left: 4px solid $chill-yellow;
}
.bord-4 {
border-left: 4px solid $chill-green;
}
}
.chapo {
font-size: large;
font-weight: 600;
text-align: center;
padding-bottom: 2rem;
font-style: italic;
position: relative;
margin-bottom: 5rem;
&::after {
content:'';
position:absolute;
left:0; right:0;
top:100%;
margin:10px auto;
width:15%;
height:6px;
background: $chill-red;
}
}
figure.image {

2
themes/hugoplate/layouts/_default/single.html
View File

@ -1,7 +1,7 @@
{{ define "main" }}
{{ partial "page-header" . }}
<section class="section-sm">
<section class="section-sm chill-pres">
<div class="container">
<div class="row justify-center">
<div class="lg:col-10">

2
themes/hugoplate/layouts/index.html
View File

@ -26,7 +26,7 @@
</div>
</div>
</section>
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="curve transition duration-300 ease-in-out delay-150"><path d="M 0,400 L 0,150 C 88.60714285714286,142.64285714285714 177.21428571428572,135.28571428571428 303,143 C 428.7857142857143,150.71428571428572 591.7499999999999,173.50000000000003 732,192 C 872.2500000000001,210.49999999999997 989.7857142857144,224.7142857142857 1104,217 C 1218.2142857142856,209.2857142857143 1329.1071428571427,179.64285714285717 1440,150 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="#0d242e" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 200)"></path></svg>
<!-- <svg width="100%" height="100%" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="curve transition duration-300 ease-in-out delay-150"><path d="M 0,400 L 0,150 C 88.60714285714286,142.64285714285714 177.21428571428572,135.28571428571428 303,143 C 428.7857142857143,150.71428571428572 591.7499999999999,173.50000000000003 732,192 C 872.2500000000001,210.49999999999997 989.7857142857144,224.7142857142857 1104,217 C 1218.2142857142856,209.2857142857143 1329.1071428571427,179.64285714285717 1440,150 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="#0d242e" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 200)"></path></svg>-->
{{ end }}

4
themes/hugoplate/layouts/partials/page-header.html
View File

@ -1,4 +1,4 @@
<section class="dark hero-relative page-hero pt-14 mb-14">
<section class="dark page-hero pt-14 mb-14">
<div class="container text-center">
<div class="px-8 py-14 dark:from-darkmode-body dark:to-darkmode-theme-light">
<!-- bg-gradient-to-b from-body to-theme-light rounded-2xl -->
@ -6,6 +6,6 @@
{{ partial "components/breadcrumb" (dict "Context" . "Class" "mt-6") }}
</div>
</div>
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="curve transition duration-300 ease-in-out delay-150"><path d="M 0,400 L 0,150 C 88.60714285714286,142.64285714285714 177.21428571428572,135.28571428571428 303,143 C 428.7857142857143,150.71428571428572 591.7499999999999,173.50000000000003 732,192 C 872.2500000000001,210.49999999999997 989.7857142857144,224.7142857142857 1104,217 C 1218.2142857142856,209.2857142857143 1329.1071428571427,179.64285714285717 1440,150 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="#0d242e" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 200)"></path></svg>
<!-- <svg width="100%" height="100%" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="curve transition duration-300 ease-in-out delay-150"><path d="M 0,400 L 0,150 C 88.60714285714286,142.64285714285714 177.21428571428572,135.28571428571428 303,143 C 428.7857142857143,150.71428571428572 591.7499999999999,173.50000000000003 732,192 C 872.2500000000001,210.49999999999997 989.7857142857144,224.7142857142857 1104,217 C 1218.2142857142856,209.2857142857143 1329.1071428571427,179.64285714285717 1440,150 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="#0d242e" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 200)"></path></svg>-->
</section>