Halaman utama Jelajahi Bantuan
Masuk
biheng
/
uppy
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

Moving from Stylus to SCSS

Artur Paikin 9 tahun lalu
induk
47dd6f2a07
melakukan
19a87a8ac5
14 mengubah file dengan 1002 tambahan dan 98 penghapusan
Unified View Tampilkan Statistik Diff
  1. 10 4
      website/_config.yml
  2. 1 0
      website/package.json
  3. 5 0
      website/themes/uppy/_config.yml
  4. 1 1
      website/themes/uppy/layout/layout.ejs
  5. 0 23
      website/themes/uppy/source/css/_blog.styl
  6. 160 0
      website/themes/uppy/source/css/_common.scss
  7. 0 34
      website/themes/uppy/source/css/_demo.styl
  8. 400 0
      website/themes/uppy/source/css/_index.scss
  9. 395 0
      website/themes/uppy/source/css/_page.scss
  10. 25 0
      website/themes/uppy/source/css/_settings.scss
  11. 0 34
      website/themes/uppy/source/css/benchmark.styl
  12. 4 0
      website/themes/uppy/source/css/main.scss
  13. 0 2
      website/themes/uppy/source/css/page.styl
  14. 1 0
      website/themes/uppy/source/images/uppy.svg

+ 10 - 4
website/_config.yml
Tampilan Berkas 

@@ -4,9 +4,9 @@
 
 
 
 # Uppy versions, auto updated by update.js
 
 # Uppy versions, auto updated by update.js
 
 uppy_version: 0.0.1
 
 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
 
 # Theme
 
 google_analytics: UA-63083-12
 
 google_analytics: UA-63083-12
 
@@ -15,7 +15,7 @@ root_domain: uppyjs.io
 
 # Site
 
 # Site
 
 title: Uppy
 
 title: Uppy
 
 subtitle: "Almost as cute as a puppy"
 
 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_medium: /images/dog-172.png
 
 logo_icon: /images/emojis/dog.png
 
 logo_icon: /images/emojis/dog.png
 
 description: >
 
 description: >
 
@@ -116,6 +116,12 @@ markdown:
 
   smartLists: true
 
   smartLists: true
 
   smartypants: true
 
   smartypants: true
 
 
 
+node_sass:
 
+  debug: false
 
+  outputStyle: nested
 
+  precision: 5
 
+  sourceComments: false
 
+
 
 # Deployment
 
 # Deployment
 
 ## Docs: https://hexo.io/docs/deployment.html
 
 ## Docs: https://hexo.io/docs/deployment.html
 
 # deploy:
 
 # deploy:

+ 1 - 0
website/package.json
Tampilan Berkas 

@@ -14,6 +14,7 @@
 
     "hexo-generator-tag": "^0.1.1",
 
     "hexo-generator-tag": "^0.1.1",
 
     "hexo-renderer-ejs": "^0.1.0",
 
     "hexo-renderer-ejs": "^0.1.0",
 
     "hexo-renderer-marked": "^0.2.4",
 
     "hexo-renderer-marked": "^0.2.4",
 
+    "hexo-renderer-scss": "^1.0.1",
 
     "hexo-renderer-stylus": "^0.2.0",
 
     "hexo-renderer-stylus": "^0.2.0",
 
     "hexo-server": "^0.1.2",
 
     "hexo-server": "^0.1.2",
 
     "hexo-tag-emojis": "^2.0.0",
 
     "hexo-tag-emojis": "^2.0.0",

+ 5 - 0
website/themes/uppy/_config.yml
Tampilan Berkas 

@@ -0,0 +1,5 @@
 
+node_sass:
 
+  debug: false
 
+  outputStyle: nested
 
+  precision: 5
 
+  sourceComments: false

+ 1 - 1
website/themes/uppy/layout/layout.ejs
Tampilan Berkas 

@@ -12,7 +12,7 @@
 
         <script>
 
         <script>
 
             window.PAGE_TYPE = "<%- page.type %>"
 
             window.PAGE_TYPE = "<%- page.type %>"
 
         </script>
 
         </script>
 
-        <%- css(isIndex ? 'css/index' : 'css/page') %>
 
+        <%- css('css/main') %>
 
         <%- partial('partials/ga') %>
 
         <%- partial('partials/ga') %>
 
     </head>
 
     </head>
 
     <body>
 
     <body>

+ 0 - 23
website/themes/uppy/source/css/_blog.styl
Tampilan Berkas 

@@ -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 - 0
website/themes/uppy/source/css/_common.scss
Tampilan Berkas 

@@ -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; }
 
+    }
 
+  }
 
+}

+ 0 - 34
website/themes/uppy/source/css/_demo.styl
Tampilan Berkas 

@@ -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 - 0
website/themes/uppy/source/css/_index.scss
Tampilan Berkas 

@@ -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 - 0
website/themes/uppy/source/css/_page.scss
Tampilan Berkas 

@@ -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 - 0
website/themes/uppy/source/css/_settings.scss
Tampilan Berkas 

@@ -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;

+ 0 - 34
website/themes/uppy/source/css/benchmark.styl
Tampilan Berkas 

@@ -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 - 0
website/themes/uppy/source/css/main.scss
Tampilan Berkas 

@@ -0,0 +1,4 @@
 
+@import '_settings.scss';
 
+@import '_common.scss';
 
+@import '_index.scss';
 
+@import '_page.scss';

+ 0 - 2
website/themes/uppy/source/css/page.styl
Tampilan Berkas 

@@ -1,6 +1,4 @@
 
 @import "_common"
 
 @import "_common"
 
-@import "_demo"
 
-@import "_blog"
 
 
 
 $header-height = 40px
 
 $header-height = 40px

+ 1 - 0
website/themes/uppy/source/images/uppy.svg
Tampilan Berkas 

@@ -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>