explosion/spaCy
1
1
Fork 0
mirror of https://github.com/explosion/spaCy.git synced 2026-01-07 17:21:15 +03:00
Code Issues Packages Projects Releases Wiki Activity
554df9ef20
spaCy/website/src/styles/layout.sass
Sofie Van Landeghem 554df9ef20
Website migration from Gatsby to Next (#12058) 
* Rename all MDX file to `.mdx`

* Lock current node version (#11885)

* Apply Prettier (#11996)

* Minor website fixes (#11974) [ci skip]

* fix table

* Migrate to Next WEB-17 (#12005)

* Initial commit

* Run `npx create-next-app@13 next-blog`

* Install MDX packages

Following: 77b5f79a4d/packages/next-mdx/readme.md

* Add MDX to Next

* Allow Next to handle `.md` and `.mdx` files.

* Add VSCode extension recommendation

* Disabled TypeScript strict mode for now

* Add prettier

* Apply Prettier to all files

* Make sure to use correct Node version

* Add basic implementation for `MDXRemote`

* Add experimental Rust MDX parser

* Add `/public`

* Add SASS support

* Remove default pages and styling

* Convert to module

This allows to use `import/export` syntax

* Add import for custom components

* Add ability to load plugins

* Extract function

This will make the next commit easier to read

* Allow to handle directories for page creation

* Refactoring

* Allow to parse subfolders for pages

* Extract logic

* Redirect `index.mdx` to parent directory

* Disabled ESLint during builds

* Disabled typescript during build

* Remove Gatsby from `README.md`

* Rephrase Docker part of `README.md`

* Update project structure in `README.md`

* Move and rename plugins

* Update plugin for wrapping sections

* Add dependencies for  plugin

* Use  plugin

* Rename wrapper type

* Simplify unnessary adding of id to sections

The slugified section ids are useless, because they can not be referenced anywhere anyway. The navigation only works if the section has the same id as the heading.

* Add plugin for custom attributes on Markdown elements

* Add plugin to readd support for tables

* Add plugin to fix problem with wrapped images

For more details see this issue: https://github.com/mdx-js/mdx/issues/1798

* Add necessary meta data to pages

* Install necessary dependencies

* Remove outdated MDX handling

* Remove reliance on `InlineList`

* Use existing Remark components

* Remove unallowed heading

Before `h1` components where not overwritten and would never have worked and they aren't used anywhere either.

* Add missing components to MDX

* Add correct styling

* Fix broken list

* Fix broken CSS classes

* Implement layout

* Fix links

* Fix broken images

* Fix pattern image

* Fix heading attributes

* Rename heading attribute

`new` was causing some weird issue, so renaming it to `version`

* Update comment syntax in MDX

* Merge imports

* Fix markdown rendering inside components

* Add model pages

* Simplify anchors

* Fix default value for theme

* Add Universe index page

* Add Universe categories

* Add Universe projects

* Fix Next problem with copy

Next complains when the server renders something different then the client, therfor we move the differing logic to `useEffect`

* Fix improper component nesting

Next doesn't allow block elements inside a `<p>`

* Replace landing page MDX with page component

* Remove inlined iframe content

* Remove ability to inline HTML content in iFrames

* Remove MDX imports

* Fix problem with image inside link in MDX

* Escape character for MDX

* Fix unescaped characters in MDX

* Fix headings with logo

* Allow to export static HTML pages

* Add prebuild script

This command is automatically run by Next

* Replace `svg-loader` with `react-inlinesvg`

`svg-loader` is no longer maintained

* Fix ESLint `react-hooks/exhaustive-deps`

* Fix dropdowns

* Change code language from `cli` to `bash`

* Remove unnessary language `none`

* Fix invalid code language

`markdown_` with an underscore was used to basically turn of syntax highlighting, but using unknown languages know throws an error.

* Enable code blocks plugin

* Readd `InlineCode` component

MDX2 removed the `inlineCode` component

> The special component name `inlineCode` was removed, we recommend to use `pre` for the block version of code, and code for both the block and inline versions

Source: https://mdxjs.com/migrating/v2/#update-mdx-content

* Remove unused code

* Extract function to own file

* Fix code syntax highlighting

* Update syntax for code block meta data

* Remove unused prop

* Fix internal link recognition

There is a problem with regex between Node and browser, and since Next runs the component on both, this create an error.

`Prop `rel` did not match. Server: "null" Client: "noopener nofollow noreferrer"`

This simplifies the implementation and fixes the above error.

* Replace `react-helmet` with `next/head`

* Fix `className` problem for JSX component

* Fix broken bold markdown

* Convert file to `.mjs` to be used by Node process

* Add plugin to replace strings

* Fix custom table row styling

* Fix problem with `span` inside inline `code`

React doesn't allow a `span` inside an inline `code` element and throws an error in dev mode.

* Add `_document` to be able to customize `<html>` and `<body>`

* Add `lang="en"`

* Store Netlify settings in file

This way we don't need to update via Netlify UI, which can be tricky if changing build settings.

* Add sitemap

* Add Smartypants

* Add PWA support

* Add `manifest.webmanifest`

* Fix bug with anchor links after reloading

There was no need for the previous implementation, since the browser handles this nativly. Additional the manual scrolling into view was actually broken, because the heading would disappear behind the menu bar.

* Rename custom event

I was googeling for ages to find out what kind of event `inview` is, only to figure out it was a custom event with a name that sounds pretty much like a native one. 🫠

* Fix missing comment syntax highlighting

* Refactor Quickstart component

The previous implementation was hidding the irrelevant lines via data-props and dynamically generated CSS. This created problems with Next and was also hard to follow. CSS was used to do what React is supposed to handle.

The new implementation simplfy filters the list of children (React elements) via their props.

* Fix syntax highlighting for Training Quickstart

* Unify code rendering

* Improve error logging in Juniper

* Fix Juniper component

* Automatically generate "Read Next" link

* Add Plausible

* Use recent DocSearch component and adjust styling

* Fix images

* Turn of image optimization

> Image Optimization using Next.js' default loader is not compatible with `next export`.

We currently deploy to Netlify via `next export`

* Dont build pages starting with `_`

* Remove unused files

* Add Next plugin to Netlify

* Fix button layout

MDX automatically adds `p` tags around text on a new line and Prettier wants to put the text on a new line. Hacking with JSX string.

* Add 404 page

* Apply Prettier

* Update Prettier for `package.json`

Next sometimes wants to patch `package-lock.json`. The old Prettier setting indended with 4 spaces, but Next always indends with 2 spaces. Since `npm install` automatically uses the indendation from `package.json` for `package-lock.json` and to avoid the format switching back and forth, both files are now set to 2 spaces.

* Apply Next patch to `package-lock.json`

When starting the dev server Next would warn `warn  - Found lockfile missing swc dependencies, patching...` and update the `package-lock.json`. These are the patched changes.

* fix link

Co-authored-by: Sofie Van Landeghem <svlandeg@users.noreply.github.com>

* small backslash fixes

* adjust to new style

Co-authored-by: Marcus Blättermann <marcus@essenmitsosse.de>
2023-01-11 17:30:07 +01:00

545 lines
14 KiB
Sass
Raw Blame History

@import base
/* Theme */
\:root
// Sizes
--height-nav: 55px
--width-content: 1250px
--width-sidebar: 235px
--width-aside: 27.5vw
// Fonts
--font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
--font-secondary: 'HK Grotesk', Roboto, Helvetica, Arial, sans-serif
--font-code: "Jetbrains Mono", Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace
// Font Sizes
--font-size-xs: 1.1rem
--font-size-sm: 1.3rem
--font-size-md: 1.35rem
--font-size-lg: 1.4rem
--font-size-code: 1.2rem
--line-height-xs: 1.25
--line-height-sm: 1.375
--line-height-md: 1.5
--line-height-lg: 1.9
--line-height-code: 1.7
// Spacing
--spacing-xs: 1rem
--spacing-sm: 2rem
--spacing-md: 4rem
--spacing-lg: 6rem
// Theme Colors
--color-theme-blue: hsl(195, 92%, 44%)
--color-theme-blue-dark: hsl(195, 92%, 34%)
--color-theme-blue-light: hsla(195, 92%, 44%, 0.06)
--color-theme-blue-opaque: hsla(195, 92%, 44%, 0.11)
--color-theme-green: hsl(164, 94%, 35%)
--color-theme-green-dark: hsl(164, 94%, 25%)
--color-theme-green-light: hsla(164, 94%, 35%, 0.06)
--color-theme-green-opaque: hsla(164, 94%, 35%, 0.11)
--color-theme-purple: hsl(255, 61%, 54%)
--color-theme-purple-dark: hsl(255, 61%, 44%)
--color-theme-purple-light: hsla(255, 61%, 54%, 0.06)
--color-theme-purple-opaque: hsla(255, 61%, 54%, 0.11)
--color-theme-nightly: hsl(257, 99%, 67%)
--color-theme-nightly-dark: hsl(257, 99%, 57%)
--color-theme-nightly-light: hsla(257, 99%, 67%, 0.06)
--color-theme-nightly-opaque: hsla(257, 99%, 67%, 0.11)
--color-theme-legacy: #6f6f6f
--color-theme-legacy-dark: hsl(257, 0%, 35%)
--color-theme-legacy-light: hsla(257, 0%, 67%, 0.06)
--color-theme-legacy-opaque: hsla(257, 0%, 67%, 0.11)
// Regular colors
--color-back: hsl(0, 0%, 100%)
--color-front: hsl(213, 15%, 12%)
--color-dark: hsl(214, 15%, 32%)
--color-dark-secondary: hsl(214, 14%, 22%)
--color-subtle-opaque: hsla(0, 0%, 96%, 0.56)
--color-subtle: hsl(0, 0%, 87%)
--color-subtle-light: hsl(0, 0%, 96%)
--color-subtle-dark: hsl(162, 5%, 60%)
--color-green-medium: hsl(108, 66%, 63%)
--color-green-transparent: hsla(108, 66%, 63%, 0.12)
--color-red-light: hsl(355, 100%, 96%)
--color-red-medium: hsl(346, 84%, 61%)
--color-red-dark: hsl(332, 64%, 34%)
--color-red-opaque: hsl(346, 96%, 89%)
--color-red-transparent: hsla(346, 84%, 61%, 0.12)
--color-yellow-light: hsl(46, 100%, 95%)
--color-yellow-medium: hsl(45, 90%, 55%)
--color-yellow-dark: hsl(44, 94%, 27%)
--color-yellow-opaque: hsl(45, 90%, 87%)
// Syntax Highlighting
--syntax-comment: hsl(162, 5%, 60%)
--syntax-tag: hsl(266, 72%, 72%)
--syntax-number: var(--syntax-tag)
--syntax-selector: hsl(31, 100%, 71%)
--syntax-function: hsl(195, 70%, 54%)
--syntax-keyword: hsl(343, 100%, 68%)
--syntax-operator: var(--syntax-keyword)
// Other
--color-inline-code-text: var(--color-dark)
--color-inline-code-bg: var(--color-subtle-light)
--color-shadow: hsla(0, 0%, 0%, 0.2)
--box-shadow: 0 1px 5px var(--color-shadow)
--border-radius: 6px
/* Theming */
.theme-blue
--color-theme: var(--color-theme-blue)
--color-theme-dark: var(--color-theme-blue-dark)
--color-theme-light: var(--color-theme-blue-light)
--color-theme-opaque: var(--color-theme-blue-opaque)
.theme-green
--color-theme: var(--color-theme-green)
--color-theme-dark: var(--color-theme-green-dark)
--color-theme-light: var(--color-theme-green-light)
--color-theme-opaque: var(--color-theme-green-opaque)
.theme-purple
--color-theme: var(--color-theme-purple)
--color-theme-dark: var(--color-theme-purple-dark)
--color-theme-light: var(--color-theme-purple-light)
--color-theme-opaque: var(--color-theme-purple-opaque)
.theme-nightly
--color-theme: var(--color-theme-nightly)
--color-theme-dark: var(--color-theme-nightly-dark)
--color-theme-light: var(--color-theme-nightly-light)
--color-theme-opaque: var(--color-theme-nightly-opaque)
.theme-legacy
--color-theme: var(--color-theme-legacy)
--color-theme-dark: var(--color-theme-legacy-dark)
--color-theme-light: var(--color-theme-legacy-light)
--color-theme-opaque: var(--color-theme-legacy-opaque)
/* Fonts */
@font-face
font-family: "HK Grotesk"
font-style: normal
font-weight: 500
src: url("../fonts/hkgrotesk-semibold.woff2") format("woff2"), url("../fonts/hkgrotesk-semibold.woff") format("woff")
font-display: swap
@font-face
font-family: "HK Grotesk"
font-style: italic
font-weight: 500
src: url("../fonts/hkgrotesk-semibolditalic.woff2") format("woff2"), url("../fonts/hkgrotesk-semibolditalic.woff") format("woff")
font-display: swap
@font-face
font-family: "HK Grotesk"
font-style: normal
font-weight: 600
src: url("../fonts/hkgrotesk-bold.woff2") format("woff2"), url("../fonts/hkgrotesk-bold.woff") format("woff")
font-display: swap
@font-face
font-family: "HK Grotesk"
font-style: italic
font-weight: 600
src: url("../fonts/hkgrotesk-bolditalic.woff2") format("woff2"), url("../fonts/hkgrotesk-bolditalic.woff") format("woff")
font-display: swap
@font-face
font-family: "JetBrains Mono"
font-style: normal
font-weight: 500
font-display: fallback
src: url("../fonts/jetbrainsmono-regular.woff") format("woff"), url("../fonts/jetbrainsmono-regular.woff2") format("woff2")
@font-face
font-family: "JetBrains Mono"
font-style: italic
font-weight: 500
font-display: fallback
src: url("../fonts/jetbrainsmono-italic.woff") format("woff"), url("../fonts/jetbrainsmono-italic.woff2") format("woff2")
/* Reset */
*, *:before, *:after
box-sizing: border-box
padding: 0
margin: 0
border: 0
outline: 0
html
font-family: sans-serif
text-rendering: optimizeSpeed
-ms-text-size-adjust: 100%
-webkit-text-size-adjust: 100%
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
body
margin: 0
article, aside, details, figcaption, figure, footer, header, main, menu, nav,
section, summary, progress
display: block
a
background-color: transparent
color: inherit
text-decoration: none
&:active,
&:hover
outline: 0
abbr[title]
border-bottom: none
text-decoration: underline
text-decoration: underline dotted
b, strong
font-weight: inherit
font-weight: bolder
small
font-size: 80%
sub, sup
position: relative
font-size: 65%
line-height: 0
vertical-align: baseline
sup
top: -0.5em
sub
bottom: -0.15em
img
border: 0
height: auto
max-width: 100%
svg
max-width: 100%
color-interpolation-filters: sRGB
fill: currentColor
&:not(:root)
overflow: hidden
hr
box-sizing: content-box
overflow: visible
height: 0
pre
overflow: auto
code, pre
font-family: var(--font-code)
font-size: var(--font-size-code)
font-variant-ligatures: none
-webkit-font-smoothing: subpixel-antialiased
-moz-osx-font-smoothing: auto
table
text-align: left
width: 100%
max-width: 100%
border-collapse: collapse
td, th
vertical-align: top
ul, ol
list-style: none
input, button
appearance: none
background: transparent
button
cursor: pointer
progress
appearance: none
/* Layout */
html
font-size: 11px
body
background: var(--color-back)
color: var(--color-front)
p
margin-bottom: var(--spacing-sm)
font-family: var(--font-primary)
font-size: var(--font-size-md)
line-height: var(--line-height-md)
&:empty
margin-bottom: 0
a:focus
outline: 1px dotted var(--color-theme)
body [id]:target
padding-top: calc(var(--height-nav) * 1.25) !important
::selection
background: var(--color-theme)
color: var(--color-back)
text-shadow: none
// Footnotes
.footnotes
border-top: 1px dotted var(--color-subtle)
color: var(--color-dark)
li
font-size: var(--font-size-xs)
.footnote-backref
border: none
margin-left: 1rem
display: inline-block
width: 1em
line-height: 1
overflow: hidden
&:before
content: "\21A9\FE0E"
width: 1em
hr
display: none
// Prism
[class*="language-"] .token
&.comment, &.prolog, &.doctype, &.cdata, &.punctuation
color: var(--syntax-comment)
&.property, &.tag, &.symbol
color: var(--syntax-tag)
&.boolean, &.number
color: var(--syntax-number)
&.attr-name, &.string, &.char, &.builtin, &.attr-value
color: var(--syntax-selector)
@at-root .language-css .token.string,
&.operator, &.entity, &.url, &.variable
color: var(--syntax-operator)
&.atrule, &.function, &.selector
color: var(--syntax-function)
&.keyword
color: var(--syntax-keyword)
&.inserted, &.deleted
padding: 2px 0
border-radius: 2px
opacity: 0.9
&.inserted
color: var(--color-green-medium)
background: var(--color-green-transparent)
&.deleted
color: var(--color-red-medium)
background: var(--color-red-transparent)
&.italic
font-style: italic
[class*="language-"].type-annotation .token
&.builtin, &.boolean, &.number
color: var(--color-inline-code-text)
&.operator
color: var(--syntax-comment)
[class*="language-bash"] .token
&.function
color: var(--color-subtle)
&.operator, &.variable
color: var(--syntax-comment)
// Settings for ini syntax (config files)
[class*="language-ini"]
color: var(--syntax-comment)
.token
color: var(--color-subtle)
.gatsby-highlight-code-line
background-color: var(--color-dark-secondary)
border-left: 0.35em solid var(--color-theme)
display: block
margin-right: -1.5em
margin-left: -1.5em
padding-right: 1.5em
padding-left: 1.2em
&:empty:before
// Fix issue where empty lines would disappear
content: " "
// Jupyter
.jp-RenderedText pre
.ansi-cyan-fg.ansi-cyan-fg
color: var(--syntax-function)
.ansi-green-fg.ansi-green-fg
color: var(--color-green-medium)
.ansi-red-fg.ansi-red-fg
color: var(--syntax-operator)
.jp-OutputArea
&:not(:empty)
padding: 2rem 2rem 1rem
border-top: 1px solid var(--color-dark)
margin-top: 2rem
.entities, svg
white-space: initial
font-family: inherit
.entities
font-size: 1.35rem
.displacy
margin-top: 1rem
font-family: var(--font-primary) !important
color: var(--color-subtle) !important
background: var(--color-front) !important
.jp-OutputArea pre
font: inherit
.jp-OutputPrompt.jp-OutputArea-prompt
padding-top: 0.5em
margin-right: 1rem
font-family: inherit
font-weight: bold
/* Tooltips */
[data-tooltip]
position: relative
@include breakpoint(min, sm)
[data-tooltip][data-tooltip-style="code"]:before
-webkit-font-smoothing: subpixel-antialiased
-moz-osx-font-smoothing: auto
padding: 0.35em 0.85em 0.45em
font-family: var(--font-code)
white-space: nowrap
min-width: auto
[data-tooltip]:before
font: normal var(--font-size-xs)/var(--line-height-xs) var(--font-primary)
position: absolute
top: 125%
left: 50%
display: inline-block
content: attr(data-tooltip)
background: var(--color-front)
border-radius: var(--border-radius)
box-shadow: var(--box-shadow)
border: 1px solid var(--color-dark)
color: var(--color-back)
text-transform: none
text-align: left
opacity: 0
transform: translateX(-50%) translateY(-2px)
transition: opacity 0.1s ease-out, transform 0.1s ease-out
visibility: hidden
max-width: 300px
min-width: 200px
padding: 0.75em 1em 1em
z-index: 200
white-space: pre-wrap
[data-tooltip]:hover:before
opacity: 1
transform: translateX(-50%) translateY(0)
visibility: visible
/* Gatsby Images */
.gatsby-resp-image-figure
margin-bottom: var(--spacing-md)
.gatsby-resp-image-figcaption, .caption
font: var(--font-size-xs)/var(--line-height-md) var(--font-primary)
color: var(--color-subtle-dark)
padding-top: 0.75rem
padding-left: 3rem
p
font: inherit
code, a
color: inherit
/* Algolia DocSearch */
@include breakpoint(max, xs)
.algolia-autocomplete .ds-dropdown-menu
max-width: 90vw !important
min-width: 90vw !important
.algolia-autocomplete .algolia-docsearch-suggestion--category-header
display: block
font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)
text-transform: uppercase
color: var(--color-theme)
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column
color: var(--color-dark)
.algolia-autocomplete .algolia-docsearch-suggestion--title
font-size: var(--font-size-sm)
.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content
background: var(--color-subtle-opaque) !important
.algolia-autocomplete .algolia-docsearch-suggestion--text
font-size: var(--font-size-sm)
.algolia-autocomplete .algolia-docsearch-suggestion--highlight
box-shadow: none !important
background: var(--color-theme-opaque) !important
color: var(--color-theme-dark) !important
Reference in New Issue View Git Blame Copy Permalink