mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-24 02:38:58 +00:00
Moving from Stylus to SCSS
This commit is contained in:
Artur Paikin
parent
47dd6f2a07
commit
19a87a8ac5
14 changed files with 1002 additions and 98 deletions
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
# Uppy versions, auto updated by update.js
|
||||
uppy_version: 0.0.1
|
||||
uppy_dev_size: "0.00"
|
||||
uppy_min_size: "0.00"
|
||||
uppy_gz_size: "0.00"
|
||||
uppy_dev_size: "54.87"
|
||||
uppy_min_size: "54.87"
|
||||
uppy_gz_size: "54.87"
|
||||
|
||||
# Theme
|
||||
google_analytics: UA-63083-12
|
||||
|
|
@ -15,7 +15,7 @@ root_domain: uppyjs.io
|
|||
# Site
|
||||
title: Uppy
|
||||
subtitle: "Almost as cute as a puppy"
|
||||
logo_large: /images/cute-puppy-2.png
|
||||
logo_large: /images/uppy.svg
|
||||
logo_medium: /images/dog-172.png
|
||||
logo_icon: /images/emojis/dog.png
|
||||
description: >
|
||||
|
|
@ -116,6 +116,12 @@ markdown:
|
|||
smartLists: true
|
||||
smartypants: true
|
||||
|
||||
node_sass:
|
||||
debug: false
|
||||
outputStyle: nested
|
||||
precision: 5
|
||||
sourceComments: false
|
||||
|
||||
# Deployment
|
||||
## Docs: https://hexo.io/docs/deployment.html
|
||||
# deploy:
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"hexo-generator-tag": "^0.1.1",
|
||||
"hexo-renderer-ejs": "^0.1.0",
|
||||
"hexo-renderer-marked": "^0.2.4",
|
||||
"hexo-renderer-scss": "^1.0.1",
|
||||
"hexo-renderer-stylus": "^0.2.0",
|
||||
"hexo-server": "^0.1.2",
|
||||
"hexo-tag-emojis": "^2.0.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
node_sass:
|
||||
debug: false
|
||||
outputStyle: nested
|
||||
precision: 5
|
||||
sourceComments: false
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<script>
|
||||
window.PAGE_TYPE = "<%- page.type %>"
|
||||
</script>
|
||||
<%- css(isIndex ? 'css/index' : 'css/page') %>
|
||||
<%- css('css/main') %>
|
||||
<%- partial('partials/ga') %>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
.content.blog
|
||||
h1
|
||||
margin 0 0 .5em
|
||||
h2
|
||||
margin .8em 0
|
||||
padding-bottom 0
|
||||
border-bottom none
|
||||
a
|
||||
color $dark
|
||||
&:hover
|
||||
border-bottom 2px solid $primary
|
||||
h4
|
||||
color $light
|
||||
margin 1.2em 0
|
||||
figure, p
|
||||
margin-left 0
|
||||
.post
|
||||
padding 1em 0 2em
|
||||
border-bottom 1px solid $border
|
||||
|
||||
@media screen and (max-width: 1400px) and (min-width: 720px)
|
||||
.content.blog.post
|
||||
margin 0 0 0 280px
|
||||
160
website/themes/uppy/source/css/_common.scss
Normal file
160
website/themes/uppy/source/css/_common.scss
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
body {
|
||||
font-family: $body-font;
|
||||
font-size: $body-font-size;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: $medium;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $medium
|
||||
}
|
||||
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, strong {
|
||||
font-weight: 600;
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
font-family: $code-font;;
|
||||
font-size: $code-font-size;
|
||||
background-color: $codebg;
|
||||
-webkit-font-smoothing: initial;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #e96900;
|
||||
padding: 3px 5px;
|
||||
margin: 0 2px;
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
em {
|
||||
color: $light;
|
||||
}
|
||||
|
||||
p {
|
||||
word-spacing: 0.05em;
|
||||
}
|
||||
|
||||
a.button {
|
||||
display: inline-block;
|
||||
font-family: $code-font;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background-color: lighten($primary, 8%);
|
||||
border-bottom: 2px solid darken($primary, 12%);
|
||||
padding: 12px 14px;
|
||||
border-radius: 4px;
|
||||
transition: all .15s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($primary, 15%);
|
||||
transform: translate(0, -2px);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
background-color: $codebg;
|
||||
padding: .8em .8em .4em;
|
||||
line-height: 1.1em;
|
||||
border-radius: $radius;
|
||||
|
||||
table, tr, td {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
.code {
|
||||
pre {
|
||||
padding: 1.2em 1.4em;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.html, &.js, &.bash, &.css {
|
||||
.code:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #ccc;
|
||||
text-align: right;
|
||||
font-size: .75em;
|
||||
padding: 5px 10px 0;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.html .code:after { content: 'HTML'; }
|
||||
&.js .code:after { content: 'JS'; }
|
||||
&.bash .code:after { content: 'Shell'; }
|
||||
&.css .code:after { content: 'CSS'; }
|
||||
}
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 60px 30px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#nav {
|
||||
.nav-link { cursor: pointer; }
|
||||
|
||||
.nav-dropdown-container {
|
||||
.nav-link {
|
||||
&:hover { border-bottom: none; }
|
||||
}
|
||||
|
||||
&:hover .nav-dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
padding: 10px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: #ccc;
|
||||
text-align: left;
|
||||
border-radius: 4px;
|
||||
|
||||
li {
|
||||
line-height: 1.8em;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $light;
|
||||
font-size: .9em;
|
||||
display: block;
|
||||
padding: 0 30px 0 20px;
|
||||
&:hover { color: $primary; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
#demo, .demo
|
||||
border 1px solid #eee
|
||||
border-radius $radius
|
||||
padding 25px 35px
|
||||
margin-bottom 40px
|
||||
font-size 1.2em
|
||||
line-height 1.5em
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
h1
|
||||
margin 0 0 .5em
|
||||
font-size 1.8em
|
||||
ul
|
||||
padding-left 1.5em
|
||||
margin 0
|
||||
li
|
||||
cursor pointer
|
||||
color $medium
|
||||
-ms-user-select none
|
||||
-moz-user-select none
|
||||
-webkit-user-select none
|
||||
&.done
|
||||
color $light
|
||||
text-decoration line-through
|
||||
|
||||
ul#demo, ul.demo
|
||||
li
|
||||
margin-left 1.5em
|
||||
|
||||
@media screen and (max-width: 720px)
|
||||
#demo, .demo
|
||||
margin-left 0
|
||||
400
website/themes/uppy/source/css/_index.scss
Normal file
400
website/themes/uppy/source/css/_index.scss
Normal file
|
|
@ -0,0 +1,400 @@
|
|||
@mixin zoom() {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#nav, #translations {
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;;
|
||||
position: relative;
|
||||
line-height: 40px;
|
||||
&:last-child {
|
||||
.nav-link { margin-right: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#translations {
|
||||
margin-bottom: 3em;
|
||||
|
||||
.delimiter {
|
||||
color: $light;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $light;
|
||||
padding-bottom: 3px;
|
||||
margin: 0 1.5em;
|
||||
|
||||
&:first-child { margin-left: 0; }
|
||||
&:hover, &.current { border-bottom: 3px solid $primary; }
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#logo-wrap {
|
||||
margin: 2em 0 2em;
|
||||
}
|
||||
|
||||
#hero {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.inner { padding-top: 20px; }
|
||||
|
||||
h1 {
|
||||
font-family: $logo-font;
|
||||
font-weight: 300;
|
||||
font-size: 4em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: $light;
|
||||
}
|
||||
|
||||
.desc {
|
||||
max-width: 800px;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
margin: 1.5em auto;
|
||||
color: $light;
|
||||
}
|
||||
|
||||
.down {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
padding: 1.5em 0;
|
||||
}
|
||||
|
||||
a.button {
|
||||
width: 280px;
|
||||
margin: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
#social {
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
margin: 1.5em auto;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
vertical-align: middle;
|
||||
&.last { margin-left: -2px; }
|
||||
}
|
||||
}
|
||||
|
||||
#example {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 3em;
|
||||
|
||||
h2 { margin-bottom: 1.5em; }
|
||||
|
||||
code, pre {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
white-space: pre;
|
||||
font-family: 'Roboto Mono', Monaco, courier, monospace;
|
||||
font-size: 12px;
|
||||
height: auto;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
figure.highlight {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.sign {
|
||||
display: inline-block;
|
||||
height: 10em;
|
||||
line-height: 9em;
|
||||
padding: 0 .5em;
|
||||
font-weight: 600;
|
||||
color: $light;
|
||||
}
|
||||
|
||||
.block {
|
||||
padding: 7px;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
width: 43%;
|
||||
height: 12em;
|
||||
vertical-align: top;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.125);
|
||||
overflow-x: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
#features {
|
||||
padding: 3em 0;
|
||||
text-align: center;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.cool {
|
||||
font-size: 1.8em;
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
color: $light;
|
||||
}
|
||||
|
||||
.feats {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.feat {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
width: 280px;
|
||||
margin: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $medium;
|
||||
line-height: 40px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $light;
|
||||
padding-left: 52px;
|
||||
margin: .4em 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 12px;
|
||||
background: url('../images/icons.png');
|
||||
background-size: 240px 40px;
|
||||
&.fast { background-position: -40px 0; }
|
||||
&.compact { background-position: -80px 0; }
|
||||
&.powerful { background-position: -120px 0; }
|
||||
&.composable { background-position: -160px 0; }
|
||||
&.module { background-position: -200px 0; }
|
||||
}
|
||||
}
|
||||
|
||||
#design_goals {
|
||||
padding: 4em 0;
|
||||
background-color: $primary;
|
||||
color: #fff;
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
color: #fff;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
line-height: 1.8em;
|
||||
font-size: 1.15em;
|
||||
width: 640px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url('../images/check.png') center center no-repeat;
|
||||
background-size: 24px 24px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 4em 0;
|
||||
background-color: $darkgray;
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
border-radius: 100%;
|
||||
margin: 2.5em 0 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
|
||||
&.start {
|
||||
font-size: 1.2em;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
border: 1px solid #fff;
|
||||
display: inline-block;
|
||||
padding: 12px 20px;
|
||||
border-radius: 25px;
|
||||
transition: all .15s ease;
|
||||
margin-bottom: 2em;
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
color: #7f8c8d;
|
||||
@include zoom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p { margin: .3em 0; }
|
||||
}
|
||||
|
||||
// #main { display: none; }
|
||||
#buildbadge { margin-left: -2px !important; }
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#nav {
|
||||
margin: 2em 1.8em 0;
|
||||
}
|
||||
|
||||
#translations {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: .85em;
|
||||
margin: 0 .5em;
|
||||
}
|
||||
|
||||
.divider {
|
||||
font-size: 1.2em;
|
||||
margin: 2.5em 1em;
|
||||
}
|
||||
|
||||
#hero {
|
||||
.inner h1 {
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
max-width: 300px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
a.button {
|
||||
width: 260px;
|
||||
font-size: .8em;
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.warning, .desc {
|
||||
font-size: .85em;
|
||||
margin: 1em auto;
|
||||
br { display: none; }
|
||||
}
|
||||
|
||||
.down { display: none; }
|
||||
}
|
||||
|
||||
#social {
|
||||
max-width: 340px;
|
||||
margin: 1.2em auto;
|
||||
}
|
||||
|
||||
.cool { margin-top: 0; }
|
||||
|
||||
#features .feat {
|
||||
font-size: 14px;
|
||||
margin: .8em 0;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#design_goals {
|
||||
ul {
|
||||
width: 280px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 860px) {
|
||||
#features, #hero {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#example {
|
||||
.block {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#demo {
|
||||
padding: 5px 20px 20px;
|
||||
}
|
||||
|
||||
.sign {
|
||||
display: block;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
padding: .5em 0;
|
||||
}
|
||||
}
|
||||
395
website/themes/uppy/source/css/_page.scss
Normal file
395
website/themes/uppy/source/css/_page.scss
Normal file
|
|
@ -0,0 +1,395 @@
|
|||
#header {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px rgba(0,0,0,.25);
|
||||
padding: 25px 60px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#nav {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
top: 25px;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
.break { display: none; }
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 .6em;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-bottom: 3px;
|
||||
&:hover, &.current { border-bottom: 3px solid $primary; }
|
||||
}
|
||||
|
||||
#search-query {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15px 0 30px;
|
||||
border: 1px solid #e3e3e3;
|
||||
outline: none;
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
transition: border-color .2s ease;
|
||||
background: #fff url(/images/search.png) 8px 5px no-repeat;
|
||||
background-size: 20px;
|
||||
&:focus { border-color: $primary; }
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: inline-block;
|
||||
font-size: 1.5em;
|
||||
line-height: $header-height;
|
||||
color: $dark;
|
||||
font-family: $logo-font;
|
||||
font-weight: 500;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
width: $header-height;
|
||||
height: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#mobile-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
z-index: 9;
|
||||
display: none;
|
||||
box-shadow: 0 0 4px rgba(0,0,0,.25);
|
||||
|
||||
.menu-button {
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
background: url(../images/menu.png) center center no-repeat;
|
||||
background-size: 24px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url(../images/cute-puppy-2.png) center center no-repeat;
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
background-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 60px;
|
||||
bottom: 0;
|
||||
padding: 2.2em 0;
|
||||
width: 260px;
|
||||
margin-right: 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar { width: 0 !important; }
|
||||
h2 { margin-top: .2em; }
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
line-height: 1.8em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.version-select {
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.menu-root {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.menu-sub {
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
color: $light;
|
||||
|
||||
&.current {
|
||||
font-weight: 600;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&.new &:after {
|
||||
content: 'NEW';
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background-color: $primary;
|
||||
line-height: 14px;
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
&:hover { border-bottom: 2px solid $primary; }
|
||||
}
|
||||
|
||||
.section-link &.active {
|
||||
font-weight: bold;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
margin-bottom: 20px;
|
||||
display: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2.2em 0;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
|
||||
&.api {
|
||||
ul {
|
||||
padding-left: 1.25em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
ul, p { margin: .6em 0; }
|
||||
}
|
||||
|
||||
a.button {
|
||||
font-size: .9em;
|
||||
color: #fff;
|
||||
margin: .2em 0;
|
||||
width :180px;
|
||||
text-align: center;
|
||||
padding: 12px 24px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img { max-width: 100%; }
|
||||
|
||||
span.light {
|
||||
color: $light;
|
||||
}
|
||||
|
||||
span.info {
|
||||
font-size: .85em;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 280px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
h1 { margin: 0 0 1em; }
|
||||
|
||||
h2 {
|
||||
margin: 2em 0 .8em;
|
||||
padding-bottom: .7em;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 3em 0 1.2em;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: "#";
|
||||
color: $primary;
|
||||
position: absolute;
|
||||
left: -0.7em;
|
||||
top: -2px;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
figure, p, ul, ol {
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
|
||||
p, ul, ol {
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 2em 0;
|
||||
padding-left: 20px;
|
||||
border-left: 4px solid $primary;
|
||||
p {
|
||||
font-weight: 600;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
iframe { margin: 1em 0; }
|
||||
|
||||
p.tip {
|
||||
padding: 12px 24px 12px 30px;
|
||||
margin: 2em 0;
|
||||
border-left: 4px solid $red;
|
||||
background-color: $codebg;
|
||||
position: relative;
|
||||
border-bottom-right-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: -12px;
|
||||
background-color: $red;
|
||||
color: #fff;
|
||||
content: '!';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
font-family: $logo-font;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.guide-links {
|
||||
margin-top: 2em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: $light;
|
||||
margin-top: 2em;
|
||||
padding-top: 2em;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 720px) {
|
||||
#main.fix-sidebar .sidebar {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.content.with-sidebar {
|
||||
margin-left: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
#buildbadge {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 560px) {
|
||||
#downloads {
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
|
||||
.info {
|
||||
margin-top: 5px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
iframe { margin: 0 !important; }
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
body {
|
||||
-webkit-text-size-adjust: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-bottom: 1px;
|
||||
&:hover, &.current {
|
||||
border-bottom: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
#search-query {
|
||||
width: 200px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#mobile-bar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#main {
|
||||
padding: 2em 1.4em 0;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
padding: 1.2em 1em;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
background-color: #f9f9f9;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 60px 30px 20px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.2);
|
||||
box-sizing: border-box;
|
||||
transition: all .4s cubic-bezier(0.4, 0, 0, 1);
|
||||
transform: translate(-280px, 0);
|
||||
|
||||
.main-menu { display: block; }
|
||||
|
||||
&.open { transform: translate(0, 0); }
|
||||
}
|
||||
|
||||
.content.with-sidebar { margin-left: 0; }
|
||||
|
||||
.footer {
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
25
website/themes/uppy/source/css/_settings.scss
Normal file
25
website/themes/uppy/source/css/_settings.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// font faces
|
||||
$body-font: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
$logo-font : 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
$code-font : 'Roboto Mono', Monaco, courier, monospace;
|
||||
|
||||
// font sizes
|
||||
$body-font-size : 15px;
|
||||
$code-font-size : .8em;
|
||||
|
||||
// colors
|
||||
$blue : #01A5E1;
|
||||
$dark : #2c3e50;
|
||||
$medium : #34495e;
|
||||
$light : #7f8c8d;
|
||||
$green : #42b983;
|
||||
$border : #dddddd;
|
||||
$codebg : #f8f8f8;
|
||||
$red : #ff6666;
|
||||
$darkgray : #34393A;
|
||||
$primary : $blue;
|
||||
|
||||
$radius : 2px;
|
||||
|
||||
// sizes
|
||||
$header-height: 40px;
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
#benchmark-results
|
||||
margin-bottom 2em
|
||||
ul
|
||||
list-style-type none
|
||||
padding 0
|
||||
margin-left 0
|
||||
|
||||
.framework, .time, .bar, .inner
|
||||
display inline-block
|
||||
|
||||
.framework
|
||||
width 4.2em
|
||||
//text-align right
|
||||
margin-right 1em
|
||||
font-weight 600
|
||||
|
||||
.time
|
||||
width 4.2em
|
||||
margin-right 1em
|
||||
|
||||
.bar
|
||||
width 60%
|
||||
&.min .inner
|
||||
background-color #e74c3c
|
||||
|
||||
.inner
|
||||
height 3px
|
||||
vertical-align middle
|
||||
background-color #3498db
|
||||
|
||||
@media screen and (max-width: 600px)
|
||||
#benchmark-results
|
||||
.bar
|
||||
width 45%
|
||||
4
website/themes/uppy/source/css/main.scss
Normal file
4
website/themes/uppy/source/css/main.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import '_settings.scss';
|
||||
@import '_common.scss';
|
||||
@import '_index.scss';
|
||||
@import '_page.scss';
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
@import "_common"
|
||||
@import "_demo"
|
||||
@import "_blog"
|
||||
|
||||
$header-height = 40px
|
||||
|
||||
|
|
|
|||
1
website/themes/uppy/source/images/uppy.svg
Normal file
1
website/themes/uppy/source/images/uppy.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="101" height="58" viewBox="0 0 101 58" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M17.582.3L.915 41.713l32.94 13.295L17.582.3zm83.333 41.414L67.975 55.01 84.25.3l16.665 41.414zm-48.998 5.403L63.443 35.59H38.386l11.527 11.526v5.905l-3.063 3.32 1.474 1.36 2.59-2.806 2.59 2.807 1.475-1.357-3.064-3.32v-5.906zm16.06-26.702c-3.973 0-7.194-3.22-7.194-7.193 0-3.973 3.222-7.193 7.193-7.193 3.974 0 7.193 3.22 7.193 7.19 0 3.974-3.22 7.194-7.195 7.194zM70.48 8.682c-.737 0-1.336.6-1.336 1.337 0 .736.6 1.335 1.337 1.335.738 0 1.338-.598 1.338-1.336 0-.74-.6-1.338-1.338-1.338zM33.855 20.415c-3.973 0-7.193-3.22-7.193-7.193 0-3.973 3.22-7.193 7.195-7.193 3.973 0 7.192 3.22 7.192 7.19 0 3.974-3.22 7.194-7.192 7.194zM36.36 8.682c-.737 0-1.336.6-1.336 1.337 0 .736.6 1.335 1.337 1.335.738 0 1.338-.598 1.338-1.336 0-.74-.598-1.338-1.337-1.338z" fill="#000"/></g></svg>
|
||||
|
After Width: | Height: | Size: 906 B |
Loading…
Add table
Add a link
Reference in a new issue