update scss

- for external an external repo

assets/scss/_article.scss

@@ -41,7 +41,7 @@
 @mixin sections {
   margin-block-start: 10px;
 
-  >.section {
+  .section {
     display: flex;
     flex-direction: column;
     align-self: center;

assets/scss/_copy.scss

@@ -1,3 +1,4 @@
+// EXTERNAL
 @mixin copy{
   .tooltip {
     position: relative;

assets/scss/_form.scss

@@ -0,0 +1,16 @@
+@use "inputs" as in;
+
+@mixin main {
+  display: flex;
+  flex-direction: column;
+  padding: 3%;
+
+  &.centered {
+    label {
+      text-align: center;
+      align-self: center;
+    }
+  }
+
+  @include in.moderncss;
+}

assets/scss/_header.scss

@@ -5,6 +5,10 @@
   align-items: center;
   justify-content: left;
 
+  &.centered {
+    justify-content: center;
+  }
+
   padding: 0px 10px;
   min-height: 60px;
 
@@ -19,4 +23,10 @@
     margin-top:5px;
     padding:auto;
   }
+
+  h1.centered {
+    align-self: center;
+    margin:0px;
+  }
+  
 }

assets/scss/_inputs.scss

@@ -0,0 +1,52 @@
+// EXTERNAL: https://moderncss.dev/custom-css-styles-for-form-inputs-and-textareas/
+
+@use "colors" as c;
+
+@mixin moderncss {  
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  .input {
+    font-size: 16px;
+    font-size: max(16px, 1em);
+    font-family: inherit;
+    padding: 0.25em 0.5em;
+    background-color: c.$text;
+    border: 2px solid c.$dark;
+    border-radius: 4px;
+
+    &:focus {
+      border-color: c.$light;
+      box-shadow: 0 0 0 3px c.$dark;
+      transition: 180ms box-shadow ease-in-out;
+      outline: 3px solid transparent;
+    }
+
+    // Extra
+    &:not(textarea) {
+      line-height: 1;
+      height: 2.25rem;
+    }
+
+    &[type="file"] {
+      font-size: 0.9em;
+      padding-top: 0.35rem;
+    }
+
+    &[readonly] {
+      border-style: dotted;
+      cursor: not-allowed;
+      color: #777;
+    }
+
+    &[disabled] {
+      --input-border: #ccc;
+    
+      background-color: #eee;
+      cursor: not-allowed;
+    }
+  }
+}

assets/scss/main.scss

@@ -10,6 +10,8 @@
 @use "article" as a;
 @use "footer" as f;
 
+@use "form" as form;
+
 .HIDDEN {
   display: none;
 }
@@ -45,6 +47,10 @@ body {
 
     @include a.main;
 
+    form {
+      @include form.main;
+    }
+
     &.plain {
       @include a.plain;
     }
@@ -82,7 +88,7 @@ body {
     }
   }
 
-  .main-scrollable{
+  .main-scrollable {
     height: 100%;
     overflow-y: auto;
     @include util.hide-scroll;