From bca49f1309c11909c85846da012f806119bdb387 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Sat, 16 Jan 2021 16:44:24 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20some=20new=20features?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 44 +++++++++++++++++++++++++++++++++++++++- skeleton.css | 57 +++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 95 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 0e7390c..7849717 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ Bluelib 2 -
+

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; }