brandon/oam
1
0
Fork 0
mirror of https://gitea.com/mcereda/oam.git synced 2026-02-09 05:44:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(snippets/info-blocks): move all block types under a single file

Browse Source
This commit is contained in:
Michele Cereda
2024-04-12 20:12:47 +02:00
parent 9990cf9362
commit a22d836f05
5 changed files with 70 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
knowledge base/html.placeholder Normal file
View File

@@ -0,0 +1 @@
[color names chart]: https://htmlcolorcodes.com/color-names/

17
snippets/alert.md
View File

@@ -1,17 +0,0 @@
<!-- markdownlint-disable-file MD041 -->
<div class="alert" style="
background-color: rgba(255,0,0,0.0625);
border: solid tomato; /* #FF6347 */
margin: 1em 0;
padding: 1em 1em 0;
">
<header style="
font-weight: bold;
margin-bottom: 0.5em;
text-align: center;
">🛑 Alert 🛑</header>
content
</div>

69
snippets/info-blocks.md Normal file
View File

@@ -0,0 +1,69 @@
<!-- markdownlint-disable-file MD041 -->
The idea here is to mimic Confluence's Info panel.
<style>
.info-block {
margin: 1em 0;
padding: 1em 1em 0;
}
.info-block header {
font-weight: bold;
margin-bottom: 0.5em;
}
.alert {
background-color: rgba(255,0,0,0.0625); /* red #FF0000 rgb(255,0,0) */
border: solid tomato; /* tomato #FF6347 rgb(255,99,71) */
}
.info {
background-color: rgba(0,191,255,0.0625); /* deepSkyBlue #00BFFF rgb(0,191,255) */
border: solid dodgerBlue; /* dodgerBlue #1E90FF rgb(30,144,255) */
}
.note {
background-color: rgba(128,0,128,0.0625); /* purple #800080 rgb(128,0,128) */
border: solid mediumPurple; /* mediumPurple #9370DB rgb(147,112,219) */
}
.tip {
background-color: rgba(0,255,0,0.0625); /* green #00FF00 rgb(0,255,0) */
border: solid lightGreen; /* lightGreen #90EE90 rgb(144,238,144) */
}
.warning {
background-color: rgba(255,255,0,0.0625); /* yellow #FFFF00 rgb(255,255,0) */
border: solid yellow; /* yellow #FFFF00 rgb(255,255,0) */
}
</style>
<div class="info-block tip">
<header>💡 Tip</header>
content
</div>
<div class="info-block info">
<header>ⓘ Info</header>
content
</div>
<div class="info-block note">
<header>🗒 Note</header>
content
</div>
<div class="info-block warning">
<header>⚠ Warning</header>
content
</div>
<div class="info-block alert">
<header>🛑 Alert</header>
content
</div>

13
snippets/tip.md
View File

@@ -1,13 +0,0 @@
<!-- markdownlint-disable-file MD041 -->
<div class="tip" style="
background-color: rgba(0,255,0,0.0625);
border: solid lightGreen; /* #90EE90 */
margin: 1em 0;
padding: 1em 1em 0;
">
<header style="font-weight: bold; margin-bottom: 0.5em">Pro tip</header>
content
</div>

13
snippets/warning.md
View File

@@ -1,13 +0,0 @@
<!-- markdownlint-disable-file MD041 -->
<div class="warning" style="
background-color: rgba(255,255,0,0.0625);
border: solid yellow; /* #FFFF00 */
margin: 1em 0;
padding: 1em 1em 0;
">
<header style="font-weight: bold; margin-bottom: 0.5em">⚠ Warning ⚠️</header>
content
</div>