spaCy/website/assets/css/_base/_objects.sass
Ines Montani 49cee4af92
💫 Interactive code examples, spaCy Universe and various docs improvements (#2274)
* Integrate Python kernel via Binder

* Add live model test for languages with examples

* Update docs and code examples

* Adjust margin (if not bootstrapped)

* Add binder version to global config

* Update terminal and executable code mixins

* Pass attributes through infobox and section

* Hide v-cloak

* Fix example

* Take out model comparison for now

* Add meta text for compat

* Remove chart.js dependency

* Tidy up and simplify JS and port big components over to Vue

* Remove chartjs example

* Add Twitter icon

* Add purple stylesheet option

* Add utility for hand cursor (special cases only)

* Add transition classes

* Add small option for section

* Add thumb object for small round thumbnail images

* Allow unset code block language via "none" value

(workaround to still allow unset language to default to DEFAULT_SYNTAX)

* Pass through attributes

* Add syntax highlighting definitions for Julia, R and Docker

* Add website icon

* Remove user survey from navigation

* Don't hide GitHub icon on small screens

* Make top navigation scrollable on small screens

* Remove old resources page and references to it

* Add Universe

* Add helper functions for better page URL and title

* Update site description

* Increment versions

* Update preview images

* Update mentions of resources

* Fix image

* Fix social images

* Fix problem with cover sizing and floats

* Add divider and move badges into heading

* Add docstrings

* Reference converting section

* Add section on converting word vectors

* Move converting section to custom section and fix formatting

* Remove old fastText example

* Move extensions content to own section

Keep weird ID to not break permalinks for now (we don't want to rewrite URLs if not absolutely necessary)

* Use better component example and add factories section

* Add note on larger model

* Use better example for non-vector

* Remove similarity in context section

Only works via small models with tensors so has always been kind of confusing

* Add note on init-model command

* Fix lightning tour examples and make excutable if possible

* Add spacy train CLI section to train

* Fix formatting and add video

* Fix formatting

* Fix textcat example description (resolves #2246)

* Add dummy file to try resolve conflict

* Delete dummy file

* Tidy up [ci skip]

* Ensure sufficient height of loading container

* Add loading animation to universe

* Update Thebelab build and use better startup message

* Fix asset versioning

* Fix typo [ci skip]

* Add note on project idea label
2018-04-29 02:06:46 +02:00

234 lines
3.9 KiB
Sass

//- 💫 CSS > BASE > OBJECTS
//- Main container
.o-main
padding: $nav-height 0 0 0
max-width: 100%
min-height: 100vh
@include breakpoint(min, md)
&.o-main--sidebar
margin-left: $sidebar-width
&.o-main--aside
margin-right: $aside-width
position: relative
&:after
@include position(absolute, top, left, 0, 100%)
@include size($aside-width, 100%)
content: ""
display: block
background: $pattern
z-index: -1
min-height: 100vh
//- Content container
.o-content
padding: 3rem 7.5rem
margin: 0 auto
width: $content-width
max-width: 100%
@include breakpoint(max, sm)
padding: 3rem
//- Footer
.o-footer
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-section--small
overflow: auto
&:not(:last-child)
margin-bottom: 3.5rem
padding-bottom: 2rem
.o-block
margin-bottom: 4rem
.o-block-small
margin-bottom: 2rem
.o-no-block.o-no-block
margin-bottom: 0
.o-card
background: $color-back
border-radius: $border-radius
box-shadow: $box-shadow
//- Accordion
.o-accordion
&:not(:last-child)
margin-bottom: 2rem
.o-accordion__content
margin-top: 3rem
.o-accordion__button
font: inherit
border-radius: $border-radius
width: 100%
padding: 1.5rem 2rem
background: $color-subtle-light
&[aria-expanded="true"]
border-bottom: 3px solid $color-subtle
border-bottom-left-radius: 0
border-bottom-right-radius: 0
.o-accordion__hide
display: none
&:focus:not([aria-expanded="true"])
background: $color-subtle
.o-accordion__icon
@include size(2.5rem)
background: $color-theme
color: $color-back
border-radius: 50%
padding: 0.35rem
pointer-events: none
//- Box
.o-box
background: $color-subtle-light
padding: 2rem
border-radius: $border-radius
.o-box__logos
padding-bottom: 1rem
//- Icons
.o-icon
vertical-align: middle
&.o-icon--inline
margin: 0 0.5rem 0 0.1rem
&.o-icon--tag
vertical-align: bottom
height: 100%
position: relative
top: 1px
.o-emoji
margin-right: 0.75rem
vertical-align: text-bottom
.o-badge
border-radius: 1em
.o-thumb
@include size(100px)
overflow: hidden
border-radius: 50%
&.o-thumb--small
@include size(35px)
//- SVG
.o-svg
height: auto
//- Inline List
.o-inline-list > *
display: inline
&:not(:last-child)
margin-right: 3rem
//- Logo
.o-logo
@include size($logo-width, $logo-height)
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
//- Responsive Video embeds
.o-video
position: relative
height: 0
@each $ratio1, $ratio2 in (16, 9), (4, 3)
&.o-video--#{$ratio1}x#{$ratio2}
padding-bottom: (100% * $ratio2 / $ratio1)
.o-video__iframe
@include position(absolute, top, left, 0, 0)
@include size(100%)
border-radius: var(--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
width: 100%