fix element popup toggle: remove/re-enable cycle + inherited CSS comments

Remove pre-toggle snapshot system that was re-adding CSS values after
removeProps, causing toggles to not properly disable styles and breaking
the off/on/off cycle. Reset refs to defaults on toggle-off so displayed
CSS shows inherited values. Fix hasInCss to exclude commented blocks.
Replace "valeur par défaut" with "hérité de la page" comments.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.gitignore

@@ -30,3 +30,5 @@ api/.env
 # Claude settings
 .claude
 /.claude/*
+
+doc-conception.md

public/assets/css/pagedjs-interface.css

@@ -161,7 +161,7 @@
 
 .element-selected {
   outline: 2px dashed #7136ff !important;
-  background-color: #7136ff1a !important;
+  /* background-color: #7136ff1a !important; */
 }
 
 .element-hover-label {

public/assets/css/src/_actions-btn.scss

@@ -0,0 +1,178 @@
+#actions-btn{
+
+position: fixed;
+bottom: 0.5rem;
+left: 0rem;
+padding: 2em;
+width: calc(var(--panel-w) - 4em);
+  z-index: 1000;
+  --color-bg: var(--color-panel-bg);
+  --color-text: var(--color-interface-800);
+
+  display: flex;
+  align-items: center;
+  // align-content: stretch;
+  gap: 1em;
+  // background-color: var(--color-panel-bg);
+
+  button{
+    color: var(--color-text);
+
+    // font-size: 1.2rem;
+    font-family: var(--sans-serif);
+    height: calc(var(--input-h)*1.25);
+    padding: 0 1ch;
+    border: 1px solid currentColor;
+    border-radius: 5px;
+    font-weight: 500;
+    background-color: var(--color-panel-bg);
+    // width: 14ch;
+
+    display: flex;
+    align-items: center;
+    // justify-content: center;
+    gap: 0.5ch;
+    margin-top: var(--space-xs);
+    cursor: pointer;
+
+
+    .icon{
+      position: relative;
+      top: 2px;
+    }
+    svg{
+      width: 20px;
+      height: 20px;
+      fill: var(--color-text);
+    }
+
+    &.has-changes {
+outline-offset: 2px;
+      outline: 3px solid rgb(247, 98, 98);
+   
+    }
+  }
+
+  .error-tooltip{
+    position: absolute;
+    top: 0em;
+    font-size: 10px;
+    max-width: 20ch;
+    color: rgb(247, 98, 98);
+  }
+
+}
+
+
+
+
+
+.last-saved{
+  position: absolute;
+  padding-top: 0.75em;
+   font-size: 10px;
+    max-width: 20ch;
+    color: var(--color-interface-400);
+
+
+}
+
+
+.save-button-wrapper {
+  // position: fixed;
+  // top: 2rem;
+  // right: 5rem;
+  // z-index: 1000;
+  // display: flex;
+  // flex-direction: column;
+  // align-items: flex-end;
+  // gap: 0.5rem;
+}
+
+// .save-btn {
+//   width: 3.5rem;
+//   height: 3.5rem;
+//   border-radius: 50%;
+//   border: none;
+//   background: var(--color-interface-300, #ccc);
+//   color: white;
+//   cursor: not-allowed;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+//   transition: all 0.2s ease;
+//   position: relative;
+// }
+
+// .save-btn.has-changes {
+//   background: var(--color-page-highlight, #ff8a50);
+//   cursor: pointer;
+// }
+
+// .save-btn.has-changes:hover {
+//   transform: scale(1.1);
+//   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+// }
+
+// .save-btn.is-saving {
+//   cursor: wait;
+// }
+
+// .save-btn.has-error {
+//   background: #e74c3c;
+// }
+
+// .save-btn.save-success {
+//   background: #2ecc71;
+// }
+
+// .save-icon,
+// .success-icon {
+//   width: 1.5rem;
+//   height: 1.5rem;
+// }
+
+.spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  border-top: 2px solid white;
+  border-right: 2px solid transparent;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+// .last-saved {
+//   font-size: 0.75rem;
+//   color: var(--color-interface-600, #666);
+//   background: white;
+//   padding: 0.25rem 0.5rem;
+//   border-radius: 0.25rem;
+//   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+//   white-space: nowrap;
+// }
+
+// .error-tooltip {
+//   position: absolute;
+//   top: calc(100% + 0.5rem);
+//   right: 0;
+//   background: #e74c3c;
+//   color: white;
+//   padding: 0.5rem 0.75rem;
+//   border-radius: 0.25rem;
+//   font-size: 0.875rem;
+//   white-space: nowrap;
+//   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+//   max-width: 15rem;
+//   word-wrap: break-word;
+//   white-space: normal;
+// }

public/assets/css/src/_buttons.scss

@@ -1,60 +0,0 @@
-
-.unit-toggle{
-  button:not(.spinner-btn) {
-    cursor: pointer;
-  
-    border: 1px solid var(--color-interface-400);
-    color: var(--color-interface-400);
-    background-color: var(--color-panel-bg);
-    border-radius: var(--border-radius);
-    padding: 0.1rem 0.3rem;
-    height: calc(var(--input-h)*0.75);
-  
-
-    &:not(.active):hover{
-      background-color: var(--color-interface-100);
-    }
-  
-    &.active {
-      // border: 1px solid var(--color-interface-700);
-      color: var(--color-interface-050);
-      background-color: var(--color-interface-500);
-      cursor: auto;
-    }
-
-
-  }
-}
-
-
-#editor-panel .tabs{
-  .tab{
-    color: var(--color-interface-600);
-    font-size: 1rem;
-    font-family: var(--sans-serif);
-    height: var(--input-h);
-    padding: 0 1ch;
-    border: 1px solid currentColor;
-    border-radius: calc(var(--input-h));
-    font-weight: 500;
-    background-color: var(--color-panel-bg);
-
-    &.active{
-      background-color: var(--color-interface-400);
-      border-color: var(--color-interface-400);
-      color: var(--color-panel-bg);
-    }
-
-    &:not(.active):hover{
-      cursor: pointer;
-      background-color: var(--color-interface-100);
-    }
-  }
-  // .tab {
-  //   &.active {
-  //     background-color: var(--color-txt);
-  //     color: #fff;
-  //     border: none;
-  //   }
-  // }
-}

public/assets/css/src/_colors.scss

@@ -91,7 +91,7 @@
 }
 
 
-[data-color-type="elem"]{
+[data-color-type="text"]{
   --color-050: #f4f0ff;
   --color-100: #e7e1ff;
   --color-200: #dacfff;

public/assets/css/src/_forms-section.scss

@@ -1,34 +0,0 @@
-.settings-section {
-  margin: var(--space-m) 0;
-
-  h2 {
-    margin-bottom: var(--space);
-
-    font-weight: 600;
-    font-size: 1.4rem;
-
-    border-bottom: 1px solid var(--color-200);
-    color: var(--color-800);
-  }
-
-  .infos {
-    font-size: 0.8rem;
-    color: var(--color-interface-400);
-  }
-}
-
-.settings-subsection:not(:last-child) {
-  border-bottom: 1px solid var(--color-interface-100);
-}
-
-.settings-subsection {
-  padding: var(--space-xs) 0;
-
-  h3 {
-    margin-top: calc(var(--space-xs) * 1.5);
-    margin-bottom: calc(var(--space-xs) * 2);
-    //   color: var(--color-600);
-    font-size: 1rem;
-    font-weight: 600;
-  }
-}

public/assets/css/src/_forms.scss

@@ -8,119 +8,71 @@ input[type="number"] {
   color: var(--color-txt);
   font-size: 1rem;
   padding-left: 0.5ch;
-  // min-width: var(--input-w);
-  // width: 100%;
-  // padding: 0 1ch;
+    padding-right: 0.5ch;
 }
 
-.field {
+input[type="number"]{
+   padding-left: 0.75ch;
+}
+
+select{
+  flex-grow: 1;
+  width: 100%;
+}
+
+.input-with-unit{
+
   display: flex;
+  align-items: center;
+  gap: 0.5ch;
 
-  label {
-    font-weight: 600;
-    color: var(--color-800);
+  input[type="range"]{
+    flex-grow: 1;
+    margin-right: 1ch;
   }
 
-  .input-with-unit {
-    display: flex;
-    gap: 0.3rem;
+  .number-input{
+    --input-w: 4ch;
+    flex-grow: 1;
+     max-width: calc(var(--input-w)*1.75);
+       display: flex;
+      align-items: center;
+
+     .number-input{
+        flex-grow: 1;
+         display: flex;
+         align-items: center;
+
+        
+     }
+     input[type="number"]{
+          width: var(--input-w);
+          padding-right: calc(var(--input-w)*0.5);
+
+        }
   }
 
-  .unit-toggle {
-    height: var(--input-h);
+  .unit-toggle{
     display: flex;
-    gap: 0.3rem;
     align-items: center;
+    gap: 0.25ch;
+    
   }
-
-  .input-with-color {
-    width: 100%;
-    .clr-field {
-      width: 100%;
-      display: grid;
-      grid-template-columns: var(--input-h) 1fr;
-      grid-gap: 1ch;
-      button {
-        grid-column: 1;
-        position: relative;
-        border-radius: var(--border-radius);
-        cursor: pointer;
-        pointer-events: auto;
-      }
-      input {
-        grid-column: 2;
-      }
-    }
-  }
+  
 }
 
-.field {
-  display: grid;
-  grid-template-columns: var(--label-w) 1fr;
-  label {
-    align-self: center;
+.field-checkbox{
+  display: flex;
+  align-items: center;
+  gap: 0.5ch;
+  input[type="checkbox"]{
+    accent-color: var(--color-interface-800);
   }
+
 }
 
-.field-font {
-  display: grid;
-  grid-template-columns: var(--label-w) 1fr;
-  grid-template-rows: var(--input-h) var(--input-h);
 
-  select {
-    width: 100%;
-  }
-  .field-checkbox {
-    grid-column: 2;
-    padding-top: var(--space-xs);
-    label {
-      font-weight: 400;
-      margin-left: 0.75ch;
-      color: var(--color-txt);
-    }
-  }
-}
-
-.field-text-size {
-  input[type="number"] {
-    width: var(--input-w-small);
-    padding-left: 0.75ch;
-  }
-  input[type="range"] {
-    flex-grow: 2;
-    flex-shrink: 2;
-  }
-}
-
-.field-margin,
-.field-size {
-  display: inline-grid;
-  width: calc(50% - 1ch);
-  grid-template-columns: 6.5ch var(--input-w-small) 1fr;
-  margin-bottom: var(--space-xs);
-  input {
-    width: var(--input-w-small);
-    padding-left: 0.75ch;
-  }
-  &:nth-of-type(odd) {
-    margin-right: 2ch;
-  }
-}
-
-.checkbox-field {
-  margin: calc(var(--space-xs) * 2) 0;
-  grid-template-columns: 3ch 1fr;
-  input {
-    justify-self: left;
-    margin: 0;
-  }
-}
-
-.field--view-only {
-  opacity: 0.3;
-}
-
-/* Label with CSS tooltip */
+/* Label with tooltip ---------------------------------------------- */
 .label-with-tooltip {
   text-decoration: underline dotted 1px var(--color-200);
   text-underline-offset: 2px;
@@ -154,9 +106,82 @@ input[type="number"] {
   }
 }
 
-// INPUT NUMBER ===============================================
 
-// Masquer les spinners natifs partout
+// INPUT COLOR ------------------------------------------------
+
+.input-with-color {
+    width: 100%;
+    .clr-field {
+      width: 100%;
+      display: grid;
+      grid-template-columns: var(--input-h) minmax(0, 1fr);
+      grid-gap: 1ch;
+      button {
+        grid-column: 1;
+        position: relative;
+        border-radius: var(--border-radius);
+        cursor: pointer;
+        pointer-events: auto;
+      }
+      input {
+        grid-column: 2;
+      }
+    }
+  }
+
+
+// INPUT RANGE ---------------------------------------------
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+
+  &::-webkit-slider-runnable-track {
+    height: 6px;
+    background: linear-gradient(to right, var(--color-interface-400) var(--progress, 0%), var(--color-interface-200) var(--progress, 0%));
+    border: none;
+    border-radius: 2px;
+  }
+  &::-moz-range-track {
+    height: 6px;
+    background: linear-gradient(to right, var(--color-interface-400) var(--progress, 0%), var(--color-interface-200) var(--progress, 0%));
+    border: none;
+    border-radius: 2px;
+  }
+
+
+  &::-moz-range-progress {
+    height: 6px;
+    background: var(--color-interface-400);
+    border: none;
+    border-radius: 2px;
+  }
+
+  // Thumb
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background: var(--color-interface-900);
+    border: none;
+    border-radius: 3px;
+    margin-top: -5px;
+  }
+  &::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    background: var(--color-interface-900);
+    border: none;
+    border-radius: 3px;
+  }
+}
+
+// INPUT NUMBER ---------------------------------------------
+
+// disable natif
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
@@ -170,7 +195,6 @@ input[type="number"] {
 
 .number-input {
   position: relative;
-  // padding: 0 1ch!important;
   input {
     padding-top: 0;
     padding-bottom: 0;
@@ -209,66 +233,3 @@ input[type="number"] {
     }
   }
 }
-// Composant NumberInput avec boutons personnalisés
-// .number-input {
-//   position: relative;
-//   display: flex;
-//   align-items: center;
-//   width: 100%;
-//   position: relative;
-
-//   input[type="number"] {
-//     width: 100%;
-//     box-sizing: border-box;
-//   }
-
-//   .spinner-buttons {
-//     background-color: red;
-//     position: absolute;
-//     right: 1px;
-//     top: 1px;
-//     bottom: 1px;
-//     display: flex;
-//     flex-direction: column;
-//     justify-content: center;
-//     gap: 1px;
-//     z-index: 10;
-
-//     .spinner-btn {
-//       display: flex;
-//       align-items: center;
-//       justify-content: center;
-//       width: 20px;
-//       height: 10px;
-//       padding: 0;
-//       margin: 0;
-//       background-color: var(--color-interface-200);
-//       border: 1px solid var(--color-interface-300);
-//       border-radius: 2px;
-//       cursor: pointer;
-//       transition: background-color 0.15s ease;
-//       color: var(--color-interface-700);
-//       line-height: 0;
-
-//       svg {
-//         width: 8px;
-//         height: 6px;
-//         display: block;
-//       }
-
-//       &:hover:not(:disabled) {
-//         background-color: var(--color-interface-300);
-//         color: var(--color-interface-900);
-//       }
-
-//       &:active:not(:disabled) {
-//         background-color: var(--color-interface-400);
-//       }
-
-//       &:disabled {
-//         opacity: 0.3;
-//         cursor: not-allowed;
-//       }
-//     }
-//   }
-// }

public/assets/css/src/_panel-settings.scss

@@ -0,0 +1,75 @@
+.panel-settings__container {
+    // margin-top: var(--space-m);
+    margin-bottom: var(--space-s);
+
+    border: 1px solid var(--color-300);
+    border-radius: var(--border-radius);
+    padding: var(--space-s);
+
+    .settings__header {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        margin-bottom: var(--space-s);
+
+
+        .icon {
+            position: relative;
+            top: 2px;
+
+            svg {
+                width: 20px;
+                height: 20px;
+                fill: var(--color-600);
+            }
+        }
+
+        .title {
+            font-size: 1.2rem;
+            color: var(--color-600);
+        }
+
+    }
+
+
+    .setting__section {
+        .setting__header {
+            color: var(--color-600);
+        }
+    }
+
+    .setting__section[data-setting="format"] {
+        border-bottom: none;
+        padding-bottom: var(--space-xs);
+
+    }
+
+    .setting__section[data-setting="dimensions"] {
+        border-top: none;
+        padding-top: 0;
+
+        .setting__header {
+            display: none;
+        }
+
+        .setting__body {
+            grid-column: 2;
+            width: 0;
+            display: flex;
+            gap: var(--space-s);
+
+            .field-size-page {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: var(--space-xs);
+
+            }
+        }
+
+        .field-size-page:first-of-type .unit-toggle {
+            display: none;
+        }
+
+    }
+}

public/assets/css/src/_panel-tabs.scss

@@ -0,0 +1,26 @@
+
+
+#editor-panel .tabs{
+  .tab{
+    color: var(--color-interface-600);
+    font-size: 1rem;
+    font-family: var(--sans-serif);
+    height: var(--input-h);
+    padding: 0 1ch;
+    border: 1px solid currentColor;
+    border-radius: calc(var(--input-h));
+    font-weight: 500;
+    background-color: var(--color-panel-bg);
+
+    &.active{
+      background-color: var(--color-interface-400);
+      border-color: var(--color-interface-400);
+      color: var(--color-panel-bg);
+    }
+
+    &:not(.active):hover{
+      cursor: pointer;
+      background-color: var(--color-interface-100);
+    }
+  }
+}

public/assets/css/src/_setting__section.scss

@@ -0,0 +1,133 @@
+.setting__section{
+    display: grid;
+    grid-template-columns: 17ch 1fr;
+      padding: var(--space-s) 0;
+
+      &:not(:last-child) {
+  border-bottom: 1px solid var(--color-interface-100);
+}
+
+    .setting__header{
+        height: var(--input-h);
+        display: flex;
+        align-items: center;
+        gap: 1ch;
+        align-self: start;
+
+        
+        .label-with-tooltip{
+            font-weight: bold;
+        }
+    }
+
+    .info-default{
+        font-size: 0.7rem;
+        color: var(--color-interface-500);
+        margin: 0;
+        grid-column: 2;
+        padding-top: 4px;
+
+    }
+
+
+.unit-toggle{
+  button:not(.spinner-btn) {
+    cursor: pointer;
+  
+    border: 1px solid var(--color-interface-400);
+    color: var(--color-interface-400);
+    background-color: var(--color-panel-bg);
+    border-radius: var(--border-radius);
+    padding: 0.1rem 0.3rem;
+    height: calc(var(--input-h)*0.75);
+  
+
+    &:not(.active):hover{
+      background-color: var(--color-interface-100);
+    }
+  
+    &.active {
+      // border: 1px solid var(--color-interface-700);
+      color: var(--color-interface-050);
+      background-color: var(--color-interface-500);
+      cursor: auto;
+    }
+
+
+  }
+}
+
+
+
+}
+
+.setting-disabled .setting__body {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+
+.setting__section[data-setting="font"] {
+    .setting__body{
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    column-gap: 1ch;
+    margin-bottom: var(--space-xs);
+
+    select{
+        grid-column: span 2;
+        margin-bottom: var(--space-xs);
+    }
+
+}
+
+}
+
+.setting__section[data-setting="textDecoration"],
+.setting__section[data-setting="border"] {
+    .setting__body{
+        padding-top: 4px;
+    }
+    .field__option{
+        display: grid;
+        width: 100%;
+        grid-template-columns: 9ch minmax(0, 1fr);  
+        margin-bottom: var(--space-xs);
+    }
+}
+
+
+.setting__section[data-setting="margin"],
+.setting__section[data-setting="padding"]{
+    display: block;
+
+    .setting__header{
+        margin-bottom: var(--space-s);
+        .label-with-tooltip{
+            flex-grow: 1;
+        }
+
+        .lock-toggle svg{
+                color: var(--color-interface-400);
+        }
+        .lock-toggle.locked svg{
+                color: var(--color-interface-800);
+        }
+    }
+
+    .setting__body{
+          display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    grid-row-gap: var(--space-xs);
+    grid-column-gap: var(--space-m);
+    }
+
+    .field-margin{
+        display: flex;
+        align-items: center;
+        .label-with-tooltip{
+            flex-grow: 1;
+            align-items: center;
+        }
+    }
+}

public/assets/css/src/_settings-popup.scss

@@ -1,4 +1,3 @@
-// Common styles for ElementPopup and PagePopup components
 
 .settings-popup {
   position: fixed;
@@ -50,11 +49,11 @@
   background-color: var(--color-panel-bg);
 }
 
-.settings-subsection h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
+// .setting__section h4 {
+//   margin: 0 0 0.5rem 0;
+//   font-size: 0.875rem;
+//   font-weight: 600;
+// }
 
 // Label with CSS tooltip
 // .label-with-tooltip {
@@ -91,27 +90,27 @@
 // }
 
 // Inheritance lock/unlock button
-.inheritance-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: #666;
-  transition: color 0.2s;
+// .inheritance-btn {
+//   display: flex;
+//   align-items: center;
+//   gap: 0.5rem;
+//   padding: 0;
+//   background: transparent;
+//   border: none;
+//   cursor: pointer;
+//   font-size: 0.875rem;
+//   color: #666;
+//   transition: color 0.2s;
 
-  &:hover {
-    color: #333;
-  }
+//   &:hover {
+//     color: #333;
+//   }
 
-  svg {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-}
+//   svg {
+//     width: 1.25rem;
+//     height: 1.25rem;
+//   }
+// }
 
 // CSS Editor panel
 .popup-css {

public/assets/css/src/_toggle-setting.scss

@@ -0,0 +1,38 @@
+.toggle-setting {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  
+}
+
+.toggle-setting + label {
+  position: relative;
+  display: inline-block;
+  width: 24px;
+  height: 14px;
+  background: #ccc;
+  border-radius: 18px;
+  transition: background 0.2s ease;
+  cursor: pointer;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 10px;
+    height: 10px;
+    background: white;
+    border-radius: 50%;
+    transition: transform 0.2s ease;
+  }
+}
+
+.toggle-setting:checked + label{
+  background: var(--color-purple);
+
+  &::after {
+    transform: translateX(10px);
+  }
+}

public/assets/css/src/_variables.scss

@@ -5,10 +5,6 @@
   --color-browngray-050: #f5f3f0;
   --color-browngray-200: #d0c4ba;
 
-
-
-
-
   --color-txt: var(--color-interface-900);
   --color-panel-bg: var(--color-interface-050);
   
@@ -35,6 +31,6 @@
   --label-w: 18ch;
   font-size: 14px;
 
-  --panel-w: 540px;
+  --panel-w: 560px;
   --panel-nav-h: 60px;
 }

public/assets/css/style.css

@@ -176,7 +176,7 @@
   --color-900: #d96a30;
 }
 
-[data-color-type=elem] {
+[data-color-type=text] {
   --color-050: #f4f0ff;
   --color-100: #e7e1ff;
   --color-200: #dacfff;
@@ -241,7 +241,7 @@ img {
   --input-w-small: 45px;
   --label-w: 18ch;
   font-size: 14px;
-  --panel-w: 540px;
+  --panel-w: 560px;
   --panel-nav-h: 60px;
 }
 
@@ -269,6 +269,61 @@ h2 {
   string-set: title content(text);
 }
 
+.panel-settings__container {
+  margin-bottom: var(--space-s);
+  border: 1px solid var(--color-300);
+  border-radius: var(--border-radius);
+  padding: var(--space-s);
+}
+.panel-settings__container .settings__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-s);
+}
+.panel-settings__container .settings__header .icon {
+  position: relative;
+  top: 2px;
+}
+.panel-settings__container .settings__header .icon svg {
+  width: 20px;
+  height: 20px;
+  fill: var(--color-600);
+}
+.panel-settings__container .settings__header .title {
+  font-size: 1.2rem;
+  color: var(--color-600);
+}
+.panel-settings__container .setting__section .setting__header {
+  color: var(--color-600);
+}
+.panel-settings__container .setting__section[data-setting=format] {
+  border-bottom: none;
+  padding-bottom: var(--space-xs);
+}
+.panel-settings__container .setting__section[data-setting=dimensions] {
+  border-top: none;
+  padding-top: 0;
+}
+.panel-settings__container .setting__section[data-setting=dimensions] .setting__header {
+  display: none;
+}
+.panel-settings__container .setting__section[data-setting=dimensions] .setting__body {
+  grid-column: 2;
+  width: 0;
+  display: flex;
+  gap: var(--space-s);
+}
+.panel-settings__container .setting__section[data-setting=dimensions] .setting__body .field-size-page {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-xs);
+}
+.panel-settings__container .setting__section[data-setting=dimensions] .field-size-page:first-of-type .unit-toggle {
+  display: none;
+}
+
 select,
 input[type=text],
 input[type=number] {
@@ -279,111 +334,59 @@ input[type=number] {
   color: var(--color-txt);
   font-size: 1rem;
   padding-left: 0.5ch;
+  padding-right: 0.5ch;
 }
 
-.field {
-  display: flex;
+input[type=number] {
+  padding-left: 0.75ch;
 }
-.field label {
-  font-weight: 600;
-  color: var(--color-800);
+
+select {
+  flex-grow: 1;
+  width: 100%;
 }
-.field .input-with-unit {
+
+.input-with-unit {
   display: flex;
-  gap: 0.3rem;
+  align-items: center;
+  gap: 0.5ch;
 }
-.field .unit-toggle {
-  height: var(--input-h);
+.input-with-unit input[type=range] {
+  flex-grow: 1;
+  margin-right: 1ch;
+}
+.input-with-unit .number-input {
+  --input-w: 4ch;
+  flex-grow: 1;
+  max-width: calc(var(--input-w) * 1.75);
   display: flex;
-  gap: 0.3rem;
   align-items: center;
 }
-.field .input-with-color {
-  width: 100%;
+.input-with-unit .number-input .number-input {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
 }
-.field .input-with-color .clr-field {
-  width: 100%;
-  display: grid;
-  grid-template-columns: var(--input-h) 1fr;
-  grid-gap: 1ch;
+.input-with-unit .number-input input[type=number] {
+  width: var(--input-w);
+  padding-right: calc(var(--input-w) * 0.5);
 }
-.field .input-with-color .clr-field button {
-  grid-column: 1;
-  position: relative;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  pointer-events: auto;
-}
-.field .input-with-color .clr-field input {
-  grid-column: 2;
+.input-with-unit .unit-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.25ch;
 }
 
-.field {
-  display: grid;
-  grid-template-columns: var(--label-w) 1fr;
+.field-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.5ch;
 }
-.field label {
-  align-self: center;
+.field-checkbox input[type=checkbox] {
+  accent-color: var(--color-interface-800);
 }
 
-.field-font {
-  display: grid;
-  grid-template-columns: var(--label-w) 1fr;
-  grid-template-rows: var(--input-h) var(--input-h);
-}
-.field-font select {
-  width: 100%;
-}
-.field-font .field-checkbox {
-  grid-column: 2;
-  padding-top: var(--space-xs);
-}
-.field-font .field-checkbox label {
-  font-weight: 400;
-  margin-left: 0.75ch;
-  color: var(--color-txt);
-}
-
-.field-text-size input[type=number] {
-  width: var(--input-w-small);
-  padding-left: 0.75ch;
-}
-.field-text-size input[type=range] {
-  flex-grow: 2;
-  flex-shrink: 2;
-}
-
-.field-margin,
-.field-size {
-  display: inline-grid;
-  width: calc(50% - 1ch);
-  grid-template-columns: 6.5ch var(--input-w-small) 1fr;
-  margin-bottom: var(--space-xs);
-}
-.field-margin input,
-.field-size input {
-  width: var(--input-w-small);
-  padding-left: 0.75ch;
-}
-.field-margin:nth-of-type(odd),
-.field-size:nth-of-type(odd) {
-  margin-right: 2ch;
-}
-
-.checkbox-field {
-  margin: calc(var(--space-xs) * 2) 0;
-  grid-template-columns: 3ch 1fr;
-}
-.checkbox-field input {
-  justify-self: left;
-  margin: 0;
-}
-
-.field--view-only {
-  opacity: 0.3;
-}
-
-/* Label with CSS tooltip */
+/* Label with tooltip ---------------------------------------------- */
 .label-with-tooltip {
   -webkit-text-decoration: underline dotted 1px var(--color-200);
           text-decoration: underline dotted 1px var(--color-200);
@@ -414,6 +417,69 @@ input[type=number] {
   visibility: visible;
 }
 
+.input-with-color {
+  width: 100%;
+}
+.input-with-color .clr-field {
+  width: 100%;
+  display: grid;
+  grid-template-columns: var(--input-h) minmax(0, 1fr);
+  grid-gap: 1ch;
+}
+.input-with-color .clr-field button {
+  grid-column: 1;
+  position: relative;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  pointer-events: auto;
+}
+.input-with-color .clr-field input {
+  grid-column: 2;
+}
+
+input[type=range] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+  background: transparent;
+  cursor: pointer;
+}
+input[type=range]::-webkit-slider-runnable-track {
+  height: 6px;
+  background: linear-gradient(to right, var(--color-interface-400) var(--progress, 0%), var(--color-interface-200) var(--progress, 0%));
+  border: none;
+  border-radius: 2px;
+}
+input[type=range]::-moz-range-track {
+  height: 6px;
+  background: linear-gradient(to right, var(--color-interface-400) var(--progress, 0%), var(--color-interface-200) var(--progress, 0%));
+  border: none;
+  border-radius: 2px;
+}
+input[type=range]::-moz-range-progress {
+  height: 6px;
+  background: var(--color-interface-400);
+  border: none;
+  border-radius: 2px;
+}
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: var(--color-interface-900);
+  border: none;
+  border-radius: 3px;
+  margin-top: -5px;
+}
+input[type=range]::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  background: var(--color-interface-900);
+  border: none;
+  border-radius: 3px;
+}
+
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
@@ -456,53 +522,6 @@ input[type=number] {
 .number-input .spinner-buttons button:hover svg path {
   fill: var(--color-interface-900);
 }
-.settings-section {
-  margin: var(--space-m) 0;
-}
-.settings-section h2 {
-  margin-bottom: var(--space);
-  font-weight: 600;
-  font-size: 1.4rem;
-  border-bottom: 1px solid var(--color-200);
-  color: var(--color-800);
-}
-.settings-section .infos {
-  font-size: 0.8rem;
-  color: var(--color-interface-400);
-}
-
-.settings-subsection:not(:last-child) {
-  border-bottom: 1px solid var(--color-interface-100);
-}
-
-.settings-subsection {
-  padding: var(--space-xs) 0;
-}
-.settings-subsection h3 {
-  margin-top: calc(var(--space-xs) * 1.5);
-  margin-bottom: calc(var(--space-xs) * 2);
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.unit-toggle button:not(.spinner-btn) {
-  cursor: pointer;
-  border: 1px solid var(--color-interface-400);
-  color: var(--color-interface-400);
-  background-color: var(--color-panel-bg);
-  border-radius: var(--border-radius);
-  padding: 0.1rem 0.3rem;
-  height: calc(var(--input-h) * 0.75);
-}
-.unit-toggle button:not(.spinner-btn):not(.active):hover {
-  background-color: var(--color-interface-100);
-}
-.unit-toggle button:not(.spinner-btn).active {
-  color: var(--color-interface-050);
-  background-color: var(--color-interface-500);
-  cursor: auto;
-}
-
 #editor-panel .tabs .tab {
   color: var(--color-interface-600);
   font-size: 1rem;
@@ -524,6 +543,116 @@ input[type=number] {
   background-color: var(--color-interface-100);
 }
 
+#actions-btn {
+  position: fixed;
+  bottom: 0.5rem;
+  left: 0rem;
+  padding: 2em;
+  width: calc(var(--panel-w) - 4em);
+  z-index: 1000;
+  --color-bg: var(--color-panel-bg);
+  --color-text: var(--color-interface-800);
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+#actions-btn button {
+  color: var(--color-text);
+  font-family: var(--sans-serif);
+  height: calc(var(--input-h) * 1.25);
+  padding: 0 1ch;
+  border: 1px solid currentColor;
+  border-radius: 5px;
+  font-weight: 500;
+  background-color: var(--color-panel-bg);
+  display: flex;
+  align-items: center;
+  gap: 0.5ch;
+  margin-top: var(--space-xs);
+  cursor: pointer;
+}
+#actions-btn button .icon {
+  position: relative;
+  top: 2px;
+}
+#actions-btn button svg {
+  width: 20px;
+  height: 20px;
+  fill: var(--color-text);
+}
+#actions-btn button.has-changes {
+  outline-offset: 2px;
+  outline: 3px solid rgb(247, 98, 98);
+}
+#actions-btn .error-tooltip {
+  position: absolute;
+  top: 0em;
+  font-size: 10px;
+  max-width: 20ch;
+  color: rgb(247, 98, 98);
+}
+
+.last-saved {
+  position: absolute;
+  padding-top: 0.75em;
+  font-size: 10px;
+  max-width: 20ch;
+  color: var(--color-interface-400);
+}
+
+.spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  border-top: 2px solid white;
+  border-right: 2px solid transparent;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.toggle-setting {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-setting + label {
+  position: relative;
+  display: inline-block;
+  width: 24px;
+  height: 14px;
+  background: #ccc;
+  border-radius: 18px;
+  transition: background 0.2s ease;
+  cursor: pointer;
+}
+.toggle-setting + label::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 10px;
+  height: 10px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.toggle-setting:checked + label {
+  background: var(--color-purple);
+}
+.toggle-setting:checked + label::after {
+  transform: translateX(10px);
+}
+
 .settings-popup {
   position: fixed;
   background: white;
@@ -574,32 +703,6 @@ input[type=number] {
   background-color: var(--color-panel-bg);
 }
 
-.settings-subsection h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.inheritance-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: #666;
-  transition: color 0.2s;
-}
-.inheritance-btn:hover {
-  color: #333;
-}
-.inheritance-btn svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .popup-css {
   flex: 1;
   background: #f5f5f5;
@@ -690,6 +793,116 @@ input[type=number] {
   outline: none;
 }
 
+.setting__section {
+  display: grid;
+  grid-template-columns: 17ch 1fr;
+  padding: var(--space-s) 0;
+}
+.setting__section:not(:last-child) {
+  border-bottom: 1px solid var(--color-interface-100);
+}
+.setting__section .setting__header {
+  height: var(--input-h);
+  display: flex;
+  align-items: center;
+  gap: 1ch;
+  align-self: start;
+}
+.setting__section .setting__header .label-with-tooltip {
+  font-weight: bold;
+}
+.setting__section .info-default {
+  font-size: 0.7rem;
+  color: var(--color-interface-500);
+  margin: 0;
+  grid-column: 2;
+  padding-top: 4px;
+}
+.setting__section .unit-toggle button:not(.spinner-btn) {
+  cursor: pointer;
+  border: 1px solid var(--color-interface-400);
+  color: var(--color-interface-400);
+  background-color: var(--color-panel-bg);
+  border-radius: var(--border-radius);
+  padding: 0.1rem 0.3rem;
+  height: calc(var(--input-h) * 0.75);
+}
+.setting__section .unit-toggle button:not(.spinner-btn):not(.active):hover {
+  background-color: var(--color-interface-100);
+}
+.setting__section .unit-toggle button:not(.spinner-btn).active {
+  color: var(--color-interface-050);
+  background-color: var(--color-interface-500);
+  cursor: auto;
+}
+
+.setting-disabled .setting__body {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.setting__section[data-setting=font] .setting__body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  -moz-column-gap: 1ch;
+       column-gap: 1ch;
+  margin-bottom: var(--space-xs);
+}
+.setting__section[data-setting=font] .setting__body select {
+  grid-column: span 2;
+  margin-bottom: var(--space-xs);
+}
+
+.setting__section[data-setting=textDecoration] .setting__body,
+.setting__section[data-setting=border] .setting__body {
+  padding-top: 4px;
+}
+.setting__section[data-setting=textDecoration] .field__option,
+.setting__section[data-setting=border] .field__option {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 9ch minmax(0, 1fr);
+  margin-bottom: var(--space-xs);
+}
+
+.setting__section[data-setting=margin],
+.setting__section[data-setting=padding] {
+  display: block;
+}
+.setting__section[data-setting=margin] .setting__header,
+.setting__section[data-setting=padding] .setting__header {
+  margin-bottom: var(--space-s);
+}
+.setting__section[data-setting=margin] .setting__header .label-with-tooltip,
+.setting__section[data-setting=padding] .setting__header .label-with-tooltip {
+  flex-grow: 1;
+}
+.setting__section[data-setting=margin] .setting__header .lock-toggle svg,
+.setting__section[data-setting=padding] .setting__header .lock-toggle svg {
+  color: var(--color-interface-400);
+}
+.setting__section[data-setting=margin] .setting__header .lock-toggle.locked svg,
+.setting__section[data-setting=padding] .setting__header .lock-toggle.locked svg {
+  color: var(--color-interface-800);
+}
+.setting__section[data-setting=margin] .setting__body,
+.setting__section[data-setting=padding] .setting__body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-row-gap: var(--space-xs);
+  grid-column-gap: var(--space-m);
+}
+.setting__section[data-setting=margin] .field-margin,
+.setting__section[data-setting=padding] .field-margin {
+  display: flex;
+  align-items: center;
+}
+.setting__section[data-setting=margin] .field-margin .label-with-tooltip,
+.setting__section[data-setting=padding] .field-margin .label-with-tooltip {
+  flex-grow: 1;
+  align-items: center;
+}
+
 button[disabled] {
   cursor: not-allowed !important;
   opacity: 0.6;

public/assets/css/style.scss

@@ -4,8 +4,11 @@
 @use "src/_variables.scss" as *;
 @use "src/_text.scss" as *;
 @use "src/_print-styles.scss" as *;
+@use "src/_panel-settings.scss" as *;
 @use "src/_forms.scss" as *;
-@use "src/_forms-section.scss" as *;
-@use "src/_buttons.scss" as *;
+@use "src/_panel-tabs.scss" as *;
+@use "src/_actions-btn.scss" as *;
+@use "src/_toggle-setting.scss" as *;
 @use "src/_settings-popup.scss" as *;
+@use "src/_setting__section.scss" as *;
 @use "src/_global.scss" as *;

public/assets/css/stylesheet.print.css

@@ -1,8 +1,4 @@
-@page {
-  size: A5;
-  margin: 20mm 15mm 26mm 15mm;
-  background: rgba(255, 255, 255, 1);
-}
+
 
 @page {
   @bottom-center {
@@ -10,9 +6,6 @@
   }
 }
 
-body {
-  font-family: "DM Sans", sans-serif;
-}
 
 
 
@@ -21,10 +14,7 @@ figure, img{
   margin: 0;
 }
 
-p{
-  font-size: 14px;
-  line-height: 18px;
-}
+
 
 
 /* ───────────────────────────────────────────
@@ -40,31 +30,6 @@ p{
   z-index: -1;
 }
 
-
-h1{
-  font-size: 38px;
-  background: rgba(255, 255, 255, 0.521);
-  padding: 10px 20px;
-  margin: 0;
-  margin-top: 60px;
-}
-
-p.author{
-    font-size: 24px;
-    font-weight: bold;
-      background: rgba(255, 255, 255, 0.521);
-  padding: 10px 20px;
-  margin: 0;
-    margin-top: 20px;
-}
-
-.introduction{
-      font-size: 26px;
-        background: rgba(255, 255, 255, 0.521);
-  padding: 10px 20px;
-  margin: 0;
-    margin-top: 60px;
-}
 .figure-backgroung-cover img{
   width: 100%;
   height: 100%;
@@ -72,6 +37,16 @@ p.author{
 }
 
 
+/* 
+.introduction{
+      font-size: 26px;
+        background: rgba(255, 255, 255, 0.521);
+  padding: 10px 20px;
+  margin: 0;
+    margin-top: 60px;
+} 
+ */
+
 
 
 /* ───────────────────────────────────────────
@@ -84,15 +59,9 @@ p.author{
 
 
 h2{
-  font-size: 38px;
-  margin-top: 36px;
-  background-color: #cfcfcf;
-  padding: 20px;
   break-after: avoid;
 }
-
-
-
+ 
 
 /* ───────────────────────────────────────────
    CHAPITRES
@@ -100,8 +69,7 @@ h2{
 
 
 h3{
-  margin-top: 30px;
-  break-after: avoid;
+   break-after: avoid;
 }
 
 
@@ -111,9 +79,6 @@ h3{
 
 h4{
   break-after: avoid;
-    margin-top: 30px;
-    text-decoration: underline;
-
 }
 
 
@@ -121,13 +86,22 @@ h4{
    MARKERS
 ─────────────────────────────────────────── */
 
-
-h5{
+ 
+.marker-title{
   display: flex;
   align-items: center;
+  
 }
 .marker-title img{
-  width: 40px;
+  width: 30px;
+} 
+
+
+h5{
+  font-weight: bold;
+  font-size: 16px;
+  margin-top: 20px;
+  margin-bottom: 10px;
 }
 
 

public/assets/fonts/project/Alegreya/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2011 The Alegreya Project Authors (https://github.com/huertatipografica/Alegreya)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/assets/fonts/project/Alegreya/README.txt

@@ -0,0 +1,75 @@
+Alegreya Variable Font
+======================
+
+This download contains Alegreya as both variable fonts and static fonts.
+
+Alegreya is a variable font with this axis:
+  wght
+
+This means all the styles are contained in these files:
+  Alegreya/Alegreya-VariableFont_wght.ttf
+  Alegreya/Alegreya-Italic-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Alegreya:
+  Alegreya/static/Alegreya-Regular.ttf
+  Alegreya/static/Alegreya-Medium.ttf
+  Alegreya/static/Alegreya-SemiBold.ttf
+  Alegreya/static/Alegreya-Bold.ttf
+  Alegreya/static/Alegreya-ExtraBold.ttf
+  Alegreya/static/Alegreya-Black.ttf
+  Alegreya/static/Alegreya-Italic.ttf
+  Alegreya/static/Alegreya-MediumItalic.ttf
+  Alegreya/static/Alegreya-SemiBoldItalic.ttf
+  Alegreya/static/Alegreya-BoldItalic.ttf
+  Alegreya/static/Alegreya-ExtraBoldItalic.ttf
+  Alegreya/static/Alegreya-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

public/assets/fonts/project/EB_Garamond/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2017 The EB Garamond Project Authors (https://github.com/octaviopardo/EBGaramond12)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/assets/fonts/project/EB_Garamond/README.txt

@@ -0,0 +1,73 @@
+EB Garamond Variable Font
+=========================
+
+This download contains EB Garamond as both variable fonts and static fonts.
+
+EB Garamond is a variable font with this axis:
+  wght
+
+This means all the styles are contained in these files:
+  EB_Garamond/EBGaramond-VariableFont_wght.ttf
+  EB_Garamond/EBGaramond-Italic-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for EB Garamond:
+  EB_Garamond/static/EBGaramond-Regular.ttf
+  EB_Garamond/static/EBGaramond-Medium.ttf
+  EB_Garamond/static/EBGaramond-SemiBold.ttf
+  EB_Garamond/static/EBGaramond-Bold.ttf
+  EB_Garamond/static/EBGaramond-ExtraBold.ttf
+  EB_Garamond/static/EBGaramond-Italic.ttf
+  EB_Garamond/static/EBGaramond-MediumItalic.ttf
+  EB_Garamond/static/EBGaramond-SemiBoldItalic.ttf
+  EB_Garamond/static/EBGaramond-BoldItalic.ttf
+  EB_Garamond/static/EBGaramond-ExtraBoldItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

public/assets/fonts/project/Fira_Sans/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2012-2015, The Mozilla Foundation and Telefonica S.A.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/assets/fonts/project/Montserrat/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Montserrat.Git Project Authors (https://github.com/JulietaUla/Montserrat.git)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/assets/fonts/project/Montserrat/README.txt

@@ -0,0 +1,81 @@
+Montserrat Variable Font
+========================
+
+This download contains Montserrat as both variable fonts and static fonts.
+
+Montserrat is a variable font with this axis:
+  wght
+
+This means all the styles are contained in these files:
+  Montserrat/Montserrat-VariableFont_wght.ttf
+  Montserrat/Montserrat-Italic-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Montserrat:
+  Montserrat/static/Montserrat-Thin.ttf
+  Montserrat/static/Montserrat-ExtraLight.ttf
+  Montserrat/static/Montserrat-Light.ttf
+  Montserrat/static/Montserrat-Regular.ttf
+  Montserrat/static/Montserrat-Medium.ttf
+  Montserrat/static/Montserrat-SemiBold.ttf
+  Montserrat/static/Montserrat-Bold.ttf
+  Montserrat/static/Montserrat-ExtraBold.ttf
+  Montserrat/static/Montserrat-Black.ttf
+  Montserrat/static/Montserrat-ThinItalic.ttf
+  Montserrat/static/Montserrat-ExtraLightItalic.ttf
+  Montserrat/static/Montserrat-LightItalic.ttf
+  Montserrat/static/Montserrat-Italic.ttf
+  Montserrat/static/Montserrat-MediumItalic.ttf
+  Montserrat/static/Montserrat-SemiBoldItalic.ttf
+  Montserrat/static/Montserrat-BoldItalic.ttf
+  Montserrat/static/Montserrat-ExtraBoldItalic.ttf
+  Montserrat/static/Montserrat-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

public/assets/fonts/project/Open_Sans/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.