diff --git a/src/skeleton/skeleton-class.css b/src/skeleton/skeleton-class.css new file mode 100644 index 0000000..8334a05 --- /dev/null +++ b/src/skeleton/skeleton-class.css @@ -0,0 +1,210 @@ +.bluelib { + box-sizing: border-box; +} +.bluelib .container-main { + margin-left: auto; + margin-right: auto; + max-width: 1280px; +} +.bluelib .panel { + margin: 8px 0; + width: 100%; +} +.bluelib .panel > .panel { + margin: 0; +} +.bluelib .panel > .paragraph:first-child { + margin-top: 0; +} +.bluelib .panel > .paragraph:last-child { + margin-bottom: 0; +} +.bluelib .panel > .title:first-child { + margin-top: 4px; +} +.bluelib .panel > .title:last-child { + margin-bottom: 4px; +} +.bluelib .panel-box { + padding: 8px; + border-radius: 4px; + border-width: 2px; + background-color: rgba(0, 0, 0, 0.025); +} +.bluelib .panel-blockquote { + padding: 8px; + border-radius: 4px; + border-width: 2px; + background-color: rgba(0, 0, 0, 0.025); + border-left-width: 2px; + border-top-width: 0; + border-bottom-width: 0; + border-right-width: 0; +} +.bluelib .panel-aside { + padding: 8px; + border-radius: 4px; + border-width: 2px; + background-color: rgba(0, 0, 0, 0.025); + border-width: 0; + font-size: smaller; +} +.bluelib .panel-table { + padding: 8px; + border-radius: 4px; + border-width: 2px; + background-color: rgba(0, 0, 0, 0.025); + display: table; + border-spacing: 0; + border-collapse: collapse; +} +.bluelib .panel-split { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; +} +.bluelib .panel-split > * { + flex-grow: 1; + flex-shrink: 0; + flex-basis: 0; +} +.bluelib .status-disabled { + cursor: not-allowed; +} +.bluelib .status-hoverable { + cursor: help; +} +.bluelib .status-clickable { + cursor: pointer; +} +.bluelib .spoiler { + filter: blur(5px); + cursor: help; +} +.bluelib .spoiler:hover { + filter: none; +} +.bluelib .element-title { + text-align: center; +} +.bluelib .element-separator { + border-width: 1px; +} +.bluelib .element-list-item { + margin: 10px 0; +} +.bluelib .align-left { + text-align: left; +} +.bluelib .align-center { + text-align: center; +} +.bluelib .align-right { + text-align: right; +} +.bluelib .size-xxl { + font-size: xx-large; +} +.bluelib .size-xl { + font-size: x-large; +} +.bluelib .size-l { + font-size: large; +} +.bluelib .size-m { + font-size: medium; +} +.bluelib .size-s { + font-size: small; +} +.bluelib .size-xs { + font-size: x-small; +} +.bluelib .size-xxs { + font-size: xx-small; +} +.bluelib .style-bold { + font-weight: bold; +} +.bluelib .style-italic { + font-style: italic; +} +.bluelib .style-underline { + text-decoration-line: underline; +} +.bluelib .style-strike { + text-decoration-line: line-through; +} +.bluelib .color-red { + color: red; +} +.bluelib .color-orange { + color: orange; +} +.bluelib .color-yellow { + color: #dddd00; +} +.bluelib .color-lime { + color: lime; +} +.bluelib .color-cyan { + color: cyan; +} +.bluelib .color-blue { + color: blue; +} +.bluelib .color-magenta { + color: magenta; +} +.bluelib h1, +.bluelib h2, +.bluelib h3, +.bluelib h4, +.bluelib h5, +.bluelib h6 { + text-align: center; +} +.bluelib hr { + border-width: 1px; +} +.bluelib h1 { + font-size: xx-large; +} +.bluelib h2 { + font-size: x-large; +} +.bluelib h3 { + font-size: large; +} +.bluelib h4 { + font-size: medium; +} +.bluelib h5 { + font-size: small; +} +.bluelib h6 { + font-size: x-small; +} +.bluelib b { + font-weight: bold; +} +.bluelib i { + font-style: italic; +} +.bluelib u { + text-decoration-line: underline; +} +.bluelib li { + margin: 10px 0; +} +.bluelib *[title] { + cursor: help; +} +.bluelib *[disabled] { + cursor: not-allowed; +} +.bluelib *[onclick] { + cursor: pointer; +} +/*# sourceMappingURL=skeleton-class.css.map */ \ No newline at end of file diff --git a/src/skeleton/skeleton-class.css.map b/src/skeleton/skeleton-class.css.map new file mode 100644 index 0000000..a191931 --- /dev/null +++ b/src/skeleton/skeleton-class.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["skeleton-class.less","skeleton.less"],"names":[],"mappings":"AAEA;ECGI,sBAAA;;ADHJ,QCSI;EACI,iBAAA;EACA,kBAAA;EACA,iBAAA;;ADZR,QCmBI;EACI,aAAA;EACA,WAAA;;ADrBR,QCmBI,OAII;EACI,SAAA;;AAKA,QAVR,OASI,aACK;EACG,aAAA;;AAGJ,QAdR,OASI,aAKK;EACG,gBAAA;;AAMJ,QArBR,OAoBI,SACK;EACG,eAAA;;AAGJ,QAzBR,OAoBI,SAKK;EACG,kBAAA;;AD7ChB,QCmDI;EACI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;;ADvDR,QC2DI;EAPI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAOA,sBAAA;EACA,mBAAA;EACA,sBAAA;EACA,qBAAA;;ADjER,QCqEI;EAjBI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAiBA,eAAA;EACA,kBAAA;;ADzER,QC6EI;EAzBI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAyBA,cAAA;EACA,iBAAA;EACA,yBAAA;;ADlFR,QCsFI;EACI,aAAA;EACA,eAAA;EACA,QAAA;EACA,uBAAA;;AD1FR,QCsFI,aAMI;EACI,YAAA;EACA,cAAA;EACA,aAAA;;AD/FZ,QCqGI;EACI,mBAAA;;ADtGR,QCyGI;EACI,YAAA;;AD1GR,QC6GI;EACI,eAAA;;AD9GR,QCmHI;EACI,QAAQ,SAAR;EACA,YAAA;;AAEA,QAJJ,SAIK;EACG,YAAA;;ADxHZ,QC8HI;EAuBI,kBAAA;;ADrJR,QCsII;EACI,iBAAA;;ADvIR,QC0II;EACI,cAAA;;AD3IR,QCgJI;EACI,gBAAA;;ADjJR,QCoJI;EACI,kBAAA;;ADrJR,QCwJI;EACI,iBAAA;;ADzJR,QC8JI;EACI,mBAAA;;AD/JR,QCkKI;EACI,kBAAA;;ADnKR,QCsKI;EACI,gBAAA;;ADvKR,QC0KI;EACI,iBAAA;;AD3KR,QC8KI;EACI,gBAAA;;AD/KR,QCkLI;EACI,kBAAA;;ADnLR,QCsLI;EACI,mBAAA;;ADvLR,QC4LI;EACI,iBAAA;;AD7LR,QCgMI;EACI,kBAAA;;ADjMR,QCoMI;EACI,+BAAA;;ADrMR,QCwMI;EACI,kCAAA;;ADzMR,QC8MI;EACI,UAAA;;AD/MR,QCkNI;EACI,aAAA;;ADnNR,QCsNI;EACI,cAAA;;ADvNR,QC0NI;EACI,WAAA;;AD3NR,QC8NI;EACI,WAAA;;AD/NR,QCkOI;EACI,WAAA;;ADnOR,QCsOI;EACI,cAAA;;ADvOR,QC4OI;AD5OJ,QC4OQ;AD5OR,QC4OY;AD5OZ,QC4OgB;AD5OhB,QC4OoB;AD5OpB,QC4OwB;EAvFhB,kBAAA;;ADrJR,QCgPI;EAzGI,iBAAA;;ADvIR,QCwPI;EAzFI,mBAAA;;AD/JR,QC4PI;EAzFI,kBAAA;;ADnKR,QCgQI;EAzFI,gBAAA;;ADvKR,QCoQI;EAzFI,iBAAA;;AD3KR,QCwQI;EAzFI,gBAAA;;AD/KR,QC4QI;EAzFI,kBAAA;;ADnLR,QCgRI;EAnFI,iBAAA;;AD7LR,QCoRI;EAnFI,kBAAA;;ADjMR,QCwRI;EAnFI,+BAAA;;ADrMR,QC4RI;EAjJI,cAAA;;AD3IR,QCgSI,EAAC;EAtLG,YAAA;;AD1GR,QCoSI,EAAC;EA9LG,mBAAA;;ADtGR,QCwSI,EAAC;EA1LG,eAAA","file":"skeleton-class.css"} \ No newline at end of file diff --git a/src/skeleton/skeleton-class.less b/src/skeleton/skeleton-class.less new file mode 100644 index 0000000..b469ab8 --- /dev/null +++ b/src/skeleton/skeleton-class.less @@ -0,0 +1,5 @@ +@import "skeleton"; + +.bluelib { + .bluelib-skeleton(); +} diff --git a/src/skeleton/skeleton-root.css b/src/skeleton/skeleton-root.css new file mode 100644 index 0000000..a24204b --- /dev/null +++ b/src/skeleton/skeleton-root.css @@ -0,0 +1,210 @@ +:root { + box-sizing: border-box; +} +:root .container-main { + margin-left: auto; + margin-right: auto; + max-width: 1280px; +} +:root .panel { + margin: 8px 0; + width: 100%; +} +:root .panel > .panel { + margin: 0; +} +:root .panel > .paragraph:first-child { + margin-top: 0; +} +:root .panel > .paragraph:last-child { + margin-bottom: 0; +} +:root .panel > .title:first-child { + margin-top: 4px; +} +:root .panel > .title:last-child { + margin-bottom: 4px; +} +:root .panel-box { + padding: 8px; + border-radius: 4px; + border-width: 2px; + background-color: rgba(0, 0, 0, 0.025); +} +:root .panel-blockquote { + padding: 8px; + border-radius: 4px; + border-width: 2px; + background-color: rgba(0, 0, 0, 0.025); + border-left-width: 2px; + border-top-width: 0; + border-bottom-width: 0; + border-right-width: 0; +} +:root .panel-aside { + padding: 8px; + border-radius: 4px; + border-width: 2px; + background-color: rgba(0, 0, 0, 0.025); + border-width: 0; + font-size: smaller; +} +:root .panel-table { + padding: 8px; + border-radius: 4px; + border-width: 2px; + background-color: rgba(0, 0, 0, 0.025); + display: table; + border-spacing: 0; + border-collapse: collapse; +} +:root .panel-split { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; +} +:root .panel-split > * { + flex-grow: 1; + flex-shrink: 0; + flex-basis: 0; +} +:root .status-disabled { + cursor: not-allowed; +} +:root .status-hoverable { + cursor: help; +} +:root .status-clickable { + cursor: pointer; +} +:root .spoiler { + filter: blur(5px); + cursor: help; +} +:root .spoiler:hover { + filter: none; +} +:root .element-title { + text-align: center; +} +:root .element-separator { + border-width: 1px; +} +:root .element-list-item { + margin: 10px 0; +} +:root .align-left { + text-align: left; +} +:root .align-center { + text-align: center; +} +:root .align-right { + text-align: right; +} +:root .size-xxl { + font-size: xx-large; +} +:root .size-xl { + font-size: x-large; +} +:root .size-l { + font-size: large; +} +:root .size-m { + font-size: medium; +} +:root .size-s { + font-size: small; +} +:root .size-xs { + font-size: x-small; +} +:root .size-xxs { + font-size: xx-small; +} +:root .style-bold { + font-weight: bold; +} +:root .style-italic { + font-style: italic; +} +:root .style-underline { + text-decoration-line: underline; +} +:root .style-strike { + text-decoration-line: line-through; +} +:root .color-red { + color: red; +} +:root .color-orange { + color: orange; +} +:root .color-yellow { + color: #dddd00; +} +:root .color-lime { + color: lime; +} +:root .color-cyan { + color: cyan; +} +:root .color-blue { + color: blue; +} +:root .color-magenta { + color: magenta; +} +:root h1, +:root h2, +:root h3, +:root h4, +:root h5, +:root h6 { + text-align: center; +} +:root hr { + border-width: 1px; +} +:root h1 { + font-size: xx-large; +} +:root h2 { + font-size: x-large; +} +:root h3 { + font-size: large; +} +:root h4 { + font-size: medium; +} +:root h5 { + font-size: small; +} +:root h6 { + font-size: x-small; +} +:root b { + font-weight: bold; +} +:root i { + font-style: italic; +} +:root u { + text-decoration-line: underline; +} +:root li { + margin: 10px 0; +} +:root *[title] { + cursor: help; +} +:root *[disabled] { + cursor: not-allowed; +} +:root *[onclick] { + cursor: pointer; +} +/*# sourceMappingURL=skeleton-root.css.map */ \ No newline at end of file diff --git a/src/skeleton/skeleton-root.css.map b/src/skeleton/skeleton-root.css.map new file mode 100644 index 0000000..2174bab --- /dev/null +++ b/src/skeleton/skeleton-root.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["skeleton-root.less","skeleton.less"],"names":[],"mappings":"AAEA;ECGI,sBAAA;;ADHJ,KCSI;EACI,iBAAA;EACA,kBAAA;EACA,iBAAA;;ADZR,KCmBI;EACI,aAAA;EACA,WAAA;;ADrBR,KCmBI,OAII;EACI,SAAA;;AAKA,KAVR,OASI,aACK;EACG,aAAA;;AAGJ,KAdR,OASI,aAKK;EACG,gBAAA;;AAMJ,KArBR,OAoBI,SACK;EACG,eAAA;;AAGJ,KAzBR,OAoBI,SAKK;EACG,kBAAA;;AD7ChB,KCmDI;EACI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;;ADvDR,KC2DI;EAPI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAOA,sBAAA;EACA,mBAAA;EACA,sBAAA;EACA,qBAAA;;ADjER,KCqEI;EAjBI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAiBA,eAAA;EACA,kBAAA;;ADzER,KC6EI;EAzBI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAyBA,cAAA;EACA,iBAAA;EACA,yBAAA;;ADlFR,KCsFI;EACI,aAAA;EACA,eAAA;EACA,QAAA;EACA,uBAAA;;AD1FR,KCsFI,aAMI;EACI,YAAA;EACA,cAAA;EACA,aAAA;;AD/FZ,KCqGI;EACI,mBAAA;;ADtGR,KCyGI;EACI,YAAA;;AD1GR,KC6GI;EACI,eAAA;;AD9GR,KCmHI;EACI,QAAQ,SAAR;EACA,YAAA;;AAEA,KAJJ,SAIK;EACG,YAAA;;ADxHZ,KC8HI;EAuBI,kBAAA;;ADrJR,KCsII;EACI,iBAAA;;ADvIR,KC0II;EACI,cAAA;;AD3IR,KCgJI;EACI,gBAAA;;ADjJR,KCoJI;EACI,kBAAA;;ADrJR,KCwJI;EACI,iBAAA;;ADzJR,KC8JI;EACI,mBAAA;;AD/JR,KCkKI;EACI,kBAAA;;ADnKR,KCsKI;EACI,gBAAA;;ADvKR,KC0KI;EACI,iBAAA;;AD3KR,KC8KI;EACI,gBAAA;;AD/KR,KCkLI;EACI,kBAAA;;ADnLR,KCsLI;EACI,mBAAA;;ADvLR,KC4LI;EACI,iBAAA;;AD7LR,KCgMI;EACI,kBAAA;;ADjMR,KCoMI;EACI,+BAAA;;ADrMR,KCwMI;EACI,kCAAA;;ADzMR,KC8MI;EACI,UAAA;;AD/MR,KCkNI;EACI,aAAA;;ADnNR,KCsNI;EACI,cAAA;;ADvNR,KC0NI;EACI,WAAA;;AD3NR,KC8NI;EACI,WAAA;;AD/NR,KCkOI;EACI,WAAA;;ADnOR,KCsOI;EACI,cAAA;;ADvOR,KC4OI;AD5OJ,KC4OQ;AD5OR,KC4OY;AD5OZ,KC4OgB;AD5OhB,KC4OoB;AD5OpB,KC4OwB;EAvFhB,kBAAA;;ADrJR,KCgPI;EAzGI,iBAAA;;ADvIR,KCwPI;EAzFI,mBAAA;;AD/JR,KC4PI;EAzFI,kBAAA;;ADnKR,KCgQI;EAzFI,gBAAA;;ADvKR,KCoQI;EAzFI,iBAAA;;AD3KR,KCwQI;EAzFI,gBAAA;;AD/KR,KC4QI;EAzFI,kBAAA;;ADnLR,KCgRI;EAnFI,iBAAA;;AD7LR,KCoRI;EAnFI,kBAAA;;ADjMR,KCwRI;EAnFI,+BAAA;;ADrMR,KC4RI;EAjJI,cAAA;;AD3IR,KCgSI,EAAC;EAtLG,YAAA;;AD1GR,KCoSI,EAAC;EA9LG,mBAAA;;ADtGR,KCwSI,EAAC;EA1LG,eAAA","file":"skeleton-root.css"} \ No newline at end of file diff --git a/src/skeleton/skeleton-root.less b/src/skeleton/skeleton-root.less new file mode 100644 index 0000000..62f7937 --- /dev/null +++ b/src/skeleton/skeleton-root.less @@ -0,0 +1,5 @@ +@import "skeleton"; + +:root { + .bluelib-skeleton(); +} diff --git a/src/skeleton/skeleton.less b/src/skeleton/skeleton.less new file mode 100644 index 0000000..9bebe9e --- /dev/null +++ b/src/skeleton/skeleton.less @@ -0,0 +1,302 @@ +// This mixin should contain ONLY positioning and layout rules. +// They will be compiled later to different targets. + +.bluelib-skeleton() { + // Reset the insane box-sizing default + box-sizing: border-box; + + // === RULES === + + // --- Containers --- + + .container-main { + margin-left: auto; + margin-right: auto; + max-width: 1280px; + } + + + // --- Panels --- + // Remember to use BOTH the panel AND the panel-* class when using a panel element! + + .panel { + margin: 8px 0; + width: 100%; + + > .panel { + margin: 0; + } + + // Remove the margin from paragraphs, if they are the first or last element of the panel + > .paragraph { + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + // Reduce the margin from titles, if they are the first or last element of the panel + > .title { + &:first-child { + margin-top: 4px; + } + + &:last-child { + margin-bottom: 4px; + } + } + } + + // A generic content box + .panel-box { + padding: 8px; + border-radius: 4px; + border-width: 2px; + background-color: rgba(0, 0, 0, 0.025); // Make the panel more noticeable on a white background + } + + // Should be the same as a box, but with a quote-like border + .panel-blockquote { + .panel-box(); + + border-left-width: 2px; + border-top-width: 0; + border-bottom-width: 0; + border-right-width: 0; + } + + // Should be the same as a box, but with smaller text and no border + .panel-aside { + .panel-box(); + + border-width: 0; + font-size: smaller; + } + + // Should be the same as a box, but display its contents differently + .panel-table { + .panel-box(); + + display: table; + border-spacing: 0; + border-collapse: collapse; + } + + // Evenly split the panels contained inside + .panel-split { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; + + > * { + flex-grow: 1; + flex-shrink: 0; + flex-basis: 0; + } + } + + // --- Element status --- + + .status-disabled { + cursor: not-allowed; + } + + .status-hoverable { + cursor: help; + } + + .status-clickable { + cursor: pointer; + } + + // --- Spoilers --- + + .spoiler { + filter: blur(5px); + cursor: help; + + &:hover { + filter: none; + } + } + + // --- Elements --- + + .element-title { + .align-center(); + } + + .element-paragraph { + + } + + .element-separator { + border-width: 1px; + } + + .element-list-item { + margin: 10px 0; + } + + // --- Alignment --- + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } + + // --- Sizes --- + + .size-xxl { + font-size: xx-large; + } + + .size-xl { + font-size: x-large; + } + + .size-l { + font-size: large; + } + + .size-m { + font-size: medium; + } + + .size-s { + font-size: small; + } + + .size-xs { + font-size: x-small; + } + + .size-xxs { + font-size: xx-small; + } + + // --- Styles --- + + .style-bold { + font-weight: bold; + } + + .style-italic { + font-style: italic; + } + + .style-underline { + text-decoration-line: underline; + } + + .style-strike { + text-decoration-line: line-through; + } + + // --- Colors --- + + .color-red { + color: red; + } + + .color-orange { + color: orange; + } + + .color-yellow { + color: #dddd00; // Pure yellow isn't readable on a white background + } + + .color-lime { + color: lime; + } + + .color-cyan { + color: cyan; + } + + .color-blue { + color: blue; + } + + .color-magenta { + color: magenta; + } + + // === INHERITANCES === + + h1, h2, h3, h4, h5, h6 { + .element-title(); + } + + hr { + .element-separator(); + } + + p { + .element-paragraph(); + } + + h1 { + .size-xxl(); + } + + h2 { + .size-xl(); + } + + h3 { + .size-l(); + } + + h4 { + .size-m(); + } + + h5 { + .size-s(); + } + + h6 { + .size-xs(); + } + + b { + .style-bold(); + } + + i { + .style-italic(); + } + + u { + .style-underline(); + } + + li { + .element-list-item(); + } + + *[title] { + .status-hoverable(); + } + + *[disabled] { + .status-disabled(); + } + + *[onclick] { + .status-clickable(); + } +}