spaCy/website/src/styles/quickstart.module.sass
Ines Montani e597110d31
💫 Update website (#3285)
<!--- Provide a general summary of your changes in the title. -->

## Description

The new website is implemented using [Gatsby](https://www.gatsbyjs.org) with [Remark](https://github.com/remarkjs/remark) and [MDX](https://mdxjs.com/). This allows authoring content in **straightforward Markdown** without the usual limitations. Standard elements can be overwritten with powerful [React](http://reactjs.org/) components and wherever Markdown syntax isn't enough, JSX components can be used. Hopefully, this update will also make it much easier to contribute to the docs. Once this PR is merged, I'll implement auto-deployment via [Netlify](https://netlify.com) on a specific branch (to avoid building the website on every PR). There's a bunch of other cool stuff that the new setup will allow us to do – including writing front-end tests, service workers, offline support, implementing a search and so on.

This PR also includes various new docs pages and content.
Resolves #3270. Resolves #3222. Resolves #2947. Resolves #2837.


### Types of change
enhancement

## Checklist
<!--- Before you submit the PR, go over this checklist and make sure you can
tick off all the boxes. [] -> [x] -->
- [x] I have submitted the spaCy Contributor Agreement.
- [x] I ran the tests, and all new and existing tests passed.
- [x] My changes don't require a change to the documentation, or if they do, I've added all required information.
2019-02-17 19:31:19 +01:00

126 lines
2.8 KiB
Sass

@import base
.root
font: var(--font-size-sm)/var(--line-height-sm) var(--font-primary)
margin-bottom: var(--spacing-md)
border-radius: var(--border-radius)
background: var(--color-subtle-light)
padding-top: 1rem
.title
padding: 0 2rem
margin-bottom: 2rem
a:before
content: ""
.description
padding: 0 2rem
.group
padding: 0.75rem 2rem 0
border: none
@include breakpoint(min, md)
.group
display: flex
flex-flow: row nowrap
.input
// Hide inputs while keeping them focussable
opacity: 0
width: 0
height: 0
position: absolute
left: -9999px
.label
cursor: pointer
border: 1px solid var(--color-subtle)
border-radius: var(--border-radius)
display: inline-block
padding: 0.65rem 1.25rem
margin: 0 0.5rem 0.75rem 0
font-size: var(--font-size-xs)
font-weight: bold
background: var(--color-back)
&:hover
background: var(--color-subtle-light)
.input:focus + &
border: 1px solid var(--color-theme)
outline: none
.radio:checked + &
color: var(--color-back)
border-color: var(--color-theme)
background: var(--color-theme)
.checkbox + &:before
content: ""
display: inline-block
width: 20px
height: 20px
border: 1px solid var(--color-subtle)
vertical-align: middle
margin-right: 1rem
cursor: pointer
border-radius: var(--border-radius)
.checkbox:checked + &:before
// Embed "check" icon here for simplicity
background: var(--color-theme) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkgMTYuMTcybDEwLjU5NC0xMC41OTQgMS40MDYgMS40MDYtMTIgMTItNS41NzgtNS41NzggMS40MDYtMS40MDZ6Ii8+PC9zdmc+);
background-size: contain
border-color: var(--color-theme)
.legend
color: var(--color-dark)
padding: 0.75rem 0
flex: 1 1 35%
font-weight: bold
.fields
flex: 100%
.code
background: var(--color-front)
color: var(--color-back)
padding: 0.75em 0
overflow: auto
width: 100%
max-width: 100%
margin: 1rem 0 0
border-bottom-left-radius: var(--border-radius)
border-bottom-right-radius: var(--border-radius)
-webkit-font-smoothing: subpixel-antialiased
-moz-osx-font-smoothing: auto
.results
display: block
font: normal normal var(--font-size-lg)/var(--line-height-lg) var(--font-code)
line-height: 2
padding: 1em 2em
& > span
display: block
.prompt:before
color: var(--color-theme)
margin-right: 1em
.bash:before
content: "$"
.python:before
content: ">>>"
.divider
padding: 1.5rem 0
.help
color: var(--color-subtle-dark)
.input:checked + .label &
color: inherit