Hykilpikonna
138 lines
2.3 KiB
Sass
138 lines
2.3 KiB
Sass
@import colors
|
|
|
|
// Google Fonts
|
|
// TODO: Localize
|
|
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&family=Shadows+Into+Light&display=swap')
|
|
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap')
|
|
@import url('/fonts/hua/font-hua.css')
|
|
|
|
$font: "Microsoft YaHei UI", Avenir, Helvetica, Arial, sans-serif
|
|
|
|
.font-code
|
|
font-family: Inconsolata, Monaco, Monospaced, serif
|
|
|
|
.font-script-en
|
|
font-family: 'Caveat', 'Shadows Into Light', cursive
|
|
|
|
.font-script-cn
|
|
font-family: Hua, $font
|
|
|
|
.bold
|
|
font-weight: bold
|
|
|
|
// Container width (This is normally 50vw,
|
|
// but when it's smaller than 900px, use 100vw - 50px, because 50px is the margin)
|
|
$app-width: max(50vw, min(900px, 100vw - 50px))
|
|
|
|
// Remove UA body margin
|
|
body
|
|
margin: 0
|
|
|
|
// Non-selectable text
|
|
@mixin unselectable
|
|
-webkit-touch-callout: none
|
|
-webkit-user-select: none
|
|
-moz-user-select: none
|
|
-ms-user-select: none
|
|
user-select: none
|
|
|
|
.unselectable
|
|
@include unselectable
|
|
|
|
// Clickable text
|
|
.clickable:hover
|
|
cursor: pointer
|
|
@include unselectable
|
|
|
|
// Vertical flex
|
|
.fbox-v
|
|
display: flex
|
|
flex-flow: column
|
|
height: 100%
|
|
|
|
.mh0
|
|
min-height: 0
|
|
|
|
// Horizontal flex
|
|
.fbox-h
|
|
display: flex
|
|
flex-flow: row
|
|
|
|
.mw0
|
|
min-width: 0
|
|
|
|
// Flex properties
|
|
.f-no-grow
|
|
flex-grow: 0
|
|
|
|
.f-grow1
|
|
flex-grow: 1
|
|
|
|
.f-no-shrink
|
|
flex-shrink: 0
|
|
|
|
.f-shrink1
|
|
flex-shrink: 1
|
|
|
|
// Expand in the vertical direction
|
|
.f-v-expand
|
|
flex: 1 0
|
|
min-height: 0
|
|
|
|
// Expand in the horizontal direction
|
|
.f-h-expand
|
|
flex: 1 0
|
|
min-width: 0
|
|
|
|
.h100
|
|
height: 100%
|
|
|
|
.w100
|
|
width: 100%
|
|
|
|
// Vertical Flex Center
|
|
@mixin flex-vcenter
|
|
display: flex
|
|
flex-flow: column
|
|
justify-content: center
|
|
|
|
// Center both horizontally and vertically
|
|
.fbox-center
|
|
@include flex-vcenter
|
|
align-items: center
|
|
|
|
// Center vertically only
|
|
.fbox-vcenter
|
|
@include flex-vcenter
|
|
|
|
// No wrap text
|
|
.nowrap
|
|
overflow: hidden
|
|
white-space: nowrap
|
|
text-overflow: clip
|
|
|
|
.nowrap.e
|
|
text-overflow: ellipsis
|
|
|
|
*
|
|
transition: all .25s ease
|
|
|
|
#app
|
|
font-family: $font
|
|
-webkit-font-smoothing: antialiased
|
|
-moz-osx-font-smoothing: grayscale
|
|
text-align: center
|
|
color: $color-text-main
|
|
|
|
// Max width and center
|
|
max-width: 900px
|
|
margin: auto
|
|
|
|
// Vertical flex box
|
|
display: flex
|
|
flex-flow: column
|
|
height: 100vh
|
|
|
|
body
|
|
background: #f9f2e0
|