Bluelib 2
@@ -164,6 +164,32 @@
+
+
+ Limiting panels
+
+
+ Panels can be limited to force them to stay under 420px in width.
+
+
+
+
+
+ Split limited panels
+
+
+ This applies to panels inside a splitter too!
+
+
+
+
+ Autocenter
+
+
+ The splitter will try to keep the limited panels centered.
+
+
+
Horizonal rows
@@ -225,6 +251,22 @@
Center
Right
+
+
+ Spoilers
+
+
+ You can define spoilers.
+
+
+
+ Spoiler panels
+
+
+ Entire panels can be spoilered too!
+
+
+
diff --git a/skeleton.css b/skeleton.css
index 0c58124..dbf546a 100644
--- a/skeleton.css
+++ b/skeleton.css
@@ -24,7 +24,8 @@
/* --- Main container --- */
-main {
+main,
+.main {
margin-left: auto;
margin-right: auto;
max-width: 1280px;
@@ -37,9 +38,10 @@ main {
flex-wrap: wrap;
gap: 8px;
margin: 8px 0;
+ justify-content: center;
}
-.splitted {
+.splitted { /* Yes I know split is irregular, but it allows to disambiguate better between splitter and split */
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
@@ -136,12 +138,22 @@ i,
color: magenta;
}
-/* --- Code blocks --- */
+/* --- Text mode --- */
+pre, code, kbd,
.monospace {
font-family: monospace;
}
+.spoiler {
+ filter: blur(5px);
+ cursor: help;
+}
+
+.spoiler:hover {
+ filter: none;
+}
+
/* --- Containers --- */
.panel {
@@ -154,7 +166,7 @@ i,
}
/* Dirty hack to have uniform margins */
-.splitter .panel, .panel .panel, .panel .splitter {
+.splitter > .panel, .panel > .panel, .panel > .splitter {
margin: 0;
}
@@ -168,6 +180,28 @@ i,
margin-bottom: 0;
}
+.no-margin-vertical {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.no-margin-left {
+ margin-left: 0;
+}
+
+.no-margin-right {
+ margin-right: 0;
+}
+
+.no-margin-horizontal {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+.no-margin-all {
+ margin: 0;
+}
+
.panel h1:first-child, /* Add a slight margin to the first title of a panel */
.panel h2:first-child, /* */
.panel h3:first-child, /* */
@@ -219,6 +253,18 @@ th, td,
border-width: 1px;
}
+/* Limited panels */
+.limited {
+ max-width: 420px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+img.limited {
+ max-width: 420px;
+ max-height: 420px;
+}
+
/* --- Separators --- */
hr,
@@ -234,7 +280,8 @@ li,
}
/* --- Misc --- */
-abbr[title],
+
+*[title],
.with-title-text {
cursor: help;
}
+ Limiting panels +
++ Panels can be limited to force them to stay under 420px in width. +
++ Split limited panels +
++ This applies to panels inside a splitter too! +
++ Autocenter +
++ The splitter will try to keep the limited panels centered. +
+
Horizonal rows
@@ -225,6 +251,22 @@
Center
Right
+ Spoilers +
++ You can define spoilers. +
++ Spoiler panels +
++ Entire panels can be spoilered too! +
+