diff --git a/themes/maya0x17/static/theme.css b/themes/maya0x17/static/theme.css
deleted file mode 100644
index ca8e278..0000000
--- a/themes/maya0x17/static/theme.css
+++ /dev/null
@@ -1,36 +0,0 @@
-h1,h2,h3,h4,h5,h6,strong,b { color: #6b3d3d; font-weight: normal; }
-body { background-color: #dfe0b4; font-size: 18px; }
-a, a:focus, a:hover, a:visited { color: #bb7652; }
-#all-wrapper {
- padding-left: 8vw;
-}
-#menu-row {
- display: none;
- position: fixed;
- top: 0px;
- left: 8vw;
- background: rgb(34, 34, 34);
- width: 89vw;
- margin-top: 8vw;
- border-radius: 1em;
- padding: 1em 0px;
-}
-#menu-row > .columns {
- font-size: 120%;
-}
-#logo-div {
- position: fixed;
- top: 5vw;
- left: -8vw;
-
- border-radius: 50%;
- box-shadow: 0px 0 3vw black;
- line-height: 0;
-}
-#logo-img {
- width: 16vw;
- /* alloca una dimensione approssimativa prima del rendering
- * non sappiamo la dimensione esatta, ma con min-height possiamo indicargli che è circa-quadrata
- * */
- min-height: 15vw;
-}
diff --git a/themes/maya0x17/static/theme.scss b/themes/maya0x17/static/theme.scss
new file mode 100644
index 0000000..44ec65a
--- /dev/null
+++ b/themes/maya0x17/static/theme.scss
@@ -0,0 +1,78 @@
+/*
+ * palette da 4 colori che pare abbiano un che di maya:
+ * Crimson sky (#CF6766),Indigo (#30415D), Ultramarine (#031424) e Light Blue (#8EAEBD);
+ * oppureuna palette forse veramente troppo colorata e accesa:
+ * Papaya (#E24E42), Mustard(#E9B000), Blush (#EB6E80) e Aqua (#008F95).
+ * */
+
+// variant 1
+$c-crimson-sky: #CF6766;
+$c-indigo: #30415D;
+$c-ultramarine: #031424;
+$c-lightblue: #8EAEBD;
+
+// variant 2
+$c-papaya: #E24E42;
+$c-mustard: #E9B000;
+$c-blush: #EB6E80;
+$c-aqua: #008F95;
+
+
+// variant 1
+$c-primary: $c-crimson-sky;
+$c-secondary: $c-lightblue;
+$c-tertiary: $c-ultramarine;
+$c-quaternary: $c-indigo;
+
+$c-text: $c-secondary;
+$c-bg: $c-tertiary;
+$c-titles: $c-primary;
+
+// variant 2
+$c-primary: $c-papaya;
+$c-secondary: $c-mustard;
+$c-tertiary: $c-blush;
+$c-quaternary: $c-aqua;
+
+$c-text: $c-secondary;
+$c-bg: $c-tertiary;
+$c-titles: $c-primary;
+
+#all-wrapper {
+ h1,h2,h3,h4,h5,h6,strong,b { color: $c-titles; font-weight: 400; }
+}
+body { background-color: $c-bg; font-size: 18px; color: $c-text; }
+a, a:focus, a:hover, a:visited { color: $c-titles; }
+h1 > (a, a:focus, a:active) { color: $c-titles; }
+#all-wrapper {
+ padding-left: 8vw;
+}
+#menu-row {
+ display: none;
+ position: fixed;
+ top: 0px;
+ left: 8vw;
+ background: adjust-color($c-bg, $lightness: -50%); //rgb(34, 34, 34);
+ width: 89vw;
+ margin-top: 8vw;
+ border-radius: 1em;
+ padding: 1em 0px;
+ ul { list-style: none; }
+ > .columns { font-size: 120%; }
+}
+#logo-div {
+ position: fixed;
+ top: 5vw;
+ left: -8vw;
+
+ border-radius: 50%;
+ box-shadow: 0px 0 3vw black;
+ line-height: 0;
+}
+#logo-img {
+ width: 16vw;
+ /* alloca una dimensione approssimativa prima del rendering
+ * non sappiamo la dimensione esatta, ma con min-height possiamo indicargli che è circa-quadrata
+ * */
+ min-height: 15vw;
+}
diff --git a/themes/maya0x17/templates/base.html b/themes/maya0x17/templates/base.html
index b050607..96b65b0 100644
--- a/themes/maya0x17/templates/base.html
+++ b/themes/maya0x17/templates/base.html
@@ -20,7 +20,7 @@
{% endif %}
{% block extra_head %}{%endblock%}
-
+
diff --git a/themes/maya0x17/templates/page.html b/themes/maya0x17/templates/page.html
index 49867f3..7b44da3 100644
--- a/themes/maya0x17/templates/page.html
+++ b/themes/maya0x17/templates/page.html
@@ -9,8 +9,12 @@
{% endif %}
{% endblock %}
+{% block body_classes %}
+page-slug--{{page.slug}}
+{% endblock %}
+
{% block content %}
-
+
{{ page.title }}
{% import 'translations.html' as translations with context %}
{{ translations.translations_for(page) }}
