steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +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> <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
View file

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