96 lines
2.6 KiB
Stylus
96 lines
2.6 KiB
Stylus
body
|
|
font-family : FONT_FAMILY
|
|
font-size : FONT_SIZE
|
|
color : COLOR
|
|
background-color : BACKGROUND
|
|
|
|
a
|
|
color : WHITE
|
|
h1
|
|
font-size : (1.75 * FONT_SIZE_NORMAL)
|
|
h2
|
|
font-size : (1.5 * FONT_SIZE_NORMAL)
|
|
|
|
.scroll
|
|
overflow-x : hidden
|
|
overflow-y : scroll
|
|
-webkit-overflow-scrolling: touch
|
|
|
|
.type-01 /*stay*/
|
|
background : url("/assets/img/bear.png") no-repeat
|
|
.type-02 /*drink*/
|
|
background : url("/assets/img/dog.png") no-repeat
|
|
.type-03 /*eat*/
|
|
background : url("/assets/img/pig.png") no-repeat
|
|
.type-04 /*listen*/
|
|
background : url("/assets/img/rabbit.png") no-repeat
|
|
.type-05 /*see*/
|
|
background : url("/assets/img/raccoon.png") no-repeat
|
|
|
|
// -- ANIMATIONS ---------------------------------------------------------------
|
|
@keyframes LOADING
|
|
0%
|
|
transform scale(0.0)
|
|
100%
|
|
transform scale(1.0)
|
|
opacity: 0.1
|
|
|
|
// -- FLEX ---------------------------------------------------------------------
|
|
[data-flex]
|
|
display-flex()
|
|
body&
|
|
position : absolute
|
|
left : 0
|
|
top : 0
|
|
bottom : 0
|
|
width : 100%
|
|
overflow : hidden
|
|
|
|
// -- Direction
|
|
[data-flex^="horizontal"]
|
|
flex-direction row
|
|
[data-flex^="vertical"]
|
|
flex-direction column
|
|
|
|
// -- Size
|
|
[data-flex*="grow"]
|
|
> *:not([data-column]):not([data-flex-grow])
|
|
flex-grow 1
|
|
[data-flex-grow="min"]
|
|
flex-grow 0
|
|
[data-flex-grow="max"]
|
|
flex-grow 2
|
|
|
|
// -- Container properties
|
|
[data-flex*="wrap"]
|
|
flex-wrap wrap
|
|
[data-flex*="center"]
|
|
justify-content center
|
|
align-content center
|
|
align-items center
|
|
[data-flex-justify="start"]
|
|
justify-content flex-start
|
|
[data-flex-justify="center"]
|
|
justify-content center
|
|
[data-flex-justify="end"]
|
|
justify-content flex-end
|
|
[data-flex-content="start"]
|
|
align-content flex-start
|
|
[data-flex-content="center"]
|
|
align-content center
|
|
[data-flex-content="end"]
|
|
align-content flex-end
|
|
[data-flex-items="center"]
|
|
align-items center
|
|
[data-flex-items="start"]
|
|
align-items flex-start
|
|
[data-flex-items="end"]
|
|
align-items flex-end
|
|
|
|
// -- Children properties
|
|
[data-flex-order="first"]
|
|
order: -1
|
|
|
|
[data-flex-order="last"]
|
|
order: 999999
|