From 85e228896630b74307b393bf62f0eb0320d86190 Mon Sep 17 00:00:00 2001 From: andrea zuccarini Date: Sat, 17 Nov 2018 11:34:52 +0100 Subject: [PATCH 1/2] change style and add gulp --- gulpfile.js | 125 ++ package.json | 37 +- themes/navy/layout/partial/after_footer.swig | 64 +- themes/navy/layout/partial/head.swig | 9 +- themes/navy/layout/partial/header.swig | 164 +- themes/navy/source/css/_partial/archive.styl | 24 - themes/navy/source/css/_partial/base.styl | 51 - themes/navy/source/css/_partial/footer.styl | 214 --- themes/navy/source/css/_partial/header.styl | 212 --- .../navy/source/css/_partial/highlight.styl | 105 -- themes/navy/source/css/_partial/index.styl | 125 -- themes/navy/source/css/_partial/main.styl | 1112 ------------- .../navy/source/css/_partial/mobile_nav.styl | 139 -- themes/navy/source/css/_partial/page.styl | 375 ----- themes/navy/source/css/_partial/sidebar.styl | 39 - themes/navy/source/css/navy.styl | 13 - .../navy/source/img/icon-contribute-blue.svg | 3 + .../navy/source/img/icon-discussion-blue.svg | 6 + themes/navy/source/img/icon-join-blue.svg | 5 + themes/navy/source/img/link-arrow.svg | 20 + themes/navy/source/js/bundle.js | 3 - themes/navy/source/js/bundle.js.map | 15 - themes/navy/source/js/fetch_blog_posts.js | 22 - themes/navy/source/js/highlight.pack.js | 2 - themes/navy/source/js/lang_select.js | 21 - themes/navy/source/js/main.js | 192 +++ themes/navy/source/js/mobile_nav.js | 30 - themes/navy/source/js/plugins.js | 66 - themes/navy/source/js/search.js | 16 - themes/navy/source/js/solidity.js | 170 -- themes/navy/source/js/toc.js | 34 - themes/navy/source/js/vendor.js | 194 +++ themes/navy/source/js/vendor.js.map | 15 + .../_variables.styl => scss/_variables.scss} | 49 +- themes/navy/source/scss/archive.scss | 39 + themes/navy/source/scss/base.scss | 83 + themes/navy/source/scss/colors.scss | 23 + themes/navy/source/scss/fonts.scss | 5 + themes/navy/source/scss/footer.scss | 286 ++++ themes/navy/source/scss/formReset.scss | 153 ++ themes/navy/source/scss/header.scss | 265 ++++ themes/navy/source/scss/highlight.scss | 134 ++ themes/navy/source/scss/index.scss | 152 ++ themes/navy/source/scss/main.scss | 1398 +++++++++++++++++ themes/navy/source/scss/mobile_nav.scss | 164 ++ themes/navy/source/scss/page.scss | 555 +++++++ themes/navy/source/scss/popup.scss | 279 ++++ themes/navy/source/scss/sidebar.scss | 47 + 48 files changed, 4316 insertions(+), 2938 deletions(-) create mode 100644 gulpfile.js delete mode 100644 themes/navy/source/css/_partial/archive.styl delete mode 100644 themes/navy/source/css/_partial/base.styl delete mode 100644 themes/navy/source/css/_partial/footer.styl delete mode 100644 themes/navy/source/css/_partial/header.styl delete mode 100644 themes/navy/source/css/_partial/highlight.styl delete mode 100644 themes/navy/source/css/_partial/index.styl delete mode 100644 themes/navy/source/css/_partial/main.styl delete mode 100644 themes/navy/source/css/_partial/mobile_nav.styl delete mode 100644 themes/navy/source/css/_partial/page.styl delete mode 100644 themes/navy/source/css/_partial/sidebar.styl delete mode 100644 themes/navy/source/css/navy.styl create mode 100644 themes/navy/source/img/icon-contribute-blue.svg create mode 100644 themes/navy/source/img/icon-discussion-blue.svg create mode 100644 themes/navy/source/img/icon-join-blue.svg create mode 100644 themes/navy/source/img/link-arrow.svg delete mode 100644 themes/navy/source/js/bundle.js delete mode 100644 themes/navy/source/js/bundle.js.map delete mode 100644 themes/navy/source/js/fetch_blog_posts.js delete mode 100644 themes/navy/source/js/highlight.pack.js delete mode 100644 themes/navy/source/js/lang_select.js create mode 100644 themes/navy/source/js/main.js delete mode 100644 themes/navy/source/js/mobile_nav.js delete mode 100644 themes/navy/source/js/plugins.js delete mode 100644 themes/navy/source/js/search.js delete mode 100644 themes/navy/source/js/solidity.js delete mode 100644 themes/navy/source/js/toc.js create mode 100644 themes/navy/source/js/vendor.js create mode 100644 themes/navy/source/js/vendor.js.map rename themes/navy/source/{css/_variables.styl => scss/_variables.scss} (63%) create mode 100644 themes/navy/source/scss/archive.scss create mode 100644 themes/navy/source/scss/base.scss create mode 100644 themes/navy/source/scss/colors.scss create mode 100644 themes/navy/source/scss/fonts.scss create mode 100644 themes/navy/source/scss/footer.scss create mode 100644 themes/navy/source/scss/formReset.scss create mode 100644 themes/navy/source/scss/header.scss create mode 100644 themes/navy/source/scss/highlight.scss create mode 100644 themes/navy/source/scss/index.scss create mode 100644 themes/navy/source/scss/main.scss create mode 100644 themes/navy/source/scss/mobile_nav.scss create mode 100644 themes/navy/source/scss/page.scss create mode 100644 themes/navy/source/scss/popup.scss create mode 100644 themes/navy/source/scss/sidebar.scss diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..d0b2a5f --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,125 @@ +var gulp = require('gulp') +var log = require('fancy-log') +var source = require('vinyl-source-stream') +var babelify = require('babelify') +var watchify = require('watchify') +var exorcist = require('exorcist') +var browserify = require('browserify') +var browserSync = require('browser-sync').create() +var sass = require('gulp-sass') +var imagemin = require('gulp-imagemin') +var Hexo = require('hexo'); +var runSequence = require('run-sequence'); +var minify = require('gulp-minify'); +let cleanCSS = require('gulp-clean-css'); +var rename = require("gulp-rename"); + +// generate html with 'hexo generate' +var hexo = new Hexo(process.cwd(), {}); + +gulp.task('generate', function(cb) { + hexo.init().then(function() { + return hexo.call('generate', { + watch: false + }); + }).then(function() { + return hexo.exit(); + }).then(function() { + return cb() + }).catch(function(err) { + console.log(err); + hexo.exit(err); + return cb(err); + }) +}) + +var config = { + paths: { + src: { + scss: './themes/navy/source/scss/*.scss', + js: './themes/navy/source/js/main.js', + }, + dist: { + css: './public/css', + js: './public/js' + } + } +} + +// Watchify args contains necessary cache options to achieve fast incremental bundles. +// See watchify readme for details. Adding debug true for source-map generation. +watchify.args.debug = true +// Input file. +var bundler = watchify(browserify(config.paths.src.js, watchify.args)) + +// Babel transform +bundler.transform( + babelify.configure({ + sourceMapRelative: './themes/navy/source/js/' + }) +) + +// On updates recompile +bundler.on('update', bundle) + +function bundle() { + log('Compiling JS...') + + return bundler + .bundle() + .on('error', function(err) { + log(err.message) + browserSync.notify('Browserify Error!') + this.emit('end') + }) + .pipe(exorcist('./themes/navy/source/js/vendor.js.map')) + .pipe(source('vendor.js')) + .pipe(gulp.dest('./themes/navy/source/js')) + .pipe(browserSync.stream({ once: true })) +} + +gulp.task('compress', ['sass'], function() { + gulp.src('./themes/navy/source/js/vendor.js') + .pipe(minify({ + ext: { + min: '.min.js' + }, + })) + .pipe(gulp.dest('./public/js/')) + + gulp.src('./public/css/main.css') + .pipe(cleanCSS()) + .pipe(rename("main.min.css")) + .pipe(gulp.dest('./public/css/')); +}); + +gulp.task('bundle', function() { + return bundle() +}) + +gulp.task('sass', function() { + return gulp.src("./themes/navy/source/scss/main.scss") + .pipe(sass()) + .on('error', log) + .pipe(gulp.dest(config.paths.dist.css)) + .pipe(browserSync.stream()) +}) + +gulp.task('watch', function() { + gulp.watch(config.paths.src.scss, ['compress']) +}); + +gulp.task('build', function(cb) { + runSequence('generate', 'compress', 'bundle', 'watch') +}); + +gulp.task('exit', function(cb) { + process.exit(0); +}); + +gulp.task('run', function(cb) { + runSequence('generate', 'compress', 'bundle', 'exit') + +}); + +gulp.task('default', []) diff --git a/package.json b/package.json index 6cbab70..b796f81 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,19 @@ }, "scripts": { "clean": "rm -rf public/*", - "build": "hexo generate", + "build": "gulp run && hexo generate", "eslint": "eslint .", - "deploy": "hexo deploy" + "deploy": "hexo deploy", + "serve":"gulp run && hexo server" }, "dependencies": { "cheerio": "^0.20.0", + "d3": "^5.1.0", + "d3-ease": "^1.0.2", + "d3-interpolate": "^1.1.2", + "d3-scale": "^1.0.4", + "es6-promise": "^4.2.5", + "gulp": "^3.9.1", "hexo": "^3.7.1", "hexo-deployer-git": "^0.3.1", "hexo-generator-archive": "^0.1.4", @@ -22,13 +29,35 @@ "hexo-renderer-marked": "^0.2.10", "hexo-renderer-stylus": "^0.3.1", "hexo-server": "^0.2.0", + "isomorphic-fetch": "^2.2.1", "lodash": "^4.5.1", + "lodash.assign": "^4.2.0", + "lodash.clone": "^4.0.1", + "lodash.foreach": "^4.0.0", + "lodash.isempty": "^4.0.0", + "lodash.isequal": "^4.0.0", "lunr": "^2.1.2" }, "devDependencies": { + "babel-core": "^6.26.0", + "babelify": "^8.0.0", + "browser-sync": "^2.23.7", + "browserify": "^16.2.0", "del": "^3.0.0", "eslint": "^4.3.0", "eslint-config-hexo": "^2.0.0", - "rename": "^1.0.4" + "exorcist": "^1.0.1", + "fancy-log": "^1.3.2", + "gulp-clean-css": "^3.10.0", + "gulp-imagemin": "^4.1.0", + "gulp-minify": "^3.1.0", + "gulp-rename": "^1.4.0", + "gulp-sass": "^4.0.1", + "js-yaml": "^3.12.0", + "qrcode": "^1.3.2", + "rename": "^1.0.4", + "run-sequence": "^2.2.1", + "vinyl-source-stream": "^2.0.0", + "watchify": "^3.11.0" } -} \ No newline at end of file +} diff --git a/themes/navy/layout/partial/after_footer.swig b/themes/navy/layout/partial/after_footer.swig index 780a390..54b4cbe 100644 --- a/themes/navy/layout/partial/after_footer.swig +++ b/themes/navy/layout/partial/after_footer.swig @@ -1,64 +1,4 @@ - - - -{{ js('js/lang_select') }} -{{ js('js/toc') }} -{{ js('js/mobile_nav') }} -{{ js('js/search') }} -{{ js('js/fetch_blog_posts') }} - -{% if page.layout === 'plugins' %} - - - - - -{{ js('js/plugins') }} - -{% endif %} - - - - -{% if config.algolia[page.lang] %} - - -{% endif %} + +{{ js('js/vendor.min') }} diff --git a/themes/navy/layout/partial/head.swig b/themes/navy/layout/partial/head.swig index 9e48186..d35b5de 100644 --- a/themes/navy/layout/partial/head.swig +++ b/themes/navy/layout/partial/head.swig @@ -23,14 +23,7 @@ - - - {{ css('css/navy') }} - - - - - + {{ css('css/main.min') }} {{ feed_tag('atom.xml') }} diff --git a/themes/navy/layout/partial/header.swig b/themes/navy/layout/partial/header.swig index 33825c7..45047e8 100644 --- a/themes/navy/layout/partial/header.swig +++ b/themes/navy/layout/partial/header.swig @@ -14,7 +14,7 @@
  • Docs
    • -
  • +
  • Projects
    • @@ -51,45 +51,125 @@
    - \\\n ');\n });\n }\n });\n\n function getWords(str) {\n return str.split(/\\s+/).slice(0,25).join(\" \");\n }\n\n});\n\nlet heroImage = document.querySelectorAll(\".hero-image\")[0]\n\nif(heroImage) {\n setTimeout(function(){\n addClassToElement(heroImage, \"active\")\n }, 200)\n}\n\n/* Popups */\n\nlet community = document.querySelectorAll(\".has-popup-community\")[0]\nlet projects = document.querySelectorAll(\".has-popup-projects\")[0]\nlet mobileMenu = document.querySelectorAll(\".mobile-menu-trigger\")[0]\n\nlet popups = document.querySelectorAll('.popup-wrap')\nlet overlays = document.querySelectorAll(\".popup-overlay\")\nlet popupMenu = document.querySelectorAll(\"#general-menu-mobile\")[0]\n\nlet closeButtons = document.querySelectorAll(\".popup__button--close,#general-menu-mobile .close\")\n\nlet activePopup = null;\nlet activeOverlay = null;\n\ncommunity.addEventListener('click', function(event){\n showPopup(popups[0])\n event.preventDefault()\n\n})\n\nprojects.addEventListener('click', function(event){\n showPopup(popups[1])\n event.preventDefault()\n})\n\nmobileMenu.addEventListener('click', function(event) {\n showPopup(popupMenu)\n event.preventDefault()\n})\n\ncloseButtons.forEach((button) => {\n button.addEventListener('click', closeActivePopup)\n})\n\noverlays.forEach((overlay) => {\n overlay.addEventListener('click', closeActivePopup)\n})\n\nfunction showPopup(whichPopup) {\n activePopup = whichPopup\n addClassToElement(whichPopup, \"popup--shown\");\n}\n\nfunction closeActivePopup() {\n console.log(\"test\")\n removeClassFromElement(activePopup, \"popup--shown\");\n activePopup = null;\n}\n\nfunction closeMenu() {\n removeClassFromElement(activePopup, \"\")\n}\n\n/* Code highlighting */\n\nfunction highlight() {\n $('pre code').each(function(i, block) {\n hljs.highlightBlock(block);\n });\n}\n $(document).ready(function() {\n try {\n highlight();\n } catch(err) {\n console.log(\"retrying...\")\n setTimeout(function() {\n highlight();\n }, 2500)\n }\n\n var clipboard = new ClipboardJS(\".btn\");\n clipboard.on('success', function(e) {\n var id = $(e.trigger).attr(\"data-clipboard-target\");\n $(id).toggleClass(\"flash\");\n setTimeout(function() {\n $(id).toggleClass(\"flash\");\n }, 200);\n e.clearSelection();\n })\n})\n\n/* Mobile Nav */\n/*\nlet moreLink = document.querySelectorAll(\".item--more\")[0]\n\nlet nav = document.querySelectorAll(\".mobile-nav-wrap\")[0]\nlet navOverlay = document.querySelectorAll(\".mobile-nav-overlay\")[0]\nlet navCloseButton = document.querySelectorAll(\".mobile-nav-close\")[0]\n\n\nmoreLink.addEventListener('click', function(event){\n showNav()\n event.preventDefault()\n})\n\nnavCloseButton.addEventListener('click', closeNav)\nnavOverlay.addEventListener('click', closeNav)\n\n\nfunction showNav() {\n addClassToElement(nav, \"mobile-nav--shown\");\n}\n\nfunction closeNav() {\n removeClassFromElement(nav, \"mobile-nav--shown\");\n}\n*/\n\n/*--- Utils ---*/\nfunction addClassToElement(element, className) {\n (element.classList) ? element.classList.add(className) : element.className += ' ' + className\n return element\n}\n\nfunction removeClassFromElement(element, className) {\n if(element.classList) {\n element.classList.remove(className)\n } else {\n element.className = element.className.replace(new RegExp('(^|\\\\b)' + className.split(' ').join('|') + '(\\\\b|$)', 'gi'), ' ')\n }\n return element\n}\n" + ] +} \ No newline at end of file diff --git a/themes/navy/source/css/_variables.styl b/themes/navy/source/scss/_variables.scss similarity index 63% rename from themes/navy/source/css/_variables.styl rename to themes/navy/source/scss/_variables.scss index 145abea..79b110d 100644 --- a/themes/navy/source/css/_variables.styl +++ b/themes/navy/source/scss/_variables.scss @@ -1,3 +1,4 @@ +@import url('https://rsms.me/inter/inter-ui.css'); @font-face { font-family: 'Inter UI'; font-style: normal; @@ -53,42 +54,22 @@ } // Config -support-for-ie = false -vendor-prefixes = webkit moz ms official - -// Colors -color-default = #40444b -color-title = #000 -color-gray = #777F86 -color-border = #e3e3e3 -color-navy = #363763 -color-background = #ECF1F2 -color-background-light = #fff -color-main-link = #fff -color-link = #4360df -color-link-hover = lighten(color-link, 10%) - -// Typography -font-sans = "Inter UI", "Helvetica Neue", Helvetica, Arial, sans-serif -font-mono = "Inter UI", Monaco, Menlo, Consolas, monospace -font-title = "Inter UI", font-sans -font-size = 16px -line-height = 24px +$support-for-ie: false; +$vendor-prefixes: webkit moz ms official; // Layout -max-width = 1200px -gutter-width = 20px -sidebar-width = 30% -mobile-nav-width = 260px +$max-width: 1200px; +$gutter-width: 20px; +$sidebar-width: 30%; +$mobile-nav-width: 260px; // Media queries -mq-mobile = "screen and (max-width: 819px)" -mq-normal = "screen and (min-width: 820px)" -mq-tablet = "screen and (min-width: 480px)" +$mq-mobile: "screen and (max-width: 819px)"; +$mq-normal: "screen and (min-width: 820px)"; +$mq-tablet: "screen and (min-width: 480px)"; -break-sm = 575px -break-md = 767px -break-lg = 991px -break-xl = 1199px -status = #4360df -incubate = #008BAD +$break-sm: 575; +$break-md: 767px; +$break-lg: 991px; +$break-xl: 1199px; +$status: #4360df; diff --git a/themes/navy/source/scss/archive.scss b/themes/navy/source/scss/archive.scss new file mode 100644 index 0000000..7f2203e --- /dev/null +++ b/themes/navy/source/scss/archive.scss @@ -0,0 +1,39 @@ +.archive-post { + padding: 1em 0; + border-top: 1px solid $colorBorder; + &:last-child { + padding-bottom: 40px; + } +} + +.archive-post-link { + //clearfix(); + &:before + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } + // end clearfix() + display: block; + color: $colorDefault; + text-decoration: none; + line-height: line-height; + &:hover { + color: $colorLinkHover; + } +} + +.archive-post-title { + font-family: $FontTitle; + float: left; + font-weight: bold; +} + +.archive-post-date { + color: $colorGray; + float: right; + font-size: 0.9em; +} diff --git a/themes/navy/source/scss/base.scss b/themes/navy/source/scss/base.scss new file mode 100644 index 0000000..21652ab --- /dev/null +++ b/themes/navy/source/scss/base.scss @@ -0,0 +1,83 @@ +// skip global-reset() + +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +button +input[type="reset"] +input[type="button"] +input[type="submit"] { + &::-moz-focus-inner { + padding: 0; + margin: 0; + border: 0; + } +} + +input, button, select { + margin: 0; + padding: 0; + border: 0; +} + + +html, body { + @media screen { + height: 100%; + } +} + + +body { + background: $colorNavy; + font-size: font-size; + font-family: $FontSans; + color: $colorDefault; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; +} + +.wrapper { + //clearfix(); + &:before + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } + // end clearfix() + @media screen { + max-width: 1200px; + margin: 0 auto; + } +} + +.inner { + //clearfix(); + &:before + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } + // end clearfix() +} + +#content-wrap { + background: $colorWhite; +} + +#content-wrap-apply { + background: $colorBg; +} diff --git a/themes/navy/source/scss/colors.scss b/themes/navy/source/scss/colors.scss new file mode 100644 index 0000000..1592bd2 --- /dev/null +++ b/themes/navy/source/scss/colors.scss @@ -0,0 +1,23 @@ +$colorBg: rgba(236, 241, 242, 1); + +$colorWhite: rgba(255, 255, 255, 1); +$colorBlack: rgba(0, 0, 0, 1); + +$colorBlue: rgba(67, 96, 223, 1); +$colorGray: rgba(119, 127, 134, 1); +$colorNavy: rgba(54, 55, 99, 1); +$colorDarkBlue: rgba(38, 42, 57, 1); + +$colorBorder: rgba(227, 227, 227, 1); +$colorDefault: rgba(64, 68, 75, 1); +$colorLink: rgba(67, 96, 223, 1); +$colorLinkHover: lighten($colorLink, 10%); +$colorIncubate: rgba(0, 139, 173, 1); +$colorStatus: rgba(67, 96, 223, 1); + + +$colorIncubate: rgba(0,139,173,1); +$colorEmbark: rgba(54, 55, 99, 1); +$colorStudio: rgba(94, 193, 47, 1); +$colorNimbus: rgba(255, 156, 0, 1); +$colorHardwallet: rgba(127, 68, 223, 1); diff --git a/themes/navy/source/scss/fonts.scss b/themes/navy/source/scss/fonts.scss new file mode 100644 index 0000000..1916ce3 --- /dev/null +++ b/themes/navy/source/scss/fonts.scss @@ -0,0 +1,5 @@ +@import url('https://rsms.me/inter/inter-ui.css'); +$InterUI: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; +$FontTitle: "Inter UI", "Inter UI", "Helvetica Neue", Helvetica, Arial, sans-serif; +$FontMono: "Inter UI", Monaco, Menlo, Consolas, monospace; +$FontSans: "Inter UI", "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/themes/navy/source/scss/footer.scss b/themes/navy/source/scss/footer.scss new file mode 100644 index 0000000..6b696cf --- /dev/null +++ b/themes/navy/source/scss/footer.scss @@ -0,0 +1,286 @@ +.footer { + width: 100%; + display: flex; + justify-content: center; + background-color: #262A39; + position: relative; + z-index: 998; + margin: 0 0 0 0; +} + +.footer-inner { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + width: 1200px; + padding: 32px 0; +} + +.cards--community { + &.cards--community--dark { + margin: 0; + .card-inner { + background-color: transparent; + } + a { + h4 { + color: $colorWhite; + } + p { + color: $colorGray; + opacity: .7; + } + &:hover { + h4 { + opacity: 0.8; + } + } + } + } +} + +.cards--community--dark { + .community-icon--join { + background-image: url(../img/icon-join-dark.svg); + } + .community-icon--discussion { + background-image: url(../img/icon-discussion-dark.svg); + } + .community-icon--contribute { + background-image: url(../img/icon-contribute-dark.svg); + } +} + + +.footer-nav { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 32px 0 0 0; + padding: 32px 0; + border-top: 1px solid rgba(255, 255, 255, .1); + li { + a { + padding: 0 12px; + color: $colorWhite; + &:hover { + opacity: .8; + } + } + } +} + +.footer-logo-wrap { + width: 317px; + display: flex; + text-align: center; +} + +.footer-logo-wrap__inner { + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 16px 0 16px 0; +} + +a { + &.footer-logo { + display: block; + width: 52px; + height: 52px; + background-size: 52px; + background-image: url(../img/footer-logo.svg); + &:hover { + opacity: .8; + } + } +} + +.footer-address { + padding: 20px 0 0 0; + color: #939ba1; +} + +.footer-table { + display: flex; +} + +.footer-table__column { + box-sizing: border-box; + padding: 32px 74px 64px +} + +.footer-header { + color: white; + opacity: .5; + margin: 0 0 40px 0; +} + +.footer-link { + height: 32px; + line-height: 32px; + margin: 0 0 15px 0; + a { + display: flex; + align-items: center; + color: white; + text-decoration: none; + &:hover { + opacity: .8; + } + } +} + +.footer-icon { + display: inline-block; + width: 32px; + height: 32px; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 50%; + margin: 0 15px 0 0; + background-repeat: no-repeat; + background-size: 24px; + background-position: center; +} + +.footer-link--fb .footer-icon { + background-image: url(../img/icon_fb.svg); +} + +.footer-link--tw .footer-icon { + background-image: url(../img/icon_tw.svg); +} + +.footer-link--ri .footer-icon { + background-image: url(../img/icon_ri.svg); +} + +.footer-link--gh .footer-icon { + background-image: url(../img/icon_gh.svg); +} + +.footer-link--rd .footer-icon { + background-image: url(../img/icon_rd.svg); +} + +.footer-link--yt .footer-icon { + background-image: url(../img/icon_yt.svg); +} + + +.language-switcher { + color: white; + -webkit-appearance: none; + font-size: 16px; + line-height: 32px; + padding: 0 24px 0 0; + background-image: url(../img/new-site/icon_dropdown-white.svg); + background-size: 24px; + background-repeat: no-repeat; + background-position: right center; + &:focus { + outline: none; + } +} + +@media (max-width: 1248px) { + + .footer-inner { + width: 100%; + padding: 32px 24px; + } + + .footer-logo-wrap { + //width: 200px; + } +} + +@media (max-width: 960px) { + + .cards--community + &.cards--community--dark + .card-inner { + height: auto; + min-height: 180px; + } + + .footer-inner { + width: 820px; + justify-content: space-around; + } + +} + +@media (max-width: 800px) { + + .cards--community + &.cards--community--dark { + margin: 0 auto; + max-width: 375px; + } + .card-inner { + padding: 0 12px; + } +} + +@media (max-width: 767px) { + + .footer { + border-top: 0px; + } + + .footer-inner { + padding: 40px 0 0 0; + flex-direction: column; + } + + .footer-header { + margin: 0 0 16px 0; + } + + .footer-table { + flex-direction: column; + align-items: center; + justify-content: center; + } + + .footer-table__column { + text-align: center; + padding: 16px 16px; + } + + .footer-nav { + margin: 0 0 0 0; + } + + .footer-link { + text-align: center; + height: 24px; + line-height: 24px; + margin: 0 0 16px 0; + a { + justify-content: center; + text-align: center; + } + } + + .footer-icon { + display: none; + } + + .footer-logo-wrap { + width: auto; + order: 2 + } + + .footer-logo-wrap__inner { + width: 100%; + padding: 32px 0 40px 0; + align-items: center; + text-align: center; + } +} diff --git a/themes/navy/source/scss/formReset.scss b/themes/navy/source/scss/formReset.scss new file mode 100644 index 0000000..badaa16 --- /dev/null +++ b/themes/navy/source/scss/formReset.scss @@ -0,0 +1,153 @@ +/* ---------------------------------------------------------------------------------------------------- + +Super Form Reset + +A couple of things to watch out for: + +- IE8: If a text input doesn't have padding on all sides or none the text won't be centered. +- The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders. +- You NEED to set the font-size and family on all form elements +- Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs +- You can style the upload button in webkit using ::-webkit-file-upload-button +- ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out. +- IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block. +- By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs + +----------------------------------------------------------------------------------------------------*/ + +input, +label, +select, +button, +textarea +{ + margin:0; + border:0; + padding:0; + display:inline-block; + vertical-align:middle; + white-space:normal; + background:none; + line-height:1; + + /* Browsers have different default form fonts */ + font-size:13px; + font-family:Arial; +} + +/* Remove the stupid outer glow in Webkit */ +input:focus +{ + outline:0; +} + +/* Box Sizing Reset +-----------------------------------------------*/ + +/* All of our custom controls should be what we expect them to be */ +input, +textarea +{ + -webkit-box-sizing:content-box; + -moz-box-sizing:content-box; + box-sizing:content-box; +} + +/* These elements are usually rendered a certain way by the browser */ +button, +input[type=reset], +input[type=button], +input[type=submit], +input[type=checkbox], +input[type=radio], +select +{ + -webkit-box-sizing:border-box; + -moz-box-sizing:border-box; + box-sizing:border-box; +} + +/* Text Inputs +-----------------------------------------------*/ + +/* Button Controls +-----------------------------------------------*/ + +input[type=checkbox], +input[type=radio] +{ + width:13px; + height:13px; +} + +/* File Uploads +-----------------------------------------------*/ + +/* Search Input +-----------------------------------------------*/ + +/* Make webkit render the search input like a normal text field */ +input[type=search] +{ + -webkit-appearance:textfield; + -webkit-box-sizing:content-box; +} + +/* Turn off the recent search for webkit. It adds about 15px padding on the left */ +::-webkit-search-decoration +{ + display:none; +} + +/* Buttons +-----------------------------------------------*/ + +button, +input[type="reset"], +input[type="button"], +input[type="submit"] +{ + /* Fix IE7 display bug */ + overflow:visible; + width:auto; +} + +.home-wrap, .pre-footer + .button, .community a.button +{ + width: auto; +} + +/* IE8 and FF freak out if this rule is within another selector */ +::-webkit-file-upload-button +{ + padding:0; + border:0; + background:none; +} + +/* Textarea +-----------------------------------------------*/ + +textarea +{ + /* Move the label to the top */ + vertical-align:top; + + /* Turn off scroll bars in IE unless needed */ + overflow:auto; +} + +/* Selects +-----------------------------------------------*/ + +select +{ + +} + +select[multiple] +{ + /* Move the label to the top */ + vertical-align:top; +} diff --git a/themes/navy/source/scss/header.scss b/themes/navy/source/scss/header.scss new file mode 100644 index 0000000..4edb2c5 --- /dev/null +++ b/themes/navy/source/scss/header.scss @@ -0,0 +1,265 @@ +$header-padding-normal:10px; +$header-padding-max:30px; +$logo-size:50px; + +#header { + position: relative; + padding: $header-padding-normal 0; + @media print { + display: none; + } +} + +#header-inner { + display: flex; + flex-flow: row nowrap; + align-items: center; + width: 1190px; + margin-left: -120px; + @media mq-mobile { + justify-content: center; + } +} + +.button--header { + margin-top: 7px; +} + +#logo-wrap-page { + flex: 0; + -webkit-flex: none; + margin-top: 8px; + width: 200px; +} + +#logo { + //hide-text() + text-indent: 101%; + white-space: nowrap; + overflow: hidden; + // end hide-text() + display: block; + width: 56px; + height: 56px; + background-image: url(../img/logo_white.svg); + text-decoration: none; + margin: -20px 0 0 30px; + background-color: #5EC12F; + border-radius: 50%; + background-size: 22px; + background-position: center; + background-repeat: no-repeat; +} + +.dropdown { + display: flex; + align-items: center; + margin-left: 32px; + nav { + ul { + li { + float: left; + margin: 8px; + position: relative; + a { + color: #FFFFFF; + text-decoration: none; + font-weight: bold; + &:hover { + opacity: .7; + } + &:focus { + color: rgba(255, 255,255,1); + } + a { + color: rgba(255,255,255,0.7); + } + } + &:hover { + & > ul { + display: block; + z-index: 1; + } + } + ul { + background: #ffffff; + border-radius: 5px; + left: 0; + padding: 10px 5px 5px 5px; + position: absolute; + top: 100%; + li { + float: none; + width: 8.125em; + a { + &:hover { + color: #000; + } + } + } + } + } + } + } +} + +.dropdown:before, +.dropdown:after { + clear: both; + content: ""; + display: table; + } + +.dropdown nav ul li ul li a:link, +.dropdown nav ul li ul li a:visited { + color: #8d99a4; +} + +#search-input-wrap { + display: none; + height: 40px; + width: 180px; + background-color: #ff9c00; + border-radius: 22px; + padding: 0 12px; + align-items: center; + transition: 0.2s; + &.on { + display: flex; + @media mq-mobile { + width: 40px; + cursor: pointer; + &.standalone { + position: absolute; + right: 20px; + } + } + } + &.active { + width: 180px; + background-color: $colorWhite; + } +} + +#search-input-icon { + color: rgba(255, 255, 255, 1); + height: 24px; + width: 24px; + margin: 0 2px 0 0; + display: inline-block; + opacity: 1; + @media mq-mobile { + height: auto; + } +} + +#search-input-wrap.active #search-input-icon { + color: $colorNavy; +} + +#search-input-wrap.active #search-input { + color: $colorNavy; +} + +#search-input { + background: none; + width: 126px; + height: 24px; + font-size: 15px; + color: $colorWhite; + outline: none; + -webkit-appearance: none; + @media mq-mobile { + display: none; + } +} + +#search-input-wrap.active #search-input { + display: inline; +} + +#search-input::-webkit-input-placeholder { + color:rgba(255, 255, 255, .4); +} + +#search-input::-moz-placeholder { + color:rgba(255, 255, 255, .4); +} + +#search-input:-ms-input-placeholder { + color:rgba(255, 255, 255, .4); +} + +#search-input:-moz-placeholder { + color:rgba(255, 255, 255, .4); +} + +#search-input-wrap .algolia-autocomplete .ds-dropdown-menu { + @media (max-width: 560px) { + min-width: 400px; + } + @media (max-width: 470px) { + min-width: 300px; + } +} + +#lang-select-wrap { + display: none; + position: relative; + @media mq-normal { + display: block; + } +} + +#lang-select-label { + color: $colorWhite; + opacity: 0.7; + font-family: $FontTitle; + line-height: $logo-size; + span { + padding-left: 8px; + } + i { + opacity: 0.7; + } +} + +#lang-select { + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-appearance: menulist-button; + font-size: inherit; +} + +.site-specific-menu { + max-width: 1200px; + width: 100%; + padding: 11px 0 0 20px; + border-top: 1px solid rgba(0,0,0,0.08); + margin: 0 auto; + span { + padding-right: 24px; + } +} + +.site-name { + font-weight: bold; + font-size: 18px; + color: #000; + text-decoration: none; + padding-right: 24px; +} + +.specific-nav-link { + color: rgba(0,0,0,0.7); + font-size: 14px; + text-decoration: none; +} + +.active { + color: $colorIncubate; +} diff --git a/themes/navy/source/scss/highlight.scss b/themes/navy/source/scss/highlight.scss new file mode 100644 index 0000000..a56bbad --- /dev/null +++ b/themes/navy/source/scss/highlight.scss @@ -0,0 +1,134 @@ +//highlight-background = #fff +$highlight-current-line: rgba(239, 239, 239, 1); +$highlight-selection: rgba(214, 214, 214, 1); +$highlight-foreground: rgba(77, 77, 76, 1); +$highlight-comment: rgba(142, 144, 140, 1); +$highlight-red: rgba(200, 40, 41, 1); +$highlight-orange: rgba(245, 135, 31, 1); +$highlight-yellow: rgba(234, 183, 0, 1); +$highlight-green: rgba(113, 140, 0, 1); +$highlight-aqua: rgba(62, 153, 159, 1); +$highlight-blue: rgba(66, 113, 174, 1); +$highlight-purple: rgba(137, 89, 168, 1); + +pre, code { + font-family: $FontMono; + color: $highlight-foreground; + background: #eee; + font-size: 0.95em; +} + +code { + padding: 0 5px; +} + +pre { + padding: 10px 15px; + line-height: 22px; + code { + border: none; + display: block; + padding: 0; + } +} + +.highlight { + background: #eee; + padding: 10px 15px; + color: $highlight-foreground; + overflow: auto; + margin: 0; + table { + margin: 0 !important; + border: 0; + th, td { + padding: 0; + } + } + figcaption { + //clearfix(); + &:before + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } + // end clearfix() + margin: -5px 0 5px; + font-size: 0.9em; + color: $colorGray; + a { + float: right; + } + } + pre { + padding: 0; + border: none; + background: none; + } + .line { + height: 22px; + } +} + + +pre { + .comment + .title { + color: $highlight-comment; + } + .variable + .attribute + .tag + .regexp + .ruby .constant + .xml .tag .title + .xml .pi + .xml .doctype + .html .doctype + .css .id + .css .class + .css .pseudo { + color: $highlight-red; + } + .number + .preprocessor + .built_in + .literal + .params + .constant { + color: $highlight-orange; + } + .class + .ruby .class .title + .css .rules .attribute { + color: $highlight-green; + } + .string + .value + .inheritance + .header + .ruby .symbol + .xml .cdata { + color: $highlight-green; + } + .css .hexcolor { + color: $highlight-aqua; + } + .function + .python .decorator + .python .title + .ruby .function .title + .ruby .title .keyword + .perl .sub + .javascript .title + .coffeescript .title { + color: $highlight-blue; + } + .keyword + .javascript .function { + color: $highlight-purple; + } +} diff --git a/themes/navy/source/scss/index.scss b/themes/navy/source/scss/index.scss new file mode 100644 index 0000000..4079487 --- /dev/null +++ b/themes/navy/source/scss/index.scss @@ -0,0 +1,152 @@ +#banner { + color: rgba(255, 255, 255, 1.0); + text-align: center; +} + +#banner-title { + padding-top: 20px; + font-size: 40px; + line-height: 1.15; + font-weight: 300; + font-family: $FontTitle; + @media mq-normal { + padding-top: 100px; + font-size: 50px; + } +} + +#banner-start { + text-align: center; + padding: 40px 0; + @media mq-normal { + padding: 60px 0; + font-size: 18px; + } +} + +#banner-start-command { + background: lighten($colorNavy, 10%); + font-family: $FontMono; + display: inline-block; + padding: 15px 20px; + &:before { + content: "$"; + opacity: 0.5; + padding-right: 10px; + } +} + +#banner-start-link { + color: #fff; + background: $colorLink; + display: inline-block; + padding: 15px; + text-decoration: none; + transition: 0.2s; + &:hover { + background: $colorLinkHover; + } +} + +#banner-share { + display: none; + padding-bottom: 60px; + @media mq-normal { + display: block; + } +} + +#intro-feature-list { + padding-top: 20px; + display: flex; + flex-flow: column; + @media mq-normal { + flex-flow: row wrap; + } +} + +.intro-feature-wrap { + padding-top: 20px; + @media mq-normal { + flex: 0 0 50%; + padding-top: 50px; + } +} + +.intro-feature { + position: relative; + text-align: center; + @media mq-normal { + text-align: left; + padding-left: 70px; + } +} + +.intro-feature-icon { + color: $colorLink; + font-size: 36px; + padding-bottom: 26px; + text-align: center; + @media mq-normal { + position: absolute; + top: 0; + left: 20px; + font-size: 24px; + width: 36px; + } +} + +.intro-feature-title { + color: $colorLink; + font-family: $FontTitle; + font-size: 24px; +} + +.intro-feature-desc { + margin: line-height 0; + line-height: line-height; +} + +#intro-cmd-wrap { + max-width: 700px; + background: #eee; + padding: 15px 0; + margin: 25px -40px 0; + @media mq-normal { + margin: 50px auto 0; + } +} + +.intro-cmd-item { + font-size: 16px; + font-family: $FontMono; + line-height: 2; + padding: 0 30px; + &:before { + content: "$"; + color: $colorLink; + padding-right: 15px; + } +} + +#intro-get-started-wrap { + text-align: center; +} + +#intro-get-started-link { + font-size: 18px; + font-family: $FontTitle; + display: inline-block; + color: $colorLink; + text-decoration: none; + margin: 40px 0; + border: 3px solid; + border-color: lighten($colorLink, 20%); + padding: 12px 24px; + position: relative; + transition: 0.2s; + &:hover { + background: border-color; + color: #fff; + } +} diff --git a/themes/navy/source/scss/main.scss b/themes/navy/source/scss/main.scss new file mode 100644 index 0000000..0fb14c2 --- /dev/null +++ b/themes/navy/source/scss/main.scss @@ -0,0 +1,1398 @@ +@import "formReset"; +@import "colors"; +@import "fonts"; +@import "header"; +@import "sidebar"; +@import "footer"; +@import "_variables"; +@import "base"; +@import "archive"; +@import "highlight"; +@import "index"; +@import "page"; +@import "mobile_nav"; +@import "popup"; + + + +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; + font: inherit; +} + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + font-family: $InterUI; + font-weight: 400; + line-height: 1; + color: $colorBlack; + background:$colorBg; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + background-color: $colorBg; + font-size: 16px; + line-height: 24px; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after { + content: ""; + content: none; +} + +.secondary-text { + color: $colorGray; + font-size: 16px; + line-height: 26px; +} + +.link-arrow { + color: $colorBlue; + position: relative; +} + +.link-arrow::after { + content: ""; + position: absolute; + width: 24px; + height: 24px; + display: block; + background-size: 24px; + background-repeat: no-repeat; + background-position: top right; + padding: 0 8px 0 8px; + top: -2px; + right: -24px; + background-image: url(../img/link-arrow.svg); + transition: transform .2s ease; + opacity: .4 +} + +.link-arrow:hover::after{ + transform: translate3d(4px, 0, 0) +} + +.home-wrap { + position: relative; + background-color: $colorWhite; + align-content: center; + display: flex; + flex-direction: column; + margin: 0; + z-index: 999; + padding: 0 20px; +} + +.cards { + display: flex; + width: 100%; +} + +.cards .card { + width: 100%; +} + +.cards.cards--three { + flex-wrap: wrap; +} + +.cards.cards--three .card { + width: 33.3%; +} + +.cards.cards--three .card-inner { + margin: 12px; +} + +.cards.cards--three .card:nth-child(3n+1) .card-inner { /* 1, 4, 7...*/ + margin-left: 0 +} + +.cards.cards--three .card:nth-child(3n+3) .card-inner { /* 3, 6, 9...*/ + margin-right: 0 +} + +.cards.cards--three .card:nth-child(1) .card-inner, +.cards.cards--three .card:nth-child(2) .card-inner, +.cards.cards--three .card:nth-child(3) .card-inner { + margin-top: 0; +} + +.cards.cards--three .card:nth-last-child(3) .card-inner, +.cards.cards--three .card:nth-last-child(2) .card-inner, +.cards.cards--three .card:nth-last-child(1) .card-inner { + margin-bottom: 0; +} + +a { + text-decoration: none; + color: $colorBlue; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +h3 { + font-weight: 600; + font-size: 20px; + line-height: 1.6em; +} + +h4 { + font-weight: 600; + font-size: 16px; + line-height: 1.6em; +} + +h5 { + text-transform: uppercase; + letter-spacing: 1px; + color: $colorGray; + font-weight: 500; + font-size: 14px; +} + + + +.button, a.button { + display: block; + font-family: $InterUI; + text-decoration: none; + font-size: 14px; + text-transform: uppercase; + letter-spacing: 1px; + color: $colorWhite; + padding: 10px 32px 9px; + border-radius: 22px; + background-color: rgba(0, 0, 0, 0.1); + font-weight: 500; + line-height: normal; + +} + +.button:hover, a.button:hover { + background-color: rgba(0, 0, 0, 0.2); +} + +.button.button--light, a.button.button--light { + background-color: rgba(54, 55, 99, 0.1); +} + +.button.button--light:hover, a.button.button--light:hover { + background-color: rgba(54, 55, 99, 0.2); +} + + +q:before, q:after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +div { + box-sizing: border-box; +} + +#general-menu { + position: relative; + display: flex; + max-width: 1240px; + padding: 0 20px; + height: 56px; + box-sizing: border-box; + justify-content: space-between; + margin: 24px auto; + width: 100%; + z-index: 9; + align-items: center; + @media screen and (max-width: $break-xl) { + margin: 14px auto; + } + .header-left { + width: 100%; + display: flex; + .logo { + display: flex; + margin: 0 22px 0 0; + a { + font-size: 27px; + font-weight: bold; + color: #000; + text-decoration: none; + display: flex; + align-items: center; + transition: all 0.3s ease-in-out; + &:before { + content: ''; + width: 148px; + height: 56px; + display: block; + background-image: url("../img/logo-status.svg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + transition: all 0.3s ease-in-out; + @media screen and (max-width: $break-xl) { + width: 138px; + height: 52px; + } + } + } + } + nav { + @media screen and (max-width: $break-xl) { + display: none; + } + ul { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; + height: 100%; + li { + position: relative; + a { + text-decoration: none; + font-weight: normal; + font-size: 14px; + padding: 10px; + display: flex; + margin-right: 4px; + color: #000; + transition: all 0.3s ease-in-out; + &:hover { + opacity: .7; + } + } + &.has-popup { + display: flex; + align-items: center; + svg { + margin-left: -6px; + margin-right: 6px; + } + } + &.has-submenu + &:hover + .sub-menu { + opacity: 1; + visibility: visible; + transform: translateY(0) rotateX(0) scale(1); + } + .sub-menu { + position: absolute; + top: 100%; + left: -8px; + transform: translateY(-20px) rotateX(20deg) scale(0.95); + transition: all 0.3s ease-in-out, pointer-events 0s ease-in-out; + visibility: hidden; + opacity: 0; + ul { + background: #fff; + box-shadow: 0px 2px 4px rgba(43, 59, 71, 0.124); + border-radius: 8px; + list-style-type: none; + margin: 0; + padding: 0; + flex-direction: column; + align-items: flex-start; + white-space: nowrap; + li { + width: 100%; + padding-right: 50px; + &:first-child { + margin-top: 20px; + } + &:last-child { + margin-bottom: 20px; + } + a { + padding: 8px 20px; + display: block; + margin: 0; + color: #8d99a4; + &:hover { + background: #fafafa; + color: black; + } + } + } + } + } + } + } + } + } + .btns { + @media screen and (max-width: $break-xl) { + display: none; + } + a { + display: block; + text-decoration: none; + font-size: 14px; + text-transform: uppercase; + letter-spacing: 1px; + padding: 10px 32px 9px; + border-radius: 22px; + font-weight: 500; + line-height: normal; + background-color: #fff; + color: #000; + text-align: center; + white-space: nowrap; + box-shadow: 0px 2px 4px rgba(43, 59, 71, 0.124); + transition: all 0.3s ease-in-out; + &:hover { + background-color: #008BAD; + color: #fff; + } + } + } + .mobile-menu-trigger { + display: flex; + height: auto; + align-self: center; + margin-right: 6px; + padding: 10px; + margin-left: auto; + display: none; + @media screen and (max-width: $break-xl) { + display: flex; + } + } +} + +#general-menu-mobile { + position: fixed; + z-index: -100; + left: 0; + width: 100%; + height: 100%; + top: 0; + padding: 0; + overflow: auto; + visibility: hidden; + opacity: 0; + pointer-events: none; + display: none; + transition: all 0.3s ease-in-out; + max-width: 100vw; + overflow-x: hidden; + overflow-y: scroll; + @media screen and (max-width: $break-xl) { + z-index: 9000; + display: block; + } + .mobile-menu-container-inner { + margin: 16px; + background: #fff; + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); + border-radius: 8px; + width: calc(100vw - 32px); + .mobile-menu-header { + position: relative; + padding: 16px 24px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: space-between; + .logo { + display: flex; + margin: 0 22px 0 0; + a { + font-size: 27px; + font-weight: bold; + color: #000; + text-decoration: none; + display: flex; + align-items: center; + transition: all 0.3s ease-in-out; + &:before { + content: ''; + width: 138px; + height: 52px; + display: block; + background-image: url("../img/logo-status.svg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + transition: all 0.3s ease-in-out; + } + span { + color: #000; + margin-left: 10px; + font-size: 22px; + } + } + } + } + nav { + padding: 24px 24px 12px 24px; + ul { + display: flex; + flex-direction: column; + margin-top: 10px; + list-style-type: none; + margin: 0; + padding: 0; + li { + margin: 0; + position: relative; + a { + text-decoration: none; + font-weight: normal; + font-size: 14px; + display: block; + margin: 0 -24px 0 -24px; + padding: 16px 26px; + color: #000; + &:hover { + background: rgba($colorIncubate, 0.2); + opacity: .7; + } + } + svg { + position: absolute; + top: 50%; + right: 0; + margin-top: -3px; + } + } + } + } + } +} + +#general-menu-mobile.popup--shown { + visibility: visible; + opacity: 1; + pointer-events: all; + #general-menu-backdrop { + visibility: visible; + opacity: 0.45; + pointer-events: all; + z-index: 8800; + } +} + +.general-menu-popup.popup--shown { + visibility: visible; + opacity: 1; + pointer-events: all; + } + +#general-menu-backdrop { + z-index: -101; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(120, 135, 148, 0.6); + visibility: hidden; + opacity: 0; + pointer-events: none; + display: none; + transition: opacity 0.3s ease-in-out; + @media screen and (max-width: $break-xl) { + z-index: 8900; + display: block; + } +} + +.general-menu-popup { + position: fixed; + width: 100%; + height: 100%; + z-index: 9100; + top: 0; + left: 0; + padding: 0 20px; + overflow: auto; + visibility: hidden; + opacity: 0; + pointer-events: none; + transition: all 0.3s ease-in-out; + @media screen and (max-width: $break-xl) { + width: 100%; + padding: 0 16px; + } + .general-popup-backdrop { + z-index: 1; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(120, 135, 148, 0.6); + opacity: 0.45; + transition: opacity 0.3s ease-in-out; + } + .inner { + box-sizing: border-box; + margin: 140px auto 16px; + width: 100%; + max-width: 1200px; + background: #fff; + border-radius: 16px; + padding: 30px; + position: relative; + z-index: 2; + @media screen and (max-width: break-md) { + margin-top: 92px; + } + .close { + position: absolute; + top: -54px; + right: 0; + background: #FFFFFF; + width: 42px; + height: 42px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: all 0.3s ease-in-out; + &:hover { + opacity: .7; + } + } + h3 { + margin: 0; + font-size: 20px; + color: #000000; + line-height: normal; + } + .features { + display: flex; + list-style-type: none; + margin: 16px 0 0 0; + padding: 0; + justify-content: center; + flex-wrap: wrap; + li { + background: rgba($colorStatus, 0.1); + margin-right: 20px; + flex: 1; + padding: 30px 30px 15px 30px; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + border-radius: 16px; + @media screen and (max-width: break-md) { + flex: auto; + width: 100%; + margin: 0 0 20px; + } + &:last-child { + margin-right: 0; + @media screen and (max-width: break-md) { + margin: 0; + } + } + h4 { + margin: 25px 0 8px 0; + } + p { + font-weight: normal; + line-height: 24px; + font-size: 16px; + text-align: center; + color: #939BA1; + margin: 0; + } + } + } + h5 { + font-weight: 500; + line-height: normal; + font-size: 14px; + letter-spacing: 1px; + text-transform: uppercase; + color: #939BA1; + margin: 50px 0 24px; + } + .more { + display: flex; + list-style-type: none; + margin: 16px 0 0 0; + padding: 0; + justify-content: center; + flex-wrap: wrap; + li { + flex: 1; + margin-right: 20px; + padding: 0; + display: flex; + flex-direction: column; + align-items: flex-start; + text-align: left; + border-radius: 16px; + @media screen and (max-width: break-md) { + flex: auto; + width: 100%; + margin: 0 0 40px; + } + &:last-child { + margin-right: 0; + @media screen and (max-width: break-md) { + margin: 0; + } + } + h4 { + font-style: normal; + font-weight: bold; + line-height: 24px; + font-size: 16px; + color: #000000; + margin: 0; + } + p { + font-weight: normal; + line-height: 24px; + font-size: 16px; + color: #939BA1; + margin: 8px 0; + } + a { + line-height: 24px; + font-size: 16px; + text-decoration: none; + display: flex; + align-items: center; + justify-content: center; + color: $colorStatus; + margin-top: auto; + transition: all 0.3s ease-in-out; + &:hover { + opacity: .7; + } + svg { + margin-left: 5px; + } + } + } + } + } +} + + +.logo-sign { + display: block; + position: absolute; + font-size: 15px; + color: rgba(255, 255, 255, 0.6); + bottom: -28px; + text-decoration: none; +} + +.logo-sign:hover, .by-status:hover { + color: white; +} + +.dropdown { + display: flex; + align-items: center; + margin-left: 32px; +} + +.dropdown:before, .dropdown:after { + clear: both; + content: ""; + display: table; +} + +.dropdown nav ul li { + float: left; + margin: 8px; + position: relative; +} + +.dropdown nav ul li a { + color: #000; + text-decoration: none; + font-weight: normal; + font-size: 14px; + padding: 10px 0; + display: block; +} + +.dropdown nav ul li a:hover { + opacity: .7; +} + +.dropdown nav ul li a:focus { + color: rgba(255, 255,255,1); +} + +.dropdown nav ul li.current a { + text-decoration: underline; +} + +.dropdown nav ul li:hover > ul { + display: block; +} + +.dropdown nav ul li ul { + background: #FFFFFF; + box-shadow: 0px 2px 4px rgba(43, 59, 71, 0.124066); + border-radius: 8px; + list-style-type: none; + margin: 0; + padding: 20px; + flex-direction: column; +} + +.dropdown .has-submenu{ + position: relative; +} + +.dropdown .sub-menu { + position: absolute; + top: 100%; + left: -7px; + -webkit-transform: translateY(-20px) rotateX(20deg) scale(0.95); + transform: translateY(-20px) rotateX(20deg) scale(0.95); + -webkit-transition: all 0.3s ease-in-out, pointer-events 0s ease-in-out; + -moz-transition: all 0.3s ease-in-out, pointer-events 0s ease-in-out; + -o-transition: all 0.3s ease-in-out, pointer-events 0s ease-in-out; + transition: all 0.3s ease-in-out, pointer-events 0s ease-in-out; + visibility: hidden; + opacity: 0; +} + +.dropdown .sub-menu.li.a{ + padding: 0; +} + +.dropdown .has-submenu:hover .sub-menu { + opacity: 1; + visibility: visible; + -webkit-transform: translateY(0) rotateX(0) scale(1); + transform: translateY(0) rotateX(0) scale(1); +} + +.dropdown nav ul li ul li { + float: none; + width: 8.125em; +} + +.dropdown nav ul li ul li a:link, +.dropdown nav ul li ul li a:visited { + color: #8d99a4; +} + +.dropdown nav ul li ul li a:hover { + color: #000; +} + + +.secondary-nav { + display: flex; + align-items: center; + margin-left: 32px; +} + +.secondary-nav .button{ + margin-right: 8px; +} + +.second-nav-links { + display: inherit; + @media mq-mobile { + display: none; + } +} + +.secondary-nav a { + color: #FFFFFF; + text-decoration: none; +} + +.secondary-nav a:hover { + opacity: .7; +} + +.secondary-nav span.social-link a:hover { + opacity: 1; +} + +.secondary-nav span.social-link { + margin: 8px; +} + +.secondary-nav span.social-link a { + display: block; + width: 40px; + height: 40px; + background-color: rgba(0, 0, 0, 0.1); + border-radius: 50%; + background-position: center; + background-repeat: no-repeat; +} + +.secondary-nav span.social-link a:hover { + background-color: rgba(0, 0, 0, 0.2); +} + +.secondary-nav span.social-link.social-link--twitter a { + background-image: url(../img/icon-twitter.svg); +} + +.secondary-nav span.social-link.social-link--github a { + background-image: url(../img/icon-github.svg); +} + +.secondary-nav span.social-link.social-link--gitter a { + background-image: url(../img/icon-gitter.svg); +} + +.secondary-nav span:first-child { + margin-left: 0; +} + +.secondary-nav span:last-child { + margin-right: 0; +} + +@media (max-width: 1199px) { + .header { + width: 100%; + left: 0; + top: 0; + margin: 24px 0 0 0; + padding: 0 24px; + } +} + + +.home-cover { + position: relative; + display: flex; + align-items: center; + justify-content: center; + background-color: #ECF1F2; + flex-direction: column; + justify-content: flex-start; + text-align: left; +} + +.intro { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 120px 0 64px; + color: #000; + text-align: left; + max-width: 1200px; + width: 100%; + a { + text-decoration: none; + color: $colorIncubate; + &:hover { + opacity: 0.7; + } + } +} + +.intro .button { + width: 278px; + margin-left: 20px; +} + +.button.button--main { + background-color: rgba(255, 255, 255, 1); + color: #000; + text-align: center; + box-shadow: 0 2px 2px 0 rgba(43, 59, 71, 0.25); +} + +.button.button--main:hover { + background-color: rgba(43, 59, 71, 0.124066); + color: gba(255, 255, 255, 1); +} + +.button.button--secondary { + background-color: rgba(255, 255, 255, 1); + color: #000; + text-align: center; + box-shadow: 0 2px 2px 0 rgba(43, 59, 71, 0.25); +} + +.button.button--secondary:hover { + background-color: rgba(43, 59, 71, 0.124066); + color: gba(255, 255, 255, 1); +} + + +.intro h1 { + font-family: $InterUI; + font-weight: bold; + line-height: 40px; + font-size: 32px; + max-width: 600px; + width: 100%; + margin: 0 0 16px 20px; +} + +.intro p { + font-family: $InterUI; + font-weight: normal; + line-height: 24px; + font-size: 16px; + color: #939BA1; + max-width: 600px; + width: 100%; + margin: 0 0 16px 20px; +} + + +@media (max-width: 991px) { + .home-wrap { + margin: 400px 0 0 0; + } +} + +.clear { + clear: both; +} + +pre { + background-color: white; + padding: 0px; +} + +pre.code { + padding: 1em !important; + border-radius: 8px; + font-size: 1em; +} + +.wrap { + max-width: 1200px; + width: 100%; + margin: 0 auto; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.forward-text { + width: 60%; + padding: 100px 20px; + text-align: left; + float: left; + display: block; + h2 { + font-size: 26px; + font-family: $InterUI; + font-weight: bold; + color: #000000; + margin-bottom: 24px; + } + p { + font-weight: normal; + line-height: 25px; + font-size: 16px; + color: #939BA1; + } +} + +.forward-img { + float: left; + display: block; + width: 40%; + padding: 100px; +} + +.feature { + width: 33%; + float: left; + display: block; + padding: 100px 40px 100px 20px; + height: 400px; + flex-wrap: wrap; + img { + margin-bottom: 20px; + height: 38px; + } + h3 { + font-weight: bold; + line-height: 25px; + font-size: 16px; + color: #000000; + margin-bottom: 8px; + } + p { + line-height: 25px; + font-size: 16px; + color: #939BA1; + } +} + +footer { + color: #7D7F88; + background: #262A39; + padding: 60px 0; + position: relative; + z-index: 9; + .container { + max-width: 1200px; + margin: 0 auto; + padding: 0 16px; + display: flex; + a { + text-decoration: none; + } + .info { + flex: 0 0 33.333333%; + max-width: 33.333333%; + display: flex; + flex-direction: column; + } + .social-links { + flex: 0 0 16.666667%; + max-width: 16.666667%; + margin-left: auto; + } + .more { + flex: 0 0 16.666667%; + max-width: 16.666667%; + } + } +} + +@media (max-width: 991px) { + .section-header { + margin: -30px auto 0 auto; + } + + .intro { + padding: 50px 16px; + } + + .command-wrap { + width: 100%; + margin: 0; + border-radius: 0; + } + + .command { + border-radius: 0; + font-size: 18px; + } + + #content-inner { + flex-direction: column; + #sidebar { + padding: 20px 0; + margin-left: -14px; + .inner { + flex-wrap: nowrap; + display: flex; + overflow: auto; + white-space: nowrap; + width: calc(100% + 20px); + a { + padding: 9px 14px; + margin-bottom: 0; + } + } + } + } + + .article { + padding: 0; + .inner { + padding: 0; + } + } + + footer .container { + .social-links { + flex: 0 0 20%; + max-width: 20%; + } + .more { + flex: 0 0 20%; + max-width: 20%; + } + } +} + + +@media (max-width: 767px) { + .forward-text { + width: 100%; + padding: 100px 20px; + } + .forward-img { + text-align: center; + width: 100%; + padding: 100px 0px; + } + .feature { + height: 470px; + } +} + +@media (max-width: 560px) { + .feature { + width: 50%; + height: 450px; + } +} + +@media (max-width: 391px) { + .feature { + width: 100%; + padding: 30px; + height: 340px; + } +} + +@media (max-width: 767px) { + .home-cover { + position: relative; + height: auto; + } + .home-wrap { + margin-top: 30px; + } + .intro-buttons { + flex-wrap: wrap; + justify-content: center; + .button { + margin-bottom: 16px; + } + } + footer .container { + flex-direction: column-reverse; + text-align: center; + p { + margin-top: 10px; + } + ul li { + margin-bottom: 16px; + } + .info { + flex: 0 0 100%; + max-width: 100%; + align-items: center; + margin-top: 50px; + .blog-logo a span { + display: none; + } + } + .social-links { + flex: 0 0 100%; + max-width: 100%; + margin-left: 0; + margin-top: 30px; + .community { + width: 130px; + text-align: left; + margin: 0 auto; + } + } + .more { + flex: 0 0 100%; + max-width: 100%; + } + } +} + +@media (max-width: 800px) { + + .cards.cards--three .card { + width: 50%; + } + + .cards.cards--three .card:nth-child(3n+1) .card-inner { /* 1, 4, 7...*/ + margin: 12px; + } + + .cards.cards--three .card:nth-child(3n+3) .card-inner { /* 3, 6, 9...*/ + margin: 12px; + } + + .cards.cards--three .card:nth-child(odd) .card-inner { + margin-left: 0 + } + + .cards.cards--three .card:nth-child(even) .card-inner { + margin-right: 0 + } + + .cards.cards--three .card:nth-child(1) .card-inner, + .cards.cards--three .card:nth-child(2) .card-inner { + margin-top: 0; + } + + .cards.cards--three .card:nth-child(3) .card-inner { + margin-top: 12px; + } + + .cards.cards--three .card:nth-last-child(3) .card-inner, + .cards.cards--three .card:nth-last-child(2) .card-inner { + margin-bottom: 0; + } + + .cards.cards--three .card:nth-last-child(1) .card-inner { + margin-bottom: 12px; + } + + .cards.cards--three.cards--three--even .card { + width: 100%; + } + + .cards.cards--three.cards--three--even .card:nth-child(odd) .card-inner { + margin-left: 0; + margin-right: 0; + } + + .cards.cards--three.cards--three--even .card:nth-child(even) .card-inner { + margin-right: 0; + margin-left: 0; + } + + .cards.cards--three.cards--three--even .card:nth-child(1) .card-inner { + margin-top: 0; + } + + .cards.cards--three.cards--three--even .card:nth-child(3) .card-inner, + .cards.cards--three.cards--three--even .card:nth-child(2) .card-inner { + margin-top: 12px; + } + + .cards.cards--three.cards--three--even .card:nth-last-child(3) .card-inner, + .cards.cards--three.cards--three--even .card:nth-last-child(2) .card-inner { + margin-bottom: 12px; + } + + .cards.cards--three.cards--three--even .card:nth-last-child(1) .card-inner { + margin-bottom: 0; + } +} + +@media (max-width: 520px) { + + .cards.cards--three .card { + width: 100%; + } + + .cards.cards--three .card:nth-child(odd) .card-inner { + margin-left: 0; + margin-right: 0; + } + + .cards.cards--three .card:nth-child(even) .card-inner { + margin-right: 0; + margin-left: 0; + } + + .cards.cards--three .card:nth-child(1) .card-inner { + margin-top: 0; + } + + .cards.cards--three .card:nth-child(3) .card-inner, + .cards.cards--three .card:nth-child(2) .card-inner { + margin-top: 12px; + } + + .cards.cards--three .card:nth-last-child(3) .card-inner, + .cards.cards--three .card:nth-last-child(2) .card-inner { + margin-bottom: 12px; + } + + .cards.cards--three .card:nth-last-child(1) .card-inner { + margin-bottom: 0; + } + + .section-header h2 { + font-size: 23px; + } + +} + +.team-name { + margin: 12px 0 0 0 !important; +} + +.team-position { + margin: 0 0 12px 0 !important; +} + + +/* Code Highlighting */ + +code.hljs { + background-color:#EEF2F5; + padding: 20px 40px; + font-size:16px; + line-height:24px; + border-radius:8px; +} + +.hljs-comment,.hljs-quote { + color:#6b7394; +} + +.hljs-variable,.hljs-template-variable,.hljs-attribute,.hljs-tag,.hljs-name,.hljs-regexp,.hljs-link,.hljs-name,.hljs-selector-id,.hljs-selector-class { + color:#c94922; +} + +.hljs-number,.hljs-meta,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params { + color:#c76b29; +} + +.hljs-string,.hljs-symbol,.hljs-bullet { + color:#ac9739; +} + +.hljs-title,.hljs-section { + color:#3d8fd1; +} + +.hljs-keyword,.hljs-selector-tag { + color:#6679cc; +} + +.hljs { + display:block; + overflow-x:auto; + background:#f5f7ff; + color:#5e6687; + padding:0.5em; +} + +.hljs-emphasis { + font-style:italic; +} + +.hljs-strong { + font-weight:bold; +} diff --git a/themes/navy/source/scss/mobile_nav.scss b/themes/navy/source/scss/mobile_nav.scss new file mode 100644 index 0000000..55d9645 --- /dev/null +++ b/themes/navy/source/scss/mobile_nav.scss @@ -0,0 +1,164 @@ +$toggle-width: 25px; +$toggle-height: $toggle-width * 0.8; +$toggle-line: 2px; +$transition-duration: 0.4s; +$lang-select-height: 40px; + +.mobile-menu-container { + display: none; +} + +#mobile-nav { + position: fixed; + top: 0; + width: $mobile-nav-width; + left: $mobile-nav-width * -1; + height: 100%; + background: $colorNavy; + transition: transition-duration; + font-family: $FontTitle; + .mobile-nav-on & { + transform: translateX(100%); + } +} + +#mobile-nav-inner { + overflow-y: auto; + padding: 10px 0; + position: absolute; + top: 0; + bottom: $lang-select-height; + left: 0; + right: 0; + -webkit-overflow-scrolling: touch; +} + +#mobile-nav-toggle { + position: absolute; + top: 0; + bottom: 0; + left: $gutter-width; + width: $toggle-width; + height: $toggle-height; + margin: auto; + opacity: 0.5; + cursor: pointer; + transition: 0.2s; + &:active, .mobile-nav-on & { + opacity: 1; + } + @media mq-normal { + display: none; + } +} + +.mobile-nav-toggle-bar { + background: #fff; + position: absolute; + left: 0; + width: 100%; + height: $toggle-line; + transition: transition-duration; + transform-origin: 0; + border-radius: $toggle-line; + &:first-child { + top: 0; + .mobile-nav-on & { + transform: rotate(45deg); + } + } + &:nth-child(2) { + top: ($toggle-height - $toggle-line) * 0.5; + .mobile-nav-on & { + opacity: 0; + } + } + &:last-child { + top: $toggle-height - $toggle-line; + .mobile-nav-on & { + transform: rotate(-45deg); + } + } +} + +.mobile-nav-link { + color: #fff; + text-decoration: none; + display: block; + padding: 10px 15px; + line-height: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.mobile-nav-title { + color: $colorLink; + font-weight: bold; + padding: 10px 15px; + line-height: 1; + display: block; + border-top: 1px solid #444; + margin-top: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#mobile-lang-select-wrap { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + background: $colorNavy; + border-top: 1px solid #444; +} + +#mobile-lang-select-label { + line-height: $lang-select-height; + color: #fff; + padding: 10px 15px; + i { + opacity: 0.7; + } + span { + padding-left: 8px; + } +} + +#mobile-lang-select { + -webkit-appearance: menulist-button; + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +#container { + transition: transition-duration; + height: 100%; + // overflow: auto + -webkit-overflow-scrolling: touch; + .mobile-nav-on & { + transform: translateX(mobile-nav-width); + overflow: hidden; + } +} + +#mobile-nav-dimmer { + position: absolute; + top: 0; + left: 100%; + height: 100%; + background: #000; + opacity: 0; + transition: opacity transition-duration, transform 0s transition-duration; + .mobile-nav-on & { + width: 100%; + opacity: 0.7; + transform: translateX(-100%); + transition: opacity transition-duration; + } +} diff --git a/themes/navy/source/scss/page.scss b/themes/navy/source/scss/page.scss new file mode 100644 index 0000000..45c3165 --- /dev/null +++ b/themes/navy/source/scss/page.scss @@ -0,0 +1,555 @@ +$note-tip: hsl(40, 100%, 50%); +$note-info: hsl(200, 100%, 50%); +$note-warn: hsl(0, 100%, 50%); + +$sidebar-width:30%; + +#content { + //clearfix() + &:before + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } + // end clearfix() + position: relative; +} + +#content-apply { + // start clearfix() + &:before + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } + // end clearfix() + position: relative; + background: #fff; + border-radius: 10px; + padding: 64px; + margin-top: 40px; +} + +#content-inner { + display: flex; +} + +#content-inner-full { + //clearfix(); + &:before + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } + // end clearfix() + @media mq-normal { + margin-left: 0; + } +} + +.article-container { + @media mq-normal { + float: right; + width: 100%; + } +} + +.article-inner { + //clearfix(); + &:before + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } + // end clearfix() +} + +.article { + float: left; + width: 100%; + padding: 20px 0; + @media print { + padding: 0; + } +} + +#article-toc { + display: none; + float: right; + width: $sidebar-width; + margin-right: $sidebar-width * -1; + opacity: 0.8; + @media mq-normal { + display: block; + } + @media screen and (max-width: 1450px) { + display: none; + } + &.fixed { + position: absolute; + top: 0; + bottom: 0; + right: 0; + } +} + + +#article-toc-inner { + @extend .inner; + overflow-x: hidden; + overflow-y: auto; + width: $sidebar-width; + &.fixed { + position: absolute; + top: 0; + bottom: 0; + right: 0; + } +} + + +.toc-link { + @extend .sidebar-link; +} + +.toc-child { + padding-left: 1em; + font-size: 0.9em; +} + +#article-toc-top { + margin-top: 2em; + font-size: 0.9em; + text-decoration: none; + color: $colorDefault; + display: block; + margin-bottom: 40px; + font-family: $FontTitle; + &:hover { + color: $colorLinkHover; + } +} + +.article-header { + max-width: 1200px; + margin: 150px auto 20px; + display: flex; + justify-content: space-between; + @media mq-mobile { + padding: 0 20px; + } +} + +.article-title { + font-family: $FontTitle; + font-size: 26px; + line-height: 32px; + font-weight: 300; + text-decoration: none; + font-weight: bold; + font-size: 25px; + color: #000; + transition: 0.2s; + .post & { + float: none; + } +} + +.article-date { + color: $colorGray; + text-decoration: none; + display: inline-block; + margin-top: 1em; + &:hover { + color: $colorLinkHover; + } +} + +.article-edit-link { + font-style: normal; + font-weight: normal; + line-height: normal; + font-size: 15px; + color: $colorIncubate; + display: none; + align-items: flex-end; + text-decoration: none; + @media mq-normal { + display: flex; + } + &:hover { + opacity: 0.7; + } +} + +@media screen and (min-width: 820px) { + .article-edit-link { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + } +} + +.article-anchor { + margin-left: 10px; + display: none; + @media print { + display: none !important; + } + &:before { + content: "#"; + } + .article-heading:hover & { + display: inline-block; + } +} + +.article-content-apply { + max-width: 1200px !important; +} + +.article-content { + + line-height: line-height; + color: $colorDefault; + max-width: 800px; + @media print { + font-size: 12pt; + } + @media mq-mobile { + padding: 0 20px; + } + p, ol, ul, dl, table, blockquote, iframe, .highlight { + margin: 12px 0; + } + h1 { + font-size: 26px; + } + h2 { + font-size: 20px; + } + h3 { + font-size: 16px; + } + h1, h2, h3, h4, h5, h6 { + font-weight: bold; + margin: 32px 0; + color: #000000; + } + a { + color: $colorIncubate; + text-decoration: none; + &:hover { + color: $colorLinkHover; + text-decoration: underline; + } + @media print { + color: $colorDefault; + text-decoration: underline; + &:after { + content: " (" attr(href) ")"; + font-size: 80%; + } + } + } + strong { + font-weight: bold; + } + em { + font-style: italic; + } + ul, ol, dl { + margin-left: 20px; + ul, ol, dl { + margin-top: 0; + margin-bottom: 0; + } + } + ul { + list-style: disc; + } + ol { + list-style: decimal; + } + dl { + list-style: square; + } + li { + p { + margin: 0; + } + table, blockquote, iframe, .highlight { + margin: 1em 0; + } + } + img, video { + max-width: 100%; + width: 70px; + height: 70px; + } + blockquote { + padding: 0 20px; + position: relative; + border: 1px solid $colorBorder; + border-left: 5px solid #ddd; + footer { + margin: 1em 0; + font-style: italic; + cite { + &:before { + content: "—"; + padding: 0 0.3em; + } + a { + color: $colorGray; + } + } + } + } + .note { + &.tip { + border-left-color: $note-tip; + } + &.info { + border-left-color: $note-info; + } + &.warn { + border-left-color: $note-warn; + } + } + .note-title { + margin: 1em 0; + display: block; + font-size: 1.3em; + font-weight: bold; + } + table { + max-width: 100%; + border: 1px solid $colorBorder; + th { + font-weight: bold; + } + th, td { + padding: 5px 15px; + } + tr { + &:nth-child(2n) { + background: #eee; + } + } + } +} + +.article-footer { + //clearfix() + &:before + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } + // end clearix() + margin: 1em 0; + border-top: 1px solid $colorBorder; + text-align: center; + color: color-gray; + line-height: 1em; + padding-top: 1em; + position: relative; + background: transparent; + @media print { + display: none; + } +} + +.article-footer-link { + color: $colorLink; + text-decoration: none; + font-weight: bold; + font-family: $FontTitle; + text-transform: uppercase; + position: absolute; + @media print { + display: none; + } + &:hover { + color: $colorLinkHover; + } + span { + padding: 0 6px; + } +} + +.article-footer-prev { + @extend .article-footer-link; + left: 0; +} + +.article-footer-next { + @extend .article-footer-link; + right: 0; +} + +.article-footer-updated { + font-size: 0.9em; +} + +#comments { + @media print { + display: none; + } +} + + +#page-list-header { + //clearfix(); + &:before + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } + // end clearfix() + margin: 40px 0; +} + +#page-list-title { + font-family: $FontTitle; + font-size: 36px; + font-weight: 300; + line-height: 1; + float: left; +} + +.team-member { + float: left; + width: 33%; + text-align: center; + padding: 20px 0; + @media mq-mobile { + width: 50%; + } + @media (max-width: 491px) { + width: 100%; + padding: 0; + } + h4 { + font-size: 16px; + } + p { + color: #939BA1; + font-size: 16px; + } +} + +.submission-list { + list-style: circle !important; + margin-bottom: 100px !important; + li { + padding: 10px 0; + } +} + +.projects-intro { + margin-top: 32px; +} + +.project-wrap { + display: table-row; +} + +.project { + width: calc(50% - 30px); + margin-right: 30px; +} + +.project2 { + width: 50%; +} + +.project-apply { + text-align: center; +} + +.project, .project2 { + float: left; + padding: 32px; + border: 1px solid rgba(0, 0, 0, 0.1); + box-sizing: border-box; + border-radius: 10px; + margin-bottom: 30px; + margin-top: 30px; + height: 370px; + img { + margin: 3px 0px 15px; + } + h4, h3 { + font-weight: bold; + font-size: 20px; + color: #000000; + margin: 12px 0; + } + h3 { + margin: 100px 0 28px 0; + } + p { + line-height: 25px; + font-size: 16px; + color: #000000; + } + a { + background: rgba(0,139,173,0.1); + border-radius: 20px; + color: rgb(0,139,173); + padding: 12px 24px; + text-decoration: none; + margin-top: 20px; + &:hover { + color: rgb(255,255,255); + background: rgb(0,139,173); + } + } +} + +.project-cover-link { + color: #fff !important; + background: none !important; + padding: 0 !important; + margin-top: 0 !important; +} + + +@media (max-width: 491px) { + + .project, .project2 { + width: 95%; + margin: 20px 10px; + height: 450px; + h3 { + margin: 140px 0 28px 0; + } + } + + .projects-intro { + padding-left: 20px; + } +} diff --git a/themes/navy/source/scss/popup.scss b/themes/navy/source/scss/popup.scss new file mode 100644 index 0000000..87a713c --- /dev/null +++ b/themes/navy/source/scss/popup.scss @@ -0,0 +1,279 @@ +.popup-wrap { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: auto; + box-sizing: border-box; + z-index: 700; + + visibility: hidden; + pointer-events: none; +} + +.popup-wrap.popup--shown { + visibility: visible; + pointer-events: all; +} + +.popup-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(120, 135, 148, .25); + z-index: 800; + + opacity: 0; + transform: translate3d(0, 0 ,0) scale(1); + visibility: hidden; + transition: visibility .5s linear 0s, opacity .2s ease; +} + +.popup--shown .popup-overlay { + transition-delay: 0s; + visibility: visible; + opacity: 1; + transform: translate3d(0, 0 ,0) scale(1); +} + +.popup { + box-sizing: border-box; + width: 960px; + margin: 132px auto 40px; + background-color: rgba(255, 255, 255, 1); + border-radius: 10px; + padding: 0px; + position: relative; + box-shadow: 0 3px 7px 0 rgba(175,192,202,0.41); + z-index: 900; + + opacity: 0; + transform: translate3d(0, 15px ,0) scale(.96); + visibility: hidden; + transition-delay: .2s; + transition: visibility .5s linear 0s, opacity .2s ease, transform .4s cubic-bezier(0.175, 0.885, 0.135, 1.425); +} + +.popup--shown .popup { + transition-delay: 0s; + visibility: visible; + opacity: 1; + transform: translate3d(0, 0 ,0) scale(1); +} + +.popup__title { + padding: 32px 0 12px 32px; +} + +.popup__inner { + padding: 0 32px 32px 32px; +} + +.popup__text { + font-size: 18px; + line-height: 26px; + padding: 0 32px 24px 32px; + color: #70808D; +} + +.popup__button { + position: absolute; + + top: -69px; + width: 42px; + height: 42px; + background-color: #ffffff; + border-radius: 50%; + opacity: .7; + cursor: pointer; + transition: opacity .2s ease; +} + +.popup__button:hover { + opacity: 1 +} + +.popup__button::after { + content: ""; + display: block; + position: absolute; + top: 13px; + left: 13px; + width: 16px; + height: 16px; + + background-size: 16px; + background-repeat: no-repeat; +} + +.popup__button.popup__button--close { + right: 0; +} + +.popup__button.popup__button--close::after { + background-image: url(../img/icon-close.svg); +} + +.cards--community { + margin: 0 0 52px 0; +} + +.cards--community .card-inner { + height: auto; + min-height: 170px; + display: flex; + align-items: center; + + flex-direction: column; + text-align: center; + padding: 24px; + background-color: rgba(67, 96, 223, .1); + border-radius: 16px; + margin: 12px; + text-decoration: none; +} + +.cards--community .card-inner:hover { + background-color: rgba(67, 96, 223, .14); +} + +.popup .card h4 { + padding: 0 0 4px 0; +} + +.cards--community a h4 { + color: $colorBlack; + padding: 0 0 8px 0; +} + +.cards--community a p { + color: rgba(67, 96, 223, .6); +} + +.separator { + border-bottom: 1px solid #e8ebec; + width: 100%; + height: 1px; + background-color: transparent; +} + +.popup--projects .separator { + margin: 32px 0; +} + +.community-icon { + width: 32px; + height: 32px; + background-size: 32px; + background-repeat: no-repeat; + margin: 0 0 24px 0; +} + +.community-icon--join { + background-image: url(../img/icon-join-blue.svg); +} + +.community-icon--discussion { + background-image: url(../img/icon-discussion-blue.svg); +} + +.community-icon--contrubute { + background-image: url(../img/icon-contribute-blue.svg); +} + +.popup--community h5, +.popup--projects h5 { + padding: 0 0 24px 0; +} + +.cards-community-more .card-content { + height: auto; + min-height: 112px; + overflow: hidden; +} + +.popup--projects .cards-community-more .card-content { + height: auto; + min-height: 142px; + overflow: hidden; +} + +@media (max-width: 1008px) { + + .popup-wrap { + padding: 0 24px; + } + + .popup { + width: 100%; + } + + .card-community-more__link { + margin: 8px 0 0 0; + } +} + +@media (max-width: 800px) { + + .cards--community { + margin: 0 0 40px 0 + } + + .popup--community h5 { + padding-bottom: 16px; + } + + .cards--community.cards--community--light .card-inner { + height: auto; + min-height: 0 + } + + .cards-community-more .card-content { + height: auto; + min-height: 0; + padding: 0 0 8px 0; + } + + .popup--projects .cards-community-more .card-content { + height: auto; + min-height: 0; + padding: 0 0 8px 0; + } + + + .cards-community-more .card-content h4 { + padding: 8px 0 4px 0; + } + + .popup__inner { + padding: 0 24px 24px 24px; + } + + .popup__title { + font-size: 18px; + padding: 24px 0 12px 24px; + } + + +} + +@media (max-width: 600px) { + + .popup-wrap { + padding: 0 16px; + } + + .popup { + margin: 96px auto 64px; + } + + .popup__text { + font-size: 16px; + line-height: 24px; + padding: 0 16px 16px 16px; + } + +} diff --git a/themes/navy/source/scss/sidebar.scss b/themes/navy/source/scss/sidebar.scss new file mode 100644 index 0000000..fb831e7 --- /dev/null +++ b/themes/navy/source/scss/sidebar.scss @@ -0,0 +1,47 @@ +$sidebar-width:30%; + +#sidebar { + min-width: $sidebar-width; + padding: 40px 0; + .inner { + padding: 0; + &:before { + display: none; + } + strong { + display: none; + } + } +} + +.sidebar-title { + margin-top: 40px; + padding: 10px 0; + font-family: $InterUI; + font-weight: bold; + color: $colorBlack; + display: inline-block; + border-top: 1px solid #e3e3e3; + line-height: 1; +} + +.sidebar-link { + border-radius: 23.5px; + font-size: 15px; + padding: 9px 24px; + display: block; + margin-bottom: 10px; + position: relative; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + cursor: pointer; + color: #000; + text-decoration: none; + line-height: normal; + &:hover { + background: rgba(67,96,223,0.1); + color: #4360DF; + } +} From 4bda6e516914801af872627d33e46650e0aac0b7 Mon Sep 17 00:00:00 2001 From: andrea zuccarini Date: Sat, 17 Nov 2018 11:45:42 +0100 Subject: [PATCH 2/2] edit readme to use gulp --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index aada5dd..045e756 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,6 @@ Make sure you have node.js installed first. 1. Open Terminal and navigate to the project root directory, 2. Run `npm install`, -3. Run `npm run build`, -4. Go to `public/` directory, -5. Start a simple HTTP server serving files, for example: `python -m SimpleHTTPServer 8000`, -6. Open http://localhost:8000 in a browser. +3. Run `./node_modules/.bin/gulp build`, +4. In another terminal, run `./node_modules/.bin/hexo serve`, +5. This prevents the need for any global installs, and will allow you to have live reloading for any changes you are making.