steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 03:24:20 +00:00
Code Activity

✨ Add some new features

Browse source
This commit is contained in:
Steffo 2021-01-16 16:44:24 +01:00
parent c7219aba6f
commit bca49f1309
Signed by: steffo
GPG key ID: 6965406171929D01
2 changed files with 95 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
index.html
View file

@ -7,7 +7,7 @@
<title>Bluelib 2</title>
</head>
<body class="theme-bluelib">
<main>
<main class="main">
<hgroup>
<h1>
Bluelib 2
@ -164,6 +164,32 @@
</section>
</div>
</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">
<h3>
Horizonal rows
@ -225,6 +251,22 @@
<div class="align-center">Center</div>
<div class="align-right">Right</div>
</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>
<h2>

57
skeleton.css vendored
View file

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