diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_browser.scss (renamed from scss/browser.scss) | 5 | ||||
| -rw-r--r-- | scss/_canvasapp.scss | 36 | ||||
| -rw-r--r-- | scss/_defs.scss | 19 | ||||
| -rw-r--r-- | scss/_footer.scss | 27 | ||||
| -rw-r--r-- | scss/_header.scss | 33 | ||||
| -rw-r--r-- | scss/_reset.scss | 65 | ||||
| -rw-r--r-- | scss/main.scss | 126 |
7 files changed, 191 insertions, 120 deletions
diff --git a/scss/browser.scss b/scss/_browser.scss index 1117da7..ab6be14 100644 --- a/scss/browser.scss +++ b/scss/_browser.scss @@ -1,5 +1,8 @@ .browser { display: flex; + flex: 1; + + border-top: 0.2rem solid $gray-bright; .view { display: flex; @@ -11,7 +14,7 @@ &.inspector { top: 0; position: sticky; - height: 100vh; + max-height: 100vh; color: #c5c8c6; @include left-border; diff --git a/scss/_canvasapp.scss b/scss/_canvasapp.scss new file mode 100644 index 0000000..2eb1a42 --- /dev/null +++ b/scss/_canvasapp.scss @@ -0,0 +1,36 @@ +.canvas_app { + position: relative; + + display: inline-block; + + .overlay { + position: absolute; + padding: 1rem; + + + top: 0; + left: 0; + right: 0; + bottom: 0; + + opacity: 0; + + background: rgba(0, 0, 0, 0.7); + + transition: opacity 300ms; + + &:hover { + opacity: 1; + } + + > * { + margin: 0.5em; + } + + a { + display: block; + color: $gray-bright; + font-family: inherit; + } + } +} diff --git a/scss/_defs.scss b/scss/_defs.scss new file mode 100644 index 0000000..d76655e --- /dev/null +++ b/scss/_defs.scss @@ -0,0 +1,19 @@ +$white: #ffffff; +$gray-bright: #eeeeee; +$gray-dark: #303336; +$gray-darker: #1d1f21; +$gray-neutral: #b9bdc1; +$gray-success: #bdddc1; +$gray-fail: #ddbdc1; + +@mixin left-border($w: 0.6rem) { + border-style: solid; + border-width: 0 0 0 $w; + border-radius: 0 6px 6px 0; +} + +@mixin right-border($w: 0.6rem) { + border-style: solid; + border-width: 0 $w 0 0; + border-radius: 6px 0 0 6px; +} diff --git a/scss/_footer.scss b/scss/_footer.scss new file mode 100644 index 0000000..466139c --- /dev/null +++ b/scss/_footer.scss @@ -0,0 +1,27 @@ +footer { + display: flex; + padding: 1rem 2rem; + + color: $gray-bright; + background: $gray-dark; + + .icons { + flex: 1; + display: flex; + justify-content: flex-end; + + .iconlink { + filter: invert(.7); + + &:hover { + filter: invert(1); + } + + > img { + height: 1em; + margin-left: 0.5em; + vertical-align: middle; + } + } + } +} diff --git a/scss/_header.scss b/scss/_header.scss new file mode 100644 index 0000000..b3a6898 --- /dev/null +++ b/scss/_header.scss @@ -0,0 +1,33 @@ +header { + font-family: 'Source Sans Pro', sans-serif; + padding: 1rem 2rem; + text-align: right; + + color: $gray-bright; + background: $gray-dark; + + h1 { + display: flex; + justify-content: space-around; + align-items: baseline; + margin: 0; + + font-size: 4rem; + font-weight: 200; + + > b { + flex: 1; + } + + .bold { + font-weight: 400; + } + } + + .sun { + font-style: normal; + font-weight: 800; + font-size: 0.7em; + vertical-align: -0.04em; + } +} diff --git a/scss/_reset.scss b/scss/_reset.scss new file mode 100644 index 0000000..9dae26c --- /dev/null +++ b/scss/_reset.scss @@ -0,0 +1,65 @@ +* { + font-weight: inherit; + font-style: inherit; + font-family: inherit; + color: inherit; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +input, select, button { + color: initial; +} + +tt, code, kbd, samp { + font-family: 'monospace'; +} + +body, html, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: bold; +} + +::selection { + background: $gray-dark; + color: $gray-bright; + padding: 1em; +} + +b { font-weight: bold; } +i { font-style: italic; } +a { cursor: pointer; } +hr { clear: both; } + +body { + display: flex; + flex-direction: column; + justify-content: space-between; + + background: $white; + font-family: sans-serif; + + min-height: 100vh; +} + +a { + font-weight: bold; + + text-decoration: underline; + text-decoration-color: transparent; + + &:hover { + filter: invert(40%); + text-decoration-color: currentColor; + } + + transition: filter 500ms, text-decoration-color 500ms; +} + +code { + font-size: 0.8em; +} diff --git a/scss/main.scss b/scss/main.scss index adbb65d..fe67631 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -1,122 +1,10 @@ +@import 'defs'; +@import 'reset'; @import 'hljs'; - -$gray-bright: #eeeeee; -$gray-dark: #303336; -$gray-darker: #1d1f21; -$gray-neutral: #b9bdc1; -$gray-success: #bdddc1; -$gray-fail: #ddbdc1; - -@mixin left-border($w: 0.6rem) { - border-style: solid; - border-width: 0 0 0 $w; - border-radius: 0 6px 6px 0; -} - -@mixin right-border($w: 0.6rem) { - border-style: solid; - border-width: 0 $w 0 0; - border-radius: 6px 0 0 6px; -} - +@import 'header'; +@import 'footer'; @import 'browser'; - -body { - font-family: sans-serif; - margin: 0; - padding: 0; -} - -html { - margin: 0; - padding: 0; -} - -a { - color: inherit; -} - -header { - font-family: 'Source Sans Pro', sans-serif; - padding: 1rem 2rem; - text-align: right; - - color: $gray-bright; - background: $gray-dark; - - h1 { - display: flex; - justify-content: space-around; - align-items: baseline; - margin: 0; - - font-size: 4rem; - font-weight: 200; - - > b { - flex: 1; - } - - .bold { - font-weight: 400; - } - } - - i.sun { - font-style: normal; - font-weight: 800; - font-size: 0.7em; - vertical-align: -0.04em; - } -} - -.canvas_app { - position: relative; - - display: inline-block; - - .overlay { - position: absolute; - padding: 1rem; - - - top: 0; - left: 0; - right: 0; - bottom: 0; - - opacity: 0; - - background: rgba(0, 0, 0, 0.7); - - transition: opacity 300ms; - - &:hover { - opacity: 1; - } - - > * { - margin: 0.5em; - } - - a { - display: block; - color: $gray-bright; - font-family: inherit; - } - } -} - -h1 .icons { - display: inline-flex; - float: right; - - .iconlink > img { - height: 0.7em; - margin-left: 0.2em; - vertical-align: middle; - } -} +@import 'canvasapp'; pre > code.hljs { @include left-border; @@ -140,10 +28,10 @@ pre.dual-code { } } -.example { +.example, .well { @include left-border; - margin: 0 2rem; + margin: 1rem 2rem; padding: 1rem; background: $gray-bright; border-color: $gray-neutral; |