liquidex/rkgk
liquidex/rkgk
1
Fork 0
Code Issues 66 Pull requests Projects 1 Wiki Activity

make code examples horizontally scrollable

Browse source
This commit is contained in:
liquidex 2024-10-23 19:44:42 +02:00
parent fd3f37d744
commit d6bb4e9911
1 changed files with 24 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
static/base.css
View file

@ -5,7 +5,7 @@
--color-error: #db344b;
--color-brand-blue: #40b1f4;
--color-panel-border: rgba(0, 0, 0, 20%);
--color-panel-background: #fff;
--color-shaded-background: rgba(0, 0, 0, 5%);
@ -18,7 +18,7 @@
--line-height-em: 1.5em;
}
/* Reset */
/* Reset */
body {
margin: 0;
@ -36,12 +36,16 @@ body {
font-family: var(--font-body);
}
button, textarea, input {
button,
textarea,
input {
font-size: inherit;
font-family: inherit;
}
pre, code, textarea {
pre,
code,
textarea {
font-family: var(--font-monospace);
line-height: var(--line-height);
}
@ -55,7 +59,7 @@ button {
background-color: var(--color-panel-background);
}
/* Text areas */
/* Text areas */
input {
border: none;
@ -81,7 +85,7 @@ dialog::backdrop {
/* Details */
details>summary {
details > summary {
cursor: pointer;
}
@ -126,14 +130,13 @@ rkgk-throbber {
.rkgk-panel {
--panel-border-radius: 8px;
display: block;
background: var(--color-panel-background);
border: none;
border-radius: var(--panel-border-radius);
box-shadow:
0 0 0 1px var(--color-panel-border);
/* 4px 4px 0 0 var(--color-panel-border); */
box-shadow: 0 0 0 1px var(--color-panel-border);
/* 4px 4px 0 0 var(--color-panel-border); */
box-sizing: border-box;
}
@ -146,7 +149,8 @@ hr {
/* Lists */
ul, ol {
ul,
ol {
padding-left: 20px;
}
@ -156,13 +160,14 @@ pre:has(code) {
background-color: var(--color-shaded-background);
border-radius: 8px;
padding: 1em 1em;
overflow: auto;
}
/* Icons */
:root {
--icon-rkgk-grayscale: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJtMCAwaDE2djE2aC0xNnoiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNhKSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Im0xMiAxNy00LjU1Mjc5LTkuMTA1NTdjLS42NjQ5LTEuMzI5ODEuMzAyMDktMi44OTQ0MyAxLjc4ODg2LTIuODk0NDNoOC43NjM5MyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxnIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0ibTUuNSAxMi0yLjUgNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0ibTMgNWgxIi8+PC9nPjwvZz48L3N2Zz4=');
--icon-external-link: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMwMDAiPjxwYXRoIGQ9Im0xMC41IDl2Mi41aC02di02aDIuNSIvPjxwYXRoIGQ9Im03IDkgNC41LTQuNW0wIDBoLTMuNW0zLjUgMHYzLjUiLz48L2c+PC9zdmc+');
--icon-rkgk-grayscale: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJtMCAwaDE2djE2aC0xNnoiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNhKSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Im0xMiAxNy00LjU1Mjc5LTkuMTA1NTdjLS42NjQ5LTEuMzI5ODEuMzAyMDktMi44OTQ0MyAxLjc4ODg2LTIuODk0NDNoOC43NjM5MyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxnIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0ibTUuNSAxMi0yLjUgNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0ibTMgNWgxIi8+PC9nPjwvZz48L3N2Zz4=");
--icon-external-link: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMwMDAiPjxwYXRoIGQ9Im0xMC41IDl2Mi41aC02di02aDIuNSIvPjxwYXRoIGQ9Im03IDkgNC41LTQuNW0wIDBoLTMuNW0zLjUgMHYzLjUiLz48L2c+PC9zdmc+");
}
.icon {
@ -174,7 +179,10 @@ pre:has(code) {
background-repeat: no-repeat;
background-position: 50% 50%;
&.icon-rkgk-grayscale { background-image: var(--icon-rkgk-grayscale); }
&.icon-external-link { background-image: var(--icon-external-link); }
&.icon-rkgk-grayscale {
background-image: var(--icon-rkgk-grayscale);
}
&.icon-external-link {
background-image: var(--icon-external-link);
}
}