222 lines
3.9 KiB
Sass
222 lines
3.9 KiB
Sass
@use "colors"
|
|
@use "font"
|
|
|
|
// 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=Inconsolata&display=swap')
|
|
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap')
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap')
|
|
|
|
html
|
|
--font-fallback: "Noto Sans SC", Avenir, Helvetica, Arial, sans-serif
|
|
@extend .font-custom
|
|
|
|
.font-code
|
|
font-family: Inconsolata, Monaco, Monospaced, serif
|
|
|
|
.font-script-en
|
|
font-family: 'Caveat', 'Shadows Into Light', cursive
|
|
|
|
.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, .ui-accordion-header: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
|
|
|
|
#app
|
|
-webkit-font-smoothing: antialiased
|
|
-moz-osx-font-smoothing: grayscale
|
|
text-align: center
|
|
color: colors.$color-text-main
|
|
|
|
// Max width and center
|
|
max-width: 900px
|
|
margin: auto
|
|
|
|
// Vertical flex box
|
|
display: flex
|
|
flex-flow: column
|
|
height: 100%
|
|
|
|
// Make images not draggable
|
|
img
|
|
user-drag: none
|
|
-webkit-user-drag: none
|
|
|
|
user-select: none
|
|
-moz-user-select: none
|
|
-webkit-user-select: none
|
|
-ms-user-select: none
|
|
|
|
// Make 100% refer to 100vh and vw
|
|
body
|
|
background: #f9f2e0
|
|
height: 100%
|
|
overscroll-behavior-y: none
|
|
|
|
html
|
|
height: 100%
|
|
|
|
.vc-hue-slider__bar
|
|
background: linear-gradient(to right, red 0%, yellow 16.66%, lime 33.33%, aqua 50%,blue 66.66%,fuchsia 83.33%,red 100%)
|
|
|
|
|
|
.card
|
|
width: 100%
|
|
background: #fdf9f1
|
|
border-radius: 20px
|
|
margin-bottom: 20px
|
|
padding: 15px 20px
|
|
overflow: auto
|
|
overflow-x: hidden
|
|
box-sizing: border-box
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%)
|
|
|
|
// Markdown style
|
|
.markdown-content
|
|
text-align: justify
|
|
text-justify: inter-word
|
|
|
|
a
|
|
color: colors.$color-text-special
|
|
text-decoration: none
|
|
|
|
h1, h2
|
|
border-bottom: 1px solid colors.$color-text-special
|
|
font-size: 1.5em
|
|
margin-top: 1em
|
|
|
|
line-height: 1.3
|
|
margin-bottom: 0.25em
|
|
padding: 0
|
|
|
|
h2
|
|
font-size: 1.3em
|
|
|
|
h3
|
|
font-size: 1.2em
|
|
|
|
p
|
|
font-size: 1em
|
|
margin: 0.7em 0
|
|
line-height: 1.6
|
|
|
|
p:last-child
|
|
margin-bottom: 0
|
|
|
|
li
|
|
font-size: 1em
|
|
margin-bottom: 0.25em
|
|
|
|
figure
|
|
margin: 0
|
|
|
|
img
|
|
width: calc(100% + 20px)
|
|
margin-left: -10px
|
|
margin-right: -10px
|
|
border-radius: 10px
|
|
object-fit: cover
|
|
max-height: 500px
|
|
|
|
caption
|
|
display: flex
|
|
width: 100%
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
font-size: 0.8em
|
|
color: colors.$color-text-light
|