Fixed UI and conf template

config/site.yaml

@@ -1,36 +1,28 @@
-# Please change this by your settings.
 info:
-  title:
+  title: null
-  subtitle:
+  subtitle: null
-  description:
+  description: null
-  canonical:
+  canonical: null
-  keywords:
+  keywords: null
-  author:
+  author: null
-
 social:
-  instagram_url:
+  instagram_url: null
-  thumbnail:
+  thumbnail: ''
-  
 menu:
   items:
   - label: Home
     href: /
-
 footer:
   copyright: Copyright © 2025
-  legal_link: '/legals/'
+  legal_link: /legals/
   legal_label: Legal notice
-
-# Build parameters
 build:
-  theme: modern # choose a theme in config/theme folder
+  theme: modern
-  convert_images: true # true to enable image conversion
+  convert_images: true
-  resize_images: true # true to enable image resizing
+  resize_images: true
-
-# Change this by your legals
 legals:
-  hoster_name:
+  hoster_name: null
-  hoster_address:
+  hoster_address: null
-  hoster_contact:
+  hoster_contact: null
   intellectual_property:
-    - paragraph: ""
+  - paragraph: ''

config/themes/modern/theme.yaml

@@ -16,7 +16,7 @@ fonts:
     fallback: serif
     name: Montserrat
 google_fonts:
-- family: Lato
+- family: ''
   weights:
   - '200'
   - '400'

demo/config/themes/modern/theme.yaml

@@ -1,32 +1,28 @@
-#-----------------------------------#
-# Modern theme for Lumeex           #
-# https://git.djeex.fr/Djeex/lumeex #
-#-----------------------------------#
 colors:
-  primary: '#0065a1'
+  primary: '#0065A1'
   primary_dark: '#005384'
-  secondary: '#00b0f0'
+  secondary: '#00B0F0'
-  accent: '#ffc700'
+  accent: '#FFC700'
   text_dark: '#616161'
-  background: '#fff'
+  background: '#FFFFFF'
-  browser_color: '#fff'
+  browser_color: '#FFFFFF'
 favicon:
   path: favicon.png
-google_fonts:
-  - family: Lato
-    weights:
-    - '200'
-    - '400'
-    - '700'
-  - family: Montserrat
-    weights:
-    - '200'
-    - '400'
-    - '700'
 fonts:
   primary:
-    name: Lato
     fallback: sans-serif
+    name: Lato
   secondary:
+    fallback: serif
     name: Montserrat
-    fallback: serif
+google_fonts:
+- family: ''
+  weights:
+  - '200'
+  - '400'
+  - '700'
+- family: Montserrat
+  weights:
+  - '200'
+  - '400'
+  - '700'

demo/config/themes/typewriter/theme.yaml

@@ -1,21 +1,17 @@
-#-----------------------------------#
-# Typewriter theme for Lumeex       #
-# https://git.djeex.fr/Djeex/lumeex #
-#-----------------------------------#
 colors:
-  primary: '#0065a1'
+  accent: '#FFC700'
+  background: '#FFFFFF'
+  browser_color: '#FFFFFF'
+  primary: '#0065A1'
   primary_dark: '#005384'
-  secondary: '#00b0f0'
+  secondary: '#00B0F0'
-  accent: '#ffc700'
   text_dark: '#616161'
-  background: '#fff'
-  browser_color: '#fff'
 favicon:
   path: favicon.png
 fonts:
   primary:
-    name: Trixie
+    name: trixie.woff
     fallback: sans-serif
   secondary:
-    name: Trixie
+    name: trixie.woff
-    fallback: serif
+    fallback: serif

src/webui/site-info/index.html

@@ -46,8 +46,8 @@
 <form id="social-form" autocomplete="off">
   <fieldset id="social-section">
     <h2>Social</h2>
-    <p>Set your social media links and thumbnail for link sharing</p>
     <p class="section-status"></p>
+    <p>Set your social media links and thumbnail for link sharing</p>
     <div class="fields">
       <div class="input-field">
         <label>Instagram URL</label>
@@ -70,8 +70,8 @@
 <form id="menu-form" autocomplete="off">
   <fieldset id="menu-section">
     <h2>Menu</h2>
-    <p>Manage your site menu items. You can use tag combination to propose custom filters</p>
     <p class="section-status"></p>
+    <p>Manage your site menu items. You can use tag combination to propose custom filters</p>
     <div class="fields">
       <div class="input-field" style="flex: 1 1 100%;">
         <div id="menu-items-list"></div>
@@ -86,8 +86,8 @@
 <form id="footer-form" autocomplete="off">
   <fieldset id="footer-section">
     <h2>Footer</h2>
-    <p>Set your copyright informations and legal link name</p>
     <p class="section-status"></p>
+    <p>Set your copyright informations and legal link name</p>
     <div class="fields">
       <div class="input-field">
         <label>Copyright</label>
@@ -106,8 +106,8 @@
 <form id="legals-form" autocomplete="off">
   <fieldset id="legals-section">
     <h2>Legals</h2>
-    <p>Set your legal informations</p>
     <p class="section-status"></p>
+    <p>Set your legal informations</p>
     <div class="fields">
       <div class="input-field">
         <label>Hoster Name</label>
@@ -135,8 +135,8 @@
 <form id="build-form" autocomplete="off">
   <fieldset id="build-section">
     <h2>Build</h2>
-    <p>Select a theme from the dropdown menu or add your custom theme folder</p>
     <p class="section-status"></p>
+    <p>Select a theme from the dropdown menu or add your custom theme folder</p>
     <div class="fields">
       <div class="input-field">
         <label>Theme</label>

src/webui/style/style.css

@@ -678,10 +678,11 @@ form button[type="submit"] {
   border-radius: 30px;
   padding: 12px 32px;
   font-size: 1.1em;
-  margin: 0 0 45px 0;
+  margin: 16px 0 0 0;
   cursor: pointer;
   box-shadow: 0 4px 16px rgba(38,196,255,0.15);
   transition: background 0.2s;
+  display: block;
 }
 
 form button[type="submit"]:hover {
@@ -1020,13 +1021,13 @@ justify-content: center;
   #menu-items-list > div {
     flex-direction: column;
   }
-  
+
-  #stepper {
+  form button[type="button"], form button[type="submit"],   #stepper li {
-    flex-direction: column;
+    width: 100%;
   }
 
-  #stepper li {
+  #stepper {
-    width: 100%;
+    flex-direction: column;
   }
 
   .footer-container, .footer-links {