mirror of
https://github.com/explosion/spaCy.git
synced 2024-12-25 17:36:30 +03:00
Update CSS
This commit is contained in:
ines
parent
8902df44de
commit
3e1b971b16
|
|
@ -19,3 +19,10 @@
|
|||
|
||||
to
|
||||
transform: translate3d(0, 0, 0)
|
||||
|
||||
|
||||
//- Element rotates
|
||||
|
||||
@keyframes rotate
|
||||
to
|
||||
transform: rotate(360deg)
|
||||
|
|
|
|||
|
|
@ -1,41 +1,27 @@
|
|||
//- 💫 CSS > BASE > FONTS
|
||||
|
||||
// Source Sans Pro
|
||||
// HK Grotesk
|
||||
|
||||
@font-face
|
||||
font-family: "Source Sans Pro"
|
||||
font-family: "HK Grotesk"
|
||||
font-style: normal
|
||||
font-weight: 400
|
||||
src: url("/assets/fonts/sourcesanspro-regular.eot")
|
||||
src: url("/assets/fonts/sourcesanspro-regular.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/sourcesanspro-regular.woff2") format("woff2"), url("/assets/fonts/sourcesanspro-regular.woff") format("woff"), url("/assets/fonts/sourcesanspro-regular.ttf") format("truetype"), url("/assets/fonts/sourcesanspro-regular.svg#source_sans_proregular") format("svg")
|
||||
font-weight: 500
|
||||
src: url("/assets/fonts/hkgrotesk-semibold.woff2") format("woff2"), url("/assets/fonts/hkgrotesk-semibold.woff") format("woff")
|
||||
|
||||
@font-face
|
||||
font-family: "Source Sans Pro"
|
||||
font-family: "HK Grotesk"
|
||||
font-style: italic
|
||||
font-weight: 400
|
||||
src: url("/assets/fonts/sourcesanspro-italic.eot")
|
||||
src: url("/assets/fonts/sourcesanspro-italic.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/sourcesanspro-italic.woff2") format("woff2"), url("/assets/fonts/sourcesanspro-italic.woff") format("woff"), url("/assets/fonts/sourcesanspro-italic.ttf") format("truetype"), url("/assets/fonts/sourcesanspro-italic.svg#source_sans_proitalic") format("svg")
|
||||
font-weight: 500
|
||||
src: url("/assets/fonts/hkgrotesk-semibolditalic.woff2") format("woff2"), url("/assets/fonts/hkgrotesk-semibolditalic.woff") format("woff")
|
||||
|
||||
@font-face
|
||||
font-family: "Source Sans Pro"
|
||||
font-style: normal
|
||||
font-weight: 700
|
||||
src: url("/assets/fonts/sourcesanspro-bold.eot")
|
||||
src: url("/assets/fonts/sourcesanspro-bold.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/sourcesanspro-bold.woff2") format("woff2"), url("/assets/fonts/sourcesanspro-bold.woff") format("woff"), url("/assets/fonts/sourcesanspro-bold.ttf") format("truetype"), url("/assets/fonts/sourcesanspro-bold.svg#source_sans_probold") format("svg")
|
||||
|
||||
@font-face
|
||||
font-family: "Source Sans Pro"
|
||||
font-style: italic
|
||||
font-weight: 700
|
||||
src: url("/assets/fonts/sourcesanspro-bolditalic.eot")
|
||||
src: url("/assets/fonts/sourcesanspro-bolditalic.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/sourcesanspro-bolditalic.woff2") format("woff2"), url("/assets/fonts/sourcesanspro-bolditalic.woff") format("woff"), url("/assets/fonts/sourcesanspro-bolditalic.ttf") format("truetype"), url("/assets/fonts/sourcesanspro-bolditalic.svg#source_sans_probold_italic") format("svg")
|
||||
|
||||
|
||||
// Source Code Pro
|
||||
|
||||
@font-face
|
||||
font-family: "Source Code Pro"
|
||||
font-family: "HK Grotesk"
|
||||
font-style: normal
|
||||
font-weight: 600
|
||||
src: url("/assets/fonts/sourcecodepro-semibold.eot")
|
||||
src: url("/assets/fonts/sourcecodepro-semibold.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/sourcecodepro-semibold.woff") format("woff"), url("/assets/fonts/sourcecodepro-semibold.ttf") format("truetype"), url("/assets/fonts/sourcecodepro-semibold.svg#sourcecodepro_semibold") format("svg")
|
||||
src: url("/assets/fonts/hkgrotesk-bold.woff2") format("woff2"), url("/assets/fonts/hkgrotesk-bold.woff") format("woff")
|
||||
|
||||
@font-face
|
||||
font-family: "HK Grotesk"
|
||||
font-style: italic
|
||||
font-weight: 600
|
||||
src: url("/assets/fonts/hkgrotesk-bolditalic.woff2") format("woff2"), url("/assets/fonts/hkgrotesk-bolditalic.woff") format("woff")
|
||||
|
|
|
|||
|
|
@ -15,6 +15,15 @@
|
|||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
&.o-grid--vcenter
|
||||
align-items: center
|
||||
|
||||
&.o-grid--space
|
||||
justify-content: space-between
|
||||
|
||||
&.o-grid--nowrap
|
||||
flex-wrap: nowrap
|
||||
|
||||
|
||||
//- Grid column
|
||||
|
||||
|
|
@ -22,7 +31,6 @@
|
|||
$grid-gutter: 2rem
|
||||
|
||||
margin-top: $grid-gutter
|
||||
overflow: hidden
|
||||
|
||||
@include breakpoint(min, lg)
|
||||
display: flex
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ body
|
|||
animation: fadeIn 0.25s ease
|
||||
background: $color-back
|
||||
color: $color-front
|
||||
//scroll-behavior: smooth
|
||||
|
||||
|
||||
//- Paragraphs
|
||||
|
|
@ -19,6 +20,9 @@ body
|
|||
p
|
||||
@extend .o-block, .u-text
|
||||
|
||||
p:empty
|
||||
margin-bottom: 0
|
||||
|
||||
|
||||
//- Links
|
||||
|
||||
|
|
|
|||
|
|
@ -43,12 +43,25 @@
|
|||
position: relative
|
||||
padding: 2.5rem 0
|
||||
overflow: auto
|
||||
background: $color-subtle-light
|
||||
|
||||
.o-main &
|
||||
border-top-left-radius: $border-radius
|
||||
|
||||
|
||||
//- Blocks
|
||||
|
||||
.o-section
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
|
||||
&:not(:last-child)
|
||||
margin-bottom: 7rem
|
||||
padding-bottom: 4rem
|
||||
border-bottom: 1px dotted $color-subtle
|
||||
|
||||
.o-block
|
||||
margin-bottom: 3rem
|
||||
margin-bottom: 4rem
|
||||
|
||||
.o-block-small
|
||||
margin-bottom: 2rem
|
||||
|
|
@ -58,17 +71,18 @@
|
|||
|
||||
.o-card
|
||||
background: $color-back
|
||||
border-radius: 2px
|
||||
border: 1px solid $color-subtle
|
||||
padding: 3rem 2.5%
|
||||
|
||||
border-radius: $border-radius
|
||||
box-shadow: $box-shadow
|
||||
|
||||
//- Box
|
||||
|
||||
.o-box
|
||||
background: $color-theme-light
|
||||
background: $color-subtle-light
|
||||
padding: 2rem
|
||||
border-left: 4px solid $color-theme
|
||||
border-radius: $border-radius
|
||||
|
||||
.o-box__logos
|
||||
padding-bottom: 1rem
|
||||
|
||||
|
||||
//- Icons
|
||||
|
|
@ -77,7 +91,14 @@
|
|||
vertical-align: middle
|
||||
|
||||
&.o-icon--inline
|
||||
margin: 0 0.5rem 0 0.25rem
|
||||
margin: 0 0.5rem 0 0.1rem
|
||||
|
||||
.o-emoji
|
||||
margin-right: 0.75rem
|
||||
vertical-align: text-bottom
|
||||
|
||||
.o-badge
|
||||
border-radius: 1em
|
||||
|
||||
|
||||
//- SVG
|
||||
|
|
@ -102,3 +123,45 @@
|
|||
fill: currentColor
|
||||
vertical-align: middle
|
||||
margin: 0 0.5rem
|
||||
|
||||
|
||||
//- Embeds
|
||||
|
||||
.o-chart
|
||||
max-width: 100%
|
||||
|
||||
.cp_embed_iframe
|
||||
border: 1px solid $color-subtle
|
||||
border-radius: $border-radius
|
||||
|
||||
|
||||
//- Form fields
|
||||
|
||||
.o-field
|
||||
background: $color-back
|
||||
padding: 0 0.25em
|
||||
border-radius: 2em
|
||||
border: 1px solid $color-subtle
|
||||
margin-bottom: 0.25rem
|
||||
|
||||
.o-field__input,
|
||||
.o-field__button
|
||||
padding: 0 0.35em
|
||||
|
||||
.o-field__input
|
||||
width: 100%
|
||||
|
||||
.o-field__select
|
||||
background: transparent
|
||||
color: $color-dark
|
||||
height: 1.4em
|
||||
border: none
|
||||
text-align-last: center
|
||||
|
||||
.o-empty:empty:before
|
||||
@include size(1em)
|
||||
border-radius: 50%
|
||||
content: ""
|
||||
display: inline-block
|
||||
background: $color-red
|
||||
vertical-align: middle
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
//- 💫 CSS > BASE > RESET
|
||||
|
||||
*
|
||||
*, *:before, *:after
|
||||
box-sizing: border-box
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
|
@ -94,7 +94,10 @@ ul, ol
|
|||
|
||||
input, button
|
||||
appearance: none
|
||||
background: transparent
|
||||
|
||||
button
|
||||
background: transparent
|
||||
cursor: pointer
|
||||
|
||||
progress
|
||||
appearance: none
|
||||
|
|
|
|||
|
|
@ -2,38 +2,53 @@
|
|||
|
||||
//- Text
|
||||
|
||||
.u-text,
|
||||
.u-text-small,
|
||||
.u-text-tiny
|
||||
font-family: $font-primary
|
||||
|
||||
.u-text
|
||||
font: 1.5rem/#{1.55} $font-primary
|
||||
font-size: 1.35rem
|
||||
line-height: 1.5
|
||||
|
||||
.u-text-small
|
||||
font: 1.4rem/#{1.375} $font-primary
|
||||
font-size: 1.3rem
|
||||
line-height: 1.375
|
||||
|
||||
.u-text-tiny
|
||||
font: 1.1rem/#{1.375} $font-primary
|
||||
|
||||
font-size: 1.1rem
|
||||
line-height: 1.375
|
||||
|
||||
//- Labels & Tags
|
||||
|
||||
.u-text-label
|
||||
font: normal 600 1.4rem/#{1.5} $font-code
|
||||
font: normal 600 1.4rem/#{1.5} $font-secondary
|
||||
text-transform: uppercase
|
||||
|
||||
&.u-text-label--light,
|
||||
&.u-text-label--dark
|
||||
display: inline-block
|
||||
border-radius: 1em
|
||||
padding: 0 1rem 0.15rem
|
||||
|
||||
&.u-text-label--dark
|
||||
background: $color-dark
|
||||
box-shadow: inset 1px 1px 1px rgba($color-front, 0.25)
|
||||
color: $color-back
|
||||
padding: 0 0.75rem
|
||||
margin: 1.5rem 0 0 2rem
|
||||
border-radius: 2px
|
||||
|
||||
&.u-text-label--light
|
||||
background: $color-back
|
||||
color: $color-theme
|
||||
margin-bottom: 1rem
|
||||
|
||||
.u-text-tag
|
||||
display: inline-block
|
||||
font: 600 1.1rem/#{1} $font-code
|
||||
font: 600 1.1rem/#{1} $font-secondary
|
||||
background: $color-theme
|
||||
color: $color-back
|
||||
padding: 0.15em 0.25em
|
||||
border-radius: 2px
|
||||
padding: 0.15em 0.5em 0.35em
|
||||
border-radius: 1em
|
||||
text-transform: uppercase
|
||||
vertical-align: middle
|
||||
|
||||
|
|
@ -45,7 +60,7 @@
|
|||
//- Headings
|
||||
|
||||
.u-heading
|
||||
margin-bottom: 2rem
|
||||
margin-bottom: 1em
|
||||
|
||||
@include breakpoint(max, md)
|
||||
word-wrap: break-word
|
||||
|
|
@ -53,12 +68,29 @@
|
|||
&:not(:first-child)
|
||||
padding-top: 3.5rem
|
||||
|
||||
&.u-heading--title:after
|
||||
content: ""
|
||||
display: block
|
||||
width: 10%
|
||||
min-width: 6rem
|
||||
height: 6px
|
||||
background: $color-theme
|
||||
margin-top: 3rem
|
||||
|
||||
.u-heading-0
|
||||
font: normal bold 7rem/#{1} $font-primary
|
||||
font: normal 600 7rem/#{1} $font-secondary
|
||||
|
||||
@include breakpoint(max, sm)
|
||||
font-size: 6rem
|
||||
|
||||
|
||||
@each $level, $size in $headings
|
||||
.u-heading-#{$level}
|
||||
font: normal bold #{$size}rem/#{1.25} $font-primary
|
||||
font: normal 500 #{$size}rem/#{1.1} $font-secondary
|
||||
|
||||
.u-heading__teaser
|
||||
margin-top: 2rem
|
||||
font-weight: normal
|
||||
|
||||
|
||||
//- Links
|
||||
|
|
@ -66,31 +98,59 @@
|
|||
.u-link
|
||||
color: $color-theme
|
||||
border-bottom: 1px solid
|
||||
transition: color 0.2s ease
|
||||
|
||||
&:hover
|
||||
color: $color-theme-dark
|
||||
|
||||
.u-hide-link.u-hide-link
|
||||
border: none
|
||||
color: inherit
|
||||
|
||||
&:hover
|
||||
color: inherit
|
||||
|
||||
.u-permalink
|
||||
position: relative
|
||||
|
||||
&:before
|
||||
content: "\00b6"
|
||||
font-size: 0.9em
|
||||
font-weight: normal
|
||||
color: $color-subtle
|
||||
@include position(absolute, top, left, 0.15em, -2.85rem)
|
||||
opacity: 0
|
||||
transition: opacity 0.2s ease
|
||||
|
||||
&:hover:before
|
||||
opacity: 1
|
||||
|
||||
&:active:before
|
||||
color: $color-theme
|
||||
|
||||
&:target
|
||||
display: inline-block
|
||||
padding-top: $nav-height * 1.25
|
||||
|
||||
& + *
|
||||
margin-top: $nav-height * 1.25
|
||||
&:before
|
||||
bottom: 0.15em
|
||||
top: initial
|
||||
|
||||
.u-permalink__icon
|
||||
@include position(absolute, bottom, left, 0.35em, -2.75rem)
|
||||
@include size(1.5rem)
|
||||
color: $color-subtle
|
||||
|
||||
.u-permalink:hover &
|
||||
color: $color-subtle-dark
|
||||
[id]:target
|
||||
padding-top: $nav-height * 1.25
|
||||
|
||||
.u-permalink:active &
|
||||
color: $color-theme
|
||||
|
||||
|
||||
//- Layout
|
||||
|
||||
.u-float-left
|
||||
float: left
|
||||
margin-right: 1rem
|
||||
|
||||
.u-float-right
|
||||
float: right
|
||||
margin-left: 1rem
|
||||
|
||||
.u-text-center
|
||||
text-align: center
|
||||
|
||||
|
|
@ -104,14 +164,20 @@
|
|||
padding: 0.5em 0.75em
|
||||
|
||||
.u-padding-medium
|
||||
padding: 2.5rem
|
||||
padding: 1.8rem
|
||||
|
||||
.u-inline-block
|
||||
display: inline-block
|
||||
|
||||
.u-flex-full
|
||||
flex: 1
|
||||
|
||||
.u-nowrap
|
||||
white-space: nowrap
|
||||
|
||||
.u-wrap
|
||||
white-space: pre-wrap
|
||||
|
||||
.u-break.u-break
|
||||
word-wrap: break-word
|
||||
white-space: initial
|
||||
|
|
@ -123,13 +189,10 @@
|
|||
border: 1px solid $color-subtle
|
||||
border-radius: 2px
|
||||
|
||||
.u-border-bottom
|
||||
border: 1px solid $color-subtle
|
||||
|
||||
.u-border-dotted
|
||||
border-top: 1px dotted $color-subtle
|
||||
border-bottom: 1px dotted $color-subtle
|
||||
|
||||
@each $name, $color in (theme: $color-theme, subtle: $color-subtle-dark, light: $color-back, red: $color-red, green: $color-green, yellow: $color-yellow)
|
||||
@each $name, $color in (theme: $color-theme, dark: $color-dark, subtle: $color-subtle-dark, light: $color-back, red: $color-red, green: $color-green, yellow: $color-yellow)
|
||||
.u-color-#{$name}
|
||||
color: $color
|
||||
|
||||
|
|
@ -145,6 +208,32 @@
|
|||
background: $pattern
|
||||
|
||||
|
||||
//- Loaders
|
||||
|
||||
.u-loading,
|
||||
[data-loading]
|
||||
$spinner-size: 75px
|
||||
$spinner-bar: 8px
|
||||
|
||||
position: relative
|
||||
|
||||
& > *
|
||||
opacity: 0.35
|
||||
|
||||
&:before
|
||||
@include position(absolute, top, left, 0, 0)
|
||||
@include size($spinner-size)
|
||||
right: 0
|
||||
bottom: 0
|
||||
margin: auto
|
||||
content: ""
|
||||
border: $spinner-bar solid $color-subtle
|
||||
border-right: $spinner-bar solid $color-theme
|
||||
border-radius: 50%
|
||||
animation: rotate 1s linear infinite
|
||||
z-index: 10
|
||||
|
||||
|
||||
//- Hidden elements
|
||||
|
||||
.u-hidden
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@
|
|||
|
||||
.c-aside__content
|
||||
background: $color-front
|
||||
border-top-left-radius: $border-radius
|
||||
border-bottom-left-radius: $border-radius
|
||||
z-index: 10
|
||||
|
||||
@include breakpoint(min, md)
|
||||
|
|
@ -21,12 +23,12 @@
|
|||
&:after
|
||||
$triangle-size: 2rem
|
||||
|
||||
@include position(absolute, bottom, left, -$triangle-size / 2, 0)
|
||||
@include position(absolute, bottom, left, -$triangle-size / 2, $border-radius / 2)
|
||||
@include size(0)
|
||||
border-color: transparent
|
||||
border-style: solid
|
||||
border-top-color: $color-dark
|
||||
border-width: $triangle-size / 2 0 0 $triangle-size
|
||||
border-width: $triangle-size / 2 0 0 calc(#{$triangle-size} - #{$border-radius / 2})
|
||||
content: ""
|
||||
|
||||
@include breakpoint(max, sm)
|
||||
|
|
|
|||
|
|
@ -3,23 +3,50 @@
|
|||
.c-button
|
||||
display: inline-block
|
||||
font-weight: bold
|
||||
padding: 0.75em 1em
|
||||
padding: 0.8em 1.1em 1em
|
||||
margin-bottom: 1px
|
||||
border: 2px solid
|
||||
border-radius: 2px
|
||||
border: 2px solid $color-theme
|
||||
border-radius: 2em
|
||||
text-align: center
|
||||
transition: background 0.25s ease
|
||||
transition: background-color, color 0.25s ease
|
||||
|
||||
&:hover
|
||||
border-color: $color-theme-dark
|
||||
|
||||
&.c-button--small
|
||||
font-size: 1.1rem
|
||||
padding: 0.65rem 1.1rem 0.825rem
|
||||
|
||||
&.c-button--primary
|
||||
background: $color-theme
|
||||
color: $color-back
|
||||
border-color: $color-theme
|
||||
|
||||
&:hover
|
||||
background: $color-theme-dark
|
||||
border-color: $color-theme-dark
|
||||
|
||||
&.c-button--secondary
|
||||
background: $color-back
|
||||
color: $color-theme
|
||||
border-color: $color-theme
|
||||
|
||||
&:hover
|
||||
color: $color-theme-dark
|
||||
|
||||
&.c-button--secondary-light
|
||||
background: transparent
|
||||
color: $color-back
|
||||
border-color: $color-back
|
||||
|
||||
.c-icon-button
|
||||
@include size(35px)
|
||||
background: $color-subtle-light
|
||||
color: $color-subtle-dark
|
||||
border-radius: 50%
|
||||
padding: 0.5rem
|
||||
transition: color 0.2s ease
|
||||
|
||||
&:hover
|
||||
color: $color-theme
|
||||
|
||||
&.c-icon-button--right
|
||||
float: right
|
||||
margin-left: 3rem
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@
|
|||
transform: translateX(110%)
|
||||
|
||||
&:before
|
||||
@include position(absolute, top, left, 1rem, 2rem)
|
||||
@include position(absolute, top, left, 1.25rem, 2rem)
|
||||
content: attr(data-title)
|
||||
font: bold 1.4rem $font-code
|
||||
font: bold 1.4rem $font-secondary
|
||||
text-transform: uppercase
|
||||
color: $color-back
|
||||
|
||||
|
|
@ -88,13 +88,18 @@
|
|||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTguOTg0IDYuNDIybC01LjU3OCA1LjU3OCA1LjU3OCA1LjU3OC0xLjQwNiAxLjQwNi01LjU3OC01LjU3OC01LjU3OCA1LjU3OC0xLjQwNi0xLjQwNiA1LjU3OC01LjU3OC01LjU3OC01LjU3OCAxLjQwNi0xLjQwNiA1LjU3OCA1LjU3OCA1LjU3OC01LjU3OHoiPjwvcGF0aD48L3N2Zz4=)
|
||||
|
||||
.c-chat__button
|
||||
@include position(fixed, bottom, right, 0, 2rem)
|
||||
padding: 1rem 1.5rem
|
||||
background: $color-front
|
||||
@include position(fixed, bottom, right, 1.5rem, 1.5rem)
|
||||
z-index: 5
|
||||
color: $color-back
|
||||
border-top-left-radius: 4px
|
||||
border-top-right-radius: 4px
|
||||
z-index: 20
|
||||
border-color: $color-theme
|
||||
border-style: solid
|
||||
border-width: 1px 1px 0 1px
|
||||
background: $color-front
|
||||
border-radius: 1em
|
||||
padding: 0.5rem 1.15rem 0.35rem
|
||||
opacity: 0.7
|
||||
transition: opacity 0.2s ease
|
||||
|
||||
&:hover
|
||||
opacity: 1
|
||||
|
||||
|
||||
.gitter-open-chat-button
|
||||
display: none
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
.c-code-block
|
||||
background: $color-front
|
||||
color: $color-back
|
||||
color: darken($color-back, 20)
|
||||
padding: 0.75em 0
|
||||
border-radius: 2px
|
||||
border-radius: $border-radius
|
||||
overflow: auto
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
|
|
@ -16,6 +16,8 @@
|
|||
&.c-code-block--has-icon
|
||||
padding: 0
|
||||
display: flex
|
||||
border-top-left-radius: 0
|
||||
border-bottom-left-radius: 0
|
||||
|
||||
.c-code-block__icon
|
||||
padding: 0 0 0 1rem
|
||||
|
|
@ -43,17 +45,26 @@
|
|||
opacity: 0.5
|
||||
|
||||
|
||||
//- Code
|
||||
|
||||
code
|
||||
-webkit-font-smoothing: subpixel-antialiased
|
||||
-moz-osx-font-smoothing: auto
|
||||
|
||||
|
||||
//- Inline code
|
||||
|
||||
*:not(a):not(.c-code-block) > code
|
||||
color: $color-dark
|
||||
|
||||
*:not(.c-code-block) > code
|
||||
font: normal 600 0.8em/#{1} $font-code
|
||||
background: darken($color-theme-light, 5)
|
||||
box-shadow: 1px 1px 0 rgba($color-front, 0.05)
|
||||
text-shadow: 1px 1px 0 rgba($color-back, 0.5)
|
||||
color: $color-front
|
||||
padding: 0.1em 0.5em
|
||||
font-size: 90%
|
||||
background-color: $color-subtle-light
|
||||
padding: 0.2rem 0.4rem
|
||||
border-radius: 0.25rem
|
||||
font-family: $font-code
|
||||
white-space: nowrap
|
||||
margin: 0
|
||||
border-radius: 1px
|
||||
box-decoration-break: clone
|
||||
white-space: nowrap
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,11 @@
|
|||
|
||||
.c-landing
|
||||
background: $color-theme
|
||||
padding-top: 5rem
|
||||
padding-top: $nav-height * 1.5
|
||||
width: 100%
|
||||
|
||||
.c-landing__wrapper
|
||||
background: $pattern
|
||||
padding-bottom: 6rem
|
||||
width: 100%
|
||||
|
||||
.c-landing__content
|
||||
|
|
@ -15,9 +14,45 @@
|
|||
width: 100%
|
||||
min-height: 573px
|
||||
|
||||
.c-landing__headlines
|
||||
position: relative
|
||||
top: -1.5rem
|
||||
left: 1rem
|
||||
|
||||
.c-landing__title
|
||||
color: $color-back
|
||||
text-align: center
|
||||
margin-bottom: 0.75rem
|
||||
|
||||
.c-landing__blocks
|
||||
@include breakpoint(min, sm)
|
||||
position: relative
|
||||
top: -25rem
|
||||
margin-bottom: -25rem
|
||||
|
||||
.c-landing__card
|
||||
padding: 3rem 2.5rem
|
||||
|
||||
.c-landing__banner
|
||||
background: $color-theme
|
||||
|
||||
.c-landing__banner__content
|
||||
@include breakpoint(min, md)
|
||||
border: 4px solid
|
||||
padding: 1rem 6.5rem 2rem 4rem
|
||||
|
||||
|
||||
.c-landing__banner__text
|
||||
font-weight: 500
|
||||
|
||||
strong
|
||||
font-weight: 800
|
||||
|
||||
p
|
||||
font-size: 1.5rem
|
||||
|
||||
@include breakpoint(min, md)
|
||||
padding-top: 7rem
|
||||
|
||||
.c-landing__badge
|
||||
transform: rotate(7deg)
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
|
||||
.c-list__item:before
|
||||
content: counter(li, #{$counter}) '.'
|
||||
font-size: 1em
|
||||
padding-right: 1rem
|
||||
|
||||
|
||||
//- List Item
|
||||
|
|
@ -21,13 +23,14 @@
|
|||
&:before
|
||||
content: '\25CF'
|
||||
display: inline-block
|
||||
font-size: 1em
|
||||
font-size: 0.6em
|
||||
font-weight: bold
|
||||
padding-right: 1.25rem
|
||||
margin-left: -3.75rem
|
||||
text-align: right
|
||||
width: 2.5rem
|
||||
counter-increment: li
|
||||
box-sizing: content-box
|
||||
|
||||
|
||||
//- List icon
|
||||
|
|
|
|||
|
|
@ -3,9 +3,8 @@
|
|||
.x-terminal
|
||||
background: $color-subtle-light
|
||||
color: $color-front
|
||||
padding: 4px
|
||||
border: 1px dotted $color-subtle
|
||||
border-radius: 5px
|
||||
padding: $border-radius
|
||||
border-radius: 1em
|
||||
width: 100%
|
||||
|
||||
.x-terminal__icons
|
||||
|
|
|
|||
|
|
@ -1,22 +1,21 @@
|
|||
//- 💫 CSS > COMPONENTS > NAVIGATION
|
||||
|
||||
.c-nav
|
||||
@include position(absolute, top, left, 0, 0)
|
||||
@include position(fixed, top, left, 0, 0)
|
||||
@include size(100%, $nav-height)
|
||||
background: $color-back
|
||||
color: $color-theme
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
flex-flow: row wrap
|
||||
padding: 0 2rem 0 1rem
|
||||
z-index: 20
|
||||
z-index: 30
|
||||
width: 100%
|
||||
border-bottom: 1px solid $color-subtle
|
||||
box-shadow: $box-shadow
|
||||
|
||||
&.c-nav--theme
|
||||
background: $color-theme
|
||||
color: $color-back
|
||||
border-bottom: none
|
||||
//@include breakpoint(min, md)
|
||||
// position: fixed
|
||||
|
||||
&.is-fixed
|
||||
animation: slideInDown 0.5s ease-in-out
|
||||
|
|
@ -28,12 +27,21 @@
|
|||
justify-content: flex-end
|
||||
flex-flow: row nowrap
|
||||
border-color: inherit
|
||||
flex: 1
|
||||
|
||||
.c-nav__menu__item
|
||||
display: flex
|
||||
align-items: center
|
||||
height: 100%
|
||||
text-transform: uppercase
|
||||
font-family: $font-secondary
|
||||
font-size: 1.6rem
|
||||
font-weight: bold
|
||||
color: $color-theme
|
||||
|
||||
&:not(:last-child)
|
||||
margin-right: 1em
|
||||
&:not(:first-child)
|
||||
margin-left: 2em
|
||||
|
||||
&.is-active
|
||||
color: $color-dark
|
||||
pointer-events: none
|
||||
|
|
|
|||
24
website/assets/css/_components/_progress.sass
Normal file
24
website/assets/css/_components/_progress.sass
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
//- 💫 CSS > COMPONENTS > PROGRESS
|
||||
|
||||
.c-progress
|
||||
display: block
|
||||
flex: 105%
|
||||
width: 105%
|
||||
height: 3px
|
||||
color: $color-theme
|
||||
background: transparent
|
||||
border: none
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: -2.5%
|
||||
|
||||
&::-webkit-progress-bar
|
||||
background: $color-back
|
||||
border-radius: none
|
||||
|
||||
&::-webkit-progress-value
|
||||
background: $color-theme
|
||||
border-radius: none
|
||||
|
||||
&::-moz-progress-bar
|
||||
background: $color-theme
|
||||
|
|
@ -1,14 +1,17 @@
|
|||
//- 💫 CSS > COMPONENTS > QUICKSTART
|
||||
|
||||
.c-quickstart
|
||||
border: 1px solid $color-subtle
|
||||
border-radius: 2px
|
||||
border-radius: $border-radius
|
||||
display: none
|
||||
background: $color-subtle-light
|
||||
|
||||
&:not([style]) + .c-quickstart__info
|
||||
display: none
|
||||
|
||||
.c-code-block
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
.c-quickstart__content
|
||||
padding: 2rem 3rem
|
||||
|
||||
|
|
@ -72,7 +75,6 @@
|
|||
flex: 100%
|
||||
|
||||
.c-quickstart__legend
|
||||
color: $color-subtle-dark
|
||||
margin-right: 2rem
|
||||
padding-top: 0.75rem
|
||||
flex: 1 1 35%
|
||||
|
|
@ -95,4 +97,4 @@
|
|||
padding: 1.5rem 0
|
||||
|
||||
.c-quickstart__code
|
||||
font-size: 1.6rem
|
||||
font-size: 1.4rem
|
||||
|
|
|
|||
|
|
@ -3,16 +3,15 @@
|
|||
//- Sidebar container
|
||||
|
||||
.c-sidebar
|
||||
background: $color-subtle-light
|
||||
overflow-y: auto
|
||||
|
||||
@include breakpoint(min, md)
|
||||
@include position(fixed, top, left, 0, 0)
|
||||
@include size($sidebar-width, 100vh)
|
||||
@include size($sidebar-width, calc(100vh - 3px))
|
||||
@include scroll-shadow($color-back, $color-front, $nav-height)
|
||||
flex: 0 0 $sidebar-width
|
||||
padding: calc(#{$nav-height} + 1.5rem) 0 0
|
||||
z-index: 10
|
||||
border-right: 1px solid $color-subtle
|
||||
|
||||
@include breakpoint(max, sm)
|
||||
flex: 100%
|
||||
|
|
@ -27,7 +26,7 @@
|
|||
|
||||
.c-sidebar__section
|
||||
& > *
|
||||
padding: 0 2rem
|
||||
padding: 0 2rem 0.35rem
|
||||
|
||||
@include breakpoint(max, sm)
|
||||
flex: 1 1 0
|
||||
|
|
@ -38,7 +37,59 @@
|
|||
&:not(:last-child)
|
||||
border-right: 1px solid $color-subtle
|
||||
|
||||
.is-active
|
||||
.c-sidebar__item
|
||||
color: $color-theme
|
||||
|
||||
&:hover
|
||||
color: $color-theme-dark
|
||||
|
||||
& > .is-active
|
||||
font-weight: bold
|
||||
color: $color-theme
|
||||
background: rgba($color-subtle, 0.4)
|
||||
color: $color-dark
|
||||
margin-top: 1rem
|
||||
|
||||
|
||||
//- Sidebar subsections
|
||||
|
||||
$crumb-bullet: 14px
|
||||
$crumb-bar: 2px
|
||||
|
||||
.c-sidebar__crumb
|
||||
display: block
|
||||
padding-top: 1rem
|
||||
padding-left: 1rem
|
||||
position: relative
|
||||
|
||||
.c-sidebar__crumb__item
|
||||
margin-bottom: $crumb-bullet / 2
|
||||
position: relative
|
||||
padding-left: 2rem
|
||||
color: $color-theme
|
||||
font-size: 1.2rem
|
||||
|
||||
&:hover
|
||||
color: $color-theme-dark
|
||||
|
||||
&:after
|
||||
@include size($crumb-bullet)
|
||||
@include position(absolute, top, left, $crumb-bullet / 4, 0)
|
||||
content: ""
|
||||
border-radius: 50%
|
||||
background: $color-theme
|
||||
z-index: 10
|
||||
|
||||
&:not(:last-child):before
|
||||
@include size($crumb-bar, 100%)
|
||||
@include position(absolute, top, left, $crumb-bullet, ($crumb-bullet - $crumb-bar) / 2)
|
||||
content: ""
|
||||
background: $color-subtle
|
||||
|
||||
&:first-child:before
|
||||
height: calc(100% + #{$crumb-bullet * 2})
|
||||
top: -$crumb-bullet / 2
|
||||
|
||||
&.is-active
|
||||
color: $color-dark
|
||||
|
||||
&:after
|
||||
background: $color-dark
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
//- Table row
|
||||
|
||||
.c-table__row
|
||||
&:nth-child(odd)
|
||||
&:nth-child(odd):not(.c-table__row--head)
|
||||
background: rgba($color-subtle-light, 0.35)
|
||||
|
||||
&.c-table__row--foot
|
||||
|
|
@ -38,7 +38,6 @@
|
|||
.c-table__head-cell
|
||||
font-weight: bold
|
||||
color: $color-theme
|
||||
background: $color-back
|
||||
padding: 1rem 0.5rem
|
||||
border-bottom: 2px solid $color-theme
|
||||
|
||||
|
|
|
|||
|
|
@ -4,24 +4,34 @@
|
|||
position: relative
|
||||
|
||||
@include breakpoint(min, sm)
|
||||
&[data-tooltip-style="code"]:before
|
||||
-webkit-font-smoothing: subpixel-antialiased
|
||||
-moz-osx-font-smoothing: auto
|
||||
padding: 0.35em 0.85em 0.45em
|
||||
font: normal 1rem/#{1.25} $font-code
|
||||
white-space: nowrap
|
||||
min-width: auto
|
||||
|
||||
&:before
|
||||
@include position(absolute, top, left, 125%, 50%)
|
||||
display: inline-block
|
||||
content: attr(data-tooltip)
|
||||
background: $color-front
|
||||
border-radius: 2px
|
||||
border-radius: $border-radius
|
||||
border: 1px solid rgba($color-subtle-dark, 0.5)
|
||||
color: $color-back
|
||||
font: normal 1.3rem/#{1.25} $font-primary
|
||||
font: normal 1.2rem/#{1.25} $font-primary
|
||||
text-transform: none
|
||||
text-align: left
|
||||
opacity: 0
|
||||
padding: 0.5em 0.75em
|
||||
transform: translateX(-50%) translateY(-2px)
|
||||
transition: opacity 0.1s ease-out, transform 0.1s ease-out
|
||||
visibility: hidden
|
||||
min-width: 200px
|
||||
max-width: 300px
|
||||
min-width: 200px
|
||||
padding: 0.75em 1em 1em
|
||||
z-index: 200
|
||||
white-space: pre-wrap
|
||||
|
||||
&:hover:before
|
||||
opacity: 1
|
||||
|
|
|
|||
|
|
@ -42,8 +42,8 @@
|
|||
// $scroll-shadow-side - side to cover shadow (left or right)
|
||||
// $scroll-shadow-background - original background color to match
|
||||
|
||||
@mixin scroll-shadow-base($scroll-shadow-color)
|
||||
background: radial-gradient(left, ellipse, rgba(0,0,0, .2) 0%, rgba(0,0,0, 0) 75%) 0 center, radial-gradient(right, ellipse, rgba(0,0,0, .2) 0%, rgba(0,0,0, 0) 75%) 100% center
|
||||
@mixin scroll-shadow-base($scroll-shadow-color, $scroll-shadow-intensity: 0.2)
|
||||
background: radial-gradient(ellipse at 0 50%, rgba($scroll-shadow-color, $scroll-shadow-intensity) 0%, rgba(0,0,0,0) 75%) 0 center, radial-gradient(ellipse at 100% 50%, rgba($scroll-shadow-color, $scroll-shadow-intensity) 0%, transparent 75%) 100% center
|
||||
background-attachment: scroll, scroll
|
||||
background-repeat: no-repeat
|
||||
background-size: 10px 100%, 10px 100%
|
||||
|
|
@ -58,3 +58,16 @@
|
|||
background-image: linear-gradient(to #{$scroll-gradient-direction}, rgba($scroll-shadow-background, 1) 50%, rgba($scroll-shadow-background, 0) 100%)
|
||||
background-repeat: no-repeat
|
||||
background-size: 20px 100%
|
||||
|
||||
|
||||
// Full vertical scroll shadows
|
||||
// adapted from: https://codepen.io/laustdeleuran/pen/DBaAu
|
||||
|
||||
@mixin scroll-shadow($background-color, $shadow-color, $shadow-offset: 0, $shadow-intensity: 0.4, $cover-size: 40px, $shadow-size: 15px)
|
||||
background: linear-gradient($background-color 30%, rgba($background-color,0)) 0 $shadow-offset, linear-gradient(rgba($background-color,0), $background-color 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) 0 $shadow-offset, radial-gradient(50% 100%,farthest-side, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) 0 100%
|
||||
|
||||
background: linear-gradient($background-color 30%, rgba($background-color,0)) 0 $shadow-offset, linear-gradient(rgba($background-color,0), $background-color 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) -20px $shadow-offset, radial-gradient(farthest-side at 50% 100%, rgba($shadow-color, $shadow-intensity), rgba($shadow-color,0)) 0 100%
|
||||
background-repeat: no-repeat
|
||||
background-color: $background-color
|
||||
background-size: 100% $cover-size, 100% $cover-size, 100% $shadow-size, 100% $shadow-size
|
||||
background-attachment: local, local, scroll, scroll
|
||||
|
|
|
|||
|
|
@ -4,47 +4,48 @@
|
|||
|
||||
$type-base: 11px
|
||||
|
||||
$nav-height: 45px
|
||||
$nav-height: 55px
|
||||
$content-width: 1250px
|
||||
$sidebar-width: 200px
|
||||
$aside-width: 30vw
|
||||
$sidebar-width: 235px
|
||||
$aside-width: 27.5vw
|
||||
$aside-padding: 25px
|
||||
$border-radius: 6px
|
||||
|
||||
$logo-width: 85px
|
||||
$logo-height: 27px
|
||||
|
||||
$grid: ( quarter: 4, third: 3, half: 2, two-thirds: 1.5, three-quarters: 1.33 )
|
||||
$breakpoints: ( sm: 768px, md: 992px, lg: 1200px )
|
||||
$headings: (1: 3, 2: 2.6, 3: 2, 4: 1.8, 5: 1.5)
|
||||
|
||||
$headings: (1: 4.4, 2: 3.4, 3: 2.6, 4: 2.2, 5: 1.8)
|
||||
|
||||
// Fonts
|
||||
|
||||
$font-primary: "Source Sans Pro", Tahoma, Geneva, sans-serif !default
|
||||
$font-code: 'Source Code Pro', Consolas, 'Andale Mono', Menlo, Monaco, Courier, monospace !default
|
||||
|
||||
$font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default
|
||||
$font-secondary: "HK Grotesk" !default
|
||||
$font-code: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default
|
||||
|
||||
// Colors
|
||||
|
||||
$colors: ( blue: #09a3d5, red: #d9515d, green: #08c35e )
|
||||
$colors: ( blue: #09a3d5, green: #05b083 )
|
||||
|
||||
$color-back: #fff !default
|
||||
$color-front: #1a1e23 !default
|
||||
$color-dark: lighten($color-front, 20) !default
|
||||
|
||||
$color-theme: map-get($colors, $theme)
|
||||
$color-theme-dark: darken(map-get($colors, $theme), 5)
|
||||
$color-theme-dark: darken(map-get($colors, $theme), 10)
|
||||
$color-theme-light: rgba($color-theme, 0.05)
|
||||
|
||||
$color-subtle: #ddd !default
|
||||
$color-subtle-light: #f6f6f6 !default
|
||||
$color-subtle-dark: #949e9b !default
|
||||
|
||||
$color-red: #d9515d
|
||||
$color-green: #3ec930
|
||||
$color-red: #ef476f
|
||||
$color-green: #7ddf64
|
||||
$color-yellow: #f4c025
|
||||
|
||||
$syntax-highlighting: ( comment: #949e9b, tag: #b084eb, number: #b084eb, selector: #ffb86c, operator: #ff2c6d, function: #35b3dc, keyword: #ff2c6d, regex: #f4c025 )
|
||||
|
||||
$pattern: $color-theme url("/assets/img/pattern_#{$theme}.jpg") center top repeat
|
||||
$pattern-overlay: transparent url("/assets/img/pattern_landing.jpg") center -138px no-repeat
|
||||
$box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2)
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ $theme: blue !default
|
|||
@import _components/lists
|
||||
@import _components/misc
|
||||
@import _components/navigation
|
||||
@import _components/progress
|
||||
@import _components/sidebar
|
||||
@import _components/tables
|
||||
@import _components/quickstart
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
//- 💫 STYLESHEET (RED)
|
||||
|
||||
$theme: red
|
||||
@import style
|
||||
Loading…
Reference in New Issue
Block a user