LOTS of Sass refactoring
This commit is contained in:
ポール ウェッブ
parent
78b3b0d0ea
commit
c65b1a5356
28 changed files with 486 additions and 417 deletions
1
.prettierignore
Normal file
1
.prettierignore
Normal file
|
|
@ -0,0 +1 @@
|
|||
/app/sass/
|
||||
140
.sasslintrc
140
.sasslintrc
|
|
@ -5,90 +5,93 @@ options:
|
|||
formatter: stylish
|
||||
|
||||
rules:
|
||||
attribute-quotes: 1
|
||||
attribute-quotes: 2
|
||||
bem-depth:
|
||||
- 1
|
||||
- max_depth: 2
|
||||
- 2
|
||||
- max-depth: 3
|
||||
border-zero:
|
||||
- 1
|
||||
- 2
|
||||
- convention: none
|
||||
brace-style:
|
||||
- 1
|
||||
- 2
|
||||
- allow-single-line: false
|
||||
- style: 1tbs
|
||||
class-name-format:
|
||||
- 1
|
||||
- allow-leading-underscore: false
|
||||
- convention: hyphenatedlowercase
|
||||
clean-import-paths: 1
|
||||
declarations-before-nesting: 1
|
||||
empty-args: 1
|
||||
- style: 2tbs
|
||||
class-name-format: 0
|
||||
clean-import-paths: 2
|
||||
declarations-before-nesting: 2
|
||||
empty-args: 2
|
||||
empty-line-between-blocks:
|
||||
- 1
|
||||
- 2
|
||||
- allow-single-line-rulesets: true
|
||||
extends-before-declarations: 1
|
||||
extends-before-mixins: 1
|
||||
final-newline: 1
|
||||
force-attribute-nesting: 1
|
||||
extends-before-declarations: 2
|
||||
extends-before-mixins: 2
|
||||
final-newline: 2
|
||||
force-attribute-nesting: 2
|
||||
force-element-nesting: 0
|
||||
force-pseudo-nesting: 0
|
||||
function-name-format:
|
||||
- 1
|
||||
- 2
|
||||
- allow-leading-underscore: false
|
||||
- convention: hyphenatedbem
|
||||
hex-length: 1
|
||||
hex-notation: 1
|
||||
hex-length: 2
|
||||
hex-notation: 2
|
||||
id-name-format: 0
|
||||
indentation: 1
|
||||
indentation: 2
|
||||
leading-zero:
|
||||
- 1
|
||||
- 2
|
||||
- include: true
|
||||
max-file-line-count: 0
|
||||
max-line-length: 0
|
||||
mixins-before-declarations: 1
|
||||
mixins-before-declarations: 2
|
||||
mixin-name-format:
|
||||
allow-leading-underscore: false
|
||||
convention: hypenatedbem
|
||||
nesting-depth: 1
|
||||
nesting-depth:
|
||||
- 2
|
||||
- max-depth: 3
|
||||
no-attribute-selectors: 0
|
||||
no-color-hex: 0
|
||||
no-color-keywords: 1
|
||||
no-color-literals: 1
|
||||
no-color-keywords: 2
|
||||
no-color-literals:
|
||||
- 0
|
||||
- allow-map-identifiers: true
|
||||
- allow-rgba: true
|
||||
- allow-variable-identifiers: true
|
||||
no-combinators: 0
|
||||
no-css-comments: 1
|
||||
no-debug: 1
|
||||
no-css-comments: 2
|
||||
no-debug: 2
|
||||
no-disallowed-properties: 0
|
||||
no-duplicate-properties: 1
|
||||
no-empty-rulesets: 1
|
||||
no-extends: 1
|
||||
no-ids: 1
|
||||
no-important: 1
|
||||
no-invalid-hex: 1
|
||||
no-mergeable-selectors: 1
|
||||
no-misspelled-properties: 1
|
||||
no-duplicate-properties: 2
|
||||
no-empty-rulesets: 2
|
||||
no-extends: 0
|
||||
no-ids: 2
|
||||
no-important: 2
|
||||
no-invalid-hex: 2
|
||||
no-mergeable-selectors: 2
|
||||
no-misspelled-properties: 2
|
||||
no-qualifying-elements:
|
||||
- 1
|
||||
- 2
|
||||
- allow-element-with-attribute: true
|
||||
- allow-element-with-class: false
|
||||
- allow-element-with-id: false
|
||||
no-trailing-whitespace: 1
|
||||
no-trailing-zero: 1
|
||||
no-trailing-whitespace: 2
|
||||
no-trailing-zero: 2
|
||||
no-transition-all: 0
|
||||
no-universal-selectors: 0
|
||||
no-url-domains: 1
|
||||
no-url-protocols: 1
|
||||
no-url-domains: 2
|
||||
no-url-protocols: 2
|
||||
no-vendor-prefixes:
|
||||
- 1
|
||||
- 0
|
||||
- ignore-non-standard: true
|
||||
no-warn: 1
|
||||
one-declaration-per-line: 1
|
||||
placeholder-in-extend: 1
|
||||
no-warn: 2
|
||||
one-declaration-per-line: 0
|
||||
placeholder-in-extend: 0
|
||||
placeholder-name-format:
|
||||
- 1
|
||||
- 2
|
||||
- allow-leading-underscore: false
|
||||
- convention: hyphenatedbem
|
||||
property-sort-order:
|
||||
- 1
|
||||
- 2
|
||||
- order:
|
||||
- width
|
||||
- max-width
|
||||
|
|
@ -103,6 +106,8 @@ rules:
|
|||
- bottom
|
||||
- left
|
||||
-
|
||||
- align-content
|
||||
- align-items
|
||||
- animation
|
||||
- animation-delay
|
||||
- animation-direction
|
||||
|
|
@ -164,6 +169,7 @@ rules:
|
|||
- border-width
|
||||
-
|
||||
- box-align
|
||||
- box-decoration-break
|
||||
- box-flex
|
||||
- box-orient
|
||||
- box-pack
|
||||
|
|
@ -181,8 +187,11 @@ rules:
|
|||
- display
|
||||
- empty-cells
|
||||
- filter
|
||||
- flex
|
||||
- flex-align
|
||||
- flex-direction
|
||||
- flex-flow
|
||||
- flex-grow
|
||||
- flex-order
|
||||
- flex-pack
|
||||
- float
|
||||
|
|
@ -193,8 +202,14 @@ rules:
|
|||
- font-style
|
||||
- font-variant
|
||||
- font-weight
|
||||
- grid
|
||||
- grid-area
|
||||
- grid-gap
|
||||
- grid-template
|
||||
- grid-template-columns
|
||||
- hyphens
|
||||
- interpolation-mode
|
||||
- justify-content
|
||||
- letter-spacing
|
||||
- line-height
|
||||
- list-style
|
||||
|
|
@ -214,6 +229,8 @@ rules:
|
|||
- margin-left-collapse
|
||||
-
|
||||
- marks
|
||||
- object-fit
|
||||
- object-position
|
||||
- opacity
|
||||
- osx-font-smoothing
|
||||
- outline
|
||||
|
|
@ -222,6 +239,7 @@ rules:
|
|||
- outline-style
|
||||
- outline-width
|
||||
- overflow
|
||||
- overflow-scrolling
|
||||
- overflow-x
|
||||
- overflow-y
|
||||
- padding-top
|
||||
|
|
@ -241,6 +259,7 @@ rules:
|
|||
- text-align
|
||||
- text-decoration
|
||||
- text-indent
|
||||
- text-orientation
|
||||
- text-overflow
|
||||
- text-rendering
|
||||
- text-shadow
|
||||
|
|
@ -261,28 +280,29 @@ rules:
|
|||
- word-break
|
||||
- word-spacing
|
||||
- word-wrap
|
||||
- writing-mode
|
||||
- z-index
|
||||
- zoom
|
||||
property-units: 0
|
||||
pseudo-element: 1
|
||||
pseudo-element: 2
|
||||
quotes:
|
||||
- 1
|
||||
- 2
|
||||
- style: double
|
||||
shorthand-values: 1
|
||||
single-line-per-selector: 1
|
||||
shorthand-values: 2
|
||||
single-line-per-selector: 2
|
||||
space-after-bang: 0
|
||||
space-after-colon: 1
|
||||
space-after-comma: 1
|
||||
space-around-operator: 1
|
||||
space-before-bang: 1
|
||||
space-before-brace: 1
|
||||
space-after-colon: 2
|
||||
space-after-comma: 2
|
||||
space-around-operator: 2
|
||||
space-before-bang: 2
|
||||
space-before-brace: 2
|
||||
space-before-colon: 0
|
||||
space-between-parens: 0
|
||||
trailing-semicolon: 1
|
||||
url-quotes: 1
|
||||
trailing-semicolon: 2
|
||||
url-quotes: 2
|
||||
variable-for-property: 0
|
||||
variable-name-format:
|
||||
- 1
|
||||
- 2
|
||||
- allow-leading-underscore: false
|
||||
- convention: hyphenatedbem
|
||||
zero-unit: 0
|
||||
|
|
|
|||
|
|
@ -9,25 +9,33 @@ html {
|
|||
|
||||
body {
|
||||
@include font-sans;
|
||||
min-width: 320px;
|
||||
|
||||
color: $black;
|
||||
font-size: 12px;
|
||||
min-width: 320px;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@supports (font-variation-settings: normal) {
|
||||
body {
|
||||
font-family: "Inter UI Variable", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 100vh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
.inner-wrap {
|
||||
max-width: 1200px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 1200px;
|
||||
|
||||
@media (min-width: 901px) {
|
||||
padding-right: 1rem;
|
||||
|
|
@ -44,7 +52,11 @@ main {
|
|||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
.header-anchor {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -63,6 +75,7 @@ code {
|
|||
}
|
||||
|
||||
.alert {
|
||||
width: 100%;
|
||||
bottom: 0; left: 0;
|
||||
|
||||
background-color: $yellow;
|
||||
|
|
@ -73,7 +86,6 @@ code {
|
|||
padding-left: env(safe-area-inset-left);
|
||||
position: fixed;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
|
||||
> div:first-of-type {
|
||||
|
|
@ -88,13 +100,14 @@ code {
|
|||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
p, button {
|
||||
p,
|
||||
button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-right: 1rem;
|
||||
width: calc(100% - 2.25rem);
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -1,37 +1,36 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import
|
||||
"init/colors",
|
||||
"init/base",
|
||||
"init/mixins",
|
||||
"init/markdown",
|
||||
"init/extends",
|
||||
"init/colors",
|
||||
"init/base",
|
||||
"init/mixins",
|
||||
"init/markdown",
|
||||
"init/extends",
|
||||
|
||||
"type/karla",
|
||||
"type/inter",
|
||||
"type/inter",
|
||||
|
||||
"partials/animation",
|
||||
"partials/ecosystem",
|
||||
"partials/email-subscribe",
|
||||
"partials/feature-links",
|
||||
"partials/flash",
|
||||
"partials/footer",
|
||||
"partials/github-feed",
|
||||
"partials/glossary",
|
||||
"partials/link-grid",
|
||||
"partials/navigation",
|
||||
"partials/mission-statement",
|
||||
"partials/modal",
|
||||
"partials/pre",
|
||||
"partials/animation",
|
||||
"partials/ecosystem",
|
||||
"partials/email-subscribe",
|
||||
"partials/feature-links",
|
||||
"partials/flash",
|
||||
"partials/footer",
|
||||
"partials/github-feed",
|
||||
"partials/glossary",
|
||||
"partials/link-grid",
|
||||
"partials/navigation",
|
||||
"partials/mission-statement",
|
||||
"partials/modal",
|
||||
"partials/pre",
|
||||
|
||||
"layout",
|
||||
"layout",
|
||||
|
||||
"pages/api",
|
||||
"pages/contributing",
|
||||
"pages/documentation",
|
||||
"pages/home",
|
||||
"pages/page",
|
||||
"pages/playground",
|
||||
"pages/api",
|
||||
"pages/contributing",
|
||||
"pages/documentation",
|
||||
"pages/home",
|
||||
"pages/page",
|
||||
"pages/playground",
|
||||
|
||||
"plugins/prism"
|
||||
"plugins/prism"
|
||||
;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// sass-lint:disable no-important
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
|
@ -17,7 +19,8 @@ html {
|
|||
|
||||
a,
|
||||
area,
|
||||
button, [role="button"],
|
||||
button,
|
||||
[role="button"],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
|
|
@ -36,12 +39,12 @@ a {
|
|||
}
|
||||
|
||||
textarea {
|
||||
&[disabled] {
|
||||
resize: none;
|
||||
&:not([disabled]) {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
&:not[disabled] {
|
||||
resize: vertical;
|
||||
&[disabled] {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,18 +77,18 @@ textarea {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
[type=button],
|
||||
[type=submit] {
|
||||
[type="button"],
|
||||
[type="submit"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
img {
|
||||
font-size: 0;
|
||||
max-width: 100%;
|
||||
font-size: 0;
|
||||
|
||||
&::after {
|
||||
width: 100%; height: 100%;
|
||||
|
|
@ -101,30 +104,79 @@ img {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media print {
|
||||
// Intelligent print styles
|
||||
pre, blockquote { border: 1px solid #999 !important; page-break-inside: avoid !important; }
|
||||
tr, img { page-break-inside: avoid !important; }
|
||||
img { max-width: 100% !important; }
|
||||
@page { margin: 0.5cm !important; }
|
||||
p, h2, h3 { orphans: 3 !important; widows: 3 !important; }
|
||||
h2, h3 { page-break-after: avoid !important; }
|
||||
thead { display: table-header-group !important; }
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999 !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 0.5cm !important;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3 !important;
|
||||
widows: 3 !important;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid !important;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group !important;
|
||||
}
|
||||
|
||||
// Faster, more stable printing
|
||||
* { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; }
|
||||
* {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
filter: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
// Show hypertext data for links and abbreviations
|
||||
p a[href]::after { content: " (" attr(href) ")" !important; }
|
||||
p abbr[title]::after { content: " (" attr(title) ")" !important; }
|
||||
p a[href^="javascript:"]::after, p a[href^="#"]::after { content: "" !important; }
|
||||
p a, p abbr { word-wrap: break-word !important; text-decoration: underline !important; }
|
||||
p {
|
||||
a {
|
||||
&[href]::after { // Show hypertext data for links and abbreviations
|
||||
content: " (" attr(href) ")" !important;
|
||||
}
|
||||
|
||||
&[href^="javascript:"],
|
||||
&[href^="#"] {
|
||||
&::after {
|
||||
content: "" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
abbr {
|
||||
&[title]::after {
|
||||
content: " (" attr(title) ")" !important;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
abbr {
|
||||
text-decoration: underline !important;
|
||||
word-wrap: break-word !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
input::-moz-focus-inner,
|
||||
button::-moz-focus-inner {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/**
|
||||
/*!
|
||||
* Button
|
||||
*
|
||||
* @class .__button-base
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
*
|
||||
* @class .__button-padding-horizontal
|
||||
* @class .__button-padding-vertical
|
||||
*/
|
||||
**/
|
||||
|
||||
.__button-base {
|
||||
border: 1px solid;
|
||||
|
|
@ -127,13 +127,13 @@
|
|||
|
||||
|
||||
|
||||
/**
|
||||
/*!
|
||||
* Loader
|
||||
*
|
||||
* @class .__loading
|
||||
* @selector {::before}
|
||||
* @selector {::after}
|
||||
*/
|
||||
**/
|
||||
|
||||
.__loading {
|
||||
width: 100%; height: 10rem;
|
||||
|
|
@ -146,9 +146,9 @@
|
|||
top: 2rem; left: calc(50% - 2rem);
|
||||
|
||||
animation: spin 2s linear infinite;
|
||||
border-top-color: $teal;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-top-color: $teal;
|
||||
border-width: 6px;
|
||||
content: "";
|
||||
cursor: wait;
|
||||
|
|
@ -156,12 +156,12 @@
|
|||
}
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
top: 7rem; left: 0;
|
||||
|
||||
cursor: wait;
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,20 +67,21 @@
|
|||
position: relative;
|
||||
|
||||
@media (min-width: 601px) {
|
||||
margin-left: 15%; padding: 0.5rem 0 0.05rem 2rem;
|
||||
width: 70%;
|
||||
padding: 0.5rem 0 0.05rem 2rem;
|
||||
|
||||
font-size: 1.5rem;
|
||||
width: 70%;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding: 0.5rem 0 0.05rem;
|
||||
font-size: 1.25rem;
|
||||
padding: 0.5rem 0 0.05rem 0;
|
||||
}
|
||||
|
||||
@media (min-width: 376px) and (max-width: 600px) {
|
||||
margin-left: 5%;
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -106,23 +107,28 @@
|
|||
ul,
|
||||
table {
|
||||
code {
|
||||
padding: 0.3rem 0.5rem;
|
||||
|
||||
background-color: $black;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
font-size: 60%;
|
||||
letter-spacing: 0.05rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
vertical-align: middle;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
+ h2 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
+ h3, + h4, + h5 {
|
||||
|
||||
+ h3,
|
||||
+ h4,
|
||||
+ h5 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -148,12 +154,10 @@
|
|||
ul {
|
||||
padding-top: 0.5rem;
|
||||
|
||||
li {
|
||||
&:not(:last-of-type) {
|
||||
li:not(:last-of-type) {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: lower-roman;
|
||||
|
|
@ -166,14 +170,15 @@
|
|||
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
margin-left: 2px;
|
||||
|
||||
img {
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -193,19 +198,23 @@
|
|||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5 {
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
+ table {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
background-color: $white;
|
||||
border: 1px solid rgba($gray, 0.3);
|
||||
border-spacing: 0;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 1030px) {
|
||||
display: inline-grid;
|
||||
|
|
@ -214,7 +223,9 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
tbody, tr, td {
|
||||
tbody,
|
||||
tr,
|
||||
td {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -234,11 +245,9 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
&:not(*:root) {
|
||||
&::after {
|
||||
&:not(*:root)::after {
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: calc(100% + 2px); height: calc(100% + 2px);
|
||||
|
|
@ -259,7 +268,8 @@
|
|||
background-color: rgba($black, 0.025);
|
||||
}
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,73 +4,36 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin font-sans {
|
||||
font-family: "Inter UI", Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
@mixin font-serif {
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
|
||||
@mixin font-mono {
|
||||
font-family: "Input Mono", "Fira Mono", "Fira Code", "Courier New", monospace;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin clearfix {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
@mixin hide-text {
|
||||
border: 0;
|
||||
color: transparent;
|
||||
font: 0/0 a;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@mixin ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin selection($backgroundColor, $textColor) {
|
||||
&::selection {
|
||||
background-color: $backgroundColor;
|
||||
color: $textColor;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&::-moz-selection {
|
||||
background-color: $backgroundColor;
|
||||
color: $textColor;
|
||||
text-shadow: none;
|
||||
}
|
||||
@mixin font-mono {
|
||||
font-family: "Input Mono", "Fira Mono", "Fira Code", "Courier New", monospace;
|
||||
}
|
||||
|
||||
@mixin underline($textColor: #000, $whitespaceColor: #fff) {
|
||||
@include selection($textColor, $whitespaceColor);
|
||||
|
||||
background-image: linear-gradient($whitespaceColor, $whitespaceColor), linear-gradient($whitespaceColor, $whitespaceColor), linear-gradient($textColor, $textColor);
|
||||
background-position: 0 88%, 100% 88%, 0 88%;
|
||||
background-repeat: no-repeat, no-repeat, repeat-x;
|
||||
background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
|
||||
box-decoration-break: clone;
|
||||
display: inline;
|
||||
text-decoration: none;
|
||||
text-shadow: 0.03rem 0 $whitespaceColor, -0.03rem 0 $whitespaceColor, 0 0.03rem $whitespaceColor, 0 -0.03rem $whitespaceColor, 0.06rem 0 $whitespaceColor, -0.06rem 0 $whitespaceColor, 0.09rem 0 $whitespaceColor, -0.09rem 0 $whitespaceColor, 0.12rem 0 $whitespaceColor, -0.12rem 0 $whitespaceColor, 0.15rem 0 $whitespaceColor, -0.15rem 0 $whitespaceColor;
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
background-position: 0 90%, 100% 90%, 0 90%;
|
||||
}
|
||||
@mixin font-sans {
|
||||
font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
@mixin font-serif {
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
|
||||
@mixin hide-text {
|
||||
border: none;
|
||||
color: transparent;
|
||||
font: 0 / 0 a;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@mixin no-user-select {
|
||||
user-select: none;
|
||||
|
|
@ -80,12 +43,33 @@
|
|||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
@mixin selection($background-color, $text-color) {
|
||||
&::selection {
|
||||
background-color: $background-color;
|
||||
color: $text-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.clear {
|
||||
@include clearfix;
|
||||
&::-moz-selection {
|
||||
background-color: $background-color;
|
||||
color: $text-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-text {
|
||||
@include hide-text;
|
||||
@mixin underline($text-color: #000, $whitespace-color: #fff) {
|
||||
@include selection($text-color, $whitespace-color);
|
||||
|
||||
background-image: linear-gradient($whitespace-color, $whitespace-color), linear-gradient($whitespace-color, $whitespace-color), linear-gradient($text-color, $text-color);
|
||||
background-position: 0 88%, 100% 88%, 0 88%;
|
||||
background-repeat: no-repeat, no-repeat, repeat-x;
|
||||
background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
|
||||
box-decoration-break: clone;
|
||||
display: inline;
|
||||
text-decoration: none;
|
||||
text-shadow: 0.03rem 0 $whitespace-color, -0.03rem 0 $whitespace-color, 0 0.03rem $whitespace-color, 0 -0.03rem $whitespace-color, 0.06rem 0 $whitespace-color, -0.06rem 0 $whitespace-color, 0.09rem 0 $whitespace-color, -0.09rem 0 $whitespace-color, 0.12rem 0 $whitespace-color, -0.12rem 0 $whitespace-color, 0.15rem 0 $whitespace-color, -0.15rem 0 $whitespace-color;
|
||||
|
||||
@-moz-document url-prefix() { // sass-lint:disable-line empty-args
|
||||
background-position: 0 90%, 100% 90%, 0 90%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
/**
|
||||
/*!
|
||||
* API Wrapper
|
||||
*
|
||||
* @class .__slate
|
||||
* @selector {::after}
|
||||
*/
|
||||
**/
|
||||
|
||||
.__slate {
|
||||
width: 100%;
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
|
||||
/**
|
||||
/*!
|
||||
* API | Table of Contents
|
||||
*
|
||||
* @class .api__toc
|
||||
|
|
@ -44,11 +44,11 @@
|
|||
*
|
||||
* @class .api__toc__item
|
||||
* @state {:hover}
|
||||
*/
|
||||
**/
|
||||
|
||||
.api__toc {
|
||||
width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall
|
||||
left: 0; bottom: 0;
|
||||
bottom: 0; left: 0;
|
||||
|
||||
background-color: $white;
|
||||
border-right: 1px solid rgba($gray, 0.3);
|
||||
|
|
@ -64,11 +64,12 @@
|
|||
}
|
||||
|
||||
.api__toc__search__field {
|
||||
width: 100%;
|
||||
padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem;
|
||||
|
||||
border-bottom: 1px solid rgba($gray, 0.3);
|
||||
font-size: 0.8rem;
|
||||
line-height: 2rem;
|
||||
padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.api__toc__search__clear {
|
||||
|
|
@ -110,14 +111,14 @@
|
|||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.25rem 0.5rem 0.25rem 0.75rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.api__content {
|
||||
float: right;
|
||||
width: calc(100% - 200px);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.api__documentation {
|
||||
|
|
@ -141,7 +142,9 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p, ol, ul {
|
||||
p,
|
||||
ol,
|
||||
ul {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -152,19 +155,21 @@
|
|||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
border: 1px solid rgba($white, 0.1);
|
||||
border-radius: 0.3rem;
|
||||
border-spacing: 0;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.33;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -178,8 +183,8 @@
|
|||
}
|
||||
|
||||
.api__content__body {
|
||||
border-bottom: 1px solid rgba($gray, 0.3);
|
||||
padding: 2rem;
|
||||
border-bottom: 1px solid rgba($gray, 0.3);
|
||||
|
||||
pre {
|
||||
border: 1px solid rgba($gray, 0.3);
|
||||
|
|
@ -207,9 +212,10 @@
|
|||
}
|
||||
|
||||
.left {
|
||||
width: 30%;
|
||||
|
||||
border-right: 1px solid rgba($gray, 0.3);
|
||||
float: left;
|
||||
width: 30%;
|
||||
word-wrap: break-word;
|
||||
|
||||
span {
|
||||
|
|
@ -223,8 +229,8 @@
|
|||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 70%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -233,10 +239,11 @@
|
|||
}
|
||||
|
||||
.api__content__example {
|
||||
padding: 2rem;
|
||||
|
||||
background-color: mix($gray, $black, 10%);
|
||||
border-bottom: 1px solid rgba($white, 0.1);
|
||||
color: $white;
|
||||
padding: 2rem;
|
||||
|
||||
pre {
|
||||
background-color: $black;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
body.home {
|
||||
body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
|
||||
@media (min-width: 1001px) {
|
||||
main > div:first-of-type {
|
||||
display: grid;
|
||||
|
|
@ -42,6 +42,8 @@ body.home {
|
|||
}
|
||||
|
||||
.hero {
|
||||
height: calc(50vh - 4rem); min-height: 300px;
|
||||
|
||||
align-items: center;
|
||||
background-color: $black;
|
||||
// background-image: url("/assets/media/svg/text-logo--white.svg");
|
||||
|
|
@ -50,7 +52,6 @@ body.home {
|
|||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
grid-area: header;
|
||||
height: calc(50vh - 4rem); min-height: 300px;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
|
|
@ -59,13 +60,14 @@ body.home {
|
|||
}
|
||||
|
||||
h1 {
|
||||
padding: 0.4rem 1rem;
|
||||
|
||||
background-color: $white;
|
||||
border: 1px solid rgba($black, 0.1);
|
||||
box-decoration-break: clone;
|
||||
display: inline;
|
||||
font-weight: normal;
|
||||
line-height: 2;
|
||||
padding: 0.4rem 1rem;
|
||||
|
||||
-webkit-box-decoration-break: clone; // Safari
|
||||
|
||||
|
|
@ -80,8 +82,8 @@ body.home {
|
|||
}
|
||||
|
||||
.features {
|
||||
grid-area: features;
|
||||
border-bottom: 1px solid rgba($black, 0.05);
|
||||
grid-area: features;
|
||||
}
|
||||
|
||||
.intro,
|
||||
|
|
@ -123,13 +125,14 @@ body.home {
|
|||
}
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
ol,
|
||||
ul {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 1000px;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
@media (min-width: 901px) {
|
||||
font-size: 1.5rem;
|
||||
|
|
@ -210,23 +213,23 @@ body.home {
|
|||
text-align: center;
|
||||
|
||||
@media (max-width: 750px) {
|
||||
margin-bottom: 2rem;
|
||||
min-width: 8rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-top: 4rem;
|
||||
position: relative;
|
||||
transition: color 0.2s;
|
||||
|
||||
&::before {
|
||||
width: 100%; height: 100%;
|
||||
left: 0;
|
||||
|
||||
background-position: center 0;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
@ -257,13 +260,13 @@ body.home {
|
|||
|
||||
a::before {
|
||||
@media (min-width: 901px) {
|
||||
background-size: 4rem;
|
||||
top: -1rem;
|
||||
background-size: 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
background-size: 3rem;
|
||||
top: 0;
|
||||
background-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -305,13 +308,13 @@ body.home {
|
|||
|
||||
a::before {
|
||||
@media (min-width: 901px) {
|
||||
background-size: 6rem;
|
||||
top: -2rem;
|
||||
background-size: 6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
background-size: 4rem;
|
||||
top: -0.5rem;
|
||||
background-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
.page {
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page__header-wrap {
|
||||
|
|
@ -11,6 +12,9 @@
|
|||
|
||||
.page__header {
|
||||
@include center;
|
||||
width: 100%;
|
||||
|
||||
background-color: $black;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
|
@ -18,7 +22,6 @@
|
|||
padding-right: env(safe-area-inset-right);
|
||||
padding-left: env(safe-area-inset-left);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page__header__title {
|
||||
|
|
@ -44,16 +47,11 @@
|
|||
background-size: 32px;
|
||||
flex: 1;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
padding-right: env(safe-area-inset-right);
|
||||
padding-bottom: 2rem;
|
||||
padding-left: env(safe-area-inset-left);
|
||||
}
|
||||
|
||||
.page__markup {
|
||||
@extend %markdown;
|
||||
}
|
||||
|
||||
.page__header {
|
||||
// background-image: url("/assets/media/images/background-a.jpg");
|
||||
background-color: $black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
/**
|
||||
/*!
|
||||
* Playground | Wrapper
|
||||
*
|
||||
* @class .playground
|
||||
* @selector {::before}
|
||||
* @selector {::after}
|
||||
* @state {.waiting}
|
||||
*/
|
||||
**/
|
||||
|
||||
.playground {
|
||||
top: 1rem;
|
||||
|
||||
border-top: 1px solid rgba($black, 0.05);
|
||||
position: relative;
|
||||
top: 1rem;
|
||||
|
||||
&.waiting::before {
|
||||
top: 0; right: 0;
|
||||
|
|
@ -28,9 +29,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
/*!
|
||||
* Playground | Navigation
|
||||
*
|
||||
* @class .playground__navigation
|
||||
|
|
@ -40,14 +39,14 @@
|
|||
* @selector {:last-of-type}
|
||||
* @state {.active}
|
||||
* @state {:hover}
|
||||
*/
|
||||
**/
|
||||
|
||||
.playground__navigation {
|
||||
width: 100%;
|
||||
|
||||
list-style-type: none;
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
&::after {
|
||||
@include clearfix;
|
||||
|
|
@ -55,11 +54,12 @@
|
|||
}
|
||||
|
||||
.playground__navigation__example {
|
||||
width: 33.333333%;
|
||||
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 33.333333%;
|
||||
|
||||
&::before {
|
||||
width: 100%; height: 2.5rem;
|
||||
|
|
@ -126,9 +126,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
/*!
|
||||
* Playground | Content
|
||||
*
|
||||
* @class .playground__content
|
||||
|
|
@ -150,13 +148,13 @@
|
|||
*
|
||||
* @class .playground__content__trend
|
||||
* @class .playground__content__urlbar
|
||||
*/
|
||||
**/
|
||||
|
||||
.playground__content {
|
||||
border-top: 1px solid rgba($black, 0.05);
|
||||
overflow-y: visible;
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
.loader {
|
||||
@extend .__loading;
|
||||
|
|
@ -186,10 +184,11 @@
|
|||
}
|
||||
|
||||
.playground__content__meme__canvas {
|
||||
width: 48%;
|
||||
|
||||
float: left;
|
||||
margin-right: 2%;
|
||||
position: relative;
|
||||
width: 48%;
|
||||
|
||||
canvas {
|
||||
width: 100%; height: 100%;
|
||||
|
|
@ -199,15 +198,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.playground__content__meme__canvas__thumbnail {
|
||||
.playground__content__meme__canvas__thumbnail { // sass-lint:disable-line bem-depth // TODO: FIX THIS
|
||||
width: 5rem; height: 5rem;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 1rem;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
|
|
@ -223,10 +222,10 @@
|
|||
}
|
||||
|
||||
.playground__content__meme__editor {
|
||||
float: right;
|
||||
width: 50%;
|
||||
float: right;
|
||||
|
||||
h2.__metadata {
|
||||
.__metadata { // h2
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
|
|
@ -239,6 +238,8 @@
|
|||
}
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
|
||||
color: rgba($black, 0.3);
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
|
|
@ -246,7 +247,6 @@
|
|||
letter-spacing: 0.05rem;
|
||||
margin-bottom: 0.025rem;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="submit"]),
|
||||
|
|
@ -263,10 +263,11 @@
|
|||
|
||||
input {
|
||||
&:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
|
||||
width: 100%;
|
||||
|
||||
border-bottom: 2px solid;
|
||||
padding-bottom: 0.15rem;
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:not([type="file"]):not([type="submit"]) {
|
||||
|
|
@ -282,11 +283,11 @@
|
|||
|
||||
&[type="checkbox"] {
|
||||
width: 1.25rem; height: 1.25rem;
|
||||
top: 0.35rem;
|
||||
|
||||
border: 2px solid;
|
||||
margin-right: 0.5rem;
|
||||
position: relative;
|
||||
top: 0.35rem;
|
||||
|
||||
&::after {
|
||||
width: 100%; height: 100%;
|
||||
|
|
@ -309,8 +310,8 @@
|
|||
|
||||
select,
|
||||
textarea {
|
||||
border-bottom: 2px solid;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid;
|
||||
|
||||
&:not(:hover):not(:active) {
|
||||
border-color: $black;
|
||||
|
|
@ -398,12 +399,13 @@
|
|||
}
|
||||
|
||||
button {
|
||||
width: 6rem;
|
||||
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
text-transform: lowercase;
|
||||
transition: background-color 0.2s;
|
||||
width: 6rem;
|
||||
|
||||
&::after {
|
||||
width: calc(100% + 2px); height: calc(100% + 2px);
|
||||
|
|
@ -433,8 +435,8 @@
|
|||
}
|
||||
|
||||
input {
|
||||
font-size: 1rem;
|
||||
width: calc(100% - 9.5rem);
|
||||
font-size: 1rem;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba($black, 0.5);
|
||||
|
|
@ -444,27 +446,27 @@
|
|||
|
||||
span {
|
||||
@include no-user-select;
|
||||
width: 3.5rem;
|
||||
|
||||
color: rgba($black, 0.5);
|
||||
cursor: default;
|
||||
font-size: 1rem;
|
||||
text-align: right;
|
||||
width: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
/*!
|
||||
* Playground | Description
|
||||
*
|
||||
* @class .playground__description
|
||||
*/
|
||||
**/
|
||||
|
||||
.playground__description {
|
||||
padding: 1rem;
|
||||
|
||||
cursor: default;
|
||||
font-size: 1rem;
|
||||
line-height: 1.33;
|
||||
padding: 1rem;
|
||||
|
||||
&:not(.success) {
|
||||
background-color: rgba($black, 0.05);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,27 @@
|
|||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
to { transform: rotate(1turn); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
0% { transform: translateY(-4rem); }
|
||||
10% { transform: translateY(2rem); }
|
||||
90% { transform: translateY(2rem); }
|
||||
100% { transform: translateY(-4rem); }
|
||||
0% {
|
||||
transform: translateY(-4rem);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translateY(2rem);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translateY(2rem);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-4rem);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.ecosystem {
|
||||
margin-bottom: 2rem; padding-top: 1rem;
|
||||
|
||||
display: grid;
|
||||
font-size: 1rem;
|
||||
grid-gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
padding-top: 1rem;
|
||||
|
||||
&:not(.expand-left):not(.expand-right) {
|
||||
grid-template-columns: 144px auto 144px;
|
||||
|
|
@ -52,19 +52,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ecosystem__module {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
> * {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
> div {
|
||||
float: right;
|
||||
|
|
@ -76,6 +74,7 @@
|
|||
|
||||
&::before {
|
||||
@include font-serif;
|
||||
width: 100%;
|
||||
top: 0.9rem; right: 3rem;
|
||||
|
||||
content: "explore";
|
||||
|
|
@ -84,7 +83,6 @@
|
|||
opacity: 0.3;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -129,9 +127,10 @@
|
|||
text-align: center;
|
||||
|
||||
> span {
|
||||
padding: 1.9rem 2rem;
|
||||
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 1.9rem 2rem;
|
||||
|
||||
em {
|
||||
display: block;
|
||||
|
|
@ -182,8 +181,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.lbrycrd,
|
||||
&.lbry {
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -196,20 +193,18 @@
|
|||
margin-bottom: 0.5rem;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
bottom: 1rem; left: 0;
|
||||
|
||||
font-size: 0.5rem;
|
||||
letter-spacing: 0.1rem;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.lbrycrd {
|
||||
&:not(.active)::before {
|
||||
background-color: $red;
|
||||
|
|
@ -253,24 +248,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
.ecosystem__module__details, .ecosystem__submodule__markdown {
|
||||
.ecosystem__module__details,
|
||||
.ecosystem__submodule__markdown {
|
||||
@extend %markdown;
|
||||
}
|
||||
|
||||
.ecosystem__module__piece {
|
||||
width: 80%; left: 10%;
|
||||
|
||||
background-color: $white;
|
||||
left: 10%;
|
||||
line-height: 2;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ecosystem__submodule {
|
||||
border-width: 2px;
|
||||
cursor: default;
|
||||
|
|
@ -307,10 +301,10 @@
|
|||
|
||||
&.active {
|
||||
width: 100%; height: 100%;
|
||||
padding: 2rem;
|
||||
|
||||
border-style: solid;
|
||||
overflow-y: auto;
|
||||
padding: 2rem;
|
||||
|
||||
.ecosystem__submodule__title {
|
||||
line-height: 1.33;
|
||||
|
|
@ -364,8 +358,6 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.__parents {
|
||||
top: 2rem; right: 4rem;
|
||||
|
||||
|
|
@ -414,9 +406,10 @@
|
|||
}
|
||||
|
||||
.__close {
|
||||
right: 2rem;
|
||||
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,14 +41,15 @@
|
|||
}
|
||||
|
||||
.newsletter-cta__input {
|
||||
height: 38px;
|
||||
|
||||
background-color: $white;
|
||||
font-size: 1rem;
|
||||
height: 38px;
|
||||
transition: border 0.2s;
|
||||
|
||||
@media (min-width: 551px) {
|
||||
float: left;
|
||||
width: calc(100% - 112px);
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
|
|
@ -60,13 +61,13 @@
|
|||
border-left-color: $black;
|
||||
|
||||
@media (min-width: 551px) {
|
||||
border-bottom-color: $black;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $black;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
border-bottom-color: transparent;
|
||||
border-right-color: $black;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,13 +76,13 @@
|
|||
border-left-color: mix($black, $teal, 20%);
|
||||
|
||||
@media (min-width: 551px) {
|
||||
border-bottom-color: mix($black, $teal, 20%);
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: mix($black, $teal, 20%);
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
border-bottom-color: transparent;
|
||||
border-right-color: mix($black, $teal, 20%);
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -93,14 +94,14 @@
|
|||
|
||||
@media (min-width: 551px) {
|
||||
width: 112px; height: 38px;
|
||||
left: -1px;
|
||||
|
||||
float: right;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
display: block;
|
||||
top: -1px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ $width-feature-link: 320px;
|
|||
.feature-links {
|
||||
display: grid;
|
||||
grid-gap: 2rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
list-style-type: none;
|
||||
padding-top: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.feature-link {
|
||||
|
|
@ -38,23 +38,25 @@ $width-feature-link: 320px;
|
|||
}
|
||||
|
||||
.feature-link__title {
|
||||
position: relative;
|
||||
top: 85px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transition: color 0.2s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.feature-link__title-inner {
|
||||
display: inline-block;
|
||||
padding: .25rem .5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
|
||||
background-color: $white;
|
||||
border: 1px solid rgba(gray, 0.1);
|
||||
box-shadow: 0 2px 5px rgba($black, 0.025);
|
||||
border: 1px solid rgba($gray, 0.1);
|
||||
border-radius: 3px;
|
||||
box-decoration-break: clone;
|
||||
box-shadow: 0 2px 5px rgba($black, 0.025);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.feature-link__background {
|
||||
|
|
@ -64,9 +66,9 @@ $width-feature-link: 320px;
|
|||
background-color: $teal;
|
||||
border-top-right-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
transition: filter 0.2s;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
transition: filter 0.2s;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,20 @@
|
|||
.flashes {
|
||||
width: 100%;
|
||||
top: 4rem; right: 0;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.flash {
|
||||
padding: 0.5rem 1rem;
|
||||
right: 2rem;
|
||||
|
||||
border: 2px solid;
|
||||
border-radius: 3px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.33;
|
||||
padding: 0.5rem 1rem;
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
|
||||
&:not(.error):not(.info):not(.warning) {
|
||||
background-color: mix($white, $teal, 90%);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
@media (max-width: 980px) {
|
||||
&::before {
|
||||
width: 3rem; height: 100%;
|
||||
bottom: 0; right: 0;
|
||||
right: 0; bottom: 0;
|
||||
|
||||
background-image: linear-gradient(90deg, rgba($black, 0), $black 50%, $black); // iOS Safari cannot handle `transparent`
|
||||
content: "";
|
||||
|
|
@ -20,10 +20,11 @@
|
|||
|
||||
> div:first-of-type {
|
||||
@media (max-width: 980px) {
|
||||
overflow: auto;
|
||||
overflow-scrolling: touch;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
||||
overflow: auto;
|
||||
overflow-scrolling: touch; // sass-lint:disable-line no-misspelled-properties
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
}
|
||||
|
||||
@media (min-width: 1001px) {
|
||||
padding-bottom: 2rem;
|
||||
padding-right: 10%;
|
||||
padding-bottom: 2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -40,7 +40,8 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h3, h5 {
|
||||
h3,
|
||||
h5 {
|
||||
@media (min-width: 1001px) {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -52,12 +53,12 @@
|
|||
text-transform: uppercase;
|
||||
|
||||
@media (min-width: 1301px) {
|
||||
width: calc(100% - (1rem + 5%));
|
||||
top: 2.15rem; left: 0;
|
||||
|
||||
color: rgba($black, 0.045);
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
width: calc(100% - (1rem + 5%));
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
|
|
@ -87,9 +88,10 @@
|
|||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
top: -1rem;
|
||||
|
||||
margin-bottom: 0.5rem;
|
||||
position: relative;
|
||||
top: -1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -99,10 +101,11 @@
|
|||
line-height: 1.55;
|
||||
|
||||
@media (max-width: 700px) {
|
||||
width: 200px;
|
||||
|
||||
display: inline-block;
|
||||
margin-right: 1.25rem;
|
||||
vertical-align: top;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
|
|
@ -112,9 +115,10 @@
|
|||
}
|
||||
|
||||
> a:first-of-type {
|
||||
width: 100%;
|
||||
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> p:first-of-type {
|
||||
|
|
@ -123,14 +127,15 @@
|
|||
}
|
||||
|
||||
code {
|
||||
padding: 0.2rem 0.5rem;
|
||||
top: -1px;
|
||||
|
||||
background-color: $black;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
font-size: 80%;
|
||||
letter-spacing: 0.05rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
em:not(.github-feed__event__time) {
|
||||
|
|
@ -138,22 +143,22 @@
|
|||
}
|
||||
|
||||
@media (min-width: 701px) {
|
||||
width: calc(100% - 4.5rem);
|
||||
|
||||
display: inline-block;
|
||||
margin-left: 0.5rem;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 4.5rem);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
width: 90%; padding: 1rem;
|
||||
top: -3.5rem; left: 5%;
|
||||
|
||||
background-color: $white;
|
||||
border: 1px solid rgba($gray, 0.1);
|
||||
border-radius: 3px;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
white-space: normal;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -161,8 +166,8 @@
|
|||
.github-feed__event__avatar {
|
||||
border: 1px solid rgba($gray, 0.1);
|
||||
border-radius: 3px;
|
||||
object-position: center;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
|
||||
@media (min-width: 701px) {
|
||||
width: 2.5rem; height: 2.5rem;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
.glossary {
|
||||
&:not(.sidebar-closed) {
|
||||
main {
|
||||
margin-left: 250px;
|
||||
width: calc(100vw - 250px);
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.page__header-wrap,
|
||||
.page__content {
|
||||
.inner-wrap {
|
||||
margin-left: 1rem;
|
||||
max-width: initial;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -59,19 +59,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.component--glossary-toc {
|
||||
width: 250px; height: calc(100vh - 4rem);
|
||||
top: 4rem; left: 0;
|
||||
|
||||
background-color: $white;
|
||||
border-right: 1px solid rgba($gray, 0.3);
|
||||
font-size: 0.8rem !important;
|
||||
font-size: 0.8rem; // TODO: Why was !important here?
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-top: 1rem !important;
|
||||
position: fixed !important;
|
||||
padding-top: 1rem; // TODO: Why was !important here?
|
||||
position: fixed; // TODO: Why was !important here?
|
||||
z-index: 1;
|
||||
|
||||
li:last-of-type {
|
||||
|
|
@ -98,16 +96,16 @@
|
|||
|
||||
@media (min-width: 901px) {
|
||||
width: 105px; height: 25px;
|
||||
top: 103px;
|
||||
|
||||
letter-spacing: 2px;
|
||||
top: 103px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
width: 65px; height: 25px;
|
||||
top: 83px;
|
||||
|
||||
letter-spacing: 1px;
|
||||
top: 83px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
}
|
||||
|
||||
.link-grid__link {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
margin-bottom: 2rem;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (min-width: 651px) {
|
||||
width: 50%;
|
||||
|
|
@ -29,19 +29,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.link-grid__title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.link-grid__description {
|
||||
font-size: 1rem;
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.link-grid__cta {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
.component--mission-statement {
|
||||
margin-bottom: 1.5rem; padding: 1rem 1rem 1rem 1.25rem;
|
||||
padding: 1rem 1rem 1rem 1.25rem;
|
||||
|
||||
background-color: rgba($teal, 0.1);
|
||||
border-left: 0.5rem solid $teal;
|
||||
line-height: 1.55;
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 901px) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.modal {
|
||||
@include center;
|
||||
top: 0; left: 0;
|
||||
bottom: 0; right: 0;
|
||||
top: 0; right: 0;
|
||||
bottom: 0; left: 0;
|
||||
|
||||
background-color: rgba($black, 0.5);
|
||||
position: fixed;
|
||||
|
|
@ -38,8 +38,8 @@
|
|||
}
|
||||
|
||||
.modal-wrap {
|
||||
background-color: $white;
|
||||
padding: 2rem 1.5rem;
|
||||
background-color: $white;
|
||||
|
||||
@media (min-width: 501px) {
|
||||
width: 500px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.navigation {
|
||||
width: 100%;
|
||||
top: 0; left: 0;
|
||||
|
||||
background-color: $white;
|
||||
|
|
@ -6,7 +7,6 @@
|
|||
padding-right: env(safe-area-inset-right);
|
||||
padding-left: env(safe-area-inset-left);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
|
||||
> div:first-of-type {
|
||||
|
|
@ -19,11 +19,12 @@
|
|||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
overflow: auto;
|
||||
overflow-scrolling: touch;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
||||
overflow: auto;
|
||||
overflow-scrolling: touch; // sass-lint:disable-line no-misspelled-properties
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
width: 2rem; height: 4rem;
|
||||
top: 0; right: 0;
|
||||
|
|
@ -55,22 +56,22 @@
|
|||
&:first-of-type {
|
||||
@include hide-text;
|
||||
width: 10rem; height: 3rem;
|
||||
top: 0.5rem;
|
||||
|
||||
// background-image: url("/assets/media/svg/logo.svg");
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 250' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23222' d='M296.05, 85.9l0, 14.1l-138.8, 85.3l-104.6, -51.3l0.2, -7.9l104, 51.2l132.2, -81.2l0, -5.8l-124.8, -60.2l-139.2, 86.1l0, 38.5l131.8, 65.2l137.6, -84.4l3.9, 6l-141.1, 86.4l-139.2, -68.8l0, -46.8l145.8, -90.2l132.2, 63.8Z'/%3E %3Cpath d='M294.25, 150.9l2, -12.6l-12.2, -2.1l0.8, -4.9l17.1, 2.9l-2.8, 17.5l-4.9, -0.8Z'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
flex: 1;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
&:not(:first-of-type):not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
|
||||
&::after {
|
||||
width: 100%; height: 3px;
|
||||
left: 0;
|
||||
|
||||
background-color: $teal;
|
||||
content: "";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transition: bottom 0.2s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
pre {
|
||||
margin-bottom: 2rem; padding: 2rem;
|
||||
padding: 2rem;
|
||||
|
||||
line-height: 1.33;
|
||||
margin-bottom: 2rem;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// sass-lint:disable indentation
|
||||
// 400
|
||||
|
||||
@font-face {
|
||||
|
|
@ -18,8 +19,6 @@
|
|||
url("../assets/type/inter/400i.woff") format("woff");
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 700
|
||||
|
||||
@font-face {
|
||||
|
|
@ -40,23 +39,6 @@
|
|||
url("../assets/type/inter/700i.woff") format("woff");
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Note that you may want to do something like this to make sure you are serving
|
||||
constant fonts to older browsers:
|
||||
|
||||
html {
|
||||
font-family: "Inter UI", sans-serif;
|
||||
}
|
||||
|
||||
@supports (font-variation-settings: normal) {
|
||||
html {
|
||||
font-family: "Inter UI Variable", sans-serif;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
// Single variable font
|
||||
|
||||
@font-face {
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
// via //brick.freetls.fastly.net/Karla:400,700,400i (brick.im)
|
||||
|
||||
@font-face {
|
||||
font-family: "Karla";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Karla Regular"), url(https://brick.freetls.fastly.net/fonts/karla/400.woff) format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Karla";
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local("Karla Italic"), url(https://brick.freetls.fastly.net/fonts/karla/400i.woff) format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Karla";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Karla Bold"), url(https://brick.freetls.fastly.net/fonts/karla/700.woff) format("woff");
|
||||
}
|
||||
|
|
@ -67,14 +67,14 @@
|
|||
"sass-lint": "^1.12.1",
|
||||
"snazzy": "^8.0.0",
|
||||
"standardx": "^3.0.1",
|
||||
"updates": "^4.5.0"
|
||||
"updates": "^4.5.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": "10.2.x"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "pretty-quick --staged"
|
||||
"pre-commit": "pretty-quick --staged && npm run test:sass"
|
||||
}
|
||||
},
|
||||
"main": "server.js",
|
||||
|
|
@ -87,6 +87,7 @@
|
|||
"test": "run-s test:*",
|
||||
"test:dependencies": "updates --update ./",
|
||||
"test:lint": "standardx --verbose | snazzy",
|
||||
"test:sass": "sass-lint --config .sasslintrc 'app/sass/*.scss, app/sass/**/*.scss' --verbose --no-exit",
|
||||
"watch": "run-p watch:*",
|
||||
"watch:sass": "sass --watch app/sass:app/dist --style compressed",
|
||||
"watch:server": "NODE_ENV=development nodemon server --ignore 'public/'"
|
||||
|
|
|
|||
Loading…
Reference in a new issue