mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 19:44:21 +00:00
✨ Add some new features
This commit is contained in:
parent
c7219aba6f
commit
bca49f1309
GPG key ID:
6965406171929D01
2 changed files with 95 additions and 6 deletions
44
index.html
44
index.html
|
|
@ -7,7 +7,7 @@
|
||||||
<title>Bluelib 2</title>
|
<title>Bluelib 2</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-bluelib">
|
<body class="theme-bluelib">
|
||||||
<main>
|
<main class="main">
|
||||||
<hgroup>
|
<hgroup>
|
||||||
<h1>
|
<h1>
|
||||||
Bluelib 2
|
Bluelib 2
|
||||||
|
|
@ -164,6 +164,32 @@
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="limited panel">
|
||||||
|
<h3>
|
||||||
|
Limiting panels
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Panels can be limited to force them to stay under 420px in width.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<div class="splitter">
|
||||||
|
<section class="splitted limited panel">
|
||||||
|
<h3>
|
||||||
|
Split limited panels
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
This applies to panels inside a splitter too!
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section class="splitted limited panel">
|
||||||
|
<h3>
|
||||||
|
Autocenter
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
The splitter will try to keep the limited panels centered.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
<section class="panel">
|
<section class="panel">
|
||||||
<h3>
|
<h3>
|
||||||
Horizonal rows
|
Horizonal rows
|
||||||
|
|
@ -225,6 +251,22 @@
|
||||||
<div class="align-center">Center</div>
|
<div class="align-center">Center</div>
|
||||||
<div class="align-right">Right</div>
|
<div class="align-right">Right</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="splitted panel">
|
||||||
|
<h3>
|
||||||
|
Spoilers
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
You can define <span class="spoiler">spoilers</span>.
|
||||||
|
</p>
|
||||||
|
<section class="splitted spoiler panel">
|
||||||
|
<h3>
|
||||||
|
Spoiler panels
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Entire panels can be spoilered too!
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<h2>
|
<h2>
|
||||||
|
|
||||||
|
|
|
||||||
57
skeleton.css
vendored
57
skeleton.css
vendored
|
|
@ -24,7 +24,8 @@
|
||||||
|
|
||||||
/* --- Main container --- */
|
/* --- Main container --- */
|
||||||
|
|
||||||
main {
|
main,
|
||||||
|
.main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
max-width: 1280px;
|
max-width: 1280px;
|
||||||
|
|
@ -37,9 +38,10 @@ main {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin: 8px 0;
|
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-grow: 1;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
|
|
@ -136,12 +138,22 @@ i,
|
||||||
color: magenta;
|
color: magenta;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Code blocks --- */
|
/* --- Text mode --- */
|
||||||
|
|
||||||
|
pre, code, kbd,
|
||||||
.monospace {
|
.monospace {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.spoiler {
|
||||||
|
filter: blur(5px);
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler:hover {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* --- Containers --- */
|
/* --- Containers --- */
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
|
|
@ -154,7 +166,7 @@ i,
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dirty hack to have uniform margins */
|
/* Dirty hack to have uniform margins */
|
||||||
.splitter .panel, .panel .panel, .panel .splitter {
|
.splitter > .panel, .panel > .panel, .panel > .splitter {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -168,6 +180,28 @@ i,
|
||||||
margin-bottom: 0;
|
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 h1:first-child, /* Add a slight margin to the first title of a panel */
|
||||||
.panel h2:first-child, /* */
|
.panel h2:first-child, /* */
|
||||||
.panel h3:first-child, /* */
|
.panel h3:first-child, /* */
|
||||||
|
|
@ -219,6 +253,18 @@ th, td,
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Limited panels */
|
||||||
|
.limited {
|
||||||
|
max-width: 420px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.limited {
|
||||||
|
max-width: 420px;
|
||||||
|
max-height: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
/* --- Separators --- */
|
/* --- Separators --- */
|
||||||
|
|
||||||
hr,
|
hr,
|
||||||
|
|
@ -234,7 +280,8 @@ li,
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Misc --- */
|
/* --- Misc --- */
|
||||||
abbr[title],
|
|
||||||
|
*[title],
|
||||||
.with-title-text {
|
.with-title-text {
|
||||||
cursor: help;
|
cursor: help;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue