Skip to content

Commit 3c52543

Browse files
JDSherbertJDSherbert
authored
Interface updates (Default Theme) (#75)
Reference --- The following Pull Request in response to issue #74 on the VerzatileDevOrg/Programming_HandBook repository, which can be referenced at #74. Addressable --- The primary focus of this Pull Request is to address the current default Color-Theme of the website, which is currently set to Light or White, as highlighted in issue #44 (#44). Changes --- 1. Modification of collections to utilize proper Hex Coloring. 2. Documentation and organization of collections for clarity. Introduction of the ability to assign a title to each collection, exemplified as follows: {: .code title="Specified Title"} Refinement of the interaction between the .code and .example classes for codeblocks. Addition of a purple outline on the side of codeblocks by default. Enhancement --- `<h1>` titles for improved visibility on the page, accompanied by the introduction of padding properties to separate the content from the underlying text.
2 parents e5fbca8 + 84e53bd commit 3c52543

22 files changed

Lines changed: 228 additions & 103 deletions

‎_config.yml‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,9 @@ github_base_url: "https://github.com/VerzatileDevOrg/Programming_HandBook"
99
aux_links:
1010
Contribute to the Github Repository: https://github.com/VerzatileDevOrg/Programming_HandBook
1111

12-
back_to_top: true # Works through Footer.html
13-
1412
plugins:
1513
- jekyll-last-modified-at
1614

1715
# Optional. The default date format, used if none is specified in the tag.
1816
last-modified-at:
19-
date-format: '%d/%m/%Y'
17+
date-format: '%d/%m/%Y'

‎_includes/components/footer.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div class="footer">
22
<hr>
33

4-
{% if site.back_to_top %}
5-
<p>
6-
<a href="" id="back-to-top">Back to Top</a>
7-
</p>
4+
{% if page.back_to_top != false %}
5+
<p>
6+
<a href="#" id="back-to-top">Back to Top</a>
7+
</p>
88
{% endif %}
99

1010
<div>

‎_includes/under_construction.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
<img src="{{ site.baseurl }}/assets/images/under_construction.png" alt="Header" style="width:20%;">
21
<br>
32

43
{: .warning }

‎_layouts/default.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
layout: table_wrappers
33
include_language_switch_script: false
4+
back_to_top: true
45
---
56

67
<!DOCTYPE html>

‎_sass/code.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,11 @@
3636
margin-bottom: $sp-3;
3737
background-color: $code-background-color;
3838
border-radius: $border-radius;
39-
box-shadow: none;
39+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
4040
-webkit-overflow-scrolling: touch;
4141
position: relative;
4242
padding: 10px;
43+
border-left: 4px solid purple;
4344

4445
// copy button (or other button)
4546
// the button appear only when there is a hover on the code or focus on button

‎_sass/custom/collections.scss‎

Lines changed: 176 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,171 @@
1-
// Callout Tags "Will make a box content with a background colour, side and Title
2-
// Callouts should be Added into a seperate Style When possible!
1+
/// Future Developers - Please Take notice of Following:
2+
/// Collections must be Represented as ::Before :not .collection
3+
/// .warning::before , .warning:not , .warning
4+
///
5+
/// Aim to use Hex Color scheme fo Background, Fonts and other sections.
6+
/// To assure global viability of each browser.
7+
/// Please Seperate new Collections by two Lines
8+
/// Bracket endings with a line
9+
///
10+
/// Functionalities modifiable::
11+
/// - content of each collection can be changed by using {: . ... title="NewTitle"}
12+
/// For each collection, and should as well be used for any future ones represented.
13+
///
14+
/// TO DO: Assign Coloring On the basis of the Webs Current Theme such as Dark of Light!
15+
16+
// -------------COLLECTIONS-----------------//
17+
18+
// --- WARNING ----
19+
// Use the following specifically to give out attention to some important notice or issue that may be occured or changed.
20+
// The current one makes a Box, with either a Default or manual written Title top box
21+
// Then a bottom box for the content that would be displayed under {: .warning } content..
22+
.warning::before {
23+
content: attr(title);
24+
color: #ffffff;
25+
background-color: #f0b37e;
26+
margin: -15px -15px 15px;
27+
display: block;
28+
font-weight: bold;
29+
font-size: 1.00em;
30+
padding-bottom: 0.125rem;
31+
padding: 6px 12px;
32+
border-radius: 6px;
33+
}
34+
35+
// If a specified Title is not defined by {: .warning title="newAWesomeTitle"}, then use default title, can also be empty!
36+
.warning:not([title])::before {
37+
content: "Warning !";
38+
}
39+
340
.warning {
441
position: relative;
5-
border-radius: 5px;
6-
background-color: rgb(154 132 17/ 80%);
7-
border-left: 4px solid #e7af06;
42+
border-radius: 6px;
43+
background-color: #FFEDCB;
844
padding: 0.8rem;
945
left: 5px;
10-
color: rgba(255, 255, 255); /* Set the text color inside the .warning element to white */
11-
}
12-
13-
.warning::before {
14-
content: "Warning!";
15-
color: #f0ff00;
46+
color: #404040;
47+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
48+
}
49+
50+
51+
// --- ISSUE ----
52+
// Use this specify a problem with the specified content or example, can be used for other contexts.
53+
// Generates a Title element without a box at the top of the content written after {: .issue } content..
54+
.issue::before {
55+
content: attr(title);
56+
color: #ffffff;
57+
background-color: #f07e7e;
58+
margin: -15px -15px 15px;
1659
display: block;
1760
font-weight: bold;
18-
text-transform: uppercase;
19-
font-size: 0.75em;
61+
font-size: 1.00em;
2062
padding-bottom: 0.125rem;
63+
padding: 6px 12px;
64+
border-radius: 6px;
2165
}
22-
23-
.important {
24-
background: rgb(255 125 125 / 20%);
25-
border-left: 4px solid #dd2e2e;
66+
67+
// If a specified Title is not defined by {: .note title="newAWesomeTitle"}, then use default title, can also be used as "" Empty.
68+
.issue:not([title])::before {
69+
content: "Issue !";
70+
}
71+
72+
.issue {
73+
background: #ff7d7d33;
2674
border-radius: 4px;
2775
padding: 0.8rem;
76+
left: 5px;
77+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
2878
}
29-
30-
.important::before {
31-
color: #dd2e2e;
32-
content: "Important!";
79+
80+
81+
// --- NEW ---
82+
// Use this to specify new Updates, changes to code, documentation, versions etc.
83+
// Generates a Title element without a box at the top of the content written after {: .new } content..
84+
.new::before {
85+
content: attr(title);
86+
color: #ffffff;
3387
display: block;
88+
background-color: #1abc9c;
3489
font-weight: bold;
35-
text-transform: uppercase;
36-
font-size: 0.75em;
90+
font-size: 1.00em;
3791
padding-bottom: 0.125rem;
92+
margin: -15px -15px 15px;
93+
padding: 6px 12px;
94+
border-radius: 6px;
3895
}
39-
40-
.information {
41-
background: rgba(44, 132, 250, 0.2);
42-
border-left: 4px solid #183385;
96+
97+
// If a specified Title is not defined by {: .note title="newAWesomeTitle"}, then use default title, can also be used as "" Empty.
98+
.new:not([title])::before {
99+
content: "New !";
100+
}
101+
102+
.new {
103+
background: #e7f2fa;
43104
border-radius: 4px;
44105
padding: 0.8rem;
106+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
45107
}
46-
47-
.information::before {
48-
content: "Information:";
49-
color: #183385;
108+
109+
// ----IMPORTANT-------
110+
// 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
111+
// should keep in mind with the given information, etc.
112+
// Generates a Title elements without a box at the top of the content written after {: .important } content..
113+
.important::before {
114+
content: attr(title);
115+
color: #dd2e2e;
50116
display: block;
51117
font-weight: bold;
52118
text-transform: uppercase;
53119
font-size: 0.75em;
54120
padding-bottom: 0.125rem;
55121
}
56-
57-
.issue {
122+
123+
// If a specified Title is not defined by {: .important title="newAWesomeTitle"}, then use default title, can also be used as "" Empty.
124+
.important:not([title])::before {
125+
content: "Important!";
126+
}
127+
128+
.important {
58129
background: rgb(255 125 125 / 20%);
59130
border-left: 4px solid #dd2e2e;
60131
border-radius: 4px;
61132
padding: 0.8rem;
133+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
62134
}
63-
64-
.issue::before {
65-
content: "Issue:";
66-
color: #dd2e2e;
135+
136+
// ----NOTE----
137+
// Use this to specify some context that the reader should focus on for the given changes or content that should be read before continuing
138+
// Can as well be used to specify any other important context, that the reader should take of notice.
139+
// Generates a Title element without a box at the top of the content written after {: .note } content..
140+
.note::before {
141+
content: attr(title);
142+
color: #183385;
67143
display: block;
68144
font-weight: bold;
69145
text-transform: uppercase;
70146
font-size: 0.75em;
71147
padding-bottom: 0.125rem;
72148
}
73-
74-
.further-reading {
75-
background: rgba(114, 83, 237, 0.2);
76-
border-left: 4px solid #381885;
149+
150+
// If a specified Title is not defined by {: .note title="newAWesomeTitle"}, then use default title, can also be used as "" Empty.
151+
.note:not([title])::before {
152+
content: "Note:";
153+
}
154+
155+
.note {
156+
background: rgba(44, 132, 250, 0.2);
157+
border-left: 4px solid #183385;
77158
border-radius: 4px;
78159
padding: 0.8rem;
79-
color: rgb(255 255 255);
160+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
80161
}
81-
162+
163+
164+
// --- FURTHER READING ----
165+
// Additional context to the given content, what the reader could read to better understand the given text.
166+
// Generates a Title element without a box at the top of the content written after {: .further-reading } content..
82167
.further-reading::before {
83-
content: "Further Reading:";
168+
content: attr(title);
84169
color: #381885;
85170
display: block;
86171
font-weight: bold;
@@ -89,30 +174,29 @@
89174
padding-bottom: 0.125rem;
90175
}
91176

92-
.new {
93-
background: rgba(65, 214, 147, 0.2);
94-
border-left: 4px solid #026e57;
177+
// If a specified Title is not defined by {: .note title="newAWesomeTitle"}, then use default title, can also be used as "" Empty.
178+
.further-reading:not([title])::before {
179+
content: "Further Reading:";
180+
}
181+
182+
.further-reading {
183+
background: rgba(114, 83, 237, 0.2);
184+
border-left: 4px solid #381885;
95185
border-radius: 4px;
96186
padding: 0.8rem;
97-
color: rgb(255 255 255);
187+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
98188
}
99189

100-
.new::before {
101-
color: #06ffca;
102-
content: "New";
103-
display: block;
104-
font-weight: bold;
105-
text-transform: uppercase;
106-
font-size: 0.75em;
107-
padding-bottom: 0.125rem;
108-
}
109190

191+
// --- EXAMPLE ---
192+
// Specify and use the following to explain a section of the content use cases
193+
// Generates a Title element without a box at the top of the content written after {: .new } content..
110194
.example {
111195
position: relative;
112196
border-radius: 5px;
113197
background: rgba(114, 83, 237, 0.2);
114-
border-left: 4px solid purple;
115198
padding: 0.8rem;
199+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
116200
}
117201

118202
.example::before {
@@ -123,4 +207,38 @@
123207
text-transform: uppercase;
124208
font-size: 0.75em;
125209
padding-bottom: 0.125rem;
210+
}
211+
212+
// If a specified Title is not defined by {: .note title="newAWesomeTitle"}, then use default title, can also be used as "" Empty.
213+
.example:not([title])::before {
214+
content: "Example:";
215+
}
216+
217+
218+
// -----CODE--------
219+
// Use the following to assign Titles to CodeBlocks
220+
// Alternativly can be used by its own Creating a border on the left of Purple
221+
// Though won't be rendered as a codeblock itself, would be used for Specific 1 line examples
222+
.code::before {
223+
content: attr(title);
224+
color: #381885;
225+
display: block;
226+
font-weight: bold;
227+
text-transform: uppercase;
228+
font-size: 0.75em;
229+
padding-bottom: 0.125rem;
230+
}
231+
232+
// If a specified Title is not defined by {: .code title="newAWesomeTitle"}, then use default title Code.
233+
.code:not([title])::before {
234+
content: "Code:";
235+
}
236+
237+
.code {
238+
position: relative;
239+
padding: 0.8rem;
240+
border-radius: 5px;
241+
border-left: 4px solid #800080;
242+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
243+
background-color: $code-background-color;
126244
}

‎_sass/custom/custom.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ $color-scheme: dark;
44
@import 'collections'; // Collections Boxes for Content
55
@import '../code'; // Overwrites Dependency Values see " Just the Docs " version " Dependency Removed in the future".
66

7+
// ---- Add these to their specified location, or Get the full file and make changes accordingly ---
8+
// Main Entry (Title of the Page) Accessed by {{ page.title }}
9+
h1 {
10+
padding-bottom: 20px;
11+
font-weight: 600;
12+
}
13+
714
// All Header 2's have spacing before content
815
h2 {
916
padding-bottom: 20px;

‎docs/Language/C++/Addresses.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ If not, please refer to the [C++](/docs/Language/C++/C++.html) section of this b
1616

1717
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.
1818

19-
{: .example }
19+
{: .code}
2020
```cpp
2121
int someVar = 69;
2222
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
2525

2626
The memory address is typically represented as a hexadecimal number.
2727

28-
{: .example }
28+
{: .code}
2929
```cpp
3030
#include <iostream>
3131

0 commit comments

Comments
 (0)