mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
Add compiled layouts-center
ruleset
This commit is contained in:
parent
7fb6300ac2
commit
aefb9f6308
4 changed files with 66 additions and 10 deletions
36
dist/layouts-center.module.css
vendored
36
dist/layouts-center.module.css
vendored
|
@ -1,8 +1,36 @@
|
||||||
:where(.bluelib) :where(.layout-center) :where(.layout-center-background) {
|
/**
|
||||||
width: 100vw;
|
* Bluelib Layouts Center
|
||||||
height: 120vh;
|
* by <me@steffo.eu>
|
||||||
|
*/
|
||||||
|
:where(.bluelib) {
|
||||||
|
min-height: 100vh;
|
||||||
|
max-width: 1600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
:where(.bluelib):where(.layout-center) {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
:where(.bluelib):where(.layout-center) {
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 450px) {
|
||||||
|
:where(.bluelib):where(.layout-center) {
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:where(.bluelib) > :where(.layout-center-background) {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: -1;
|
z-index: -100;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 110vw;
|
||||||
|
height: 110vh;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
}
|
}
|
||||||
|
|
2
dist/layouts-center.module.min.css
vendored
2
dist/layouts-center.module.min.css
vendored
|
@ -1 +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}
|
:where(.bluelib){min-height:100vh;max-width:1600px;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}:where(.bluelib):where(.layout-center){padding:0 16px}@media screen and (max-width:900px){:where(.bluelib):where(.layout-center){padding:0 8px}}@media screen and (max-width:450px){:where(.bluelib):where(.layout-center){padding:0 4px}}:where(.bluelib)>:where(.layout-center-background){position:fixed;z-index:-100;top:0;left:0;width:110vw;height:110vh;object-fit:cover;object-position:center}
|
36
dist/layouts-center.root.css
vendored
36
dist/layouts-center.root.css
vendored
|
@ -1,8 +1,36 @@
|
||||||
:where(body) :where(.layout-center) > :where(img) {
|
/**
|
||||||
width: 100vw;
|
* Bluelib Layouts Center
|
||||||
height: 120vh;
|
* by <me@steffo.eu>
|
||||||
|
*/
|
||||||
|
:where(body) {
|
||||||
|
min-height: 100vh;
|
||||||
|
max-width: 1600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
:where(body):where(.layout-center) {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
:where(body):where(.layout-center) {
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 450px) {
|
||||||
|
:where(body):where(.layout-center) {
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:where(body) > :where(img) {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: -1;
|
z-index: -100;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 110vw;
|
||||||
|
height: 110vh;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
}
|
}
|
||||||
|
|
2
dist/layouts-center.root.min.css
vendored
2
dist/layouts-center.root.min.css
vendored
|
@ -1 +1 @@
|
||||||
:where(body) :where(.layout-center)>:where(img){width:100vw;height:120vh;position:fixed;z-index:-1;object-fit:cover;object-position:center}
|
:where(body){min-height:100vh;max-width:1600px;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}:where(body):where(.layout-center){padding:0 16px}@media screen and (max-width:900px){:where(body):where(.layout-center){padding:0 8px}}@media screen and (max-width:450px){:where(body):where(.layout-center){padding:0 4px}}:where(body)>:where(img){position:fixed;z-index:-100;top:0;left:0;width:110vw;height:110vh;object-fit:cover;object-position:center}
|
Loading…
Reference in a new issue