add a shortcode for placing images. page section bloc, others details

This commit is contained in:
2023-11-13 15:02:34 +01:00
parent 52bedce0ce
commit fc2872e03e
9 changed files with 173 additions and 35 deletions

View File

@@ -70,9 +70,6 @@ header.header {
background-color: $bg-dark-blue;
}
main > section {
h2 {
width: fit-content;
}
&.hero {
background-color: $bg-dark-blue;
@include add-bg-pattern(1);
@@ -126,6 +123,7 @@ section {
width: 100%;
}
h2, p {
width: fit-content;
margin-left: auto;
margin-right: auto;
}
@@ -147,18 +145,21 @@ section {
}
// Add custom colored icons on each item
&.section-1 {
//text-transform: uppercase;
ul li {
font-weight: 500;
font-size: large;
&:nth-child(1) {
@include add-decorative-shape($text-green, 'square', 0.7, 110px);
@include add-decorative-shape($text-green, 'square', 0.7, 105px);
}
&:nth-child(2) {
@include add-decorative-shape($icon-red, 'circle', 0.7, 110px);
@include add-decorative-shape($icon-red, 'circle', 0.7, 105px);
}
&:nth-child(3) {
@include add-decorative-shape($chill-orange, 'square', 0.7, 110px);
@include add-decorative-shape($chill-orange, 'square', 0.7, 105px);
}
&:nth-child(4) {
@include add-decorative-shape($icon-yellow, 'circle', 0.7, 110px);
@include add-decorative-shape($icon-yellow, 'circle', 0.7, 105px);
}
}
}
@@ -191,6 +192,47 @@ section.dark {
}
}
.btn {
text-transform: unset;
.hop {
color: red;
}
///// PAGES
main > section {
&.page-hero {
background-color: $bg-dark-blue;
@include add-bg-pattern(1);
@include add-horizontal-curve(1, bottom);
h1 { color: $text-green; }
}
}
.chapo {
font-size: large;
font-weight: 600;
}
figure.image {
//background-color: $chill-lightgray;
//padding: 1em;
display: flex;
flex-direction: column;
&.left {
float: left;
margin-right: 1.5em;
}
&.right {
float: right;
margin-left: 1.5em;
}
&.center {
display: flex;
justify-content: center;
align-items: center;
}
img {
margin-bottom: 0;
}
figcaption {}
}