spaCy/website/src/styles/aside.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

91 lines
2.0 KiB
Sass

@import base
$triangle-size: 2rem
$border-radius: 6px
.root
position: relative
.content
--font-size-sm: 1.2rem
--color-inline-code-text: var(--color-back)
--color-inline-code-bg: var(--color-dark-secondary)
background: var(--color-front)
border-top-left-radius: $border-radius
border-bottom-left-radius: $border-radius
font-size: var(--font-size-sm)
z-index: 10
pre
padding: 0
margin: 0 0 var(--spacing-sm) 0
&:last-child
margin: 0
code
padding: 0
margin: 0
p, ul, ol
font: inherit
margin-bottom: var(--spacing-sm)
ul li
padding: 0
margin: 0
&:before
content: initial
@include breakpoint(min, md)
.content
position: absolute
top: -3rem
left: calc(100% + 5.5rem)
width: calc(var(--width-aside) + 2rem)
// Banner effect
&:after
position: absolute
bottom: -$triangle-size / 2
left: $border-radius / 2
width: 0
height: 0
border-color: transparent
border-style: solid
border-top-color: var(--color-dark)
border-width: $triangle-size / 2 0 0 calc(#{$triangle-size} - #{$border-radius / 2})
content: ""
@include breakpoint(max, sm)
.content
display: block
margin: 2rem 0
.text
font: var(--font-size-sm)/var(--line-height-sm) var(--font-primary)
color: var(--color-back)
padding: 1.5rem 2.5rem 2.5rem 2rem
a, a:hover
color: var(--color-subtle)
& > *:last-child
margin-bottom: 0
.title,
.text h4
font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)
text-transform: uppercase
display: inline-block
border-radius: 1em
padding: 0 1rem 0.15rem !important
background: var(--color-dark)
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25)
color: var(--color-back)
margin-bottom: 1.25rem
margin-left: -0.5rem
pointer-events: none