` element, so that each element starts its animation at a different time.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=css-animation
-
-
[⬆ Back to top](#contents)
-
----
-
-## Interactivity
-
-
-### Disable selection
-
-Makes the content unselectable.
-
-```html
-
You can select me.
-```
-
-```css
-.unselectable {
- user-select: none;
-}
-```
-
-
-#### Explanation
-
-
-- `user-select: none` specifies that the text cannot be selected.
-
-
-#### Browser support
-
-97.5%
-
-
[⬆ Back to top](#contents)
-
-### Hamburger Button
-
-Displays a hamburger menu which transitions to a cross on hover.
-
-```html
-
-```
-
-```css
-.hamburger-menu {
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- justify-content: space-between;
- height: 2.5rem;
- width: 2.5rem;
- cursor: pointer;
-}
-
-.hamburger-menu .bar {
- height: 5px;
- background: black;
- border-radius: 5px;
- margin: 3px 0px;
- transform-origin: left;
- transition: all 0.5s;
-}
-
-.hamburger-menu:hover .top {
- transform: rotate(45deg);
-}
-
-.hamburger-menu:hover .middle {
- opacity: 0;
-}
-
-.hamburger-menu:hover .bottom {
- transform: rotate(-45deg);
-}
-```
-
-
-#### Explanation
-
-
-- Use a `.hamburger-menu` container `div` which contains the top, bottom, and middle bars.
-- The container is set to be a flex container (`display: flex`) with `flex-direction` to be `column` and `flex-wrap` to be `wrap` (alternatively, you can set both properties by a shorthand `flex-flow: column wrap`).
-- Add distance between the bars using `justify-content: space-between`.
-- The animation has 3 parts: top and bottom bars transforming to 45 degree angles (`rotate(45deg)`), and the middle bar fading away by setting `opacity: 0`.
-- The `transform-origin` is set to `left` so the bars rotate around the left point.
-- Set `transition all 0.5s` so that both `transform` and `opacity` properties are animated for half a second.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=flexbox
-- https://caniuse.com/#feat=css-transitions
-
-
[⬆ Back to top](#contents)
-
-### Popout menu
-
-Reveals an interactive popout menu on hover and focus.
-
-```html
-
-```
-
-```css
-.reference {
- position: relative;
- background: tomato;
- width: 100px;
- height: 100px;
-}
-.popout-menu {
- position: absolute;
- visibility: hidden;
- left: 100%;
- background: #333;
- color: white;
- padding: 15px;
-}
-.reference:hover > .popout-menu,
-.reference:focus > .popout-menu,
-.reference:focus-within > .popout-menu {
- visibility: visible;
-}
-```
-
-
-#### Explanation
-
-
-1. `position: relative` on the reference parent establishes a Cartesian positioning context for its child.
-2. `position: absolute` takes the popout menu out of the flow of the document and positions it in relation to the parent.
-3. `left: 100%` moves the the popout menu 100% of its parent's width from the left.
-4. `visibility: hidden` hides the popout menu initially and allows for transitions (unlike `display: none`).
-5. `.reference:hover > .popout-menu` means that when `.reference` is hovered over, select immediate children with a class of `.popout-menu` and change their `visibility` to `visible`, which shows the popout.
-6. `.reference:focus > .popout-menu` means that when `.reference` is focused, the popout would be shown.
-7. `.reference:focus-within > .popout-menu` ensures that the popout is shown when the focus is _within_ the reference.
-
-
-#### Browser support
-
-100.0%
-
-
[⬆ Back to top](#contents)
-
-### Sibling fade
-
-Fades out the siblings of a hovered item.
-
-```html
-
-```
-
-```css
-span {
- padding: 0 1rem;
- transition: opacity 0.2s;
-}
-
-.sibling-fade:hover span:not(:hover) {
- opacity: 0.5;
-}
-```
-
-
-#### Explanation
-
-
-1. `transition: opacity 0.2s` specifies that changes to opacity will be transitioned over 0.2 seconds.
-2. `.sibling-fade:hover span:not(:hover)` specifies that when the parent is hovered, select any `span` children that are not currently being hovered and change their opacity to `0.5`.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=css-sel3
-- https://caniuse.com/#feat=css-transitions
-
-
[⬆ Back to top](#contents)
-
----
-
-## Layout
-
-
-### Box-sizing reset
-
-Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`.
-
-```html
-
-```
-
-```css
-html {
- box-sizing: border-box;
-}
-*,
-*::before,
-*::after {
- box-sizing: inherit;
-}
-.box {
- display: inline-block;
- width: 150px;
- height: 150px;
- padding: 10px;
- background: tomato;
- color: white;
- border: 10px solid red;
-}
-.content-box {
- box-sizing: content-box;
-}
-```
-
-
-#### Explanation
-
-
-1. `box-sizing: border-box` makes the addition of `padding` or `border`s not affect an element's `width` or `height`.
-2. `box-sizing: inherit` makes an element respect its parent's `box-sizing` rule.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=css3-boxsizing
-
-
[⬆ Back to top](#contents)
-
-### Clearfix
-
-Ensures that an element self-clears its children.
-
-```html
-
-```
-
-```css
-.clearfix::after {
- content: '';
- display: block;
- clear: both;
-}
-
-.floated {
- float: left;
-}
-```
-
-
-#### Explanation
-
-
-1. `.clearfix::after` defines a pseudo-element.
-2. `content: ''` allows the pseudo-element to affect layout.
-3. `clear: both` indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.
-
-_Note: This is only useful if you are still using `float` to build layouts. Please consider using a modern approach with flexbox layout or grid layout._
-
-
-#### Browser support
-
-100.0%
-
-
[⬆ Back to top](#contents)
-
-### Constant width to height ratio
-
-Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion
-(i.e., its width to height ratio remains constant).
-
-```html
-
-```
-
-```css
-.constant-width-to-height-ratio {
- background: #333;
- width: 50%;
-}
-.constant-width-to-height-ratio::before {
- content: '';
- padding-top: 100%;
- float: left;
-}
-.constant-width-to-height-ratio::after {
- content: '';
- display: block;
- clear: both;
-}
-```
-
-
-#### Explanation
-
-
-- `padding-top` on the `::before` pseudo-element causes the height of the element to equal a percentage of its width. `100%` therefore means the element's height will always be `100%` of the width, creating a responsive square.
-- This method also allows content to be placed inside the element normally.
-
-
-#### Browser support
-
-100.0%
-
-
[⬆ Back to top](#contents)
-
-### Display table centering
-
-Vertically and horizontally centers a child element within its parent element using `display: table` (as an alternative to `flexbox`).
-
-```html
-
-```
-
-```css
-.container {
- border: 1px solid #333;
- height: 250px;
- width: 250px;
-}
-
-.center {
- display: table;
- height: 100%;
- width: 100%;
-}
-
-.center > span {
- display: table-cell;
- text-align: center;
- vertical-align: middle;
-}
-```
-
-
-#### Explanation
-
-
-1. `display: table` on '.center' allows the element to behave like a `
` HTML element.
-2. 100% height and width on '.center' allows the element to fill the available space within its parent element.
-3. `display: table-cell` on '.center > span' allows the element to behave like an HTML element.
-4. `text-align: center` on '.center > span' centers the child element horizontally.
-5. `vertical-align: middle` on '.center > span' centers the child element vertically.
-
-- The outer parent ('.container' in this case) must have a fixed height and width.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#search=display%3A%20table
-
-
-
Item1
-
Item2
-
Item3
-
⚠️ Needs prefixes for full support.
-
-- https://caniuse.com/#feat=flexbox
-
-⚠️ Needs prefixes for full support.
-
-- https://caniuse.com/#feat=flexbox
-
-
-
Vertically centered without changing the position property.
-
-
Div 1
-
Div 2
-
Div 3
-
⚠️ Needs prefixes for full support.
-
-- https://caniuse.com/#feat=flexbox
-
-
-
Parent 01
-
Parent 02
-
Child 01
-
Child 02
-
-
Parent 03
-
- Learn More about pants
-
-```
-
-```css
-.offscreen {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
-}
-```
-
-
-#### Explanation
-
-
-1. Remove all borders.
-2. Use `clip` to indicate that no part of the element should be shown.
-3. Make the height and width of the element 1px.
-4. Negate the elements height and width using `margin: -1px`.
-5. Hide the element's overflow.
-6. Remove all padding.
-7. Position the element absolutely so that it does not take up space in the DOM.
-
-
-#### Browser support
-
-100.0%
-
-(Although `clip` technically has been depreciated, the newer `clip-path` currently has very limited browser support.)
-
-- https://caniuse.com/#search=clip
-
-
-
-
-
30 Seconds of CSS
-
-
-
-
30 Seconds of CSS
-
-
-
-
30 Seconds of CSS
-
-
⚠️ Requires prefix for full support.
-
-- https://caniuse.com/#feat=transforms2d
-
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
- labore et.
-
-```
-
-```css
-.truncate-text-multiline {
- overflow: hidden;
- display: block;
- height: 109.2px;
- margin: 0 auto;
- font-size: 26px;
- line-height: 1.4;
- width: 400px;
- position: relative;
-}
-
-.truncate-text-multiline:after {
- content: '';
- position: absolute;
- bottom: 0;
- right: 0;
- width: 150px;
- height: 36.4px;
- background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
-}
-```
-
-
-#### Explanation
-
-
-1. `overflow: hidden` prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
-2. `width: 400px` ensures the element has a dimension.
-3. `height: 109.2px` calculated value for height, it equals `font-size * line-height * numberOfLines` (in this case `26 * 1.4 * 3 = 109.2`)
-4. `height: 36.4px` calculated value for gradient container, it equals `font-size * line-height` (in this case `26 * 1.4 = 36.4`)
-5. `background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%)` gradient from `transparent` to `#f5f6f9`
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=css-gradients
-
-If I exceed one line's width, I will be truncated.
-```
-
-```css
-.truncate-text {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- width: 200px;
-}
-```
-
-
-#### Explanation
-
-
-1. `overflow: hidden` prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
-2. `white-space: nowrap` prevents the text from exceeding one line in height.
-3. `text-overflow: ellipsis` makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
-4. `width: 200px;` ensures the element has a dimension, to know when to get ellipsis
-
-
-#### Browser support
-
-100.0%
-
-⚠️ Only works for single line elements.
-
-- https://caniuse.com/#feat=text-overflow
-
-
-```
-
-```css
-.box-example {
- height: 280px;
- background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
- background-position: calc(100% - 20px) calc(100% - 20px);
-}
-```
-
-
-#### Explanation
-
-
-1. It allows addition, subtraction, multiplication and division.
-2. Can use different units (pixel and percent together, for example) for each value in your expression.
-3. It is permitted to nest calc() functions.
-4. It can be used in any property that ``, ``, ``, ``, ``, ``, or `` is allowed, like width, height, font-size, top, left, etc.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=calc
-
-CSS is awesome!
-```
-
-```css
-:root {
- /* Place variables within here to use the variables globally. */
-}
-
-.custom-variables {
- --some-color: #da7800;
- --some-keyword: italic;
- --some-size: 1.25em;
- --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
- color: var(--some-color);
- font-size: var(--some-size);
- font-style: var(--some-keyword);
- text-shadow: var(--some-complex-value);
-}
-```
-
-
-#### Explanation
-
-
-- The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document. Variables can also be scoped to a selector if defined within the block.
-- Declare a variable with `--variable-name:`.
-- Reuse variables throughout the document using the `var(--variable-name)` function.
-
-
-#### Browser support
-
-96.5%
-
-- https://caniuse.com/#feat=css-variables
-
-
- Border with top triangle
-
-```
-
-```css
-.container {
- position: relative;
- background: #ffffff;
- padding: 15px;
- border: 1px solid #dddddd;
- margin-top: 20px;
-}
-
-.container:before, .container:after {
- content: '';
- position: absolute;
- bottom: 100%;
- left: 19px;
- border: 11px solid transparent;
- border-bottom-color: #dddddd;
-}
-
-.container:after {
- left: 20px;
- border: 10px solid transparent;
- border-bottom-color: #ffffff;
-}
-```
-
-
-#### Explanation
-
-
-- Use the `:before` and `:after` pseudo-elements to create two triangles.
-- The color of the `:before` triangle should be the same as the container's border color.
-- The color of the `:after` triangle should be the same as the container background color.
-- The border width of the `:before` triangle should be `1px` wider than the `:after` triangle, in order to act as the border.
-- The `:after` triangle should be `1px` to the right of the `:before` triangle to allow for its left border to be shown.
-
-
-#### Browser support
-
-100.0%
-
-
-```
-
-```css
-.circle {
- border-radius: 50%;
- width: 2rem;
- height: 2rem;
- background: #333;
-}
-```
-
-
-#### Explanation
-
-
-- `border-radius: 50%` curves the borders of an element to create a circle.
-- Since a circle has the same radius at any given point, the `width` and `height` must be the same. Differing values will create an ellipse.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=border-radius
-
-
- List item
- List item
-
- List item
-
- List item
- List item
- List item
-
-
-
-```
-
-```css
-ul {
- counter-reset: counter;
-}
-
-li::before {
- counter-increment: counter;
- content: counters(counter, '.') ' ';
-}
-```
-
-
-#### Explanation
-
-
-- You can create a ordered list using any type of HTML.
-
-1. `counter-reset` Initializes a counter, the value is the name of the counter. By default, the counter starts at 0. This property can also be used to change its value to any specific number.
-2. `counter-increment` Used in element that will be countable. Once `counter-reset` initialized, a counter's value can be increased or decreased.
-3. `counter(name, style)` Displays the value of a section counter. Generally used in a `content` property. This function can receive two parameters, the first as the name of the counter and the second one can be `decimal` or `upper-roman` (`decimal` by default).
-4. `counters(counter, string, style)` Displays the value of a section counter. Generally used in a `content` property. This function can receive three parameters, the first as the name of the counter, the second one you can include a string which comes after the counter and the third one can be `decimal` or `upper-roman` (`decimal` by default).
-5. A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. Using the `counters()` function, separating text can be inserted between different levels of nested counters.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=css-counters
-
-⚠️ Scrollbar styling doesn't appear to be on any standards track.
-
-- https://caniuse.com/#feat=css-scrollbar
-
-Select some of this text.
-```
-
-```css
-::selection {
- background: aquamarine;
- color: black;
-}
-.custom-text-selection::selection {
- background: deeppink;
- color: white;
-}
-```
-
-
-#### Explanation
-
-
-- `::selection` defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.
-
-
-#### Browser support
-
-90.1%
-
-⚠️ Requires prefixes for full support and is not actually
-in any specification.
-
-- https://caniuse.com/#feat=css-selection
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.
-Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.
-```
-
-```css
-p:first-child::first-letter {
- color: #5f79ff;
- float: left;
- margin: 0 8px 0 4px;
- font-size: 3rem;
- font-weight: bold;
- line-height: 1;
-}
-```
-
-
-#### Explanation
-
-
-- Use the `::first-letter` pseudo-element to style the first element of the paragraph, use the `:first-child` selector to select only the first paragraph.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=first-letter
-
-
-```
-
-```css
-.dynamic-shadow {
- position: relative;
- width: 10rem;
- height: 10rem;
- background: linear-gradient(75deg, #6d78ff, #00ffb8);
- z-index: 1;
-}
-.dynamic-shadow::after {
- content: '';
- width: 100%;
- height: 100%;
- position: absolute;
- background: inherit;
- top: 0.5rem;
- filter: blur(0.4rem);
- opacity: 0.7;
- z-index: -1;
-}
-```
-
-
-#### Explanation
-
-
-1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.
-2. `z-index: 1` establishes a new stacking context.
-3. `::after` defines a pseudo-element.
-4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
-5. `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.
-6. `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.
-7. `top: 0.5rem` offsets the pseudo-element down slightly from its parent.
-8. `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.
-9. `opacity: 0.7` makes the pseudo-element partially transparent.
-10. `z-index: -1` positions the pseudo-element behind the parent but in front of the background.
-
-
-#### Browser support
-
-98.5%
-
-⚠️ Requires prefixes for full support.
-
-- https://caniuse.com/#feat=css-filters
-
-I appear etched into the background.
-```
-
-```css
-.etched-text {
- text-shadow: 0 2px white;
- font-size: 1.5rem;
- font-weight: bold;
- color: #b8bec5;
-}
-```
-
-
-#### Explanation
-
-
-- `text-shadow: 0 2px white` creates a white shadow offset `0px` horizontally and `2px` vertically from the origin position.
-- The background must be darker than the shadow for the effect to work.
-- The text color should be slightly faded to make it look like it's engraved/carved out of the background.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=css-textshadow
-
-
-
-
-```
-
-```css
-form {
- border: 3px solid #2d98da;
- color: #000000;
- padding: 4px;
-}
-
-form:focus-within {
- background: #f7b731;
- color: #000000;
-}
-```
-
-
-#### Explanation
-
-
-- The psuedo class `:focus-within` applies styles to a parent element if any child element gets focused. For example, an `input` element inside a `form` element.
-
-
-#### Browser support
-
-85.4%
-
-⚠️ Not supported in IE11 or the current version of Edge.
-
-
-
-- https://caniuse.com/#feat=css-focus-within
-
-
-
Click the button below to enter the element into fullscreen mode.
-
I change color in fullscreen mode!
-
-
- Go Full Screen!
-
-
Gradient text
-```
-
-```css
-.gradient-text {
- background: -webkit-linear-gradient(pink, red);
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text;
-}
-```
-
-
-#### Explanation
-
-
-1. `background: -webkit-linear-gradient(...)` gives the text element a gradient background.
-2. `webkit-text-fill-color: transparent` fills the text with a transparent color.
-3. `webkit-background-clip: text` clips the background with the text, filling the text with the gradient background as the color.
-
-
-#### Browser support
-
-98.7%
-
-⚠️ Uses non-standard properties.
-
-- https://caniuse.com/#feat=text-stroke
-
-text
-```
-
-```css
-.hairline-border {
- box-shadow: 0 0 0 1px;
-}
-
-@media (min-resolution: 2dppx) {
- .hairline-border {
- box-shadow: 0 0 0 0.5px;
- }
-}
-
-@media (min-resolution: 3dppx) {
- .hairline-border {
- box-shadow: 0 0 0 0.33333333px;
- }
-}
-
-@media (min-resolution: 4dppx) {
- .hairline-border {
- box-shadow: 0 0 0 0.25px;
- }
-}
-```
-
-
-#### Explanation
-
-
-1. `box-shadow`, when only using spread, adds a pseudo-border which can use subpixels\*.
-2. Use `@media (min-resolution: ...)` to check the device pixel ratio (`1dppx` equals 96 DPI), setting the spread of the `box-shadow` equal to `1 / dppx`.
-
-
-#### Browser support
-
-100.0%
-
-⚠️ Needs alternate syntax and JavaScript user agent checking for full support.
-
-- https://caniuse.com/#feat=css-boxshadow
-- https://caniuse.com/#feat=css-media-resolution
-
-**Credit:** [Tobias Reich](https://codepen.io/electerious/pen/MQrRxX)
-
-```html
-Hover me ⚠️ Requires JavaScript.
-
-- https://caniuse.com/#feat=css-variables
-
-
-
-
-```
-
-```css
-nav ul {
- list-style: none;
- margin: 0;
- padding: 0;
- overflow: hidden;
-}
-
-nav li {
- float: left;
-}
-
-nav li a {
- position: relative;
- display: block;
- color: #222;
- text-align: center;
- padding: 8px 12px;
- text-decoration: none;
-}
-
-li a::before {
- position: absolute;
- content: "";
- width: 100%;
- height: 100%;
- bottom: 0;
- left: 0;
- background-color: #f6c126;
- z-index: -1;
- transform: scale(0);
- transition: transform 0.5s ease-in-out;
-}
-
-li a:hover::before, li a:focus::before {
- transform: scale(1);
-}
-```
-
-
-#### Explanation
-
-
-- Use the `::before` pseudo-element at the list item anchor to create a hover effect, hide it using `transform: scale(0)`.
-- Use the `:hover` and `:focus` pseudo-selectors to transition to `transform: scale(1)` and show the pseudo-element with its colored background.
-- Prevent the pseudo-element from covering the anchor element by using `z-index: -1`.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=transforms2d
-- https://caniuse.com/#feat=css-transitions
-
-
- One
- Two
- Three
- Four
-
-```
-
-```css
-.css-not-selector-shortcut {
- display: flex;
-}
-
-ul {
- padding-left: 0;
-}
-
-li {
- list-style-type: none;
- margin: 0;
- padding: 0 0.75rem;
-}
-
-li:not(:last-child) {
- border-right: 2px solid #d2d5e4;
-}
-```
-
-
-#### Explanation
-
-
-- `li:not(:last-child)` specifies that the styles should apply to all `li` elements except the `:last-child`.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=css-sel3
-
-Pretty text underline without clipping descending letters.
-```
-
-```css
-.pretty-text-underline {
- display: inline;
- text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
- background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
- background-position: bottom;
- background-repeat: no-repeat;
- background-size: 100% 1px;
-}
-.pretty-text-underline::-moz-selection {
- background-color: rgba(0, 150, 255, 0.3);
- text-shadow: none;
-}
-.pretty-text-underline::selection {
- background-color: rgba(0, 150, 255, 0.3);
- text-shadow: none;
-}
-```
-
-
-#### Explanation
-
-
-1. `text-shadow` uses 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use a larger `px` size. Additional values can create an even thicker shadow, and subpixel values can also be used.
-2. `background-image: linear-gradient(...)` creates a 90deg gradient using the text color (`currentColor`).
-3. The `background-*` properties size the gradient as 100% of the width of the block and 1px in height at the bottom and disables repetition, which creates a 1px underline beneath the text.
-4. The `::selection` pseudo selector rule ensures the text shadow does not interfere with text selection.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=css-textshadow
-- https://caniuse.com/#feat=css-gradients
-
-
-
Title
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui
- repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui
- iure, consequatur velit sit?
-
-
⚠️ MS Edge status is under consideration.
-
-- https://caniuse.com/#feat=css-all
-
-
-```
-
-```css
-.shape-separator {
- position: relative;
- height: 48px;
- background: #333;
-}
-.shape-separator::after {
- content: '';
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
- position: absolute;
- width: 100%;
- height: 12px;
- bottom: 0;
-}
-```
-
-
-#### Explanation
-
-
-1. `position: relative` on the element establishes a Cartesian positioning context for pseudo elements.
-2. `::after` defines a pseudo element.
-3. `background-image: url(...)` adds the SVG shape (a 24x12 triangle) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. For other shapes, we can use [the URL-encoder for SVG](http://yoksel.github.io/url-encoder/).
-4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
-5. `width: 100%` ensures the element stretches the entire width of its parent.
-6. `height: 12px` is the same height as the shape.
-7. `bottom: 0` positions the pseudo element at the bottom of the parent.
-
-
-#### Browser support
-
-100.0%
-
-- https://caniuse.com/#feat=svg
-
-This text uses the system font.
-```
-
-```css
-.system-font-stack {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
- Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-```
-
-
-#### Explanation
-
-
-- The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).
-
-1. `-apple-system` is San Francisco, used on iOS and macOS (not Chrome however)
-2. `BlinkMacSystemFont` is San Francisco, used on macOS Chrome
-3. `Segoe UI` is used on Windows 10
-4. `Roboto` is used on Android
-5. `Oxygen-Sans` is used on Linux with KDE
-6. `Ubuntu` is used on Ubuntu (all variants)
-7. `Cantarell` is used on Linux with GNOME Shell
-8. `"Helvetica Neue"` and `Helvetica` is used on macOS 10.10 and below (wrapped in quotes because it has a space)
-9. `Arial` is a font widely supported by all operating systems
-10. `sans-serif` is the fallback sans-serif font if none of the other fonts are supported
-
-
-#### Browser support
-
-100.0%
-
-` element to look like a toggle switch, and hiding the actual `` with the appropriate `` to create the circular knob.
-3. `input[type='checkbox']:checked + .switch::after` targets the ``'s pseudo-element's style when the checkbox is `checked`.
-4. `transform: translateX(20px)` moves the pseudo-element (knob) 20px to the right when the checkbox is `checked`.
-5. `background-color: #7983ff;` sets the background-color of the switch to a different color when the checkbox is `checked`.
-6. `.offscreen` moves the ``'s `background-color` and the pseudo-element's `transform` property when the checkbox is checked.
-
-
-#### Browser support
-
-100.0%
-
-⚠️ Requires prefixes for full support.
-
-- https://caniuse.com/#feat=transforms2d
-
-⚠️ Requires prefix for full support.
-
-- https://caniuse.com/#feat=transforms2d
-
-
-```
-
-```css
-.triangle {
- width: 0;
- height: 0;
- border-top: 20px solid #333;
- border-left: 20px solid transparent;
- border-right: 20px solid transparent;
-}
-```
-
-
-#### Explanation
-
-
-- [View this link for a detailed explanation.](https://stackoverflow.com/q/7073484)
-- The color of the border is the color of the triangle. The side the triangle tip points corresponds to the opposite `border-*` property. For example, a color on `border-top` means the arrow points downward.
-- Experiment with the `px` values to change the proportion of the triangle.
-
-
-#### Browser support
-
-100.0%
-
-
- Item 01
- Item 02
- Item 03
- Item 04
- Item 05
-
-```
-
-```css
-li:nth-child(odd) {
- background-color: #ddd;
-}
-```
-
-
-#### Explanation
-
-
-- Use the `:nth-child(odd)` or `:nth-child(even)` pseudo-class to apply a different background color to elements that match based on their position in a group of siblings.
-- Note that you can use it to apply different styles to other HTML elements like div, tr, p, ol, etc.
-
-
-#### Browser support
-
-100.0%
-
-https://caniuse.com/#feat=css-sel3
-
-
-
-);
-
-export default BackArrowIcon;
diff --git a/src/docs/components/SVGs/ClipboardIcon.js b/src/docs/components/SVGs/ClipboardIcon.js
deleted file mode 100644
index e57f84b37..000000000
--- a/src/docs/components/SVGs/ClipboardIcon.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-const ClipboardIcon = ({ className, onClick }) => (
-
-
-);
-
-export default ClipboardIcon;
diff --git a/src/docs/components/SVGs/CollapseClosedIcon.js b/src/docs/components/SVGs/CollapseClosedIcon.js
deleted file mode 100644
index a72270988..000000000
--- a/src/docs/components/SVGs/CollapseClosedIcon.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-const CollapseClosedIcon = ({ className, onClick }) => (
-
-
-);
-
-export default CollapseClosedIcon;
diff --git a/src/docs/components/SVGs/CollapseOpenIcon.js b/src/docs/components/SVGs/CollapseOpenIcon.js
deleted file mode 100644
index bcd04cb22..000000000
--- a/src/docs/components/SVGs/CollapseOpenIcon.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-const CollapseOpenIcon = ({ className, onClick }) => (
-
-
-);
-
-export default CollapseOpenIcon;
diff --git a/src/docs/components/SVGs/DarkModeIcon.js b/src/docs/components/SVGs/DarkModeIcon.js
deleted file mode 100644
index 318423094..000000000
--- a/src/docs/components/SVGs/DarkModeIcon.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-const DarkModeIcon = ({ className, onClick }) => (
-
-
-);
-
-export default DarkModeIcon;
diff --git a/src/docs/components/SVGs/GithubIcon.js b/src/docs/components/SVGs/GithubIcon.js
deleted file mode 100644
index 5d2b2bb25..000000000
--- a/src/docs/components/SVGs/GithubIcon.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-const GithubIcon = ({ className, onClick }) => (
-
-
-);
-
-export default GithubIcon;
diff --git a/src/docs/components/SVGs/LightModeIcon.js b/src/docs/components/SVGs/LightModeIcon.js
deleted file mode 100644
index bb13cb19e..000000000
--- a/src/docs/components/SVGs/LightModeIcon.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-
-const LightModeIcon = ({ className, onClick }) => (
-
-
-);
-
-export default LightModeIcon;
diff --git a/src/docs/components/SVGs/ListIcon.js b/src/docs/components/SVGs/ListIcon.js
deleted file mode 100644
index 853b1a7b2..000000000
--- a/src/docs/components/SVGs/ListIcon.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-
-const ListIcon = ({ className, onClick }) => (
-
-
-);
-
-export default ListIcon;
diff --git a/src/docs/components/SVGs/SearchIcon.js b/src/docs/components/SVGs/SearchIcon.js
deleted file mode 100644
index 763ae3ea9..000000000
--- a/src/docs/components/SVGs/SearchIcon.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-const SearchIcon = ({ className, onClick }) => {
- return (
-
-
- );
-};
-
-export default SearchIcon;
diff --git a/src/docs/components/SVGs/ShareIcon.js b/src/docs/components/SVGs/ShareIcon.js
deleted file mode 100644
index 8e78b671e..000000000
--- a/src/docs/components/SVGs/ShareIcon.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-const ShareIcon = ({ className, onClick }) => (
-
-
-);
-
-export default ShareIcon;
diff --git a/src/docs/components/Search.js b/src/docs/components/Search.js
deleted file mode 100644
index 5b2903d43..000000000
--- a/src/docs/components/Search.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-// ===================================================
-// Simple, stateful search component
-// ===================================================
-const Search = ({ defaultValue = '', setSearchQuery, className = '' }) => {
- const [value, setValue] = React.useState(defaultValue);
-
- React.useEffect(() => {
- setSearchQuery(value);
- }, [value]);
-
- return (
-
- {/* Menu */}
-
-
-
-
- {isDarkMode ? (
- dispatch(toggleDarkMode(!isDarkMode))}
- />
- ) : (
- dispatch(toggleDarkMode(!isDarkMode))}
- />
- )}
-
-
- {/* Content */}
-
- {withTitle ? (
-
- {data.site.siteMetadata.title}
- {withIcon ? (
-
- ) : (
- ''
- )}
- {children}
-
-
-
- {title}
-
-
- {children}
-
-
-
- {snippetData.title}
- {tags.map(tag => (
- {tag}
- ))}
-
-
-
-
-
HTML
-
-
CSS
-
- {
- cardCodeJs && <>
-
JavaScript
-
-
- }
-
Demo
-
-
-
- {
- cardCodeJs &&
-
- }
-
-
- Explanation
-
- Browser support
- {snippetData.supportPercentage.toFixed(1)}%
-
-
-
-
-
-
-
-
Demo
-
-
-
-
- 404
-
-
- Page not found
-
-
- Seems like you have reached a page that does not exist.
-
-
-
-
- Go home
-
-
-
-);
-
-export default connect(
- state => ({
- isDarkMode: state.app.isDarkMode,
- lastPageTitle: state.app.lastPageTitle,
- lastPageUrl: state.app.lastPageUrl,
- searchQuery: state.app.searchQuery,
- }),
- null,
-)(NotFoundPage);
diff --git a/src/docs/pages/about.js b/src/docs/pages/about.js
deleted file mode 100644
index c927303f0..000000000
--- a/src/docs/pages/about.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-
-import Shell from '../components/Shell';
-import Meta from '../components/Meta';
-import SimpleCard from '../components/SimpleCard';
-
-// ===================================================
-// About page
-// ===================================================
-const AboutPage = ({ isDarkMode }) => (
- <>
-
- About
-
- A few word about us, our goals and our projects.
-
-
-
- The core goal of 30 seconds is to provide a quality resource for beginner and advanced developers alike. We want to help improve the software development ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones.
-
-
- We believe that coding has to be easily accesible and this is why we provide all of our resources for free. Meanwhile, we try to constantly engage the open source community both as a means to understand the needs of our fellow developers and as an opportunity for people to actively participate in open source software.
-
-
-
-
- In order to help grow the open source community, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds.
-
-
- The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready. We strive, however, to keep our collections up to date and add content as often as possible to ensure we cover a wide variety of topics and techniques.
-
-
-
-
- The 30 seconds movement started back in December, 2017, with the release of 30 seconds of code by Angelos Chalaris . Since then, hundreds of developers have contributed snippets to over 6 repositories, creating a thriving community of people willing to help each other write better code.
-
-
- In late 2018, the 30 seconds organization was formed on GitHub, in order to expand upon existing projects and ensure that they will remain high-quality resources in the future.
-
-
-
-
- The 30 seconds movement and, to some extent, the associated GitHub organization consists of all the people who have invested time and ideas to be part of this amazing community. Meanwhile, these fine folks are currently responsible for maintaining the codebases and dealing with organizational matters:
-
-
-
-
-
-
- In order for the code provided via the 30 seconds projects to be as accessible and useful as possible, all of the snippets in these collections are licensed under the CC0-1.0 License meaning they are absolutely free to use in any project you like. If you like what we do, you can always credit us, but that is not mandatory.
-
-
- Logos, names and trademarks are not to be used without the explicit consent of the maintainers or owners of the 30 seconds GitHub organization. The only exception to this is the usage of the 30-seconds-of- name in open source projects, licensed under the CC0-1.0 License and hosted on GitHub, if their README and website clearly states that they are unofficial projects and in no way affiliated with the organization.
-
-
-
-
-);
-
-export default connect(
- state => ({
- isDarkMode: state.app.isDarkMode,
- lastPageTitle: state.app.lastPageTitle,
- lastPageUrl: state.app.lastPageUrl,
- searchQuery: state.app.searchQuery,
- }),
- null,
-)(AboutPage);
diff --git a/src/docs/pages/index.js b/src/docs/pages/index.js
deleted file mode 100644
index c44201b4c..000000000
--- a/src/docs/pages/index.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import React from 'react';
-import { graphql, Link } from 'gatsby';
-import { connect } from 'react-redux';
-import { pushNewPage } from '../state/app';
-import { capitalize } from '../util';
-
-import Shell from '../components/Shell';
-import Meta from '../components/Meta';
-import SnippetCard from '../components/SnippetCard';
-import SimpleCard from '../components/SimpleCard';
-
-// ===================================================
-// Snippet list page
-// ===================================================
-const ListPage = props => {
- const snippets = props.data.snippetDataJson.data.map(snippet => ({
- title: snippet.title,
- html: props.data.allMarkdownRemark.edges.find(
- v => v.node.frontmatter.title === snippet.title,
- ).node.html,
- tags: snippet.attributes.tags,
- text: snippet.attributes.text,
- id: snippet.id,
- code: snippet.attributes.codeBlocks,
- supportPercentage: snippet.attributes.browserSupport.supportPercentage,
- }));
- const tags = snippets.reduce((acc, snippet) => {
- if (!snippet.tags) return acc;
- const primaryTag = snippet.tags[0];
- if (!acc.includes(primaryTag)) acc.push(primaryTag);
- return acc;
- }, []);
- const staticPages = [
- {
- url: 'about',
- title: 'About',
- description: 'A few word about us, our goals and our projects.'
- }
- ];
-
- React.useEffect(() => {
- props.dispatch(pushNewPage('Snippet List', '/'));
- }, []);
-
- return (
- <>
-
-
-
-
-
-
-
-
-
CSS')}`
- }}
- />
-
- {props.data.site.siteMetadata.description}
-
-
-
-
Snippet List
-
- Click on a snippet’s name to view its code or a tag name to view all
- snippets in that category.
-
- {tags.sort((a,b) => a.localeCompare(b)).map(tag => (
- <>
-
-
- {snippets
- .filter(snippet => snippet.tags[0] === tag)
- .map(snippet => (
-
- {page.title}
-
- )}
- >
- {page.description}
-
- ))}
-
-
- );
-};
-
-export default connect(
- state => ({
- isDarkMode: state.app.isDarkMode,
- lastPageTitle: state.app.lastPageTitle,
- lastPageUrl: state.app.lastPageUrl,
- searchQuery: state.app.searchQuery,
- }),
- null,
-)(ListPage);
-
-export const listPageQuery = graphql`
- query snippetListing {
- site {
- siteMetadata {
- title
- description
- author
- }
- }
- file(relativePath: { eq: "30s-icon.png" }) {
- id
- childImageSharp {
- original {
- src
- }
- }
- }
- leaves1 : file(relativePath: { eq: "leaves1.png" }) {
- id
- childImageSharp {
- original {
- src
- }
- }
- }
- leaves2 : file(relativePath: { eq: "leaves2.png" }) {
- id
- childImageSharp {
- original {
- src
- }
- }
- }
- blob : file(relativePath: { eq: "blob.png" }) {
- id
- childImageSharp {
- original {
- src
- }
- }
- }
- snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
- data {
- id
- title
- attributes {
- tags
- text
- codeBlocks {
- html
- css
- js
- scopedCss
- }
- browserSupport {
- supportPercentage
- }
- }
- }
- }
- allMarkdownRemark(
- limit: 1000
- sort: { fields: [frontmatter___title], order: ASC }
- ) {
- totalCount
- edges {
- node {
- id
- html
- rawMarkdownBody
- fields {
- slug
- }
- frontmatter {
- title
- tags
- }
- }
- }
- }
- }
-`;
diff --git a/src/docs/pages/search.js b/src/docs/pages/search.js
deleted file mode 100644
index e8e386d0d..000000000
--- a/src/docs/pages/search.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React from 'react';
-import { graphql } from 'gatsby';
-import { connect } from 'react-redux';
-import { pushNewPage, pushNewQuery } from '../state/app';
-
-import Shell from '../components/Shell';
-import Meta from '../components/Meta';
-import Search from '../components/Search';
-import SnippetCard from '../components/SnippetCard';
-
-import { getRawCodeBlocks as getCodeBlocks } from '../util';
-
-// ===================================================
-// Search page
-// ===================================================
-const SearchPage = props => {
- const snippets = props.data.snippetDataJson.data.map(snippet => ({
- title: snippet.title,
- html: props.data.allMarkdownRemark.edges.find(
- v => v.node.frontmatter.title === snippet.title,
- ).node.html,
- tags: snippet.attributes.tags,
- text: snippet.attributes.text,
- id: snippet.id,
- code: snippet.attributes.codeBlocks,
- supportPercentage: snippet.attributes.browserSupport.supportPercentage,
- }));
-
- const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
- const [searchResults, setSearchResults] = React.useState(snippets);
-
- React.useEffect(() => {
- props.dispatch(pushNewQuery(searchQuery));
- let q = searchQuery.toLowerCase();
- let results = snippets;
- if (q.trim().length)
- results = snippets.filter(
- v =>
- v.tags.filter(t => t.indexOf(q) !== -1).length ||
- v.title.toLowerCase().indexOf(q) !== -1,
- );
- setSearchResults(results);
- }, [searchQuery]);
-
- React.useEffect(() => {
- props.dispatch(pushNewPage('Search', '/search'));
- }, []);
-
- return (
- <>
-
- Click on a snippet's name to view its code.
- {/* Display page background or results depending on state */}
- {searchQuery.length === 0 ? (
- <>
-
-
- Start typing a keyword to see matching snippets.
-
-
-
- No results found
-
-
- We couldn't find any results for the keyword{' '}
- {searchQuery} .
-
-
Search results
- {searchResults.map(snippet => (
-
-
- );
-};
-
-export default connect(
- state => ({
- isDarkMode: state.app.isDarkMode,
- lastPageTitle: state.app.lastPageTitle,
- lastPageUrl: state.app.lastPageUrl,
- searchQuery: state.app.searchQuery,
- }),
- null,
-)(SearchPage);
-
-export const searchPageQuery = graphql`
- query searchSnippetList {
- snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
- data {
- id
- title
- attributes {
- tags
- text
- codeBlocks {
- html
- css
- js
- scopedCss
- }
- browserSupport {
- supportPercentage
- }
- }
- }
- }
- allMarkdownRemark(
- limit: 1000
- sort: { fields: [frontmatter___title], order: ASC }
- ) {
- totalCount
- edges {
- node {
- id
- html
- rawMarkdownBody
- fields {
- slug
- }
- frontmatter {
- title
- tags
- }
- }
- }
- }
- }
-`;
diff --git a/src/docs/state/ReduxWrapper.js b/src/docs/state/ReduxWrapper.js
deleted file mode 100644
index 5daacf556..000000000
--- a/src/docs/state/ReduxWrapper.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import { createStore as reduxCreateStore } from 'redux';
-import rootReducer from '.';
-
-const createStore = () => reduxCreateStore(rootReducer);
-
-// ===================================================
-// Wrapper for Gatsby
-// ===================================================
-export default ({ element }) => (
- {element}
-);
diff --git a/src/docs/state/app.js b/src/docs/state/app.js
deleted file mode 100644
index 546e6fde4..000000000
--- a/src/docs/state/app.js
+++ /dev/null
@@ -1,49 +0,0 @@
-// Defalt state
-const initialState = {
- isDarkMode: false,
- lastPageTitle: 'Home',
- lastPageUrl: '/',
- searchQuery: '',
-};
-
-// Actions
-const TOGGLE_DARKMODE = 'TOGGLE_DARKMODE';
-const PUSH_NEW_PAGE = 'PUSH_NEW_PAGE';
-const PUSH_NEW_QUERY = 'PUSH_NEW_QUERY';
-export const toggleDarkMode = isDarkMode => ({
- type: TOGGLE_DARKMODE,
- isDarkMode,
-});
-export const pushNewPage = (pageTitle, pageUrl) => ({
- type: PUSH_NEW_PAGE,
- pageTitle,
- pageUrl,
-});
-export const pushNewQuery = query => ({
- type: PUSH_NEW_QUERY,
- query,
-});
-
-// Reducer
-export default (state = initialState, action) => {
- switch (action.type) {
- case TOGGLE_DARKMODE:
- return {
- ...state,
- isDarkMode: action.isDarkMode,
- };
- case PUSH_NEW_PAGE:
- return {
- ...state,
- lastPageTitle: action.pageTitle,
- lastPageUrl: action.pageUrl,
- };
- case PUSH_NEW_QUERY:
- return {
- ...state,
- searchQuery: action.query,
- };
- default:
- return state;
- }
-};
diff --git a/src/docs/state/index.js b/src/docs/state/index.js
deleted file mode 100644
index 1ee96d387..000000000
--- a/src/docs/state/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { combineReducers } from 'redux';
-import app from './app';
-
-export default combineReducers({ app });
diff --git a/src/docs/styles/_button.scss b/src/docs/styles/_button.scss
deleted file mode 100644
index 2eb80d6fa..000000000
--- a/src/docs/styles/_button.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-// ===================================================
-// Buttons
-// ===================================================
-.button, a.button {
- color: var(--button-fore-color);
- font-weight: 500;
- font-size: 1.125rem;
- line-height: 1.4;
- transition: 0.3s ease all;
- padding: 0.625rem 0.875rem;
- margin-top: 0.75rem;
- border-radius: 1rem;
- display: inline-block;
- box-shadow: 0px 4px 8px var(--button-shadow-color);
- border: none;
- cursor: pointer;
- &:hover, &:focus {
- box-shadow: 0px 8px 16px var(--button-shadow-color);
- text-decoration: none;
- outline: none;
- }
- &.button-a {
- background: var(--button-back-color-a);
- }
- &.button-b {
- background: var(--button-back-color-b);
- }
- svg {
- vertical-align: sub;
- }
- @media screen and (min-width: $layout-large-breakpoint) {
- font-size: 1.375rem;
- line-height: 1.35;
- }
-}
-
-// Home button (404 page)
-.button.button-home {
- @media screen and (min-width: $layout-large-breakpoint) {
- margin-top: 1.375rem;
- }
-}
-
-// Copy and share buttons (snippet card)
-.button.button-copy {
- position: absolute;
- top: -32px;
- right: 24px;
- padding: 0.5rem 0.625rem;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard' %3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
- background-repeat: no-repeat;
- background-position: center;
- width: 44px;
- height: 44px;
- z-index: 10;
-}
-.button.button-social-sh {
- position: absolute;
- top: -32px;
- right: 80px;
- padding: 0.5rem 0.625rem;
-}
-
-// Show/hide examples button (snippet card)
-.button.button-example-toggler {
- position: relative;
- margin: -2rem 0px -1rem 0px;
- background: var(--pre-back-color);
- border-radius: 0px 0px 0.125rem 0.125rem;
- width: calc(100%);
- text-align: left;
- display: block;
- font-size: 0.875rem;
- line-height: 1.35;
- text-transform: uppercase;
- font-weight: 300;
- color: var(--button-example-toggler-fore-color);
- box-shadow: none;
- font-family: 'Roboto Mono', Menlo, Consolas, monospace;
- &:hover, &:focus {
- box-shadow: none;
- }
- svg {
- margin-right: 0.125rem;
- }
-}
-
-.button.button-codepen {
- display: block;
- margin: 0.25rem calc(50% - 3rem);
- min-width: 176px;
- font-size: 0.875rem;
- border-radius: 0.5rem;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-codepen'%3E%3Cpolygon points='12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2'%3E%3C/polygon%3E%3Cline x1='12' y1='22' x2='12' y2='15.5'%3E%3C/line%3E%3Cpolyline points='22 8.5 12 15.5 2 8.5'%3E%3C/polyline%3E%3Cpolyline points='2 15.5 12 8.5 22 15.5'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='8.5'%3E%3C/line%3E%3C/svg%3E");
- background-repeat: no-repeat;
- background-position-y: center;
- background-position-x: 0.5rem;
- padding-left: 2.25rem
-}
-
-.button.button-view {
- font-size: 0.875rem;
- border-radius: 0.5rem;
- padding-left: 1rem;
- padding-right: 1rem;
-}
\ No newline at end of file
diff --git a/src/docs/styles/_card.scss b/src/docs/styles/_card.scss
deleted file mode 100644
index 9641671d5..000000000
--- a/src/docs/styles/_card.scss
+++ /dev/null
@@ -1,223 +0,0 @@
-// ===================================================
-// Cards
-// ===================================================
-.card {
- backface-visibility: hidden;
- will-change: transform;
- position: relative;
- transition: all 0.3s ease;
- margin: 1rem 1.25rem;
- background: var(--card-back-color);
- color: var(--card-fore-color);
- box-shadow: 0px 0px 1px var(--card-shadow-color-a), 0px 6px 12px var(--card-shadow-color-b);
- border-radius: 0.125rem;
- padding: 1rem 1rem 3.25rem;
- .card-title {
- font-size: 1.5rem;
- line-height: 1.375;
- font-weight: 700;
- margin: 0px 0px 1.25rem;
- color: var(--card-fore-color-light);
- a, a:link, a:visited {
- font-weight: 700;
- transition: 0.3s ease all;
- color: var(--card-fore-color-light);
- }
- padding-bottom: 0.5rem;
- border-bottom: 1px solid var(--card-border-color);
- }
- .card-description {
- margin: 0.125rem -0.5rem 0.125rem;
- font-size: 0.875rem;
- color: var(--card-fore-color-light);
- line-height: 1.35;
- font-weight: 500;
- }
- .card-bottom {
- position: relative;
- margin-left: -1rem;
- margin-right: -1rem;
- border-radius: 0.125rem;
- border-top-left-radius: 22px;
- width: calc(100% - 2rem);
- }
- .card-code {
- position: relative;
- margin: 0.25rem 0px 0rem 1rem;
- background: var(--pre-back-color);
- width: 100%;
- border-radius: 0.25rem;
- line-height: 1.15;
- padding: 1rem;
- }
- .card-examples {
- transition: all 0.3s ease;
- position: relative;
- margin: 0.5rem 0px -1rem 0px;
- background: var(--pre-back-color);
- width: calc(100% - 52px);
- border-radius: 0px 0px 0.125rem 0.125rem;
- line-height: 1.15;
- padding: 0.5rem 1.125rem 2.25rem 2.125rem;
- &::before {
- display: block;
- content: '';
- position: absolute;
- left: 21px;
- top: 0;
- width: 1px;
- opacity: 0.75;
- height: calc(100% - 24px);
- background: var(--button-example-toggler-fore-color);
- }
- }
- &.short {
- margin-bottom: 2rem;
- }
-}
-
-// Card sections
-.card-section-title {
- font-size: 0.875rem;
- color: var(--card-back-color);
- display: inline-block;
- padding: 0 0.5rem;
- line-height: 2;
- border-radius: 0.125rem;
- margin: 1.25rem 1rem 0.125rem 1rem;
- font-weight: 700;
- &.card-section-html {
- color: white;
- background-image: linear-gradient(135deg,#ff4c9f,#ff7b74);
- }
- &.card-section-css {
- color: white;
- background-image: linear-gradient(135deg,#7983ff,#5f9de9);
- }
- &.card-section-js {
- color: white;
- background-image: linear-gradient(135deg,#ffb000,#f58818);
- }
-}
-
-.card-section-demo-title, .card-section-explanation-title,.card-section-browser-support-title {
- transition: 0.3s ease all;
- margin: 0.5rem 1rem .5rem;
- color: var(--card-fore-color-light);
- font-size: 1rem;
- font-weight: 700;
- line-height: 2.25;
-}
-
-.card-explanation, .card-browser-support {
- transition: 0.3s ease all;
- margin: 0.5rem;
- p, li {
- line-height: 1.75;
- margin-bottom: 0.5rem;
- }
- position: relative;
- width: calc( 100% + 3rem);
- display: block;
-}
-
-.card-browser-support {
- transition: 0.3s ease all;
- margin: 1rem;
-}
-
-.browser-support-data {
- transition: 0.3s ease all;
- font-size: 1.75rem;
- font-weight: 300;
- color: var(--card-fore-color-light);
- line-height: 1;
- margin: 0.5rem 1rem .5rem;
-}
-
-.card-snippet-demo {
- transition: 0.3s ease all;
- width: calc(100% - 0.25rem);
- margin: 0.5rem 1rem .5rem;
- background:var(--back-color);
- border-radius: .25rem;
- padding: .75rem 1.25rem;
-}
-
-// Tags
-:not(.token).tag {
- transition: 0.3s ease all;
- border: 1px solid var(--tag-border-color);
- border-radius: 0.125rem;
- color: var(--tag-fore-color);
- text-transform: uppercase;
- margin: 0px 0.375rem 0.25rem 0px;
- display: inline-block;
- padding: 0.125rem 0.5rem;
- letter-spacing: 0.25px;
- font-size: 0.75rem;
- vertical-align: 0.125rem;
- line-height: 2;
- font-weight: 600;
- &:first-of-type {
- margin-top: 0.375rem;
- }
- background-repeat: no-repeat;
- padding-left: 1.5rem;
- background-position-x: 0.375rem;
- background-position-y: center;
- background-size: 14px;
-}
-
-.tag-animation {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-loader'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E");
-}
-.tag-visual {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-eye'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
-}
-.tag-other {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-tag'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7' y2='7'%3E%3C/line%3E%3C/svg%3E");
-}
-.tag-interactivity {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-edit-2'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");
-}
-.tag-layout {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-layout'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='3' y1='9' x2='21' y2='9'%3E%3C/line%3E%3Cline x1='9' y1='21' x2='9' y2='9'%3E%3C/line%3E%3C/svg%3E");
-}
-
-.page-container.dark {
- .tag-animation {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-loader'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E");
- }
- .tag-visual {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-eye'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
- }
- .tag-other {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-tag'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7' y2='7'%3E%3C/line%3E%3C/svg%3E");
- }
- .tag-interactivity {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-edit-2'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");
- }
- .tag-layout {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-layout'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='3' y1='9' x2='21' y2='9'%3E%3C/line%3E%3Cline x1='9' y1='21' x2='9' y2='9'%3E%3C/line%3E%3C/svg%3E");
- }
-}
-
-.clickable-card-wrapper {
- &:link, &:visited {
- &:hover, &:focus {
- text-decoration: none;
- .card {
- transform: scale(1.025);
- }
- }
- }
-}
-
-.snippet-view {
- text-align: center;
- width: calc(100% + 2.75rem);
- position: absolute;
- margin-left: 0.75rem;
- bottom: -3.375rem;
-}
\ No newline at end of file
diff --git a/src/docs/styles/_code.scss b/src/docs/styles/_code.scss
deleted file mode 100644
index 2e4140b6d..000000000
--- a/src/docs/styles/_code.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-// Style code
-code, kbd, pre {
- font-size: 0.875em;
-}
-code, kbd, pre, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
- font-family: 'Roboto Mono', Menlo, Consolas, monospace;
-}
-
-code {
- background: var(--code-back-color);
- color: var(--code-fore-color);
- padding: 0.125rem 0.375rem;
- border-radius: 0.125rem;
-}
-pre {
- overflow: auto; // Responsiveness
- background: var(--pre-back-color);
- color: var(--pre-fore-color);
- padding: 0.375rem;
- margin: 0.5rem;
- border: 0;
-}
-
-code[class*="language-"], pre[class*="language-"] {
- color: var(--pre-fore-color);
-
- text-align: left;
- white-space: pre;
- word-spacing: normal;
- word-break: normal;
- word-wrap: normal;
- line-height: 1.8;
-
- -moz-tab-size: 2;
- -o-tab-size: 2;
- tab-size: 2;
-
- -webkit-hypens: none;
- -moz-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
-}
-
-pre[class*="language-"] {
- padding: 1rem;
- overflow: auto;
- margin: 0.5rem 0;
- white-space: pre-wrap;
- font-size: 1rem;
- line-height: 2;
-}
-
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
- background: var(--pre-selected-color);
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
- background: var(--pre-selected-color);
-}
-
-:not(pre) > code[class*="language-"] {
- padding: .25em .375;
- border-radius: .3em;
- white-space: normal;
- border: 1px solid var(--code-border-color);
-}
-
-.namespace {
- opacity: .7;
-}
-
-.token {
- &.comment, &.prolog, &.doctype, &.cdata {
- color: var(--token-color-a);
- }
- &.punctuation {
- color: var(--token-color-b);
- }
- &.tag, &.boolean, &.constant, &.symbol, &.deleted, &.function {
- color: var(--token-color-c);
- }
- &.number, &.class-name {
- color: var(--token-color-d);
- }
- &.selector, &.attr-name, &.string, &.char, &.builtin, &.inserted {
- color: var(--token-color-e);
- }
- &.operator, &.entity, &.url, &.atrule, &.attr-value, &.keyword, &.interpolation-punctuation {
- color: var(--token-color-f);
- }
- &.regex {
- color: var(--token-color-g);
- }
- &.property {
- color: var(--token-color-i);
- }
- &.important, &.variable {
- color: var(--token-color-h);
- }
- &.italic, &.comment {
- font-style: italic;
- }
- &.important, &.bold {
- font-weight: 500;
- }
- &.entity {
- cursor: help;
- }
-}
-.language-css .token.string, .style .token.string {
- color: var(--token-color-f);
-}
-
-p > code, a > code, li > code {
- &, &[class*="language-"] {
- color: var(--code-fore-color);
- background: var(--code-back-color);
- &::-moz-selection, & ::-moz-selection {
- background: var(--code-selected-color);
- }
- &::selection, & ::selection {
- background: var(--code-selected-color);
- }
- }
-}
-
-.token .token {
- background: transparent;
-}
\ No newline at end of file
diff --git a/src/docs/styles/_colors.scss b/src/docs/styles/_colors.scss
deleted file mode 100644
index 39008e824..000000000
--- a/src/docs/styles/_colors.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-:root {
- // Interface color palette
- --back-color: #f5f6fa;
- --back-color-dark: #D7DDF3;
- --fore-color: #404454;
- --fore-color-light: #575E7A;
- --fore-color-lighter: #666E8F;
- --fore-color-dark: #1F253D;
- --fore-color-darker: #060709;
-
- // Scrollbar
- --scrollbar-back-color: #D7DDF3;
- --scrollbar-fore-color: #666E8F;
-
- // Menu color palette
- --menu-back-color: #FFFFFF;
- --menu-border-color: #E4E6EC;
- --menu-fore-color: #53586A;
- --menu-active-fore-color: #2747C7;
-
- // Card corner palette
- --beginner-color: #7CB342;
- --intermediate-color: #FFB300;
- --advanced-color: #D66361;
-
- // Search color palette
- --search-back-color: #FFFFFF;
- --search-fore-color: #0D0E17;
- --search-placeholder-color: #C5C6CD;
- --search-shadow-color: rgba(0, 32, 128, 0.1);
- --search-shadow-focus-color: rgba(0, 32, 128, 0.17);
-
- // Button color palette
- --button-back-color-a: #3B3EFC;
- --button-back-color-b: #5d79ff;
- --button-fore-color: #FFFFFF;
- --button-shadow-color: rgba(0, 0, 0, 0.25);
- --button-shadow-focus-color: rgba(0, 0, 0, 0.29);
- --button-example-toggler-fore-color: #607d8b;
-
- // Card color palette
- --card-back-color: #FFFFFF;
- --card-fore-color: #212121;
- --card-border-color: #E4E6EC;
- --card-fore-color-light: #424242;
- --card-shadow-color-a: rgba(240, 242, 247, 0.1);
- --card-shadow-color-b: rgba(0, 32, 128, 0.1);
-
- // Pre & Code color palette
- --pre-fore-color: #d7ecff;
- --pre-back-color: #1e253d;
- --pre-selected-color: #041248;
-
- // Token color palette
- --token-color-a: #8ca2d3; // Comments
- --token-color-b: #5ac8e3; // Punctuation
- --token-color-c: #25d0e5; // Functions
- --token-color-d: #ff8f00; // Numbers
- --token-color-e: #ffd694; // Strings
- --token-color-f: #b7adff; // Keywords
- --token-color-g: #26c6da; // Regular expressions
- --token-color-h: #e57373; // Variables
- --token-color-i: #85b4ff; // Property
-
- // Tag color palette
- --tag-border-color: #D7DDF3;
- --tag-fore-color: #616B8F;
-
- // Toast color palette
- --toast-back-color: #05A864;
- --toast-fore-color: #FFFFFF;
- --toast-shadow-color: rgba(0, 32, 128, 0.26);
-
- // Link color palette
- --a-link-color: #0277bd;
- --a-visited-color: #01579b;
-
- // Code color palette
- --code-fore-color: #0324AB;
- --code-back-color: #fbf9ff;
- --code-border-color: #e0dbff;
- --code-selected-color: #BDEDFE;
-}
-
-// Dark mode colors
-.page-container.dark {
- // Interface color palette
- --back-color: #2A314C;
- --back-color-dark: #8993BE;
- --fore-color: #a4afd4;
- --fore-color-light: #bfc5de;
- --fore-color-lighter: #c4cbe2;
- --fore-color-dark: #d1d6ea;
- --fore-color-darker: #dee1f1;
-
- // Scrollbar
- --scrollbar-back-color: #434E76;
- --scrollbar-fore-color: #707899;
-
- // Menu color palette
- --menu-back-color: #434E76;
- --menu-border-color: #13151B;
- --menu-fore-color: #e0e3f2;
- --menu-active-fore-color: #CDD4EF;
-
- // Card corner palette remains unchanged for consistency
-
- // Search color palette
- --search-back-color: #434E76;
- --search-fore-color: #E8E9F2;
- --search-placeholder-color: #999EBD;
- --search-shadow-color: rgba(1, 8, 30, 0.24);
- --search-shadow-focus-color: rgba(1, 8, 30, 0.31);
-
- // Button color palette remains unchanged for consistency
-
- // Card color palette
- --card-back-color: #424d75;
- --card-fore-color: #f0f2f8;
- --card-border-color: #13151B;
- --card-fore-color-light: #e0e3f2; // previously C0C0C0, careful
- --card-shadow-color-b: rgba(1, 8, 30, 0.24);
-
- // Pre & Code color palette remains unchanged for consistency
-
- // Token color palette remains unchanged for consistency
-
- // Tag color palette
- --tag-border-color: #2A3765;
- --tag-fore-color: #BEC1CB; // previously 999DAD, careful
-
- // Toast color palette
- --toast-shadow-color: rgba(1, 8, 30, 0.44);
-
- // Link color palette
- --a-link-color: #6DC7FD;
- --a-visited-color: #5DB7FE;
-
- // Code color palette
- --code-fore-color: #d1dafe;
- --code-back-color: #45538c;
- --code-border-color: #3e3c75;
- --code-selected-color: #0dbcfb;
-
-}
\ No newline at end of file
diff --git a/src/docs/styles/_fonts.scss b/src/docs/styles/_fonts.scss
deleted file mode 100644
index 3dbbddce5..000000000
--- a/src/docs/styles/_fonts.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-// Load external fonts - progressive loading should help alleviate performance issues
-@font-face {
- font-family: 'Roboto Mono';
- font-style: normal;
- font-weight: 400;
- font-display: swap;
- src: local('Roboto Mono'), local('RobotoMono-Regular'), url(../../../assets/RobotoMono-Regular.woff2) format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
- font-family: 'Roboto Mono';
- font-style: italic;
- font-weight: 400;
- font-display: swap;
- src: local('Roboto Mono Italic'), local('RobotoMono-Italic'), url(../../../assets/RobotoMono-Italic.woff2) format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
- font-family: 'Roboto Mono';
- font-style: normal;
- font-weight: 500;
- src: local('Roboto Mono Medium'), local('RobotoMono-Medium'), url(../../../assets/RobotoMono-Medium.woff2) format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
- font-display: swap;
-}
-@font-face {
- font-family: 'Noto Sans';
- font-style: normal;
- font-weight: 300;
- font-display: swap;
- src: local('Noto Sans Light'), local('NotoSans-Light'), url(../../../assets/NotoSans-Light.woff2) format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
- font-family: 'Noto Sans';
- font-style: italic;
- font-weight: 300;
- font-display: swap;
- src: local('Noto Sans LightItalic'), local('NotoSans-LightItalic'), url(../../../assets/NotoSans-LightItalic.woff2) format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
- font-family: 'Noto Sans';
- font-style: normal;
- font-weight: 400;
- font-display: swap;
- src: local('Noto Sans'), local('NotoSans-Regular'), url(../../../assets/NotoSans-Regular.woff2) format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
- font-family: 'Noto Sans';
- font-style: italic;
- font-weight: 400;
- font-display: swap;
- src: local('Noto Sans Italic'), local('NotoSans-Italic'), url(../../../assets/NotoSans-Italic.woff2) format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
- font-family: 'Noto Sans';
- font-style: normal;
- font-weight: 500;
- font-display: swap;
- src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(../../../assets/NotoSans-Medium.woff2) format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
- font-family: 'Noto Sans';
- font-style: italic;
- font-weight: 500;
- font-display: swap;
- src: local('Noto Sans Medium Italic'), local('NotoSans-MediumItalic'), url(../../../assets/NotoSans-MediumItalic.woff2) format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
- font-family: 'Noto Sans';
- font-style: normal;
- font-weight: 600;
- font-display: swap;
- src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold'), url(../../../assets/NotoSans-SemiBold.woff2) format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
- font-family: 'Noto Sans';
- font-style: italic;
- font-weight: 600;
- font-display: swap;
- src: local('Noto Sans SemiBold Italic'), local('NotoSans-SemiBoldItalic'), url(../../../assets/NotoSans-SemiBoldItalic.woff2) format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
- font-family: 'Noto Sans';
- font-style: normal;
- font-weight: 700;
- font-display: swap;
- src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(../../../assets/NotoSans-Bold.woff2) format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
\ No newline at end of file
diff --git a/src/docs/styles/_layout.scss b/src/docs/styles/_layout.scss
deleted file mode 100644
index 79ee7aedb..000000000
--- a/src/docs/styles/_layout.scss
+++ /dev/null
@@ -1,410 +0,0 @@
-// ===================================================
-// Layout
-// ===================================================
-// Grid container
-.page-container {
- overflow: hidden;
- transition: 0.3s ease all;
- background: var(--back-color);
- display: grid;
- width: 100vw;
- height: 100vh;
- grid-template-areas: "content" "menu";
- grid-template-columns: 100%;
- grid-template-rows: calc(100vh - 62px) 62px;
- // Medium screen size (mobile landscape, tablet)
- @media screen and (min-width: $layout-medium-breakpoint) {
- grid-template-areas: "menu content";
- grid-template-columns: 62px calc(100vw - 62px);
- grid-template-rows: 100%;
- }
- // Large screen size (desktop, laptop)
- // @media screen and (min-width: $layout-large-breakpoint) {
- // grid-template-areas: "menu content";
- // // grid-template-columns: 62px calc((100vw - 830px) / 2) 768px calc((100vw - 830px) / 2);
- // }
-}
-// Menu container
-header.menu {
- grid-area: menu;
-}
-// Content container
-.content {
- transition: 0.3s ease all;
- grid-area: content;
- overflow: auto;
- overflow-x: hidden;
- background: var(--back-color);
- &::-webkit-scrollbar-track {
- background-color: var(--scrollbar-back-color);
- margin: 0.25rem 0;
- border-radius: 0.1875rem;
- }
- &::-webkit-scrollbar {
- width: 6px;
- background: transparent;
- }
- &::-webkit-scrollbar-thumb {
- background-color: var(--scrollbar-fore-color);
- border: 1px solid var(--scrollbar-fore-color-lighter);
- border-radius: 0.1875rem;
- }
- @media screen and (min-width: calc(768px + 62px)) {
- padding-left: calc((100% - 768px - 62px) / 2);
- padding-right: calc((100% - 768px - 62px) / 2);
- }
-}
-
-// Website title
-h1.website-title {
- transition: 0.3s ease all;
- font-size: 0.875rem;
- font-weight: 500;
- color: var(--fore-color-lighter);
- line-height: 1.5;
- position: relative;
- top: 4px;
- margin: 1.5rem 1.25rem 0.125rem;
- @media screen and (min-width: $layout-large-breakpoint) {
- font-size: 1rem;
- line-height: 1.375;
- }
-}
-// Website logo
-img.website-logo {
- transition: 0.3s ease all;
- position: absolute;
- top: 8px;
- right: 0px;
- width: 48px;
- height: 48px;
-}
-// Homepage logo
-.splash {
- position: relative;
- height: 369px;
- padding: 5rem 1rem 4rem;
- background: #5b67ff;
- background: linear-gradient(25deg,#95e2ff,#5f79ff,#8ed5ff);
- color: #fff;
- margin-bottom: 2rem;
- text-align: center;
- overflow: hidden;
- z-index: 1;
- &::after, &::before {
- content: "";
- position: absolute;
- left: 0;
- }
- &::before {
- width: 150%;
- height: 150%;
- top: 0;
- opacity: .1;
- z-index: -1;
- }
- &::after {
- transition: 0.3s ease all;
- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 0l12 12H0z' fill='%23f5f6fa'/%3E%3C/svg%3E");
- background-size: 24px 24px;
- width: 100%;
- height: 24px;
- bottom: -7px;
- z-index: 3;
- }
- @media screen and (min-width: $layout-large-breakpoint) {
- left: calc(1px - (100vw - 768px) / 2 + 62px -1px);
- width: calc(100vw - 62px);
- }
-}
-.page-container.dark {
- .splash::after {
- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 0l12 12H0z' fill='%232A314C'/%3E%3C/svg%3E");
- }
-}
-.splash-container {
- max-width: 64rem;
- padding: 0 2%;
- margin: 0 auto;
-}
-.splash-leaves {
- position: absolute;
- user-select: none;
- &#splash-leaves-1 {
- right: -100px;
- top: -50px;
- width: 250px;
- }
- &#splash-leaves-2 {
- left: -250px;
- bottom: -100px;
- backface-visibility: hidden;
- transform: translateZ(0) scale(1.0, 1.0) rotate(235deg);
- z-index: 2;
- width: 400px;
- }
-}
-#splash-blob {
- position: absolute;
- user-select: none;
- width: 240px;
- left: -25px;
- top: 50px;
-}
-.splash-content {
- position: relative;
- z-index: 3;
-}
-.splash-logo {
- height: 146px;
- user-select: none;
-}
-.splash-title {
- font-weight: 300;
- font-size: 2rem;
- margin: 1rem 0;
- line-height: 1.2;
- @media screen and (min-width: $layout-medium-breakpoint) {
- font-size: 3.75rem;
- }
-}
-.splash-sub-title {
- font-size: 1.125rem;
- max-width: 600px;
- margin: 0 auto 2rem;
- font-weight: 300;
- letter-spacing: .4px;
- @media screen and (min-width: $layout-medium-breakpoint) {
- font-size: 1.5rem;
- }
-}
-.splash ~ *:last-child {
- margin-bottom: 3rem;
-}
-
-// Page title
-.page-title {
- font-size: 2.25rem;
- font-weight: 400;
- line-height: 1.36;
- letter-spacing: 0.03em;
- color: var(--fore-color-darker);
- margin: 0 1.25rem;
- @media screen and (min-width: $layout-large-breakpoint) {
- font-size: 2.5rem;
- line-height: 1.35;
- }
-}
-// Page subtitle
-.page-sub-title {
- transition: 0.3s ease all;
- font-size: 1.125rem;
- line-height: 1.35;
- margin: 1rem 1.25rem 0.5rem;
- color: var(--fore-color);
- @media screen and (min-width: $layout-large-breakpoint) {
- font-size: 1.25rem;
- }
-}
-// Page light subtitle
-p.light-sub {
- transition: 0.3s ease all;
- color: var(--fore-color-light);
- font-size: 0.875rem;
- line-height: 1.5;
- margin: 0.125rem 1.25rem 0px;
- @media screen and (min-width: $layout-large-breakpoint) {
- font-size: 1rem;
- line-height: 1.375;
- }
-}
-// Category/tag title
-.tag-title {
- transition: 0.3s ease all;
- font-size: 1.5rem;
- color: var(-fore-color-dark);
- line-height: 1.375;
- text-align: center;
- a {
- &, &:link, &:visited {
- color: var(--fore-color-dark);
- }
- }
- font-weight: 400;
- cursor: pointer;
- margin: 1.5rem 1.25rem 0.5rem;
-}
-
-// Return to previous page link
-a.link-back {
- transition: 0.3s ease all;
- font-size: 1.125rem;
- line-height: 1.35;
- display: block;
- margin: 1rem 1.25rem 1.5rem;
- font-weight: 500;
- &, &:link, &:visited {
- color: var(--fore-color-dark);
- }
- &:hover, &:focus {
- text-decoration: none;
- }
- svg {
- vertical-align: middle;
- }
-}
-
-// About page maintainers card
-.flex-row {
- display: flex;
- flex: 0 1 auto;
- flex-flow: row wrap;
- .flex-item {
- flex: 0 0 auto;
- max-width: calc(50% - 24px);
- flex-basis: calc(50% - 24px);
- margin: 12px;
- @media screen and (min-width: $layout-large-breakpoint) {
- max-width: calc(25% - 24px);
- flex-basis: calc(25% - 24px);
- }
- .media-section {
- max-width: 100%;
- height: auto;
- border-radius: 0.5rem;
- }
- .button-section {
- font-size: 0.875rem;
- font-weight: 600;
- text-align: center;
- width: 100%;
- display: block;
- &, &:link, &:visited {
- font-weight: 600;
- color: var(--card-fore-color);
- }
- }
- }
-}
-
-// Page background graphic
-.page-graphic {
- position: relative;
- box-sizing: border-box;
- transition: all 0.3s ease;
- margin-top: 100px;
- width: 100%;
- height: calc(50vmin);
- &::before {
- top: 0;
- right: 27.5vmin;
- position: absolute;
- content: '';
- width: 45vmin;
- height: 44vmin;
- background-position-x: 52.5%, center;
- background-position-y: 1%, top;
- background-repeat: no-repeat;
- background-size: 45vmin, 44vmin;
- }
- padding-top: 46vmin;
- text-align: center;
- @media screen and (orientation: landscape) and (max-height: calc(#{$layout-medium-breakpoint} - 1px)) {
- margin-top: 2rem;
- padding-top: 38vmin;
- height: 40vmin;
- &::before {
- right: calc(50vw - 45vmin / 2 - 31px);
- }
- }
- @media screen and (min-width: $layout-large-breakpoint) {
- padding-top: 2vmin;
- padding-right: 400px;
- &::before {
- background-size: 395px, 393px;
- height: 400px;
- width: 400px;
- right: 1.125rem;
- margin-top: -2vmin;
- background-position-x: 95.5%, 93%;
- }
- }
-}
-
-// Empty page text
-.empty-page-text {
- transition: color 0.3s ease, background 0.3s ease;
- text-align: center;
- margin: 2.25rem auto 0.75rem;
- max-width: 200px;
- font-size: 1rem;
- line-height: 1.5;
- color: var(--fore-color-darker);
- font-weight: 400;
- @media screen and (min-width: $layout-medium-breakpoint) {
- max-width: 400px;
- }
- @media screen and (min-width: $layout-large-breakpoint) {
- font-size: 1.75rem;
- line-height: 1.35;
- margin: 2.25rem auto 1.375rem 1.25rem;
- &.search-page-text {
- margin-top: 12vmin;
- font-size: 1.375rem;
- line-height: 1.375;
- }
- }
-}
-.empty-page-subtext {
- transition: all 0.3s ease;
- text-align: center;
- font-size: 14px;
- font-weight: 400;
- line-height: 1.5;
- max-width: 200px;
- color: var(--fore-color-darker);
- margin: 0.5rem auto;
- @media screen and (min-width: $layout-medium-breakpoint) {
- max-width: 256px;
- }
- @media screen and (min-width: $layout-large-breakpoint) {
- font-size: 1.125rem;
- line-height: 1.375;
- }
-}
-// Background graphic styles and dark mode
-.search-empty::before {
- background-image: url("data:image/svg+xml,%3Csvg width='154' height='148' viewBox='0 0 154 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='72.7688' y1='68.1962' x2='88.5602' y2='83.9877' stroke='%23575E7A' stroke-width='2'/%3E%3Crect x='97.8234' y='75.055' width='76.9574' height='23.2664' rx='11.6332' transform='rotate(45 97.8234 75.055)' stroke='%23575E7A' stroke-width='2'/%3E%3Cpath d='M81.3085 50.7431C81.9744 47.8236 82.3261 44.7844 82.3261 41.6631C82.3261 35.0791 80.7613 28.8607 77.9834 23.3593' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M56.2702 3.70245C51.7367 1.95686 46.8116 1 41.663 1C19.2055 1 1 19.2055 1 41.663C1 64.1206 19.2055 82.3261 41.663 82.3261C59.2695 82.3261 74.2624 71.1364 79.9182 55.4806' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M62.1442 6.52702C65.6967 8.6023 68.9061 11.2009 71.6667 14.2172' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg width='152' height='150' viewBox='0 0 152 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M147.38 72.8499C153.437 95.1096 155.456 105.228 141.323 129.511C127.191 153.794 94.8556 149.747 72.6806 149.747C32.5402 149.747 0 117.131 0 76.8971C0 36.6632 34.5591 0 74.6995 0C114.84 0 141.323 50.5902 147.38 72.8499Z' fill='%23D7DDF3'/%3E%3C/svg%3E");
-}
-.search-no-results::before {
- background-image: url("data:image/svg+xml,%3Csvg width='154' height='148' viewBox='0 0 154 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='72.7688' y1='68.1962' x2='88.5602' y2='83.9877' stroke='%23575E7A' stroke-width='2'/%3E%3Crect x='97.8234' y='75.055' width='76.9574' height='23.2664' rx='11.6332' transform='rotate(45 97.8234 75.055)' stroke='%23575E7A' stroke-width='2'/%3E%3Cpath d='M81.3085 50.7432C81.9744 47.8236 82.3261 44.7844 82.3261 41.6631C82.3261 35.0792 80.7613 28.8607 77.9834 23.3593' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M56.2702 3.70245C51.7367 1.95686 46.8116 1 41.663 1C19.2055 1 1 19.2055 1 41.663C1 64.1206 19.2055 82.3261 41.663 82.3261C59.2695 82.3261 74.2624 71.1364 79.9182 55.4806' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M62.1442 6.52701C65.6967 8.60229 68.9061 11.2009 71.6667 14.2172' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11.3086 38.2034C11.3086 38.2034 13.5167 41.5575 16.9242 41.3193C20.3318 41.081 22.0516 37.4522 22.0516 37.4522M18.1449 58.7766C18.1449 58.7766 23.8094 54.872 31.061 54.3649C38.3125 53.8578 43.9281 56.9737 43.9281 56.9737M34.2526 36.599C34.2526 36.599 36.2089 39.9708 39.8682 39.7149C43.5276 39.459 44.9956 35.8478 44.9956 35.8478' stroke='%23575E7A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='152' height='150' viewBox='0 0 152 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M147.38 72.8499C153.437 95.1096 155.456 105.228 141.323 129.511C127.191 153.794 94.8556 149.747 72.6806 149.747C32.5402 149.747 0 117.131 0 76.8971C0 36.6632 34.5591 0 74.6995 0C114.84 0 141.323 50.5902 147.38 72.8499Z' fill='%23D7DDF3'/%3E%3C/svg%3E");
-}
-.page-not-found::before {
- background-image: url("data:image/svg+xml,%3Csvg width='160' height='109' viewBox='0 0 160 109' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.99999C1 4.134 4.13401 1 8 1H95.1429H152C155.866 1 159 4.13401 159 8V100.571C159 104.437 155.866 107.571 152 107.571H8C4.13401 107.571 1 104.437 1 100.571V7.99999Z' stroke='%23575E7A' stroke-width='2'/%3E%3Cline x1='1' y1='17.8571' x2='83.5714' y2='17.8571' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='100.429' y1='17.8571' x2='116.714' y2='17.8571' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='128.429' y1='17.8571' x2='159' y2='17.8571' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8.57138' cy='9.7142' r='1.85714' stroke='%23575E7A' stroke-width='2'/%3E%3Ccircle cx='17.7142' cy='9.7142' r='1.85714' stroke='%23575E7A' stroke-width='2'/%3E%3Ccircle cx='26.8573' cy='9.7142' r='1.85714' stroke='%23575E7A' stroke-width='2'/%3E%3Cline x1='33.9856' y1='38.2856' x2='41.4608' y2='45.7608' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='34.4762' y1='45.761' x2='41.9513' y2='38.2858' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='105.414' y1='38.2856' x2='112.889' y2='45.7608' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='105.905' y1='45.761' x2='113.38' y2='38.2858' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M49.8545 69.0772C49.8545 69.0772 57.5257 73.6485 72.1402 73.6485C86.7117 73.6485 94.4259 69.0771 94.4259 69.0771' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M72.1526 78.5698C72.3093 86.3002 68.3437 92.6498 63.2953 92.7521C58.2469 92.8544 54.0273 86.6706 53.8707 78.9402C53.8129 76.0901 54.3155 73.4277 55.2261 71.1969' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M64.6687 73.7268C64.8334 73.1997 64.5396 72.6388 64.0125 72.4741C63.4853 72.3093 62.9245 72.6031 62.7597 73.1303L64.6687 73.7268ZM61.8707 88.7359C61.9615 89.2807 62.4768 89.6487 63.0215 89.5579C63.5663 89.4671 63.9343 88.9519 63.8435 88.4071L61.8707 88.7359ZM62.7597 73.1303C61.2791 77.8683 60.9909 83.4569 61.8707 88.7359L63.8435 88.4071C63.009 83.4002 63.2922 78.1317 64.6687 73.7268L62.7597 73.1303Z' fill='%23575E7A'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='172' height='170' viewBox='0 0 172 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M85.7456 16.9208C110.886 -6.48267 132.959 -4.28052 156.498 15.4794C180.037 35.2393 174.047 84.4687 153.005 119.028C128.204 159.761 84.2197 174.845 40.8539 167.344C-2.51188 159.842 -6.55002 107.678 7.88005 65.9713C22.3101 24.2642 60.6055 40.3243 85.7456 16.9208Z' fill='%23D7DDF3'/%3E%3C/svg%3E%0A");
- background-position-x: 53.5%, center;
- background-position-y: 8.5%, top;
- background-size: 41vmin, 44vmin;
- &::before {
- background-size: 395px, 393px;
- height: 400px;
- width: 400px;
- right: 1.125rem;
- margin-top: -15vmin;
- background-position-x: 95.5%, 93%;
- }
- @media screen and (min-width: $layout-large-breakpoint) {
- background-size: 367px, 393px;
- background-position-x: 96.5%, 93%;
- }
-}
-.page-container.dark {
- .search-empty::before {
- background-image: url("data:image/svg+xml,%3Csvg width='154' height='148' viewBox='0 0 154 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='72.7688' y1='68.1962' x2='88.5602' y2='83.9877' stroke='%238993BE' stroke-width='2'/%3E%3Crect x='97.8234' y='75.055' width='76.9574' height='23.2664' rx='11.6332' transform='rotate(45 97.8234 75.055)' stroke='%238993BE' stroke-width='2'/%3E%3Cpath d='M81.3085 50.7431C81.9744 47.8236 82.3261 44.7844 82.3261 41.6631C82.3261 35.0791 80.7613 28.8607 77.9834 23.3593' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M56.2702 3.70245C51.7367 1.95686 46.8116 1 41.663 1C19.2055 1 1 19.2055 1 41.663C1 64.1206 19.2055 82.3261 41.663 82.3261C59.2695 82.3261 74.2624 71.1364 79.9182 55.4806' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M62.1442 6.52702C65.6967 8.6023 68.9061 11.2009 71.6667 14.2172' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg width='152' height='150' viewBox='0 0 152 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M147.38 72.8499C153.437 95.1096 155.456 105.228 141.323 129.511C127.191 153.794 94.8556 149.747 72.6806 149.747C32.5402 149.747 0 117.131 0 76.8971C0 36.6632 34.5591 0 74.6995 0C114.84 0 141.323 50.5902 147.38 72.8499Z' fill='%23555C7C'/%3E%3C/svg%3E");
- }
- .search-no-results::before {
- background-image: url("data:image/svg+xml,%3Csvg width='154' height='148' viewBox='0 0 154 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='72.7688' y1='68.1962' x2='88.5602' y2='83.9877' stroke='%238993BE' stroke-width='2'/%3E%3Crect x='97.8234' y='75.055' width='76.9574' height='23.2664' rx='11.6332' transform='rotate(45 97.8234 75.055)' stroke='%238993BE' stroke-width='2'/%3E%3Cpath d='M81.3085 50.7432C81.9744 47.8236 82.3261 44.7844 82.3261 41.6631C82.3261 35.0792 80.7613 28.8607 77.9834 23.3593' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M56.2702 3.70245C51.7367 1.95686 46.8116 1 41.663 1C19.2055 1 1 19.2055 1 41.663C1 64.1206 19.2055 82.3261 41.663 82.3261C59.2695 82.3261 74.2624 71.1364 79.9182 55.4806' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M62.1442 6.52701C65.6967 8.60229 68.9061 11.2009 71.6667 14.2172' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11.3086 38.2034C11.3086 38.2034 13.5167 41.5575 16.9242 41.3193C20.3318 41.081 22.0516 37.4522 22.0516 37.4522M18.1449 58.7766C18.1449 58.7766 23.8094 54.872 31.061 54.3649C38.3125 53.8578 43.9281 56.9737 43.9281 56.9737M34.2526 36.599C34.2526 36.599 36.2089 39.9708 39.8682 39.7149C43.5276 39.459 44.9956 35.8478 44.9956 35.8478' stroke='%238993BE' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='152' height='150' viewBox='0 0 152 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M147.38 72.8499C153.437 95.1096 155.456 105.228 141.323 129.511C127.191 153.794 94.8556 149.747 72.6806 149.747C32.5402 149.747 0 117.131 0 76.8971C0 36.6632 34.5591 0 74.6995 0C114.84 0 141.323 50.5902 147.38 72.8499Z' fill='%23555C7C'/%3E%3C/svg%3E");
- }
- .page-not-found::before {
- background-image: url("data:image/svg+xml,%3Csvg width='160' height='109' viewBox='0 0 160 109' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.99999C1 4.134 4.13401 1 8 1H95.1429H152C155.866 1 159 4.13401 159 8V100.571C159 104.437 155.866 107.571 152 107.571H8C4.13401 107.571 1 104.437 1 100.571V7.99999Z' stroke='%238993BE' stroke-width='2'/%3E%3Cline x1='1' y1='17.8571' x2='83.5714' y2='17.8571' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='100.429' y1='17.8571' x2='116.714' y2='17.8571' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='128.429' y1='17.8571' x2='159' y2='17.8571' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8.57138' cy='9.7142' r='1.85714' stroke='%238993BE' stroke-width='2'/%3E%3Ccircle cx='17.7142' cy='9.7142' r='1.85714' stroke='%238993BE' stroke-width='2'/%3E%3Ccircle cx='26.8573' cy='9.7142' r='1.85714' stroke='%238993BE' stroke-width='2'/%3E%3Cline x1='33.9856' y1='38.2856' x2='41.4608' y2='45.7608' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='34.4762' y1='45.761' x2='41.9513' y2='38.2858' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='105.414' y1='38.2856' x2='112.889' y2='45.7608' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='105.905' y1='45.761' x2='113.38' y2='38.2858' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M49.8545 69.0772C49.8545 69.0772 57.5257 73.6485 72.1402 73.6485C86.7117 73.6485 94.4259 69.0771 94.4259 69.0771' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M72.1526 78.5698C72.3093 86.3002 68.3437 92.6498 63.2953 92.7521C58.2469 92.8544 54.0273 86.6706 53.8707 78.9402C53.8129 76.0901 54.3155 73.4277 55.2261 71.1969' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M64.6687 73.7268C64.8334 73.1997 64.5396 72.6388 64.0125 72.4741C63.4853 72.3093 62.9245 72.6031 62.7597 73.1303L64.6687 73.7268ZM61.8707 88.7359C61.9615 89.2807 62.4768 89.6487 63.0215 89.5579C63.5663 89.4671 63.9343 88.9519 63.8435 88.4071L61.8707 88.7359ZM62.7597 73.1303C61.2791 77.8683 60.9909 83.4569 61.8707 88.7359L63.8435 88.4071C63.009 83.4002 63.2922 78.1317 64.6687 73.7268L62.7597 73.1303Z' fill='%238993BE'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='172' height='170' viewBox='0 0 172 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M85.7456 16.9208C110.886 -6.48267 132.959 -4.28052 156.498 15.4794C180.037 35.2393 174.047 84.4687 153.005 119.028C128.204 159.761 84.2197 174.845 40.8539 167.344C-2.51188 159.842 -6.55002 107.678 7.88005 65.9713C22.3101 24.2642 60.6055 40.3243 85.7456 16.9208Z' fill='%23555C7C'/%3E%3C/svg%3E%0A");
- }
-}
diff --git a/src/docs/styles/_menu.scss b/src/docs/styles/_menu.scss
deleted file mode 100644
index 0a93d93fc..000000000
--- a/src/docs/styles/_menu.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-// ===================================================
-// Menu
-// ===================================================
-.menu {
- // z-index: 8;
- transition: 0.3s ease all;
- // Menu container
- background: var(--menu-back-color);
- border-top: 1px solid var(--menu-border-color);
- @media screen and (max-width: calc(#{$layout-medium-breakpoint} - 1px)) {
- position: fixed;
- bottom: 0;
- width: 100vw;
- z-index: 1001;
- }
- @media screen and (min-width: $layout-medium-breakpoint) {
- border-top: none;
- border-right: 1px solid var(--menu-border-color);
- padding-top: 17vh;
- }
- @media screen and (min-width: $layout-large-breakpoint) {
- padding-top: 23.5vh;
- }
- // Menu buttons
- .menu-button {
- cursor: pointer;
- transition: 0.3s ease all;
- background: transparent;
- color: var(--menu-fore-color);
- display: inline-block;
- width: 25%;
- height: 61px;
- margin: 0;
- text-align: center;
- margin-top: 0.5rem;
- border: none;
- line-height: 61px;
- @media screen and (min-width: $layout-medium-breakpoint) {
- height: 12.5vh;
- width: 100%;
- margin-top: 1vh;
- margin-bottom: 4vh;
- line-height: 12.5vh;
- }
- @media screen and (min-width: $layout-large-breakpoint) {
- margin-bottom: 1vh;
- }
- &:hover, &:focus {
- outline: 0;
- color: var(--menu-active-fore-color);
- }
- &.active {
- color: var(--menu-active-fore-color);
- svg {
- color: var(--menu-active-fore-color);
- }
- }
- svg {
- color: var(--menu-fore-color);
- }
- &:last-of-type {
- vertical-align: top;
- }
- }
-}
diff --git a/src/docs/styles/_reset.scss b/src/docs/styles/_reset.scss
deleted file mode 100644
index e4744fb45..000000000
--- a/src/docs/styles/_reset.scss
+++ /dev/null
@@ -1,135 +0,0 @@
-// Set up some basic styling for everything
-html {
- font-size: 16px;
- scroll-behavior: smooth;
-}
-html, * {
- font-family: 'Noto Sans', Helvetica, sans-serif;
- line-height: 1.5;
- // Prevent adjustments of font size after orientation changes in mobile.
- -webkit-text-size-adjust: 100%;
-}
-* {
- font-size: 1rem;
- font-weight: 400;
-}
-// Apply fixes and defaults as necessary for modern browsers only
-a, b, del, em, i, ins, q, span, strong, u {
- transition: 0.3s ease all;
- font-size: 1em; // Fix for elements inside headings not displaying properly.
-}
-body {
- margin: 0;
- color: var(--fore-color);
- background: var(--background-color);
- overflow-x: hidden;
- &.card-page {
- background: var(--card-page-color);
- }
-}
-// Correct display for Edge & Firefox.
-details {
- display: block;
-}
-// Correct display in all browsers.
-summary {
- display: list-item;
-}
-// Abbreviations
-abbr[title] {
- border-bottom: none; // Remove bottom border in Firefox 39-.
- text-decoration: underline dotted; // Opinionated style-fix for all browsers.
-}
-// Show overflow in Edge.
-input {
- overflow: visible;
-}
-// Correct the cursor style of increment and decrement buttons in Chrome.
-[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
- height: auto;
-}
-// Correct style in Chrome and Safari.
-[type="search"] {
- -webkit-appearance: textfield;
- outline-offset: -2px;
-}
-// Correct style in Chrome and Safari.
-[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-// Make images responsive by default.
-img {
- max-width: 100%;
- height: auto;
-}
-// Style headings according to material design guidelines
-h1, h2, h3, h4, h5, h6 {
- line-height: 1.2;
- margin: 0.75rem 0.5rem;
-}
-h1 {
- font-size: 6rem;
- &.landing-title {
- font-size: 3rem;
- text-align: center;
- & small {
- display: block;
- margin-top: 0.5rem;
- color: var(--secondary-fore-color);
- }
- margin-bottom: 4rem;
- }
-}
-h2 {
- font-size: 3.75rem;
-}
-h3 {
- font-size: 3rem;
-}
-h4 {
- font-size: 2.125rem;
-}
-h5 {
- font-size: 1.5rem;
-}
-h6 {
- font-size: 1.25rem;
-}
-// Style textual elements
-p {
- margin: 0.5rem;
-}
-ol, ul {
- margin: 0.5rem;
- padding-left: 1rem;
-}
-b, strong {
- font-weight: 600;
-}
-hr {
- // Fixes and defaults for styling
- box-sizing: content-box;
- border: 0;
- // Actual styling using variables
- line-height: 1.25em;
- margin: 0.5rem;
- height: 1px;
- background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
-}
-sup, sub, code, kbd {
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-a {
- text-decoration: none;
- &:link{
- color: var(--a-link-color);
- }
- &:visited {
- color: var(--a-visited-color);
- }
- &:hover, &:focus {
- text-decoration: underline;
- }
-}
diff --git a/src/docs/styles/_search.scss b/src/docs/styles/_search.scss
deleted file mode 100644
index ccdae2fb7..000000000
--- a/src/docs/styles/_search.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-// ===================================================
-// Search
-// ===================================================
-[type="search"].search-box {
- transition: 0.3s ease all;
- margin: 0.25rem 0.875rem;
- width: calc(100% - 1.75rem);
- background: var(--search-back-color);
- box-shadow: 0px 4px 8px var(--search-shadow-color);
- &:focus {
- box-shadow: 0px 6px 12px var(--search-shadow-focus-color);
- }
- border-radius: 1.125rem;
- outline: none;
- box-sizing: border-box;
- border: none;
- padding-left: 2.5rem;
- font-size: 1.125rem;
- font-weight: 300;
- line-height: 2;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23C5C6CD' stroke-width='1.5' stroke-linecap='round' strokelinejoin='round' className='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
- background-repeat: no-repeat;
- background-position-x: 10px;
- background-position-y: 8px;
- color: var(--search-fore-color);
- &::placeholder {
- color: var(--search-placeholder-color);
- }
- @media screen and (min-width: $layout-large-breakpoint) {
- font-size: 1.375rem;
- line-height: 1.8;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23C5C6CD' stroke-width='1.5' stroke-linecap='round' strokelinejoin='round' className='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
- }
-}
-// Dark mode
-.page-container.dark [type="search"].search-box {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999EBD' stroke-width='1.5' stroke-linecap='round' strokelinejoin='round' className='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
- @media screen and (min-width: $layout-large-breakpoint) {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999EBD' stroke-width='1.5' stroke-linecap='round' strokelinejoin='round' className='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
- }
-}
-
-.search-box::-webkit-input-placeholder {
- font-family: 'Noto Sans', Helvetica, sans-serif;
-}
-
-.search-box:-ms-input-placeholder {
- font-family: 'Noto Sans', Helvetica, sans-serif;
-}
-
-.search-box:-moz-placeholder {
- font-family: 'Noto Sans', Helvetica, sans-serif;
-}
-
-.search-box::-moz-placeholder {
- font-family: 'Noto Sans', Helvetica, sans-serif;
-}
\ No newline at end of file
diff --git a/src/docs/styles/_snippets.scss b/src/docs/styles/_snippets.scss
deleted file mode 100644
index 219198286..000000000
--- a/src/docs/styles/_snippets.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-.page-container.dark {
- [data-scope="easing-variables"] {
- .easing-variables {
- background: #ddd;
- color: black;
- }
- }
- [data-scope="constant-width-to-height-ratio"] {
- .constant-width-to-height-ratio {
- background: #ddd;
- }
- }
- [data-scope="display-table-centering"] {
- .container {
- border-color: #ddd;
- }
- }
- [data-scope="ghost-trick"] {
- .ghosting {
- background: #a307c2;
- }
- }
- [data-scope="transform-centering"] {
- .parent {
- border-color: #ddd;
- }
- }
- [data-scope="truncate-text-multiline"] {
- .truncate-text-multiline::after {
- background: linear-gradient(to right, rgba(255, 255, 255, 0), #2a314c 50%);
- }
- }
- [data-scope="circle"] {
- .circle {
- background: #ddd;
- }
- }
- [data-scope="etched-text"] {
- .etched-text {
- text-shadow: 0 2px black;
- color: #424d76;
- }
- }
- [data-scope="focus-within"] {
- label {
- color: #fff;
- }
- }
- [data-scope="overflow-scroll-gradient"] {
- .overflow-scroll-gradient__scroller {
- background: #2a314c;
- }
- .overflow-scroll-gradient::after {
- background: linear-gradient(rgba(0, 0, 0, 0.001), #2a314c);
- }
- }
- [data-scope="pretty-text-underline"] {
- .pretty-text-underline {
- text-shadow: 1px 1px #2a314c, -1px 1px #2a314c, -1px -1px #2a314c, 1px -1px #2a314c;
- }
- }
- [data-scope="reset-all-styles"] {
- .reset-all-styles {
- color: white;
- }
- }
- [data-scope="shape-separator"] {
- .shape-separator {
- background: #ddd;
- &::after {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%232a314c'/%3E%3C/svg%3E")
- }
- }
- }
- [data-scope="triangle"] {
- .triangle {
- border-top: 20px solid #ddd;
- }
- }
- [data-scope="zebra-striped-list"] {
- li:nth-child(odd) {
- background-color: #424d76;
- }
- }
-}
\ No newline at end of file
diff --git a/src/docs/styles/_toast.scss b/src/docs/styles/_toast.scss
deleted file mode 100644
index ef1de925b..000000000
--- a/src/docs/styles/_toast.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// ===================================================
-// Toast
-// ===================================================
-.toast {
- position: fixed;
- bottom: 16px;
- margin-bottom: 0;
- font-size: 0.75rem;
- line-height: 1.5;
- left: 50%;
- transform: translate(-50%, -50%);
- z-index: 1111;
- color: var(--toast-fore-color);
- background: var(--toast-back-color);
- border-radius: 2rem;
- padding: 0.375rem 1.375rem 0.375rem 2.75rem;
- box-shadow: 0px 0.25rem 0.5rem var(--toast-shadow-color);
- transition: all 0.3s ease;
- // Toast icon
- &::before {
- position: absolute;
- content: '';
- display: block;
- top: 1px;
- left: 1px;
- height: 28px;
- background: white;
- width: 28px;
- border-radius: 100%;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2305A864' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
- background-position: center;
- }
-}
\ No newline at end of file
diff --git a/src/docs/styles/index.scss b/src/docs/styles/index.scss
deleted file mode 100644
index c294529b2..000000000
--- a/src/docs/styles/index.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// Layout breakpoints
-$layout-medium-breakpoint: 600px;
-$layout-large-breakpoint: 900px;
-
-@import 'fonts';
-@import 'colors';
-@import 'reset';
-@import 'layout';
-@import 'menu';
-@import 'search';
-@import 'button';
-@import 'card';
-@import 'code';
-@import 'toast';
-@import 'snippets';
diff --git a/src/docs/templates/SnippetPage.js b/src/docs/templates/SnippetPage.js
deleted file mode 100644
index b917033d1..000000000
--- a/src/docs/templates/SnippetPage.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from 'react';
-import { graphql, Link } from 'gatsby';
-import { connect } from 'react-redux';
-
-import Meta from '../components/Meta';
-import Shell from '../components/Shell';
-import SnippetCard from '../components/SnippetCard';
-import BackArrowIcon from '../components/SVGs/BackArrowIcon';
-
-// ===================================================
-// Individual snippet page template
-// ===================================================
-const SnippetPage = props => {
- const post = props.data.markdownRemark;
- const postData = props.data.snippetDataJson.data.find(
- v => v.title === post.frontmatter.title,
- );
-
- return (
- <>
-
-
-
- );
-};
-
-export default connect(
- state => ({
- isDarkMode: state.app.isDarkMode,
- lastPageTitle: state.app.lastPageTitle,
- lastPageUrl: state.app.lastPageUrl,
- searchQuery: state.app.searchQuery,
- }),
- null,
-)(SnippetPage);
-
-export const pageQuery = graphql`
- query BlogPostBySlug($slug: String!) {
- logo: file(absolutePath: { regex: "/logo_reverse_md.png/" }) {
- id
- childImageSharp {
- fixed(height: 45, width: 45) {
- src
- }
- }
- }
- allMarkdownRemark {
- edges {
- node {
- fields {
- slug
- }
- fileAbsolutePath
- frontmatter {
- title
- }
- }
- }
- }
- markdownRemark(fields: { slug: { eq: $slug } }) {
- id
- fields {
- slug
- }
- excerpt(pruneLength: 160)
- html
- frontmatter {
- title
- }
- }
- snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
- data {
- title
- id
- attributes {
- text
- codeBlocks {
- html
- css
- js
- scopedCss
- }
- browserSupport {
- supportPercentage
- }
- tags
- }
- }
- }
- }
-`;
diff --git a/src/docs/templates/TagPage.js b/src/docs/templates/TagPage.js
deleted file mode 100644
index 479e3d2af..000000000
--- a/src/docs/templates/TagPage.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react';
-import { graphql } from 'gatsby';
-import { connect } from 'react-redux';
-import { pushNewPage } from '../state/app';
-
-import Meta from '../components/Meta';
-import Shell from '../components/Shell';
-import SnippetCard from '../components/SnippetCard';
-
-import { capitalize, getRawCodeBlocks as getCodeBlocks } from '../util';
-
-// ===================================================
-// Individual snippet category/tag page
-// ===================================================
-const TagRoute = props => {
- const posts = props.data.allMarkdownRemark.edges;
- const tag = props.pageContext.tag;
-
- React.useEffect(() => {
- props.dispatch(pushNewPage(capitalize(tag), props.path));
- }, []);
-
- return (
- <>
-
- {capitalize(tag)}
- Click on a snippet's name to view its code.
- {posts &&
- posts.map(({ node }) => (
- v.trim()),
- id: node.fields.slug.slice(1),
- code: props.data.snippetDataJson.data.find(v => v.title === node.frontmatter.title).attributes.codeBlocks,
- supportPercentage: props.data.snippetDataJson.data.find(v => v.title === node.frontmatter.title).attributes.browserSupport.supportPercentage,
- }}
- isDarkMode={props.isDarkMode}
- />
- ))}
-
-
- );
-};
-
-export default connect(
- state => ({
- isDarkMode: state.app.isDarkMode,
- lastPageTitle: state.app.lastPageTitle,
- lastPageUrl: state.app.lastPageUrl,
- searchQuery: state.app.searchQuery,
- }),
- null,
-)(TagRoute);
-
-export const tagPageQuery = graphql`
- query TagPage($tagRegex: String) {
- snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
- data {
- id
- title
- attributes {
- tags
- text
- codeBlocks {
- html
- css
- js
- scopedCss
- }
- browserSupport {
- supportPercentage
- }
- }
- }
- }
- allMarkdownRemark(
- limit: 1000
- sort: { fields: [frontmatter___title], order: ASC }
- filter: { frontmatter: { tags: { regex: $tagRegex } } }
- ) {
- totalCount
- edges {
- node {
- excerpt(pruneLength: 400)
- id
- html
- rawMarkdownBody
- fields {
- slug
- }
- frontmatter {
- title
- tags
- }
- }
- }
- }
- }
-`;
diff --git a/src/docs/util/index.js b/src/docs/util/index.js
deleted file mode 100644
index e4eae5542..000000000
--- a/src/docs/util/index.js
+++ /dev/null
@@ -1,158 +0,0 @@
-const config = require('../../../config');
-
-// Capitalizes the first letter of a string
-const capitalize = (str, lowerRest = false) =>
- str.slice(0, 1).toUpperCase() +
- (lowerRest ? str.slice(1).toLowerCase() : str.slice(1));
-
-// Get the textual content in a gatsby page
-const getTextualContent = (str, noExplain = false) => {
- const result = str.slice(0, str.indexOf(''));
- return result;
-};
-
-// Gets the explanation for a snippet file.
-const getExplanation = str => {
- const regex = /
\s*Explanation\s*<\/h4>([\s\S]*)/g;
- const results = [];
- let m = null;
- while ((m = regex.exec(str)) !== null) {
- if (m.index === regex.lastIndex) regex.lastIndex += 1;
-
- m.forEach((match, groupIndex) => {
- results.push(match);
- });
- }
- return results[1].replace(/\r\n/g, '\n');
-};
-
-// Gets the browser support for a snippet file.
-const getBrowserSupport = str => {
- const regex = /\s*Browser [s|S]upport\s*<\/h4>([\s\S]*)/g;
- const results = [];
- let m = null;
- while ((m = regex.exec(str)) !== null) {
- if (m.index === regex.lastIndex) regex.lastIndex += 1;
-
- m.forEach((match, groupIndex) => {
- results.push(match);
- });
- }
- return results[1].replace(/\r\n/g, '\n');
-};
-
-// Gets the code blocks in a gatsby page
-const getCodeBlocks = str => {
- const regex = //g;
- let results = [];
- let m = null;
- while ((m = regex.exec(str)) !== null) {
- if (m.index === regex.lastIndex) regex.lastIndex += 1;
- // eslint-disable-next-line
- m.forEach((match, groupIndex) => {
- results.push(match);
- });
- }
- const replacer = new RegExp(
- `([\\s\\S]*?)([\\s\\S]*?)([\\s\\S]*?)([^\0<]*?)<\/span>([\n\r\s]*)([^\0]*?)<\/span>/gm,
- (match, p1, p2, p3) =>
- `${p1}${p2}${p3} `,
- );
- // Optimize operator nodes
- output = optimizeNodes(
- output,
- /([^\0<]*?)<\/span>([\n\r\s]*)([^\0]*?)<\/span>/gm,
- (match, p1, p2, p3) =>
- `${p1}${p2}${p3} `,
- );
- // Optimize keyword nodes
- output = optimizeNodes(
- output,
- /([^\0<]*?)<\/span>([\n\r\s]*)([^\0]*?)<\/span>/gm,
- (match, p1, p2, p3) => `${p1}${p2}${p3} `,
- );
- return output;
-};
-
-// Gets the code blocks for a snippet file.
-const getRawCodeBlocks = str => {
- const regex = /```[.\S\s]*?```/g;
- let results = [];
- let m = null;
- while ((m = regex.exec(str)) !== null) {
- if (m.index === regex.lastIndex) regex.lastIndex += 1;
- // eslint-disable-next-line
- m.forEach((match, groupIndex) => {
- results.push(match);
- });
- }
- const replacer = new RegExp(
- `\`\`\`${config.language.short}([\\s\\S]*?)\`\`\``,
- 'g',
- );
- results = results.map(v => v.replace(replacer, '$1').trim());
- return {
- code: results[0],
- example: results[1],
- };
-};
-
-module.exports = {
- capitalize,
- getTextualContent,
- getCodeBlocks,
- optimizeNodes,
- optimizeAllNodes,
- getExplanation,
- getRawCodeBlocks,
- getBrowserSupport
-};
diff --git a/src/static-parts/README-end.md b/src/static-parts/README-end.md
deleted file mode 100644
index 1754176ca..000000000
--- a/src/static-parts/README-end.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-
-_This README is built using [markdown-builder](https://github.com/30-seconds/markdown-builder)._
diff --git a/src/static-parts/README-start.md b/src/static-parts/README-start.md
deleted file mode 100644
index 482f1ab7a..000000000
--- a/src/static-parts/README-start.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# 30 Seconds of CSS
-
-
-
-[](https://github.com/30-seconds/30-seconds-of-css/blob/master/LICENSE) [](http://makeapullrequest.com) [](https://insight.io/github.com/30-seconds/30-seconds-of-css/tree/master/?source=0)
-
-A curated collection of useful CSS snippets you can understand in 30 seconds or less.
-Inspired by [30 seconds of code](https://github.com/30-seconds/30-seconds-of-code).
-
-## View online
-
-https://css.30secondsofcode.org
-
-## Contributing
-
-See CONTRIBUTING.md for the snippet template.
-
-#### Related projects
-
-- [30 Seconds of Code](https://30secondsofcode.org/)
-- [30 Seconds of Interviews](https://30secondsofinterviews.org/)
-- [30 Seconds of React](https://github.com/30-seconds/30-seconds-of-react)
diff --git a/static/_redirects b/static/_redirects
new file mode 100644
index 000000000..c229abd1a
--- /dev/null
+++ b/static/_redirects
@@ -0,0 +1,60 @@
+/snippet/tile-layout-using-inline-block https://30secondsofcode.org/css/s/tile-layout-using-inline-block 301!
+/snippet/not-selector https://30secondsofcode.org/css/s/not-selector 301!
+/snippet/border-with-top-triangle https://30secondsofcode.org/css/s/border-with-top-triangle 301!
+/snippet/bouncing-loader https://30secondsofcode.org/css/s/bouncing-loader 301!
+/snippet/box-sizing-reset https://30secondsofcode.org/css/s/box-sizing-reset 301!
+/snippet/button-border-animation https://30secondsofcode.org/css/s/button-border-animation 301!
+/snippet/calc//snippet/circle//snippet/clearfix https://30secondsofcode.org/css/s/calc//snippet/circle//snippet/clearfix 301!
+/snippet/constant-width-to-height-ratio https://30secondsofcode.org/css/s/constant-width-to-height-ratio 301!
+/snippet/counter https://30secondsofcode.org/css/s/counter 301!
+/snippet/custom-scrollbar https://30secondsofcode.org/css/s/custom-scrollbar 301!
+/snippet/custom-text-selection https://30secondsofcode.org/css/s/custom-text-selection 301!
+/snippet/custom-variables https://30secondsofcode.org/css/s/custom-variables 301!
+/snippet/disable-selection https://30secondsofcode.org/css/s/disable-selection 301!
+/snippet/display-table-centering https://30secondsofcode.org/css/s/display-table-centering 301!
+/snippet/donut-spinner https://30secondsofcode.org/css/s/donut-spinner 301!
+/snippet/drop-cap https://30secondsofcode.org/css/s/drop-cap 301!
+/snippet/dynamic-shadow https://30secondsofcode.org/css/s/dynamic-shadow 301!
+/snippet/easing-variables https://30secondsofcode.org/css/s/easing-variables 301!
+/snippet/etched-text https://30secondsofcode.org/css/s/etched-text 301!
+/snippet/evenly-distributed-children https://30secondsofcode.org/css/s/evenly-distributed-children 301!
+/snippet/fit-image-in-container https://30secondsofcode.org/css/s/fit-image-in-container 301!
+/snippet/flexbox-centering https://30secondsofcode.org/css/s/flexbox-centering 301!
+/snippet/focus-within https://30secondsofcode.org/css/s/focus-within 301!
+/snippet/fullscreen https://30secondsofcode.org/css/s/fullscreen 301!
+/snippet/ghost-trick https://30secondsofcode.org/css/s/ghost-trick 301!
+/snippet/gradient-text https://30secondsofcode.org/css/s/gradient-text 301!
+/snippet/grid-centering https://30secondsofcode.org/css/s/grid-centering 301!
+/snippet/hairline-border https://30secondsofcode.org/css/s/hairline-border 301!
+/snippet/hamburger-button https://30secondsofcode.org/css/s/hamburger-button 301!
+/snippet/height-transition https://30secondsofcode.org/css/s/height-transition 301!
+/snippet/hover-shadow-box-animation https://30secondsofcode.org/css/s/hover-shadow-box-animation 301!
+/snippet/hover-underline-animation https://30secondsofcode.org/css/s/hover-underline-animation 301!
+/snippet/last-item-with-remaining-available-height https://30secondsofcode.org/css/s/last-item-with-remaining-available-height 301!
+/snippet/lobotomizedOwlSelector https://30secondsofcode.org/css/s/lobotomizedOwlSelector 301!
+/snippet/mouse-cursor-gradient-tracking https://30secondsofcode.org/css/s/mouse-cursor-gradient-tracking 301!
+/snippet/navigation-list-item-hover-and-focus-effect https://30secondsofcode.org/css/s/navigation-list-item-hover-and-focus-effect 301!
+/snippet/offscreen https://30secondsofcode.org/css/s/offscreen 301!
+/snippet/overflow-scroll-gradient https://30secondsofcode.org/css/s/overflow-scroll-gradient 301!
+/snippet/popout-menu https://30secondsofcode.org/css/s/popout-menu 301!
+/snippet/pretty-text-underline https://30secondsofcode.org/css/s/pretty-text-underline 301!
+/snippet/pulse-loader https://30secondsofcode.org/css/s/pulse-loader 301!
+/snippet/reset-all-styles https://30secondsofcode.org/css/s/reset-all-styles 301!
+/snippet/shape-separator https://30secondsofcode.org/css/s/shape-separator 301!
+/snippet/sibling-fade https://30secondsofcode.org/css/s/sibling-fade 301!
+/snippet/system-font-stack https://30secondsofcode.org/css/s/system-font-stack 301!
+/snippet/toggle-switch https://30secondsofcode.org/css/s/toggle-switch 301!
+/snippet/transform-detransform https://30secondsofcode.org/css/s/transform-detransform 301!
+/snippet/transform-centering https://30secondsofcode.org/css/s/transform-centering 301!
+/snippet/triangle https://30secondsofcode.org/css/s/triangle 301!
+/snippet/truncate-text https://30secondsofcode.org/css/s/truncate-text 301!
+/snippet/truncate-text-multiline https://30secondsofcode.org/css/s/truncate-text-multiline 301!
+/snippet/zebra-striped-list https://30secondsofcode.org/css/s/zebra-striped-list 301!
+/tag/layout https://30secondsofcode.org/css/t/layout/p/1 301!
+/tag/visual https://30secondsofcode.org/css/t/visual/p/1 301!
+/tag/animation https://30secondsofcode.org/css/t/animation/p/1 301!
+/tag/other https://30secondsofcode.org/css/t/other/p/1 301!
+/tag/interactivity https://30secondsofcode.org/css/t/interactivity/p/1 301!
+/about/ https://30secondsofcode.org/about 301!
+/ https://30secondsofcode.org/css/p/1 301!
+/search/ https://30secondsofcode.org/search 301!