├── .babelrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .travis.yml ├── README.md ├── dist └── build.js ├── functions.php ├── gulpfile.js ├── index.php ├── package.json ├── sass ├── _animations.scss ├── _banner.scss ├── _comments.scss ├── _common-classes.scss ├── _elements.scss ├── _footer.scss ├── _foundation.scss ├── _header.scss ├── _menus.scss ├── _mixins.scss ├── _normalize.scss ├── _placeholders.scss ├── _posts-and-pages.scss ├── _site_layout.scss ├── _typography.scss ├── _variables.scss ├── _widgets.scss ├── _wp_css.scss ├── responsive │ ├── _large-screens.scss │ ├── _medium-screens.scss │ ├── _responsive.scss │ └── _small-screens.scss ├── style.scss └── vendor │ ├── _hamburger-menu.scss │ ├── _jquery.mmenu.all.scss │ ├── _progressive-img.scss │ ├── _slick.scss │ └── _vendor.scss ├── src ├── axios │ └── axios.js ├── components │ ├── category.vue │ ├── page.vue │ ├── post.vue │ ├── posts.vue │ ├── tag.vue │ ├── theme-footer.vue │ └── theme-header.vue ├── js │ └── base.js └── main.js ├── style.css └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "latest", { 5 | "es2015": { 6 | "modules": false 7 | } 8 | } 9 | ] 10 | ] 11 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | webpack.config.js 3 | gulpfile.js 4 | dist/* 5 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true 4 | }, 5 | "plugins": [ 6 | "html" 7 | ], 8 | "settings": { 9 | "html/html-extensions": [".html", ".vue" ] 10 | }, 11 | "globals": { 12 | "_": false, 13 | "Backbone": false, 14 | "jQuery": false, 15 | "wp": false, 16 | "__dirname": true, 17 | "rtwp":true 18 | }, 19 | "parser": "babel-eslint", 20 | "rules": { 21 | "array-bracket-spacing": [ "error", "always" ], 22 | "brace-style": [ "error", "1tbs" ], 23 | "comma-spacing": "error", 24 | "comma-style": "error", 25 | "computed-property-spacing": [ "error", "always" ], 26 | "constructor-super": "error", 27 | "dot-notation": "error", 28 | "eol-last": "error", 29 | "func-call-spacing": "error", 30 | "indent": [ "error", "tab", { "SwitchCase": 1 } ], 31 | "key-spacing": "error", 32 | "keyword-spacing": "error", 33 | "no-alert": "error", 34 | "no-bitwise": "error", 35 | "no-console": "error", 36 | "no-const-assign": "error", 37 | "no-debugger": "error", 38 | "no-dupe-args": "error", 39 | "no-dupe-class-members": "error", 40 | "no-dupe-keys": "error", 41 | "no-duplicate-case": "error", 42 | "no-duplicate-imports": "error", 43 | "no-else-return": "error", 44 | "no-eval": "error", 45 | "no-extra-semi": "error", 46 | "no-fallthrough": "error", 47 | "no-lonely-if": "error", 48 | "no-mixed-operators": "error", 49 | "no-mixed-spaces-and-tabs": "error", 50 | "no-multiple-empty-lines": [ "error", { "max": 1 } ], 51 | "no-multi-spaces": "error", 52 | "no-negated-in-lhs": "error", 53 | "no-nested-ternary": "error", 54 | "no-redeclare": "error", 55 | "no-shadow": "error", 56 | "no-undef-init": "error", 57 | "no-unreachable": "error", 58 | "no-unsafe-negation": "error", 59 | "no-use-before-define": [ "error", "nofunc" ], 60 | "no-useless-computed-key": "error", 61 | "no-useless-constructor": "error", 62 | "no-useless-return": "error", 63 | "no-var": "error", 64 | "no-whitespace-before-property": "error", 65 | "object-curly-spacing": [ "error", "always" ], 66 | "one-var": "off", 67 | "prefer-const": "error", 68 | "semi": "error", 69 | "semi-spacing": "error", 70 | "space-before-blocks": [ "error", "always" ], 71 | "space-before-function-paren": [ "error", "never" ], 72 | "space-in-parens": [ "error", "always" ], 73 | "space-infix-ops": [ "error", { "int32Hint": false } ], 74 | "space-unary-ops": [ "error", { 75 | "overrides": { 76 | "!": true 77 | } 78 | } ], 79 | "template-curly-spacing": [ "error", "always" ], 80 | "valid-jsdoc": [ "error", { "requireReturn": false } ], 81 | "valid-typeof": "error", 82 | "yoda": [0] 83 | } 84 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | Created by https://www.gitignore.io/api/phpstorm 2 | ### PhpStorm ### 3 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 4 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 5 | # User-specific stuff: 6 | .idea 7 | .idea/* 8 | .idea/**/workspace.xml 9 | .idea/**/tasks.xml 10 | .idea/dictionaries 11 | # Sensitive or high-churn files: 12 | .idea/**/dataSources/ 13 | .idea/**/dataSources.ids 14 | .idea/**/dataSources.xml 15 | .idea/**/dataSources.local.xml 16 | .idea/**/sqlDataSources.xml 17 | .idea/**/dynamic.xml 18 | .idea/**/uiDesigner.xml 19 | # Gradle: 20 | .idea/**/gradle.xml 21 | .idea/**/libraries 22 | # Mongo Explorer plugin: 23 | .idea/**/mongoSettings.xml 24 | ## File-based project format: 25 | *.iws 26 | ## Plugin-specific files: 27 | # IntelliJ 28 | /out/ 29 | # mpeltonen/sbt-idea plugin 30 | .idea_modules/ 31 | # JIRA plugin 32 | atlassian-ide-plugin.xml 33 | # Cursive Clojure plugin 34 | .idea/replstate.xml 35 | # Crashlytics plugin (for Android Studio and IntelliJ) 36 | com_crashlytics_export_strings.xml 37 | crashlytics.properties 38 | crashlytics-build.properties 39 | fabric.properties 40 | ### PhpStorm Patch ### 41 | # Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721 42 | # *.iml 43 | # modules.xml 44 | # .idea/misc.xml 45 | # *.ipr 46 | # End of https://www.gitignore.io/api/phpstorm 47 | .phpintel 48 | .sass-cache 49 | .scss-cache 50 | scss/.sass-cache/ 51 | bower_components 52 | .bower-cache 53 | .bower-registry 54 | .bower-tmp 55 | build/ 56 | nbbuild/ 57 | nbdist/ 58 | nbactions.xml 59 | nb-configuration.xml 60 | .nb-gradle/ 61 | *.log 62 | npm-debug.log 63 | node_modules 64 | .DS_Store 65 | **/.DS_Store 66 | *.map 67 | .greyhr 68 | Thumbs.db 69 | sftp-config.json 70 | *.sublime-project 71 | *.sublime-workspace -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - node 4 | script: 5 | - npm run ci 6 | notifications: 7 | slack: 8 | secure: gX4I/ZQZ5lWXElX6ZIeI/DbtvkW8hozG5YWDSLBS66iu5Vvy73O03mtR8rZVFm5YEM7PRAAPTO9Y9TVMCz1Zul+dat9d7eF/rRhMzssoePAGFuAQwrY3Tt+Acmasnxv4msiT+cB4BkoRQYa9zsEXZmIGnQIwJ5Rvyo7TvJq5HapNTVhbd32hPrkZLK0yknlxPE9HbZV2vL23cKFSaLhJhWYFONzjx3W5SH9g+VBLnxNXcIVyPHSiDnS7zhvmuQ+/Mxc2mkCMIpIH5tysF8UCEzs/SN2hVVopExpLj7hG9j6gEv80nwzI7tvSzmQq3o573+hwI+msFei/2B2T9I4qqEuxbpbZpZv16toJ1tDF7v1rw8Ih5T4bWaEG+OO+DPQA0QYZIvw/COvoa53QAcLW3iWICBgRA24ofU1kYbZuhCvcAWOABDyNDZn9S2agJmxICdMd8/WRoqBiXj7SswOA1csbn8OXeyjGJo2y9PDMGCLOASWCT0BeJ3Qyz5LLNSfETY0+iUURbO92xs3G2BLhZGIDIgp/ma4g4tWX9baBPLCKb+KwaltHQVF0+EmL/oTl0NOb+CSGVoO1zngpUEfMtPqHghLK1XEnbyF9jWFI00hyW5BpJO+2ziSci0BzGOWvKqXkcDrpDN0m+oG09Zi+LLUiJNWT+oDwlO0dlW9n5LE= 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | _⚠️Please note that the development on this has been discountinued as we are focusing more on ReactJS._ 3 | 4 | --- 5 | 6 | # VueTheme - WordPress Theme + VueJs 7 | WordPress theme using WP REST API and [VueJs 2](http://vuejs.org) by [rtCamp](https://rtcamp.com). 8 | This theme is base theme for WordPress theme developers. 9 | 10 | ## How to use? 11 | 1. Go to your WP theme directory (in `/wp-content/theme/`) 12 | 2. Clone / Download this repo 13 | 3. Activate your theme from WordPress theme's backend 14 | 4. This theme will display menu which has set display location to Primary Menu. 15 | 5. Make sure you fulfill all the requirements before using theme. (See [Requirements](#requirements)) 16 | 17 | ## How to use it for development? 18 | 1. Go to your WP theme directory & navigate to VueTheme. 19 | 2. Install dependencies `npm install` 20 | 1. Make sure you add `define( 'RT_VUE_DEV', true );` in `wp-config.php` to get asset files from webpack dev server. 21 | 3. To start dev server with hot reload `npm run dev` 22 | 4. To create build for production with minification `npm run build` 23 | 24 | ## Requirements 25 | * [WP API Menus plugin](https://wordpress.org/plugins/wp-api-menus/) 26 | * WordPress Version 4.7+ 27 | 28 | ## Frameworks / Packages used 29 | * [Vue 2](http://vuejs.org) 30 | * [Vue-Router](https://github.com/vuejs/vue-router) 31 | * [Vuex](https://github.com/vuejs/vuex) 32 | * [Axios](https://github.com/mzabriskie/axios) 33 | * [Babel](https://babeljs.io) 34 | * [Webpack](https://webpack.js.org/) 35 | * [Foundation CSS Grid](http://foundation.zurb.com/grid.html) 36 | * [Gulp](http://gulpjs.com/) 37 | 38 |

39 | 40 | 41 |

42 | -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | esc_url_raw( rest_url() ), 22 | 'base_url' => $base_url, 23 | 'base_path' => $base_path ? $base_path . '/' : '/', 24 | 'nonce' => wp_create_nonce( 'wp_rest' ), 25 | 'site_name' => get_bloginfo( 'name' ), 26 | ) ); 27 | } 28 | 29 | add_action( 'wp_enqueue_scripts', 'rt_rest_theme_scripts' ); 30 | 31 | if ( function_exists( 'register_nav_menus' ) ) { 32 | 33 | register_nav_menus( 34 | array( 35 | 'primary-menu' => __( 'Primary Menu' ), 36 | 'secondary-menu' => __( 'Secondary Menu' ), 37 | ) 38 | ); 39 | 40 | } 41 | 42 | add_filter( 'excerpt_more', '__return_false' ); 43 | 44 | add_action( 'after_setup_theme', 'rt_theme_setup' ); 45 | 46 | function rt_theme_setup() { 47 | 48 | add_theme_support( 'post-thumbnails' ); 49 | 50 | } 51 | 52 | function rt_custom_rewrite_rule() { 53 | 54 | global $wp_rewrite; 55 | 56 | $wp_rewrite->front = $wp_rewrite->root; 57 | 58 | $wp_rewrite->set_permalink_structure( 'blog/%postname%/' ); 59 | 60 | $wp_rewrite->page_structure = $wp_rewrite->root . 'page/%pagename%/'; 61 | 62 | $wp_rewrite->author_base = 'author'; 63 | $wp_rewrite->author_structure = '/' . $wp_rewrite->author_base . '/%author%'; 64 | 65 | $wp_rewrite->set_category_base( 'category' ); 66 | $wp_rewrite->set_tag_base( 'tag' ); 67 | 68 | $wp_rewrite->add_rule( '^blog$', 'index.php', 'top' ); 69 | 70 | } 71 | add_action( 'init', 'rt_custom_rewrite_rule' ); 72 | 73 | //Forcing permalink structure 74 | add_action( 'permalink_structure_changed', 'rt_forcee_perma_struct', 10, 2 ); 75 | 76 | function rt_forcee_perma_struct( $old, $new ) { 77 | 78 | update_option( 'permalink_structure', 'blog/%postname%' ); 79 | 80 | } 81 | // Polyfill for wp_title() 82 | add_filter( 'wp_title','rt_vue_title', 10, 3 ); 83 | 84 | function rt_vue_title( $title, $sep, $seplocation ) { 85 | 86 | if ( false !== strpos( $title, __( 'Page not found' ) ) ) { 87 | 88 | $replacement = ucwords( str_replace( '/', ' ', $_SERVER['REQUEST_URI'] ) ); 89 | $title = str_replace( __( 'Page not found' ), $replacement, $title ); 90 | 91 | } 92 | 93 | return $title; 94 | } 95 | 96 | // Extend rest response 97 | add_action( 'rest_api_init', 'rt_extend_rest_post_response' ); 98 | 99 | function rt_extend_rest_post_response() { 100 | 101 | // Add featured image 102 | register_rest_field( 'post', 103 | 'featured_image_src', //NAME OF THE NEW FIELD TO BE ADDED - you can call this anything 104 | array( 105 | 'get_callback' => 'get_image_src', 106 | 'update_callback' => null, 107 | 'schema' => null, 108 | ) 109 | ); 110 | 111 | register_rest_field( 'post', 112 | 'cat_name', //NAME OF THE NEW FIELD TO BE ADDED - you can call this anything 113 | array( 114 | 'get_callback' => 'rt_get_cat_name', 115 | 'update_callback' => null, 116 | 'schema' => null, 117 | ) 118 | ); 119 | 120 | register_rest_field( 'post', 121 | 'tag_name', 122 | array( 123 | 'get_callback' => 'rt_get_tag_name', 124 | 'update_callback' => null, 125 | 'schema' => null, 126 | ) 127 | ); 128 | 129 | } 130 | // Get featured image 131 | function get_image_src( $object, $field_name, $request ) { 132 | 133 | $feat_img_array['full'] = wp_get_attachment_image_src( $object['featured_media'], 'full', false ); 134 | $feat_img_array['thumbnail'] = wp_get_attachment_image_src( $object['featured_media'], 'thumbnail', false ); 135 | $feat_img_array['srcset'] = wp_get_attachment_image_srcset( $object['featured_media'] ); 136 | $image = is_array( $feat_img_array ) ? $feat_img_array : 'false'; 137 | return $image; 138 | 139 | } 140 | 141 | function rt_get_cat_name( $object, $field_name, $request ) { 142 | 143 | $cats = $object['categories']; 144 | $res = []; 145 | $ob = []; 146 | foreach ( $cats as $x ) { 147 | $cat_id = (int) $x; 148 | $cat = get_category( $cat_id ); 149 | if ( is_wp_error( $cat ) ) { 150 | $res[] = ''; 151 | } else { 152 | $ob['name'] = isset( $cat->name ) ? $cat->name : ''; 153 | $ob['id'] = isset( $cat->term_id ) ? $cat->term_id : ''; 154 | $ob['slug'] = isset( $cat->slug ) ? $cat->slug : ''; 155 | $res[] = $ob; 156 | } 157 | } 158 | return $res; 159 | 160 | } 161 | 162 | function rt_get_tag_name( $object, $field_name, $request ) { 163 | 164 | $tags = $object['tags']; 165 | $res = []; 166 | $ob = []; 167 | 168 | foreach ( $tags as $x ) { 169 | $tag_id = (int) $x; 170 | $tag = get_tag( $tag_id ); 171 | if ( is_wp_error( $tag ) ) { 172 | $res[] = ''; 173 | } else { 174 | $ob['name'] = isset( $tag->name ) ? $tag->name : ''; 175 | $ob['id'] = isset( $tag->term_id ) ? $tag->term_id : ''; 176 | $ob['slug'] = isset( $tag->slug ) ? $tag->slug : ''; 177 | $res[] = $ob; 178 | } 179 | } 180 | return $res; 181 | } 182 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Load plugins 2 | var gulp = require( 'gulp' ); 3 | 4 | var sass = require( 'gulp-sass' ); 5 | var autoprefixer = require( 'gulp-autoprefixer' ); // Concatenates JS files 6 | var combineMq = require( 'gulp-combine-mq' ); // Combine media queries 7 | 8 | // Plugin to Notify after task completed 9 | var notify = require( 'gulp-notify' ); // Notify after completing tasks 10 | 11 | // Plugins to watch tasks 12 | var watch = require( 'gulp-watch' ); 13 | 14 | // Browsers you care about for autoprefixing. 15 | var autoprefixer_browsers = ['last 2 versions', 'ie 9', 'ios 6', 'android 4']; 16 | 17 | 18 | var gulp = require('gulp'); 19 | var path = require('path'); 20 | 21 | // Styles 22 | gulp.task( 'sass', function() { 23 | return gulp.src( './sass/*.scss' ) 24 | .pipe( autoprefixer( autoprefixer_browsers ) ) 25 | .pipe( sass.sync().on( 'error', sass.logError ) ) 26 | .pipe( combineMq() ) 27 | .pipe( gulp.dest( '.' ) ) 28 | .pipe( notify( { 29 | message: 'TASK: "sass" Completed!', 30 | onLast : true 31 | } ) ); 32 | } ); 33 | 34 | 35 | // Watch tasks 36 | gulp.task( 'watch', function() { 37 | gulp.watch( './sass/**/*.{scss,sass}', ['sass'] ); 38 | } ); 39 | //Copy 40 | 41 | 42 | gulp.task( 'default', ['watch'] ); 43 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | > 3 | 4 | <?php wp_title(); ?> RT-VUE Theme 5 | 6 | 7 | 8 | 9 | 10 | 11 | > 12 | 13 | 14 | 41 | 42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rt-vue-theme", 3 | "description": "WordPress theme using Rest API and Vue.js by rtCamp", 4 | "version": "1.0.0", 5 | "author": "rtCamp", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", 10 | "lint": "eslint .", 11 | "phpcs": "phpcs --standard=WordPress-Core ./functions.php", 12 | "ci": "concurrently \"npm run build\" \"npm run lint\"" 13 | }, 14 | "dependencies": { 15 | "axios": "^0.16.1", 16 | "progressive-image": "^1.0.1", 17 | "vue": "^2.2.1", 18 | "vue-resource": "^1.2.1", 19 | "vue-router": "^2.3.0", 20 | "vuex": "^2.2.1" 21 | }, 22 | "devDependencies": { 23 | "babel-core": "^6.0.0", 24 | "babel-eslint": "^6.1.2", 25 | "babel-loader": "^6.0.0", 26 | "babel-preset-latest": "^6.0.0", 27 | "concurrently": "^3.4.0", 28 | "cross-env": "^3.0.0", 29 | "css-loader": "^0.25.0", 30 | "eslint": "^3.19.0", 31 | "eslint-plugin-html": "^2.0.1", 32 | "file-loader": "^0.9.0", 33 | "foundation-sites": "^6.3.1", 34 | "fs-extra": "^1.0.0", 35 | "gulp": "^3.9.1", 36 | "gulp-autoprefixer": "^3.1.1", 37 | "gulp-combine-mq": "^0.4.0", 38 | "gulp-concat": "^2.6.1", 39 | "gulp-notify": "^2.2.0", 40 | "gulp-sass": "^3.1.0", 41 | "gulp-uglify": "^2.1.2", 42 | "gulp-watch": "^4.3.11", 43 | "jquery.mmenu": "^5.7.8", 44 | "path": "^0.12.7", 45 | "vue-loader": "^11.1.4", 46 | "vue-template-compiler": "^2.2.1", 47 | "webpack": "^2.2.0", 48 | "webpack-dev-server": "^2.2.0" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /sass/_animations.scss: -------------------------------------------------------------------------------- 1 | .animated { 2 | animation-duration: 1s; 3 | animation-fill-mode: both; 4 | animation-timing-function: ease-out; 5 | } 6 | 7 | @-webkit-keyframes fadeInLeft { 8 | 0% { 9 | opacity: 0; 10 | -webkit-transform: translateX(-20px); 11 | } 12 | 13 | 100% { 14 | opacity: 1; 15 | -webkit-transform: translateX(0); 16 | } 17 | } 18 | 19 | @keyframes fadeInLeft { 20 | 0% { 21 | opacity: 0; 22 | transform: translateX(-20px); 23 | } 24 | 25 | 100% { 26 | opacity: 1; 27 | transform: translateX(0); 28 | } 29 | } 30 | 31 | .fadeInLeft { 32 | animation-name: fadeInLeft; 33 | } 34 | 35 | .animated-menu { 36 | animation-duration: 0.5s; 37 | animation-fill-mode: both; 38 | animation-timing-function: ease-out; 39 | } 40 | 41 | @-webkit-keyframes fadeInUp { 42 | 0% { 43 | opacity: 0; 44 | -webkit-transform: translateY(20px); 45 | } 46 | 47 | 100% { 48 | opacity: 1; 49 | -webkit-transform: translateY(0); 50 | } 51 | } 52 | 53 | @keyframes fadeInUp { 54 | 0% { 55 | opacity: 0; 56 | transform: translateY(20px); 57 | } 58 | 59 | 100% { 60 | opacity: 1; 61 | transform: translateY(0); 62 | } 63 | } 64 | 65 | .fadeInUp { 66 | -webkit-animation-name: fadeInUp; 67 | animation-name: fadeInUp; 68 | } 69 | 70 | @-webkit-keyframes fadeIn { 71 | 0% { 72 | opacity: 0; 73 | } 74 | 75 | 100% { 76 | opacity: 1; 77 | } 78 | } 79 | 80 | @keyframes fadeIn { 81 | 0% { 82 | opacity: 0; 83 | } 84 | 85 | 100% { 86 | opacity: 1; 87 | } 88 | } 89 | 90 | .fadeIn { 91 | -webkit-animation-name: fadeIn; 92 | animation-name: fadeIn; 93 | } 94 | -------------------------------------------------------------------------------- /sass/_banner.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rtCamp/VueTheme/e2321c235645d5f4321305ac5977b71a41bb1ad5/sass/_banner.scss -------------------------------------------------------------------------------- /sass/_comments.scss: -------------------------------------------------------------------------------- 1 | .comment-content a { 2 | word-wrap: break-word; 3 | } 4 | 5 | .bypostauthor { 6 | display: block; 7 | } 8 | 9 | //Basic Styling 10 | .comments-area { 11 | .comment-list { 12 | padding: 0; 13 | margin: 0; 14 | } 15 | 16 | .comment-author { 17 | img { 18 | float: left; 19 | margin-right: rem-calc(15); 20 | } 21 | 22 | .url { 23 | color: $color__primary; 24 | text-transform: capitalize; 25 | } 26 | } 27 | 28 | li.comment { 29 | border-bottom: 1px solid $color__background-hr; 30 | overflow: hidden; 31 | margin-bottom: rem-calc(25); 32 | } 33 | 34 | li.comment:last-child { 35 | border-bottom: none; 36 | } 37 | 38 | .comment-body { 39 | margin-bottom: rem-calc(20); 40 | 41 | p { 42 | margin-bottom: rem-calc(5); 43 | } 44 | } 45 | 46 | ol.children { 47 | margin-bottom: 0; 48 | } 49 | } 50 | 51 | .comment-form-comment { 52 | textarea { 53 | width: 100%; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /sass/_common-classes.scss: -------------------------------------------------------------------------------- 1 | /*--------------------------- 2 | Accessiblity 3 | ---------------------------*/ 4 | 5 | /* Text meant only for screen readers. */ 6 | .screen-reader-text { 7 | clip: rect(1px, 1px, 1px, 1px); 8 | position: absolute !important; 9 | height: 1px; 10 | width: 1px; 11 | overflow: hidden; 12 | 13 | &:hover, 14 | &:active, 15 | &:focus { 16 | background-color: $color__background-screen; 17 | border-radius: $border-radius; 18 | box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 19 | clip: auto !important; 20 | color: $color__text-screen; 21 | display: block; 22 | 23 | @include font-size(0.875); 24 | 25 | font-weight: bold; 26 | height: auto; 27 | left: 5px; 28 | line-height: normal; 29 | padding: 15px 23px 14px; 30 | text-decoration: none; 31 | top: 5px; 32 | width: auto; 33 | z-index: 100000; 34 | 35 | /* Above WP toolbar. */ 36 | } 37 | } 38 | 39 | /*--------------------------- 40 | Alignments 41 | ---------------------------*/ 42 | 43 | .alignleft { 44 | display: inline; 45 | float: left; 46 | margin-right: 1.5em; 47 | } 48 | 49 | .alignright { 50 | display: inline; 51 | float: right; 52 | margin-left: 1.5em; 53 | } 54 | 55 | .aligncenter { 56 | @include center-block; 57 | } 58 | 59 | .left { 60 | float: left; 61 | } 62 | 63 | .right { 64 | float: right; 65 | } 66 | 67 | .text-left { 68 | text-align: left; 69 | } 70 | 71 | .text-right { 72 | text-align: right; 73 | } 74 | 75 | .text-center { 76 | text-align: center; 77 | } 78 | 79 | /*--------------------------- 80 | Clearing 81 | ---------------------------*/ 82 | 83 | .comment-content, .clearfix { 84 | @extend %clearfix; 85 | } 86 | 87 | // Clear Both 88 | .clear-both { 89 | clear: both; 90 | } 91 | 92 | // Clear None 93 | .clear-none { 94 | clear: none; 95 | } 96 | 97 | // Clear Left 98 | .clear-left { 99 | clear: left; 100 | } 101 | 102 | // Clear Right 103 | .clear-right { 104 | clear: right; 105 | } 106 | 107 | /*--------------------------- 108 | Others 109 | ---------------------------*/ 110 | 111 | .hide, .hidden { 112 | display: none; 113 | } 114 | 115 | .row-container { 116 | @include flex-grid-row; 117 | 118 | // Nesting behavior 119 | & .row, 120 | & .row-container { 121 | @include flex-grid-row(nest, $base: false); 122 | 123 | &.collapse { 124 | margin-right: 0; 125 | margin-left: 0; 126 | } 127 | } 128 | 129 | // Expanded row 130 | &.expanded { 131 | @include grid-row-size(expand); 132 | } 133 | 134 | &:not(.expanded) .row, 135 | &:not(.expanded) .row-container { 136 | @include grid-row-size(expand); 137 | } 138 | 139 | &.collapse { 140 | & > .column { 141 | @include grid-col-collapse; 142 | } 143 | } 144 | 145 | // Undo negative margins 146 | // From collapsed child 147 | &.is-collapse-child, 148 | &.collapse > .column > .row, 149 | &.collapse > .column > .row-container { 150 | margin-right: 0; 151 | margin-left: 0; 152 | } 153 | 154 | @include grid-column-gutter($gutters: $grid-column-gutter); 155 | } 156 | a:hover{ 157 | cursor: pointer; 158 | } -------------------------------------------------------------------------------- /sass/_elements.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | -ms-text-size-adjust: 100%; 4 | 5 | /* [5] */ 6 | -webkit-text-size-adjust: 100%; 7 | 8 | /* [5] */ 9 | color: $color__primary; 10 | 11 | /* [additional] */ 12 | } 13 | 14 | *, 15 | *:before, 16 | *:after { 17 | /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ 18 | box-sizing: inherit; 19 | } 20 | 21 | /** 22 | * 1. Fallback for when there is no custom background color defined. [WordPress] 23 | * 2. Remove default margin. [normalize.css] 24 | * 3. Set the base elements `font-size` to the value of your choosing. 25 | * 4. Work out the unitless `line-height` for your project based around your 26 | * desired `line-height` (defined previously in pixels), and your projects 27 | * base font size. 28 | */ 29 | 30 | body { 31 | background: $color__background-body; 32 | 33 | /* [1] */ 34 | // background-size: 100% auto; 35 | margin: 0; 36 | 37 | /* [2] */ 38 | font-family: $font__main; 39 | 40 | @include font-size($line-height: true); 41 | 42 | /* [3] */ 43 | 44 | /* [4] */ 45 | 46 | // WP Editor 47 | &.mce-content-body { 48 | font-family: inherit; 49 | margin: 15px; 50 | } 51 | } 52 | 53 | blockquote, q { 54 | quotes: "" ""; 55 | 56 | &:before, 57 | &:after { 58 | content: ""; 59 | } 60 | } 61 | 62 | img { 63 | height: auto; 64 | 65 | /* Make sure images are scaled correctly. */ 66 | max-width: 100%; 67 | vertical-align: middle; 68 | 69 | /* Adhere to container width. */ 70 | } 71 | 72 | figure { 73 | max-width: 100%; 74 | } 75 | 76 | /* Default Links */ 77 | a { 78 | // Self, Active & Visited 79 | & { 80 | color: $color__link; 81 | text-decoration: none; 82 | } 83 | 84 | transition: 0.3s; 85 | 86 | // Hover 87 | &:hover { 88 | color: $color__link-hover; 89 | } 90 | } 91 | 92 | /*--------------------------- 93 | Lists & Tables 94 | ---------------------------*/ 95 | 96 | ul, 97 | ol { 98 | margin: rem-calc(0 0 18 18); 99 | 100 | &.no-bullet { 101 | &, 102 | ul, 103 | ol { 104 | list-style: none; 105 | } 106 | } 107 | } 108 | 109 | li > ul, 110 | li > ol { 111 | margin-bottom: 0; 112 | margin-left: 1.5rem; 113 | } 114 | 115 | dt { 116 | font-weight: bold; 117 | } 118 | 119 | dd { 120 | margin: 0 1.5rem 1.5rem; 121 | } 122 | 123 | /*--------------------------- 124 | Buttons 125 | ---------------------------*/ 126 | 127 | button, 128 | input[type="button"], 129 | input[type="reset"], 130 | input[type="submit"] { 131 | border: 1px solid; 132 | border-color: $color__border-button; 133 | border-radius: $border-radius; 134 | background: $color__background-button; 135 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05); 136 | color: rgba(0, 0, 0, 0.8); 137 | line-height: 1; 138 | padding: .6rem 1rem .4rem; 139 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); 140 | font-family: $font__main; 141 | 142 | &:hover { 143 | border-color: $color__border-button-hover; 144 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); 145 | } 146 | 147 | &:active, 148 | &:focus { 149 | border-color: $color__border-button-focus; 150 | box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); 151 | } 152 | } 153 | 154 | /*--------------------------- 155 | Fields 156 | ---------------------------*/ 157 | 158 | input[type="text"], 159 | input[type="email"], 160 | input[type="url"], 161 | input[type="password"], 162 | input[type="search"], 163 | input[type="tel"], 164 | textarea { 165 | color: $color__text-input; 166 | border: 1px solid $color__border-input; 167 | border-radius: $border-radius; 168 | font-family: $font__main; 169 | line-height: $font__line-height-body; 170 | 171 | &:focus { 172 | color: $color__text-input-focus; 173 | } 174 | } 175 | 176 | input[type="text"], 177 | input[type="email"], 178 | input[type="url"], 179 | input[type="password"], 180 | input[type="search"] { 181 | padding: 3px; 182 | } 183 | 184 | select { 185 | color: $color__select-text; 186 | font-family: $font__main; 187 | font-size: $font__base-font-size; 188 | line-height: $font__line-height-body; 189 | } 190 | 191 | textarea { 192 | max-width: 100%; 193 | line-height: $font__line-height-body; 194 | outline: none; 195 | background: $color__background-textarea; 196 | box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1) inset; 197 | } 198 | 199 | /* Progressive-Images */ 200 | .full { 201 | width: 100vw; 202 | left: 50%; 203 | margin-left: -50vw; 204 | } -------------------------------------------------------------------------------- /sass/_footer.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rtCamp/VueTheme/e2321c235645d5f4321305ac5977b71a41bb1ad5/sass/_footer.scss -------------------------------------------------------------------------------- /sass/_foundation.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Import Zurb Foundation Grid 3 | * Ref. http://foundation.zurb.com/sites/docs/sass.html 4 | **/ 5 | @import "../node_modules/foundation-sites/scss/global"; 6 | @import "../node_modules/foundation-sites/scss/foundation"; 7 | 8 | /* Import Variables */ 9 | @import "variables"; 10 | 11 | /* Include Foundation Flex Grid */ 12 | /* Ref. http://foundation.zurb.com/sites/docs/flex-grid.html */ 13 | @include foundation-flex-grid; 14 | 15 | /* Include Foundation Flexbox */ 16 | /* Ref. http://foundation.zurb.com/sites/docs/flexbox.html */ 17 | @include foundation-flex-classes; 18 | 19 | /* Include FOundation Visibility Classes */ 20 | /* Ref. http://foundation.zurb.com/sites/docs/visibility.html */ 21 | @include foundation-visibility-classes; 22 | 23 | /* Other Foundation Libraries */ 24 | /* @include foundation-global-styles; */ 25 | /* @include foundation-grid; */ 26 | /* @include foundation-typography; */ 27 | /* @include foundation-forms; */ 28 | /* @include foundation-button; */ 29 | /* @include foundation-accordion; */ 30 | /* @include foundation-accordion-menu; */ 31 | /* @include foundation-badge; */ 32 | /* @include foundation-breadcrumbs; */ 33 | /* @include foundation-button-group; */ 34 | /* @include foundation-callout; */ 35 | /* @include foundation-card; */ 36 | /* @include foundation-close-button; */ 37 | /* @include foundation-menu; */ 38 | /* @include foundation-menu-icon; */ 39 | /* @include foundation-drilldown-menu; */ 40 | /* @include foundation-dropdown; */ 41 | /* @include foundation-dropdown-menu; */ 42 | /* @include foundation-responsive-embed; */ 43 | /* @include foundation-label; */ 44 | /* @include foundation-media-object; */ 45 | /* @include foundation-off-canvas; */ 46 | /* @include foundation-orbit; */ 47 | /* @include foundation-pagination; */ 48 | /* @include foundation-progress-bar; */ 49 | /* @include foundation-slider; */ 50 | /* @include foundation-sticky; */ 51 | /* @include foundation-reveal; */ 52 | /* @include foundation-switch; */ 53 | /* @include foundation-table; */ 54 | /* @include foundation-tabs; */ 55 | /* @include foundation-thumbnail; */ 56 | /* @include foundation-title-bar; */ 57 | /* @include foundation-tooltip; */ 58 | /* @include foundation-top-bar; */ 59 | /* @include foundation-visibility-classes; */ 60 | /* @include foundation-float-classes; */ 61 | 62 | /** 63 | * End of Foundation Styles 64 | **/ 65 | -------------------------------------------------------------------------------- /sass/_header.scss: -------------------------------------------------------------------------------- 1 | #masthead{ 2 | min-height: rem-calc(50); 3 | margin: 0; 4 | padding: 0; 5 | font-size: rem-calc(16); 6 | color: $color__primary; 7 | box-shadow: rem-calc(5) 0 rem-calc(10); 8 | width: 100%; 9 | background-color:$white; 10 | font-weight: $SemiBold; 11 | text-transform: capitalize; 12 | } 13 | #primary-nav-button div{ 14 | width: rem-calc(20); 15 | height: rem-calc(3); 16 | background-color: black; 17 | margin: rem-calc(6) 0; 18 | } 19 | .site-name { 20 | display: inline-block; 21 | font-weight: normal; 22 | font-size: rem-calc(28); 23 | height: 100%; 24 | } 25 | -------------------------------------------------------------------------------- /sass/_menus.scss: -------------------------------------------------------------------------------- 1 | #site-navigation{ 2 | clear: both; 3 | position: absolute; 4 | left: 0; 5 | top: 60px; 6 | background-color: #f5f5f5; 7 | display: none; 8 | width: 100%; 9 | min-height: 50px; 10 | overflow: auto; 11 | z-index: 999; 12 | &.open {display: block;} 13 | @include admin-sticky-fix(60); 14 | ul { 15 | list-style: none; 16 | margin: 0; 17 | padding-left: 0; 18 | padding: 0px; 19 | ul { 20 | float: left; 21 | position: absolute; 22 | top: rem-calc(35); 23 | left: -999em; 24 | z-index: 99999; 25 | background: $white; 26 | 27 | // display: none; 28 | 29 | ul { 30 | left: -999rem; 31 | top: 0; 32 | } 33 | 34 | li { 35 | &:hover > ul, 36 | &.focus > ul { 37 | left: 100%; 38 | } 39 | } 40 | 41 | a { 42 | width: 200px; 43 | 44 | } 45 | 46 | &:hover > a, 47 | &.focus > a { 48 | color: $color__link-hover; 49 | } 50 | } 51 | 52 | li:hover > ul, 53 | li.focus > ul { 54 | left: auto; 55 | 56 | // display: block; 57 | 58 | } 59 | } 60 | 61 | li { 62 | display: inline-block; 63 | position: relative; 64 | &:hover > a, 65 | &.focus > a { 66 | color: $color__link-hover; 67 | } 68 | } 69 | 70 | a { 71 | display: block; 72 | text-decoration: none; 73 | padding-right:rem-calc(10); 74 | height: 100%; 75 | line-height: 50px; 76 | padding:0 rem-calc(24) ; 77 | } 78 | 79 | } -------------------------------------------------------------------------------- /sass/_mixins.scss: -------------------------------------------------------------------------------- 1 | /* 2 | //// 3 | /// @group Blank-Theme 4 | //// 5 | */ 6 | 7 | /* 8 | /// Rem output with px fallback 9 | /// @param {Number} $font-size [$font__base-font-size] - Font size without unit 10 | /// @param {Number} $line-height [false] - Font line height 11 | /// 12 | */ 13 | @mixin font-size($font-size: $font__base-font-size, $line-height: false) { 14 | font-size: rem-calc($font-size); 15 | 16 | @if $line-height == true { 17 | line-height: ceil($font-size / $font__base-line-height) * $font__base-line-height / $font-size; 18 | } 19 | } 20 | 21 | /// Center block 22 | @mixin center-block { 23 | display: block; 24 | margin-left: auto; 25 | margin-right: auto; 26 | } 27 | 28 | /// Clearfix 29 | @mixin clearfix { 30 | content: ""; 31 | display: table; 32 | } 33 | 34 | /// Clear after (not all clearfix need this also) 35 | @mixin clearfix-after { 36 | clear: both; 37 | } 38 | @mixin admin-sticky-fix( $offset: 0 ) { 39 | $narrow-offset: 46px; 40 | $wide-offset: 32px; 41 | @if $offset != 0 and type-of($offset) == 'number' { 42 | $narrow-offset: $narrow-offset + $offset; 43 | $wide-offset: $wide-offset + $offset; 44 | } 45 | .admin-bar & { 46 | top: $narrow-offset; 47 | @media screen and (min-width: 783px) { 48 | top: $wide-offset; 49 | } 50 | } 51 | } -------------------------------------------------------------------------------- /sass/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Note: This file is updated by Sagar, To remove ducplication of styles. */ 4 | 5 | /* HTML5 display definitions 6 | ========================================================================== */ 7 | 8 | /** 9 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 10 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 11 | * and Firefox. 12 | * Correct `block` display not defined for `main` in IE 11. 13 | */ 14 | 15 | article, 16 | aside, 17 | details, 18 | figcaption, 19 | figure, 20 | footer, 21 | header, 22 | main, 23 | menu, 24 | nav, 25 | section, 26 | summary { 27 | display: block; 28 | } 29 | 30 | /** 31 | * 1. Correct `inline-block` display not defined in IE 8/9. 32 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 33 | */ 34 | 35 | audio, 36 | canvas, 37 | progress, 38 | video { 39 | display: inline-block; 40 | 41 | /* 1 */ 42 | vertical-align: baseline; 43 | 44 | /* 2 */ 45 | } 46 | 47 | /** 48 | * Prevent modern browsers from displaying `audio` without controls. 49 | * Remove excess height in iOS 5 devices. 50 | */ 51 | 52 | audio:not([controls]) { 53 | display: none; 54 | height: 0; 55 | } 56 | 57 | /** 58 | * Address `[hidden]` styling not present in IE 8/9/10. 59 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 60 | */ 61 | 62 | [hidden], 63 | template { 64 | display: none; 65 | } 66 | 67 | /* Text-level semantics 68 | ========================================================================== */ 69 | 70 | /** 71 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 72 | */ 73 | 74 | abbr[title] { 75 | border-bottom: 1px dotted; 76 | } 77 | 78 | /** 79 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 80 | */ 81 | 82 | b, 83 | strong { 84 | font-weight: bold; 85 | } 86 | 87 | /** 88 | * Address styling not present in Safari and Chrome. 89 | */ 90 | 91 | dfn { 92 | font-style: italic; 93 | } 94 | 95 | /** 96 | * Address styling not present in IE 8/9. 97 | */ 98 | 99 | mark { 100 | background: #ff0; 101 | color: #000; 102 | } 103 | 104 | /** 105 | * Address inconsistent and variable font size in all browsers. 106 | */ 107 | 108 | small { 109 | font-size: 80%; 110 | } 111 | 112 | /** 113 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 114 | */ 115 | 116 | sub, 117 | sup { 118 | font-size: 75%; 119 | line-height: 0; 120 | position: relative; 121 | vertical-align: baseline; 122 | } 123 | 124 | sup { 125 | top: -0.5rem; 126 | } 127 | 128 | sub { 129 | bottom: -0.25rem; 130 | } 131 | 132 | /* Embedded content 133 | ========================================================================== */ 134 | 135 | /** 136 | * Correct overflow not hidden in IE 9/10/11. 137 | */ 138 | 139 | svg:not(:root) { 140 | overflow: hidden; 141 | } 142 | 143 | /* Forms 144 | ========================================================================== */ 145 | 146 | /** 147 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 148 | * styling of `select`, unless a `border` property is set. 149 | */ 150 | 151 | /** 152 | * 1. Correct color not being inherited. 153 | * Known issue: affects color of disabled elements. 154 | * 2. Correct font properties not being inherited. 155 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 156 | */ 157 | 158 | button, 159 | input, 160 | optgroup, 161 | select, 162 | textarea { 163 | color: inherit; 164 | 165 | /* 1 */ 166 | font: inherit; 167 | 168 | /* 2 */ 169 | margin: 0; 170 | 171 | /* 3 */ 172 | } 173 | 174 | /** 175 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 176 | */ 177 | 178 | button { 179 | overflow: visible; 180 | } 181 | 182 | /** 183 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 184 | * All other form control elements do not inherit `text-transform` values. 185 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 186 | * Correct `select` style inheritance in Firefox. 187 | */ 188 | 189 | button, 190 | select { 191 | text-transform: none; 192 | } 193 | 194 | /** 195 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 196 | * and `video` controls. 197 | * 2. Correct inability to style clickable `input` types in iOS. 198 | * 3. Improve usability and consistency of cursor style between image-type 199 | * `input` and others. 200 | */ 201 | 202 | button, 203 | html input[type="button"], 204 | input[type="reset"], 205 | input[type="submit"] { 206 | -webkit-appearance: button; 207 | 208 | /* 2 */ 209 | cursor: pointer; 210 | 211 | /* 3 */ 212 | } 213 | 214 | /** 215 | * Re-set default cursor for disabled elements. 216 | */ 217 | 218 | button[disabled], 219 | html input[disabled] { 220 | cursor: default; 221 | } 222 | 223 | /** 224 | * Remove inner padding and border in Firefox 4+. 225 | */ 226 | 227 | button::-moz-focus-inner, 228 | input::-moz-focus-inner { 229 | border: 0; 230 | padding: 0; 231 | } 232 | 233 | /** 234 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 235 | * the UA stylesheet. 236 | */ 237 | 238 | input { 239 | line-height: normal; 240 | } 241 | 242 | /** 243 | * It's recommended that you don't attempt to style these elements. 244 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 245 | * 246 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 247 | * 2. Remove excess padding in IE 8/9/10. 248 | */ 249 | 250 | input[type="checkbox"], 251 | input[type="radio"] { 252 | box-sizing: border-box; 253 | 254 | /* 1 */ 255 | padding: 0; 256 | 257 | /* 2 */ 258 | } 259 | 260 | /** 261 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 262 | * `font-size` values of the `input`, it causes the cursor style of the 263 | * decrement button to change from `default` to `text`. 264 | */ 265 | 266 | input[type="number"]::-webkit-inner-spin-button, 267 | input[type="number"]::-webkit-outer-spin-button { 268 | height: auto; 269 | } 270 | 271 | /** 272 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 273 | */ 274 | 275 | input[type="search"] { 276 | -webkit-appearance: textfield; 277 | 278 | /* 1 */ 279 | } 280 | 281 | /** 282 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 283 | * Safari (but not Chrome) clips the cancel button when the search input has 284 | * padding (and `textfield` appearance). 285 | */ 286 | 287 | input[type="search"]::-webkit-search-cancel-button, 288 | input[type="search"]::-webkit-search-decoration { 289 | -webkit-appearance: none; 290 | } 291 | 292 | /** 293 | * Define consistent border, margin, and padding. 294 | */ 295 | 296 | fieldset { 297 | border: 1px solid #c0c0c0; 298 | margin: 0 2px; 299 | padding: 0.35rem 0.625rem 0.75rem; 300 | } 301 | 302 | /** 303 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 304 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 305 | */ 306 | 307 | legend { 308 | border: 0; 309 | 310 | /* 1 */ 311 | padding: 0; 312 | 313 | /* 2 */ 314 | } 315 | 316 | /** 317 | * Don't inherit the `font-weight` (applied by a rule above). 318 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 319 | */ 320 | 321 | optgroup { 322 | font-weight: bold; 323 | } 324 | 325 | /* Note: This file is updated by Sagar, To remove ducplication of styles. */ 326 | 327 | figure { 328 | margin: 0; 329 | max-width: 100%; 330 | } 331 | -------------------------------------------------------------------------------- /sass/_placeholders.scss: -------------------------------------------------------------------------------- 1 | //// 2 | /// @group Blank-Theme 3 | //// 4 | 5 | /// Micro clearfix 6 | /// Extend the clearfix class with Sass to avoid the `.clearfix` class appearing 7 | /// over and over in your markup. 8 | /// 9 | /// @example scss - %clearfix basic usage 10 | /// .foo { @extend %clearfix; } 11 | /// 12 | /// @link http://cssmojo.com/latest_new_clearfix_so_far/ Micro clearfix 13 | /// 14 | %clearfix { 15 | &:after { 16 | content: ""; 17 | display: table; 18 | clear: both; 19 | } 20 | } 21 | 22 | /// Vertical rhythm 23 | %vertical-rhythm { 24 | margin: rem-calc(0 0 $font__base-line-height); 25 | padding: 0; 26 | } 27 | 28 | /// Center block 29 | %center-block { 30 | display: block; 31 | margin-left: auto; 32 | margin-right: auto; 33 | } 34 | -------------------------------------------------------------------------------- /sass/_posts-and-pages.scss: -------------------------------------------------------------------------------- 1 | .rt-main{ 2 | 3 | margin-top: rem-calc(20); 4 | 5 | .column{ 6 | 7 | margin-bottom: rem-calc(10); 8 | } 9 | .rt-pagination{ 10 | padding: rem-calc(10); 11 | } 12 | 13 | .rt-pagination{ 14 | 15 | text-align: center; 16 | 17 | a{ 18 | display: inline-block; 19 | padding: 0 rem-calc(24); 20 | } 21 | 22 | } 23 | 24 | .rt-post{ 25 | 26 | .rt-content{ 27 | margin: rem-calc(10) 0; 28 | font-size: rem-calc(20); 29 | } 30 | .rt-meta { 31 | 32 | span { 33 | display: inline-block; 34 | margin-right: rem-calc(2); 35 | font-style: italic; 36 | } 37 | .author{ 38 | font-weight: $SemiBold; 39 | text-transform: capitalize; 40 | } 41 | } 42 | 43 | .rt-cat-list{ 44 | a{ 45 | display: inline-block; 46 | margin: rem-calc(5); 47 | padding: rem-calc(5); 48 | border-radius: rem-calc(5); 49 | background-color: #bcbcbc; 50 | color: $black; 51 | 52 | &:hover{ 53 | opacity: 0.8; 54 | } 55 | } 56 | 57 | } 58 | 59 | .rt-tag-list{ 60 | a{ 61 | display: inline-block; 62 | margin: rem-calc(5); 63 | padding: rem-calc(2); 64 | border-radius: rem-calc(5); 65 | background-color: #bcbcbc; 66 | color: $black; 67 | 68 | &:hover{ 69 | opacity: 0.8; 70 | } 71 | 72 | } 73 | } 74 | 75 | } 76 | 77 | } 78 | 79 | -------------------------------------------------------------------------------- /sass/_site_layout.scss: -------------------------------------------------------------------------------- 1 | body{ 2 | text-rendering: optimizeLegibility; 3 | -webkit-font-smoothing: antialiased; 4 | background-color: $white; 5 | } 6 | /* Enter and leave animations can use different */ 7 | /* durations and timing functions. */ 8 | .slide-fade-enter-active { 9 | transition: all .3s ease; 10 | } 11 | .slide-fade-leave-active { 12 | transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0); 13 | } 14 | .slide-fade-enter, .slide-fade-leave-to 15 | /* .slide-fade-leave-active for <2.1.8 */ { 16 | transform: translateX(10px); 17 | opacity: 0; 18 | } 19 | #page{ 20 | width: 100%; 21 | overflow: hidden; 22 | } -------------------------------------------------------------------------------- /sass/_typography.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #HEADINGS 3 | \*------------------------------------*/ 4 | 5 | h1 { 6 | @include font-size($font__size-h1, $line-height: true); 7 | 8 | @extend %vertical-rhythm; 9 | } 10 | 11 | h2 { 12 | @include font-size($font__size-h2, $line-height: true); 13 | 14 | /*font-weight: 400;*/ 15 | @extend %vertical-rhythm; 16 | } 17 | 18 | h3 { 19 | @include font-size($font__size-h3, $line-height: true); 20 | 21 | @extend %vertical-rhythm; 22 | } 23 | 24 | h4 { 25 | @include font-size($font__size-h4, $line-height: true); 26 | 27 | @extend %vertical-rhythm; 28 | } 29 | 30 | h5 { 31 | @include font-size($font__size-h5, $line-height: true); 32 | 33 | @extend %vertical-rhythm; 34 | } 35 | 36 | h6 { 37 | @include font-size($font__size-h6, $line-height: true); 38 | 39 | @extend %vertical-rhythm; 40 | } 41 | 42 | // Lists 43 | ul, ol, dd { 44 | @extend %vertical-rhythm; 45 | 46 | margin-left: rem-calc($font__base-line-height); 47 | } 48 | 49 | li > ul, 50 | li > ol { 51 | margin-bottom: 0; 52 | } 53 | 54 | /** 55 | * Crude table styles; tables are very difficult to keep on the baseline. 56 | */ 57 | table { 58 | border-collapse: collapse; 59 | border-spacing: 0; 60 | 61 | @extend %vertical-rhythm; 62 | 63 | width: 100%; 64 | } 65 | 66 | .table-responsive { 67 | min-height: .01%; 68 | overflow-x: auto; 69 | } 70 | 71 | th, 72 | td { 73 | border-bottom: 1px solid #E1E1E1; 74 | padding: $font__base-line-height / 2; 75 | text-align: left; 76 | 77 | &:first-child { 78 | padding-left: 0; 79 | } 80 | 81 | &:last-child { 82 | padding-right: 0; 83 | } 84 | } 85 | 86 | .rthd-comment-content { 87 | th, 88 | td { 89 | vertical-align: top; 90 | 91 | &:first-child { 92 | width: 18%; 93 | } 94 | } 95 | } 96 | 97 | /** 98 | * Paragraphs 99 | */ 100 | 101 | p { 102 | @extend %vertical-rhythm; 103 | } 104 | 105 | /** 106 | * Not strictly a paragraph, but probably doesnt need its own section. 107 | */ 108 | 109 | address { 110 | @extend %vertical-rhythm; 111 | } 112 | 113 | /** 114 | * CODE 115 | */ 116 | 117 | pre { 118 | background: $color__background-pre; 119 | border: 1px solid $color__border-light; 120 | 121 | @extend %vertical-rhythm; 122 | 123 | max-width: 100%; 124 | overflow: auto; 125 | 126 | /* Contain overflow in all browsers. */ 127 | padding: 1rem; 128 | 129 | code.bash, 130 | & > code { 131 | background: transparent; 132 | border: 0; 133 | display: block; 134 | margin: 0; 135 | padding: 0; 136 | } 137 | 138 | code code.bash { 139 | font-size: inherit; 140 | } 141 | } 142 | 143 | code { 144 | padding: rem-calc(2 6); 145 | margin: rem-calc(0 3); 146 | font-size: 80%; 147 | 148 | //white-space: nowrap; 149 | background: $color__background-pre; 150 | border: 1px solid $color__border-light; 151 | border-radius: $border-radius; 152 | } 153 | 154 | /** 155 | * 1. Fix an odd quirk whereby, without this, code blocks are rendered at a 156 | * font-size smaller than 1em. 157 | */ 158 | 159 | code, 160 | kbd, 161 | pre, 162 | samp { 163 | font-family: $font__code; 164 | 165 | /* [1] */ 166 | } 167 | 168 | /** 169 | * Set up quote marks on quoting elements. 170 | */ 171 | 172 | q, 173 | blockquote { 174 | border-left: 4px solid $light-gray; 175 | color: #999; 176 | font-style: italic; 177 | margin: rem-calc(0 0 $font__base-line-height $font__base-line-height); 178 | padding-left: rem-calc(16); 179 | } 180 | 181 | /** 182 | * HR 183 | */ 184 | 185 | hr { 186 | background-color: $color__background-hr; 187 | border: 0; 188 | box-sizing: content-box; 189 | 190 | /* Address differences between Firefox and other browsers. Source- normalize.css */ 191 | height: 1px; 192 | 193 | @extend %vertical-rhythm; 194 | } 195 | 196 | h1,h2,h3,h4{ 197 | font-family:Lato, sans-serif; 198 | margin-bottom: rem-calc(10); 199 | } 200 | #site-navigation{ 201 | font-family:Lato, sans-serif; 202 | } 203 | p{ 204 | line-height: 1.5; ; 205 | } 206 | -------------------------------------------------------------------------------- /sass/_variables.scss: -------------------------------------------------------------------------------- 1 | //// 2 | /// @group Blank-Theme 3 | //// 4 | 5 | /*--------------------------- 6 | Typorgraphy 7 | ---------------------------*/ 8 | 9 | /// Global theme font 10 | /// @type String 11 | $font__main: Roboto, sans-serif;; 12 | 13 | /// Global code font 14 | /// @type String 15 | $font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; 16 | $font__pre: "Courier 10 Pitch", Courier, monospace; 17 | $font__line-height-body: 1.5; 18 | $font__line-height-pre: 1.6; 19 | 20 | /// Defines the base font size of the page, which is the value `1rem` is equal to. 21 | /// @type Number 22 | $font__rem-base: 16px !default; 23 | 24 | /// Global Base Font size. Assigned to `` tag 25 | /// @type Number 26 | $font__base-font-size: 16px !default; 27 | 28 | /// Global Base Line Height 29 | /// @type Number 30 | $font__base-line-height: 30px !default; 31 | 32 | /// Heading 1 font size 33 | /// @type Number 34 | $font__size-h1: 30px; 35 | 36 | /// Heading 2 font size 37 | /// @type Number 38 | $font__size-h2: 28px; 39 | 40 | /// Heading 3 font size 41 | /// @type Number 42 | $font__size-h3: 24px; 43 | 44 | /// Heading 4 font size 45 | /// @type Number 46 | $font__size-h4: 20px; 47 | 48 | /// Heading 5 font size 49 | /// @type Number 50 | $font__size-h5: 14px; 51 | 52 | /// Heading 6 font size 53 | /// @type Number 54 | $font__size-h6: 10px; 55 | 56 | /*--------------------------- 57 | Colors 58 | ---------------------------*/ 59 | 60 | /// Default Black Color 61 | /// @type color 62 | $black: #000000; 63 | 64 | /// Default White Color 65 | /// @type color 66 | $white: #FFFFFF; 67 | 68 | /// Light Gray 69 | /// @type color 70 | $light-gray: #ccc; 71 | 72 | /// Primary Color - Color for content and links. 73 | /// @type color 74 | $color__primary: #444444; 75 | 76 | /// Secondary Color 77 | /// @type color 78 | $color__secondary: blue; 79 | 80 | /// Theme Color - Used for link hover color 81 | /// @type color 82 | $color__theme: #a9a8b5; 83 | 84 | /// Body background color - Used for `` tag 85 | /// @type color 86 | $color__background-body: #fafaf4; 87 | $color__background-screen: #f1f1f1; 88 | 89 | /// Horizontal line color - Used for `
` tag. 90 | /// @type color 91 | $color__background-hr: $light-gray; 92 | 93 | /// Default Button Background - Used for all button types. 94 | /// @type color 95 | $color__background-button: #e6e6e6; 96 | 97 | /// pre tag background - Used for `
` tag.
 98 | /// @type color
 99 | $color__background-pre: #eee;
100 | 
101 | /// textarea background - Used for `