tdehaeze/research-home-page
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add nice boxes like "example", "warning", ...

Browse Source
This commit is contained in:
Thomas Dehaeze 2020-11-25 17:42:52 +01:00
parent 6999490e1b
commit a389226362
2 changed files with 69 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
css/partials/_boxes.scss Normal file
View File

@ -0,0 +1,62 @@
$types: (
note: (color: hsl(0, 0%, 94%), title-color: hsl(0, 0%, 64%), icon: ""),
seealso: (color: hsl(0, 0%, 94%), title-color: hsl(0, 0%, 64%), icon: ""),
definition: (color: hsl(360, 61%, 94%), title-color: hsl(360, 61%, 64%), icon: ""),
exampl: (color: hsl(148, 61%, 94%), title-color: hsl(148, 61%, 64%), icon: ""),
question: (color: hsl(59, 61%, 94%), title-color: hsl(59, 61%, 64%), icon: ""),
summary: (color: hsl(204, 61%, 94%), title-color: hsl(204, 61%, 64%), icon: ""),
hint: (color: hsl(0, 0%, 94%), title-color: hsl(0, 0%, 64%), icon: ""),
important: (color: hsl(42, 61%, 94%), title-color: hsl(42, 61%, 64%), icon: ""),
caution: (color: hsl(42, 61%, 94%), title-color: hsl(42, 61%, 64%), icon: ""),
warning: (color: hsl(42, 61%, 94%), title-color: hsl(42, 61%, 64%), icon: "")
);
@each $label, $map in $types {
.#{$label} {
padding:12px;
line-height:24px;
margin-bottom:24px;
-webkit-font-smoothing:antialiased;
background: map-get($map, color);
p:last-child, .last {
margin-bottom:0;
}
&.admonition-title{
line-height: 1;
background: map-get($map, title-color);
margin-bottom: 0px;
&:before{
font-family:FontAwesome;
content: map-get($map, icon);
}
}
}
}
#content .admonition-title{
color:#fff;
font-weight:bold;
display:block;
color:#fff;
padding:6px 12px;
margin-bottom:0px;
font-family:inherit;
-webkit-font-smoothing:antialiased;
&:before{
margin-right:4px;
font-family:"FontAwesome";
display:inline-block;
font-style:normal;
font-weight:normal;
line-height:1;
text-decoration:inherit;
}
}

16
js/readtheorg.js
View File

@ -1,16 +1,14 @@
$(function() { $(function() {
$('.note').before("<p class='admonition-title note'>Note</p>"); $('.note').before("<p class='admonition-title note'>Note</p>");
$('.seealso').before("<p class='admonition-title seealso'>See also</p>"); $('.seealso').before("<p class='admonition-title seealso'>See also</p>");
$('.warning').before("<p class='admonition-title warning'>Warning</p>"); $('.definition').before("<p class='admonition-title definition'>Definition</p>");
$('.caution').before("<p class='admonition-title caution'>Caution</p>"); $('.exampl').before("<p class='admonition-title exampl'>Example</p>");
$('.attention').before("<p class='admonition-title attention'>Attention</p>");
$('.tip').before("<p class='admonition-title tip'>Tip</p>");
$('.important').before("<p class='admonition-title important'>Important</p>");
$('.hint').before("<p class='admonition-title hint'>Hint</p>");
$('.error').before("<p class='admonition-title error'>Error</p>");
$('.danger').before("<p class='admonition-title danger'>Danger</p>");
$('.question').before("<p class='admonition-title question'>Question</p>"); $('.question').before("<p class='admonition-title question'>Question</p>");
$('.summary').before("<p class='admonition-title hint'>Summary</p>"); $('.summary').before("<p class='admonition-title summary'>Summary</p>");
$('.hint').before("<p class='admonition-title hint'>Hint</p>");
$('.important').before("<p class='admonition-title important'>Important</p>");
$('.caution').before("<p class='admonition-title caution'>Caution</p>");
$('.warning').before("<p class='admonition-title warning'>Warning</p>");
}); });
$( document ).ready(function() { $( document ).ready(function() {