champs-libres/chill.social
7
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Update theme and styles

Browse Source 
- Updated the footer layout in `footer.html` to streamline the structure and improve readability.
- Added new CSS classes for brightness and invert filters in `style.css` to enhance image visibility.
- Modified the CSS source map in `custom.css.map` for better debugging.
- Changed theme name in `theme.toml` from "Hugo Saasify" to "Theme Chill" for branding consistency.
This commit is contained in:
Boris Waaub
2026-02-11 20:09:11 +01:00
parent 5c0487c90f
commit 77f020ae13
7 changed files with 486 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/scss/custom.scss
+1 -1
View File
@@ -104,7 +104,7 @@ header.header {
background-color: $bg-dark-blue; background-color: $bg-dark-blue;
} }
footer.footer { footer.footer {
background-color: $chill-green; background-color: $bg-dark-blue;
} }
.chill-pres { .chill-pres {
hugo.toml
+1 -1
View File
@@ -72,7 +72,7 @@ pagination = { pagerSize = 6, path = "page" }
[params] [params]
description = "Logiciel libre d'accompagnement social" description = "Logiciel libre d'accompagnement social"
author = "Champs-Libres" author = "Champs-Libres"
logo = "/images/logo.png" # Path to your logo logo = "/images/logo-darkmode.png" # Path to your logo
customCSS = ["css/custom.css"] customCSS = ["css/custom.css"]
static/css/custom.css
+377 -264
View File
@@ -1,296 +1,370 @@
.badge-generation-document { .badge-generation-document {
--badge-color: #D50B51; } --badge-color: #D50B51;
}
.badge-rapport-rgpd { .badge-rapport-rgpd {
--badge-color: #43B09B; } --badge-color: #43B09B;
}
.badge-rapports-statistiques { .badge-rapports-statistiques {
--badge-color: #C9B99E; } --badge-color: #C9B99E;
}
.badge-suivi-accompagnements { .badge-suivi-accompagnements {
--badge-color: #EDC74B; } --badge-color: #EDC74B;
}
.badge-suivi-decisions { .badge-suivi-decisions {
--badge-color: #a0dcff; } --badge-color: #a0dcff;
}
.badge-suivi-usagers { .badge-suivi-usagers {
--badge-color: #333333; } --badge-color: #333333;
}
.badge-rendez-vous { .badge-rendez-vous {
--badge-color: #0d242e; } --badge-color: #0d242e;
}
@font-face { @font-face {
font-family: 'Lato', Arial; font-family: "Lato", Arial;
src: url("assets/fonts/Lato/Lato-Regular.ttf") format("truetype"); src: url("assets/fonts/Lato/Lato-Regular.ttf") format("truetype");
font-display: optional; font-display: optional;
font-weight: normal; font-weight: normal;
font-style: normal; } font-style: normal;
}
body { body {
font-family: 'Lato', sans-serif; } font-family: "Lato", sans-serif;
body .highlight { }
padding: .25rem; } body .highlight {
body .highlight-1 { padding: 0.25rem;
background-color: #43B09B; } }
body .highlight-2 { body .highlight-1 {
background-color: #D50B51; } background-color: #43B09B;
body .highlight-3 { }
background-color: #EDC74B; } body .highlight-2 {
background-color: #D50B51;
}
body .highlight-3 {
background-color: #EDC74B;
}
header.header { header.header {
background-color: #0d242e; } background-color: #0d242e;
}
footer.footer { footer.footer {
background-color: #43B09B; } background-color: #0d242e;
}
.chill-pres { .chill-pres {
padding-top: 0rem; } padding-top: 0rem;
}
.navbar .btn-primary { .navbar .btn-primary {
background-color: #f46839; background-color: #f46839;
border: 1px solid #f46839; border: 1px solid #f46839;
color: white; } color: white;
.navbar .btn-primary:hover { }
background-color: #E27A3E; .navbar .btn-primary:hover {
border: 1px solid #E27A3E; } background-color: #E27A3E;
border: 1px solid #E27A3E;
}
.navbar .lang-select { .navbar .lang-select {
color: white; } color: white;
}
section.hero { section.hero {
background-color: #0d242e; } background-color: #0d242e;
section.hero h1 { }
color: #43B09B; } section.hero h1 {
color: #43B09B;
}
section.section-1 { section.section-1 {
background-color: white; background-color: white;
padding-top: 10rem; } padding-top: 10rem;
section.section-1 li { }
font-weight: 600; } section.section-1 li {
font-weight: 600;
}
section.section-2 .container {
color: #0d242e;
text-align: center;
margin-top: 4rem;
}
section.section-2 .container h2 {
line-height: 3.5rem;
}
section.section-2 { section.section-2 {
background: #e9e3d8; background: rgb(233, 227, 216);
background: linear-gradient(180deg, #e9e3d8 0%, #efefef 100%); } background: linear-gradient(180deg, rgb(233, 227, 216) 0%, rgb(239, 239, 239) 100%);
section.section-2 .container { }
color: #0d242e;
text-align: center;
margin-top: 4rem; }
section.section-2 .container h2 {
line-height: 3.5rem; }
section.section-3 { section.section-3 {
background: #efefef; background: rgb(239, 239, 239);
background: linear-gradient(180deg, #efefef 0%, white 100%); } background: linear-gradient(180deg, rgb(239, 239, 239) 0%, rgb(255, 255, 255) 100%);
section.section-3 h2 { }
position: relative; section.section-3 h2 {
z-index: 1; } position: relative;
section.section-3 h2:before { z-index: 1;
content: ''; }
position: absolute; section.section-3 h2:before {
width: 70px; content: "";
height: 70px; position: absolute;
left: -10%; width: 70px;
top: -30%; height: 70px;
margin-left: -35px; left: -10%;
background-color: #f46839; top: -30%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); margin-left: -35px;
z-index: 0; background-color: #f46839;
border-radius: 50px; } box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
z-index: 0;
border-radius: 50px;
}
section.section-4 { section.section-4 {
position: relative; position: relative;
background-color: white; } background-color: white;
section.section-4 .row { }
padding-bottom: 5rem; } section.section-4 .row {
section.section-4 h4 { padding-bottom: 5rem;
font-weight: bold; }
height: 175px; section.section-4 h4 {
color: #0d242e; font-weight: bold;
border: 1px dashed #0d242e; height: 175px;
border-radius: 15px; color: #0d242e;
padding: 3rem; } border: 1px dashed #0d242e;
section.section-4 .btn-primary { border-radius: 15px;
position: absolute; padding: 3rem;
top: 52%; }
left: 28%; } section.section-4 .btn-primary {
position: absolute;
top: 52%;
left: 28%;
}
section.section-5 { section.section-5 {
background-color: rgba(67, 176, 155, 0.5); } background-color: rgba(67, 176, 155, 0.5);
}
section.section-6 { section.section-6 {
background-color: #0d242e !important; background-color: #0d242e !important;
background-repeat: repeat; background-repeat: repeat;
background-position: top center; background-position: top center;
background-image: url("/images/bg/pattern-1.png"); } background-image: url("/images/bg/pattern-1.png");
}
section.section-7 h2 { section.section-7 h2 {
position: relative; position: relative;
z-index: 1; } z-index: 1;
section.section-7 h2:before { }
content: ''; section.section-7 h2:before {
position: absolute; content: "";
width: 70px; position: absolute;
height: 70px; width: 70px;
left: -15%; height: 70px;
top: -30%; left: -15%;
margin-left: -35px; top: -30%;
background-color: #fcc958; margin-left: -35px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); background-color: #fcc958;
z-index: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 0; } z-index: 0;
border-radius: 0;
}
section h2.title { section h2.title {
color: #0d242e; } color: #0d242e;
}
section.big-text h2, section.big-text p, section.li-block h2, section.li-block p { section.big-text h2, section.big-text p, section.li-block h2, section.li-block p {
width: fit-content; width: fit-content;
margin-left: auto; margin-left: auto;
margin-right: auto; } margin-right: auto;
}
section.big-text .container .row > div:last-child { section.big-text .container .row > div:last-child {
width: 80%; width: 80%;
margin-left: 10%; } margin-left: 10%;
}
section.li-block .container .row > div:last-child { section.li-block .container .row > div:last-child {
width: 100%; } width: 100%;
}
section.li-block .container .row > div ul { section.li-block .container .row > div ul {
display: flex; } display: flex;
section.li-block .container .row > div ul li { }
flex: 1 0 0; section.li-block .container .row > div ul li i:first-child {
margin: 0.5em 2rem 0.5em 2rem; display: none;
padding: 2em 1em 1em 1em; }
text-align: center; section.li-block .container .row > div ul li {
border-radius: 20px; } flex: 1 0 0;
section.li-block .container .row > div ul li i:first-child { margin: 0.5em 2rem 0.5em 2rem;
display: none; } padding: 2em 1em 1em 1em;
text-align: center;
border-radius: 20px;
}
section.li-block.section-1 ul li { section.li-block.section-1 ul li {
font-weight: 500; font-weight: 500;
font-size: large; font-size: large;
position: relative; } position: relative;
section.li-block.section-1 ul li:nth-child(1) { }
position: relative; section.li-block.section-1 ul li:nth-child(1) {
z-index: 1; } position: relative;
section.li-block.section-1 ul li:nth-child(1):before { z-index: 1;
content: ''; }
position: absolute; section.li-block.section-1 ul li:nth-child(1):before {
width: 100px; content: "";
height: 100px; position: absolute;
left: 44%; width: 100px;
top: -60%; height: 100px;
margin-left: -35px; left: 44%;
background-color: #56c4aa; top: -60%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); margin-left: -35px;
z-index: 0; background-color: #56c4aa;
border-radius: 0; } box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
section.li-block.section-1 ul li:nth-child(2) { z-index: 0;
position: relative; border-radius: 0;
z-index: 1; } }
section.li-block.section-1 ul li:nth-child(2):before { section.li-block.section-1 ul li:nth-child(2) {
content: ''; position: relative;
position: absolute; z-index: 1;
width: 100px; }
height: 100px; section.li-block.section-1 ul li:nth-child(2):before {
left: 44%; content: "";
top: -60%; position: absolute;
margin-left: -35px; width: 100px;
background-color: #f0384d; height: 100px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); left: 44%;
z-index: 0; top: -60%;
border-radius: 50px; } margin-left: -35px;
section.li-block.section-1 ul li:nth-child(3) { background-color: #f0384d;
position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
z-index: 1; } z-index: 0;
section.li-block.section-1 ul li:nth-child(3):before { border-radius: 50px;
content: ''; }
position: absolute; section.li-block.section-1 ul li:nth-child(3) {
width: 100px; position: relative;
height: 100px; z-index: 1;
left: 44%; }
top: -60%; section.li-block.section-1 ul li:nth-child(3):before {
margin-left: -35px; content: "";
background-color: #E27A3E; position: absolute;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 100px;
z-index: 0; height: 100px;
border-radius: 0; } left: 44%;
section.li-block.section-1 ul li:nth-child(4) { top: -60%;
position: relative; margin-left: -35px;
z-index: 1; } background-color: #E27A3E;
section.li-block.section-1 ul li:nth-child(4):before { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
content: ''; z-index: 0;
position: absolute; border-radius: 0;
width: 100px; }
height: 100px; section.li-block.section-1 ul li:nth-child(4) {
left: 44%; position: relative;
top: -60%; z-index: 1;
margin-left: -35px; }
background-color: #fcc958; section.li-block.section-1 ul li:nth-child(4):before {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); content: "";
z-index: 0; position: absolute;
border-radius: 50px; } width: 100px;
height: 100px;
left: 44%;
top: -60%;
margin-left: -35px;
background-color: #fcc958;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
z-index: 0;
border-radius: 50px;
}
section.li-block.section-5 .container .row p { section.li-block.section-5 .container .row p {
margin-bottom: 5rem; } margin-bottom: 5rem;
}
section.li-block.section-5 .container .row ul li { section.li-block.section-5 .container .row ul li {
border-radius: 1em; border-radius: 1em;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
width: 400px; width: 400px;
height: 180px; height: 180px;
padding: .85rem; padding: 0.85rem;
position: relative; position: relative;
z-index: 0; z-index: 0;
overflow: hidden; overflow: hidden;
transition: 0.6s ease-in; } transition: 0.6s ease-in;
section.li-block.section-5 .container .row ul li::before { }
content: ""; section.li-block.section-5 .container .row ul li::before {
position: absolute; content: "";
z-index: -1; position: absolute;
top: -15px; z-index: -1;
right: -15px; top: -15px;
height: 220px; right: -15px;
width: 25px; height: 220px;
border-radius: 32px; width: 25px;
transform: scale(1); border-radius: 32px;
transform-origin: 50% 50%; transform: scale(1);
transition: transform 0.25s ease-out; } transform-origin: 50% 50%;
section.li-block.section-5 .container .row ul li:nth-child(1)::before { transition: transform 0.25s ease-out;
background-color: rgba(240, 56, 77, 0.85); } }
section.li-block.section-5 .container .row ul li:nth-child(2)::before { section.li-block.section-5 .container .row ul li:nth-child(1)::before {
background-color: rgba(232, 148, 99, 0.85); } background-color: rgba(240, 56, 77, 0.85);
section.li-block.section-5 .container .row ul li:nth-child(3)::before { }
background-color: rgba(67, 178, 157, 0.85); } section.li-block.section-5 .container .row ul li:nth-child(2)::before {
section.li-block.section-5 .container .row ul li:nth-child(4)::before { background-color: rgba(232, 148, 99, 0.85);
background-color: #f1d275; } }
section.li-block.section-5 .container .row ul li:hover::before { section.li-block.section-5 .container .row ul li:nth-child(3)::before {
transition-delay: 0.2s; background-color: rgba(67, 178, 157, 0.85);
transform: scale(40); } }
section.li-block.section-5 .container .row ul li:hover { section.li-block.section-5 .container .row ul li:nth-child(4)::before {
color: #ffffff; } background-color: rgb(241, 210, 117);
section.li-block.section-5 .container .row ul li:hover h5 { }
color: #EBEBEB; } section.li-block.section-5 .container .row ul li:hover::before {
section.li-block.section-5 .container .row ul li h5 { transition-delay: 0.2s;
color: #0d242e; transform: scale(40);
font-weight: bold; } }
section.li-block.section-5 .container .row ul li:hover {
color: #ffffff;
}
section.li-block.section-5 .container .row ul li:hover h5 {
color: #EBEBEB;
}
section.li-block.section-5 .container .row ul li h5 {
color: #0d242e;
font-weight: bold;
}
section.li-block a.btn-chill { section.li-block a.btn-chill {
background-color: #fc3636; } background-color: #fc3636;
}
.download { .download {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
display: block; } display: block;
.download a { }
text-decoration: none; .download a {
padding: .5rem; } text-decoration: none;
padding: 0.5rem;
}
section.dark p { section.dark p {
color: white; color: white;
font-weight: bolder; } font-weight: bolder;
}
.hop { .hop {
color: red; } color: red;
}
.content-subtitle { .content-subtitle {
text-transform: uppercase; text-transform: uppercase;
padding-left: 2rem; } padding-left: 2rem;
}
.bord-1 { .bord-1 {
border-left: 4px solid #E27A3E; } border-left: 4px solid #E27A3E;
}
.bord-2 { .bord-2 {
border-left: 4px solid #C9B99E; } border-left: 4px solid #C9B99E;
}
.bord-3 { .bord-3 {
border-left: 4px solid #EDC74B; } border-left: 4px solid #EDC74B;
}
.bord-4 { .bord-4 {
border-left: 4px solid #43B09B; } border-left: 4px solid #43B09B;
}
.chapo { .chapo {
font-size: large; font-size: large;
@@ -299,105 +373,144 @@ section.dark p {
padding-bottom: 2rem; padding-bottom: 2rem;
font-style: italic; font-style: italic;
position: relative; position: relative;
margin-bottom: 5rem; } margin-bottom: 5rem;
.chapo::after { }
content: ''; .chapo::after {
position: absolute; content: "";
left: 0; position: absolute;
right: 0; left: 0;
top: 100%; right: 0;
margin: 10px auto; top: 100%;
width: 15%; margin: 10px auto;
height: 6px; width: 15%;
background: #DE4849; } height: 6px;
background: #DE4849;
}
figure.image { figure.image {
display: flex; display: flex;
flex-direction: column; } flex-direction: column;
figure.image.left { }
float: left; figure.image.left {
margin-right: 1.5em; } float: left;
figure.image.right { margin-right: 1.5em;
float: right; }
margin-left: 1.5em; } figure.image.right {
figure.image.center { float: right;
display: flex; margin-left: 1.5em;
justify-content: center; }
align-items: center; } figure.image.center {
figure.image img { display: flex;
margin-bottom: 0; } justify-content: center;
align-items: center;
}
figure.image img {
margin-bottom: 0;
}
.text-brochure { .text-brochure {
text-align: center; } text-align: center;
}
@media screen and (max-width: 1279px) { @media screen and (max-width: 1279px) {
section.li-block.section-5 .container .row ul { section.li-block.section-5 .container .row ul {
flex-wrap: wrap; } flex-wrap: wrap;
}
section.li-block.section-5 .container .row ul li { section.li-block.section-5 .container .row ul li {
flex: 30%; } } flex: 30%;
}
}
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
section.section-4 h4 { section.section-4 h4 {
height: 224px; } height: 224px;
}
section.section-4 .btn-primary { section.section-4 .btn-primary {
top: 56%; } top: 56%;
}
section.li-block.section-5 .container .row ul { section.li-block.section-5 .container .row ul {
flex-wrap: wrap; } flex-wrap: wrap;
}
section.li-block.section-5 .container .row ul li { section.li-block.section-5 .container .row ul li {
flex: 50%; } } flex: 50%;
}
}
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
section.hero { section.hero {
height: 110vh; } height: 110vh;
}
section.section-3 h2:before { section.section-3 h2:before {
top: -70%; top: -70%;
left: 5%; left: 5%;
z-index: -1; } z-index: -1;
}
section.section-4 h4 { section.section-4 h4 {
height: 280px; } height: 280px;
}
section.section-4 .btn-primary { section.section-4 .btn-primary {
top: 64%; } top: 64%;
}
section.li-block .container .row > div ul { section.li-block .container .row > div ul {
flex-direction: column; } flex-direction: column;
section.li-block .container .row > div ul li { }
margin-bottom: 4rem; } section.li-block .container .row > div ul li {
margin-bottom: 4rem;
}
section.li-block.section-1 ul li:nth-child(1) { section.li-block.section-1 ul li:nth-child(1) {
top: -66%; } top: -66%;
}
section.li-block.section-1 ul li:nth-child(2) { section.li-block.section-1 ul li:nth-child(2) {
top: -66%; } top: -66%;
}
section.li-block.section-1 ul li:nth-child(3):before { section.li-block.section-1 ul li:nth-child(3):before {
top: -85%; } top: -85%;
}
section.li-block.section-1 ul li:nth-child(4):before { section.li-block.section-1 ul li:nth-child(4):before {
top: -85%; } top: -85%;
}
section.li-block.section-5 .container .row ul { section.li-block.section-5 .container .row ul {
flex-wrap: wrap; } flex-wrap: wrap;
}
section.li-block.section-5 .container .row ul li { section.li-block.section-5 .container .row ul li {
flex: 50%; } } flex: 50%;
}
}
@media screen and (max-width: 513px) { @media screen and (max-width: 513px) {
section.hero { section.hero {
height: 120vh; } height: 120vh;
}
section.section-4 h4 { section.section-4 h4 {
font-size: 1.1rem; } font-size: 1.1rem;
}
section.section-4 .btn-primary { section.section-4 .btn-primary {
top: 64%; } top: 64%;
}
section.section-5 .container .row ul li { section.section-5 .container .row ul li {
width: 350px; } } width: 350px;
}
}
@media screen and (max-width: 470px) { @media screen and (max-width: 470px) {
section.section-4 h4 { section.section-4 h4 {
height: 280px; } height: 280px;
}
section.section-4 .btn-primary { section.section-4 .btn-primary {
top: 64%; } top: 64%;
}
section.li-block.section-1 ul li:nth-child(3):before { section.li-block.section-1 ul li:nth-child(3):before {
top: -70%; } top: -70%;
}
section.li-block.section-1 ul li:nth-child(4):before { section.li-block.section-1 ul li:nth-child(4):before {
top: -70%; } top: -70%;
}
section.li-block.section-5 .container .row ul { section.li-block.section-5 .container .row ul {
flex-wrap: wrap; } flex-wrap: wrap;
}
section.li-block.section-5 .container .row ul li { section.li-block.section-5 .container .row ul li {
width: 350px; } } width: 350px;
}
}
@media screen and (max-width: 420px) { @media screen and (max-width: 420px) {
section.li-block.section-5 .container .row ul li { section.li-block.section-5 .container .row ul li {
width: 300px; } } width: 300px;
}
}
/*# sourceMappingURL=custom.css.map */ /*# sourceMappingURL=custom.css.map */
static/css/custom.css.map
+1 -7
View File
File diff suppressed because one or more lines are too long
static/css/style.css
+10
View File
@@ -3388,11 +3388,21 @@ body {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
} }
.brightness-0 {
--tw-brightness: brightness(0);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale { .grayscale {
--tw-grayscale: grayscale(100%); --tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
} }
.invert {
--tw-invert: invert(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter { .filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
} }
themes/chill-theme/layouts/partials/footer.html
+95 -100
View File
@@ -1,7 +1,7 @@
<footer class="footer py-12 "> <footer class="footer py-12 ">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"> <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<div class="flex flex-col md:flex-row justify-between space-y-4 md:space-y-0"> <div class="flex flex-col md:flex-row justify-between space-y-4 md:space-y-0">
<!-- Logo and Social Media --> <!-- Logo -->
<div class="flex-1"> <div class="flex-1">
<div class="flex items-center space-x-3 mb-4"> <div class="flex items-center space-x-3 mb-4">
<a href="{{ .Site.BaseURL }}" class="inline-block"> <a href="{{ .Site.BaseURL }}" class="inline-block">
@@ -11,98 +11,6 @@
</a> </a>
<span class="text-xl font-bold text-gray-900">{{ .Site.Title }}</span> <span class="text-xl font-bold text-gray-900">{{ .Site.Title }}</span>
</div> </div>
<div class="flex space-x-3 p-2">
{{ with .Site.Params.social.linkedin }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">LinkedIn</span>
<img src="/images/social/linkedin.svg" alt="LinkedIn" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.bluesky }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Bluesky</span>
<img src="/images/social/bluesky.svg" alt="Bluesky" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.twitter }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Twitter (X)</span>
<img src="/images/social/twitter.svg" alt="Twitter" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.youtube }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">YouTube</span>
<img src="/images/social/youtube.svg" alt="YouTube" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.facebook }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Facebook</span>
<img src="/images/social/facebook.svg" alt="Facebook" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.instagram }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Instagram</span>
<img src="/images/social/instagram.svg" alt="Instagram" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.github }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">GitHub</span>
<img src="/images/social/github.svg" alt="GitHub" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.telegram }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Telegram</span>
<img src="/images/social/telegram.svg" alt="Telegram" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.discord }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Discord</span>
<img src="/images/social/discord.svg" alt="Discord" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.slack }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Slack</span>
<img src="/images/social/slack.svg" alt="Slack" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.medium }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Medium</span>
<img src="/images/social/medium.svg" alt="Medium" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.dribbble }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Dribbble</span>
<img src="/images/social/dribbble.svg" alt="Dribbble" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.behance }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Behance</span>
<img src="/images/social/behance.svg" alt="Behance" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.mastodon }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">mastodon</span>
<img src="/images/social/mastodon.svg" alt="mastodon" class="h-5 w-5">
</a>
{{ end }}
{{ with .Site.Params.social.gitlab }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">gitlab</span>
<img src="/images/social/gitlab.svg" alt="gitlab" class="h-5 w-5">
</a>
{{ end }}
</div>
</div> </div>
<!-- Column 1 --> <!-- Column 1 -->
@@ -125,19 +33,106 @@
</ul> </ul>
</div> </div>
<!-- Column 3 --> <!-- Social Media -->
<div class="flex-1"> <div class="flex-1">
<h3 class="text-sm font-semibold uppercase tracking-wider text-gray-900 mb-4">{{ .Site.Params.footer.column_3_title }}</h3> <div class="flex justify-end space-x-3 p-2">
<ul class="space-y-2"> {{ with .Site.Params.social.linkedin }}
{{ range .Site.Menus.footer_column_3 }} <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<li><a href="{{ .URL }}" class="text-gray-600 hover:text-primary-600">{{ .Name }}</a></li> <span class="sr-only">LinkedIn</span>
<img src="/images/social/linkedin.svg" alt="LinkedIn" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }} {{ end }}
</ul> {{ with .Site.Params.social.bluesky }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Bluesky</span>
<img src="/images/social/bluesky.svg" alt="Bluesky" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.twitter }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Twitter (X)</span>
<img src="/images/social/twitter.svg" alt="Twitter" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.youtube }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">YouTube</span>
<img src="/images/social/youtube.svg" alt="YouTube" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.facebook }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Facebook</span>
<img src="/images/social/facebook.svg" alt="Facebook" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.instagram }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Instagram</span>
<img src="/images/social/instagram.svg" alt="Instagram" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.github }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">GitHub</span>
<img src="/images/social/github.svg" alt="GitHub" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.telegram }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Telegram</span>
<img src="/images/social/telegram.svg" alt="Telegram" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.discord }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Discord</span>
<img src="/images/social/discord.svg" alt="Discord" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.slack }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Slack</span>
<img src="/images/social/slack.svg" alt="Slack" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.medium }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Medium</span>
<img src="/images/social/medium.svg" alt="Medium" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.dribbble }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Dribbble</span>
<img src="/images/social/dribbble.svg" alt="Dribbble" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.behance }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">Behance</span>
<img src="/images/social/behance.svg" alt="Behance" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.mastodon }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">mastodon</span>
<img src="/images/social/mastodon.svg" alt="mastodon" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
{{ with .Site.Params.social.gitlab }}
<a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
<span class="sr-only">gitlab</span>
<img src="/images/social/gitlab.svg" alt="gitlab" class="h-5 w-5 brightness-0 invert">
</a>
{{ end }}
</div>
</div> </div>
</div> </div>
<!-- Bottom --> <!-- Bottom -->
<div class="mt-12 pt-8 border-t border-gray-600"> <div class="mt-6 pt-8 border-t border-gray-600">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"> <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<p class="text-gray-600 text-sm"> <p class="text-gray-600 text-sm">
© {{ now.Format "2006" }} {{ .Site.Title }}. All rights reserved. © {{ now.Format "2006" }} {{ .Site.Title }}. All rights reserved.
themes/chill-theme/theme.toml
+1 -1
View File
@@ -1,4 +1,4 @@
name = "Hugo Saasify" name = "Theme Chill"
license = "MIT" license = "MIT"
licenselink = "" licenselink = ""
description = "" description = ""