Skip to content

Commit 23e6262

Browse files
JDSherbertJDSherbert
authored
Merge branch 'VerzatileDevOrg:main' into Content/Language/C#
2 parents fcdd676 + b7031c1 commit 23e6262

17 files changed

Lines changed: 389 additions & 145 deletions

‎_sass/code.scss‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
// Code and syntax highlighting
2+
// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type, scss/comment-no-empty
3+
4+
// {% raw %}
5+
6+
// This instruction applies to all queues not within 'pre' or 'figure', avoiding 'code' generated by the highlight.
7+
:not(pre, figure) {
8+
& > code {
9+
padding: 0.2em 0.15em;
10+
font-weight: 400;
11+
background-color: $code-background-color;
12+
border: $border $border-color;
13+
border-radius: $border-radius;
14+
}
15+
}
16+
17+
a:visited code {
18+
border-color: $border-color;
19+
}
20+
21+
// the code may appear with 3 different types:
22+
// container \ case: default case, code with line number, code with html rendering
23+
// top level: div.highlighter-rouge, figure.highlight, figure.highlight
24+
// second level: div.highlight, div.table-wrapper, pre.highlight
25+
// third level: pre.highlight, td.code, absent
26+
// last level: code, pre, code (optionality)
27+
// highlighter level: span, span, span
28+
// the spacing are only in the second level for case 1, 3 and in the third level for case 2
29+
// in AsciiDoc, there is a parent container that contains optionally a title and the content.
30+
31+
// select top level container
32+
div.highlighter-rouge,
33+
div.listingblock > div.content,
34+
figure.highlight {
35+
margin-top: 0;
36+
margin-bottom: $sp-3;
37+
background-color: $code-background-color;
38+
border-radius: $border-radius;
39+
box-shadow: none;
40+
-webkit-overflow-scrolling: touch;
41+
position: relative;
42+
padding: 10px;
43+
44+
// copy button (or other button)
45+
// the button appear only when there is a hover on the code or focus on button
46+
> button {
47+
width: $sp-3;
48+
opacity: 0;
49+
position: absolute;
50+
top: 0;
51+
right: 0;
52+
border: $sp-3 solid $code-background-color;
53+
background-color: $code-background-color;
54+
color: $body-text-color;
55+
box-sizing: content-box;
56+
57+
svg {
58+
fill: $body-text-color;
59+
}
60+
61+
&:active {
62+
text-decoration: none;
63+
outline: none;
64+
opacity: 1;
65+
}
66+
67+
&:focus {
68+
opacity: 1;
69+
}
70+
}
71+
72+
// the button can be seen by doing a simple hover in the code, there is no need to go over the location of the button
73+
&:hover {
74+
> button {
75+
cursor: copy;
76+
opacity: 1;
77+
}
78+
}
79+
}
80+
81+
// setting the spacing and scrollbar on the second level for the first case
82+
// remove all space on the second and third level
83+
// this is a mixin to accommodate for the slightly different structures generated via Markdown vs AsciiDoc
84+
@mixin scroll-and-spacing($code-div, $pre-select) {
85+
#{$code-div} {
86+
overflow-x: auto;
87+
padding: $sp-3;
88+
margin: 0;
89+
border: 0;
90+
}
91+
92+
#{$pre-select},
93+
code {
94+
padding: 0;
95+
margin: 0;
96+
border: 0;
97+
}
98+
}
99+
100+
// for Markdown
101+
div.highlighter-rouge {
102+
@include scroll-and-spacing("div.highlight", "pre.highlight");
103+
}
104+
105+
// for AsciiDoc. we also need to fix the margins for its parent container.
106+
div.listingblock {
107+
@include scroll-and-spacing("div.content", "div.content > pre");
108+
109+
margin-top: 0;
110+
margin-bottom: $sp-3;
111+
}
112+
113+
// {% highlight LANG %}...{% endhighlight %},
114+
// {% highlight LANG linenos %}...{% endhighlight %}:
115+
116+
// setting the spacing and scrollbar on the second level for the thirt case
117+
// the css rule are apply only to the last code enviroment
118+
// setting the scroolbar
119+
figure.highlight {
120+
pre,
121+
:not(pre) > code {
122+
overflow-x: auto;
123+
124+
margin: 0;
125+
border: 0;
126+
}
127+
}
128+
129+
// ```[LANG]...```, kramdown line_numbers = true,
130+
// {% highlight LANG linenos %}...{% endhighlight %}:
131+
132+
// setting the spacing and scrollbar on the thirt level for the second case
133+
.highlight .table-wrapper {
134+
padding: $sp-3 0;
135+
margin: 0;
136+
border: 0;
137+
box-shadow: none;
138+
139+
td,
140+
pre {
141+
@include fs-2;
142+
143+
min-width: 0;
144+
padding: 0;
145+
background-color: $code-background-color;
146+
border: 0;
147+
}
148+
149+
td.gl {
150+
width: 1em;
151+
padding-right: $sp-3;
152+
padding-left: $sp-3;
153+
}
154+
155+
pre {
156+
margin: 0;
157+
line-height: 2;
158+
}
159+
}
160+
161+
// Code examples: html render of a code
162+
.code-example,
163+
.listingblock > .title {
164+
padding: $sp-3;
165+
margin-bottom: $sp-3;
166+
overflow: auto;
167+
border: 1px solid $border-color;
168+
border-radius: $border-radius;
169+
170+
+ .highlighter-rouge,
171+
+ .sectionbody .listingblock,
172+
+ .content,
173+
+ figure.highlight {
174+
position: relative;
175+
margin-top: -$sp-4;
176+
border-right: 1px solid $border-color;
177+
border-bottom: 1px solid $border-color;
178+
border-left: 1px solid $border-color;
179+
border-top-left-radius: 0;
180+
border-top-right-radius: 0;
181+
}
182+
}
183+
184+
// Mermaid diagram code blocks should be left unstyled.
185+
code.language-mermaid {
186+
padding: 0;
187+
background-color: inherit;
188+
border: 0;
189+
}
190+
191+
// Override OneDarkJekyll Colors for Code Blocks
192+
.highlight,
193+
pre.highlight {
194+
background: $code-background-color; // Code Background
195+
// For Backwards Compatibility Before $code-linenumber-color was added
196+
@if variable-exists(code-linenumber-color) {
197+
color: $code-linenumber-color; // Code Line Numbers
198+
} @else {
199+
color: $body-text-color; // Code Line Numbers
200+
}
201+
}
202+
203+
// Override OneDarkJekyll Colors for Code Blocks
204+
.highlight pre {
205+
background: $code-background-color; // Code Background
206+
}
207+
208+
// {% endraw %}

‎_sass/custom/collections.scss‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
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!
3+
.warning {
4+
position: relative;
5+
border-radius: 5px;
6+
background-color: rgb(154 132 17/ 80%);
7+
border-left: 4px solid #e7af06;
8+
padding: 0.8rem;
9+
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;
16+
display: block;
17+
font-weight: bold;
18+
text-transform: uppercase;
19+
font-size: 0.75em;
20+
padding-bottom: 0.125rem;
21+
}
22+
23+
.important {
24+
background: rgb(255 125 125 / 20%);
25+
border-left: 4px solid #dd2e2e;
26+
border-radius: 4px;
27+
padding: 0.8rem;
28+
}
29+
30+
.important::before {
31+
color: #dd2e2e;
32+
content: "Important!";
33+
display: block;
34+
font-weight: bold;
35+
text-transform: uppercase;
36+
font-size: 0.75em;
37+
padding-bottom: 0.125rem;
38+
}
39+
40+
.information {
41+
background: rgba(44, 132, 250, 0.2);
42+
border-left: 4px solid #183385;
43+
border-radius: 4px;
44+
padding: 0.8rem;
45+
}
46+
47+
.information::before {
48+
content: "Information:";
49+
color: #183385;
50+
display: block;
51+
font-weight: bold;
52+
text-transform: uppercase;
53+
font-size: 0.75em;
54+
padding-bottom: 0.125rem;
55+
}
56+
57+
.issue {
58+
background: rgb(255 125 125 / 20%);
59+
border-left: 4px solid #dd2e2e;
60+
border-radius: 4px;
61+
padding: 0.8rem;
62+
}
63+
64+
.issue::before {
65+
content: "Issue:";
66+
color: #dd2e2e;
67+
display: block;
68+
font-weight: bold;
69+
text-transform: uppercase;
70+
font-size: 0.75em;
71+
padding-bottom: 0.125rem;
72+
}
73+
74+
.further-reading {
75+
background: rgba(114, 83, 237, 0.2);
76+
border-left: 4px solid #381885;
77+
border-radius: 4px;
78+
padding: 0.8rem;
79+
color: rgb(255 255 255);
80+
}
81+
82+
.further-reading::before {
83+
content: "Further Reading:";
84+
color: #381885;
85+
display: block;
86+
font-weight: bold;
87+
text-transform: uppercase;
88+
font-size: 0.75em;
89+
padding-bottom: 0.125rem;
90+
}
91+
92+
.new {
93+
background: rgba(65, 214, 147, 0.2);
94+
border-left: 4px solid #026e57;
95+
border-radius: 4px;
96+
padding: 0.8rem;
97+
color: rgb(255 255 255);
98+
}
99+
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+
}
109+
110+
.example {
111+
position: relative;
112+
border-radius: 5px;
113+
background: rgba(114, 83, 237, 0.2);
114+
border-left: 4px solid purple;
115+
padding: 0.8rem;
116+
}
117+
118+
.example::before {
119+
content: "Example:";
120+
color: #381885;
121+
display: block;
122+
font-weight: bold;
123+
text-transform: uppercase;
124+
font-size: 0.75em;
125+
padding-bottom: 0.125rem;
126+
}

0 commit comments

Comments
 (0)