diff --git a/pages/01.administrate/02.whatisyunohost/whatsyunohost.ar.md b/pages/01.administrate/02.whatisyunohost/whatsyunohost.ar.md
index 157337f9..dc13bdf2 100644
--- a/pages/01.administrate/02.whatisyunohost/whatsyunohost.ar.md
+++ b/pages/01.administrate/02.whatisyunohost/whatsyunohost.ar.md
@@ -7,7 +7,7 @@ routes:
default: '/whatsyunohost'
---
-
+
واي يونوهوست YunoHost هو **نظام لتشغيل الخوادم** صُمِّم لتسهيل الإستضافة الذاتية لخدمات الإنترنت.
هو مُرتكز و منسجم كافة الإنسجام مع توزيعة <a href="https://debian.org">غنو/لينكس ديبيان</a>.
diff --git a/pages/01.administrate/02.whatisyunohost/whatsyunohost.de.md b/pages/01.administrate/02.whatisyunohost/whatsyunohost.de.md
index 9e23dd56..6ab27348 100644
--- a/pages/01.administrate/02.whatisyunohost/whatsyunohost.de.md
+++ b/pages/01.administrate/02.whatisyunohost/whatsyunohost.de.md
@@ -7,7 +7,7 @@ routes:
default: '/whatsyunohost'
---
-
+
YunoHost ist ein **Betriebssystem**, das auf die einfachste Verwaltung eines **Servers** abzielt und daher das [Self-Hosting](/selfhosting) demokratisiert, wobei sichergestellt wird, dass es zuverlässig, sicher, ethisch einwandfrei und leichtgewichtig bleibt. Es ist ein Copylefted-Libre-Softwareprojekt, das ausschließlich von Freiwilligen betrieben wird. Technisch gesehen kann es als eine Distribution angesehen werden, die auf [Debian GNU/Linux](https://debian.org) basiert und auf [vielen Arten von Hardware](/install) installiert werden kann.
@@ -50,9 +50,7 @@ Sie können Ihre Freunde, Ihre Familie und Ihr Unternehmen sicher und problemlos
Schwarz und Weiss YunoHost PNG logo by ToZz (400 × 400 px):
-[](image://ynh_logo_black_300dpi.png)
-[](image://ynh_logo_white_300dpi.png)
-
-Zum download Klicken.
+
+
Licence: CC-BY-SA 4.0
diff --git a/pages/01.administrate/02.whatisyunohost/whatsyunohost.es.md b/pages/01.administrate/02.whatisyunohost/whatsyunohost.es.md
index 0a993cdb..417f9676 100644
--- a/pages/01.administrate/02.whatisyunohost/whatsyunohost.es.md
+++ b/pages/01.administrate/02.whatisyunohost/whatsyunohost.es.md
@@ -7,7 +7,7 @@ routes:
default: '/whatsyunohost'
---
-
+
YunoHost es un **sistema operativo** que persigue simplificar la administración de un **servidor** para democratizar el [autoalojamiento](/selfhosting), asegurando que se mantiene fiable, seguro, ético y ligero. Es un proyecto de software libre copyleft mantenido exclusivamente por voluntarios. Se puede considerar técnicamente como una distribución basada en [Debian GNU/Linux](https://debian.org) y se puede instalar en [muchos tipos de hardware](/install).
@@ -51,9 +51,7 @@ Puedes alojar a tus amistades, tu familia y a tu compañía con facilidad y segu
PNG con el logotipo de YunoHost en blanco y negro por ToZz (400 × 400 px):
-[](image://ynh_logo_black_300dpi.png)
-[](image://ynh_logo_white_300dpi.png)
-
-Clic para descargar.
+
+
Licencia: CC-BY-SA 4.0
diff --git a/pages/01.administrate/02.whatisyunohost/whatsyunohost.fr.md b/pages/01.administrate/02.whatisyunohost/whatsyunohost.fr.md
index 461e1954..c140cb52 100644
--- a/pages/01.administrate/02.whatisyunohost/whatsyunohost.fr.md
+++ b/pages/01.administrate/02.whatisyunohost/whatsyunohost.fr.md
@@ -7,7 +7,7 @@ routes:
default: '/whatsyunohost'
---
-
+
YunoHost est un **système d’exploitation** qui vise à simplifier autant que possible l'administration d'un **serveur** pour ainsi démocratiser [l’auto-hébergement](/selfhosting) tout en restant fiable, sécurisé, éthique et léger. C'est un projet de logiciel libre maintenu exclusivement par des bénévoles. Techniquement, il peut être vu comme une distribution basée sur [Debian GNU/Linux](https://debian.org) et peut s'installer sur [de nombreux types de matériel](/install).
@@ -54,6 +54,4 @@ Logo YunoHost noir et blanc réalisé par ToZz (400 × 400 px) :
[](image://ynh_logo_black_300dpi.png)
[](image://ynh_logo_white_300dpi.png)
-Cliquer pour télécharger.
-
Licence: CC-BY-SA 4.0
diff --git a/pages/01.administrate/02.whatisyunohost/whatsyunohost.md b/pages/01.administrate/02.whatisyunohost/whatsyunohost.md
index de539501..f4ba7e3f 100644
--- a/pages/01.administrate/02.whatisyunohost/whatsyunohost.md
+++ b/pages/01.administrate/02.whatisyunohost/whatsyunohost.md
@@ -7,7 +7,7 @@ routes:
default: '/whatsyunohost'
---
-
+
YunoHost is an **operating system** aiming for the simplest administration of a **server**, and therefore democratize [self-hosting](/selfhosting), while making sure it stays reliable, secure, ethical and lightweight. It is a copylefted libre software project maintained exclusively by volunteers. Technically, it can be seen as a distribution based on [Debian GNU/Linux](https://debian.org) and can be installed on [many kinds of hardware](/install).
@@ -51,7 +51,7 @@ You can host your friends, your family and your company safely and with ease, bu
Black and white YunoHost PNG logo by ToZz (400 × 400 px):
-[](image://ynh_logo_black_300dpi.png)
-[](image://ynh_logo_white_300dpi.png)
+
+
Licence: CC-BY-SA 4.0
diff --git a/pages/01.administrate/04.howtohostyourself/howtohostyourself.de.md b/pages/01.administrate/04.howtohostyourself/howtohostyourself.de.md
index c4d9c4de..24a513e4 100644
--- a/pages/01.administrate/04.howtohostyourself/howtohostyourself.de.md
+++ b/pages/01.administrate/04.howtohostyourself/howtohostyourself.de.md
@@ -88,15 +88,3 @@ Sie können einen virtuellen privaten Server oder eine dedizierte Maschine von [
</tr>
</tbody>
</table>
-
-<style>
-.danger{
- background-color: #f2dede;
-}
-.warning {
- background-color: #fcf8e3;
-}
-.success {
- background-color: #dff0d8;
-}
-</style>
\ No newline at end of file
diff --git a/pages/01.administrate/04.howtohostyourself/howtohostyourself.fr.md b/pages/01.administrate/04.howtohostyourself/howtohostyourself.fr.md
index 1ab3fde5..5f421888 100644
--- a/pages/01.administrate/04.howtohostyourself/howtohostyourself.fr.md
+++ b/pages/01.administrate/04.howtohostyourself/howtohostyourself.fr.md
@@ -87,16 +87,4 @@ Vous pouvez louer un serveur privé virtuel ou une machine dédiée à des hébe
<td style="text-align:center;" class="success">Généralement bonne</td>
</tr>
</tbody>
-</table>
-
-<style>
-.danger{
- background-color: #f2dede;
-}
-.warning {
- background-color: #fcf8e3;
-}
-.success {
- background-color: #dff0d8;
-}
-</style>
\ No newline at end of file
+</table>
\ No newline at end of file
diff --git a/pages/01.administrate/04.howtohostyourself/howtohostyourself.md b/pages/01.administrate/04.howtohostyourself/howtohostyourself.md
index bf5468a5..1be0dd10 100644
--- a/pages/01.administrate/04.howtohostyourself/howtohostyourself.md
+++ b/pages/01.administrate/04.howtohostyourself/howtohostyourself.md
@@ -87,16 +87,4 @@ You can rent a virtual private server or a dedicated machine from [associative](
<td style="text-align:center;" class="success">Typically pretty good</td>
</tr>
</tbody>
-</table>
-
-<style>
-.danger{
- background-color: #f2dede;
-}
-.warning {
- background-color: #fcf8e3;
-}
-.success {
- background-color: #dff0d8;
-}
-</style>
\ No newline at end of file
+</table>
\ No newline at end of file
diff --git a/pages/01.administrate/05.install/10.images/images.md b/pages/01.administrate/05.install/10.images/images.md
index 4dcc2f53..323992e1 100644
--- a/pages/01.administrate/05.install/10.images/images.md
+++ b/pages/01.administrate/05.install/10.images/images.md
@@ -47,6 +47,9 @@ N.B. : Even if the image does not corresponds to the latest version of YunoHost,
###############################################################################
*/
$(document).ready(function () {
+
+ $(".javascriptDisclaimer").hide();
+
console.log("in load");
$.getJSON('https://build.yunohost.org/images.json', function (images) {
$.each(images, function(k, infos) {
diff --git a/themes/yunohost-docs/css/custom.css b/themes/yunohost-docs/css/custom.css
index 56d1323f..1c03ebda 100644
--- a/themes/yunohost-docs/css/custom.css
+++ b/themes/yunohost-docs/css/custom.css
@@ -1,220 +1,537 @@
-.off-canvas .learn-sidebar:before {
- background: none;
+/*########################################
+##########################################
+ PLEASE DO NOT MODIFY THE CSS FILE
+IF YOU WANT TO CHANGE THE CSS, DO IT IN THE
+ SCSS FILES AND "COMPILE" THEM:
+ https://sass-lang.com/guide
+##########################################
+########################################*/
+body.light-mode {
+ background-color: white;
+ /*=================================================
+ Side Bar
+ =================================================*/
+ /*=================================================
+ App catalog
+ =================================================*/
+ /*=================================================
+ Hardware image
+ =================================================*/
+ /*=================================================
+ Other
+ =================================================*/
+}
+body.light-mode ::selection {
+ background-color: #dddddd;
+}
+body.light-mode #body-wrapper,
+body.light-mode #page-wrapper {
+ background-color: white;
+ color: #171b21;
+}
+body.light-mode a {
+ color: #72b6ec;
+}
+body.light-mode .card,
+body.light-mode #footer,
+body.light-mode .dropmenu ul ul {
+ background-color: #f0f0f0 !important;
+}
+body.light-mode h1,
+body.light-mode h2,
+body.light-mode h3,
+body.light-mode h4,
+body.light-mode h5,
+body.light-mode h6,
+body.light-mode #header a {
+ color: #242931;
+}
+body.light-mode .label.label-primary {
+ color: #242931;
+ background-color: #72b6ec;
+}
+body.light-mode .label.label-secondary {
+ color: #171b21;
+ background-color: #dddddd;
+}
+body.light-mode .pagination li {
+ border-color: #dddddd;
+ background: #f0f0f0;
+}
+body.light-mode #sidebar-id {
+ background: white;
+}
+body.light-mode .menu,
+body.light-mode .learn-brand,
+body.light-mode .learn-nav {
+ color: #111418;
+}
+body.light-mode .menu .menu-item > a:focus,
+body.light-mode .menu .menu-item > a:hover,
+body.light-mode #top-bar #navigation > a:hover {
+ background: #f0f0f0;
+}
+body.light-mode #sidebar ul.related-pages li {
+ border-bottom-color: #dddddd;
+}
+body.light-mode .form-input,
+body.light-mode .search-input,
+body.light-mode [data-grav-field=array] input,
+body.light-mode [data-grav-field=array] textarea {
+ background: #f0f0f0;
+}
+body.light-mode .off-canvas .learn-sidebar .learn-brand #logo path {
+ fill: #171b21 !important;
+}
+body.light-mode .simplebar-content h5 {
+ border-top-color: #dddddd;
+}
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul.searched a,
+body.light-mode .off-canvas .learn-sidebar .searchbox input {
+ color: #171b21;
+}
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul li.active > a,
+body.light-mode .off-canvas .learn-sidebar .searchbox ::placeholder {
+ color: #111418;
+ background-color: transparent;
+}
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a:hover,
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a {
+ color: #72b6ec;
+}
+body.light-mode .off-canvas .learn-sidebar .learn-nav .read-icon,
+body.light-mode .off-canvas .learn-sidebar .searchbox {
+ color: #171b21;
+}
+body.light-mode .off-canvas .learn-sidebar .search-options .version-chooser select {
+ color: #171b21;
+}
+body.light-mode .off-canvas .learn-sidebar a,
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul li a,
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul li a > i,
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul li a > span > b {
+ color: #171b21;
+}
+body.light-mode .off-canvas .learn-sidebar a:hover {
+ color: #111418;
+}
+body.light-mode #filter-app-icon {
+ background-color: #f0f0f0;
+}
+body.light-mode #app-cards-list .app-title {
+ color: #242931;
+}
+body.light-mode #app-cards-list .app-buttons {
+ border-top: 0.05rem solid #f0f0f0;
+}
+body.light-mode #app-cards-list .app-buttons > .btn-default {
+ color: #242931;
+ background-color: #dddddd;
+}
+body.light-mode #app-cards-list .app-buttons > .btn:first-child {
+ border-right: 0.1rem solid #f0f0f0;
+}
+body.light-mode #app-cards-list .app-card {
+ border-color: #dddddd;
+}
+body.light-mode #app-cards-list .label {
+ color: #111418;
+ background-color: #f0f0f0;
+}
+body.light-mode .hardware-image .card {
+ background-color: white !important;
+}
+body.light-mode .hardware-image .btn-group .btn.btn-info {
+ color: #f0f0f0;
+}
+body.light-mode .hardware-image .btn-group .btn.btn-info:hover,
+body.light-mode .btn.btn-info:focus {
+ color: #f0f0f0;
+}
+body.light-mode table tbody tr:nth-of-type(2n + 1) {
+ background: #f0f0f0;
+}
+body.light-mode table td,
+body.light-mode table th {
+ border-bottom-color: #dddddd;
+}
+body.light-mode .danger {
+ background-color: #f2dede;
+}
+body.light-mode .warning {
+ background-color: #fcf8e3;
+}
+body.light-mode .success {
+ background-color: #dff0d8;
+}
+body.light-mode .page-toc {
+ background-color: #f0f0f0;
+}
+body.light-mode .page-toc li,
+body.light-mode .page-toc li > a {
+ color: #242931;
+}
+
+/*=================================================
+ Light mode specific
+=================================================*/
+body.light-mode {
+ /* Give a gray background to the white logo*/
+}
+body.light-mode img#whitelogo {
+ background-color: gray;
+ padding: 10px;
+}
+
+/*!
+ * Dark Mode Theme
+ *
+ * Inspired by Louis Charette
+ * https://github.com/lcharette/website/blob/cc855a6eb29693613e5e4e1d589a17ba7faf4aa9/themes/quark-custom/css/darkMode.scss
+ */
+body.dark-mode {
+ background-color: #171b21;
+ /*=================================================
+ Side Bar
+ =================================================*/
+ /*=================================================
+ App catalog
+ =================================================*/
+ /*=================================================
+ Hardware image
+ =================================================*/
+ /*=================================================
+ Other
+ =================================================*/
+}
+body.dark-mode ::selection {
+ background-color: #3f4755;
+}
+body.dark-mode #body-wrapper,
+body.dark-mode #page-wrapper {
+ background-color: #171b21;
+ color: #e8e9eb;
+}
+body.dark-mode a {
+ color: #72b6ec;
+}
+body.dark-mode .card,
+body.dark-mode #footer,
+body.dark-mode .dropmenu ul ul {
+ background-color: #111418 !important;
+}
+body.dark-mode h1,
+body.dark-mode h2,
+body.dark-mode h3,
+body.dark-mode h4,
+body.dark-mode h5,
+body.dark-mode h6,
+body.dark-mode #header a {
+ color: white;
+}
+body.dark-mode .label.label-primary {
+ color: white;
+ background-color: #72b6ec;
+}
+body.dark-mode .label.label-secondary {
+ color: #e8e9eb;
+ background-color: #3f4755;
+}
+body.dark-mode .pagination li {
+ border-color: #3f4755;
+ background: #111418;
+}
+body.dark-mode #sidebar-id {
+ background: #171b21;
+}
+body.dark-mode .menu,
+body.dark-mode .learn-brand,
+body.dark-mode .learn-nav {
+ color: #a5a9af;
+}
+body.dark-mode .menu .menu-item > a:focus,
+body.dark-mode .menu .menu-item > a:hover,
+body.dark-mode #top-bar #navigation > a:hover {
+ background: #111418;
+}
+body.dark-mode #sidebar ul.related-pages li {
+ border-bottom-color: #3f4755;
+}
+body.dark-mode .form-input,
+body.dark-mode .search-input,
+body.dark-mode [data-grav-field=array] input,
+body.dark-mode [data-grav-field=array] textarea {
+ background: #111418;
+}
+body.dark-mode .off-canvas .learn-sidebar .learn-brand #logo path {
+ fill: #e8e9eb !important;
+}
+body.dark-mode .simplebar-content h5 {
+ border-top-color: #3f4755;
+}
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul.searched a,
+body.dark-mode .off-canvas .learn-sidebar .searchbox input {
+ color: #e8e9eb;
+}
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul li.active > a,
+body.dark-mode .off-canvas .learn-sidebar .searchbox ::placeholder {
+ color: #a5a9af;
+ background-color: transparent;
+}
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a:hover,
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a {
+ color: #72b6ec;
+}
+body.dark-mode .off-canvas .learn-sidebar .learn-nav .read-icon,
+body.dark-mode .off-canvas .learn-sidebar .searchbox {
+ color: #e8e9eb;
+}
+body.dark-mode .off-canvas .learn-sidebar .search-options .version-chooser select {
+ color: #e8e9eb;
+}
+body.dark-mode .off-canvas .learn-sidebar a,
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul li a,
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul li a > i,
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul li a > span > b {
+ color: #e8e9eb;
+}
+body.dark-mode .off-canvas .learn-sidebar a:hover {
+ color: #a5a9af;
+}
+body.dark-mode #filter-app-icon {
+ background-color: #111418;
+}
+body.dark-mode #app-cards-list .app-title {
+ color: white;
+}
+body.dark-mode #app-cards-list .app-buttons {
+ border-top: 0.05rem solid #111418;
+}
+body.dark-mode #app-cards-list .app-buttons > .btn-default {
+ color: white;
+ background-color: #3f4755;
+}
+body.dark-mode #app-cards-list .app-buttons > .btn:first-child {
+ border-right: 0.1rem solid #111418;
+}
+body.dark-mode #app-cards-list .app-card {
+ border-color: #3f4755;
+}
+body.dark-mode #app-cards-list .label {
+ color: #a5a9af;
+ background-color: #111418;
+}
+body.dark-mode .hardware-image .card {
+ background-color: #171b21 !important;
+}
+body.dark-mode .hardware-image .btn-group .btn.btn-info {
+ color: #111418;
+}
+body.dark-mode .hardware-image .btn-group .btn.btn-info:hover,
+body.dark-mode .btn.btn-info:focus {
+ color: #111418;
+}
+body.dark-mode table tbody tr:nth-of-type(2n + 1) {
+ background: #111418;
+}
+body.dark-mode table td,
+body.dark-mode table th {
+ border-bottom-color: #3f4755;
+}
+body.dark-mode .danger {
+ background-color: #806c6c;
+}
+body.dark-mode .warning {
+ background-color: #6b6859;
+}
+body.dark-mode .success {
+ background-color: #6a7964;
+}
+body.dark-mode .page-toc {
+ background-color: #111418;
+}
+body.dark-mode .page-toc li,
+body.dark-mode .page-toc li > a {
+ color: white;
+}
+
+/*=================================================
+ Dark mode specific
+=================================================*/
+body.dark-mode img {
+ filter: brightness(0.85) contrast(1.2);
+}
+body.dark-mode img#whitelogo {
+ background-color: unset;
+ padding: 10px;
+}
+body.dark-mode #ynhlogo {
+ filter: invert(1);
+}
+body.dark-mode .notices.yellow {
+ border-left-color: #935b0c;
+ background-color: #31220b;
+ color: #eea034;
+}
+body.dark-mode .notices.red {
+ border-left-color: #89211e;
+ background-color: #2e0b0b;
+ color: #db5a56;
+}
+body.dark-mode .notices.blue,
+body.dark-mode .notices.note {
+ border-left-color: #1b6e86;
+ background-color: #13222a;
+ color: #4bb9da;
+}
+body.dark-mode .notices.green {
+ border-left-color: #347834;
+ background-color: #192c13;
+ color: #7ac57a;
+}
+
+.learn-sidebar:before {
+ background: none !important;
}
#chapter {
- max-width: 80%;
+ max-width: 80%;
}
/* Images helper classes */
img.inline {
- display:inline;
- margin:5px 15px 5px 5px;
- vertical-align: middle;
+ display: inline;
+ margin: 5px 15px 5px 5px;
+ vertical-align: middle;
}
img.center {
- display: block;
- margin:5px 15px 5px 5px;
- margin-left: auto;
- margin-right: auto;
+ display: block;
+ margin: 5px 15px 5px 5px;
+ margin-left: auto;
+ margin-right: auto;
}
td img {
- margin: 0.2rem auto;
+ margin: 0.2rem auto;
}
/* Figures and caption */
figure img {
- margin: auto;
+ margin: auto;
}
figure figcaption {
- font-style: italic;
+ font-style: italic;
}
/* List spacing */
-ul li, ol li {
- margin-top: 0;
+ul li,
+ol li {
+ margin-top: 0;
}
-ul, ol {
- margin-bottom: 0;
+ul,
+ol {
+ margin-bottom: 0;
}
li p {
- margin: inherit;
+ margin: inherit;
}
/* Paragraphs */
p {
- margin: 0 0 1rem;
+ margin: 0 0 1rem;
}
.notices p {
- margin: 0 0 0 0.5rem;
+ margin: 0 0 0 0.5rem;
}
/* Flex */
.flex-container {
- display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
}
.flex-child {
- display: inline-flex;
- text-align: center;
+ display: inline-flex;
+ text-align: center;
}
.nomargin * {
- margin: 0px auto;
-}
-
-/* Breadcrums */
-#top-bar #breadcrumbs > span span, #top-bar #breadcrumbs > a span {
- padding: 0 !important;
-}
-
-#top-bar #breadcrumbs > span, #top-bar #breadcrumbs > a {
- padding: 0 !important;
-}
-
-#top-bar #breadcrumbs > a {
- padding: 0;
+ margin: 0px auto;
}
/* Fonts and headings */
-
-h1, h2, h3, h4, h5, h6 {
- font-family: "Source Sans Pro", "Metropolis", "Helvetica Neue", sans-serif;
- margin-top: 1rem;
- margin-bottom: 1rem;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: "Source Sans Pro", "Metropolis", "Helvetica Neue", sans-serif;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
}
.simplebar-content h5 .fa {
- font-size: 0.75em;
- margin-right: 0.2em;
- margin-left: 0.4em;
+ font-size: 0.75em;
+ margin-right: 0.2em;
+ margin-left: 0.4em;
}
.simplebar-content h5 {
- letter-spacing: 0em;
- border-top: 1px solid #ddd;
- padding: 0.8em 0;
- margin: 0;
+ letter-spacing: 0em;
+ border-top: 1px solid;
+ padding: 0.8em 0;
+ margin: 0;
}
@font-face {
- font-family: 'Source Sans Pro';
- src: url('../fonts/SourceSansPro-Bold-webfont.eot');
- src: url('../fonts/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/SourceSansPro-Bold-webfont.woff') format('woff'),
- url('../fonts/SourceSansPro-Bold-webfont.ttf') format('truetype'),
- url('../fonts/SourceSansPro-Bold-webfont.svg#fonts/SourceSansProBold') format('svg');
- font-weight: 700;
- font-style: normal;
+ font-family: "Source Sans Pro";
+ src: url("../fonts/SourceSansPro-Bold-webfont.eot");
+ src: url("../fonts/SourceSansPro-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceSansPro-Bold-webfont.woff") format("woff"), url("../fonts/SourceSansPro-Bold-webfont.ttf") format("truetype"), url("../fonts/SourceSansPro-Bold-webfont.svg#fonts/SourceSansProBold") format("svg");
+ font-weight: 700;
+ font-style: normal;
}
-
-/* Give a gray background to the white logo*/
-img#whitelogo {
- background-color: gray;
- padding: 10px;
-}
-
-/* Sidebar */
-
-#sidebar-id {
- background-color: #fffefe;
- border-right: 0.05rem solid #ddd;
-}
-
-body .off-canvas .learn-sidebar a {
- color: #364149;
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul li.active > a {
- color: black;
- background-color: transparent;
-}
-
-body .off-canvas .learn-sidebar .learn-brand #logo path {
- fill: black!important;
-}
-
+/*=================================================
+ TOP BAR
+=================================================*/
body #top-bar {
- background: none;
- border-bottom: none;
+ background: none;
+ border-bottom: none;
+}
+
+body #top-bar #navigation > a,
+body #top-bar #navigation > span {
+ border-left: none;
+}
+
+body #top-bar .progress {
+ display: none;
}
body #top-bar #navigation {
- width: auto;
-}
-body #top-bar #navigation > a {
- width: 3em;
- border-left: none;
-}
-
-body #top-bar #breadcrumbs > span span, #top-bar #breadcrumbs > a span {
- font-size: 0.7rem;
-}
-
-body #top-bar a:visited {
- color: #3e7694;
-}
-
-body #top-bar a:hover {
- text-decoration: underline;
-}
-
-body .off-canvas .learn-sidebar .searchbox ::placeholder {
- color: rgba(68, 68, 68, 0.8);
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul.searched a {
- color: black;
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a:hover, .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a {
- color: blueviolet;
-}
-
-body .off-canvas .learn-sidebar a:hover {
- color: #37419a;
-}
-
-body #header .off-canvas .learn-sidebar a:hover {
- color: black;
- text-decoration: underline black;
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul .parent ul {
- margin-left: 0.5rem;
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul li a > span > b {
- color: black;
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul.topics > li.active, body .off-canvas .learn-sidebar .learn-nav ul.topics > li.parent {
- background-color: rgba(0, 0, 0, 0.1);
+ margin-left: auto;
+ margin-right: 0;
}
+/*=================================================
+ SIDE BAR
+=================================================*/
body .off-canvas .learn-sidebar .learn-nav ul li ul li.active > a {
- background-color: rgba(0, 0, 0, 0.1);
- border-left: 4px solid mediumturquoise;
+ background-color: rgba(0, 0, 0, 0.1);
+ border-left: 4px solid mediumturquoise;
}
-body .off-canvas .learn-sidebar .learn-nav .read-icon, body .off-canvas .learn-sidebar .searchbox, body .off-canvas .learn-sidebar .search-options .version-chooser select {
- color: rgba(0, 0, 0, 0.6);
-}
-
-body .off-canvas .learn-sidebar .searchbox input {
- color: rgb(78, 78, 78);
-}
-
-body #top-bar #breadcrumbs > span, body #top-bar .progress {
- display: none;
+/*=================================================
+ SHORTCODE UI
+=================================================*/
+.tabs-wrapper.ui-theme-lite .tab {
+ background-color: inherit !important;
}
/*
@@ -222,152 +539,147 @@ body #top-bar #breadcrumbs > span, body #top-bar .progress {
Style sheet for the cards
###############################################################################
*/
-
.hardware.active {
- box-shadow: 0 0 15px #bbb;
- border-radius: 5px;
+ box-shadow: 0 0 15px #bbb;
+ border-radius: 5px;
}
.hardware-image #cards-list:after {
- content:'';
- display:block;
- clear: both;
+ content: "";
+ display: block;
+ clear: both;
}
.hardware-image .card {
- margin-bottom:20px;
- width:270px;
- float:left;
- min-height: 1px;
- margin-right: 10px;
- margin-left: 10px;
+ margin-bottom: 20px;
+ width: 270px;
+ float: left;
+ min-height: 1px;
+ margin-right: 10px;
+ margin-left: 10px;
}
-.hardware-image .card .panel-body > h3 {
- margin-top:0;
- margin-bottom:5px;
- font-size:1.2em;
+.hardware-image .card .panel-body > h3 {
+ margin-top: 0;
+ margin-bottom: 5px;
+ font-size: 1.2em;
}
.hardware-image .card-desc {
- height:135px;
- overflow: hidden;
+ height: 135px;
+ overflow: hidden;
}
.hardware-image .card .btn-group {
- width:100%;
- margin-left: 0px;
+ width: 100%;
+ margin-left: 0px;
}
-.hardware-image .card > .btn-group > .btn{
- border-bottom:0;
+
+.hardware-image .card > .btn-group > .btn {
+ border-bottom: 0;
}
-.hardware-image .card > .btn-group {
- border-left:0;
- border-top-left-radius:0;
- border-top-right-radius:0;
- margin-left: 0px;
+
+.hardware-image .card > .btn-group {
+ border-left: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ margin-left: 0px;
}
+
.hardware-image .card-comment {
- font-size: 0.8em;
- margin-top:-5px;
+ font-size: 0.8em;
+ margin-top: -5px;
}
+
.hardware-image .card > .annotations {
- text-align:center;
- font-size:small;
+ text-align: center;
+ font-size: small;
}
+
.hardware-image .card img {
- margin: 1rem auto;
+ margin: 1rem auto;
}
+
.hardware-image .btn-group .btn.btn-info {
- color: #ffffff;
- background-color: #5bc0de;
- border-color: #46b8da;
-}
-.hardware-image .btn-group .btn.btn-info:hover, .btn.btn-info:focus {
- color: #ffffff;
- background-color: #39b3d7;
- border-color: #269abc;
+ background-color: #5bc0de;
+ border-color: #46b8da;
}
-
+.hardware-image .btn-group .btn.btn-info:hover,
+.btn.btn-info:focus {
+ background-color: #39b3d7;
+ border-color: #269abc;
+}
/*=================================================
- App catalog
+ App catalog
=================================================*/
#filter-app-icon {
- padding: 6px 12px;
- margin-right: -2px;
- background-color: #f0f0f0;
+ padding: 6px 12px;
+ margin-right: -2px;
}
-#filter-app-cards, #app-cards-list {
- width:100%;
+#filter-app-cards,
+#app-cards-list {
+ width: 100%;
}
#app-cards-list:after {
- content:'';
- display:block;
- clear: both;
+ content: "";
+ display: block;
+ clear: both;
}
#app-cards-list .app-card {
- margin-bottom:30px;
- width:28%;
- float:left;
- min-height: 1px;
- margin-right: 15px;
- margin-left: 15px;
- border-radius: 3px;
- position: relative;
- height: 230px;
+ margin-bottom: 30px;
+ width: 28%;
+ float: left;
+ min-height: 1px;
+ margin-right: 15px;
+ margin-left: 15px;
+ border-radius: 3px;
+ position: relative;
+ height: 230px;
}
#app-cards-list .app-title {
- margin-top: 0;
- margin-bottom: 5px;
- font-size: 1.2em;
- font-weight: 700;
- line-height: 1.1;
- color: black;
- padding: 1rem 1rem;
- padding-bottom: 0;
+ margin-top: 0;
+ margin-bottom: 5px;
+ font-size: 1.2em;
+ font-weight: 700;
+ line-height: 1.1;
+ padding: 1rem 1rem;
+ padding-bottom: 0;
}
#app-cards-list .app-title .label {
- font-size: 0.5em;
- display: inline-block;
- vertical-align: middle;
- padding: 0.5em 0.6em;
- padding-bottom: 0.3em;
+ font-size: 0.5em;
+ display: inline-block;
+ vertical-align: middle;
+ padding: 0.5em 0.6em;
+ padding-bottom: 0.3em;
}
#app-cards-list .app-descr {
- height:120px;
- overflow: hidden;
- padding: 0.2rem 1rem;
+ height: 120px;
+ overflow: hidden;
+ padding: 0.2rem 1rem;
}
#app-cards-list .app-footer {
- width:100%;
- position: absolute;
- bottom: 0;
+ width: 100%;
+ position: absolute;
+ bottom: 0;
}
#app-cards-list .app-buttons {
- border-top: 0.05rem solid #ddd;
- width:100%;
+ width: 100%;
}
+
#app-cards-list .app-buttons > .btn {
- border: 0;
- font-size: 0.9em;
- line-height: 1.58;
-}
-
-#app-cards-list .app-buttons > .btn-default {
- color: #222;
-}
-
-#app-cards-list .app-buttons > .btn:first-child {
- border-right: 0.1rem solid #ddd;
+ border: 0;
+ font-size: 0.9em;
+ line-height: 1.58;
}
+/*# sourceMappingURL=custom.css.map */
diff --git a/themes/yunohost-docs/css/custom.css.map b/themes/yunohost-docs/css/custom.css.map
new file mode 100644
index 00000000..636339e1
--- /dev/null
+++ b/themes/yunohost-docs/css/custom.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../scss/theme/light/_custom.scss","../scss/theme/dark/_custom.scss","../scss/theme/_global.scss"],"names":[],"mappings":"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;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAIA;EACA;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAMA;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA","file":"custom.css"}
\ No newline at end of file
diff --git a/themes/yunohost-docs/js/darkMode.js b/themes/yunohost-docs/js/darkMode.js
new file mode 100644
index 00000000..7df345a2
--- /dev/null
+++ b/themes/yunohost-docs/js/darkMode.js
@@ -0,0 +1,52 @@
+
+/**
+ * Custom dark mode
+ */
+
+// Get user preference
+const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+// Select the theme preference from localStorage
+const currentTheme = localStorage.getItem("theme") ? localStorage.getItem("theme") : null;
+
+// If the current theme in localStorage is "dark" or user prefer dark, apply it
+if (currentTheme == "dark" || (currentTheme == null && prefersDarkScheme)) {
+ document.body.classList.add("dark-mode");
+}
+else
+{
+ document.body.classList.add("light-mode");
+}
+
+// Get all elements with switch class
+const switches = document.querySelectorAll(".dark-mode-switcher");
+
+// Apply event function to each element
+for (var i = 0; i < switches.length; i++) {
+ switches[i].addEventListener('click', darkModeSwith);
+}
+
+function darkModeSwith(event) {
+
+ // Prevent href action
+ event.preventDefault();
+
+ // Toggle the .dark-theme class
+ document.body.classList.toggle("dark-mode");
+ document.body.classList.toggle("light-mode");
+
+ // If the body contains the .dark-theme class...
+ // Then save the choice in localStorage
+ if (document.body.classList.contains("dark-mode")) {
+ localStorage.setItem("theme", "dark");
+ } else {
+ localStorage.setItem("theme", "light");
+ }
+
+ // Close mobile menu
+ if (toggle = document.querySelector('#toggle'))
+ toggle.classList.remove('active');
+ if (overlay = document.querySelector('#overlay'))
+ overlay.classList.remove('open');
+ document.body.classList.remove('mobile-nav-open');
+}
\ No newline at end of file
diff --git a/themes/yunohost-docs/scss/custom.scss b/themes/yunohost-docs/scss/custom.scss
new file mode 100644
index 00000000..565166eb
--- /dev/null
+++ b/themes/yunohost-docs/scss/custom.scss
@@ -0,0 +1,11 @@
+/*########################################
+##########################################
+ PLEASE DO NOT MODIFY THE CSS FILE
+IF YOU WANT TO CHANGE THE CSS, DO IT IN THE
+ SCSS FILES AND "COMPILE" THEM:
+ https://sass-lang.com/guide
+##########################################
+########################################*/
+@import "theme/light/custom";
+@import "theme/dark/custom";
+@import "theme/global";
diff --git a/themes/yunohost-docs/scss/theme/_global.scss b/themes/yunohost-docs/scss/theme/_global.scss
new file mode 100644
index 00000000..7c4e8a29
--- /dev/null
+++ b/themes/yunohost-docs/scss/theme/_global.scss
@@ -0,0 +1,296 @@
+.learn-sidebar:before {
+ background: none !important;
+}
+
+#chapter {
+ max-width: 80%;
+}
+
+/* Images helper classes */
+img.inline {
+ display: inline;
+ margin: 5px 15px 5px 5px;
+ vertical-align: middle;
+}
+
+img.center {
+ display: block;
+ margin: 5px 15px 5px 5px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+td img {
+ margin: 0.2rem auto;
+}
+
+/* Figures and caption */
+figure img {
+ margin: auto;
+}
+
+figure figcaption {
+ font-style: italic;
+}
+
+/* List spacing */
+ul li,
+ol li {
+ margin-top: 0;
+}
+
+ul,
+ol {
+ margin-bottom: 0;
+}
+
+li p {
+ margin: inherit;
+}
+
+/* Paragraphs */
+p {
+ margin: 0 0 1rem;
+}
+
+.notices p {
+ margin: 0 0 0 0.5rem;
+}
+
+/* Flex */
+.flex-container {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+}
+
+.flex-child {
+ display: inline-flex;
+ text-align: center;
+}
+
+.nomargin * {
+ margin: 0px auto;
+}
+
+/* Fonts and headings */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: "Source Sans Pro", "Metropolis", "Helvetica Neue", sans-serif;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+
+.simplebar-content h5 .fa {
+ font-size: 0.75em;
+ margin-right: 0.2em;
+ margin-left: 0.4em;
+}
+
+.simplebar-content h5 {
+ letter-spacing: 0em;
+ border-top: 1px solid;
+ padding: 0.8em 0;
+ margin: 0;
+}
+
+@font-face {
+ font-family: "Source Sans Pro";
+ src: url("../fonts/SourceSansPro-Bold-webfont.eot");
+ src: url("../fonts/SourceSansPro-Bold-webfont.eot?#iefix") format("embedded-opentype"),
+ url("../fonts/SourceSansPro-Bold-webfont.woff") format("woff"),
+ url("../fonts/SourceSansPro-Bold-webfont.ttf") format("truetype"),
+ url("../fonts/SourceSansPro-Bold-webfont.svg#fonts/SourceSansProBold") format("svg");
+ font-weight: 700;
+ font-style: normal;
+}
+
+/*=================================================
+ TOP BAR
+=================================================*/
+
+body #top-bar {
+ background: none;
+ border-bottom: none;
+}
+
+body #top-bar #navigation > a,
+body #top-bar #navigation > span {
+ border-left: none;
+}
+
+body #top-bar .progress {
+ display: none;
+}
+
+body #top-bar #navigation {
+ margin-left: auto;
+ margin-right: 0;
+}
+
+/*=================================================
+ SIDE BAR
+=================================================*/
+
+body .off-canvas .learn-sidebar .learn-nav ul li ul li.active > a {
+ background-color: rgba(0, 0, 0, 0.1);
+ border-left: 4px solid mediumturquoise;
+}
+
+/*=================================================
+ SHORTCODE UI
+=================================================*/
+
+.tabs-wrapper.ui-theme-lite .tab {
+ background-color: inherit !important;
+}
+
+/*
+###############################################################################
+ Style sheet for the cards
+###############################################################################
+*/
+
+.hardware.active {
+ box-shadow: 0 0 15px #bbb;
+ border-radius: 5px;
+}
+
+.hardware-image #cards-list:after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+.hardware-image .card {
+ margin-bottom: 20px;
+ width: 270px;
+ float: left;
+ min-height: 1px;
+ margin-right: 10px;
+ margin-left: 10px;
+}
+
+.hardware-image .card .panel-body > h3 {
+ margin-top: 0;
+ margin-bottom: 5px;
+ font-size: 1.2em;
+}
+
+.hardware-image .card-desc {
+ height: 135px;
+ overflow: hidden;
+}
+
+.hardware-image .card .btn-group {
+ width: 100%;
+ margin-left: 0px;
+}
+.hardware-image .card > .btn-group > .btn {
+ border-bottom: 0;
+}
+.hardware-image .card > .btn-group {
+ border-left: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ margin-left: 0px;
+}
+.hardware-image .card-comment {
+ font-size: 0.8em;
+ margin-top: -5px;
+}
+.hardware-image .card > .annotations {
+ text-align: center;
+ font-size: small;
+}
+.hardware-image .card img {
+ margin: 1rem auto;
+}
+
+.hardware-image .btn-group .btn.btn-info {
+ background-color: #5bc0de;
+ border-color: #46b8da;
+}
+
+.hardware-image .btn-group .btn.btn-info:hover,
+.btn.btn-info:focus {
+ background-color: #39b3d7;
+ border-color: #269abc;
+}
+
+/*=================================================
+ App catalog
+=================================================*/
+
+#filter-app-icon {
+ padding: 6px 12px;
+ margin-right: -2px;
+}
+
+#filter-app-cards,
+#app-cards-list {
+ width: 100%;
+}
+
+#app-cards-list:after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+#app-cards-list .app-card {
+ margin-bottom: 30px;
+ width: 28%;
+ float: left;
+ min-height: 1px;
+ margin-right: 15px;
+ margin-left: 15px;
+ border-radius: 3px;
+ position: relative;
+ height: 230px;
+}
+
+#app-cards-list .app-title {
+ margin-top: 0;
+ margin-bottom: 5px;
+ font-size: 1.2em;
+ font-weight: 700;
+ line-height: 1.1;
+ padding: 1rem 1rem;
+ padding-bottom: 0;
+}
+
+#app-cards-list .app-title .label {
+ font-size: 0.5em;
+ display: inline-block;
+ vertical-align: middle;
+ padding: 0.5em 0.6em;
+ padding-bottom: 0.3em;
+}
+
+#app-cards-list .app-descr {
+ height: 120px;
+ overflow: hidden;
+ padding: 0.2rem 1rem;
+}
+
+#app-cards-list .app-footer {
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+}
+
+#app-cards-list .app-buttons {
+ width: 100%;
+}
+
+#app-cards-list .app-buttons > .btn {
+ border: 0;
+ font-size: 0.9em;
+ line-height: 1.58;
+}
diff --git a/themes/yunohost-docs/scss/theme/dark/_custom.scss b/themes/yunohost-docs/scss/theme/dark/_custom.scss
new file mode 100644
index 00000000..68712ea9
--- /dev/null
+++ b/themes/yunohost-docs/scss/theme/dark/_custom.scss
@@ -0,0 +1,287 @@
+/*!
+ * Dark Mode Theme
+ *
+ * Inspired by Louis Charette
+ * https://github.com/lcharette/website/blob/cc855a6eb29693613e5e4e1d589a17ba7faf4aa9/themes/quark-custom/css/darkMode.scss
+ */
+
+body.dark-mode {
+ // Variables
+ $background-color: rgb(23, 27, 33);
+ $text-color: rgb(232, 233, 235);
+ $text-accent-color: white;
+ $text-darker-color: rgb(165, 169, 175);
+ $card-bg-color: rgb(17, 20, 24);
+ $border-color: rgb(63, 71, 85);
+ $link-color: rgb(114, 182, 236);
+
+ $danger: rgb(128, 108, 108);
+ $warning: rgb(107, 104, 89);
+ $success: rgb(106, 121, 100);
+
+ // Main body background
+ background-color: $background-color;
+
+ ::selection {
+ background-color: $border-color;
+ }
+
+ // Page wrapper
+ #body-wrapper,
+ #page-wrapper {
+ background-color: $background-color;
+ color: $text-color;
+ }
+
+ // Darker blue for links
+ a {
+ color: $link-color;
+ }
+
+ // Card, header and dropdown have darker background
+ .card,
+ #footer,
+ .dropmenu ul ul {
+ background-color: $card-bg-color !important;
+ }
+
+ // Headers have whiter color
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ #header a {
+ color: $text-accent-color;
+ }
+
+ // Labels are grey
+ .label.label-primary {
+ color: $text-accent-color;
+ background-color: $link-color;
+ }
+ .label.label-secondary {
+ color: $text-color;
+ background-color: $border-color;
+ }
+
+ // Pagination border is slighly different than the text
+ .pagination li {
+ border-color: $border-color;
+ background: $card-bg-color;
+ }
+
+ #sidebar-id {
+ background: $background-color;
+ }
+ // Sidebar menu use darker text color for focus
+ .menu,
+ .learn-brand,
+ .learn-nav {
+ color: $text-darker-color;
+ }
+
+ .menu .menu-item > a:focus,
+ .menu .menu-item > a:hover,
+ #top-bar #navigation > a:hover {
+ background: $card-bg-color;
+ }
+
+ #sidebar ul.related-pages li {
+ border-bottom-color: $border-color;
+ }
+
+ // Form background
+ .form-input,
+ .search-input,
+ [data-grav-field="array"] input,
+ [data-grav-field="array"] textarea {
+ background: $card-bg-color;
+ }
+
+ /*=================================================
+ Side Bar
+ =================================================*/
+ // Change logo color
+ .off-canvas .learn-sidebar .learn-brand #logo path {
+ fill: $text-color !important;
+ }
+
+ // Sidebar separator
+ .simplebar-content h5 {
+ border-top-color: $border-color;
+ }
+
+ // Text in the sidebar during a search
+ .off-canvas .learn-sidebar .learn-nav ul.searched a,
+ .off-canvas .learn-sidebar .searchbox input {
+ color: $text-color;
+ }
+
+ // Selected text in the sidebar
+ .off-canvas .learn-sidebar .learn-nav ul li.active > a,
+ // Placeholder of the searching bar
+ .off-canvas .learn-sidebar .searchbox ::placeholder {
+ color: $text-darker-color;
+ background-color: transparent;
+ }
+
+ // Matching text in the sidebar
+ .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a:hover,
+ .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a {
+ color: $link-color;
+ }
+
+ // Icons
+ .off-canvas .learn-sidebar .learn-nav .read-icon,
+ .off-canvas .learn-sidebar .searchbox {
+ color: $text-color;
+ }
+
+ // Language selector
+ .off-canvas .learn-sidebar .search-options .version-chooser select {
+ color: $text-color;
+ }
+
+ // Default text color
+ .off-canvas .learn-sidebar a,
+ .off-canvas .learn-sidebar .learn-nav ul li a,
+ .off-canvas .learn-sidebar .learn-nav ul li a > i,
+ .off-canvas .learn-sidebar .learn-nav ul li a > span > b {
+ color: $text-color;
+ }
+
+ .off-canvas .learn-sidebar a:hover {
+ color: $text-darker-color;
+ }
+
+ /*=================================================
+ App catalog
+ =================================================*/
+
+ #filter-app-icon {
+ background-color: $card-bg-color;
+ }
+
+ #app-cards-list .app-title {
+ color: $text-accent-color;
+ }
+
+ #app-cards-list .app-buttons {
+ border-top: 0.05rem solid $card-bg-color;
+ }
+
+ #app-cards-list .app-buttons > .btn-default {
+ color: $text-accent-color;
+ background-color: $border-color;
+ }
+
+ #app-cards-list .app-buttons > .btn:first-child {
+ border-right: 0.1rem solid $card-bg-color;
+ }
+
+ #app-cards-list .app-card {
+ border-color: $border-color;
+ }
+
+ #app-cards-list .label {
+ color: $text-darker-color;
+ background-color: $card-bg-color;
+ }
+
+ /*=================================================
+ Hardware image
+ =================================================*/
+
+ .hardware-image .card {
+ background-color: $background-color !important;
+ }
+
+ .hardware-image .btn-group .btn.btn-info {
+ color: $card-bg-color;
+ }
+
+ .hardware-image .btn-group .btn.btn-info:hover,
+ .btn.btn-info:focus {
+ color: $card-bg-color;
+ }
+
+ /*=================================================
+ Other
+ =================================================*/
+
+ // Html tables
+ table tbody tr:nth-of-type(2n + 1) {
+ background: $card-bg-color;
+ }
+
+ table td,
+ table th {
+ border-bottom-color: $border-color;
+ }
+
+ // Color utils
+ .danger {
+ background-color: $danger;
+ }
+ .warning {
+ background-color: $warning;
+ }
+ .success {
+ background-color: $success;
+ }
+
+ .page-toc {
+ background-color: $card-bg-color;
+ }
+
+ .page-toc li,
+ .page-toc li > a {
+ color: $text-accent-color;
+ }
+}
+
+/*=================================================
+ Dark mode specific
+=================================================*/
+body.dark-mode {
+ // Dim images
+ img {
+ filter: brightness(0.85) contrast(1.2);
+ }
+
+ img#whitelogo {
+ background-color: unset;
+ padding: 10px;
+ }
+
+ #ynhlogo {
+ filter: invert(1);
+ }
+
+ .notices.yellow {
+ border-left-color: rgb(147, 91, 12);
+ background-color: rgb(49, 34, 11);
+ color: rgb(238, 160, 52);
+ }
+
+ .notices.red {
+ border-left-color: rgb(137, 33, 30);
+ background-color: rgb(46, 11, 11);
+ color: rgb(219, 90, 86);
+ }
+
+ .notices.blue,
+ .notices.note {
+ border-left-color: rgb(27, 110, 134);
+ background-color: rgb(19, 34, 42);
+ color: rgb(75, 185, 218);
+ }
+
+ .notices.green {
+ border-left-color: rgb(52, 120, 52);
+ background-color: rgb(25, 44, 19);
+ color: rgb(122, 197, 122);
+ }
+}
diff --git a/themes/yunohost-docs/scss/theme/light/_custom.scss b/themes/yunohost-docs/scss/theme/light/_custom.scss
new file mode 100644
index 00000000..d4f1ba8f
--- /dev/null
+++ b/themes/yunohost-docs/scss/theme/light/_custom.scss
@@ -0,0 +1,246 @@
+body.light-mode {
+ // Variables
+ $background-color: rgb(255, 255, 255);
+ $text-color: rgb(23, 27, 33);
+ $text-accent-color: rgb(36, 41, 49);
+ $text-darker-color: rgb(17, 20, 24);
+ $card-bg-color: rgb(240, 240, 240);
+ $border-color: rgb(221, 221, 221);
+ $link-color: rgb(114, 182, 236);
+
+ $danger: rgb(242, 222, 222);
+ $warning: rgb(252, 248, 227);
+ $success: rgb(223, 240, 216);
+
+ // Main body background
+ background-color: $background-color;
+
+ ::selection {
+ background-color: $border-color;
+ }
+ // Page wrapper
+ #body-wrapper,
+ #page-wrapper {
+ background-color: $background-color;
+ color: $text-color;
+ }
+
+ // Darker blue for links
+ a {
+ color: $link-color;
+ }
+
+ // Card, header and dropdown have darker background
+ .card,
+ #footer,
+ .dropmenu ul ul {
+ background-color: $card-bg-color !important;
+ }
+
+ // Headers have whiter color
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ #header a {
+ color: $text-accent-color;
+ }
+
+ // Labels are grey
+ .label.label-primary {
+ color: $text-accent-color;
+ background-color: $link-color;
+ }
+ .label.label-secondary {
+ color: $text-color;
+ background-color: $border-color;
+ }
+
+ // Pagination border is slighly different than the text
+ .pagination li {
+ border-color: $border-color;
+ background: $card-bg-color;
+ }
+
+ #sidebar-id {
+ background: $background-color;
+ }
+ // Sidebar menu use darker text color for focus
+ .menu,
+ .learn-brand,
+ .learn-nav {
+ color: $text-darker-color;
+ }
+
+ .menu .menu-item > a:focus,
+ .menu .menu-item > a:hover,
+ #top-bar #navigation > a:hover {
+ background: $card-bg-color;
+ }
+
+ #sidebar ul.related-pages li {
+ border-bottom-color: $border-color;
+ }
+
+ // Form background
+ .form-input,
+ .search-input,
+ [data-grav-field="array"] input,
+ [data-grav-field="array"] textarea {
+ background: $card-bg-color;
+ }
+
+ /*=================================================
+ Side Bar
+ =================================================*/
+ // Change logo color
+ .off-canvas .learn-sidebar .learn-brand #logo path {
+ fill: $text-color !important;
+ }
+
+ // Sidebar separator
+ .simplebar-content h5 {
+ border-top-color: $border-color;
+ }
+
+ // Text in the sidebar during a search
+ .off-canvas .learn-sidebar .learn-nav ul.searched a,
+ .off-canvas .learn-sidebar .searchbox input {
+ color: $text-color;
+ }
+
+ // Selected text in the sidebar
+ .off-canvas .learn-sidebar .learn-nav ul li.active > a,
+ // Placeholder of the searching bar
+ .off-canvas .learn-sidebar .searchbox ::placeholder {
+ color: $text-darker-color;
+ background-color: transparent;
+ }
+
+ // Matching text in the sidebar
+ .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a:hover,
+ .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a {
+ color: $link-color;
+ }
+
+ // Icons
+ .off-canvas .learn-sidebar .learn-nav .read-icon,
+ .off-canvas .learn-sidebar .searchbox {
+ color: $text-color;
+ }
+
+ // Language selector
+ .off-canvas .learn-sidebar .search-options .version-chooser select {
+ color: $text-color;
+ }
+
+ // Default text color
+ .off-canvas .learn-sidebar a,
+ .off-canvas .learn-sidebar .learn-nav ul li a,
+ .off-canvas .learn-sidebar .learn-nav ul li a > i,
+ .off-canvas .learn-sidebar .learn-nav ul li a > span > b {
+ color: $text-color;
+ }
+
+ .off-canvas .learn-sidebar a:hover {
+ color: $text-darker-color;
+ }
+
+ /*=================================================
+ App catalog
+ =================================================*/
+
+ #filter-app-icon {
+ background-color: $card-bg-color;
+ }
+
+ #app-cards-list .app-title {
+ color: $text-accent-color;
+ }
+
+ #app-cards-list .app-buttons {
+ border-top: 0.05rem solid $card-bg-color;
+ }
+
+ #app-cards-list .app-buttons > .btn-default {
+ color: $text-accent-color;
+ background-color: $border-color;
+ }
+
+ #app-cards-list .app-buttons > .btn:first-child {
+ border-right: 0.1rem solid $card-bg-color;
+ }
+
+ #app-cards-list .app-card {
+ border-color: $border-color;
+ }
+
+ #app-cards-list .label {
+ color: $text-darker-color;
+ background-color: $card-bg-color;
+ }
+
+ /*=================================================
+ Hardware image
+ =================================================*/
+
+ .hardware-image .card {
+ background-color: $background-color !important;
+ }
+
+ .hardware-image .btn-group .btn.btn-info {
+ color: $card-bg-color;
+ }
+
+ .hardware-image .btn-group .btn.btn-info:hover,
+ .btn.btn-info:focus {
+ color: $card-bg-color;
+ }
+
+ /*=================================================
+ Other
+ =================================================*/
+
+ // Html tables
+ table tbody tr:nth-of-type(2n + 1) {
+ background: $card-bg-color;
+ }
+
+ table td,
+ table th {
+ border-bottom-color: $border-color;
+ }
+
+ // Color utils
+ .danger {
+ background-color: $danger;
+ }
+ .warning {
+ background-color: $warning;
+ }
+ .success {
+ background-color: $success;
+ }
+
+ .page-toc {
+ background-color: $card-bg-color;
+ }
+
+ .page-toc li,
+ .page-toc li > a {
+ color: $text-accent-color;
+ }
+}
+
+/*=================================================
+ Light mode specific
+=================================================*/
+body.light-mode {
+ /* Give a gray background to the white logo*/
+ img#whitelogo {
+ background-color: gray;
+ padding: 10px;
+ }
+}
diff --git a/themes/yunohost-docs/templates/partials/base.html.twig b/themes/yunohost-docs/templates/partials/base.html.twig
index e8076b09..6e29f7d8 100644
--- a/themes/yunohost-docs/templates/partials/base.html.twig
+++ b/themes/yunohost-docs/templates/partials/base.html.twig
@@ -22,7 +22,6 @@
{% do assets.addCss('theme://css-compiled/spectre'~compress) %}
{% do assets.addCss('theme://css-compiled/theme'~compress) %}
{% do assets.addCss('theme://css/custom.css') %}
- {% do assets.addCss('theme://css/darkMode.css') %}
{% endblock %}
{% block javascripts %}
diff --git a/themes/yunohost-docs/templates/partials/darkmodeswitcher.html.twig b/themes/yunohost-docs/templates/partials/darkmodeswitcher.html.twig
new file mode 100644
index 00000000..99e7911f
--- /dev/null
+++ b/themes/yunohost-docs/templates/partials/darkmodeswitcher.html.twig
@@ -0,0 +1,3 @@
+<a href="#" class="dark-mode-switcher">
+ <i class="fa fa-moon-o"></i>
+</a>
\ No newline at end of file
diff --git a/themes/yunohost-docs/templates/partials/topbar.html.twig b/themes/yunohost-docs/templates/partials/topbar.html.twig
index 39bd21c0..87734f15 100644
--- a/themes/yunohost-docs/templates/partials/topbar.html.twig
+++ b/themes/yunohost-docs/templates/partials/topbar.html.twig
@@ -5,14 +5,11 @@
</div>
{% endif %}
- {% if config.plugins.breadcrumbs.enabled %}
- {% include 'partials/breadcrumbs.html.twig' %}
- {% endif %}
-
<div id="navigation">
{% if theme_var('github.link') %}
{% include 'partials/github-link.html.twig' %}
{% endif %}
+ {% include 'partials/darkmodeswitcher.html.twig' %}
{% if not progress.isFirst(page.path) %}
<a class="nav-prev tooltip tooltip-bottom" data-tooltip="Previous Page [←]" href="{{ progress.nextSibling(page.path).url }}"> <i class="fa fa-angle-left"></i></a>
{% else %}