create theme chocolate

app/static/themes/chocolate/css/base.css

@@ -0,0 +1,415 @@
+@font-face{
+    font-family:"Rosa Black Sans";
+    src:url("fonts/hinted-RosaSans-Black.ttf") format("truetype");
+    font-weight:normal;
+    font-style:normal
+}
+
+@font-face
+{
+    font-family:"Rosa Black Italic";
+    src:url("fonts/hinted-RosaSans-BlackItalic.ttf") format("truetype");
+    font-weight:normal;font-style:italic
+}
+
+@font-face
+{
+    font-family:"Rosa Black Bold";
+    src:url("fonts/hinted-RosaSans-Bold.ttf") format("truetype");
+    font-weight:bold;
+    font-style:normal
+}
+
+html
+{
+    height:100%;
+    width:80%;
+    margin-left:10%
+}
+
+body, .modal-content
+{
+    color:#fff487;
+    background-color:#45050c
+}
+
+.title {
+	margin-top:2vw;
+}
+
+.icon
+{
+    margin-bottom:5px
+}
+
+.icons img
+{
+    width:2vw;
+    height:2vw;
+    margin-top:10px;
+    display:inline-block;
+    align-items:center
+}
+
+
+hr
+{
+    color:#fff487
+}
+
+*
+{
+    -moz-box-sizing:border-box;
+    box-sizing:border-box
+}
+
+a
+{
+    color:#d39050;text-decoration:none
+}
+
+a:hover{
+    color: #fff487;
+}
+
+.date
+{
+    margin-bottom:0
+}
+
+.slug
+{
+    text-align:left;
+    margin-bottom:2rem;
+}
+
+.readmore
+{
+    text-align:right
+}
+
+.readmore a
+{
+    color:#fff487;
+    text-decoration:underline
+}
+
+.menugauche
+{
+    position:fixed;
+    max-width:100px
+}
+
+.menu img
+{
+    max-width:20px;
+    max-height:20px;
+}
+
+
+.copyleft
+{
+    display:inline-block;
+    transform:rotate(180deg);
+    padding-bottom:-15px
+}
+
+pre
+{
+    white-space:pre-wrap;
+    white-space:-moz-pre-wrap;
+    white-space:-pre-wrap;
+    white-space:-o-pre-wrap;
+    word-wrap:break-word;
+}
+
+.toggle
+{
+    background-color:#fff487;
+    text-align:center;
+    height:100px;
+    width:100px;
+    border-radius:50%;
+    position:fixed;
+    margin:140px;
+    margin-left:10%;
+    top:20%;
+    bottom:0px;
+    left:0px;
+    right:0px
+}
+
+.toggle h2
+{
+    margin-top:1.5em;
+    color:#45050c
+}
+
+.menu{
+    background-color:#d39050;
+    height:100px;
+    width:100px;
+    transform:scale(0);
+    border-radius:50%;
+    border-style:double;
+    border-color:#fff487;
+    position:fixed;
+    margin-top:140px;
+    margin-left:10%;
+    top:20%;
+    bottom:0px;
+    left:0px;
+    right:0px;
+    z-index:-1;
+    transition:.7s
+}
+
+.menu a{
+    display:inline-block;
+    position:fixed;
+    font-size:15px;
+    color:#45050c
+}
+
+ul{
+    list-style-type:none;
+    margin:0;
+    padding:0
+}
+
+.menu p
+{
+    margin-top:-4px;
+    font-size:5px;
+}
+
+.post
+{
+ padding: 10px;
+}
+
+.articles, .modal-content
+{
+    margin-left:10vw;
+    margin-right:10vw;
+    margin-top:5rem;
+    margin-bottom:3rem;
+    padding:.5em;
+    /*border:7px double;
+    border-color:#fff487;
+    border-radius:10px 10px 10px 10px;*/
+    line-height:1.5;
+    letter-spacing:.1vw;
+}
+
+.articles ul, ol
+{
+    list-style-type:disc;
+    margin:5vw;
+    padding-top:1vw;
+    padding-bottom:1vw;
+    padding-left:1.5vw;
+}
+
+.articles h2,h3,h4
+{
+    color:#d39050;
+}
+
+.articles .titre
+{
+    color:#d39050;
+    text-align:center
+}
+
+.articles img
+{
+    display:block;
+    margin-left:auto;
+    margin-right:auto;
+    margin-bottom:2vw;
+}
+
+.articles .description
+{
+    font-weight:300;
+    font-size:1vw;
+    padding-bottom:30px;
+    color:#fff487
+}
+
+.pagination a
+{
+    border:1px solid;
+    border-color:#d39050;
+    padding:3px;
+    font-size:13px
+}
+
+.center
+{
+    margin:auto;
+    width:50%;
+    padding:10px
+}
+
+.contact
+{
+    text-align:center;
+}
+
+footer
+{
+    position:relative;
+    bottom:0px;
+    width:100%;
+    text-align:center
+}
+
+.btn:hover a:hover {
+    text-decoration: underline;
+}
+
+@media only screen and (max-width: 980px)
+{
+    .articles .description{
+	font-size:4vw
+    }
+
+    .articles
+    {
+	margin-left:0;
+	position:relative;
+	font-size:3.5vw
+    }
+
+    .toggle
+    {
+	display:none
+    }
+
+    .menugauche
+    {
+	max-width:unset;
+	position:sticky;
+	top:0px;
+	z-index:5;
+	width:100%
+    }
+
+    .menu {
+	width:100%;
+	height:13vw;
+	border-radius:0%;
+	border:5px double;
+	border-color:#fff487;
+	position:sticky;
+	margin-top:0rem;
+	border-radius:10px 10px 10px 10px;
+	margin-bottom:0px;
+	margin-left:0;
+	transform:none
+    }
+
+    .menu a{
+	display:inline-block;
+	position:absolute
+    }
+
+    .menu img{
+	transform:scale(4)}
+    .menu p{margin:.3rem;
+	    font-size:13px
+	   }
+
+    .menu img:hover
+    {
+	transform:scale(5)
+    }
+
+    a:nth-child(1)
+    {
+	top:4vw;
+	left:20%
+    }
+
+    a:nth-child(4)
+    {
+	top:4vw;
+	left:40%
+    }
+
+    a:nth-child(2)
+    {
+	top:4vw;
+	left:60%
+    }
+
+    a:nth-child(3)
+    {
+	top:4vw;
+	left:80%
+    }
+
+    footer
+    {
+	font-size:3vw
+    }
+    .icons img
+    {
+	width:7vw;
+	height:7vw;
+	margin:20px;
+	display:inline-block;
+	align-items:center
+    }
+
+    .articles img{
+	display:block;
+	margin-left:auto;
+	margin-right:auto;
+	width:80%
+    }
+
+}
+
+@media only screen and (max-width: 980px)
+{
+    html
+    {
+	height:100%;
+	width:100%;
+	margin:0
+    }
+    .menu p
+    {
+	display:none
+    }
+
+    .menu
+    {
+	align-self:center
+    }
+}
+
+@media only screen and (max-width: 768px)
+{
+    .menu{height:15vw}
+    .menu img
+    {
+	max-width:10px;
+	max-height:10px
+    }
+    .title h1
+    {
+	font-size:5vw
+    }
+
+    .icons img{
+	width:7vw;
+	height:7vw;
+	margin:20px;
+	display:inline-block;
+	align-items:center;
+    }
+}

app/static/themes/chocolate/css/menu.css

@@ -0,0 +1,327 @@
+@font-face{
+    font-family:"Rosa Black Sans";
+    src:url("fonts/hinted-RosaSans-Black.ttf") format("truetype");
+    font-weight:normal;
+    font-style:normal;
+}
+
+@font-face{
+    font-family:"Rosa Black Italic";
+    src:url("/fonts/hinted-RosaSans-BlackItalic.ttf") format("truetype");
+    font-weight:normal;
+    font-style:italic;
+}
+
+@font-face{font-family:"Rosa Black Bold";
+	   src:url("/fonts/hinted-RosaSans-Bold.ttf") format("truetype");
+	   font-weight:bold;
+	   font-style:normal;
+	  }
+
+.section-center{
+    position:absolute;
+    top:50%;
+    left:0;
+    display:block;
+    width:100%;
+    padding:0;
+    margin:0;
+    z-index:6;
+    text-align:center;
+    transform:translateY(-50%);
+}
+
+[type=checkbox]:checked,[type=checkbox]:not(:checked)
+{
+    position:absolute;
+    left:-99999px;
+}
+
+.menu-icon:checked+label,.menu-icon:not(:checked)+label{
+    position:fixed;
+    top:170px;
+    left:75px;
+    display:block;
+    width:70px;
+    height:70px;
+    padding:0;
+    margin:0;
+    cursor:pointer;
+    z-index:10;
+}
+
+.menu-bulle {
+    position:fixed;
+    top:150px;
+    left:50px;
+    display:block;
+    width:80px;
+    height:80px;
+    padding:0;
+    margin:0;
+    z-index:9;
+    overflow:hidden;
+    background-color:#fff487;
+    animation:border-transform 7s linear infinite;
+    transition:top 350ms 1100ms cubic-bezier(.32, 1, .23, 1),right 350ms 1100ms cubic-bezier(.32, 1, .23, 1),
+	       transform 250ms 1100ms ease,width 650ms 400ms cubic-bezier(.32, 1, .23, 1),height 650ms 400ms cubic-bezier(.32, 1, .23, 1);
+}
+
+.menu-icon:checked+label:before,.menu-icon:not(:checked)+label:before {
+    position:absolute;
+    content:"";
+    display:block;
+    width:30px;
+    height:20px;
+    z-index:20;
+    top:0;
+    left:0;
+    border-top:2px solid #45050c;
+    border-bottom:2px solid #45050c;
+    transition:border-width 100ms 1500ms ease,top 100ms 1600ms cubic-bezier(.32, 1, .23, 1),height 100ms 1600ms cubic-bezier(.23, 1, .32, 1),
+	       background-color 200ms ease,transform 200ms cubic-bezier(.32, 1, .23, 1);
+}
+.menu-icon:checked+label:after,.menu-icon:not(:checked)+label:after {
+    position:absolute;
+    content:"";
+    display:block;
+    width:22px;
+    height:2px;
+    z-index:20;
+    top:10px;
+    left:0px;
+    background-color:#45050c;
+    margin-top:-1px;
+    transition:width 100ms 1750ms ease,right 100ms 1750ms ease,margin-top 100ms ease,transform 200ms cubic-bezier(.32, 1, .23, 1);
+}
+.menu-icon:checked+label:before{
+    top:10px;
+    transform:rotate(45deg);
+    height:2px;
+    background-color:#45050c;
+    border-width:0;
+    transition:border-width 100ms 340ms ease,top 100ms 300ms cubic-bezier(.32, 1, .23, 1),height 100ms 300ms cubic-bezier(.32, 1, .23, 1),background-color 200ms 500ms ease,transform 200ms 1700ms cubic-bezier(.32, 1, .23, 1);
+}
+
+.menu-icon:checked+label:after{
+    width:30px;
+    margin-top:0;
+    transform:rotate(-45deg);
+    transition:width 100ms ease,right 100ms ease,margin-top 100ms 500ms ease,transform 200ms 1700ms cubic-bezier(.32, 1, .23, 1);
+}
+@keyframes border-transform{0%, 100%
+			       {border-radius:63% 37% 54% 46%/55% 48% 52% 45%}14%
+			       {border-radius:40% 60% 54% 46%/49% 60% 40% 51%}28%
+			       {border-radius:54% 46% 38% 62%/49% 70% 30% 51%}42%
+			       {border-radius:61% 39% 55% 45%/61% 38% 62% 39%}56%
+			       {border-radius:61% 39% 67% 33%/70% 50% 50% 30%}70%
+			       {border-radius:50% 50% 34% 66%/56% 68% 32% 44%}84%
+			       {border-radius:46% 54% 50% 50%/35% 61% 39% 65%}
+			   }
+
+.menu-icon:checked~.menu-bulle{
+    animation-play-state:paused;
+    top:50%;
+    left:40px;
+    transform:translate(-50%, -50%);
+    width:35%;
+    height:88%;
+    transition:top 350ms 700ms cubic-bezier(.32, 1, .23, 1),left 350ms 700ms cubic-bezier(.32, 1, .23, 1),
+	       transform 250ms 700ms ease,width 750ms 1000ms cubic-bezier(.32, 1, .23, 1),
+	       height 750ms 1000ms cubic-bezier(.32, 1, .23, 1);
+}
+
+.menu-bulle ul{
+    position:absolute;
+    top:25%;
+    left:50px;
+    display:block;
+    width:100%;
+    padding:0;
+    margin:0;
+    z-index:6;
+    text-align:right;
+    list-style:none;
+}
+
+.menu-bulle ul li{
+    position:relative;
+    display:block;
+    width:100%;
+    padding:0;
+    padding-bottom:15px;
+    margin:10px 0;
+    text-align:center;
+    list-style:none;
+    pointer-events:none;
+    opacity:0;visibility:hidden;
+    transform:translateY(30px);
+    transition:all 250ms linear;
+}
+
+.menu-bulle ul li:nth-child(1)
+{
+    transition-delay:200ms;
+}
+
+.menu-bulle ul li:nth-child(2){
+    transition-delay:150ms;
+}
+
+.menu-bulle ul li:nth-child(3)
+{
+    transition-delay:100ms;
+}
+
+.menu-bulle ul li:nth-child(4)
+{
+    transition-delay:50ms;
+}
+
+.menu-bulle ul li a
+{
+    font-family:sans-serif;
+    font-size:2vh;
+    line-height:1.1;
+    font-weight:800;
+    display:inline-block;
+    position:relative;
+    color:#45050c;
+    transition:all 250ms linear;
+    max-width:9vw;
+}
+
+.menu-bulle ul li a:hover
+{
+    text-decoration:underline;
+    color:#45050c;
+}
+
+.menu-bulle ul li a:after
+{
+    display:block;
+    position:absolute;
+    top:50%;
+    content:"";
+    height:2vh;
+    margin-top:-1vh;
+    width:0;
+    left:0;
+    transition:width 250ms linear;
+}
+
+.menu-bulle ul li a:hover:after
+{
+    width:100%;
+}
+
+.menu-icon:checked~.menu-bulle ul li
+{
+    pointer-events:auto;
+    visibility:visible;
+    opacity:1;
+    transform:translateY(0);
+    transition:opacity 350ms ease,transform 250ms ease;
+}
+
+.menu-icon:checked~.menu-bulle ul li:nth-child(1)
+{
+    transition-delay:1400ms;
+}
+
+.menu-icon:checked~.menu-bulle ul li:nth-child(2)
+{
+    transition-delay:1480ms;
+}
+
+.menu-icon:checked~.menu-bulle ul li:nth-child(3)
+{
+    transition-delay:1560ms;
+}
+
+.menu-icon:checked~.menu-bulle ul li:nth-child(4)
+{
+    transition-delay:1640ms;
+}
+
+@media screen and (min-width: 3400px)
+{
+    .menu-icon:checked~.menu-bulle{
+	left:90px;
+    }
+}
+
+@media screen and (max-width: 991px)
+{
+    .menu-icon:checked~.menu-bulle
+    {
+	animation-play-state:paused;
+	top:50%;
+	left:50%;
+	transform:translate(-50%, -50%);
+	width:200%;
+	height:200%;
+	transition:top 350ms 700ms cubic-bezier(.32, 1, .23, 1),left 350ms 700ms cubic-bezier(.32, 1, .23, 1),
+		   transform 250ms 700ms ease,width 750ms 1000ms cubic-bezier(.32, 1, .23, 1),
+		   height 750ms 1000ms cubic-bezier(.32, 1, .23, 1);
+    }
+
+ .menu-bulle ul{
+     left:0;
+     transform:translateY(10%);
+     transform:translateX(-20%);
+ }
+
+
+ .menu-icon:checked+label,.menu-icon:not(:checked)+label
+ {
+     right:55px;
+ }
+
+ .logo
+ {
+     left:30px;
+ }
+
+ .menu-bulle
+ {
+     right:30px;
+ }
+
+ h1
+ {
+     font-size:9vw;
+     -webkit-text-stroke:2px rgba(0,0,0,0);
+     text-stroke:2px rgba(0,0,0,0);
+     -webkit-text-fill-color:#fff487;
+     text-fill-color:#fff487;
+     color:#fff487;
+ }
+
+ .menu-bulle ul li a{
+     font-size:2vh;
+     padding:5px;
+     max-width:unset;
+ }
+ 
+ .menu-icon:checked+label
+ {
+     top:10px;
+     left:10px;
+     width:50px;
+     height:50px;
+ }
+ .menu-icon:not(:checked)+label
+ {
+     top:110px;
+     left:50px;
+ }
+
+ .menu-bulle
+ {
+     top:90px;
+     left:30px;
+     display:block;
+     width:60px;
+     height:60px;
+ }

app/static/themes/chocolate/css/quill-editor.css

@@ -0,0 +1,13 @@
+.ql-align-center {
+	text-align: center;
+}
+
+.ql-align-left {
+	text-align: left;
+}
+
+.ql-align-right {
+	text-align: right;
+}
+
+

app/templates/themes/chocolate/_head.html

@@ -0,0 +1,15 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="description" content="{{ config.siteDescription }}">
+<meta name="author" content=" {{config.siteAuthor}} ">
+
+<title> {{ config.siteTitle }} </title>
+
+{% block css %} {% endblock %}
+<link href="/static/themes/chocolate/css/base.css" rel="stylesheet">
+<!-- Custom fonts for this template -->
+<link href="/static/themes/chocolate/css/menu.css" rel="stylesheet">
+<!-- Custom styles for this template -->
+<link href="/static/themes/chocolate/css/quill-editor.css" rel="stylesheet">
+
+

app/templates/themes/chocolate/_nav.html

@@ -0,0 +1,23 @@
+<input class="menu-icon" type="checkbox" id="menu-icon" name="menu-icon"/>
+<label for="menu-icon"></label>
+<nav class="menu-bulle">
+<ul class="pt-5">
+<!-- Menu -->
+{% for item in menu.keys() %}
+  {% if menu[item] is mapping %}
+  <li class="nav-item">
+    <h3> {{ item }} </h3>
+    <ul class="pt-5">
+    {% for subitem in menu[item].keys() %}
+      <li class="nav-item "><a class="nav-link" href="{{menu[item][subitem]}}">{{ subitem }}</a></li>
+    {% endfor %}
+    </ul>
+  </li>
+  {% else %}
+  <li class="nav-item">
+    <a class="nav-link" href="{{ menu[item] }}"> {{ item }} </a>
+  </li>	
+  {% endif %}
+{% endfor %}
+</ul>
+</nav>

app/templates/themes/chocolate/blocs/_simple_article.html

@@ -0,0 +1,12 @@
+<div class="{{ bloc.property }}" id="{{ bloc.name }}" style="{% include '_print_colors.css' %}">
+  <div class="title">
+	<h1 style="text-align:center;"> {{ bloc.title }} </h1>
+  </div>	     
+
+
+  <div class="articles"> 
+   <div class="content">
+         {{ bloc.text|safe }} 
+   </div>
+  </div>
+</div>

app/templates/themes/chocolate/blocs/edit/_simple_article.html

@@ -0,0 +1,23 @@
+<form method='POST' action='/edit/{{ bloc.name }}' >
+
+
+      {{ form.csrf_token }}
+
+
+      <div class="title">
+       	  {{ form.title(col=3,value=bloc.title,
+		class="form-control form-control-lg text-center") }}
+</div>
+<br/>
+<br/>
+<div class="articles">
+
+      {% include 'edit-tools/_form-base.html' %}
+  <div class="content">
+          {% include 'edit-tools/_editor-wysiwyg.html' %}
+  </div> 
+  {% include 'edit-tools/_btn-save-cancel.html' %}
+    </form>
+  </div>
+
+{% include 'edit-tools/_disable-modify-button.html' %} 

app/templates/themes/chocolate/ident-default.json

@@ -0,0 +1,30 @@
+{
+     "config": {
+          "theme": "chocolate",
+          "siteTitle": "Le titre de mon site",
+	  "passwd" : "",	
+          "lastLogins": {}
+     },
+     "menu": {
+          "Accueil ": "/",
+          "Contact": "#texte1"
+     },
+     "publish": {
+          "Address": "",
+          "Port": "",
+          "username": "",
+          "folder": ""
+     },
+     "blocs": {
+          "Texte1": {
+               "name": "Texte1",
+               "type": "simple_article",
+               "title": "Mon Petit à moi",
+               "property": "",
+               "bg_color": "#000000",
+               "fg_color": "#000000",
+               "text": "<p class=\"ql-align-center\">Composez\u00a0votre\u00a0texte\u00a0libre\u00a0ici\u00a0!</p>"
+          }
+     },
+     "publication_status": ""
+}

app/templates/themes/chocolate/pages/simple_article.json

@@ -0,0 +1,14 @@
+{
+   "blocs": {
+	   "Texte1": {
+               "name": "Texte1",
+               "type": "simple_article",
+               "title": "Mon Petit à moi",
+               "property": "",
+               "bg_color": "#000000",
+               "fg_color": "#000000",
+               "text": "<p class=\"ql-align-center\">Composez\u00a0votre\u00a0texte\u00a0libre\u00a0ici\u00a0!</p>"
+          }
+
+   }
+}

app/templates/themes/chocolate/theme.json

@@ -0,0 +1,4 @@
+{
+	"page_types": [ simple_page ],
+	"blocs_types": [ simple_article ]
+}