feat: contextual scope section layout

Has a character limiter

Author: JadsonLucena

assets/style/index.css

@@ -77,6 +77,25 @@ main {
                     width: 800px;
                     max-width: calc(100% - 10px);
                 }
+                    main > section > form > div > label > small {
+                        float: right;
+                        font-size: 14px;
+                        font-weight: bold;
+                    }
+                    main > section > form > div > label > small.good {
+                        color: limegreen;
+                    }
+                    main > section > form > div > label > small.caution {
+                        color: gold;
+                    }
+                    main > section > form > div > label > small.danger {
+                        color: tomato;
+                    }
+                        main > section > form > div > label > small > sub {
+                            padding-left: 3px;
+                            font-size: 8px;
+                            font-weight: normal;
+                        }
                     main > section > form > div > label input[type="text"] {
                         margin: 5px 0;
                         padding: 7px 14px;

index.html

@@ -86,7 +86,35 @@
             </form>
 
         </section>
-        <section id="scope"></section>
+        <section id="scope">
+
+            <details>
+                <summary>Scope</summary>
+                <ul>
+                    <li>It must be something that intuitively specifies the location of the change</li>
+                    <li>It should aim to provide additional contextual information</li>
+                </ul>
+            </details>
+
+            <form>
+
+                <div>
+
+                    <label for="scopeInput">
+                        <input type="text" name="scope" id="scopeInput" maxlength="50" placeholder="Add an optional noun that describes the contextual scope of the change"><br>
+                        <small>0 / 50</small>
+                    </label>
+
+                </div>
+
+                <nav>
+                    <button type="reset" class="previous"><< Previous</button>
+                    <button type="submit" class="next">Next >></button>
+                </nav>
+
+            </form>
+
+        </section>
         <section id="summary"></section>
         <section id="body"></section>
         <section id="footer"></section>