steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-10-16 13:47:28 +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}

47
examples/index.css
View file

@ -1,52 +1,7 @@
#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 {
min-width: 360px;
}
#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;
}
#body article {
margin: 0 auto;
max-width: 1600px;
}
}

3222
examples/index.html
View file

File diff suppressed because it is too large Load diff

3
examples/index.js
View file

@ -27,6 +27,7 @@ const enabledByDefault = [
"less:dist-base:root",
"less:dist-classic:root",
"less:dist-glass:root",
"less:dist-layouts-center:root",
"less:dist-colors-royalblue:root",
"less:dist-fonts-fira-ghpages:root",
]
@ -71,7 +72,7 @@ async function enableChanges() {
)
console.debug("Found Less fonts:", lessFonts)
background = document.querySelector("#background")
background = document.querySelector(".layout-center-background")
console.debug("Found background:", background)
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(*)";
@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-aside: ~":where(.page-aside)";
@page-header: ~":where(.page-header)";

6
src/selectorsets/root.less
View file

@ -2,6 +2,12 @@
@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-aside: ~":where(aside)";
@page-header: ~":where(header)";