Merge branch 'branch-ug-updates' of https://github.com/AY2223S2-CS210…

…3-W17-1/tp into branch-ug-updates

* 'branch-ug-updates' of https://github.com/AY2223S2-CS2103-W17-1/tp:
  Change site width
  Fix bug in diagram
  Add UI layout
  Change site-wide width
  Add Back to top buttons
  Change font
  Setup local site to see changes
  Change heading colors and bold
  Add Initial UI screenshot to images

.gitignore

@@ -23,3 +23,7 @@ docs/_site/
 
 # Bin files
 bin/
+
+# Local Gemfile
+docs/Gemfile
+docs/Gemfile.lock

docs/Gemfile.lock

@@ -242,6 +242,7 @@ GEM
     tzinfo (1.2.10)
       thread_safe (~> 0.1)
     unicode-display_width (1.8.0)
+    wdm (0.1.1)
     zeitwerk (2.6.1)
 
 PLATFORMS
@@ -251,6 +252,7 @@ PLATFORMS
 DEPENDENCIES
   github-pages
   jekyll
+  wdm (~> 0.1.0)
 
 BUNDLED WITH
    2.1.4

docs/UserGuide.md

@@ -6,6 +6,7 @@ title: User Guide
 ## Table of Contents
 *  **[Overview](#overview)**
 *  **[Quick start](#quick-start)**
+*  **[User interface layout](#user-interface-layout)**
 *  **[User input restrictions](#user-input-restrictions)**
 *  **[Features](#features)**
 *  **[GUI display restrictions](#gui-display-restrictions)**
@@ -29,6 +30,8 @@ If you need to switch to a new device, you can also export and import your previ
 
 **MATHUTORING** is optimised for use via a Command Line Interface (CLI) while still having the benefits of a Graphical User Interface (GUI). If you can type fast, **MATHUTORING** can get your contact management tasks done faster than traditional GUI apps.
 
+[Back to top](#table-of-contents)
+
 --------------------------------------------------------------------------------------------------------------------
 
 ## Quick start
@@ -43,7 +46,7 @@ If you need to switch to a new device, you can also export and import your previ
    <br>
    The initial GUI below should appear in a few seconds. Note how the app contains some sample data for your reference, you are free to delete the sample data after you get familiar with the MATHUTORING.<br>
 
-   <img width="1440" alt="Screenshot 2023-03-30 at 12 51 28 PM" src="https://user-images.githubusercontent.com/97392685/228732862-ca3893da-f637-468c-9a9b-5f4e4a38a9cf.png">
+    ![InitialUi](images/InitialUi.png)
 
 5. Type the command in the command box and press `Enter` to execute it. e.g. typing **`help`** and pressing `Enter` will open the help window.<br>
    Some example commands you can try:
@@ -62,13 +65,23 @@ If you need to switch to a new device, you can also export and import your previ
 
 7. Refer to the [Features](#features) below for details of each command.
 
+[Back to top](#table-of-contents)
+
+--------------------------------------------------------------------------------------------------------------------
+
+## User interface layout
+
+![Layout](images/Layout.png)
+
 --------------------------------------------------------------------------------------------------------------------
 
 ## User input restrictions
 To achieve the best performance, we have set a few restrictions regarding the user input.
 
 * Phone number must have at least 3 digits and no more than 15 digits.
 * A tag should not have more than 20 letters.
+
+[Back to top](#table-of-contents)
 
 --------------------------------------------------------------------------------------------------------------------
 
@@ -466,6 +479,8 @@ MATHUTORING data are saved as a JSON file `[JAR file location]/data/mathutoring.
 If your changes to the data file make its format invalid, MATHUTORING will discard all data and start with an empty data file at the next run.
 </div>
 
+[Back to top](#table-of-contents)
+
 --------------------------------------------------------------------------------------------------------------------
 
 ## GUI display restrictions
@@ -481,6 +496,8 @@ We have set up a few GUI display restrictions in order to avoid the GUI being af
 **Q**: How do I transfer my data to another Computer?<br>
 **A**: Install the app in the other computer and overwrite the empty data file it creates with the file that contains the data of your previous MATHUTORING home folder.
 
+[Back to top](#table-of-contents)
+
 --------------------------------------------------------------------------------------------------------------------
 
 ## Command summary
@@ -506,3 +523,5 @@ We have set up a few GUI display restrictions in order to avoid the GUI being af
 | **Help**           | `help`                                                                                                                                                                                        |
 | **Switch**         | `switch`                                                                                                                                                                                      |
 | **Exit**           | `exit`                                                                                                                                                                                        |
+
+[Back to top](#table-of-contents)

docs/_sass/minima/_base.scss

@@ -103,7 +103,7 @@ li {
  * Headings
  */
 h1, h2, h3, h4, h5, h6 {
-  font-weight: $base-font-weight;
+  font-weight: $bold-font-weight;
 }
 
 

docs/_sass/minima/custom-styles.scss

@@ -1,7 +1,7 @@
 // Placeholder to allow defining custom styles that override everything else.
 // (Use `_sass/minima/custom-variables.scss` to override variable defaults)
 h2, h3, h4, h5, h6 {
-  color: #e46c0a;
+  color: #605BF1;
 }
 
 // Bootstrap style alerts

docs/_sass/minima/initialize.scss

@@ -6,6 +6,7 @@ $base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symb
 $code-font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace;
 $base-font-size:   16px !default;
 $base-font-weight: 400 !default;
+$bold-font-weight: $base-font-weight * 1.75 !default;
 $small-font-size:  $base-font-size * 0.875 !default;
 $base-line-height: 1.5 !default;
 
@@ -14,7 +15,7 @@ $spacing-unit:     30px !default;
 $table-text-align: left !default;
 
 // Width of the content area
-$content-width:    800px !default;
+$content-width:    2000px !default;
 
 $on-palm:          600px !default;
 $on-laptop:        800px !default;