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 layouts-center

Browse source
This commit is contained in:
Steffo 2023-04-07 19:12:27 +02:00
parent 02fd3d37b2
commit af81044d1b
Signed by: steffo
GPG key ID: 2A24051445686895
12 changed files with 1715 additions and 1653 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
dist/layouts-center.module.css vendored Normal file
View file

@ -0,0 +1,8 @@
:where(.bluelib) :where(.layout-center) :where(.layout-center-background) {
width: 100vw;
height: 120vh;
position: fixed;
z-index: -1;
object-fit: cover;
object-position: center;
}

10
dist/layouts-center.module.less vendored Normal file
View file

@ -0,0 +1,10 @@
// Mixins
@import (less) "../src/mixins/fonts.less";
@import (less) "../src/mixins/hsl.less";
// Selector
@import (less) "../src/selectorsets/module.less";
// Rule
@import (less) "../src/rulesets/layouts/layouts-center.less";

1
dist/layouts-center.module.min.css vendored Normal file
View file

@ -0,0 +1 @@
:where(.bluelib) :where(.layout-center) :where(.layout-center-background){width:100vw;height:120vh;position:fixed;z-index:-1;object-fit:cover;object-position:center}

8
dist/layouts-center.root.css vendored Normal file
View file

@ -0,0 +1,8 @@
:where(body) :where(.layout-center) > :where(img) {
width: 100vw;
height: 120vh;
position: fixed;
z-index: -1;
object-fit: cover;
object-position: center;
}

10
dist/layouts-center.root.less vendored Normal file
View file

@ -0,0 +1,10 @@
// Mixins
@import (less) "../src/mixins/fonts.less";
@import (less) "../src/mixins/hsl.less";
// Selector
@import (less) "../src/selectorsets/root.less";
// Rule
@import (less) "../src/rulesets/layouts/layouts-center.less";

1
dist/layouts-center.root.min.css vendored Normal file
View file

@ -0,0 +1 @@
:where(body) :where(.layout-center)>:where(img){width:100vw;height:120vh;position:fixed;z-index:-1;object-fit:cover;object-position:center}

45
examples/index.css
View file

@ -1,42 +1,3 @@
#background {
width: 100vw;
height: 120vh;
position: fixed;
z-index: -1;
object-fit: cover;
object-position: center;
}
#body {
padding: 0 16px;
}
#background {
margin: 0 -16px;
}
@media screen and (max-width: 800px) {
#body {
padding: 0 8px;
}
#background {
margin: 0 -8px;
}
}
@media screen and (max-width: 400px) {
#body {
padding: 0 4px;
}
#background {
margin: 0 -4px;
}
}
#body :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel { #body :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
min-width: 360px; min-width: 360px;
} }
@ -44,9 +5,3 @@
#body .panel :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel { #body .panel :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
min-width: unset; min-width: unset;
} }
#body article {
margin: 0 auto;
max-width: 1600px;
}

20
examples/index.html
View file

@ -12,6 +12,7 @@
<meta property="og:image" content="../media/opengraph.png" /> <meta property="og:image" content="../media/opengraph.png" />
<link rel="icon" type="image/x-icon" href="../favicon.ico"> <link rel="icon" type="image/x-icon" href="../favicon.ico">
<link rel="stylesheet/less" type="text/css" href="../dist/base.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/base.root.less">
<link rel="stylesheet/less" type="text/css" href="../dist/layouts-center.root.less">
<link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less">
<link rel="stylesheet/less" type="text/css" href="../dist/colors-amber.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/colors-amber.root.less">
<link rel="stylesheet/less" type="text/css" href="../dist/colors-pixeldawn.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/colors-pixeldawn.root.less">
@ -30,13 +31,14 @@
<script src="https://cdn.jsdelivr.net/npm/less"></script> <script src="https://cdn.jsdelivr.net/npm/less"></script>
<title>Bluelib</title> <title>Bluelib</title>
</head> </head>
<body id="body" class="theme-bluelib"> <body class="theme-bluelib layout-center">
<img id="background" alt="" src="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg" style="image-rendering: pixelated;"> <img class="layout-center-background" alt="" src="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg">
<main> <header>
<article>
<h1> <h1>
Bluelib Bluelib
</h1> </h1>
</header>
<main>
<div class="chapter-1" id="chapter-welcome"> <div class="chapter-1" id="chapter-welcome">
<h2 style="margin-top: 0;"> <h2 style="margin-top: 0;">
Welcome to Bluelib! Welcome to Bluelib!
@ -205,6 +207,15 @@
<dd> <dd>
<mark>Experimental.</mark> <i>Ruleset</i> with bizzare or buggy but fun rules. <mark>Experimental.</mark> <i>Ruleset</i> with bizzare or buggy but fun rules.
</dd> </dd>
<dt>Layouts</dt>
<dd>
<dl>
<dt><label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:dist-layouts-center:root')"> Center</label></dt>
<dd>
Gives the page a background, a header at the top, a footer at the bottom, and fits the content between the two.
</dd>
</dl>
</dd>
<dt>Colors</dt> <dt>Colors</dt>
<dd> <dd>
<dl> <dl>
@ -1784,7 +1795,6 @@
</form> </form>
</section> </section>
</div> </div>
</article>
</main> </main>
<footer> <footer>
<p> <p>

3
examples/index.js
View file

@ -27,6 +27,7 @@ const enabledByDefault = [
"less:dist-base:root", "less:dist-base:root",
"less:dist-classic:root", "less:dist-classic:root",
"less:dist-glass:root", "less:dist-glass:root",
"less:dist-layouts-center:root",
"less:dist-colors-royalblue:root", "less:dist-colors-royalblue:root",
"less:dist-fonts-fira-ghpages:root", "less:dist-fonts-fira-ghpages:root",
] ]
@ -71,7 +72,7 @@ async function enableChanges() {
) )
console.debug("Found Less fonts:", lessFonts) console.debug("Found Less fonts:", lessFonts)
background = document.querySelector("#background") background = document.querySelector(".layout-center-background")
console.debug("Found background:", background) console.debug("Found background:", background)
for(const [k, v] of Object.entries(lessStyles)) { for(const [k, v] of Object.entries(lessStyles)) {

46
src/rulesets/layouts/layouts-center.less Normal file
View file

@ -0,0 +1,46 @@
/**
* Bluelib Layouts Center
* by <me@steffo.eu>
*/
@{bluelib} {
&@{layout-center} {
padding: 0 16px;
}
@media screen and (max-width: 900px) {
&@{layout-center} {
padding: 0 8px;
}
}
@media screen and (max-width: 450px) {
&@{layout-center} {
padding: 0 4px;
}
}
min-height: 100vh;
max-width: 1600px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
> @{layout-center-background} {
position: fixed;
z-index: -100;
top: 0;
left: 0;
width: 110vw;
height: 110vh;
object-fit: cover;
object-position: center;
}
}

6
src/selectorsets/module.less
View file

@ -2,6 +2,12 @@
@all: ~":where(*)"; @all: ~":where(*)";
@layout-center: ~":where(.layout-center)";
@layout-center-background: ~":where(.layout-center-background)";
@layout-center-header: ~":where(.layout-center-header)";
@layout-center-main: ~":where(.layout-center-main)";
@layout-center-footer: ~":where(.layout-center-footer)";
@page-main: ~":where(.page-main)"; @page-main: ~":where(.page-main)";
@page-aside: ~":where(.page-aside)"; @page-aside: ~":where(.page-aside)";
@page-header: ~":where(.page-header)"; @page-header: ~":where(.page-header)";

6
src/selectorsets/root.less
View file

@ -2,6 +2,12 @@
@all: ~":where(*)"; @all: ~":where(*)";
@layout-center: ~":where(.layout-center)";
@layout-center-background: ~":where(img)";
@layout-center-header: ~":where(header)";
@layout-center-main: ~":where(main)";
@layout-center-footer: ~":where(footer)";
@page-main: ~":where(main)"; @page-main: ~":where(main)";
@page-aside: ~":where(aside)"; @page-aside: ~":where(aside)";
@page-header: ~":where(header)"; @page-header: ~":where(header)";