use 'dark' class locally in header, hero or custom sections. adapt dark styles.
This commit is contained in:
parent
2133aabfb9
commit
e3c547979a
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 12 KiB |
@ -1,6 +1,6 @@
|
||||
///// HOMEPAGE
|
||||
|
||||
/// Chill colors
|
||||
/// Chill brand colors
|
||||
$chill-blue: #334d5c;
|
||||
$chill-green: #43b29d;
|
||||
$chill-beige: #d3c7b1;
|
||||
@ -10,41 +10,66 @@ $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: $chill-blue;
|
||||
background-color: $bg-dark-blue;
|
||||
}
|
||||
main > section {
|
||||
&:first-child {
|
||||
background-color: $chill-blue;
|
||||
&.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: $chill-blue;
|
||||
background-repeat: repeat;
|
||||
background-position: bottom center;
|
||||
background-image: url('../images/bg/dessin-3.png');
|
||||
/* hugoplate needs to compile images in public, and make it automatically for images called from content.
|
||||
we need to call first image from content md files, if we need to use it in css
|
||||
*/
|
||||
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-6 {
|
||||
section.section-5,
|
||||
section.section-7 {
|
||||
.container .row {
|
||||
& > div {
|
||||
&:last-child {
|
||||
@ -69,4 +94,16 @@ section.section-6 {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
@ -1,31 +1,43 @@
|
||||
#################### default parameters ################################
|
||||
# favicon
|
||||
favicon = "images/favicon.png"
|
||||
|
||||
# logo
|
||||
logo = "images/logo.png"
|
||||
logo_darkmode = "images/logo-darkmode.png"
|
||||
|
||||
# use `px` or `x` with logo_width, example: "100px".
|
||||
# Note: logo_width is not work with .svg file
|
||||
logo_width = "160px"
|
||||
logo_height = "32px"
|
||||
|
||||
# if logo_webp set false, will not generate WEBP version of logo | default is true
|
||||
logo_webp = true
|
||||
|
||||
# logo text will only show when logo is missing.
|
||||
logo_text = "Hugoplate"
|
||||
|
||||
# navbar fixed to top
|
||||
navbar_fixed = true
|
||||
navbar_fixed = false
|
||||
|
||||
# theme-mode
|
||||
theme_switcher = true
|
||||
theme_default = "dark" # available options [light/dark/system]
|
||||
# available options [light/dark/system]
|
||||
theme_switcher = false
|
||||
theme_default = "light"
|
||||
|
||||
# Main Sections
|
||||
mainSections = ["blog"]
|
||||
|
||||
# contact form action
|
||||
contact_form_action = "#" # contact form works with [https://airform.io/] or [https://formspree.io]
|
||||
|
||||
# google tag manager, see https://developers.google.com/tag-manager/
|
||||
google_tag_manager = "" # example: G-XXXXXXXXXX
|
||||
google_adsense = "" # example: ca-pub-xxxxxxxxxxxxxxxx
|
||||
# google_tag_manager = "" # example: G-XXXXXXXXXX
|
||||
# google_adsense = "" # example: ca-pub-xxxxxxxxxxxxxxxx
|
||||
|
||||
# custom script on header, example: custom_script= "<script>console.log(\"Hello World\")</script>"
|
||||
custom_script = ""
|
||||
|
||||
# copyright
|
||||
copyright = "Designed & Developed by [Zeon Studio](https://zeon.studio)"
|
||||
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
# Banner
|
||||
banner:
|
||||
class: dark
|
||||
image: "/images/banner.png"
|
||||
title: "Le compagnon du travailleur social"
|
||||
content: "CHILL est une application web open source, un logiciel métier dédié à l'accompagnement des personnes, pour améliorer et faciliter le travail social."
|
||||
image: "/images/banner.png"
|
||||
button:
|
||||
enable: true
|
||||
label: "Essayer la démo"
|
||||
@ -27,6 +28,10 @@ features:
|
||||
image: "/images/service-20.png"
|
||||
title:
|
||||
content: "CHILL nourrit les travailleurs sociaux des informations dont ils ont besoin au quotidien, tout en leur offrant une vision d’ensemble sur la situation de vie, les dossiers et les parcours sociaux des personnes accompagnées."
|
||||
button:
|
||||
enable: false
|
||||
label: "Test button style"
|
||||
link: "#"
|
||||
|
||||
-
|
||||
class: section-3
|
||||
@ -43,7 +48,7 @@ features:
|
||||
|
||||
-
|
||||
class: section-4
|
||||
image: "/images/service-20.png"
|
||||
image: "/images/service-3.png"
|
||||
title:
|
||||
content: "
|
||||
Via les divers supports et manuels pédagogiques mis à disposition, CHILL permet l’autonomie des utilisateurs et des administrateurs, que ce soit pour l'utiliser ou pour le configurer."
|
||||
@ -53,18 +58,7 @@ features:
|
||||
link: "start/user"
|
||||
|
||||
-
|
||||
class: section-5
|
||||
image: "/images/service-30.png"
|
||||
title:
|
||||
content: "
|
||||
**Flexible et adaptable à de nombreuses réalités, CHILL s'adapte à une diversité de grosses comme de petites structures.**
|
||||
<br><br>
|
||||
CHILL a été développé dans le cadre d'un processus participatif avec les travailleurs sociaux de différents secteurs, afin que le logiciel réponde à leur besoin et à une diversité de réalités de terrain.
|
||||
<br><br>
|
||||
"
|
||||
|
||||
-
|
||||
class: section-6
|
||||
class: section-5 dark
|
||||
image: "/images/service-20.png"
|
||||
title:
|
||||
content:
|
||||
@ -74,9 +68,20 @@ features:
|
||||
- "**Respecte les principes du RGPD** de *privacy by design* et *security by design*, en offrant la possibilité aux administrateurs de paramétrer différents rôles, cercles d’utilisateurs et règles d’accès aux contenus."
|
||||
- "**S’inscrit dans la philosophie du logiciel libre** et dans un processus d’amélioration continue pour un code source restant ouvert, car l’argent public doit fabriquer du code public."
|
||||
|
||||
-
|
||||
class: section-6
|
||||
image: "/images/service-30.png"
|
||||
title:
|
||||
content: "
|
||||
**Flexible et adaptable à de nombreuses réalités, CHILL s'adapte à une diversité de grosses comme de petites structures.**
|
||||
<br><br>
|
||||
CHILL a été développé dans le cadre d'un processus participatif avec les travailleurs sociaux de différents secteurs, afin que le logiciel réponde à leur besoin et à une diversité de réalités de terrain.
|
||||
<br><br>
|
||||
"
|
||||
|
||||
-
|
||||
class: section-7
|
||||
image: "/images/service-3.png"
|
||||
image: "/images/service-30.png"
|
||||
title: "Ce qu'il faut retenir"
|
||||
content:
|
||||
bulletpoints:
|
||||
|
||||
@ -18,8 +18,8 @@
|
||||
"theme_color": {
|
||||
"primary": "#fff",
|
||||
"body": "#1c1c1c",
|
||||
"border": "#3E3E3E",
|
||||
"theme_light": "#222222",
|
||||
"border": "#ffffff09",
|
||||
"theme_light": "#0d242e",
|
||||
"theme_dark": ""
|
||||
},
|
||||
"text_color": {
|
||||
@ -31,14 +31,12 @@
|
||||
},
|
||||
"fonts": {
|
||||
"font_family": {
|
||||
"primary": "Heebo:wght@400;600",
|
||||
"primary_type": "sans-serif",
|
||||
"secondary": "Signika:wght@500;700",
|
||||
"secondary_type": "sans-serif"
|
||||
"primary": "OpenSans:wght@300;400;500;600;700;800",
|
||||
"primary_type": "sans-serif"
|
||||
},
|
||||
"font_size": {
|
||||
"base": "16",
|
||||
"scale": "1.250"
|
||||
"base": "15",
|
||||
"scale": "1.25"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,9 +7,11 @@
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply border-primary bg-primary dark:border-darkmode-primary dark:text-dark text-white dark:bg-white;
|
||||
@apply border-primary text-white bg-primary
|
||||
dark:border-darkmode-primary dark:text-dark dark:bg-white;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
@apply border-dark text-dark hover:bg-dark dark:hover:text-dark bg-transparent hover:text-white dark:border-white dark:text-white dark:hover:bg-white;
|
||||
@apply text-dark bg-transparent border-dark hover:bg-dark hover:text-white
|
||||
dark:text-white dark:border-white dark:hover:text-dark dark:hover:bg-white;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{{ define "main" }}
|
||||
<!-- Banner -->
|
||||
{{ with .Params.banner }}
|
||||
<section class="section pt-14">
|
||||
<section class="section pt-14 hero {{ with .class }}{{ . }}{{ end }}">
|
||||
<div class="container">
|
||||
<div class="row justify-center">
|
||||
<div class="lg:col-7 mb-8 text-center">
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
<!-- Features -->
|
||||
{{ range $i, $e:= .Params.features }}
|
||||
<section class="section-sm {{ with .class }}{{ . }}{{ end }} {{ if (modBool $i 2) }}bg-gradient{{ end }}">
|
||||
<section class="section-sm sn-{{ add $i 1 }} {{ with .class }}{{ . }}{{ end }}">
|
||||
<div class="container">
|
||||
<div class="row items-center justify-between">
|
||||
<div
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
<div class="dark">
|
||||
<footer class="bg-theme-light dark:bg-darkmode-theme-light">
|
||||
<div class="container">
|
||||
<div class="row items-center py-10">
|
||||
@ -55,3 +56,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<header
|
||||
class="header {{ if site.Params.navbar_fixed }}sticky top-0{{ end }} z-30">
|
||||
class="header dark {{ if site.Params.navbar_fixed }}sticky top-0{{ end }} z-30">
|
||||
<nav class="navbar container">
|
||||
<!-- logo -->
|
||||
<div class="order-0">
|
||||
@ -126,7 +126,7 @@
|
||||
{{ if site.Params.navigation_button.enable }}
|
||||
<a
|
||||
href="{{ site.Params.navigation_button.link | relLangURL }}"
|
||||
class="btn btn-outline-primary btn-sm hidden lg:inline-block">
|
||||
class="btn btn-primary btn-sm hidden lg:inline-block">
|
||||
{{ site.Params.navigation_button.label }}
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user