VerzatileDevOrg · JDSherbert · Jan 16, 2024 · Jan 14, 2024 · Jan 15, 2024 · Jan 15, 2024
diff --git a/_config.yml b/_config.yml
@@ -9,11 +9,9 @@ github_base_url: "https://github.com/VerzatileDevOrg/Programming_HandBook"
 aux_links:
   Contribute to the Github Repository: https://github.com/VerzatileDevOrg/Programming_HandBook
 
-back_to_top: true # Works through Footer.html
-
 plugins:
   - jekyll-last-modified-at
 
 # Optional. The default date format, used if none is specified in the tag.
 last-modified-at:
-    date-format: '%d/%m/%Y'
+    date-format: '%d/%m/%Y'
diff --git a/_includes/components/footer.html b/_includes/components/footer.html
@@ -1,10 +1,10 @@
 <div class="footer">
   <hr>
 
-  {% if site.back_to_top %}
-    <p>
-      <a href="" id="back-to-top">Back to Top</a>
-    </p>
+  {% if page.back_to_top != false %}
+  <p>
+    <a href="#" id="back-to-top">Back to Top</a>
+  </p>
   {% endif %}
 
   <div>

diff --git a/_includes/under_construction.html b/_includes/under_construction.html
@@ -1,4 +1,3 @@
-<img src="{{ site.baseurl }}/assets/images/under_construction.png" alt="Header" style="width:20%;">
 <br>
 
 {: .warning }

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,6 +1,7 @@
 ---
 layout: table_wrappers
 include_language_switch_script: false
+back_to_top: true
 ---
 
 <!DOCTYPE html>

diff --git a/_sass/code.scss b/_sass/code.scss
@@ -36,10 +36,11 @@
     margin-bottom: $sp-3;
     background-color: $code-background-color;
     border-radius: $border-radius;
-    box-shadow: none;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     -webkit-overflow-scrolling: touch;
     position: relative;
     padding: 10px;
+    border-left: 4px solid purple;
 
     // copy button (or other button)
     // the button appear only when there is a hover on the code or focus on button

diff --git a/_sass/custom/collections.scss b/_sass/custom/collections.scss
@@ -1,86 +1,171 @@
-// Callout Tags "Will make a box content with a background colour, side and Title
-// Callouts should be Added into a seperate Style When possible!
+/// Future Developers - Please Take notice of Following:
+/// Collections must be Represented as  ::Before  :not .collection
+/// .warning::before , .warning:not , .warning
+/// 
+/// Aim to use Hex Color scheme fo Background, Fonts and other sections.
+/// To assure global viability of each browser.
+/// Please Seperate new Collections by two Lines
+/// Bracket endings with a line
+/// 
+/// Functionalities modifiable::
+/// - content of each collection can be changed by using {: . ...  title="NewTitle"} 
+/// For each collection, and should as well be used for any future ones represented.
+/// 
+/// TO DO: Assign Coloring On the basis of the Webs Current Theme such as Dark of Light!
+
+// -------------COLLECTIONS-----------------//
+
+// --- WARNING ----
+// Use the following specifically to give out attention to some important notice or issue that may be occured or changed.
+// The current one makes a Box, with either a Default or manual written Title top box
+// Then a bottom box for the content that would be displayed under {: .warning } content..
+.warning::before {
+    content: attr(title);
+    color: #ffffff;
+    background-color: #f0b37e;
+    margin: -15px -15px 15px;
+    display: block;
+    font-weight: bold;
+    font-size: 1.00em;
+    padding-bottom: 0.125rem;
+    padding: 6px 12px;
+    border-radius: 6px;
+}
+
+// If a specified Title is not defined by {: .warning title="newAWesomeTitle"}, then use default title, can also be empty!
+.warning:not([title])::before {
+    content: "Warning !";
+}
+
 .warning {
     position: relative;
-    border-radius: 5px;
-    background-color: rgb(154 132 17/ 80%);
-    border-left: 4px solid #e7af06;
+    border-radius: 6px;
+    background-color: #FFEDCB;
     padding: 0.8rem;
     left: 5px;
-    color: rgba(255, 255, 255); /* Set the text color inside the .warning element to white */
-  }
-
-.warning::before {
-    content: "Warning!";
-    color: #f0ff00;
+    color: #404040;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+
+// --- ISSUE ----
+// Use this specify a problem with the specified content or example, can be used for other contexts.
+// Generates a Title element without a box at the top of the content written after {: .issue } content..
+.issue::before {
+    content: attr(title);
+    color: #ffffff;
+    background-color: #f07e7e;
+    margin: -15px -15px 15px;
     display: block;
     font-weight: bold;
-    text-transform: uppercase;
-    font-size: 0.75em;
+    font-size: 1.00em;
     padding-bottom: 0.125rem;
+    padding: 6px 12px;
+    border-radius: 6px;
 }
-
-.important {
-    background: rgb(255 125 125 / 20%);
-    border-left: 4px solid #dd2e2e;
+
+// If a specified Title is not defined by {: .note title="newAWesomeTitle"}, then use default title, can also be used as "" Empty.
+.issue:not([title])::before {
+    content: "Issue !";
+}
+
+.issue {
+    background: #ff7d7d33;
     border-radius: 4px;
     padding: 0.8rem;
+    left: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
-
-.important::before {
-    color: #dd2e2e;
-    content: "Important!";
+
+
+// --- NEW ---
+// Use this to specify new Updates, changes to code, documentation, versions etc.
+// Generates a Title element without a box at the top of the content written after {: .new } content..
+.new::before {
+    content: attr(title);
+    color: #ffffff;
     display: block;
+    background-color: #1abc9c;
     font-weight: bold;
-    text-transform: uppercase;
-    font-size: 0.75em;
+    font-size: 1.00em;
     padding-bottom: 0.125rem;
+    margin: -15px -15px 15px;
+    padding: 6px 12px;
+    border-radius: 6px;
 }
-
-.information {
-    background: rgba(44, 132, 250, 0.2);
-    border-left: 4px solid #183385;
+
+// If a specified Title is not defined by {: .note title="newAWesomeTitle"}, then use default title, can also be used as "" Empty.
+.new:not([title])::before {
+    content: "New !";
+}
+
+.new {
+    background: #e7f2fa;
     border-radius: 4px;
     padding: 0.8rem;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
-
-.information::before {
-    content: "Information:";
-    color: #183385;
+
+// ----IMPORTANT-------
+// Use this to specify an important resource of context before using the given content, or use this as a reminder to the reader what they 
+// should keep in mind with the given information, etc.
+// Generates a Title elements without a box at the top of the content written after {: .important } content..
+.important::before {
+    content: attr(title);
+    color: #dd2e2e;
     display: block;
     font-weight: bold;
     text-transform: uppercase;
     font-size: 0.75em;
     padding-bottom: 0.125rem;
 }
-
-.issue {
+
+// If a specified Title is not defined by {: .important title="newAWesomeTitle"}, then use default title, can also be used as "" Empty.
+.important:not([title])::before {
+    content: "Important!";
+}
+
+.important {
     background: rgb(255 125 125 / 20%);
     border-left: 4px solid #dd2e2e;
     border-radius: 4px;
     padding: 0.8rem;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
-
-.issue::before {
-    content: "Issue:";
-    color: #dd2e2e;
+
+// ----NOTE----
+// Use this to specify some context that the reader should focus on for the given changes or content that should be read before continuing
+// Can as well be used to specify any other important context, that the reader should take of notice.
+// Generates a Title element without a box at the top of the content written after {: .note } content..
+.note::before {
+    content: attr(title);
+    color: #183385;
     display: block;
     font-weight: bold;
     text-transform: uppercase;
     font-size: 0.75em;
     padding-bottom: 0.125rem;
 }
-
-.further-reading {
-    background: rgba(114, 83, 237, 0.2);
-    border-left: 4px solid #381885;
+
+// If a specified Title is not defined by {: .note title="newAWesomeTitle"}, then use default title, can also be used as "" Empty.
+.note:not([title])::before {
+    content: "Note:";
+}
+
+.note {
+    background: rgba(44, 132, 250, 0.2);
+    border-left: 4px solid #183385;
     border-radius: 4px;
     padding: 0.8rem;
-    color: rgb(255 255 255);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
-
+
+
+// --- FURTHER READING ----
+// Additional context to the given content, what the reader could read to better understand the given text.
+// Generates a Title element without a box at the top of the content written after {: .further-reading } content..
 .further-reading::before {
-    content: "Further Reading:";
+    content: attr(title);
     color: #381885;
     display: block;
     font-weight: bold;
@@ -89,30 +174,29 @@
     padding-bottom: 0.125rem;
 }
 
-.new {
-    background: rgba(65, 214, 147, 0.2);
-    border-left: 4px solid #026e57;
+// If a specified Title is not defined by {: .note title="newAWesomeTitle"}, then use default title, can also be used as "" Empty.
+.further-reading:not([title])::before {
+    content: "Further Reading:";
+}
+
+.further-reading {
+    background: rgba(114, 83, 237, 0.2);
+    border-left: 4px solid #381885;
     border-radius: 4px;
     padding: 0.8rem;
-    color: rgb(255 255 255);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
 
-.new::before {
-    color: #06ffca;
-    content: "New";
-    display: block;
-    font-weight: bold;
-    text-transform: uppercase;
-    font-size: 0.75em;
-    padding-bottom: 0.125rem;
-}
 
+// --- EXAMPLE ---
+// Specify and use the following to explain a section of the content use cases
+// Generates a Title element without a box at the top of the content written after {: .new } content..
 .example {
     position: relative;
     border-radius: 5px;
     background: rgba(114, 83, 237, 0.2);
-    border-left: 4px solid purple;
     padding: 0.8rem;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
 
 .example::before {
@@ -123,4 +207,38 @@
     text-transform: uppercase;
     font-size: 0.75em;
     padding-bottom: 0.125rem;
+}
+
+// If a specified Title is not defined by {: .note title="newAWesomeTitle"}, then use default title, can also be used as "" Empty.
+.example:not([title])::before {
+    content: "Example:";
+}
+
+
+// -----CODE--------
+// Use the following to assign Titles to CodeBlocks
+// Alternativly can be used by its own Creating a border on the left of Purple
+// Though won't be rendered as a codeblock itself, would be used for Specific 1 line examples
+.code::before {
+    content: attr(title);
+    color: #381885;
+    display: block;
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 0.75em;
+    padding-bottom: 0.125rem;
+}
+
+// If a specified Title is not defined by {: .code title="newAWesomeTitle"}, then use default title Code.
+.code:not([title])::before {
+    content: "Code:";
+}
+
+.code {
+    position: relative;
+    padding: 0.8rem;
+    border-radius: 5px;
+    border-left: 4px solid #800080;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    background-color: $code-background-color;
 }
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
@@ -4,6 +4,13 @@ $color-scheme: dark;
 @import 'collections'; // Collections Boxes for Content
 @import '../code'; // Overwrites Dependency Values see " Just the Docs " version " Dependency Removed in the future".
 
+// ---- Add these to their specified location, or Get the full file and make changes accordingly ---
+// Main Entry (Title of the Page) Accessed by {{ page.title }}
+h1 {
+     padding-bottom: 20px;
+     font-weight: 600;
+}
+
 // All Header 2's have spacing before content
 h2 {
      padding-bottom: 20px;

diff --git a/docs/Language/C++/Addresses.md b/docs/Language/C++/Addresses.md
@@ -16,7 +16,7 @@ If not, please refer to the [C++](/docs/Language/C++/C++.html) section of this b
 
 In C++, the ampersand (`&`) symbol is the address-of operator, used to obtain the memory address of a variable. The memory address represents the location in the computer's memory where the variable is stored.
 
-{: .example }
+{: .code}
 ```cpp
 int someVar = 69;
 int* somePtr = &someVar; // Pointer now holds the address of someVar
@@ -25,7 +25,7 @@ int value = *somePtr;  // Retrieves the value stored at the memory address
 
 The memory address is typically represented as a hexadecimal number.
 
-{: .example }
+{: .code}
 ```cpp
 #include <iostream>