Skip to content

Commit be43fe4

Browse files
VerzatileDevVerzatileDev
committed
Visual Update to Collections/Code
Collections are now documented and organized specific to the Light theme of the current website, using Hex Color scheme, and titles can now be specified manually for each collection by the use of : {: .collection title="NewTitle"} if it is not defined the specified collection uses the default written title which is based on the name of itself. Note that collection Title can be written as empty as well if there is not a requirement to display it! Just use : title= "" instead. Made Adjustments within Code.scss, where each code block would not display a box-shadow around itself, as well as on the left side of it use a border colour.
1 parent 463f436 commit be43fe4

2 files changed

Lines changed: 178 additions & 59 deletions

File tree

‎_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
}

0 commit comments

Comments
 (0)