diff --git a/.gitignore b/.gitignore index b671fff1..0464aacc 100644 --- a/.gitignore +++ b/.gitignore @@ -477,7 +477,12 @@ __pycache__/ .cache-loader yarn-error.log *.swp -# *.zip +*.zip yarn.lock - +# master +.sass-lint.yml +.eslintrc +.stylelintrc.js +.gulpfile.js +src/ diff --git a/.stylelintrc.js b/.stylelintrc.js deleted file mode 100644 index f552ef3e..00000000 --- a/.stylelintrc.js +++ /dev/null @@ -1,39 +0,0 @@ -module.exports = { - 'extends': 'stylelint-config-standard', - 'rules': { - 'no-empty-source': null, - 'declaration-block-trailing-semicolon': null, - 'number-leading-zero': null, - 'color-hex-case': null, - 'selector-list-comma-newline-after': null, - 'declaration-block-single-line-max-declarations': 3, - // 'string-quotes': 'double', - 'at-rule-no-unknown': [ - true, - { - 'ignoreAtRules': [ - 'extend', - 'at-root', - 'debug', - 'warn', - 'error', - 'if', - 'else', - 'for', - 'each', - 'while', - 'mixin', - 'include', - 'content', - 'return', - 'function', - 'tailwind', - 'apply', - 'responsive', - 'variants', - 'screen', - ], - }, - ], - }, -}; diff --git a/README.md b/README.md index 65fb8acd..66d6ff87 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,8 @@ It is available for free so you can use on your site. If you have any suggestion [![donate](./donate.gif)](https://www.paypal.me/godofredoninja) +If you still don't have a **Hosting for your Ghost**. You can use [Digital Ocean](https://m.do.co/c/710a27a3b3de) using my [reference link]((https://m.do.co/c/710a27a3b3de)) and you will get **50 dollars** to use in [Digital Ocean]((https://m.do.co/c/710a27a3b3de)). This way you will also be helping me. + ![mapache theme for ghost](./screenshot.png) ## Featured @@ -24,6 +26,8 @@ It is available for free so you can use on your site. If you have any suggestion - Optional menu in the footer - [AMP](https://github.com/godofredoninja/Hodor-AMP-Template-for-Ghost) Template (Accelerated Mobile Pages) - Social Media +- Members / Subscription +- Very fast search engine - Related Articles (6 articles) - Different templates for the Home Page - Different templates for publishing posts @@ -34,55 +38,814 @@ It is available for free so you can use on your site. If you have any suggestion - Support for comments (Disqus) - Support for counter comments (Disqus) - Buttons to share the article (Facebook - Twitter - Reddit - Linkedin - Pinterest) +- Beautiful gallery viewer - Sticky content in the sidebar - YouTube, Vimeo, kickstarter, dailymotion => Responsive - Lazy image loading for better performance only in backgrounds - Code syntax [Prismjs](http://prismjs.com/index.html#languages-list) Supported all syntax. -### Font Icons +## Table of Contents + +- [Web Browser Support for Mapache](#web-browser-support-for-mapache) +- [Ghost Settings](#ghost-settings) +- [Mapache Settings](#mapache-settings) + - [1. Social Media](#1-social-media) + - [2. Footer Menu](#2-footer-menu) + - [3. Instagram](#3-instagram) + - [4. Comments](#4-comments) + - [5. Search](#5-search) +- [Home](#home-page) + - [Tech](#home-page) + - [Personal](#home-page) + - [Blog](#home-page) + - [Travel](#home-page) + - [Travel with Featured Article](#home-page) + - [Fashion Concept](#home-page) +- [Post](#post-format) + - [Default Post](##post-format) + - [Post Full Header](##post-format) + - [Post Image](##post-format) + - [Post Image Single](##post-format) + - [Post Video](##post-format) + - [Post Single](##post-format) +- [Page](#page) + - [About Us](#about-us-page) + - [Contact](#contact-page) + - [Newsletter](#newsletter-page) +- [Archive](#authors-page) + - [Authors](#authors-page) + - [Tags](#tags-page) + - [Podcast](#podcast-page) +- [Category](#category) + - [Default Category](#category---defautl) + - [Category with header](#category-with-header) +- [Members / Subscription](#members--subscription) +- [AMP](#amp) +- [Theme Translation](#theme-translation) +- [Change Theme Color](#change-theme-color) +- [PrismJS code syntax](#prismjs-code-syntax) + +## Web Browser Support for mapache + +mapache supports the following web [browsers](https://caniuse.com/#search=CSS%20Variables) + +## Ghost Settings + +Enable the following checkbox on the Labs page in the Ghost admin panel. + +![ghost labs](./documentation/ghost-settings.jpg) + +## Mapache Settings + +> You don't have to add all the Mapache configurations. only the ones you need + +### 1. Social Media + +> Facebook and Twitter is not necessary because I use them from the ghost settings + +Add the Social Links only for the services you want to appear in the header section of your website. Pay attention as enabling too many services will cause menu problems. + +:arrow_right: `Dashboard -> Code injection -> Site Footer` + +```html + +``` + +:point_right: For those who are commented it is necessary to add those icons through `SVG` + +It is not necessary to add all the icons. Only the icons you need. + +:arrow_right: `Dashboard -> Code injection -> Site Footer` + +```html + +``` + +### 2. Footer Menu + +You can add an additional menu bar at the footer of the page + +:arrow_right: `Dashboard -> Code injection -> Site Footer` + +```html + +``` + +### 3. Instagram + +I get the last 10 images then show 6 randomly It will only be shown in the footer of the Post + +First, you will need to get your account `userName` and `userId` and `accessToken` from the following URLs: + +- User ID: [codeofaninja.com/tools/find-instagram-user-id](https://codeofaninja.com/tools/find-instagram-user-id) +- Access Token: [instagram.pixelunion.net](http://instagram.pixelunion.net/) + +:arrow_right: `Dashboard -> Code injection -> Site Footer` + +```html + +``` + +### 4. Comments + +Mapache supports Disqus comments as well as comment counting + +— First, you will need to get your account `disqusShortName` + +:arrow_right: `Dashboard -> Code injection -> Site Footer` + +```html + +``` + +### 5. Search + +> The default search engine will only search the titles of the post + +**Setup a Custom integration** + +1. Go in your Ghost's `dashboard -> Integrations -> Add custom integration` +2. Set a name: `GodoFredo Themes Search` +3. Get the Content API Key and replace the demo key with this one +4. Get the admin domain. This will be different in some cases + +![ghost api](./documentation/ghost-api.jpg) + +:arrow_right: `Dashboard -> Code injection -> Site Footer` + +```html + +``` + +OR - Adding parameters to the search + +```html + +``` + +The search engine that includes Mapache is very powerful, supports almost all languages and you can customize to your liking. + +Read more about the search engine [Read More](https://github.com/HauntedThemes/ghost-search) + +### 6. Twitter widget in the sidebar + +```html + +``` + +## Home Page + +> Mapache - come with 6 Home page with different layout options + +- First back up your `routes` in your ghost settings `Dashboard -> Labs -> Routes -> Download current routes.yml` +- Re-download the Route and edit `routes.yml` line `collections -> template` + - `index` — **Personal** + - `godo-home-blog` — **Blog** + - `godo-home-travel` — **Travel** + - `godo-home-travel-featured` — **Travel With Featured Post** + - `godo-home-fashion-concept` — **Fashion Concept** + +:loudspeaker: If you plan to use (Personal, Blog, Travel, Fashion) for your home page, Rename or delete the file `home.hbs` + +**Personal** - Edit `package.json` and change `"posts_per_page": 10` + +**Blog** - Edit `package.json` and change `"posts_per_page": 10` + +**Fashion** - Edit `package.json` and change `"posts_per_page": 12` + +```yaml +collections: + /: + permalink: /{slug}/ + template: + # - godo-home-blog + # - godo-home-travel + # - godo-home-travel-featured + # - godo-home-fashion-concept + - index +``` + +![mapache demo 01](./documentation/mapache-home-01.jpg) + +![mapache demo 02](./documentation/mapache-home-02.jpg) + +## Post Format + + > Mapache has different templates for post formats. I will mention some of them. + + ![Post Format](./documentation/mapache-post-format.jpg) + + 1. **Post Full Header** — It will have the full title of the post and will include the sidebar. + + 2. **Post Image** — This template will have a very large featured image and the header background will also be transparent and include the sidebar. + + 3. **Post Image Single** — It's similar to post image. The difference is that you won't have a sidebar. + + 4. **Post Single** — Includes the featured image at the top but does not include the sidebar + + 5. **Post Not Image** — The sidebar doesn't have the featured image either. + + 6. **Post Video** — The first video found will move to the top of the page. + - vimeo + - Dailymotion + - Youtube + - Twitch + - kickstarter + +> Add video where convenient. When you change the theme you will not have problems and not have Problem in your AMP Template + +![Post Format 01](./documentation/mapache-post-format-01.jpg) + +![Post Format 02](./documentation/mapache-post-format-02.jpg) + +## Page + +### About Us Page + +> Mapache has a beautifull page for - about us + +- Create a new page +- Choose your favorite url and title +- Template dropdown -> Select `Page About Us` +- You have to add a section of `html` and add the rows and columns. you can guide yourself with the capture of the image +- Publish the page +- To add the page to the navigation + +```html +
+
+ + +
+
+ + + +
+
+
+
+ -Icons generated by [Icomoon](https://icomoon.io/app/#/select) and import `src/scss/selection.json` +
+
+ -## Development +
+
+``` + +![About us](./documentation/mapache-about-us.jpg) + +### Contact Page + +- Create a new page +- Choose your favorite url and title +- Template dropdown -> Select `Page Contact` +- Publish the page +- To add the page to the navigation + +:arrow_right: I am using [FORMSPREE](https://formspree.io/) for sending emails. Please replace with your email. I recommend having an email dedicated especially to FORMSPREE. + +```html +
+ We’re here for you! Please contact us using the form below. +
+ + +
+ + + + +
+``` + +:arrow_right: PHONE - ADDRESS - EMAIL + +```html +
+
+
+
+ +
+

PHONE

+
+

+51 987 659 249

+

+51 01 424 0827

+
+
+ +
+
+ +
+

ADDRESS

+
+

Parque de la Reserva, Jr. Madre de Dios, Cercado de Lima, Perú

+
+
+ +
+
+ +
+

EMAIL

+
+

hello@godofredo.ninja

+

test@godofredo.ninja

+
+
+
+
+``` + +:arrow_right: Google Maps + +```html +
+
+ +
+
+``` + +![contact](./documentation/mapache-contact.jpg) + +### Newsletter Page + +- Create a new page +- Choose your favorite url and title +- Template dropdown -> Select `Archive Newsletter` +- Publish the page +- To add the page to the navigation + +:arrow_right: I am using [Mailchimp](https://mailchimp.com/) for Newsletter. Please replace the form action url + +```html +
+ +
+ +
+ + +
+ No marketing campaigns. No jibber jabber. Unsubscribe anytime. +
+
+

✉️ Nice! Please check your email

+

Click on the link in your inbox to confirm your subscription

+
+
+``` + +:arrow_right: Testimonies Copy the code and paste into an HTML section in Ghost + +```html +
+ +
+ Hello +

Tim Cook

+
CEO, Apple
+
"This is a pretty fantastic newsletter tbh, I definitely recommend it"
+
+ +
+ Hello +

Satya Nadella

+
CEO, Microsoft
+
"Finally, this newsletter is something we can really agree on"
+
+ +
+ Hello +

John O'Nolan

+
CEO, Ghost
+
"I should really get around to organising some quotes one of these days"
+
+ +
+``` + +![newsletter](./documentation/mapache-newsletter.jpg) + +### Authors Page + +- Create a new page +- Choose your favorite url and title +- Template dropdown -> Select `Archive Author` +- Publish the page +- To add the page to the navigation + +![Archive Authors](./documentation/mapache-author.jpg) + +### Tags Page + +> A page will be displayed with all tags sorted from highest to lowest number of articles. + +- Create a new page +- Choose your favorite url and title +- Template dropdown -> Select `Archive Tags` +- Publish the page +- To add the page to the navigation + +![Archive Tags](./documentation/mapache-tags.jpg) + +### Podcast Page + +- Create a new page +- Choose your favorite title +- Use the url `podcast` +- In your articles use the internal tags `#podcast` +- First back up your routes in your ghost settings `Labs -> Routes -> Download current routes.yml` +- Re-download the Route and edit `routes.yml` line `routes` + +```yaml +routes: + /podcast/: + controller: channel + filter: tag:[hash-podcast] + data: + post: page.podcast + limit: 10 + template: godo-podcast +``` +- In an `HTML` block in your ghost editor add this code for your content. + +```html +

The Podcast

+ +

Updates and behind the scenes stories about the world of Ghost. Hosted by Ghost founders John O'Nolan & Hannah Wolfe.

-Mapache uses [Gulp](https://gulpjs.com/) as a build tool and [Yarn](https://yarnpkg.com/) to manage front-end packages. +
-```bash -# clone this repo -$ git clone https://github.com/godofredoninja/Mapache.git + + iTunes Logo + iTunes + -# Use branch Dev -$ git checkout dev + + Pocket Casts Logo + Pocket Casts + -# install the dependencies -$ cd Mapache && yarn + + RSS Icon + RSS + -# run build & livereload task -$ yarn dev +
+``` + +![podcast Page](./documentation/mapache-podcast.jpg) + +### Category + +To create new categories we are going to have to use the [Ghost Routes](https://ghost.org/docs/api/v3/handlebars-themes/routing/routes/). + +#### Category - Defautl + +- We'll call a template `godo-template-category` that I created exclusively for the categories. It is also possible to use other templates, see the templates that this commented. +- First back up your routes in your ghost settings `Labs -> Routes -> Download current routes.yml` +- Re-download the Route and edit `routes.yml` line `routes` + +```yaml +routes: + /Your_Category_Name/: + controller: channel + filter: tag:[add_your_tag] + order: published_at desc + template: + - godo-template-category + # - godo-home-blog + # - godo-home-travel + # - godo-home-travel-featured + # - godo-home-fashion-concept +``` + +#### Category with Header + +We are going to create a category with information such as title and description, as well as an article counter. To get this data to the category will be using the [property data of the routes](https://ghost.org/docs/api/v3/handlebars-themes/routing/routes/#loading-data). + +- Create a new page +- Choose your favorite title for Category +- The `URL` has to be the same as the `data` property +- First back up your routes in your ghost settings `Labs -> Routes -> Download current routes.yml` +- Re-download the Route and edit `routes.yml` line `routes` -# link to ghost themes dir -$ ln -s $PWD path/to/ghost/content/themes/Mapache +```yaml +routes: + /Your_Category_Name/: + controller: channel + order: published_at desc + filter: tag:[add_your_tag] + data: + post: page.ADD_YOUR_URL_OF_PAGE + template: godo-template-category-header +``` + +Look at the image to understand better + +![Category](./documentation/mapache-category.jpg) + +## Members / Subscription + +Subscribers can be enabled via a checkbox on the Labs page :arrow_right: `Dashboard -> Labs -> Enable Memebers` + +:smile: Once enabled, different parts of the theme will appear: -# restart ghost server -$ cd path/to/ghost && ghost restart --development +- Login In and Sign Up buttons in the header. +- Header subscription Dropdown +- Footer subscription form. +- Post Sidebar subscription form. + +In order for the theme to be fully compatible with member subscription flows you have to add the following routes. + +```yaml +routes: + /signup/: members/signup + /signin/: members/signin + /account/: members/account + /membership/: members/membership ``` -### Build commands +To edit plans features, you can edit the `members/membership.hbs` file. + +For more information about Members, connecting Stripe and setting the package price, I highly recommend checking the official [Ghost documentation](https://ghost.org/docs/members/introduction/). + +![podcast Page](./documentation/members.jpg) + +## AMP -- `yarn dev` — Compile assets when file changes are made, start livereload -- `yarn build` — Compile and optimize the files in your assets directory -- `yarn release` — Compile assets for production +— *Mapache has a nice page for **AMP*** + +- Navigation +- links to followers in social media +- Tags +- Related Articles (6 articles) +- Buttons to share the article (Facebook - Twitter - Whatsapp) + +To customize the AMP page [read here](https://github.com/godofredoninja/Hodor-AMP-Ghost) + +## Theme Translation + +**Mapache supports:** + +- `en` — English default language +- `es` — Spanish +- `de` — German - By [Frederik Niedernolte](https://github.com/MaluNoPeleke) +- `ko` — Korean - By [SHGroup](https://github.com/sunghun7511) +- `fr` — French - By [Letroll](https://github.com/letroll) +- `pl` — Polish - By [kacperduras](https://github.com/kacperduras) + +![Publication Language for ghost](./documentation/language.jpg) + +if you want to have in another language you just have to copy `locales>en.json` and rename the file then translate to your favorite language: + +Just enter the [language/locale tag](https://www.w3schools.com/tags/ref_language_codes.asp) of the files to use (e.g.: `fr.json` for French, `zh.json` for Chinese, `ja.json` for Japanese) + +## Change Theme Color + +> It is very easy to customize with your favorite colors. + +![ghost themes colors](./documentation/themes.jpg) + +To change the color of the Mapache theme select one of the theme styles below and copy it into the: + +`Setting -> Code Injection -> Blog Header` + +```html + + + + + + + + + + + + + + + + + +``` -#### Additional commands +### PrismJS code syntax -- `yarn lint:js` — standard, Check for errors in the script -- `yarn lint:scss` — stylelint, Check for errors in the styles -- `yarn lint` — check error in script and styles -- `yarn test` — Check the script errors and styles then check the theme if it is compatible with the latest version of Ghost +Make your code stand out. WIth the PrismJS code highlighter. PrismJS allows you to select which languge you embeded and performs code highlighting according to the language. Neat! -## Documentation +Take a look at the [Prismjs Supported Language List](http://prismjs.com/#languages-list) to find your coding language. -To continue with the configuration [Read](https://github.com/GodoFredoNinja/Mapache) +![Prism JS](./documentation/primsjs.jpg) ### Credits diff --git a/documentation/ghost-api.jpg b/documentation/ghost-api.jpg new file mode 100644 index 00000000..bb3348cb Binary files /dev/null and b/documentation/ghost-api.jpg differ diff --git a/documentation/ghost-settings.jpg b/documentation/ghost-settings.jpg new file mode 100644 index 00000000..a6681475 Binary files /dev/null and b/documentation/ghost-settings.jpg differ diff --git a/documentation/language.jpg b/documentation/language.jpg new file mode 100644 index 00000000..e285932b Binary files /dev/null and b/documentation/language.jpg differ diff --git a/documentation/mapache-about-us.jpg b/documentation/mapache-about-us.jpg new file mode 100644 index 00000000..c453ce37 Binary files /dev/null and b/documentation/mapache-about-us.jpg differ diff --git a/documentation/mapache-author.jpg b/documentation/mapache-author.jpg new file mode 100644 index 00000000..ced5ff37 Binary files /dev/null and b/documentation/mapache-author.jpg differ diff --git a/documentation/mapache-category.jpg b/documentation/mapache-category.jpg new file mode 100644 index 00000000..e1047a92 Binary files /dev/null and b/documentation/mapache-category.jpg differ diff --git a/documentation/mapache-contact.jpg b/documentation/mapache-contact.jpg new file mode 100644 index 00000000..dc3a9a3a Binary files /dev/null and b/documentation/mapache-contact.jpg differ diff --git a/documentation/mapache-home-01.jpg b/documentation/mapache-home-01.jpg new file mode 100644 index 00000000..ec4b4784 Binary files /dev/null and b/documentation/mapache-home-01.jpg differ diff --git a/documentation/mapache-home-02.jpg b/documentation/mapache-home-02.jpg new file mode 100644 index 00000000..66177c7f Binary files /dev/null and b/documentation/mapache-home-02.jpg differ diff --git a/documentation/mapache-newsletter.jpg b/documentation/mapache-newsletter.jpg new file mode 100644 index 00000000..7302c140 Binary files /dev/null and b/documentation/mapache-newsletter.jpg differ diff --git a/documentation/mapache-podcast.jpg b/documentation/mapache-podcast.jpg new file mode 100644 index 00000000..cfd74b12 Binary files /dev/null and b/documentation/mapache-podcast.jpg differ diff --git a/documentation/mapache-post-format-01.jpg b/documentation/mapache-post-format-01.jpg new file mode 100644 index 00000000..96e5ea4a Binary files /dev/null and b/documentation/mapache-post-format-01.jpg differ diff --git a/documentation/mapache-post-format-02.jpg b/documentation/mapache-post-format-02.jpg new file mode 100644 index 00000000..aeb1ecb9 Binary files /dev/null and b/documentation/mapache-post-format-02.jpg differ diff --git a/documentation/mapache-post-format.jpg b/documentation/mapache-post-format.jpg new file mode 100644 index 00000000..b5372a71 Binary files /dev/null and b/documentation/mapache-post-format.jpg differ diff --git a/documentation/mapache-tags.jpg b/documentation/mapache-tags.jpg new file mode 100644 index 00000000..ceaf4bdf Binary files /dev/null and b/documentation/mapache-tags.jpg differ diff --git a/documentation/members.jpg b/documentation/members.jpg new file mode 100644 index 00000000..ffc6e4b0 Binary files /dev/null and b/documentation/members.jpg differ diff --git a/documentation/primsjs.jpg b/documentation/primsjs.jpg new file mode 100644 index 00000000..da13ace9 Binary files /dev/null and b/documentation/primsjs.jpg differ diff --git a/documentation/themes.jpg b/documentation/themes.jpg new file mode 100644 index 00000000..b1177cbf Binary files /dev/null and b/documentation/themes.jpg differ diff --git a/godo-template-category-name.hbs b/godo-template-category-header.hbs similarity index 100% rename from godo-template-category-name.hbs rename to godo-template-category-header.hbs diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index f07be847..00000000 --- a/gulpfile.js +++ /dev/null @@ -1,179 +0,0 @@ -/** - * Module dependencies - */ - -const del = require('del') -const gulp = require('gulp') -const cssnano = require('cssnano') -const mqpacker = require('css-mqpacker') -const autoprefixer = require('autoprefixer') -const gulpLoadPlugins = require('gulp-load-plugins') - -const rename = require('gulp-rename') - -const pxtorem = require('postcss-pxtorem') -const stripCssComments = require('gulp-strip-css-comments') -const replace = require('gulp-replace') - -const browserify = require('browserify') -// const babelify = require('babelify') -const source = require('vinyl-source-stream') -const buffer = require('vinyl-buffer') -// -const merge = require('merge-stream') - -const { name, version, author, license, repository } = require('./package') - -// loade all gulp plugins -const $ = gulpLoadPlugins() - -// environment -const isProduction = process.argv.includes('--production') || process.env.NODE_ENV === 'production' - -// build comments -const comments = `/*! - * ${name} v${version} - * Copyright ${new Date().getFullYear()} ${author.name} <${author.email}> (${repository.url}) - * Licensed under ${license} - */` - -/** - * Private tasks - */ - -const clean = () => { - return del([ - 'assets', - 'partials/styles.hbs', - // 'partials/amp/amp-styles.hbs', - `${name}-v${version}.zip` - ]) -} - -const style = () => { - return gulp.src('src/scss/*.scss') - .pipe($.plumber()) - .pipe($.if(!isProduction, $.sourcemaps.init())) - .pipe($.sass({ outputStyle: 'expanded' }).on('error', $.sass.logError)) - .pipe($.if(isProduction, $.postcss([autoprefixer(), pxtorem(), mqpacker(), cssnano()]))) - .pipe($.if(isProduction, stripCssComments({ preserve: false }))) - .pipe($.if(isProduction, $.header(comments))) - .pipe($.if(!isProduction, $.sourcemaps.write('./map'))) - .pipe(gulp.dest('assets/styles')) - .pipe($.livereload()) -} - -const styleTheme = () => { - return gulp.src('src/scss/theme/*.scss') - .pipe($.plumber()) - .pipe($.sass({ outputStyle: 'expanded' }).on('error', $.sass.logError)) - .pipe($.postcss([autoprefixer(), mqpacker(), cssnano()])) - .pipe(stripCssComments({ preserve: false })) - .pipe(gulp.dest('assets/styles/theme')) -} - -const script = () => { - const files = ['main', 'search', 'pagination', 'prismjs'] - - return merge(files.map(function (file) { - return browserify({ - basedir: '.', - debug: true, - entries: `./src/js/${file}.js`, - cache: {}, - packageCache: {} - }).transform('babelify', { - presets: ['@babel/env'], - plugins: ['@babel/plugin-transform-runtime'] - }) - .bundle() - .pipe(source(`${file}.js`)) - .pipe($.plumber()) - .pipe(buffer()) - .pipe($.if(!isProduction, $.sourcemaps.init({ loadMaps: true }))) - .pipe($.if(isProduction, $.uglify())) - .pipe($.if(isProduction, $.header(comments))) - .pipe($.if(!isProduction, $.sourcemaps.write('./map'))) - .pipe(gulp.dest('assets/scripts')) - .pipe($.livereload()) - })) -} - -// const copyFonts = () => { -// return gulp.src('src/fonts/**/*.{ttf,woff,eof,svg}') -// .pipe(gulp.dest('assets/fonts')) -// } - -const image = () => { - return gulp.src('src/img/**/*.*') - .pipe($.plumber()) - .pipe($.if(isProduction, $.imagemin())) - .pipe(gulp.dest('assets/images')) - .pipe($.livereload()) -} - -const archive = () => { - const source = [ - 'assets/**', - 'locales/*.json', - '**/*.hbs', - '!node_modules', '!node_modules/**', - '!src', '!src/**', - '!documentation', '!documentation/**', - 'LICENSE', - 'package.json', - 'README.md' - ] - - return gulp.src(source, { base: '.' }) - .pipe($.plumber()) - .pipe($.zip(`${name}-v${version}.zip`)) - .pipe(gulp.dest('.')) -} - -const copyPrismJs = () => { - return gulp.src('node_modules/prismjs/components/*.min.js') - .pipe($.plumber()) - .pipe(gulp.dest('assets/scripts/components')) -} - -const copyMainStyle = () => { - return gulp.src('assets/styles/main.css') - .pipe($.plumber()) - .pipe(rename('styles.hbs')) - .pipe(gulp.dest('partials')) -} - -const copyAmpStyle = () => { - return gulp.src('assets/styles/amp.css') - .pipe($.plumber()) - .pipe(replace('@charset "UTF-8";', '')) - .pipe(stripCssComments({ preserve: false })) - .pipe($.postcss([cssnano()])) - .pipe(rename('amp-styles.hbs')) - .pipe(gulp.dest('partials/amp')) -} - -const watch = () => { - $.livereload.listen() - gulp.watch('src/scss/**', style) - // gulp.watch('src/scss/theme/**', styleTheme) - gulp.watch('src/js/**', script) - gulp.watch('src/img/**/*.*', image) - gulp.watch('**/*.hbs').on('change', p => $.livereload.changed(p)) -} - -// const compile = gulp.parallel(style, script, copyFonts, image) -const compile = gulp.parallel(style, script, image) - -/** - * Public tasks - */ - -const build = gulp.series(clean, compile) - -const release = gulp.series(build, styleTheme, copyMainStyle, copyAmpStyle, copyPrismJs, archive) - -const develop = gulp.series(build, watch) - -module.exports = { build, release, develop } diff --git a/mapache-godofredoninja-v3.1.0.zip b/mapache-godofredoninja-v3.1.0.zip deleted file mode 100644 index 5dec8907..00000000 Binary files a/mapache-godofredoninja-v3.1.0.zip and /dev/null differ diff --git a/package.json b/package.json index b65e52dc..d94ff3f0 100644 --- a/package.json +++ b/package.json @@ -57,64 +57,5 @@ "width": 2000 } } - }, - "browserslist": [ - "defaults" - ], - "scripts": { - "lint:js": "standard src/js/**/*.js gulpfile.js", - "lint:scss": "stylelint \"src/scss/**/*.{css,sass,scss,sss,less}\"", - "lint": "yarn lint:js && yarn lint:scss", - "test": "yarn lint && gscan .", - "build": "gulp build", - "release": "gulp release --production", - "dev": "gulp develop" - }, - "cssnano": { - "preset": "advanced" - }, - "devDependencies": { - "@babel/core": "^7.6.0", - "@babel/plugin-transform-runtime": "^7.6.0", - "@babel/preset-env": "^7.6.0", - "@babel/runtime": "^7.6.0", - "autoprefixer": "^9.6.1", - "babelify": "^10.0.0", - "browserify": "^16.5.0", - "css-mqpacker": "^7.0.0", - "cssnano": "^4.1.10", - "cssnano-preset-advanced": "^4.0.7", - "del": "^5.1.0", - "gscan": "^3.1.1", - "gulp": "^4.0.2", - "gulp-babel": "^8.0.0", - "gulp-header": "^2.0.9", - "gulp-if": "^3.0.0", - "gulp-imagemin": "^6.1.0", - "gulp-livereload": "^4.0.1", - "gulp-load-plugins": "^2.0.1", - "gulp-plumber": "^1.2.1", - "gulp-postcss": "^8.0.0", - "gulp-rename": "^1.4.0", - "gulp-replace": "^1.0.0", - "gulp-sass": "^4.0.2", - "gulp-sourcemaps": "^2.6.5", - "gulp-strip-css-comments": "^2.0.0", - "gulp-uglify": "^3.0.2", - "gulp-zip": "^5.0.0", - "merge-stream": "^2.0.0", - "postcss-pxtorem": "^4.0.1", - "standard": "^14.1.0", - "stylelint": "^10.1.0", - "stylelint-config-standard": "^18.3.0", - "vinyl-buffer": "^1.0.1", - "vinyl-source-stream": "^2.0.0" - }, - "dependencies": { - "fuzzysort": "^1.1.4", - "lazysizes": "^5.1.0", - "lightense-images": "^1.0.8", - "normalize.css": "^8.0.1", - "prismjs": "^1.15.0" } } diff --git a/routes.yaml b/routes.yaml new file mode 100644 index 00000000..46da7676 --- /dev/null +++ b/routes.yaml @@ -0,0 +1,73 @@ +routes: + /signup/: members/signup + /signin/: members/signin + /account/: members/account + /membership/: members/membership + + /personal/: + controller: channel + order: published_at desc + template: index + + /category/: + controller: channel + filter: tag:[photograpy] + order: published_at desc + template: godo-template-category + + /category-header/: + controller: channel + order: published_at desc + filter: tag:[photograpy] + data: + post: page.category-header + template: godo-template-category-header + + /travel/: + controller: channel + order: published_at desc + filter: tag:[travel] + data: + post: page.demo-grid + template: godo-home-travel + + /travel-featured/: + controller: channel + filter: tag:[travel] + order: published_at desc + template: godo-home-travel-featured + + /blog/: + controller: channel + filter: tag:[hash-blog] # -> #blog internal tag + order: published_at desc + template: godo-home-blog + limit: 10 + + /fashion/: + controller: channel + filter: tag:[fashion] + order: published_at desc + template: godo-home-fashion-concept + limit: 12 + + /podcast/: + controller: channel + filter: tag:[hash-podcast] # -> #podcast internal tah + data: + post: page.podcast + limit: 10 + template: godo-podcast + +collections: + /: + permalink: /{slug}/ + template: + # - godo-home-blog + # - godo-home-travel + # - godo-home-travel-featured + # - godo-home-fashion-concept + - index +taxonomies: + tag: /tag/{slug}/ + author: /author/{slug}/ diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/fonts/mapache.eot b/src/fonts/mapache.eot deleted file mode 100644 index 0b1fa780..00000000 Binary files a/src/fonts/mapache.eot and /dev/null differ diff --git a/src/fonts/mapache.svg b/src/fonts/mapache.svg deleted file mode 100644 index a1ead706..00000000 --- a/src/fonts/mapache.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - -Generated by IcoMoon - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/fonts/mapache.ttf b/src/fonts/mapache.ttf deleted file mode 100644 index 33c5a36c..00000000 Binary files a/src/fonts/mapache.ttf and /dev/null differ diff --git a/src/fonts/mapache.woff b/src/fonts/mapache.woff deleted file mode 100644 index a9e12d54..00000000 Binary files a/src/fonts/mapache.woff and /dev/null differ diff --git a/src/icons/symbol-defs.svg b/src/icons/symbol-defs.svg deleted file mode 100644 index dc834f3a..00000000 --- a/src/icons/symbol-defs.svg +++ /dev/null @@ -1,97 +0,0 @@ - diff --git a/src/img/.gitkeep b/src/img/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/img/avatar.png b/src/img/avatar.png deleted file mode 100644 index 40e0d822..00000000 Binary files a/src/img/avatar.png and /dev/null differ diff --git a/src/img/contact-icons.svg b/src/img/contact-icons.svg deleted file mode 100644 index 052e2bb7..00000000 --- a/src/img/contact-icons.svg +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/img/contact-stain.jpg b/src/img/contact-stain.jpg deleted file mode 100644 index 3462892b..00000000 Binary files a/src/img/contact-stain.jpg and /dev/null differ diff --git a/src/img/crystal-mountain.png b/src/img/crystal-mountain.png deleted file mode 100644 index 41563b94..00000000 Binary files a/src/img/crystal-mountain.png and /dev/null differ diff --git a/src/img/crystal-mountain@2x.png b/src/img/crystal-mountain@2x.png deleted file mode 100644 index 29ced2f5..00000000 Binary files a/src/img/crystal-mountain@2x.png and /dev/null differ diff --git a/src/img/icon-itunes.png b/src/img/icon-itunes.png deleted file mode 100644 index abd1c784..00000000 Binary files a/src/img/icon-itunes.png and /dev/null differ diff --git a/src/img/icon-pocketcasts.png b/src/img/icon-pocketcasts.png deleted file mode 100644 index 1b76c41e..00000000 Binary files a/src/img/icon-pocketcasts.png and /dev/null differ diff --git a/src/img/icon-rss.png b/src/img/icon-rss.png deleted file mode 100644 index 4a572dc4..00000000 Binary files a/src/img/icon-rss.png and /dev/null differ diff --git a/src/img/not-image.jpg b/src/img/not-image.jpg deleted file mode 100644 index d5b81955..00000000 Binary files a/src/img/not-image.jpg and /dev/null differ diff --git a/src/img/not-image.png b/src/img/not-image.png deleted file mode 100644 index 9435d8e4..00000000 Binary files a/src/img/not-image.png and /dev/null differ diff --git a/src/img/tag-bg.svg b/src/img/tag-bg.svg deleted file mode 100644 index 3728cfb7..00000000 --- a/src/img/tag-bg.svg +++ /dev/null @@ -1 +0,0 @@ -bg-api \ No newline at end of file diff --git a/src/js/app/app.fetch.js b/src/js/app/app.fetch.js deleted file mode 100644 index b1721b03..00000000 --- a/src/js/app/app.fetch.js +++ /dev/null @@ -1,7 +0,0 @@ -/* global fetch */ -export default async (url) => { - const rsp = await fetch(url) - const data = await rsp.json() - - return data -} diff --git a/src/js/app/app.footer.links.js b/src/js/app/app.footer.links.js deleted file mode 100644 index fdbacd93..00000000 --- a/src/js/app/app.footer.links.js +++ /dev/null @@ -1,15 +0,0 @@ -import { qs, urlRegexp } from './app.variables' - -export default links => { - const box = qs('.js-footer-menu') - box.classList.remove('u-hide') - - Object.entries(links).forEach(([name, url]) => { - if (name !== 'string' && !urlRegexp.test(url)) return - - const link = document.createElement('li') - link.innerHTML = `${name}` - - box.appendChild(link) - }) -} diff --git a/src/js/app/app.instagram.js b/src/js/app/app.instagram.js deleted file mode 100644 index eed9b7eb..00000000 --- a/src/js/app/app.instagram.js +++ /dev/null @@ -1,53 +0,0 @@ -import fetchQuote from './app.fetch' - -const templateInstagram = data => - `
- - -
- ${data.likes.count} - ${data.comments.count} -
- -
` - -// Shuffle Array -const shuffleArray = arr => arr - .map(a => [Math.random(), a]) - .sort((a, b) => a[0] - b[0]) - .map(a => a[1]) - -const displayInstagram = (res, user, instagramBox) => { - const shuffle = shuffleArray(res.data) - const sf = shuffle.slice(0, 6) - - const link = document.createElement('a') - link.classList = 'instagram-btn button button--large button--dark' - link.href = `https://www.instagram.com/${user}` - link.target = '_blank' - link.rel = 'noopener noreferrer' - link.innerHTML = ` ${user}` - - const box = document.createElement('div') - box.classList = 'row no-gutters' - - sf.map(img => { - const images = templateInstagram(img) - box.innerHTML += images - }) - - instagramBox.classList.remove('u-hide') - instagramBox.appendChild(box) - instagramBox.appendChild(link) -} - -export default async (instagramFeed, instagramBox) => { - const url = `https://api.instagram.com/v1/users/${instagramFeed.userId}/media/recent/?access_token=${instagramFeed.token}&count=10&callback=?` - - try { - const result = await fetchQuote(url) - displayInstagram(result, instagramFeed.userName, instagramBox) - } catch (err) { - instagramBox.remove() - } -} diff --git a/src/js/app/app.load-style-script.js b/src/js/app/app.load-style-script.js deleted file mode 100644 index bd328a68..00000000 --- a/src/js/app/app.load-style-script.js +++ /dev/null @@ -1,14 +0,0 @@ -export function loadStyle (href) { - var linkElement = document.createElement('link') - linkElement.rel = 'stylesheet' - linkElement.href = href - document.head.appendChild(linkElement) -} - -export function loadScript (src, callback) { - var scriptElement = document.createElement('script') - scriptElement.src = src - scriptElement.defer = true - callback && scriptElement.addEventListener('load', callback) - document.body.appendChild(scriptElement) -} diff --git a/src/js/app/app.search.js b/src/js/app/app.search.js deleted file mode 100644 index ce522b76..00000000 --- a/src/js/app/app.search.js +++ /dev/null @@ -1,228 +0,0 @@ -/* global GhostContentAPI siteUrl */ - -/** - * Thanks => https://github.com/HauntedThemes/ghost-search - */ - -// import fuzzysort from 'fuzzysort' -const fuzzysort = require('fuzzysort') - -class GhostSearch { - constructor (args) { - this.check = false - - const defaults = { - url: siteUrl, - key: '', - version: 'v2', - input: '#search-field', - results: '#search-results', - button: '', - defaultValue: '', - template: result => `${result.title}`, - trigger: 'focus', - options: { - keys: [ - 'title' - ], - limit: 10, - threshold: -3500, - allowTypo: false - }, - api: { - resource: 'posts', - parameters: { - limit: 'all', - fields: ['title', 'slug'], - filter: '', - include: '', - order: '', - formats: '', - page: '' - } - }, - on: { - beforeDisplay: function () { }, - afterDisplay: function (results) { }, //eslint-disable-line - beforeFetch: function () { }, - afterFetch: function (results) { }, //eslint-disable-line - } - } - - const merged = this.mergeDeep(defaults, args) - Object.assign(this, merged) - this.init() - } - - mergeDeep (target, source) { - if ((target && typeof target === 'object' && !Array.isArray(target) && target !== null) && (source && typeof source === 'object' && !Array.isArray(source) && source !== null)) { - Object.keys(source).forEach(key => { - if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key]) && source[key] !== null) { - if (!target[key]) Object.assign(target, { [key]: {} }) - this.mergeDeep(target[key], source[key]) - } else { - Object.assign(target, { [key]: source[key] }) - } - }) - } - return target - } - - fetch () { - this.on.beforeFetch() - - const ghostAPI = new GhostContentAPI({ - url: this.url, - key: this.key, - version: this.version - }) - - const browse = {} - const parameters = this.api.parameters - - for (var key in parameters) { - if (parameters[key] !== '') { - browse[key] = parameters[key] - } - } - - // browse.limit = 'all' - - ghostAPI[this.api.resource] - .browse(browse) - .then((data) => { - this.search(data) - }) - .catch((err) => { - console.error(err) - }) - } - - createElementFromHTML (htmlString) { - var div = document.createElement('div') - div.innerHTML = htmlString.trim() - return div.firstChild - } - - displayResults (data) { - if (document.querySelectorAll(this.results)[0].firstChild !== null && document.querySelectorAll(this.results)[0].firstChild !== '') { - while (document.querySelectorAll(this.results)[0].firstChild) { - document.querySelectorAll(this.results)[0].removeChild(document.querySelectorAll(this.results)[0].firstChild) - } - } - - let inputValue = document.querySelectorAll(this.input)[0].value - if (this.defaultValue !== '') { - inputValue = this.defaultValue - } - const results = fuzzysort.go(inputValue, data, { - keys: this.options.keys, - limit: this.options.limit, - allowTypo: this.options.allowTypo, - threshold: this.options.threshold - }) - for (const key in results) { - if (key < results.length) { - document.querySelectorAll(this.results)[0].appendChild(this.createElementFromHTML(this.template(results[key].obj))) - } - } - - this.on.afterDisplay(results) - this.defaultValue = '' - } - - search (data) { - this.on.afterFetch(data) - this.check = true - - if (this.defaultValue !== '') { - this.on.beforeDisplay() - this.displayResults(data) - } - - if (this.button !== '') { - const button = document.querySelectorAll(this.button)[0] - if (button.tagName === 'INPUT' && button.type === 'submit') { - button.closest('form').addEventListener('submit', e => { - e.preventDefault() - }) - } - button.addEventListener('click', e => { - e.preventDefault() - this.on.beforeDisplay() - this.displayResults(data) - }) - } else { - document.querySelectorAll(this.input)[0].addEventListener('keyup', () => { - this.on.beforeDisplay() - this.displayResults(data) - }) - } - } - - checkArgs () { - if (!document.querySelectorAll(this.input).length) { - console.log('Input not found.') - return false - } - if (!document.querySelectorAll(this.results).length) { - console.log('Results not found.') - return false - } - if (this.button !== '') { - if (!document.querySelectorAll(this.button).length) { - console.log('Button not found.') - return false - } - } - if (this.url === '') { - console.log('Content API Client Library url missing. Please set the url. Must not end in a trailing slash.') - return false - } - if (this.key === '') { - console.log('Content API Client Library key missing. Please set the key. Hex string copied from the "Integrations" screen in Ghost Admin.') - return false - } - return true - } - - validate () { - if (!this.checkArgs()) { - return false - } - - return true - } - - init () { - if (!this.validate()) { - return - } - - if (this.defaultValue !== '') { - document.querySelectorAll(this.input)[0].value = this.defaultValue - window.onload = () => { - if (!this.check) { - this.fetch() - } - } - } - - if (this.trigger === 'focus') { - document.querySelectorAll(this.input)[0].addEventListener('focus', () => { - if (!this.check) { - this.fetch() - } - }) - } else if (this.trigger === 'load') { - window.onload = () => { - if (!this.check) { - this.fetch() - } - } - } - } -} - -/* Export Class */ -module.exports = GhostSearch diff --git a/src/js/app/app.social-media.js b/src/js/app/app.social-media.js deleted file mode 100644 index ba71e669..00000000 --- a/src/js/app/app.social-media.js +++ /dev/null @@ -1,22 +0,0 @@ -import { qsa, urlRegexp } from './app.variables' - -export default socialMedia => { - const createElement = box => { - Object.entries(socialMedia).forEach(([name, urlTitle]) => { - if (urlTitle[0] !== 'string' && !urlRegexp.test(urlTitle[0])) return - - const link = document.createElement('a') - link.href = urlTitle[0] - link.title = urlTitle[1] - // link.classList = `i-${name}` - link.target = '_blank' - link.rel = 'noopener noreferrer' - link.innerHTML = `` - - box.appendChild(link) - }) - } - - // Append Social Media - qsa('.js-social-media').forEach(el => createElement(el)) -} diff --git a/src/js/app/app.variables.js b/src/js/app/app.variables.js deleted file mode 100644 index e9c259a2..00000000 --- a/src/js/app/app.variables.js +++ /dev/null @@ -1,14 +0,0 @@ -export const qs = document.querySelector.bind(document) -export const qsa = document.querySelectorAll.bind(document) - -export const urlRegexp = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \+\.-]*)*\/?$/ //eslint-disable-line - -/* Iframe SRC video */ -export const iframeVideo = [ - 'iframe[src*="player.vimeo.com"]', - 'iframe[src*="dailymotion.com"]', - 'iframe[src*="youtube.com"]', - 'iframe[src*="youtube-nocookie.com"]', - 'iframe[src*="player.twitch.tv"]', - 'iframe[src*="kickstarter.com"][src*="video.html"]' -] diff --git a/src/js/main.js b/src/js/main.js deleted file mode 100644 index 2ee40b63..00000000 --- a/src/js/main.js +++ /dev/null @@ -1,27 +0,0 @@ -// import external dependencies -import 'lazysizes' - -// import local dependencies -import Router from './util/Router' -import common from './routes/common' -import isArticle from './routes/post' -import isArticleSingle from './routes/post-single' -import isVideo from './routes/video' - -/** Populate Router instance with DOM routes */ -const routes = new Router({ - // All pages - common, - - // article - isArticle, - - // video post format - isVideo, - - // Article Single - isArticleSingle -}) - -// Load Events -window.addEventListener('load', routes.loadEvents(), false) diff --git a/src/js/pagination.js b/src/js/pagination.js deleted file mode 100644 index 6694074c..00000000 --- a/src/js/pagination.js +++ /dev/null @@ -1,100 +0,0 @@ -((window, document) => { - // Next link Element - const nextElement = document.querySelector('link[rel=next]') - if (!nextElement) return - - // Post Feed element - const feedElement = document.querySelector('.story-feed') - if (!feedElement) return - - const footer = document.querySelector('.footer') - - const buffer = 300 - - let ticking = false - let loading = false - - let lastScrollY = window.scrollY - let lastWindowHeight = window.innerHeight - let lastDocumentHeight = document.documentElement.scrollHeight - - function onPageLoad () { - if (this.status === 404) { - window.removeEventListener('scroll', onScroll) - window.removeEventListener('resize', onResize) - return - } - - // Add Loading bar - document.body.classList.add('is-loading') - - // append contents - const postElements = this.response.querySelector('.story-feed-content') - feedElement.appendChild(postElements) - - // push state - window.history.pushState(null, document.title, nextElement.href) - - // Change Title - document.title = this.response.title - - // set next link - const resNextElement = this.response.querySelector('link[rel=next]') - if (resNextElement) { - nextElement.href = resNextElement.href - } else { - window.removeEventListener('scroll', onScroll) - window.removeEventListener('resize', onResize) - } - - // Remove Loanding bar - setTimeout(() => document.body.classList.remove('is-loading'), 4000) - - // sync status - lastDocumentHeight = document.documentElement.scrollHeight - ticking = false - loading = false - } - - function onUpdate () { - // Retur if already loading - if (loading) return - - // return if not scroll to the bottom - if (lastScrollY + lastWindowHeight <= lastDocumentHeight - (buffer + footer.clientHeight)) { - ticking = false - return - } - - loading = true - - const xhr = new window.XMLHttpRequest() - xhr.responseType = 'document' - - xhr.addEventListener('load', onPageLoad) - - xhr.open('GET', nextElement.href) - xhr.send(null) - } - - function requestTick () { - ticking || window.requestAnimationFrame(onUpdate) - ticking = true - } - - function onScroll () { - lastScrollY = window.scrollY - requestTick() - } - - function onResize () { - lastWindowHeight = window.innerHeight - lastDocumentHeight = document.documentElement.scrollHeight - requestTick() - } - - window.addEventListener('scroll', onScroll, { passive: true }) - window.addEventListener('resize', onResize) - - requestTick() -})(window, document) diff --git a/src/js/prismjs.js b/src/js/prismjs.js deleted file mode 100644 index d8fc1636..00000000 --- a/src/js/prismjs.js +++ /dev/null @@ -1,8 +0,0 @@ -/* global sitePrismJscomponents Prism */ -import 'prismjs' -import 'prismjs/plugins/autoloader/prism-autoloader' -// import 'prismjs/plugins/line-numbers/prism-line-numbers' - -if (typeof sitePrismJscomponents !== 'undefined') { - Prism.plugins.autoloader.languages_path = sitePrismJscomponents -} diff --git a/src/js/routes/common.js b/src/js/routes/common.js deleted file mode 100644 index c110e88a..00000000 --- a/src/js/routes/common.js +++ /dev/null @@ -1,157 +0,0 @@ -/* global twitterFeed followSocialMedia footerLinks siteSearch localStorage */ - -import socialMedia from '../app/app.social-media' -import mapacheFooterLinks from '../app/app.footer.links' -import { loadScript } from '../app/app.load-style-script' - -// querySelector and document.querySelectorAll -import { qs, qsa } from '../app/app.variables' - -export default { - init () { - // Change title HOME PAGE - // ----------------------------------------------------------------------------- - // if (typeof homeTitle !== 'undefined' && qs('#home-title')) { - // qs('#home-title').textContent = homeTitle - // } - - // change BTN ( Name - URL) in Home Page - // ----------------------------------------------------------------------------- - // const homeButtonBox = qs('#home-button') - // if (typeof homeBtn === 'object' && homeBtn !== null && homeButtonBox) { - // homeButtonBox.href = homeBtn.url - // homeButtonBox.textContent = homeBtn.title - // } - - // Social Media - // ----------------------------------------------------------------------------- - if (typeof followSocialMedia === 'object' && followSocialMedia !== null) { - socialMedia(followSocialMedia) - } - - /* Footer Links */ - if (typeof footerLinks === 'object' && footerLinks !== null) { - mapacheFooterLinks(footerLinks) - } - }, // end Init - - finalize () { - // Active Dark Mode - // ----------------------------------------------------------------------------- - qsa('.js-dark-mode').forEach(item => item.addEventListener('click', el => { - el.preventDefault() - - const dd = document.documentElement - const dataTheme = dd.getAttribute('data-theme') - - if (dataTheme === 'light') { - dd.setAttribute('data-theme', 'dark') - localStorage.setItem('selected-theme', 'dark') - } else { - dd.setAttribute('data-theme', 'light') - localStorage.setItem('selected-theme', 'light') - } - })) - - // Toggle Menu - // ----------------------------------------------------------------------------- - qs('.js-menu-toggle').addEventListener('click', e => { - e.preventDefault() - document.body.classList.toggle('has-menu') - }) - - // Scroll Button Home Page - // ----------------------------------------------------------------------------- - const homeButtonScroll = qs('.js-scrcoll-home') - - if (homeButtonScroll) { - homeButtonScroll.addEventListener('click', e => { - e.preventDefault() - - const homeCoverHeight = qs('#hm-cover').offsetHeight - 60 - - if (window) { - try { - // The New API. - window.scroll({ - top: homeCoverHeight, - left: 0, - behavior: 'smooth' - }) - } catch (error) { - // For older browsers. - window.scrollTo(0, homeCoverHeight) - } - } - // - }) - } - - // Scroll Back to top animate - // ----------------------------------------------------------------------------- - qs('.js-back-to-top').addEventListener('click', e => { - e.preventDefault() - - if (window) { - try { - // The New API. - window.scroll({ - top: 0, - left: 0, - behavior: 'smooth' - }) - } catch (error) { - // For older browsers. - window.scrollTo(0, 0) - } - } - }) - - // Twitter Widget - // ----------------------------------------------------------------------------- - const twitterFeedBox = qs('.js-twitter-feed') - if (typeof twitterFeed !== 'undefined' && twitterFeedBox) { - twitterFeedBox.classList.remove('u-hide') - - const twitterBox = document.createElement('div') - twitterBox.innerHTML = `Tweets by ${twitterFeed}` - - twitterFeedBox.appendChild(twitterBox) - - loadScript('https://platform.twitter.com/widgets.js') - } - - // Load Search - // ----------------------------------------------------------------------------- - if (typeof searchSettings !== 'undefined' && typeof siteSearch !== 'undefined') { - loadScript('https://unpkg.com/@tryghost/content-api@1.3.3/umd/content-api.min.js', () => { - loadScript(siteSearch) - }) - } - - // Scrolll - // ----------------------------------------------------------------------------- - const backToTop = qs('.back-to-top') - const domBody = document.body - const hasCover = domBody.closest('.has-cover') - - const mapacheScroll = () => { - const scrollY = window.scrollY - - // Show Button for - if (backToTop && scrollY > 500) { - backToTop.classList.add('to-top') - } else { - backToTop.classList.remove('to-top') - } - - // show background and transparency - // in header when page have cover image - if (hasCover) { - scrollY >= 60 ? domBody.classList.remove('is-transparency') : domBody.classList.add('is-transparency') - } - } - - window.addEventListener('scroll', mapacheScroll) - } -} diff --git a/src/js/routes/post-single.js b/src/js/routes/post-single.js deleted file mode 100644 index 20aaca41..00000000 --- a/src/js/routes/post-single.js +++ /dev/null @@ -1,40 +0,0 @@ -import { qs, qsa } from '../app/app.variables' - -export default { - init () { - const shareBox = qs('.post-share-inner') - - if (!shareBox) return - - const intersectsSel = ['.kg-width-full', '.kg-width-wide'] - const observe = [].slice.call(qsa(intersectsSel.join(','))) - - if (!observe.length) return - - // Intersect share box with image => return true or false - // ----------------------------------------------------------------------------- - const intersects = (el1, el2) => { - const rect1 = el1.getBoundingClientRect() - const rect2 = el2.getBoundingClientRect() - - return !(rect1.top > rect2.bottom || rect1.right < rect2.left || rect1.bottom < rect2.top || rect1.left > rect2.right) - } - - // the floating fade sharing in the sidebar - // ----------------------------------------------------------------------------- - const shareFade = () => { - let isHidden = false - - for (const i in observe) { - if (intersects(shareBox, observe[i])) { - isHidden = true - break - } - } - - isHidden ? shareBox.classList.add('is-hidden') : shareBox.classList.remove('is-hidden') - } - - window.addEventListener('scroll', shareFade) - } -} diff --git a/src/js/routes/post.js b/src/js/routes/post.js deleted file mode 100644 index 830a9294..00000000 --- a/src/js/routes/post.js +++ /dev/null @@ -1,105 +0,0 @@ -/* global instagramFeed sitePrismJs */ - -import { loadStyle, loadScript } from '../app/app.load-style-script' -import instagram from '../app/app.instagram' - -// querySelector and document.querySelectorAll -import { qs, qsa, iframeVideo } from '../app/app.variables' - -export default { - init () { - // Video Responsive - // ----------------------------------------------------------------------------- - const arrIframe = qsa(iframeVideo.join(',')) - if (arrIframe.length) { - arrIframe.forEach(el => { - const box = document.createElement('div') - box.className = 'video-responsive' - el.parentNode.insertBefore(box, el) - box.appendChild(el) - }) - } - }, - finalize () { - // gallery - // ----------------------------------------------------------------------------- - const images = qsa('.kg-gallery-image img') - - images.forEach(image => { - const container = image.closest('.kg-gallery-image') - const width = image.attributes.width.value - const height = image.attributes.height.value - const ratio = width / height - container.style.flex = ratio + ' 1 0%' - }) - - // Set Atribute (data-src - data-sub-html) - // ----------------------------------------------------------------------------- - qsa('.js-post-content img').forEach(el => { - if (el.closest('a')) return - - el.classList.add('mapache-light-gallery') - el.setAttribute('data-src', el.src) - - const nextElement = el.nextSibling - - if (nextElement !== null && nextElement.nodeName.toLowerCase() === 'figcaption') { - el.setAttribute('data-sub-html', nextElement.innerHTML) - } - }) - - // Lightgallery - // ----------------------------------------------------------------------------- - const lightGallery = qsa('.mapache-light-gallery') - - if (lightGallery.length) { - loadStyle('https://unpkg.com/lightgallery.js/dist/css/lightgallery.min.css') - - loadScript('https://cdn.jsdelivr.net/npm/lightgallery.js@1.1.3/dist/js/lightgallery.min.js', () => { - loadScript('https://unpkg.com/lg-zoom.js@1.0.1/dist/lg-zoom.min.js') - - window.lightGallery(qs('.js-post-content'), { selector: '.mapache-light-gallery' }) - }) - } - - // Instagram Feed - // ----------------------------------------------------------------------------- - const instagramBox = qs('.js-instagram') - if (typeof instagramFeed === 'object' && instagramFeed !== null && instagramBox) { - instagram(instagramFeed, instagramBox) - } - - // highlight prismjs - // ----------------------------------------------------------------------------- - if (qsa('code[class*="language-"]').length && typeof sitePrismJs !== 'undefined') { - // line-numbers - // qsa('code[class*="language-"]').forEach(item => item.classList.add('line-numbers')) - - loadScript(sitePrismJs) - } - - // Post Share - // ----------------------------------------------------------------------------- - qsa('.js-share').forEach(item => item.addEventListener('click', e => { - const width = 640 - const height = 400 - const win = window - const doc = document - - const dualScreenLeft = win.screenLeft !== undefined ? win.screenLeft : win.screenX - const dualScreenTop = win.screenTop !== undefined ? win.screenTop : win.screenY - - const containerWidth = win.innerWidth ? win.innerWidth : doc.documentElement.clientWidth ? doc.documentElement.clientWidth : win.screen.width - const containerHeight = win.innerHeight ? win.innerHeight : doc.documentElement.clientHeight ? doc.documentElement.clientHeight : win.screen.height - - const left = ((containerWidth / 2) - (width / 2)) + dualScreenLeft - const top = ((containerHeight / 2) - (height / 2)) + dualScreenTop - const newWindow = win.open(e.currentTarget.href, 'share-window', `scrollbars=yes, width=${width}, height=${height}, top=${top}, left=${left}`) - - // Puts focus on the newWindow - win.focus && newWindow.focus() - - e.preventDefault() - })) - } // end finalize -} diff --git a/src/js/routes/video.js b/src/js/routes/video.js deleted file mode 100644 index ad99a701..00000000 --- a/src/js/routes/video.js +++ /dev/null @@ -1,41 +0,0 @@ -import { qs, iframeVideo } from '../app/app.variables' - -export default { - init () { - const firstVideo = qs('.js-post-content').querySelectorAll(iframeVideo.join(','))[0] - - if (!firstVideo) return - - const videoMedia = qs('.cc-video-embed') - const documentBoby = document.body - - // Append Video in Top of Article - // ----------------------------------------------------------------------------- - if (firstVideo.closest('.kg-embed-card')) { - videoMedia.appendChild(firstVideo.closest('.kg-embed-card')) - } else { - videoMedia.appendChild(firstVideo.parentNode) - } - - // Video fixed - // ----------------------------------------------------------------------------- - const videoMediaScroll = () => { - if (window.scrollY > (qs('.js-video-post').offsetTop) - 100) { - documentBoby.classList.add('has-video-fixed') - } else { - documentBoby.classList.remove('has-video-fixed') - } - } - - if (documentBoby.clientWidth > 1200) { - window.addEventListener('scroll', videoMediaScroll) - } - - // Close video fixed - // ----------------------------------------------------------------------------- - qs('.cc-video-close').addEventListener('click', () => { - documentBoby.classList.remove('has-video-fixed') - window.removeEventListener('scroll', videoMediaScroll) - }) - } -} diff --git a/src/js/search.js b/src/js/search.js deleted file mode 100644 index fcb16102..00000000 --- a/src/js/search.js +++ /dev/null @@ -1,177 +0,0 @@ -/* global searchSettings */ - -import GhostSearch from './app/app.search' - -((window, document) => { - const qs = document.querySelector.bind(document) - const qsa = document.querySelectorAll.bind(document) - - const domBody = document.body - const searchInput = qs('#search-field') - const searchResults = qs('#search-results') - const searchMessage = qs('.js-search-message') - - let searchResultsHeight = { - outer: 0, - scroll: 0 - } - - // SHow icon search in header - qs('.js-search-open').classList.remove('u-hide') - - // Variable for search - // ----------------------------------------------------------------------------- - const mySearchSettings = { - on: { - beforeFetch: () => domBody.classList.add('is-loading'), - afterFetch: () => setTimeout(() => { domBody.classList.remove('is-loading') }, 4000), - afterDisplay: results => { - searchResultActive() - - searchResultsHeight = { - outer: searchResults.offsetHeight, - scroll: searchResults.scrollHeight - } - - // Show message if dont have results - if (results.total === 0 && searchInput.value !== '') { - searchMessage.classList.remove('u-hide') - } else { - searchMessage.classList.add('u-hide') - } - } - } - } - - // join user settings - Object.assign(mySearchSettings, searchSettings) - - // when the Enter key is pressed - // ----------------------------------------------------------------------------- - function enterKey () { - const link = searchResults.querySelector('a.search-result--active') - link && link.click() - } - - // Attending the active class to the search link - // ----------------------------------------------------------------------------- - function searchResultActive (t, e) { - t = t || 0 - e = e || 'up' - - // Dont use key functions - if (window.innerWidth < 768) return - - const searchLInk = searchResults.querySelectorAll('a') - - if (!searchLInk.length) return - - const searchLinkActive = searchResults.querySelector('a.search-result--active') - searchLinkActive && searchLinkActive.classList.remove('search-result--active') - - searchLInk[t].classList.add('search-result--active') - - const n = searchLInk[t].offsetTop - let o = 0 - - e === 'down' && n > searchResultsHeight.outer / 2 ? o = n - searchResultsHeight.outer / 2 : e === 'up' && (o = n < searchResultsHeight.scroll - searchResultsHeight.outer / 2 ? n - searchResultsHeight.outer / 2 : searchResultsHeight.scroll) - - searchResults.scrollTo(0, o) - } - - // Clear Input for write new letters - // ----------------------------------------------------------------------------- - function clearInput () { - searchInput.focus() - searchInput.setSelectionRange(0, searchInput.value.length) - } - - // Search close with Key - // ----------------------------------------------------------------------------- - function searchClose () { - domBody.classList.remove('has-search') - document.removeEventListener('keyup', mySearchKey) - } - - // Reacted to the up or down keys - // ----------------------------------------------------------------------------- - function arrowKeyUpDown (keyNumber) { - let e - let indexTheLink = 0 - - const resultActive = searchResults.querySelector('.search-result--active') - if (resultActive) { - indexTheLink = [].slice.call(resultActive.parentNode.children).indexOf(resultActive) - } - - searchInput.blur() - - if (keyNumber === 38) { - e = 'up' - if (indexTheLink <= 0) { - searchInput.focus() - indexTheLink = 0 - } else { - indexTheLink -= 1 - } - } else { - e = 'down' - if (indexTheLink >= searchResults.querySelectorAll('a').length - 1) { - indexTheLink = searchResults.querySelectorAll('a').length - 1 - } else { - indexTheLink = indexTheLink + 1 - } - } - - searchResultActive(indexTheLink, e) - } - - // Adding functions to the keys - // ----------------------------------------------------------------------------- - function mySearchKey (e) { - e.preventDefault() - - const keyNumber = e.keyCode - - /** - * 38 => Top - * 40 => down - * 27 => escape - * 13 => enter - * 191 => / - **/ - - if (keyNumber === 27) { - searchClose() - } else if (keyNumber === 13) { - searchInput.blur() - enterKey() - } else if (keyNumber === 38 || keyNumber === 40) { - arrowKeyUpDown(keyNumber) - } else if (keyNumber === 191) { - clearInput() - } - } - - // Open Search - // ----------------------------------------------------------------------------- - qsa('.js-search-open').forEach(item => item.addEventListener('click', function (e) { - e.preventDefault() - domBody.classList.add('has-search') - searchInput.focus() - window.innerWidth > 768 && document.addEventListener('keyup', mySearchKey) - })) - - // Close Search - // ----------------------------------------------------------------------------- - qsa('.js-search-close').forEach(item => item.addEventListener('click', function (e) { - e.preventDefault() - domBody.classList.remove('has-search') - document.removeEventListener('keyup', mySearchKey) - })) - - // Search - // ----------------------------------------------------------------------------- - /* eslint-disable no-new */ - new GhostSearch(mySearchSettings) -})(window, document) diff --git a/src/js/util/Router.js b/src/js/util/Router.js deleted file mode 100644 index e9df5941..00000000 --- a/src/js/util/Router.js +++ /dev/null @@ -1,62 +0,0 @@ -import camelCase from './camelCase' - -/** - * DOM-based Routing - * - * Based on {@link http://goo.gl/EUTi53|Markup-based Unobtrusive Comprehensive DOM-ready Execution} by Paul Irish - * - * The routing fires all common scripts, followed by the page specific scripts. - * Add additional events for more control over timing e.g. a finalize event - */ -class Router { - /** - * Create a new Router - * @param {Object} routes - */ - constructor (routes) { - this.routes = routes - } - - /** - * Fire Router events - * @param {string} route DOM-based route derived from body classes (``) - * @param {string} [event] Events on the route. By default, `init` and `finalize` events are called. - * @param {string} [arg] Any custom argument to be passed to the event. - */ - fire (route, event = 'init', arg) { - const fire = route !== '' && this.routes[route] && typeof this.routes[route][event] === 'function' - if (fire) { - this.routes[route][event](arg) - } - } - - /** - * Automatically load and fire Router events - * - * Events are fired in the following order: - * * common init - * * page-specific init - * * page-specific finalize - * * common finalize - */ - loadEvents () { - // Fire common init JS - this.fire('common') - - // Fire page-specific init JS, and then finalize JS - document.body.className - .toLowerCase() - .replace(/-/g, '_') - .split(/\s+/) - .map(camelCase) - .forEach((className) => { - this.fire(className) - this.fire(className, 'finalize') - }) - - // Fire common finalize JS - this.fire('common', 'finalize') - } -} - -export default Router diff --git a/src/js/util/camelCase.js b/src/js/util/camelCase.js deleted file mode 100644 index f3d3208b..00000000 --- a/src/js/util/camelCase.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * the most terrible camelizer on the internet, guaranteed! - * @param {string} str String that isn't camel-case, e.g., CAMeL_CaSEiS-harD - * @return {string} String converted to camel-case, e.g., camelCaseIsHard - */ -export default str => `${str.charAt(0).toLowerCase()}${str.replace(/[\W_]/g, '|').split('|') - .map(part => `${part.charAt(0).toUpperCase()}${part.slice(1)}`) - .join('') - .slice(1)}` diff --git a/src/scss/abstracts/_mixins.scss b/src/scss/abstracts/_mixins.scss deleted file mode 100644 index 4b42f397..00000000 --- a/src/scss/abstracts/_mixins.scss +++ /dev/null @@ -1,70 +0,0 @@ -%u-absolute0 { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; -} - -%primary-font { - font-family: $primary-font; -} - -%secundary-font { - font-family: $secundary-font; -} - -%u-line-clamp-2 { - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - display: -webkit-box; - overflow: hidden; - text-overflow: ellipsis; -} - -// Flex Box -%flex { display: flex } -%flex--1 { flex: 1 } -%align-items-center { align-items: center } -%direction-column { flex-direction: column } -%direction-row { flex-direction: row } -%justify-content-center { justify-content: center } -%justify-content-start { justify-content: flex-start } -%justify-content-end { justify-content: flex-end } - -%flex-align-items-center { - display: flex; - align-items: center; -} - -%fonts-icons { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'mapache' !important; /* stylelint-disable-line */ - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: inherit; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -// Modal -%modal { - opacity: 0; - transition: opacity .2s ease-out .1s, visibility 0s .4s; - z-index: 100; - visibility: hidden; -} - -%modal-bg { background-color: rgba(0, 0, 0, .5) } - -%modal-inner { - opacity: 0; - transform: scale(.6); - transition: transform .3s cubic-bezier(.06, .47, .38, .99), opacity .3s cubic-bezier(.06, .47, .38, .99); - overflow: hidden; -} diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss deleted file mode 100644 index 784d6c40..00000000 --- a/src/scss/abstracts/_variables.scss +++ /dev/null @@ -1,119 +0,0 @@ -// 1. Colors -// ----------------------------------------------------------------------------- -$podcast-color-bg-dark: #110f16; -$podcast-card-bg-dark: #18151f; - -$primary-text-color: #222; - -// social colors -$social-colors: ( - facebook: #3b5998, - twitter: #1277C9, - // google: #dd4b39, - // instagram: #306088, - // youtube: #e52d27, - // github: #555, - linkedin: #007bb6, - // spotify: #2ebd59, - // codepen: #222, - // behance: #131418, - // dribbble: #ea4c89, - // flickr: #0063dc, - reddit: #ff4500, - pocket: #f50057, - pinterest: #bd081c, - whatsapp: #64d448, - // telegram: #08c, - // discord: #7289da, - // vk: #4a76a8, - // snapchat: #F1EF00, - // vimeo: #00ADEF, - // rss: orange -); - -// 2. Fonts -// ----------------------------------------------------------------------------- - -$primary-font: 'Roboto',Whitney SSm A,Whitney SSm B,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif; // font default page and titles -$secundary-font: 'Merriweather',Mercury SSm A,Mercury SSm B,Georgia,serif; // font for content - -$font-size-base: 16px; - -// 3. Buttons And Inputs -// ----------------------------------------------------------------------------- -$input-height: 37px; -$input-height-large: 44px; - -$button-height: 37px; - -$button-color: rgba(0, 0, 0, .68); -$button-color-background: rgba(0, 0, 0, .05); - -$button-hover-color: rgba(0, 0, 0, .68); -$button-hover-color-background: rgba(0, 0, 0, .1); - -$button-filled-background: #CC116E; -$button-filled-hover-background: #cc116ed6; - -// 3. Typography -// ----------------------------------------------------------------------------- - -$font-size-root: 16px; - -$font-size-h1: 44px; -$font-size-h2: 34px; -$font-size-h3: 30px; -$font-size-h4: 26px; -$font-size-h5: 24px; -$font-size-h6: 20px; - -$headings-font-family: $primary-font; -$headings-font-weight: 700; -$headings-line-height: 1.1; -$headings-color: inherit; - -// Container -// ----------------------------------------------------------------------------- - -$container-sm: 576px; -$container-md: 768px; -$container-lg: 970px; -$container-xl: 1200px; - -// Header -// ----------------------------------------------------------------------------- -$header-height: 60px; - -// Footer -// ----------------------------------------------------------------------------- -$footer-color: #9BA1A6; -$footer-color-link: #9BA1A6; -$footer-color-link-hover: #eee; -$footer-bg-color: #111; - -$footer-color-subscribe: #ddd; -$footer-color-input: #bbb; -$footer-bg-input-color: #222; - -// 3. Media Query Ranges -// ----------------------------------------------------------------------------- - -$num-cols: 12; -$container-gutter-width: 1rem; - -// 3. Media Query Ranges -// ----------------------------------------------------------------------------- - -$sm: 576px; -$md: 766px; -$lg: 1000px; -$xl: 1230px; - -$sm-and-up: "only screen and (min-width : #{$sm})"; -$md-and-up: "only screen and (min-width : #{$md})"; -$lg-and-up: "only screen and (min-width : #{$lg})"; -$xl-and-up: "only screen and (min-width : #{$xl})"; - -$sm-and-down: "only screen and (max-width : #{$sm})"; -$md-and-down: "only screen and (max-width : #{$md})"; -$lg-and-down: "only screen and (max-width : #{$lg})"; diff --git a/src/scss/amp.scss b/src/scss/amp.scss deleted file mode 100644 index 94178336..00000000 --- a/src/scss/amp.scss +++ /dev/null @@ -1,530 +0,0 @@ -// 01. Variables -// ----------------------------------------------------------------------------- -$primary-font: Roboto,Open Sans,Segoe UI,Helvetica,Arial,sans-serif; -$secundary-font: 'Merriweather', serif; // font for content - -$header-height: 50px; - -$primary-color: #212529; -$secondary-color: rgba(0, 0, 0, 0.54); -$complementary-color: #38880A; - -// .u-bgColor { background-color: $primary-color } - -@import "node_modules/normalize.css/normalize"; - -%primary-font { - font-family: $primary-font; -} - -%secundary-font { - font-family: $secundary-font; -} - -// 02. Utilities -// ----------------------------------------------------------------------------- -.u-flexCenter { align-items: center; display: flex; } -.u-block { display: block } -.u-relative { position: relative } -.u-overflowHidden { overflow: hidden } -.u-fontSizeSmaller { font-size: 14px } -.u-flex1 { flex: 1 1 auto } -.u-absolute { position: absolute } -.u-textCenter { text-align: center } -.u-marginTop30 { margin-top: 30px; } - -.u-container { - margin-left: auto; - margin-right: auto; - padding-left: 16px; - padding-right: 16px; -} - -// 03. Global -// ----------------------------------------------------------------------------- - -*, *::before, *::after { - box-sizing: border-box; -} - -body { - @extend %primary-font; - - // font-family: $primary-font; - font-size: 1rem; - font-style: normal; - font-weight: 400; - letter-spacing: 0; - line-height: 1.5em; - text-rendering: optimizeLegibility; - text-size-adjust: 100%; - color: $primary-color; -} - -a { - color: $complementary-color; - text-decoration: none; - - &:active, - &:hover { - outline: 0; - } -} - -blockquote { - border-left: 4px solid $primary-color; - font-size: 18px; - font-style: italic; - margin-left: -5px; - margin-right: 0; - padding-bottom: 2px; - padding-left: 20px; -} - -figure { - margin: 0; - padding: 0; -} - -img { - object-fit: cover; - object-position: center -} - -figcaption { - @extend %primary-font; - - color: $secondary-color; - display: block; - font-size: 14px; - font-style: normal; - font-weight: 400; - margin-top: 10px; - text-align: center; - width: 100%; -} - -// 05.typography - Titles -// ----------------------------------------------------------------------------- - -h1, h2, h3, h4, h5, h6 { - @extend %primary-font; - - font-style: normal; - font-weight: 700; - line-height: 1.2; - margin: 25px 0 0; -} - -h1 { font-size: 2rem } -h2 { font-size: 1.75rem } -h3 { font-size: 1.5rem } -h4 { font-size: 1.375rem } -h5 { font-size: 1.25rem } -h6 { font-size: 1.125rem } - -strong { font-weight: 700 } -p { margin: 20px 0 0 0 } - -// 06.
-// ----------------------------------------------------------------------------- - -hr { - margin: 40px auto 10px; - height: 1px; - background-color: #ddd; - border: 0; - max-width: 100%; -} - -mark { - background-color: transparent; - background-image: linear-gradient(to bottom, rgba(215, 253, 211, 1), rgba(215, 253, 211, 1)); - color: rgba(0, 0, 0, .8); -} - -// 07. Code and pre -// ----------------------------------------------------------------------------- - -// colors -$whitegrey : #e5eff5; -$darkgrey : #343f44; - -code, -pre { - font-family: Menlo, Courier, monospace; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - tab-size: 4; - hyphens: none; -} - -p code { - background: $darkgrey; - border-radius: 2px; - color: $whitegrey; - padding: 1px 6px; -} - -pre { - overflow-x: auto; - margin: 0; - padding: 20px; - border: none; - color: $whitegrey; - font-size: 0.875rem; - line-height: 1.6em; - background: $darkgrey; - - code { - padding: 0; - background: transparent; - } -} - -// 08. Svg -// ----------------------------------------------------------------------------- - -svg { - width: 100%; - height: 100%; -} - -svg:not(:root) { - overflow: hidden; -} - -// 09. Table -// ----------------------------------------------------------------------------- -table { - border-collapse: collapse; - border-spacing: 0; - display: inline-block; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 1rem; - line-height: 1.5; - margin: 20px 0 0; - max-width: 100%; - overflow-x: auto; - vertical-align: top; - white-space: nowrap; - width: auto; - -webkit-overflow-scrolling: touch; - - th, - td { - padding: 6px 13px; - border: 1px solid #dfe2e5; - } - - tr:nth-child(2n) { - background-color: #f6f8fa; - } - - th { - letter-spacing: 0.2px; - text-transform: uppercase; - font-weight: 500; - } -} - -// 10. Header -// ----------------------------------------------------------------------------- -.header { - position: relative; - width: 100%; - height: $header-height; - line-height: 1; -} - -// .blog-title { -// height: 50px; -// line-height: 0; -// } - -.logo-link { - color: #fff; - font-size: 24px; - font-weight: 500; -} - -// 11. Social Media -// ----------------------------------------------------------------------------- -.social-media { - a { - background: $primary-color; - border-radius: 4px; - color: #fff; - display: inline-block; - height: 36px; - margin: 0 2px; - padding: 8px; - vertical-align: middle; - width: 36px; - } - - svg { - fill: #fff; - stroke: none; - } -} - -// 12. Sidebar or Sidenav -// ----------------------------------------------------------------------------- - -.sidebar { - width: 280px; - background: #fff; - - ul { - list-style: none; - list-style-image: none; - margin: 18px 0 20px; - padding: 0; - } - - ul li a { - padding: 6px 20px; - font-weight: 500; - font-size: 1rem; - } - - .social-media { padding: 20px; border-top: 1px solid #ddd } -} - -.close-sidebar { - height: $header-height; - font-size: 25px; - line-height: $header-height; - text-align: right; - padding-right: 20px; - color: #fff; -} - -// Btn menu -.hamburgermenu { - background-color: transparent; - border: none; - padding: 0; - height: 48px; - position: relative; - transition: transform .4s; - width: 48px; - margin-right: -15px; - - span { - background-color: #fff; - display: block; - height: 2px; - left: 14px; - margin-top: -1px; - position: absolute; - top: 50%; - width: 20px; - - &:first-child { transform: translate(0, -6px); } - &:last-child { transform: translate(0, 6px); } - } -} - -// 13. Content Main -// ----------------------------------------------------------------------------- - -.main { - max-width: 500px; - margin: 0 auto; -} - -// 14. Article -// ----------------------------------------------------------------------------- - -.article { - padding-top: 25px; - - &-title { margin-top: 0 } - - &-excerpt { - margin-bottom: 20px; - margin-top: 15px; - color: $secondary-color; - font-size: 18px; - } -} - -.article-meta { - color: $secondary-color; - margin: 15px 0; - font-size: 14px; -} - -.article-body { - font-family: $secundary-font; - line-height: 1.7em; - padding: 20px 1rem; - - & > * { margin-bottom: 28px } - - /* stylelint-disable-next-line */ - a:not(.kg-bookmark-container) { - word-break: break-word; - text-decoration: underline; - } - - ul, ol { - padding-left: 20px; - - li { margin-bottom: 5px; } - } -} - -// 15. Buttons for Tag -// ----------------------------------------------------------------------------- - -.button--tags { - border-radius: 3px; - color: $primary-color; - display: inline-block; - font-size: 14px; - font-weight: 500; - height: 37px; - line-height: 35px; - margin: 0 8px 8px 0; - padding: 0 16px; - border: 2px solid $primary-color; - - &::before { content: '#'; } -} - -// 16. Share -// ----------------------------------------------------------------------------- - -.share-title { - display: block; - margin-bottom: 8px; -} - -// stylelint-disable -amp-social-share.custom-style { - background-color: #008080; - background-image: url('https://raw.githubusercontent.com/google/material-design-icons/master/social/1x_web/ic_share_white_48dp.png'); - background-repeat: no-repeat; - background-position: center; - background-size: contain; -} - -amp-social-share.rounded { - border-radius: 10%; - background-size: 85%; -} -// stylelint-enable - -// 17. Related Article -// ----------------------------------------------------------------------------- - -.related { - padding-top: 40px; - padding-bottom: 20px; - margin-top: 20px; - background: #efefef; - - &-title { - border-bottom: 1px solid rgba(0, 0, 0, .15); - padding-bottom: 15px; - margin-bottom: 30px; - color: $primary-color; - font-weight: 500; - font-size: 20px; - } -} - -.story { - // padding-bottom: 2px; - &-border { - border-left: 3px solid #CC116E; - bottom: 0; - color: rgba(0, 0, 0, .2); - font-size: 36px; - font-weight: 700; - left: 0; - padding: 15px 10px 10px; - top: 0; - -webkit-text-fill-color: transparent; - -webkit-text-stroke-width: 1.4px; - -webkit-text-stroke-color: #888; - } - - &:nth-child(3n) { .story-border { border-color: darken(orange, 2%); } } - &:nth-child(3n+2) { .story-border { border-color: #26a8ed } } - - &-link { - background-color: #fff; - border-bottom: 1px solid #e2e0e0; - box-shadow: 0 1px 7px rgba(0, 0, 0, .05); - min-height: 50px; - padding: 15px 15px 15px 55px; - } - - &-title { - color: $primary-color; - line-height: 1.1; - font-size: 17px; - font-weight: 500; - margin: 0; - } -} - -// 18. Bookmark card -// ----------------------------------------------------------------------------- -.kg-bookmark { - &-container { - @extend %primary-font; - - display: flex; - flex-direction: column; - border: 1px solid rgba(0, 0, 0, 0.1); - } - - &-content { - padding: 20px; - order: 1; - } - - &-title { - font-weight: 500; - line-height: 1.2; - font-size: 1.125rem; - } - - &-description { - color: $secondary-color; - line-height: 1.4; - margin-top: 10px; - font-size: 0.875rem; - } - - &-metadata { - display: flex; - align-items: center; - font-size: 0.875rem; - margin-top: 10px; - } - - &-icon { margin-right: 5px } - - &-author::after { - content: "•"; - margin: 0 6px; - } -} - -// 19. Footer -// ----------------------------------------------------------------------------- -.footer { - background-color: #efefef; - color: rgba(0, 0, 0, .44); - padding-top: 20px; - font-size: 15px; - padding-bottom: 45px; -} diff --git a/src/scss/base/_global.scss b/src/scss/base/_global.scss deleted file mode 100644 index 95adf700..00000000 --- a/src/scss/base/_global.scss +++ /dev/null @@ -1,489 +0,0 @@ -/** - * 1. body - * 2. blockquote - * 3. cite - figcamption - figure - * 4. hr - * 5. image - * 6. ul ol - * 7. mark and q - * 8. Input Textarean - * 9. table - */ - -//Default styles -*, *::before, *::after { - box-sizing: border-box; -} - -html { - box-sizing: border-box; - font-size: $font-size-root; -} - -// 1. Body -// ----------------------------------------------------------------------------- - -body { - @extend %primary-font; - // font-family: $primary-font; - // color: $primary-text-color; - color: #212529; - font-size: $font-size-base; - font-style: normal; - font-weight: 400; - letter-spacing: 0; - line-height: 1.4; - margin: 0 auto; - text-rendering: optimizeLegibility; - overflow-x: hidden; -} - -a { - color: inherit; - text-decoration: none; - - &:active, - &:focus, - &:hover { - outline: 0; - } -} - -// 2. Blockquote -// ----------------------------------------------------------------------------- - -blockquote { - position: relative; - margin: 20px 0 20px; - padding: 20px 20px 0; - color: var(--blockquote-color); - font-size: 24px; - line-height: 1.44; - font-weight: 500; - text-align: center; - font-style: italic; - font-family: Georgia, Merriweather, serif; - - &::before { - z-index: 0; - position: absolute; - margin: 0; - left: 50%; - transform: translateX(-50%) translateY(5px) rotate(1deg); - color: var(--composite-color); - opacity: .4; - font-size: 10rem; - font-family: Georgia, Arial, sans-serif; - font-style: normal; - line-height: .4; - content: "\201c"; - } - - p:first-of-type { margin-top: 0 } -} - -@media #{$md-and-down} { - blockquote { font-size: 1.125rem } -} - -// 3. cite - figcamption - figure -// ----------------------------------------------------------------------------- - -figure { margin: 0 } - -figcaption { - @extend %primary-font; - // font-family: $primary-font; - color: var(--figcaption-color); - display: block; - font-feature-settings: "liga" on, "lnum" on; - font-size: 0.9375rem; - font-style: normal; - font-weight: 400; - left: 0; - letter-spacing: 0; - line-height: 1.4; - margin-top: 10px; - outline: 0; - position: relative; - text-align: center; - top: 0; - width: 100%; -} - -// 4. hr -// ----------------------------------------------------------------------------- - -hr:not(.hr-list) { - margin: 40px auto 10px; - height: 1px; - background-color: var(--hr-bg); - // background-color: #ddd; - border: 0; - max-width: 100%; -} - -.post-footer-hr { - // height: 1px; - margin: 32px 0; - // border: 0; - // background-color: #ddd; -} - -// 5. Image -// ----------------------------------------------------------------------------- - -img { - height: auto; - max-width: 100%; - vertical-align: middle; - width: auto; - - &:not([src]) { - visibility: hidden; - } -} - -i { - // display: inline-block; - vertical-align: middle; -} - -// 6. List ol - ul -// ----------------------------------------------------------------------------- - -ol, ul { - list-style: none; - list-style-image: none; - margin: 0; - padding: 0; -} - -// 7. Mark and q -// ----------------------------------------------------------------------------- - -mark { - background-color: transparent !important; - background-image: linear-gradient(to bottom, rgba(215, 253, 211, 1), rgba(215, 253, 211, 1)); - color: rgba(0, 0, 0, .8); -} - -q { - color: var(--q-color); - display: block; - font-size: 28px; - font-style: italic; - font-weight: 400; - line-height: 1.48; - padding-left: 50px; - padding-top: 15px; - text-align: left; - - &::before, &::after { display: none; } -} - -// 8. Input Textarean -// ----------------------------------------------------------------------------- - -textarea, -input { - background: var(--input-bg-color); - border-radius: 3px; - // border: 1px solid #e5e5e5; - // border: 0; - color: var(--input-color); - display: block; - font-size: 1rem; - margin: 0; - outline: none; - padding: 0 10px; - position: relative; - transition: box-shadow .08s ease-in, color .08s ease-in; - width: 100%; - // box-shadow: inset 0 0 0 1px #d7d7d7; - border: 1px solid var(--input-border-color); -} - -/* stylelint-disable-next-line */ -textarea { - min-height: 160px; - padding: 15px 10px; -} - -/* stylelint-disable-next-line */ -input { - height: $input-height-large; - line-height: $input-height-large; -} - -.input--md { - height: $input-height; - line-height: $input-height; -} - -// 9. table -// ----------------------------------------------------------------------------- - -table { - border-collapse: collapse; - border-spacing: 0; - display: inline-block; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 1rem; - line-height: 1.5; - margin: 20px 0 0; - max-width: 100%; - overflow-x: auto; - vertical-align: top; - white-space: nowrap; - width: auto; - -webkit-overflow-scrolling: touch; - - th, - td { - padding: 6px 13px; - border: 1px solid #dfe2e5; - } - - tr:nth-child(2n) { - background-color: #f6f8fa; - } - - th { - letter-spacing: 0.2px; - text-transform: uppercase; - font-weight: 600; - } -} - -// 10. Links -// ----------------------------------------------------------------------------- - -.link { - color: inherit; - cursor: pointer; - text-decoration: none; -} - -.link--underline { - &:active, - &:focus, - &:hover { - // color: inherit; - text-decoration: underline; - } -} - -// 11. Main .main -// ----------------------------------------------------------------------------- - -// .main { margin-bottom: 4em; min-height: 80vh } - -.site-wrapper { - // display: flex; - // flex-direction: column; - min-height: 100vh; -} - -.site-main { - flex-grow: 1; - - &.pb4 { padding-bottom: 4rem } -} - -// .main, -// .footer { transition: transform .5s ease; } - -// 13. Social Media Color -// ----------------------------------------------------------------------------- - -@each $social-name, $color in $social-colors { - // .c-#{$social-name} { color: $color !important; } - .bg-#{$social-name} { background-color: $color !important; } -} - -.c-facebook { color: #3b5998 } -.c-twitter { color: #55acee } - -// 14. Back to Top -// ----------------------------------------------------------------------------- - -.back-to-top { - background: rgba(0, 0, 0, .3); - border-right: 0; - border: 2px solid #fff; - color: #fff; - cursor: pointer; - height: 50px; - opacity: 1; - position: fixed; - right: 0; - top: 50%; - transform: translate3d(100px, 0, 0); - transition: all .3s; - width: 50px; - z-index: 5; - - &:hover { background: rgba(0, 0, 0, .5); } - - &.to-top { transform: translate3d(0, 0, 0) } - - .icon--arrow-up { - height: 40px; - width: 40px; - } -} - -svg { - height: auto; - width: 100%; -} - -// .svgIcon { -// display: inline-block; -// } - -// .svg-icon { -// fill: currentColor; -// display: inline-block; -// line-height: 0; -// overflow: hidden; -// position: relative; -// vertical-align: middle; - -// svg { -// height: 100%; -// width: 100%; -// background: inherit; -// fill: inherit; -// pointer-events: none; -// transform: translateX(0); -// } -// } - -// 15. Loanding Bar -// ----------------------------------------------------------------------------- - -.loadingBar { - background-color: #48e79a; - display: none; - height: 2px; - left: 0; - position: fixed; - right: 0; - top: 0; - transform: translateX(100%); - z-index: 800; -} - -.is-loading .loadingBar { - animation: loading-bar 1s ease-in-out infinite; - animation-delay: .8s; - display: block; -} - -// 16. LazyLoad Image Imate -// ----------------------------------------------------------------------------- -// .lazyload, -// .lazyloading { -// opacity: 0; -// filter: blur(16px); -// transform: scale(1.1); -// } - -// .lazyloaded { -// opacity: 1; -// transition: opacity 300ms; -// } - -.blur-up { - animation: fadeIn 3s ease-out; - - // &.lazyloading, - // &.lazyload { - // filter: blur(5px); - // transition: filter 200ms; - // // transform: scale(1.1); - // } - - // &.lazyloaded { - // filter: blur(0); - // // transform: scale(1); - // } -} - -// .blur-up { -// &.lazyload { filter: blur(16px) } -// &.lazyloading { filter: blur(8px); transition: filter 200ms; } -// &.lazyloaded { filter: none } -// } - -// 17. Video Responsive -// ----------------------------------------------------------------------------- -.video-responsive { - display: block; - height: 0; - // margin-top: 30px; - overflow: hidden; - padding: 0 0 56.25%; - position: relative; - width: 100%; - - iframe { - border: 0; - bottom: 0; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - } - - video { - border: 0; - bottom: 0; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - } -} - -// 18. notification for members -// ----------------------------------------------------------------------------- - -.notification { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 9000; - padding: 20px 60px; - color: #fff; - font-size: 18px; - text-align: center; - background: #98c22e; - transition: all .35s cubic-bezier(.19, 1, .22, 1) .5s; - transform: translateY(-175%); - visibility: hidden; - - svg { right: 25px; top: 20px; } -} - -.checkout-success .notification-checkout, -.signin-success .notification-signin, -.signup-success .notification-signup, -.subscribe-success .notification-subscribe { - visibility: visible; - transform: translateY(0); -} - -.notification.closed { - visibility: hidden; - transition: all 1.35s cubic-bezier(.19, 1, .22, 1); - transform: translateY(-175%); -} - -// Cursor pointer gallery -.mapache-light-gallery { cursor: zoom-in } diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss deleted file mode 100644 index 8b7f58e6..00000000 --- a/src/scss/base/_typography.scss +++ /dev/null @@ -1,35 +0,0 @@ -// Headings - -h1, h2, h3, h4, h5, h6 { - @extend %primary-font; - - color: $headings-color; - font-weight: $headings-font-weight; - line-height: $headings-line-height; - margin: 0; - - a { - color: inherit; - line-height: inherit; - } -} - -h1 { font-size: $font-size-h1 } -h2 { font-size: $font-size-h2 } -h3 { font-size: $font-size-h3 } -h4 { font-size: $font-size-h4 } -h5 { font-size: $font-size-h5 } -h6 { font-size: $font-size-h6 } - -p { - margin: 0; -} - -@media #{$md-and-down} { - h1 { font-size: 38px } - h2 { font-size: 32px } - h3 { font-size: 26px } - h4 { font-size: 24px } - h5 { font-size: 20px } - h6 { font-size: 18px } -} diff --git a/src/scss/base/_utilities.scss b/src/scss/base/_utilities.scss deleted file mode 100644 index 4f284038..00000000 --- a/src/scss/base/_utilities.scss +++ /dev/null @@ -1,314 +0,0 @@ -// color -.u-textColorNormal { - color: #757575; - fill: #757575; -} - -.u-textColorWhite { - color: #fff !important; - fill: #fff !important; -} - -.u-textColorDarker { - color: rgba(0, 0, 0, .8); - fill: rgba(0, 0, 0, .8); -} - -.text-success { color: var(--composite-color); } - -.text-circle-line { - position: relative; - display: inline-block; - border-bottom: 1px solid #000; - padding: 0 15px 5px 0; - margin-bottom: -1px; - - // &::before { - // content: ''; - // height: 12px; - // width: 12px; - // background: #000; - // position: absolute; - // left: 0; - // bottom: -6px; - // border-radius: 50%; - // } -} - -// Positions -.u-relative { position: relative } -.u-absolute { position: absolute } -.u-absolute0 { @extend %u-absolute0; } -.u-fixed { position: fixed !important; } - -// Display -.u-block { display: block !important } -.u-inlineBlock { display: inline-block } -.u-hide { display: none !important } - -// Background -.u-bgGradient { background: linear-gradient(to bottom, rgba(0, 0, 0, .3) 29%, rgba(0, 0, 0, .7) 81%) } -.u-bgDark { background-color: #110f16 } -.u-backgroundWhite { background-color: #fafafa } -.u-bgGray { background-color: #f0f0f0 } - -.u-bgOpacity { - background: #000; - opacity: .6; - transition: .4s; -} - -// Background Image Cover -.u-bgCover { - background-origin: border-box; - background-position: center; - background-size: cover; -} - -// cursor -.u-pointer { cursor: pointer } - -// zindex -.zindex1 { z-index: 1 } -.zindex2 { z-index: 2 } -.zindex3 { z-index: 3 } -.zindex4 { z-index: 4 } - -// Clear -.u-clear::after { - content: ""; - display: table; - clear: both; -} - -// font size -.u-fontSizeMicro { font-size: 11px } -.u-fontSizeSmallest { font-size: 12px } -.u-fontSize13 { font-size: 13px } -.u-fontSizeSmaller { font-size: 14px } -.u-fontSize15 { font-size: 15px } -.u-fontSizeSmall { font-size: 16px } -.u-fontSizeBase { font-size: 18px } -.u-fontSize20 { font-size: 20px } -.u-fontSize21 { font-size: 21px } -.u-fontSize22 { font-size: 22px } -.u-fontSizeLarge { font-size: 24px } -.u-fontSize26 { font-size: 26px } -.u-fontSize28 { font-size: 28px } -.u-fontSizeLarger { font-size: 32px } -.u-fontSize36 { font-size: 36px } -.u-fontSize40 { font-size: 40px } -.u-fontSizeLargest { font-size: 44px } -.u-fontSizeJumbo { font-size: 60px } - -@media #{$md-and-down} { - .u-md-fontSizeBase { font-size: 18px } - .u-md-fontSize22 { font-size: 22px } - .u-md-fontSizeLarger { font-size: 32px } - .u-md-fontSize36 { font-size: 36px !important } -} - -// @media (max-width: 767px) { -// .u-xs-fontSizeBase {font-size: 18px} -// .u-xs-fontSize13 {font-size: 13px} -// .u-xs-fontSizeSmaller {font-size: 14px} -// .u-xs-fontSizeSmall {font-size: 16px} -// .u-xs-fontSize22 {font-size: 22px} -// .u-xs-fontSizeLarge {font-size: 24px} -// .u-xs-fontSize40 {font-size: 40px} -// .u-xs-fontSizeLarger {font-size: 32px} -// .u-xs-fontSizeSmallest {font-size: 12px} -// } - -// font weight -.u-fontWeightThin { font-weight: 300 } -.u-fontWeightNormal { font-weight: 400 } -.u-fontWeightMedium { font-weight: 500 } -.u-fontWeightSemibold { font-weight: 600 } -.u-fontWeightBold { font-weight: 700 } - -.u-textUppercase { text-transform: uppercase } -.u-textCapitalize { text-transform: capitalize } -.u-textAlignCenter { text-align: center } -.u-fontItalic { font-style: italic; } - -.u-textShadow { text-shadow: 0 0 10px rgba(0, 0, 0, 0.33) } - -// Margin -.u-marginAuto { margin-left: auto; margin-right: auto; } -.u-marginTop20 { margin-top: 20px } -.u-marginTop30 { margin-top: 30px } - -.u-marginBottom10 { margin-bottom: 10px } -.u-marginBottom15 { margin-bottom: 15px } -.u-marginBottom20 { margin-bottom: 20px } -.u-marginBottom30 { margin-bottom: 30px } -.u-marginBottom40 { margin-bottom: 40px } - -// padding -.u-padding0 { padding: 0 !important } -.u-padding20 { padding: 20px } -.u-padding15 { padding: 15px !important; } - -.u-paddingLeft15 { padding-left: 15px } -.u-paddingLeft20 { padding-left: 20px } - -.u-paddingRight10 { padding-right: 10px } -.u-paddingRight20 { padding-right: 20px } - -.u-paddingBottom15 { padding-bottom: 15px; } -.u-paddingBottom30 { padding-bottom: 30px; } -.u-paddingBottom20 { padding-bottom: 20px } - -.u-paddingTop2 { padding-top: 2px } -.u-paddingTop5 { padding-top: 5px; } -.u-paddingTop10 { padding-top: 10px; } -.u-paddingTop15 { padding-top: 15px; } -.u-paddingTop20 { padding-top: 20px; } -.u-paddingTop30 { padding-top: 30px; } - -// line-height -.u-lineHeight1 { line-height: 1; } -.u-lineHeightTight { line-height: 1.2 } - -// overflow -.u-overflowHidden { overflow: hidden } - -// float -.u-floatRight { float: right; } -.u-floatLeft { float: left; } - -// flex -.u-flex { @extend %flex; } -.u-flexContentCenter { @extend %justify-content-center; } -.u-flexContentAround { justify-content: space-around; } -.u-flexContentBetween { justify-content: space-between; } -.u-flex--1 { @extend %flex--1; } -.u-flex1 { flex: 1 1 auto; } -.u-flex0 { flex: 0 0 auto; } - -.u-flexCenter { - display: flex; - align-items: center; -} - -.u-flexColumn { - @extend %flex; - @extend %direction-column; - @extend %justify-content-center; -} - -.u-flexColumnCenter { - @extend %flex; - @extend %direction-column; - @extend %flex-align-items-center; -} - -// .u-flexCenterr { -// @extend %flex; -// @extend %direction-column; -// @extend %justify-content-center; -// @extend %flex-align-items-center; -// } - -.u-flexColumnTop { - // @extend %flex; - // @extend %direction-column; - // @extend %justify-content-start; - display: flex; - flex-direction: column; - justify-content: flex-start; -} - -.u-flexEnd { - // display: flex; - align-items: center; - justify-content: flex-end; - // @extend %flex-align-items-center; - // @extend %justify-content-end; -} - -.u-image { - object-fit: cover; - height: 100%; - width: 100%; -} - -// max widht -.u-container { - margin-left: auto; - margin-right: auto; - padding-left: 16px; - padding-right: 16px; -} - -.u-maxWidth1200 { max-width: 1200px } -.u-maxWidth1000 { max-width: 1000px } -.u-maxWidth740 { max-width: 740px } -.u-maxWidth1040 { max-width: 1040px } -.u-sizeFullWidth { width: 100% } -.u-sizeFullHeight { height: 100% } - -// border -.u-round { border-radius: 50% } -.u-borderRadius2 { border-radius: 2px } -.u-border-bottom { border-bottom: 1px solid var(--border-bottom-color); } - -.u-boxShadowBottom { - box-shadow: 0 4px 2px -2px rgba(0, 0, 0, .05); -} - -// title Line -.title-line { - position: relative; - text-align: center; - width: 100%; - - &::before { - content: ''; - background: rgba(255, 255, 255, .3); - display: inline-block; - position: absolute; - left: 0; - bottom: 50%; - width: 100%; - height: 1px; - z-index: 0; - } -} - -// Obblique -.u-oblique { - background-color: var(--composite-color); - color: #fff; - display: inline-block; - font-size: 15px; - font-weight: 500; - letter-spacing: 0.03em; - line-height: 1; - padding: 5px 13px; - text-transform: uppercase; - transform: skewX(-15deg); -} - -.u-lineClamp2 { - @extend %u-line-clamp-2; - // - line-height: 1.1; - max-height: 2.3em; -} - -@media #{$md-and-down} { - .u-block-before-md { display: block !important } - .u-hide-before-md { display: none !important } -} - -@media #{$lg-and-down} { - .u-hide-before-lg { display: none !important } - .u-block-before-lg { display: block !important } -} - -// hide after -@media #{$md-and-up} { .u-hide-after-md { display: none !important } } - -@media #{$lg-and-up} { .u-hide-after-lg { display: none !important } } diff --git a/src/scss/components/_animated.scss b/src/scss/components/_animated.scss deleted file mode 100644 index 2701c82a..00000000 --- a/src/scss/components/_animated.scss +++ /dev/null @@ -1,136 +0,0 @@ -// animated Global -.animated { - animation-duration: 1s; - animation-fill-mode: both; - - &.infinite { - animation-iteration-count: infinite; - } -} - -// animated All -.bounceIn { animation-name: bounceIn; } -.bounceInDown { animation-name: bounceInDown; } -.pulse { animation-name: pulse; } -// .slideInUp { animation-name: slideInUp } -.slideOutDown { animation-name: slideOutDown } -// .spin { animation-name: spin } - -// all keyframes Animates -// bounceIn -@keyframes bounceIn { - 0%, - 20%, - 40%, - 60%, - 80%, - 100% { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } - 0% { opacity: 0; transform: scale3d(.3, .3, .3); } - 20% { transform: scale3d(1.1, 1.1, 1.1); } - 40% { transform: scale3d(.9, .9, .9); } - 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } - 80% { transform: scale3d(.97, .97, .97); } - 100% { opacity: 1; transform: scale3d(1, 1, 1); } -} - -// bounceInDown -@keyframes bounceInDown { - 0%, - 60%, - 75%, - 90%, - 100% { animation-timing-function: cubic-bezier(215, 610, 355, 1); } - 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } - 60% { opacity: 1; transform: translate3d(0, 25px, 0); } - 75% { transform: translate3d(0, -10px, 0); } - 90% { transform: translate3d(0, 5px, 0); } - 100% { transform: none; } -} - -@keyframes pulse { - from { transform: scale3d(1, 1, 1); } - 50% { transform: scale3d(1.2, 1.2, 1.2); } - to { transform: scale3d(1, 1, 1); } -} - -// @keyframes scroll { -// 0% { opacity: 0; } -// 10% { opacity: 1; transform: translateY(0) } -// 100% { opacity: 0; transform: translateY(10px); } -// } - -// @keyframes opacity { -// 0% { opacity: 0; } -// 50% { opacity: 0; } -// 100% { opacity: 1; } -// } - -// spin for pagination -@keyframes spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} - -// @keyframes tooltip { -// 0% { opacity: 0; transform: translate(-50%, 6px); } -// 100% { opacity: 1; transform: translate(-50%, 0); } -// } - -@keyframes loading-bar { - 0% { transform: translateX(-100%) } - 40% { transform: translateX(0) } - 60% { transform: translateX(0) } - 100% { transform: translateX(100%) } -} - -// Arrow move left -@keyframes arrow-move-right { - 0% { opacity: 0 } - 10% { transform: translateX(-100%); opacity: 0 } - 100% { transform: translateX(0); opacity: 1 } -} - -@keyframes arrow-move-left { - 0% { opacity: 0 } - 10% { transform: translateX(100%); opacity: 0 } - 100% { transform: translateX(0); opacity: 1 } -} - -// @keyframes slideInUp { -// from { -// transform: translate3d(0, 100%, 0); -// visibility: visible; -// } - -// to { -// transform: translate3d(0, 0, 0); -// } -// } - -@keyframes slideOutDown { - from { - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - transform: translate3d(0, 20%, 0); - } -} - -@keyframes fadeIn { - 0% { opacity: 0 } - 100% { opacity: 1 } -} - -@keyframes dropdown-display { - 0% { - opacity: 0; - transform: scale(.98) translateY(-.6em); - } - - 100% { - opacity: 1; - transform: scale(1) translateY(0); - } -} diff --git a/src/scss/components/_bookmark.scss b/src/scss/components/_bookmark.scss deleted file mode 100644 index faeb1916..00000000 --- a/src/scss/components/_bookmark.scss +++ /dev/null @@ -1,85 +0,0 @@ -// Bookmark card -// ----------------------------------------------------------------------------- -.kg-bookmark { - position: relative; - - &-publisher, - &-card { position: relative; } - - // - &-container { - @extend %primary-font; - @extend %flex; - - background: var(--bookmark-bg); - border: 1px solid var(--bookmark-border-color); - border-radius: 5px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 4px; - overflow: hidden; - } - - &-content { - @extend .u-flexColumnTop; - - flex-grow: 1; - flex-basis: 100%; - padding: 20px; - } - - &-title { - color: var(--bookmark-color); - font-weight: 500; - line-height: 1.2; - font-size: 1.25rem; - } - - &-description { - @extend %u-line-clamp-2; - // - margin-bottom: 8px; - color: var(--bookmark-color-des); - line-height: 1.4; - max-height: 4em; - margin-top: 10px; - font-size: 1rem; - } - - &-metadata { - @extend %flex; - @extend %flex-align-items-center; - - font-size: 0.9375rem; - color: var(--bookmark-meta-color); - } - - &-thumbnail { - flex-grow: 1; - min-width: 33%; - position: relative; - min-height: 150px; - } - - &-thumbnail img { - @extend %u-absolute0; - @extend .u-image; - } - - &-icon { - width: 22px; - height: 22px; - margin: 0 8px 0 0 !important; - } - - &-author::after { - content: '•'; - margin: 0 6px; - color: rgba(0, 0, 0, 0.54); - } -} - -@media #{$sm-and-down} { - .kg-bookmark { - &-container { flex-direction: column } - &-content { order: 1 } - } -} diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss deleted file mode 100644 index 3c47809a..00000000 --- a/src/scss/components/_buttons.scss +++ /dev/null @@ -1,124 +0,0 @@ -%button { - background: $button-color-background; - border: 1px solid transparent; - color: $button-color; - cursor: pointer; - display: inline-block; - font-size: 14px; - font-style: normal; - font-weight: 400; - height: $button-height; - letter-spacing: .02em; - line-height: $button-height - 2; - padding: 0 16px; - position: relative; - text-align: center; - text-decoration: none; - text-rendering: optimizeLegibility; - transition: .1s background-color, .1s border-color, .1s color, .1s fill; - user-select: none; - vertical-align: middle; - white-space: nowrap; -} - -.button { - @extend %primary-font; - // font-family: $primary-font; - @extend %button; - - &:focus { outline: none } - - // &:hover { - // background: $button-hover-color-background; - // color: $button-hover-color; - // } - - .icon { - position: relative; - top: -1px - } - - &--large { - font-size: 16px; - height: 44px; - line-height: 42px; - padding: 0 18px; - } - - &--dark { - background: #000; - border-color: #000; - box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 16px; - color: #fff; - - &:hover { - background: #3a3c3c; - border-color: #3a3c3c; - color: #fff; - } - } - - &--filled { - color: #fff; - background: var(--composite-color); - border-color: var(--composite-color); - - &:hover { - background: var(--composite-color-hover); - border-color: var(--composite-color-hover); - color: #fff; - } - } - - &--circle { - width: 36px; - height: 36px; - border-radius: 50%; - line-height: 36px; - padding: 0; - font-size: 18px; - border: none; - - .icon { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - } - - &--line { - transition: color .3s ease, box-shadow .3s cubic-bezier(.455, .03, .515, .955); - border: 1px solid #000; - background: #fff; - color: #000; - - &:hover { - color: #fff; - box-shadow: inset 0 -50px 8px -4px #000; - } - } - - // tag - &--tag::before { content: '#' } -} - -.buttonSet { - > .button { - margin-right: 8px; - margin-bottom: 8px; - vertical-align: middle; - - &:last-child { margin-right: 0 } - } -} - -// button dark line -// ========================================================================== -.button--comment { - display: block; - font-weight: 500; - margin: 50px auto 0; - max-width: 300px; - text-transform: uppercase; -} diff --git a/src/scss/components/_comments.scss b/src/scss/components/_comments.scss deleted file mode 100644 index bd73a0f6..00000000 --- a/src/scss/components/_comments.scss +++ /dev/null @@ -1,44 +0,0 @@ -// Post Comments -// ----------------------------------------------------------------------------- - -.post-comments { - background: #fff; - box-shadow: 0 1px 7px rgba(0, 0, 0, .05); - font-size: 14px; - overflow-y: auto; - transform: translateX(100%); - transition: .2s; - will-change: transform; - z-index: 15; - - &-header { - height: $header-height; - box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.2); - position: sticky; - top: 0; - background: #fff; - } - - &-overlay { - background-color: rgba(0, 0, 0, .2); - display: none; - transition: background-color .4s linear; - z-index: 14; - cursor: pointer; - } -} - -body.has-comments { - overflow: hidden; - - .post-comments-overlay { display: block } - .post-comments { transform: translateX(0) } -} - -@media #{$md-and-up} { - .post-comments { - left: auto; - max-width: 700px; - min-width: 500px; - } -} diff --git a/src/scss/components/_cover.scss b/src/scss/components/_cover.scss deleted file mode 100644 index f3eafac6..00000000 --- a/src/scss/components/_cover.scss +++ /dev/null @@ -1,19 +0,0 @@ -body.has-cover { - .header { position: fixed } - - &:not(.has-menu) { - &.is-transparency { - .header { - background-color: rgba(255, 255, 255, 0); - box-shadow: none; - border-bottom: 1px solid hsla(0, 0%, 100%, .1); - transition: all .5s ease-in-out; - } - - // .header-line { border-color: hsla(0, 0%, 100%, .1) } - - .header-left .hla, .nav ul li a, .header-logo { color: #fff; } - .menu-burger span { background-color: #fff } - } - } -} diff --git a/src/scss/components/_icons.scss b/src/scss/components/_icons.scss deleted file mode 100644 index 17b30e72..00000000 --- a/src/scss/components/_icons.scss +++ /dev/null @@ -1,24 +0,0 @@ -.icon { - display: inline-block; - width: 20px; - height: 20px; - vertical-align: middle; - stroke-width: 0; - stroke: currentColor; - fill: currentColor; - - &.top2 { margin-top: -2px; } - - &--s { - height: 18px; - width: 18px; - } - - &--m { - width: 26px; - height: 26px; - } -} - -.rotate90 { transform: rotate(90deg) } -.rotate270 { transform: rotate(270deg) } diff --git a/src/scss/components/_instagram.scss b/src/scss/components/_instagram.scss deleted file mode 100644 index ae6e964a..00000000 --- a/src/scss/components/_instagram.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Instagram Fedd -// ----------------------------------------------------------------------------- - -.instagram { - &-hover { - background-color: rgba(0, 0, 0, .3); - opacity: 0; - } - - &-img { - height: 264px; - - &:hover > .instagram-hover { opacity: 1 } - } - - &-btn { - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - z-index: 3; - position: absolute; - } -} - -@media #{$md-and-down} { - .instagram-img { height: 180px; } -} diff --git a/src/scss/components/_kg-embed-and-gallery.scss b/src/scss/components/_kg-embed-and-gallery.scss deleted file mode 100644 index 40254012..00000000 --- a/src/scss/components/_kg-embed-and-gallery.scss +++ /dev/null @@ -1,46 +0,0 @@ -// Emed Card -// ----------------------------------------------------------------------------- - -.kg-embed-card { - @extend %flex-align-items-center; - @extend %direction-column; - - min-width: 100%; - max-width: 100%; -} - -// Gallery -// ----------------------------------------------------------------------------- - -.kg-gallery { - &-container { - @extend %flex; - @extend %direction-column; - - max-width: 100%; - width: 100%; - } - - &-row { - @extend %flex; - @extend %direction-row; - @extend %justify-content-center; - - &:not(:first-of-type) { margin: 0.75em 0 0 0 } - } - - &-image { - img { - display: block; - margin: 0; - width: 100%; - height: 100%; - } - - &:not(:first-of-type) { margin: 0 0 0 0.75em } - } -} - -@media #{$md-and-down} { - .kg-width-wide .kg-image { width: 100% } -} diff --git a/src/scss/components/_pagination.scss b/src/scss/components/_pagination.scss deleted file mode 100644 index b5d6d023..00000000 --- a/src/scss/components/_pagination.scss +++ /dev/null @@ -1,4 +0,0 @@ -// Pagination -// ----------------------------------------------------------------------------- - -// .load-more { max-width: 70% !important } diff --git a/src/scss/components/_previous-next-post.scss b/src/scss/components/_previous-next-post.scss deleted file mode 100644 index 72f6b69b..00000000 --- a/src/scss/components/_previous-next-post.scss +++ /dev/null @@ -1,34 +0,0 @@ -// Previus and next article -// ----------------------------------------------------------------------------- - -.prev-next { - &-span { - color: var(--composite-color); - font-weight: 700; - font-size: 13px; - - i { - display: inline-block; - transition: all 277ms cubic-bezier(0.16, 0.01, 0.77, 1) - } - } - - &-title { - @extend %u-line-clamp-2; - - margin: 0; - font-size: 16px; - height: 2em; - line-height: 1; - } - - &-link:hover { - .arrow-right { animation: arrow-move-right 0.5s ease-in-out forwards } - .arrow-left { animation: arrow-move-left 0.5s ease-in-out forwards } - } -} - -@media #{$md-and-up} { - .prev-next-link { margin: 0 !important } - .prev-next-right { text-align: right } -} diff --git a/src/scss/components/_prism.scss b/src/scss/components/_prism.scss deleted file mode 100644 index f9260f7f..00000000 --- a/src/scss/components/_prism.scss +++ /dev/null @@ -1,170 +0,0 @@ -// colors -$whitegrey : #e5eff5; -$darkgrey : #343f44; -$blue :#3eb0ef; - -:not(pre) > code { - padding: 1px 5px; - border-radius: .3px; - white-space: normal; - background: $whitegrey; - text-shadow: none; - color: $darkgrey; - font-size: .8em; -} - -pre { - overflow-x: auto; - margin: 0; - padding: 20px; - max-width: 100%; - border: none; - color: $whitegrey; - font-size: 0.875rem; - line-height: 1.6em; - background: #2a3644; - border-radius: 5px; - // background: #1d1d35; - // background: #132419; - - code { - padding: 0; - font-size: inherit; - line-height: inherit; - background: transparent; - white-space: pre; - - * { color: inherit } - } -} - -/* Code Boxes -/* ---------------------------------------------------------- */ - -/* stylelint-disable-next-line */ -code, -pre { - font-family: "Cascadia Code", "Operator Mono Medium", "Dank Mono", "Fira Code", Menlo, Courier, monospace; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - tab-size: 4; - hyphens: none; -} - -// .article-inner code { -// padding: 1px 5px; -// font-size: 0.8em; -// line-height: 1em; -// font-weight: 400 !important; -// background: $whitegrey; -// border-radius: 3px; -// white-space: pre-wrap; -// } - -/* Prism -/* ---------------------------------------------------------- */ -pre[class*="language-"] { - padding: 1.25rem; - margin-bottom: 0; - overflow: auto; - border-radius: 8px; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - border: none; - // background: #2a3644; - // background: #1d1d35; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .3em .4em; - border-radius: .3em; - white-space: normal; - background: $whitegrey; - text-shadow: none; - color: $darkgrey; - font-size: 0.9em; -} - -a > code[class*="language-"] { - color: $blue; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: rgba(255, 255, 255, 0.5) -} - -.token.punctuation { - color: #fff; -} - -.namespace { - opacity: .7; -} - -.token.property, -.token.tag, -.token.constant, -.token.symbol, -.token.deleted { - color: #ff5884; -} - -.token.boolean, -.token.number { - color: #ae81ff; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #e6db74; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string, -.token.variable { - color: #fff; -} - -.token.atrule, -.token.attr-value, -.token.function, -.token.class-name { - color: #a6e22e; -} - -.token.keyword { - color: #66d9ef; -} - -.token.regex, -.token.important { - color: #fd971f; -} - -.token.important, -.token.bold { - font-weight: bold; -} - -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} diff --git a/src/scss/components/_search.scss b/src/scss/components/_search.scss deleted file mode 100644 index 808e261d..00000000 --- a/src/scss/components/_search.scss +++ /dev/null @@ -1,121 +0,0 @@ -// Search -// ========================================================================== - -.search { - @extend %modal; - - &-shader { @extend %modal-bg; } - - &-inner { - @extend %modal-inner; - - max-width: 700px; - padding: 6vw 20px 20px; - width: 100%; - margin-bottom: 30px; - } - - &-wrap { - background-color: var(--input-bg-color); - border-radius: 5px; - box-shadow: 1px 3px 8px rgba(0, 0, 0, .09), 2px 32px 38px -20px rgba(0, 0, 0, .25); - overflow: hidden; - } - - &-message { - padding: 7px 8px; - color: var(--search-color-message); - font-size: .9em; - border-top: 1px solid rgba(231, 239, 243, .7); - } - - &-close { - // background: #fff; - // color: #000; - position: absolute; - right: 20px; - top: 8px; - } - - &-form { - padding: 12px 16px; - overflow: hidden; - - .icon--search { - margin-right: 5px; - color: var(--input-color); - opacity: .7; - // color: #9baeb8 - } - - input { - border-color: transparent; - } - } - - // result - &-results { - overflow: auto; - max-height: calc(100vh - 15rem); - -webkit-overflow-scrolling: touch; - - a { - padding: 10px 20px; - background: var(--search-bg-link); - color: var(--search-color-link); - text-decoration: none; - display: block; - transition: all 0.3s ease-in-out; - - &:hover, &.search-result--active { background: var(--search-bg-link-hover) } - } - } -} - -.search-nav-hints { - max-width: 680px; - line-height: 48px; - margin-top: 10px; - width: 100%; - user-select: none; -} - -.search-nav-hint { - display: inline-block; - line-height: 24px; - margin-left: 12px; - font-size: 13px; - color: #fff; - - & > span { - display: inline-block; - background-color: #f42; - padding: 1px 4px 2px; - border-radius: 2px; - opacity: .9; - min-width: 20px; - line-height: 18px; - text-align: center; - } -} - -body.has-search { - overflow: hidden; - - .search { - opacity: 1; - visibility: visible; - transition: opacity .3s ease; - - &-inner { - opacity: 1; - transform: scale(1); - transition: transform .8s cubic-bezier(.26, .63, 0, .96); - } - } -} - -@media #{$md-and-down} { - .search-inner { padding-top: 3.5rem } - .search-results { max-height: calc(100vh - 10rem) } -} diff --git a/src/scss/components/_share.scss b/src/scss/components/_share.scss deleted file mode 100644 index e9a770fd..00000000 --- a/src/scss/components/_share.scss +++ /dev/null @@ -1,46 +0,0 @@ -// Post Share -// ----------------------------------------------------------------------------- -.post-share { - right: auto; - width: 40px; - transition: all .4s; - top: 30px; - - .button { - color: #fff; - margin: 8px 0 0; - } - - .i-chat { - background-color: #fff; - border: 2px solid #bbb; - color: #bbb; - } - - .post-share-inner { - transition: visibility 0s linear 0s, opacity .3s 0s; - - &.is-hidden { - visibility: hidden; - opacity: 0; - transition: visibility 0s linear .3s, opacity .3s 0s; - } - } -} - -// Share Mobile -// ----------------------------------------------------------------------------- -.post-share-mob { - top: auto; - background: var(--mobile-share-bg); - z-index: 5; - - .button { - margin: 5px; - border-radius: 5px; - height: 28px; - line-height: 26px; - } -} - -.share-margin .post-share { top: -50px } diff --git a/src/scss/components/_sticky.scss b/src/scss/components/_sticky.scss deleted file mode 100644 index fcd4ddf1..00000000 --- a/src/scss/components/_sticky.scss +++ /dev/null @@ -1,31 +0,0 @@ -.sticky-parent { - @extend %flex; - @extend %direction-column; - @extend %justify-content-start; -} - -.sticky-top-wrap { - @extend %flex; - @extend %direction-column; - @extend %justify-content-start; - @extend %flex--1; -} - -.sticky-bottom-wrap { - @extend %flex; - @extend %direction-column; - @extend %justify-content-end; - @extend %flex--1; -} - -.sticky-top-wrap .sticky { - position: sticky; - top: $header-height + 30; - bottom: 0; -} - -.sticky-bottom-wrap .sticky { - position: sticky; - top: auto; - bottom: 30px; -} diff --git a/src/scss/components/_story.scss b/src/scss/components/_story.scss deleted file mode 100644 index 8d71c258..00000000 --- a/src/scss/components/_story.scss +++ /dev/null @@ -1,233 +0,0 @@ -//
To Add borders and separate stories -// ----------------------------------------------------------------------------- -.hr-list { - border: 0; - border-top: 1px solid rgba(0, 0, 0, 0.0785); - margin: 40px 0 0; -} - -.story-feed .story-feed-content:first-child .hr-list:first-child { - margin-top: 5px; -} - -.separate { - background-color: currentColor; - display: inline-block; - height: 1px; - margin-left: .75em; - margin-right: .75em; - opacity: .75; - vertical-align: middle; - width: 1.75em; - // background: #707177; -} - -// When the cursor is hover the story the image for a zoom animation -// ----------------------------------------------------------------------------- -.image-hover { - img { - transition: transform .7s; - transform: translateZ(0) - } - - &:hover img { transform: scale(1.03) } -} - -// Hover in title of story -.title-hover { - color: var(--story-title-color); - &:hover { opacity: .6; } -} - -// Meta for Story ( Category - Datetime - more link - featured icon) -// ----------------------------------------------------------------------------- -.flow-meta { - color: var(--text--secondary__Color); - margin-bottom: 1em; - - &-cat { - color: var(--story-color); - letter-spacing: .02em; - padding: 4px 2px; - } -} - -.flow-meta-cat, -.more-link { - transition: none .25s ease-in-out; - transition-property: background-size, color; - background-repeat: no-repeat, no-repeat; - background-position: 0 100%, 0 100%; - background-size: 0 1px, 100% 1px; - background-image: linear-gradient(to top, var(--story-color), var(--story-color)), linear-gradient(to top, var(--story-more-link-border), var(--story-more-link-border)); - - &:hover, - &:focus { - color: var(--story-color); - background-size: 100% 1px, 100% 1px; - } -} - -// stylelint-disable-next-line -.more-link { - @extend %secundary-font; - - display: inline-block; - color: var(--story-more-link-color); - // background-image: linear-gradient(to top, rgba(97, 97, 101, .5) 0, rgba(97, 97, 101, .5) 0), linear-gradient(to top, rgba(28, 29, 33, .15) 0, rgba(28, 29, 33, .15) 0); - background-image: linear-gradient(to top, var(--story-more-link-color), var(--story-more-link-color)), linear-gradient(to top, var(--story-more-link-border), var(--story-more-link-border)); - // font-size: 15px; - font-style: italic; - line-height: 1.6; - - &::after { content: '...' } - - &:hover, - &:focus { - color: var(--story-more-link-color); - } -} - -.u-meta-featured { - font-size: 12px; - letter-spacing: 0.025em; - padding: 3px 10px; - right: 10px; - top: 10px; -} - -// Story Default list -// ----------------------------------------------------------------------------- - -.story { - &-image { flex: 0 0 45% } - &-footer { color: var(--story-footer-color) } - &-title { margin-bottom: .625em } - - &-body { - min-height: 250px; - padding: 1rem 0 1rem 2rem; - } - - &-lower { - color: var(--story-content-color); - flex: 1 1 auto; - letter-spacing: .02em; - margin-bottom: 1.5em; - } - - &-excerpt { - @extend %secundary-font; - // font-family: $secundary-font; - // color: rgba(0, 0, 0, 0.84); - font-weight: 300; - line-height: 1.6; - } -} - -// Travel -> Story For Travel -// ----------------------------------------------------------------------------- - -.story-travel { - margin-bottom: 3.5em; - - .flow-meta { margin-bottom: 1.25em; } - - &-image-link { - padding-top: 66.5%; - margin-bottom: 1.375em; - } - - &-title { - @extend %secundary-font; - - font-weight: 400; - line-height: 1.4; - } -} - -// Home Banner -> for story cover in top home page -// ----------------------------------------------------------------------------- -.home-banner { - .h-cover-header { - padding: 30px 3.846153846% 20px; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, .6) 100%); - } - - // .h-cover-img { opacity: .6 } - .h-cover-items:hover .h-cover-bg { opacity: .4 } -} - -// stylelint-disable-next-line -.h-cover-items, // story cover for home page -.sf-cover { // story featured Cover for travel - .flow-meta { color: rgba(255, 255, 255, .85) } - - .flow-meta-cat { - color: #fff; - background-image: linear-gradient(to top, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .5) 0), linear-gradient(to top, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, .35) 0); - } -} - -// blog -> Story for Blog -// ----------------------------------------------------------------------------- - -.is-blog .story-feed { - padding-top: 4rem; - padding-bottom: 4rem; -} - -.entry { - margin-bottom: 4rem; - - &-bg { opacity: 0; } - - &-image { - margin-bottom: 3rem; - padding-top: 60%; - - &:hover .entry-bg { opacity: .2; } - } -} - -// Story Grid -// ----------------------------------------------------------------------------- - -.post-box { - &-image { - padding-top: 66.66667%; - } - - &-excerpt { - color: #7d7d7d; - max-height: 3.3em; - line-height: 1.6; - } -} - -// Media query before medium -// ----------------------------------------------------------------------------- -@media #{$md-and-down} { - .hr-list { margin-bottom: 30px; } - - // story default list - .story { - margin-top: 20px; - - &-image { - height: 235px; - display: block; - } - - &-body { padding: 1rem 0 0 } - } -} - -@media #{$md-and-up} { - // travel -> story for template of travel - .story-travel-image-link { padding-top: 130% } - .story-travel-large .story-travel-image-link { padding-top: 61.614%; } - - // blog -> Story for template of blog - .entry { margin-bottom: 6rem; } -} diff --git a/src/scss/components/_widget.scss b/src/scss/components/_widget.scss deleted file mode 100644 index 935e2f1e..00000000 --- a/src/scss/components/_widget.scss +++ /dev/null @@ -1,23 +0,0 @@ -// Newsletter Sidebar -// ========================================================================== -.witget-subscribe { - background: #fff; - border: 5px solid transparent; - padding: 28px 30px; - position: relative; - - &::before { - content: ""; - border: 5px solid #f5f5f5; - box-shadow: inset 0 0 0 1px #d7d7d7; - box-sizing: border-box; - display: block; - height: calc(100% + 10px); - left: -5px; - pointer-events: none; - position: absolute; - top: -5px; - width: calc(100% + 10px); - z-index: 1; - } -} diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss deleted file mode 100644 index 3dad0da9..00000000 --- a/src/scss/layout/_footer.scss +++ /dev/null @@ -1,105 +0,0 @@ -// Footer -// ----------------------------------------------------------------------------- - -.footer { - background-color: $footer-bg-color; - padding: 5vw 0; - color: $footer-color; - - a { - color: $footer-color-link; - &:hover { color: $footer-color-link-hover; } - } - - &-divider { - background-color: #444 !important; - margin: 1.5rem 0 !important; - } - - .icon--favorite { - height: 14px; - width: 14px; - color: red; - } -} - -// Footer Memu -// ----------------------------------------------------------------------------- - -.footer-menu { - li { - display: inline-block; - margin-right: 1rem; - } -} - -// Footer Social Media -// ----------------------------------------------------------------------------- -/* stylelint-disable-next-line */ -.footer-social-media a { - margin-right: 1rem; -} - -// Footer Subscribe -// ----------------------------------------------------------------------------- - -.f { - &-subscribe-left { - @extend %secundary-font; - - p { color: $footer-color-subscribe } - } - - &-form { - &-input { - flex: 1; - margin-right: 20px; - background-color: $footer-bg-input-color; - color: $footer-color-input; - border-color: transparent; - } - - .button { width: 115px } - - // Error - &.error, - &.invalid { - .message-error { - color: #ec694b; - display: block !important; - } - } - - // success - &.success .message-success { - color: #acd053; - display: block !important; - } - - // Animation Loafing - &.loading { - .button-text { display: none } - - .icon--loader { - display: inline-block !important; - animation: spin .8s linear infinite; - } - } - } -} - -// BreakPoint after md -// ----------------------------------------------------------------------------- - -@media #{$md-and-up} { - .footer-social-media { text-align: right; } - .f-subscribe { justify-content: space-between } - .f-subscribe-right { width: 70%; max-width: 485px; padding-left: 20px; } - .f-subscribe-left { max-width: 620px; margin-bottom: 0 } -} - -@media #{$md-and-down} { - .footer { - padding-bottom: 4rem; - } -} diff --git a/src/scss/layout/_grid.scss b/src/scss/layout/_grid.scss deleted file mode 100644 index 87d9c459..00000000 --- a/src/scss/layout/_grid.scss +++ /dev/null @@ -1,141 +0,0 @@ -// Container -.extreme-container { - @extend .u-marginAuto; - - box-sizing: border-box; - // margin-left: auto; - // margin-right: auto; - max-width: 1232px; - padding-left: $container-gutter-width; - padding-right: $container-gutter-width; - width: 100%; -} - -.post-fluid { max-width: 1650px } - -// @media #{$lg-and-up} { -// .content { -// // flex: 1 !important; -// max-width: calc(100% - 340px) !important; -// // order: 1; -// // overflow: hidden; -// } - -// .sidebar { -// width: 340px !important; -// // flex: 0 0 340px !important; -// // order: 2; -// } -// } - -.col-left { - width: 100%; - // flex: 1 !important; - // flex-basis: 0; - // flex-grow: 1; - // max-width: 100%; - // padding-right: 10px; - // padding-left: 10px; -} - -// @media #{$md-and-up} { -// } - -@media #{$lg-and-up} { - .col-left, .author .title-line { max-width: calc(100% - 360px) } - // .cc-video-left { max-width: calc(100% - 320px) } - // .cc-video-right { flex-basis: 320px !important; max-width: 320px !important; } - // .cc-video-right { width: 320px; flex: 0 0 auto !important } - body.is-article .col-left { padding-right: 40px } -} - -.col-right { - @extend %flex; - @extend %direction-column; - // display: flex; - // flex-direction: column; - // padding-left: $container-gutter-width; - // padding-right: $container-gutter-width; - width: 332px; - margin-left: auto; -} - -.row { - @extend %flex; - @extend %direction-row; - // display: flex; - // flex-direction: row; - flex-wrap: wrap; - flex: 0 1 auto; - margin-left: - $container-gutter-width; - margin-right: - $container-gutter-width; - - .col { - flex: 0 0 auto; - box-sizing: border-box; - padding-left: $container-gutter-width; - padding-right: $container-gutter-width; - - $i: 1; - - @media #{$sm-and-down} { - &.col-s12 { - flex-basis: 100% !important; - max-width: 100% !important; - } - } - - @while $i <= $num-cols { - $perc: unquote((100 / ($num-cols / $i)) + "%"); - - &.s#{$i} { - flex-basis: $perc; - max-width: $perc; - } - - $i: $i + 1; - } - - @media #{$md-and-up} { - - $i: 1; - - @while $i <= $num-cols { - $perc: unquote((100 / ($num-cols / $i)) + "%"); - - &.m#{$i} { - flex-basis: $perc; - max-width: $perc; - } - - $i: $i + 1; - } - } - - @media #{$lg-and-up} { - - $i: 1; - - @while $i <= $num-cols { - $perc: unquote((100 / ($num-cols / $i)) + "%"); - - &.l#{$i} { - flex-basis: $perc; - max-width: $perc; - } - - $i: $i + 1; - } - } - } - - &.no-gutters { - margin-left: 0; - margin-right: 0; - - .col { - padding-left: 0; - padding-right: 0; - } - } -} diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss deleted file mode 100644 index f819840d..00000000 --- a/src/scss/layout/_header.scss +++ /dev/null @@ -1,202 +0,0 @@ -// Header -// ----------------------------------------------------------------------------- - -.header { - background-color: var(--header-bg-color); - // box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.3); - box-shadow: 0 0 16px 0 rgba(0, 0, 0, .2); - height: $header-height; - padding: 0 16px; - position: sticky; - top: 0; - // transition: all 1s ease; - transition: all .5s ease-in-out; - z-index: 10; - - &-logo { - color: var(--header-logo-color); - height: 30px; - - img { height: 100% } - } -} - -// Header Menu -// ----------------------------------------------------------------------------- - -.nav { - padding-top: 8px; - padding-bottom: 8px; - position: relative; - overflow: hidden; - - ul { - @extend %flex; - // display: flex; - margin-right: 20px; - overflow: hidden; - white-space: nowrap; - } -} - -// stylelint-disable -.header-left .hla, -.nav ul li a { - display: inline-block; - font-weight: 500; - padding: 0 8px; - text-align: center; - text-transform: uppercase; - vertical-align: middle; - letter-spacing: .02em; - line-height: 60px; - cursor: pointer; -} - -.nav ul > li > a { - color: var(--header-menu-color); - - &.active, - &:hover { - color: var(--header-menu-color-hover); - } -} - -.header-left .hla { - color: var(--header-color); - &:hover { color: var(--header-color-hover);} -} -// stylelint-enable - -// Menu Bugger Button for show menu in mobile -// ----------------------------------------------------------------------------- - -.menu-burger { - height: 48px; - position: relative; - transition: transform .4s; - width: 48px; - - span { - background-color: var(--header-color); - display: block; - height: 2px; - left: 14px; - margin-top: -1px; - position: absolute; - top: 50%; - transition: .4s; - width: 20px; - - &:first-child { transform: translate(0, -6px); } - &:last-child { transform: translate(0, 6px); } - } -} - -// Header Social Media -// ----------------------------------------------------------------------------- - -.header-social-media { - // stylelint-disable-next-line - & > a { - flex-basis: 100%; - text-align: center; - padding: 5px; - } -} - -// Header DropDown menu -// ----------------------------------------------------------------------------- - -.drop { - &-content { - background: var(--drop-bg-color); - box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, .05); - display: none; - margin: 0; - min-width: 430px; - padding: 20px; - right: -24px; - top: 100%; - z-index: 11; - - // stylelint-disable-next-line - a { - color: var(--drop-color-link); - // stylelint-disable-next-line - &:hover { color: var(--drop-color-link-hover); } - } - - .header-social-media .icon { - height: 26px; - width: 26px; - } - } - - &-border { - border-bottom: 1px solid var(--drop-border-color); - } -} - -.dropdown { - &::before { - border: 10px solid transparent; - bottom: 0; - content: ''; - display: none; - height: 0; - left: 50%; - margin-left: -10px; - position: absolute; - transition: opacity .03s linear, visibility .03s linear; - width: 0; - border-bottom-color: var(--drop-bg-color); - } - - &:hover { - &::before, - .drop-content { - display: block; - animation: dropdown-display .4s cubic-bezier(.73, .005, .22, 1); - } - } -} - -// Account Header -// ----------------------------------------------------------------------------- - -.account-menu { - min-width: 240px; - - .login { - padding: 12px 0 18px; - - // &:hover { color: #555; } - } -} - -// Breakpoint -// ----------------------------------------------------------------------------- - -@media #{$lg-and-down} { - .header-left { flex-grow: 1 !important; } - .header-logo span { font-size: 24px } - - // show menu mobile - body.has-menu { - overflow: hidden; - - .sideNav { transform: translateX(0); } - - .menu-burger { - border: 0; - transform: rotate(90deg); - - span:first-child { transform: rotate(45deg) translate(0, 0); } - span:nth-child(2) { transform: scaleX(0); } - span:last-child { transform: rotate(-45deg) translate(0, 0); } - } - - .main, .footer { transform: translateX(-25%) !important } - } -} diff --git a/src/scss/layout/_page-hero.scss b/src/scss/layout/_page-hero.scss deleted file mode 100644 index fdb4f38b..00000000 --- a/src/scss/layout/_page-hero.scss +++ /dev/null @@ -1,25 +0,0 @@ -// Page Hero -// ----------------------------------------------------------------------------- - -.page-hero { - &-wrap { - padding: 40px 0; - // color: rgb(41, 67, 75); - color: #343f44; - } - - &-name { padding: 70px 0 60px } - - &-content { - line-height: 1.6; - - & > * { margin-bottom: 1rem } - a { box-shadow: inset 0 -2px 0 currentColor } - } -} - -@media #{$md-and-down} { - .page-hero-name { - padding: 20px 0 40px; - } -} diff --git a/src/scss/layout/_sidebar.scss b/src/scss/layout/_sidebar.scss deleted file mode 100644 index a9218aca..00000000 --- a/src/scss/layout/_sidebar.scss +++ /dev/null @@ -1,81 +0,0 @@ -// Sidebar -// ----------------------------------------------------------------------------- - -.sidebar { - &-title { - border-bottom: 1px solid var(--border-bottom-color); - margin-bottom: 30px; - font-weight: 500; - } -} - -// Sidebar Post -// ----------------------------------------------------------------------------- - -.sidebar-post { - background-color: var(--sidebar-post-bg); - border-bottom: 1px solid rgba(0, 0, 0, 0.0785); - box-shadow: 0 1px 7px var(--border-bottom-color); - min-height: 60px; - - h3 { padding: 10px } - - // border for post - &-border { - border-left: 3px solid var(--composite-color); - color: rgba(0, 0, 0, .2); - padding: 0 10px; - -webkit-text-fill-color: transparent; - -webkit-text-stroke-width: 1.5px; - -webkit-text-stroke-color: #888; - } - - &:hover { .sidebar-post-border { background-color: var(--sidebar-post-border-color) } } - - &:nth-child(3n) { .sidebar-post-border { border-color: darken(orange, 2%); } } - &:nth-child(3n+2) { .sidebar-post-border { border-color: #26a8ed } } -} - -// Sidebar Widget Form -// ----------------------------------------------------------------------------- - -.swf { - &.error, - &.invalid, - &.success { - .message-error, - .message-success { - color: #fff; - padding: 10px; - margin-top: 10px; - } - } - - &.error, - &.invalid { - .message-error { - background: #ec694b; - display: block !important; - } - } - - // success - &.success .message-success { - background: #acd053; - display: block !important; - } - - // Animation Loafing - &.loading { - .button-text { display: none } - - .icon--loader { - display: inline-block !important; - animation: spin .8s linear infinite; - } - } -} -// Twitter Widget -// ----------------------------------------------------------------------------- - -.widget-twitter > div { border: 1px solid rgba(0, 0, 0, 0.1) } diff --git a/src/scss/layout/_sidenav.scss b/src/scss/layout/_sidenav.scss deleted file mode 100644 index bd3d330d..00000000 --- a/src/scss/layout/_sidenav.scss +++ /dev/null @@ -1,38 +0,0 @@ -// Navigation Mobile -.sideNav { - background-color: var(--header-bg-color); - color: var(--sidenav-color); - height: 100vh; - padding: $header-height 20px; - position: fixed !important; - transform: translateX(100%); - transition: 0.4s; - will-change: transform; - z-index: 8; - - &-menu a { padding: 10px 0; } - - &-wrap { - background: var(--sidenav-bg); - overflow: auto; - padding: 0 20px 20px; - top: $header-height; - } - - &-item { - border-bottom: 1px solid var(--sidenav-border-color); - padding: 20px 0 19px; - } - - &-follow { - & > a { - padding: 0 5px; - display: block; - } - - .icon { - width: 24px; - height: 24px; - } - } -} diff --git a/src/scss/main.scss b/src/scss/main.scss deleted file mode 100644 index 3bfc5f3b..00000000 --- a/src/scss/main.scss +++ /dev/null @@ -1,76 +0,0 @@ -// Style entry file -// -------------------------------------------------- -@charset "UTF-8"; - -// Lib -// -------------------------------------------------- - -@import "node_modules/normalize.css/normalize"; -// @import "node_modules/prismjs/plugins/line-numbers/prism-line-numbers"; - -// Abstracts -// -------------------------------------------------- -@import "abstracts/variables"; -@import "abstracts/mixins"; - -// Root -// -------------------------------------------------- -@import "root/root"; -@import "root/dark-mode"; - -// Base -// -------------------------------------------------- -@import "base/global"; -@import "base/typography"; -@import "base/utilities"; - -// Layout -// -------------------------------------------------- -@import "layout/grid"; -@import "layout/header"; -@import "layout/footer"; -@import "layout/sidebar"; -@import "layout/sidenav"; -@import "layout/page-hero"; - -// Components -// -------------------------------------------------- -@import "components/buttons"; -@import "components/animated"; -@import "components/icons"; -// @import "components/newsletter"; -@import "components/search"; -@import "components/story"; -@import "components/prism"; -@import "components/cover"; -@import "components/kg-embed-and-gallery"; -@import "components/bookmark"; -@import "components/sticky"; -@import "components/comments"; -@import "components/widget"; -@import "components/pagination"; -@import "components/previous-next-post"; -@import "components/share"; -@import "components/instagram"; - -// Pages -// -------------------------------------------------- -@import 'pages/home'; -@import 'pages/post'; -@import 'pages/post-image'; -@import 'pages/post-video'; -@import 'pages/post-single'; -@import 'pages/author'; -@import 'pages/archive-author'; -@import 'pages/archive-contact'; -@import 'pages/page-about'; -@import 'pages/podcast'; -@import 'pages/category'; -@import 'pages/archive-tags'; -@import 'pages/archive-newsletter'; -@import "pages/membership"; -@import 'pages/error'; - -// Members -// -------------------------------------------------- -@import 'members/account'; diff --git a/src/scss/members/_account.scss b/src/scss/members/_account.scss deleted file mode 100644 index ced07da7..00000000 --- a/src/scss/members/_account.scss +++ /dev/null @@ -1,12 +0,0 @@ -// page Account -// ----------------------------------------------------------------------------- - -.site-account { - padding: 5vw; -} - -.account-box { - width: 100%; - max-width: 500px; - margin: 0 auto; -} diff --git a/src/scss/pages/_archive-author.scss b/src/scss/pages/_archive-author.scss deleted file mode 100644 index 6d86b00b..00000000 --- a/src/scss/pages/_archive-author.scss +++ /dev/null @@ -1,44 +0,0 @@ -// Page Archive Authors -// ----------------------------------------------------------------------------- - -.author-card { - padding: 0 10px; - - &-avatar { - height: 280px; - - img { - // filter: brightness(1) contrast(.9) grayscale(1); - box-shadow: 8px 8px 0 0 var(--archive-author-bg-img); - transition: all .2s ease; - - &:hover { box-shadow: 0 0 var(--archive-author-bg-img) } - } - } - - &-website { color: #999 } - &-website:hover { opacity: .8; } - &-name:hover { opacity: .6; } - - &-bio { - padding-top: 4px; - margin-bottom: 12px; - line-height: 1.5; - } - - .button { - flex: 1 0 0; - height: 32px; - line-height: 30px; - } - - &-media { - .button:last-child { - margin-left: -.05rem; - } - - .button:not(:first-child):not(:last-child) { - margin-left: -.05rem; - } - } -} diff --git a/src/scss/pages/_archive-contact.scss b/src/scss/pages/_archive-contact.scss deleted file mode 100644 index 4cc33ca8..00000000 --- a/src/scss/pages/_archive-contact.scss +++ /dev/null @@ -1,57 +0,0 @@ -// Archive Contact Page -// ----------------------------------------------------------------------------- - -.contact { - &-form { - width: 100%; - max-width: 510px; - text-align: center; - } - - // background 1 - &-stain { - width: 75%; - height: auto; - top: -40px; - left: 15%; - z-index: 1; - } - - // background 2 - &-svg { - z-index: 3; - top: 0; - left: 11%; - width: 80%; - pointer-events: none; - } - - &-maps::before { - height: 50px; - width: 2px; - background: #85aeaa; - content: ''; - display: inline-block; - margin-bottom: 90px; - } -} - -// pae (Phone - Adress - email) -// ----------------------------------------------------------------------------- - -.pae { - margin-bottom: 60px; - margin-top: 100px; - - &-icon svg { - width: 64px; - height: 64px; - } - - &-title { - font-size: 1.2rem; - margin: 20px 0; - letter-spacing: 0.05em; - font-weight: 500 - } -} diff --git a/src/scss/pages/_archive-newsletter.scss b/src/scss/pages/_archive-newsletter.scss deleted file mode 100644 index a40950aa..00000000 --- a/src/scss/pages/_archive-newsletter.scss +++ /dev/null @@ -1,158 +0,0 @@ -// .is-newsletter { -// color: rgba(0, 42, 115, .02); -// } - -// Newsletter Page -// ----------------------------------------------------------------------------- - -.ne { - // color: rgb(41, 67, 75); - - &-t::before { - background-color: #e0f6ec; - bottom: 5%; - content: ""; - display: block; - height: 20px; - left: 50%; - position: absolute; - transform: translateX(-50%); - width: 105%; - z-index: -1; - } - - &-body ul li { font-size: 1rem } -} - -// Newsletter Form -// ----------------------------------------------------------------------------- - -.godo-ne { - @extend %primary-font; - // font-family: $primary-font; - background: #fff; - border-radius: 4px; - border: solid 1px #e6e8eb; - box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .03), inset 0 4px 0 0 rgb(39, 193, 125); - margin: 40px auto 30px; - max-width: 600px; - min-width: auto !important; - padding: 30px 50px 40px 50px; - position: relative; - width: 100%; - - &-form { - width: 100%; - - label { - color: var(--newsletter-color); - display: block; - font-size: 0.75rem; - font-weight: 500; - letter-spacing: 0.1em; - margin: 0 0 15px 0; - text-transform: uppercase; - } - - small { - display: block; - font-size: 12px; - margin: 15px 0 0; - opacity: .8; - } - - &-group { - @extend %flex-align-items-center; - @extend %justify-content-center; - } - } - - &-input { - @extend %primary-font; - - margin-right: 10px; - - &.error { border-color: #e16767 } - } - - // &-button { - // @extend .button; - // @extend .button--dark; - // @extend .button--large; - // } - - &-success { - text-align: center; - h3 { font-size: 1.4rem; font-weight: 600; margin-bottom: 20px; } - p { font-size: 15px; font-style: italic } - } -} - -// Newsletter Quotes -// ----------------------------------------------------------------------------- - -.godo-n-q { - @extend %flex; - // display: flex; - margin: 2vw 0; - position: relative; - z-index: 2; - - blockquote { - @extend %secundary-font; - // font-family: $secundary-font; - border: 0; - font-size: 1rem; - font-style: normal; - line-height: 1.5em; - margin: 20px 0 0 0; - opacity: 0.8; - padding: 0; - color: inherit; - - &::before { display: none } - } - - img { - border-radius: 100%; - border: #fff 5px solid; - box-shadow: 0 1px 7px rgba(0, 0, 0, .18); - display: block; - height: 105px; - width: 105px; - } - - h3 { - font-size: 1.4rem; - font-weight: 500; - margin: 10px 0 0 0; - color: currentColor; - } - - &-i { - @extend %primary-font; - @extend %flex-align-items-center; - @extend %direction-column; - - flex: 1 1 300px; - margin: 0 20px 40px; - text-align: center; - } - - &-d { - color: var(--newsletter-color); - font-size: 13px; - font-weight: 500; - letter-spacing: 1px; - line-height: 1.3em; - margin: 6px 0 0 0; - text-transform: uppercase; - } -} - -// media Query -@media #{$md-and-down} { - .godo-ne-input { margin: 0 0 10px } - .godo-ne-form-group { flex-direction: column } - .godo-ne-button { width: 100%; margin-bottom: 5px } -} diff --git a/src/scss/pages/_archive-tags.scss b/src/scss/pages/_archive-tags.scss deleted file mode 100644 index e80be809..00000000 --- a/src/scss/pages/_archive-tags.scss +++ /dev/null @@ -1,26 +0,0 @@ -.topic { - &-img { - transition: transform .7s; - transform: translateZ(0) - } - - // &-gradient { - // background: linear-gradient(to right, #ff416c, #ff4b2b); - // } - - &-card { - height: 320px; - padding: 30px; - letter-spacing: 0.02em; - background: linear-gradient(60deg, #562db5, #19afc9); - - &:hover { - .topic-img { transform: scale(1.03); } - .topic-bg { opacity: .5; } - } - } -} - -@media #{$md-and-down} { - .topic-card { height: 200px } -} diff --git a/src/scss/pages/_author.scss b/src/scss/pages/_author.scss deleted file mode 100644 index 806418af..00000000 --- a/src/scss/pages/_author.scss +++ /dev/null @@ -1,83 +0,0 @@ -// Author page -// ========================================================================== - -.author { - &-inner { - // margin-bottom: 30px; - padding: 40px 5%; - width: 90%; - } - - &-left { - width: 216px; - margin-right: 50px; - } - - &-avatar { - height: 216px; - width: 216px; - overflow: hidden; - - img { border: 8px solid #ddd; } - } - - &-bio { - color: #555; - font-size: 1.2rem; - font-weight: 400; - line-height: 150%; - width: 100%; - } - - &-meta span { - display: inline-block; - font-size: 17px; - font-style: italic; - margin: 0 25px 16px 0; - opacity: .8; - word-wrap: break-word; - } - - &-follow .button { - background-color: #fff; - border: 1px solid #000; - color: #000; - margin-bottom: 10px; - - &:hover { - border-color: transparent; - color: #fff; - } - } - - .fb:hover { background-color: #3b5998 !important; } - .tw:hover { background-color: #55acee !important; } - .rs:hover { background-color: #e99804 !important; } - - .title-line { - &::before { background: #444 } - } - - // .u-oblique { background: #000 } -} - -@media #{$md-and-down} { - .author { - &-inner { - width: 100%; - flex-direction: column; - text-align: center; - margin-bottom: 0; - } - - &-left { - margin: 0 auto 20px auto; - width: 150px; - } - - &-avatar { - width: 150px; - height: 150px; - } - } -} diff --git a/src/scss/pages/_category.scss b/src/scss/pages/_category.scss deleted file mode 100644 index 6ec7750f..00000000 --- a/src/scss/pages/_category.scss +++ /dev/null @@ -1,18 +0,0 @@ -// Page Tag -// ----------------------------------------------------------------------------- -.site-category { - // background: linear-gradient(60deg, #562db5, #19afc9); - background: #391f69; - background-image: linear-gradient(91.1deg, #391f69 -2.3%, #732b9b 44.4%, #cc116e 103.4%); - - &-body { padding: 3rem $container-gutter-width; min-height: 220px; } -} - -@media #{$lg-and-up} { - .site-category { - text-align: left; - - &-count { margin-top: 0 } - &-description { margin-left: 0; } - } -} diff --git a/src/scss/pages/_error.scss b/src/scss/pages/_error.scss deleted file mode 100644 index 7b05820a..00000000 --- a/src/scss/pages/_error.scss +++ /dev/null @@ -1,11 +0,0 @@ -// Error Page 404 -// ----------------------------------------------------------------------------- - -.page-error { - &-title { font-size: 250px } - &-wrap { padding: 5vw 4vw } -} - -@media #{$md-and-down} { - .page-error-title { font-size: 180px } -} diff --git a/src/scss/pages/_home.scss b/src/scss/pages/_home.scss deleted file mode 100644 index ecc50d93..00000000 --- a/src/scss/pages/_home.scss +++ /dev/null @@ -1,142 +0,0 @@ -// Story for home page top && Story for template fashion -// ----------------------------------------------------------------------------- -.h-cover { - padding: 4px; - min-height: 400px; - - &-items { - padding: 4px; - overflow: hidden; - height: 350px; - width: 100%; - - &.firts { height: 500px } - } - - &-inner { height: 100% } - &-img { transition: all .25s } - - &-header { - bottom: 0; - left: 0; - right: 0; - } - - &-excerpt { color: #888; } -} - -// Fashopn -> Post Box Featured -.fashion-featured { - .h-cover-header { - background-color: var(--fashion-featured-bg); - right: 18%; - padding: 15px 20px 0 0 - } - - .h-cover-items { padding: 10px; } - - .h-cover-title { - color: var(--post-title-color); - &:hover { opacity: .6; } - } -} - -// Story Featured Cover for travel post -// ----------------------------------------------------------------------------- - -.sf-cover { - min-height: calc(100vh - 100px); - - &-title { - @extend %secundary-font; - - line-height: 1.3; - } - - .flow-meta { justify-content: center; } -} - -// .bg-lines { -// position: absolute; -// top: 0; -// left: 50%; -// width: 100%; -// max-width: 1280px; -// height: 100%; -// transform: translateX(-50%); -// } - -// .bg-line { -// position: absolute; -// top: 0; -// width: 1px; -// height: 100%; -// background-color: rgba(153, 153, 153, .25); - -// &--1 { left: 0 } -// &--2 { left: calc(100% / 4 * 1) } -// &--3 { left: calc(100% / 4 * 2) } -// &--4 { left: calc(100% / 4 * 3) } -// &--5 { right: 0 } -// } - -// Home Page Personal Cover page -// ----------------------------------------------------------------------------- -.hm-cover { - padding: 30px 0; - min-height: 100vh; -} - -.hm-down { - animation-duration: 1.2s !important; - bottom: 60px; - color: hsla(0, 0%, 100%, .5); - left: 0; - margin: 0 auto; - position: absolute; - right: 0; - width: 70px; - z-index: 100; - - svg { - display: block; - fill: currentcolor; - height: auto; - width: 100%; - } -} - -// Media Query -// ----------------------------------------------------------------------------- -@media #{$md-and-up} { - // home featured story - .h-cover { - &-items { width: 50%; } - &-items.firts { width: 100%; } - } -} - -@media #{$lg-and-up} { - // home featured story - .h-cover { - height: 60vh; - - &-items { - height: 50%; - width: 33.33333%; - } - - &-items.firts { - height: 100%; - width: 66.66666%; - } - } - - .fashion-featured { - height: 80vh; - min-height: 600px; - } - - // Story Grid - .home-story-grid .post-box-title { font-size: 18px } -} diff --git a/src/scss/pages/_membership.scss b/src/scss/pages/_membership.scss deleted file mode 100644 index 1823f554..00000000 --- a/src/scss/pages/_membership.scss +++ /dev/null @@ -1,91 +0,0 @@ -// checkout -// -------------------------------------------------- - -.is-membership { - background: rgba(0, 42, 115, .02); - // .main { margin-bottom: 0; } -} - -.checkout { - &-wrap { - margin: 5vw auto 10vw; - text-align: center; - } - - &-title { @extend %secundary-font; } - - &-des { - // color: #121519; - opacity: .6; - margin: 0 auto 60px; - max-width: 500px; - } - - &-plan { - padding: 30px; - border-radius: 4px; - background-color: var(--member-plan-bg); - border: solid 1px var(--member-plan-border); - text-align: left; - min-width: 290px; - box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .03), inset 0 4px 0 0 var(--composite-color); - } -} - -.checkout-plan-header { - position: relative; - padding: 0 0 50px; - color: #8392a5; - text-align: center; -} - -.checkout-plan-header h3 { - margin: 0 0 25px 0; - font-size: 1.2rem; - font-weight: 700; - color: var(--member-color); - text-transform: uppercase; -} - -.checkout-plan-header span { - font-size: 2.2rem; - font-weight: 300; -} - -.checkout-plan-header strong { - color: var(--member-color); - font-size: 4rem; - font-weight: 500; -} - -.checkout-plan-header::after { - content: ""; - display: block; - height: 2px; - position: absolute; - bottom: 25px; - left: 30%; - right: 30%; - background: var(--member-plan-border); - // background: rgba(39, 44, 49, .08); - border-radius: 2px; -} - -.checkout-plan-content { justify-content: space-between } - -.checkout-plan-content li { - position: relative; - margin: 0; - padding: 0 0 15px 20px; - line-height: 1.4em; -} - -.checkout-plan-content li::before { - display: block; - position: absolute; - left: 0; - font-size: 1.2rem; - font-weight: 600; - color: var(--composite-color); - content: "✓"; -} diff --git a/src/scss/pages/_page-about.scss b/src/scss/pages/_page-about.scss deleted file mode 100644 index bd608ec8..00000000 --- a/src/scss/pages/_page-about.scss +++ /dev/null @@ -1,12 +0,0 @@ -.about { - padding-bottom: 5vh; - - &-header { - min-height: 55vh; - - &-inner { padding-bottom: 3em } - } - - &-title { font-size: 90px } - &-gradient { background: linear-gradient(135deg, rgba(16, 43, 123, 0.7), rgba(46, 204, 113, 0.7)) } -} diff --git a/src/scss/pages/_podcast.scss b/src/scss/pages/_podcast.scss deleted file mode 100644 index b5009f88..00000000 --- a/src/scss/pages/_podcast.scss +++ /dev/null @@ -1,154 +0,0 @@ -// Podcast page -// ----------------------------------------------------------------------------- - -.spc { - &-header { - &::before, - &::after { - content: ''; - left: 0; - position: absolute; - width: 100%; - display: block; - z-index: 2; - } - - &::before { - height: 200px; - top: 0; - background-image: linear-gradient(to top, transparent, $podcast-card-bg-dark); - } - - &::after { - height: 300px; - bottom: 0; - background-image: linear-gradient(to bottom, transparent, $podcast-color-bg-dark); - } - } - - // Podcast Content - &-h { - &-inner { - padding: calc(9vw + 55px) 4vw 120px; - font-size: 1.25rem; - } - - &-t { font-size: 4rem } - - // Excerpt - &-e { - color: #fecd35; - font-size: 16px; - font-weight: 600; - letter-spacing: 5px; - margin-top: 5px; - text-transform: uppercase; - } - } - - // Description - &-des { - margin: 40px auto 30px; - line-height: 1.4; - font-family: Georgia, 'Merriweather', serif; - opacity: .8; - - em { - font-style: italic; - color: #fecd35; - } - } - - // buttons RSS - &-buttons .button { - background: hsla(0, 0%, 100%, .9); - border-radius: 35px; - transition: background .5s ease; - - &:hover { - background: #fff; - color: #000; - } - - img { - display: inline-block; - height: 20px; - margin: 0 8px 0 0; - width: auto; - } - } -} - -// Podcast Card (Story) -// ----------------------------------------------------------------------------- -.spc-c { - color: #fff; - background-color: $podcast-card-bg-dark; - - &-img { - min-height: 200px; - width: 100%; - - &::after { - content: ''; - position: absolute; - bottom: 0; - top: auto; - width: 100%; - height: 70%; - background-image: linear-gradient(to bottom, transparent, $podcast-card-bg-dark); - } - } - - &-body { - padding: 15px 20px; - } -} - -// Podcast Button Play -// ----------------------------------------------------------------------------- -.listen-btn { - border: 2px solid var(--podcast-button-color); - color: var(--podcast-button-color); - letter-spacing: 3px; - transition: all .1s linear; - - &:hover { - color: #fff; - background-color: var(--podcast-button-color); - } -} - -// Page Podcast -// ----------------------------------------------------------------------------- -.is-podcast { - background-color: $podcast-color-bg-dark !important; - - .flow-meta-cat, .flow-meta, .header-left > li > a, .nav ul li a { color: #fff } - // .header-line { border-color: rgba(255, 255, 255, 0.1) } - .menu-burger span { background-color: #fff } - .footer, .header { background-color: $podcast-color-bg-dark } -} - -// Media query -// ----------------------------------------------------------------------------- -@media #{$lg-and-up} { - .spc-c { - display: flex; - - &-img { - width: 285px; - flex: 0 0 auto; - - &::after { - top: 0; - right: 0; - width: 140px; - height: 100%; - background-image: linear-gradient(to right, transparent, $podcast-card-bg-dark); - } - } - } - - .spc-h-inner { font-size: 1.875rem; } -} diff --git a/src/scss/pages/_post-image.scss b/src/scss/pages/_post-image.scss deleted file mode 100644 index 9ea1637b..00000000 --- a/src/scss/pages/_post-image.scss +++ /dev/null @@ -1,18 +0,0 @@ -// Image Post Format -// ----------------------------------------------------------------------------- -.cc-image { - height: 96vh; - min-height: 500px; - - &::before { - background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, .4)); - content: ''; - display: block; - height: 200px; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index: 2; - } -} diff --git a/src/scss/pages/_post-single.scss b/src/scss/pages/_post-single.scss deleted file mode 100644 index 19f85bf0..00000000 --- a/src/scss/pages/_post-single.scss +++ /dev/null @@ -1,13 +0,0 @@ -.is-article-single { - .post-body-wrap { margin-left: 0 !important } - .post-share { left: -100px } - - // Large Image gallery - .kg-width-full .kg-image { max-width: 100vw } - .kg-width-wide .kg-image { max-width: 1200px } - - .kg-gallery-container { - max-width: 1200px; - width: 100vw; - } -} diff --git a/src/scss/pages/_post-video.scss b/src/scss/pages/_post-video.scss deleted file mode 100644 index cae1ff87..00000000 --- a/src/scss/pages/_post-video.scss +++ /dev/null @@ -1,52 +0,0 @@ -// Video post Format -// ----------------------------------------------------------------------------- - -.cc-video { - background-color: #1e1e1e; - padding: ($header-height + 30px) 0 50px; - - &-excerpt { color: #aaa } - - &-cont { - padding: 0 0 56.25%; - height: 0; - } - - // close video Fixed - &-close { - left: -18px; - position: absolute; - display: none; - top: -18px; - z-index: 5; - } -} - -// Breakpoint -// ----------------------------------------------------------------------------- - -@media #{$lg-and-down} { - .cc-video-cont { margin: 0 -16px 30px -16px } -} - -// Breakpoint Video Fixec -// ----------------------------------------------------------------------------- - -@media #{$xl-and-up} { - body.has-video-fixed { - .cc-video-embed { - bottom: 20px; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5); - height: auto; - padding-bottom: 0; - position: fixed; - right: 20px; - width: 360px; - z-index: 8; - } - - .cc-video-close { display: block } - } - - .cc-video-title { font-size: 2.6rem } -} diff --git a/src/scss/pages/_post.scss b/src/scss/pages/_post.scss deleted file mode 100644 index 2b1ecf82..00000000 --- a/src/scss/pages/_post.scss +++ /dev/null @@ -1,233 +0,0 @@ -// Post Content -// ----------------------------------------------------------------------------- - -.post { - margin-bottom: 4.5rem; - - // title - &-title { - line-height: 1.2; - max-width: 1000px; - } - - &-excerpt { - @extend %secundary-font; - - // color: rgba(0, 0, 0, 0.6); - color: var(--post-excerpt-color); - line-height: 1.6; - } - - // author - &-author-social { - vertical-align: middle; - margin-left: 2px; - padding: 0 3px; - } - - &-img { width: 100% } -} - -// Author - Avatar -// ----------------------------------------------------------------------------- - -.avatar-image { - display: inline-block; - vertical-align: middle; - - &--smaller { - width: 50px; - height: 50px; - } -} - -// Post Content Inner -// ----------------------------------------------------------------------------- - -.post-inner { - @extend %secundary-font; - @extend %flex-align-items-center; - @extend %direction-column; - - font-size: 18px; - line-height: 1.7; - - & > *:not(a) { - margin: 1rem 0 1rem 0; - min-width: 100%; - - &:first-child { - margin-top: 2rem; - } - } - - p { margin: 1rem 0 1rem 0; } - - a:not(.kg-bookmark-container):not(.button) { - // box-shadow: inset 0 -2px 0 currentColor; - color: var(--post-color-link); - text-decoration: none; - word-break: break-word; - // transition: color 80ms ease-in, box-shadow 130ms ease-in-out; - transition: color, border-color .2s linear; - border-bottom: 1px solid var(--post-link-border); - - &:hover { border-bottom-color: var(--post-color-link) } - } - - q, - blockquote { - margin: 2.5rem 0 2.5rem 0; - } - - img { - display: block; - margin-left: auto; - margin-right: auto; - } - - h1, h2, h3, h4, h5, h6 { - font-style: normal; - color: var(--post-title-color); - line-height: 1.2; - margin-top: 3rem; - margin-bottom: 1rem; - - & + p { margin-top: 0 } - } - - ul, - ol { - counter-reset: post; - - li { - margin-bottom: 10px; - margin-left: 30px; - - &::before { - box-sizing: border-box; - display: inline-block; - margin-left: -22px; - position: absolute; - text-align: right; - } - } - } - - ul > li::before { - content: "\2022"; - font-family: Georgia, Arial, system-ui; - transform: scale(1.1); - } - - ol > li::before { - content: counter(post) "."; - counter-increment: post; - padding-right: 12px; - } - // warning success and Note - // ----------------------------------------------------------------------------- - - .warning { - background: #fbe9e7; - color: #d50000; - } - - .note { - background: #e1f5fe; - color: #0288d1; - } - - .success { - background: #e0f2f1; - color: #00897b; - } - - .warning, .note, .success { - padding: 20px; - border-radius: 5px; - - // stylelint-disable-next-line - a { - color: inherit !important; - border-color: inherit !important; - } - } -} - -// Post Upgrade -// ----------------------------------------------------------------------------- - -.post-upgrade-cta { - background-color: #F6F1E4; - // box-shadow: rgba(0, 0, 0, 0.15) 0 2px 10px; - padding: 48px 56px; - text-align: center; - max-width: 600px; - min-width: auto !important; - margin: 4rem auto !important; - - .button { width: 270px } -} - -.post-upgrade-title { margin: 0 } - -// Post Related -// ----------------------------------------------------------------------------- - -.post-related { - padding-top: 5%; - padding-bottom: 5%; - background-color: #f8f8f8; - - // &-title { - // border-bottom: 1px solid rgba(0, 0, 0, .0785); - // } -} - -// Light Gallery -// ----------------------------------------------------------------------------- - -.lg-backdrop { background-color: rgba(0, 0, 0, .8) !important } -.lg-sub-html, .lg-toolbar { background-color: rgba(0, 0, 0, .1) !important } - -// Breakpoints Medium devices -// ----------------------------------------------------------------------------- - -@media #{$md-and-down} { - .post-inner { - font-size: 17px; - - q { - font-size: 22px; - line-height: 1.4; - } - - q, - blockquote { - margin: 1.75rem 0 1.75rem 0; - padding-left: 0; - } - - iframe { width: 100% !important } - } -} - -@media #{$lg-and-down} { - .post-header, - .post-author, - .post-body { - max-width: 650px; - margin-left: auto; - margin-right: auto - } -} - -@media #{$lg-and-up} { - body.is-article .post-body-wrap { margin-left: 70px; } - - body.is-video, - body.is-image { - .post-author { margin-left: 70px } - } -} diff --git a/src/scss/root/_dark-mode.scss b/src/scss/root/_dark-mode.scss deleted file mode 100644 index 9e4f48a1..00000000 --- a/src/scss/root/_dark-mode.scss +++ /dev/null @@ -1,163 +0,0 @@ -html[data-theme="dark"] { - --text--title__Color: #eee; - --content-text__Color: #888; - --text--secondary__Color: #888; - - // Header - --header-color: #eee; - --header-color-hover: #bbb; - --header-menu-color: #eee; - --header-menu-color-hover: #bbb; - --header-bg-color: #222; - --header-logo-color: #fff; - - // global - --hr-bg: #444; - --figcaption-color: #888; - --q-color: #888; - --input-bg-color: #444; - --input-color: #eee; - --input-border-color: #444; - - // Search - --search-color-link: #eee; - --search-bg-link: #444; - --search-bg-link-hover: #333; - --search-color-message: #bbb; - - // sidebar - --sidebar-post-bg: #222; - --sidebar-post-border-color: #444; - --border-bottom-color: rgba(255, 255, 255, 0.1); - - // Sidenav - --sidenav-bg: #333; - --sidenav-color: #eee; - --sidenav-border-color: #444; - - // story - --story-color: #fff; - // --story-content-color: #888; - --story-more-link-color: #888; - --story-more-link-border: rgba(160, 160, 160, .15); - // --story-title-color: #eee; - --fashion-featured-bg: #222; - - // DropDown - --drop-bg-color: #333; - --drop-color-link: #eee; - --drop-color-link-hover: #bbb; - --drop-border-color: #444; - - // Post - // --post-title-color: #eee; - --blockquote-color: #fff; - --post-excerpt-color: #888; - // --post-color-link: #fff; - --post-link-border: #444; - --mobile-share-bg: #444; - - // BookMark - --bookmark-bg: #222; - // --bookmark-color: #eee; - --bookmark-meta-color: #eee; - --bookmark-border-color: #444; - // --bookmark-color-des: #888; - - // Membership - --member-plan-bg: #222; - --member-plan-border: #444; - --member-color: #eee; - - // page - --archive-author-bg-img: #888; - - body { - background-color: #222; - color: #eee; - } - - .header { border-bottom: 1px solid #333 } - - .header-dark-mode { - .icon--moon { display: none; } - .icon--sunny { display: inline-block !important; } - } - - .u-bgGray { background-color: #2b2b2b } - - .u-textColorNormal { - color: #bbb; - fill: #bbb; - } - - .u-textColorDarker { - color: #ccc; - fill: #ccc; - } - - // Buttons - .button--line { - border-color: #2b2b2b; - background: #2b2b2b; - color: #fff; - } - - .witget-subscribe { - background-color: #222; - border-color: #444; - color: #eee; - - &::before { - box-shadow: none; - border-color: transparent; - } - } - - // Page Author - .author-bio { color: #eee; } - - // story - .hr-list { border-top-color: rgba(255, 255, 255, 0.07) } - - .text-circle-line { border-bottom-color: #555; } - - // search - .search-message { border-color: #555; } - .search-close { background-color: #444; } - - // Post - .post { - &-inner { - color: #ccc; - - strong { color: #fff; } - } - } - - .post-related { background-color: #1e1e1e; } - .post-upgrade-cta { background-color: #333; } - - // Page - .page-hero-bg { display: none; } - .page-hero-wrap { color: #eee; } - - // page Author - .author-follow .button { - background-color: #666; - color: #eee; - } - - // Page Archive Author - .author-card-media .button { border-color: #eee; } - - // Page Contact - .is-contact .contact-stain { display: none; } - - // Page Newsletter - .godo-ne { - background-color: #222; - border-color: #444; - } - .ne-t::before { background-color: #444 } -} diff --git a/src/scss/root/_root.scss b/src/scss/root/_root.scss deleted file mode 100644 index e0c2fcfb..00000000 --- a/src/scss/root/_root.scss +++ /dev/null @@ -1,97 +0,0 @@ -:root { - // Composite Color - --composite-color: #CC116E; - --composite-color-hover: #cc116ed6; - - // Header - --header-color: #111; - --header-color-hover: #555; - --header-menu-color: #111; - --header-menu-color-hover: #555; - --header-bg-color: #fff; - --header-logo-color: #000; - - // Podcast - --podcast-button-color: #2ecc71; - - // Newsletter - --newsletter-color: #07a131; - - // Color Palete - // --gray--100: #f7f8fa; - // --gray--200: #e8e9ec; - // --gray--300: #aeaeb3; - // --gray--400: #999a9e; - --gray--500: #84858a; - --gray--600: #707177; - // --gray--700: #57585d; - // --gray--800: #4a4b51; - --gray--900: #2d2e34; - - // - --text--secondary__Color: var(--gray--600); - --text--title__Color: #111; - --content-text__Color: var(--gray--900); - - // global - --hr-bg: #ddd; - --figcaption-color: rgba(0, 0, 0, .68); - --q-color: rgba(0, 0, 0, .44); - --input-bg-color: #fff; - --input-color: #303030; - --input-border-color: #ddd; - - // Search - --search-color-link: rgba(0, 0, 0, .7); - --search-bg-link: rgba(0, 0, 0, .05); - --search-bg-link-hover: #dedede; - --search-color-message: #738a94; - - // sidebar - --sidebar-post-border-color: rgba(229, 239, 245, 1); - --sidebar-post-bg: #f8f8f8; - --border-bottom-color: rgba(0, 0, 0, 0.0785); - - // Sidenav - --sidenav-bg: #eee; - --sidenav-color: #111; - --sidenav-border-color: #ddd; - - // story - --story-color: #17181e; - --story-footer-color: var(--text--secondary__Color); - --story-content-color: var(--content-text__Color); - --story-more-link-color: var(--gray--600); - --story-more-link-border: rgba(28, 29, 33, .15); - --story-title-color: var(--text--title__Color); - --fashion-featured-bg: #fff; - - // DropDown - --drop-bg-color: #eee; - --drop-color-link: #111; - --drop-color-link-hover: #555; - --drop-border-color: #ddd; - - // Post - --post-title-color: var(--text--title__Color); - --blockquote-color: #252525; - --post-excerpt-color: rgba(0, 0, 0, 0.6); - --post-color-link: var(--composite-color); - --post-link-border: #e2e1e1; - --mobile-share-bg: #fff; - - // BookMark - --bookmark-bg: #fff; - --bookmark-color: var(--text--title__Color); - --bookmark-meta-color: rgba(0, 0, 0, 0.84); - --bookmark-border-color: rgba(0, 0, 0, 0.1); - --bookmark-color-des: var(--gray--500); - - // Membership - --member-plan-bg: #fff; - --member-plan-border: #e6e8eb; - --member-color: #212529; - - // page - --archive-author-bg-img: #ddd; -} diff --git a/src/scss/signup.scss b/src/scss/signup.scss deleted file mode 100644 index 6c16b7b1..00000000 --- a/src/scss/signup.scss +++ /dev/null @@ -1,206 +0,0 @@ -// Style entry file -// -------------------------------------------------- - -:root { - // Composite Color - --composite-color: #CC116E; - --composite-color-hover: #cc116ed6; -} - -// Lib -// -------------------------------------------------- - -@import "node_modules/normalize.css/normalize"; - -// Abstracts -// -------------------------------------------------- -@import "abstracts/variables"; -@import "abstracts/mixins"; -@import "components/buttons"; -@import "components/icons"; - -// Global Styles -// -------------------------------------------------- - -*, *::before, *::after { - box-sizing: border-box; -} - -body { - background: #f4f8fb; - font-family: $primary-font; - font-size: 1rem; - height: 100vh; - color: #51626a; - overflow-x: hidden; - text-rendering: optimizeLegibility; - line-height: 1.5; -} - -a { - color: #cc116e; - text-decoration: none; - transition: all .5s ease; -} - -img { - height: auto; - max-width: 100%; - vertical-align: middle; - width: auto; - - &:not([src]) { - visibility: hidden; - } -} - -input { - background: #fff; - border-radius: 3px; - border: 0; - color: #303030; - display: block; - font-size: 1rem; - margin: 0; - outline: none; - padding: 0 10px 0 40px; - position: relative; - transition: box-shadow .08s ease-in, color .08s ease-in; - width: 100%; - box-shadow: inset 0 0 0 1px #d7d7d7; - height: 44px; - line-height: 44px; -} - -.u-hide { display: none } - -.signup { - &-header a { - outline: none; - text-decoration: none; - } - - &-title { - font-size: 1.5rem; - font-weight: 600; - margin-bottom: 2rem; - } - - &-content { - text-align: center; - font-size: 1rem; - box-sizing: border-box; - max-width: 450px; - width: 100%; - margin: auto; - padding: 2rem 1rem; - } - - &-site { - &-logo { - margin: 0 auto; - display: block; - width: 150px; - } - - &-title { - font-size: 2.2rem; - font-weight: bold; - } - } - - &-viewport { - display: flex; - justify-content: space-around; - align-items: center; - height: 100%; - width: 100%; - } -} - -// Signup Icon input -// -------------------------------------------------- - -.signup-input-icon { - position: relative; - - svg { - position: absolute; - top: 50%; - left: 12px; - z-index: 100; - fill: #a6bac5; - transform: translateY(-9px); - } -} - -.signup-footer, -.signup-form { - position: relative; - margin: 30px auto 20px; - padding: 40px 30px; - width: 100%; - background: #fff; - border-radius: 8px; - box-shadow: 0 0 1px rgba(0, 0, 0, .09), 0 2px 5px rgba(0, 0, 0, .03); -} - -// Signup Footer -// -------------------------------------------------- - -.signup-footer { - padding: 20px; - a:hover { text-decoration: underline; } -} - -// Signup Form -// -------------------------------------------------- - -.signup-form { - .button { - width: 100%; - margin-top: 20px; - border-radius: 3px; - } - - &.error, - &.invalid, - &.success { - .message-error, - .message-success { - color: #fff; - padding: 10px 5px; - margin-top: 20px; - } - } - - // Error - &.error, - &.invalid { - .message-error { - background-color: #ec694b; - display: block; - } - } - - // success - &.success .message-success { - background-color: #98c22e; - display: block; - } - - // Animation Loafing - &.loading { - .button-text { display: none } - - .icon--loader { - display: inline-block; - animation: spin .8s linear infinite; - } - } -} - -@keyframes spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} diff --git a/src/selection.json b/src/selection.json deleted file mode 100644 index e71e41fe..00000000 --- a/src/selection.json +++ /dev/null @@ -1,1305 +0,0 @@ -{ - "IcoMoonType": "selection", - "icons": [ - { - "icon": { - "paths": [ - "M0 331.776h97.28c12.8 0 25.6 0 38.4 0 0.722 0.061 1.562 0.096 2.411 0.096 9.295 0 17.61-4.198 23.151-10.802l0.038-0.047 216.064-218.624c4.466-4.485 9.51-8.388 15.013-11.59l0.347-0.186c2.6-1.814 5.826-2.899 9.305-2.899 8.447 0 15.4 6.392 16.288 14.602l0.006 0.073c2.198 6.72 3.503 14.457 3.584 22.488l0 0.040q0 386.56 0 773.12c-0.080 7.507-1.197 14.721-3.213 21.55l0.141-0.558c-1.171 8.001-7.986 14.075-16.22 14.075-3.734 0-7.176-1.249-9.931-3.352l0.040 0.029c-12.838-8.589-24.049-17.687-34.362-27.704l0.058 0.056-204.8-204.8c-3.498-3.277-8.138-5.372-13.262-5.63l-0.050-0.002h-140.288zM1024 480.768c-0.080-1.072-0.126-2.323-0.126-3.584s0.046-2.512 0.135-3.75l-0.010 0.166c-9.786-131.118-66.654-247.345-153.551-333.264l-0.049-0.048c-8.326-10.354-20.993-16.924-35.194-16.924-24.884 0-45.056 20.172-45.056 45.056 0 13.18 5.659 25.037 14.679 33.276l0.035 0.031c21.661 22.521 41.536 47.112 59.186 73.325l1.23 1.939c42.84 66.23 68.305 147.174 68.305 234.066 0 28.213-2.685 55.8-7.813 82.517l0.436-2.728c-10.075 51.688-27.854 97.678-52.315 139.266l1.115-2.050c-20.654 34.501-43.679 64.368-69.754 91.262l0.122-0.126c-8.103 8.229-13.106 19.53-13.106 32 0 25.194 20.424 45.618 45.618 45.618 12.724 0 24.232-5.21 32.506-13.613l0.006-0.006c13.824-14.336 27.136-29.184 39.424-44.544 55.026-67.989 93.263-151.72 107.167-243.439l0.353-2.833c0-16.384 4.096-32.768 6.656-51.2zM830.464 511.488c-4.096-29.696-6.656-59.904-12.8-89.6-11.005-53.227-32.231-100.196-61.659-140.836l0.731 1.060c-14.336-19.968-30.72-38.4-46.592-56.832-8.197-9.192-20.073-14.952-33.294-14.952-24.601 0-44.544 19.943-44.544 44.544 0 0.397 0.005 0.792 0.016 1.187l-0.001-0.058c0.756 14.85 7.731 27.934 18.35 36.798l0.082 0.066c27.653 28.004 49.983 61.339 65.3 98.315l0.748 2.037c14.288 34.882 22.582 75.364 22.582 117.784 0 66.691-20.5 128.594-55.542 179.752l0.704-1.088c-13.273 17.934-26.194 33.616-39.857 48.61l0.433-0.482c-6.934 7.885-11.166 18.293-11.166 29.69 0 20.096 13.157 37.119 31.327 42.926l0.319 0.088c3.799 1.090 8.162 1.717 12.671 1.717 15.782 0 29.771-7.678 38.435-19.503l0.093-0.134c68.802-72.663 111.106-171.025 111.106-279.269 0-0.46-0.001-0.919-0.002-1.378l0 0.071zM625.664 460.288c-10.185-60.096-37.794-112.479-77.375-153.153l0.063 0.065c-8.191-8.393-19.616-13.598-32.256-13.598s-24.065 5.205-32.247 13.589l-0.009 0.009c-7.39 8.072-11.918 18.87-11.918 30.727 0 13.381 5.768 25.415 14.952 33.751l0.038 0.034c29.756 30.356 49.469 70.654 53.702 115.46l0.058 0.764c0.879 6.761 1.381 14.581 1.381 22.518 0 37.529-11.216 72.439-30.479 101.56l0.427-0.686c-10.991 16.334-21.593 30.353-32.883 43.774l0.627-0.766c-7.536 8.194-12.155 19.174-12.155 31.232 0 25.517 20.686 46.203 46.203 46.203 13.459 0 25.574-5.755 34.018-14.938l0.030-0.033c20.112-20.232 37.186-43.515 50.46-69.088l0.74-1.568c20.95-38.872 33.412-85.011 33.791-134.026l0.001-0.118c-2.048-17.92-2.048-35.84-5.632-51.2z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": [ - "icon-listen" - ] - }, - "attrs": [ - {} - ], - "properties": { - "order": 2, - "id": 0, - "name": "listen", - "prevSize": 24 - }, - "setIdx": 0, - "setId": 6, - "iconIdx": 1 - }, - { - "icon": { - "paths": [ - "M709.917 667.333c-23.526 0.054-42.577 19.138-42.577 42.671 0 11.987 4.942 22.819 12.901 30.57l0.009 0.009 185.583 185.583c7.778 8.092 18.692 13.118 30.781 13.118 23.567 0 42.671-19.104 42.671-42.671 0-12.089-5.027-23.003-13.104-30.767l-0.014-0.013-185.583-185.583c-7.761-7.972-18.596-12.917-30.586-12.917-0.028 0-0.057 0-0.085 0l0.004-0zM469.333 85.333c-211.572 0-384 172.428-384 384s172.428 384 384 384c211.572 0 384-172.428 384-384s-172.428-384-384-384zM469.333 170.667c165.454 0 298.667 133.212 298.667 298.667s-133.212 298.667-298.667 298.667c-165.454 0-298.667-133.212-298.667-298.667s133.212-298.667 298.667-298.667z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "hhhhsearch" - ], - "grid": 0 - }, - "attrs": [ - {} - ], - "properties": { - "order": 7, - "id": 0, - "name": "search", - "prevSize": 24, - "code": 59648 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 0 - }, - { - "icon": { - "paths": [ - "M427.2 472.432l128.006-42.876 41.416 123.646-128.008 42.876z", - "M951.8 380c-99-330-241.8-406.8-571.8-307.8s-406.8 241.8-307.8 571.8 241.8 406.8 571.8 307.8 406.8-241.8 307.8-571.8zM785.2 594.2l-62.2 20.8 21.4 64.4c8.4 26-5.4 54.4-31.4 63-5.4 1.6-11.6 3-16.8 2.4-20-0.8-39.2-13.8-46-33.8l-21.4-64.4-128.2 43 21.4 64.4c8.4 26-5.4 54.4-31.4 63-5.4 1.6-11.6 3-16.8 2.4-20-0.8-39.2-13.8-46-33.8l-21.8-64.8-62 20.6c-5.4 1.6-11.6 3-16.8 2.4-20-0.8-39.2-13.8-46-33.8-8.4-26 5.4-54.4 31.4-63l62.2-20.8-41.4-123.6-62.2 20.8c-5.4 1.6-11.6 3-16.8 2.4-20-0.8-39.2-13.8-46-33.8-8.4-26 5.4-54.4 31.4-63l62.2-20.8-21.8-64.2c-8.4-26 5.4-54.4 31.4-63 26-8.4 54.4 5.4 63 31.4l21.4 64.4 128.2-43-21.4-64.4c-8.4-26 5.4-54.4 31.4-63 26-8.4 54.4 5.4 63 31.4l21.4 64.4 62.2-20.8c26-8.4 54.4 5.4 63 31.4 8.4 26-5.4 54.4-31.4 63l-62.2 20.8 41.4 123.6 62.2-20.8c26-8.4 54.4 5.4 63 31.4 8.4 26.4-5.4 54.8-31.6 63.4z" - ], - "attrs": [ - {}, - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "slack" - ], - "grid": 0 - }, - "attrs": [ - {}, - {} - ], - "properties": { - "order": 3, - "id": 1, - "name": "slack", - "prevSize": 24, - "code": 59649 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 1 - }, - { - "icon": { - "paths": [ - "M642.4 792.6c-23.6 0-44.8-5.6-63-16.6-13.8-8.2-23-19.2-28-32.8-5.2-13.8-7.2-44.6-7.2-92.8v-202.4h192v-128h-192v-224h-123.8c-5.4 43-15 89.4-29 117.2s-28 51.6-51.2 71.4c-23.2 19.8-51.2 35.8-83.8 46.6v116.8h96v280.8c0 38 4 67 11.8 87 8 20 22.2 39 42.8 56.8s45.6 31.4 74.6 41c29.2 9.6 62.8 14.4 100.8 14.4 33.4 0 60.6-3.4 89.4-10.2s61-18.6 96.4-35.2v-131.2c-41.8 27.4-83.6 41.2-125.8 41.2z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "tumblr" - ], - "grid": 0 - }, - "attrs": [ - {} - ], - "properties": { - "order": 4, - "id": 2, - "name": "tumblr", - "prevSize": 24, - "code": 59650 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 2 - }, - { - "icon": { - "paths": [ - "M953.8 228c-10-46.8-35-77.6-81.2-92.6s-129.8-9-188.2 33.6c-59.8 43.6-95.2 119.4-107.6 167.6 29.4-12.6 48-15.4 78-13.8s49 24 49.8 50.6c0.6 19.6-0.4 37.4-7.2 55.4-21.6 57.4-55.4 113-95.2 161.6-5.8 7.2-12.8 13.8-20 19.8-20.4 16.6-37.6 12.2-50.8-10.4-10.8-18.6-18-37.8-24.4-58.2-24.8-79.4-33.6-161.8-47.6-243.2-6.6-39-14-79.6-36-113.8-23.2-35.6-57.2-49.2-100-44-29.4 3.6-73.8 35-95.6 52.8 0 0-112 93.8-163.6 142.8l42.4 54s35.8-25 55-36.6c11.4-6.8 24.8-8.2 34.4 0.4 9 7.8 19.2 18 24.6 28.2 11.4 21.4 22.4 43.8 29.4 66.8 26.4 88.6 51 177.4 75.6 266.6 12.6 45.6 27.8 88.4 56 127.2 38.6 53.2 79.2 65.4 141.8 43 50.8-18.2 93.2-52.4 132-87.8 66.2-60.4 118.2-130.8 171-202.4 40.8-55.4 74.6-111.4 102.8-174 27.8-62 38.8-127 24.6-193.6z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "vimeo" - ], - "grid": 0 - }, - "attrs": [ - {} - ], - "properties": { - "order": 5, - "id": 3, - "name": "vimeo", - "prevSize": 24, - "code": 59665 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 3 - }, - { - "icon": { - "paths": [ - "M854 598.2c-17.2-16-31.4-25.6-37-41-2-5.4-2.6-8.6-2-15.2 0.8-12 11-27.6 79.2-117.8 28.4-37.6 65.4-83 65.4-117 0-22-9-27.4-41.6-27.4h-148c-13 0-21.8 17.8-27.2 32.8-5.6 15-16.4 38-42.8 87.6-27.6 52-64.6 97.6-80 104.8-4.4 2-7.2 2-11 1.6-2.4-0.2-7.6-1.6-12.4-7.4-4.6-5.6-11.8-15.4-9-107.8 1.6-51.6 7.4-87.6-3.4-109.6-2.2-4.4-7-9-9.6-11-15.4-11-58.8-15-96-15s-65.8 4.2-80 8.4c-14.2 4.2-30.2 13.8-37.8 24-5 6.6 8.6 3.2 21.8 9.2 8 3.6 18.6 9.2 22.4 18.6 16 41.6 19.4 74.6 10.6 133.4-2.2 14.4-4.6 37-13.2 51-4.8 7.8-15.8 7.2-19 6.2-32.2-9.8-57.2-52-82.4-101.4-26.2-51.6-39.6-87.8-46.8-102.6s-18.2-22.8-36.8-22.8h-132.8c-10.4 0-19.8 8.6-19.8 18 0 22 37.2 86 59.6 132 40.4 82.8 93.4 162.8 164.8 240.4 74.8 82.4 176.8 97.8 209.4 97.8s58-1.2 66.6-3c4-0.8 8.2-2.6 11.4-5 14.2-11 11.6-32 12.6-48.4 1-16.8 2.8-39 14-52 10.4-12.2 22.2-15.6 37.2-8.2 14 7 24 18.8 34.4 30.2 20.2 21.8 38.6 46.4 62.6 64.4 11 8.2 23 13.4 35.8 17.4 17 5.2 33 5.4 50.6 4.6 19.4-0.8 34-0.6 58-0.6s55.4 1 66.2-7c5.2-4 12-10 12-22.6 0-23.8-24.4-63.4-106-139.6z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "vk" - ], - "grid": 0 - }, - "attrs": [ - {} - ], - "properties": { - "order": 6, - "id": 4, - "name": "vk", - "prevSize": 24, - "code": 59666 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 4 - }, - { - "icon": { - "paths": [ - "M160 64l-64 160v608h192v128h128l128-128h160l224-224v-544h-768zM832 576l-128 128h-192.002l-127.998 128v-128h-160v-544h608v416z", - "M640 286h96v258h-96zM416 286h96v258h-96z" - ], - "attrs": [ - {}, - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "twitch" - ], - "grid": 0 - }, - "attrs": [ - {}, - {} - ], - "properties": { - "order": 2, - "id": 5, - "name": "twitch", - "prevSize": 24, - "code": 59667 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 5 - }, - { - "icon": { - "paths": [ - "M862.805 0c59.989 0 108.373 48.512 111.232 105.6v918.4l-114.219-96.981-62.72-57.088-68.437-59.648 28.587 94.080h-598.955c-59.819 0-108.373-45.44-108.373-105.643v-692.907c0-57.088 48.64-105.685 108.587-105.685l704.299-0.128zM601.771 242.475h-1.28l-8.619 8.533c88.448 25.6 131.243 65.579 131.243 65.579-57.003-28.501-108.373-42.752-159.744-48.512-37.12-5.76-74.24-2.731-105.6 0h-8.533c-20.053 0-62.72 8.533-119.893 31.36-19.925 8.661-31.36 14.336-31.36 14.336s42.752-42.752 136.96-65.579l-5.76-5.76s-71.339-2.731-148.352 54.187c0 0-77.013 134.144-77.013 299.52 0 0 42.667 74.24 159.701 77.056 0 0 17.067-22.741 34.347-42.752-65.707-19.968-91.307-59.904-91.307-59.904s5.717 2.816 14.293 8.533h2.56c1.28 0 1.877 0.64 2.56 1.28v0.256c0.683 0.683 1.28 1.28 2.56 1.28 14.080 5.803 28.16 11.52 39.68 17.067 19.883 8.619 45.44 17.195 76.8 22.869 39.68 5.76 85.163 8.533 136.96 0 25.6-5.76 51.2-11.392 76.8-22.827 16.64-8.533 37.12-17.067 59.605-31.445 0 0-25.6 39.936-94.080 59.904 14.080 19.883 33.92 42.667 33.92 42.667 117.077-2.56 162.56-76.8 165.12-73.643 0-165.12-77.44-299.52-77.44-299.52-69.76-51.797-135.040-53.76-146.56-53.76l2.389-0.853zM608.939 430.763c29.995 0 54.187 25.6 54.187 56.96 0 31.573-24.32 57.173-54.187 57.173s-54.187-25.6-54.187-56.917c0.085-31.573 24.448-57.088 54.187-57.088zM415.104 430.763c29.867 0 54.016 25.6 54.016 56.96 0 31.573-24.32 57.173-54.187 57.173s-54.187-25.6-54.187-56.917c0-31.573 24.32-57.088 54.187-57.088z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "colorPermutations": {}, - "tags": [ - "discord" - ], - "grid": 0 - }, - "attrs": [], - "properties": { - "order": 1, - "id": 6, - "prevSize": 24, - "code": 59658, - "name": "discord" - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 6 - }, - { - "icon": { - "paths": [ - "M591.2 327.4c-10.2 10-10.2 26.6-0.2 36.8l121.6 121.8h-462.8c-14.2 0-25.8 11.6-25.8 26s11.6 26 25.8 26h462.6l-121.6 121.8c-10 10.2-9.8 26.6 0.2 36.8 10.2 10 26.4 10 36.6-0.2l164.8-166c2.2-2.4 4-5 5.4-8.2s2-6.6 2-10c0-6.8-2.6-13.2-7.4-18.2l-164.8-166c-9.8-10.4-26.2-10.6-36.4-0.6z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "ionicons_svg_ios-arrow-round-forward" - ], - "grid": 0 - }, - "attrs": [ - {} - ], - "properties": { - "order": 5, - "id": 7, - "name": "arrow-next", - "prevSize": 24, - "code": 59660 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 7 - }, - { - "icon": { - "paths": [ - "M432.8 327.4c10.2 10 10.2 26.6 0.2 36.8l-121.4 121.8h462.6c14.2 0 25.8 11.6 25.8 26s-11.6 26-25.8 26h-462.6l121.6 121.8c10 10.2 9.8 26.6-0.2 36.8-10.2 10-26.4 10-36.6-0.2l-164.8-166c-2.2-2.4-4-5-5.4-8.2s-2-6.6-2-10c0-6.8 2.6-13.2 7.4-18.2l164.8-166c9.8-10.4 26.2-10.6 36.4-0.6z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "ionicons_svg_ios-arrow-round-back" - ], - "grid": 0 - }, - "attrs": [ - {} - ], - "properties": { - "order": 4, - "id": 8, - "name": "arrow-prev", - "prevSize": 24, - "code": 59661 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 8 - }, - { - "icon": { - "paths": [ - "M696.6 432.8c-10 10.2-26.6 10.2-36.8 0.2l-121.8-121.4v462.6c0 14.2-11.6 25.8-26 25.8s-26-11.6-26-25.8v-462.6l-121.8 121.6c-10.2 10-26.6 9.8-36.8-0.2-10-10.2-10-26.4 0.2-36.6l166-164.8c2.4-2.2 5-4 8.2-5.4s6.6-2 10-2c6.8 0 13.2 2.6 18.2 7.4l166 164.8c10.4 9.8 10.6 26.2 0.6 36.4z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "ionicons_svg_ios-arrow-round-up" - ], - "grid": 0 - }, - "attrs": [ - {} - ], - "properties": { - "order": 3, - "id": 9, - "name": "arrow-up", - "prevSize": 24, - "code": 59662 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 9 - }, - { - "icon": { - "paths": [ - "M696.6 591.2c-10-10.2-26.6-10.2-36.8-0.2l-121.8 121.4v-462.6c0-14.2-11.6-25.8-26-25.8s-26 11.6-26 25.8v462.6l-121.8-121.6c-10.2-10-26.6-9.8-36.8 0.2-10 10.2-10 26.4 0.2 36.6l166 164.8c2.4 2.2 5 4 8.2 5.4s6.6 2 10 2c6.8 0 13.2-2.6 18.2-7.4l166-164.8c10.4-9.8 10.6-26.2 0.6-36.4z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "ionicons_svg_ios-arrow-round-down" - ], - "grid": 0 - }, - "attrs": [ - {} - ], - "properties": { - "order": 2, - "id": 10, - "name": "arrow-down", - "prevSize": 24, - "code": 59663 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 10 - }, - { - "icon": { - "paths": [ - "M627 550c0 63.513-51.487 115-115 115s-115-51.487-115-115c0-63.513 51.487-115 115-115s115 51.487 115 115z", - "M835 320h-109c-9.2 0-17.8-4-24-10.8-56.8-63.6-78.2-85.2-101.4-85.2h-171c-23.4 0-46.4 21.6-103.4 85.4-6 6.8-14.8 10.6-23.8 10.6h-8.2v-16c0-8.8-7.2-16-16-16h-52c-8.8 0-16 7.2-16 16v16h-15c-35.4 0-67.2 26.4-67.2 61.4v352c0 35 31.8 66.6 67 66.6h640c35.2 0 61-31.6 61-66.6v-352c0-35-25.8-61.4-61-61.4zM520 720.8c-100.6 4.6-183.4-78.2-178.8-178.8 4-87.8 75-158.8 162.8-162.8 100.6-4.6 183.4 78.2 178.8 178.8-4 87.8-75 158.8-162.8 162.8zM704 436c-14.4 0-26-11.6-26-26s11.6-26 26-26 26 11.6 26 26-11.6 26-26 26z" - ], - "attrs": [ - {}, - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "ionicons_svg_ios-camera" - ], - "grid": 0 - }, - "attrs": [ - {}, - {} - ], - "properties": { - "order": 3, - "id": 11, - "name": "photo", - "prevSize": 24, - "code": 59659 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 11 - }, - { - "icon": { - "paths": [ - "M871.8 129.8l-734.2 320c-13 6.2-12.6 24.8 0.6 30.6l198.6 112.2c11.8 6.6 26.4 5.2 36.6-3.6l391.6-337.6c2.6-2.2 8.8-6.4 11.2-4 2.6 2.6-1.4 8.6-3.6 11.2l-338.8 381.6c-9.4 10.6-10.8 26.2-3.2 38.2l129.8 208.2c6.4 12.6 24.6 12.4 30.4-0.4l303.6-734.2c6.6-14.4-8.4-29-22.6-22.2z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "ionicons_svg_ios-send" - ], - "grid": 0 - }, - "attrs": [ - {} - ], - "properties": { - "order": 2, - "id": 12, - "name": "send", - "prevSize": 24, - "code": 59657 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 12 - }, - { - "icon": { - "paths": [ - "M512 96c-229.752 0-416 186.25-416 416s186.248 416 416 416c229.75 0 416-186.25 416-416s-186.25-416-416-416zM468.902 865.998c-78.928-9.452-151.956-44.784-209.038-101.864-67.348-67.348-104.436-156.89-104.436-252.134 0-85.74 30.072-166.848 85.202-231.318 1.42 17.034 4.926 35.296 4.028 48.35-3.28 47.59-7.976 77.374 19.88 117.524 10.852 15.638 13.518 38.056 18.8 56.156 5.166 17.708 25.804 26.996 40.038 37.906 28.718 22.018 56.192 47.61 86.644 66.988 20.098 12.79 32.652 19.152 26.766 43.678-4.734 19.724-6.056 31.874-16.26 49.446-3.114 5.362 11.754 39.836 16.702 44.784 14.996 14.994 29.876 28.75 46.222 42.25 25.342 20.938-2.462 48.144-14.548 78.234zM764.134 764.134c-51.266 51.266-115.398 84.972-185.112 98.162 9.88-24.432 27.472-46.14 43.79-58.724 14.194-10.952 31.972-32.018 39.386-48.704 7.408-16.664 17.222-31.11 27.154-46.434 14.13-21.798-34.838-54.672-50.706-61.562-35.708-15.502-62.588-36.42-94.322-58.75-22.61-15.908-68.514 8.308-94.040-2.834-34.962-15.266-63.766-41.792-94.156-64.678-31.36-23.618-29.844-51.152-29.844-85.994 24.564 0.906 59.508-6.798 75.816 12.956 5.146 6.234 22.84 34.084 34.684 24.188 9.676-8.086-7.17-40.498-10.424-48.118-10.010-23.43 22.808-32.568 39.606-48.456 21.92-20.728 68.94-53.236 65.224-68.094s-47.048-56.954-72.498-50.386c-3.814 0.984-37.394 36.194-43.882 41.718 0.172-11.492 0.344-22.982 0.52-34.474 0.11-7.256-13.536-14.704-12.902-19.384 1.6-11.828 34.524-33.294 42.714-42.714-5.738-3.586-25.318-20.404-31.244-17.936-14.348 5.98-30.552 10.1-44.9 16.078 0-4.976-0.604-9.65-1.324-14.266 26.255-11.953 56.747-21.138 88.647-26.054l1.973-0.25 28.168 11.32 19.888 23.602 19.848 20.466 17.35 5.59 27.558-25.99-7.106-18.554v-16.678c54.5 7.916 105.968 28.248 151.044 59.6-8.064 0.722-16.926 1.908-26.924 3.18-4.13-2.44-9.428-3.548-13.93-5.246 13.062 28.084 26.686 55.78 40.528 83.492 14.786 29.602 47.586 61.354 53.346 92.602 6.788 36.832 2.078 70.288 5.792 113.622 3.576 41.73 47.048 89.144 47.048 89.144s20.074 6.838 36.768 4.456c-15.562 61.566-47.466 118.028-93.538 164.104z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "ionicons_svg_md-globe" - ], - "grid": 0 - }, - "attrs": [ - {} - ], - "properties": { - "order": 11, - "id": 13, - "name": "globe", - "prevSize": 24, - "code": 59654 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 13 - }, - { - "icon": { - "paths": [ - "M926 384h-294.2l-89.4-266.8c-4.4-13-16.6-21.2-30.4-21.2s-26 8.2-30.4 21.2l-89.4 266.8h-296.2c-17.6 0-32 14.4-32 32 0 1.8 0.2 3.8 0.6 5.4 0.4 7 3.6 14.8 13.4 22.6l241.8 170.4-92.8 269.8c-4.6 13 0 27.6 11 36 5.8 4.2 11.2 7.8 18 7.8 6.6 0 14.4-3.4 20-7.2l236-168.2 236 168.2c5.6 4 13.4 7.2 20 7.2 6.8 0 12.2-3.4 17.8-7.8 11.2-8.4 15.6-22.8 11-36l-92.8-269.8 239.8-172 5.8-5c5.2-5.6 10.4-13.2 10.4-21.4 0-17.6-16.4-32-34-32z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "ionicons_svg_ios-star" - ], - "grid": 0 - }, - "attrs": [ - {} - ], - "properties": { - "order": 10, - "id": 14, - "name": "star", - "prevSize": 24, - "code": 59655 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 14 - }, - { - "icon": { - "paths": [ - "M560 682.2l-2.4 0.2c-7.2 0.8-14 4-19.2 9l-129.2 129.2c-27.4 27.4-64 42.4-103 42.4s-75.6-15-103-42.4c-27.4-27.4-42.4-64-42.4-103s15-75.6 42.4-103l137.2-137.2c7-7 14.6-13.2 22.8-18.6 9.2-6 19.2-11.2 29.6-15 9.6-3.6 19.8-6 30-7.4 6.8-1 13.8-1.4 20.4-1.4 2.8 0 5.6 0.2 9.2 0.4 35.4 2.2 68.8 17.2 93.6 42 15.4 15.4 27.2 34.2 34.2 54.6 5.6 16 22.4 25 38.6 20.2 0.2 0 0.4-0.2 0.6-0.2s0.4 0 0.4-0.2c16.2-5 25.6-22 21-38.2-8.8-31.2-24.4-57.4-49.2-82-31.2-31.2-71.8-51.6-115.2-58.6-3.8-0.6-7.6-1.2-11.4-1.6-7.4-0.8-14.8-1.2-22.2-1.2-5.2 0-10.4 0.2-15.4 0.6-10.8 0.8-21.6 2.4-32.4 5-2.2 0.4-4.2 1-6.4 1.6-13.4 3.6-26.6 8.4-39 14.6-20.6 10.2-39.2 23.4-55.4 39.8l-137.2 137.2c-39.2 39.8-61 92.6-61 149s21.8 109.2 61.4 148.8c39.6 39.4 92.4 61.2 148.6 61.2 56.4 0 109.2-21.8 148.8-61.4l130.6-130.6c20.8-21 4-56.6-25.4-53.8z", - "M866.6 157.4c-39.6-39.6-92.4-61.4-148.6-61.4s-109.2 21.8-148.8 61.4l-127.4 127.4c-19.4 19.4-7.2 52.6 20.2 54.8 9.4 0.8 18.6-2.6 25.4-9.2l127.6-127.2c27.4-27.4 64-42.4 103-42.4s75.6 15 103 42.4c27.4 27.4 42.4 64 42.4 103s-15 75.6-42.4 103l-137.2 137.2c-7 7-14.6 13.2-22.8 18.6-9.2 6-19.2 11.2-29.6 15-9.6 3.6-19.8 6-30 7.4-6.8 1-13.8 1.4-20.4 1.4-2.8 0-5.8-0.2-9.2-0.4-35.4-2.2-68.8-17.2-93.6-42-14.6-14.6-25.6-32-32.8-51-5.8-15.4-22.2-23.8-38.2-19.6-17.8 4.6-28.2 23.4-22.6 41 9 28 24.2 51.8 47.4 75l0.4 0.4c33.8 33.8 78.8 55.2 126.6 60.2 7.4 0.8 14.8 1.2 22.2 1.2 5.2 0 10.4-0.2 15.6-0.6 13-1 26-3.2 38.6-6.4 13.4-3.6 26.6-8.4 39-14.6 20.6-10.2 39.2-23.4 55.4-39.8l137.2-137.2c39.6-39.6 61.4-92.4 61.4-148.8s-22.2-109.2-61.8-148.8z" - ], - "attrs": [ - {}, - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "ionicons_svg_ios-link" - ], - "grid": 0 - }, - "attrs": [ - {}, - {} - ], - "properties": { - "order": 8, - "id": 15, - "name": "link", - "prevSize": 24, - "code": 59656 - }, - "setIdx": 1, - "setId": 5, - "iconIdx": 15 - }, - { - "icon": { - "paths": [ - "M801.344 597.504v-399.584c0-39.488-32-71.552-71.552-71.552h-626.272c-39.52-0.032-71.552 32.032-71.552 71.552v399.584c0 39.52 32.032 71.552 71.552 71.552h119.328v164.384l182.528-164.384h324.384c39.584 0 71.584-32.032 71.584-71.552zM920.48 283.456h-89.536c0 0 0 319.104 0 349.088s-38.912 68.544-68.896 68.544-350.24 1.76-350.24 1.76c0 39.52 32.032 63.552 71.552 63.552h137.888l179.904 163.264-0.224-163.264h119.552c39.552 0 71.552-24.032 71.552-63.552v-349.824c0-39.488-32-69.568-71.552-69.568z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "chat", - "comments", - "bubble", - "talk" - ], - "grid": 32 - }, - "attrs": [ - {} - ], - "properties": { - "order": 1, - "id": 0, - "prevSize": 20, - "code": 59664, - "name": "chat" - }, - "setIdx": 2, - "setId": 4, - "iconIdx": 0 - }, - { - "icon": { - "paths": [ - "M316 366l196 196 196-196 60 60-256 256-256-256z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [], - "grid": 24 - }, - "attrs": [], - "properties": { - "order": 3, - "ligatures": "keyboard_arrow_down", - "name": "a-down", - "id": 0, - "prevSize": 24, - "code": 59653 - }, - "setIdx": 3, - "setId": 3, - "iconIdx": 0 - }, - { - "icon": { - "paths": [ - "M342 214l468 298-468 298v-596z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "play_arrow" - ], - "defaultCode": 57399, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "play_arrow", - "id": 3, - "order": 12, - "prevSize": 24, - "code": 57399, - "name": "play" - }, - "setIdx": 3, - "setId": 3, - "iconIdx": 3 - }, - { - "icon": { - "paths": [ - "M512 490c58 0 106-48 106-106s-48-106-106-106-106 48-106 106 48 106 106 106zM512 86c166 0 298 132 298 298 0 224-298 554-298 554s-298-330-298-554c0-166 132-298 298-298z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "room" - ], - "defaultCode": 59572, - "grid": 24 - }, - "attrs": [], - "properties": { - "order": 6, - "ligatures": "location_on, place, room", - "id": 4, - "prevSize": 24, - "code": 59572, - "name": "location" - }, - "setIdx": 3, - "setId": 3, - "iconIdx": 4 - }, - { - "icon": { - "paths": [ - "M426 726l384-384-60-62-324 324-152-152-60 60zM512 86c236 0 426 190 426 426s-190 426-426 426-426-190-426-426 190-426 426-426z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "check_circle" - ], - "defaultCode": 59500, - "grid": 24 - }, - "attrs": [], - "properties": { - "order": 6, - "ligatures": "check_circle", - "id": 5, - "prevSize": 24, - "code": 59500, - "name": "check-circle" - }, - "setIdx": 3, - "setId": 3, - "iconIdx": 5 - }, - { - "icon": { - "paths": [ - "M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "close" - ], - "defaultCode": 58829, - "grid": 24 - }, - "attrs": [], - "properties": { - "order": 9, - "ligatures": "clear, close", - "id": 6, - "prevSize": 24, - "code": 58829, - "name": "close" - }, - "setIdx": 3, - "setId": 3, - "iconIdx": 6 - }, - { - "icon": { - "paths": [ - "M512 910l-62-56c-220-200-364-330-364-492 0-132 102-234 234-234 74 0 146 36 192 90 46-54 118-90 192-90 132 0 234 102 234 234 0 162-144 294-364 494z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "favorite" - ], - "defaultCode": 59517, - "grid": 24 - }, - "attrs": [], - "properties": { - "order": 6, - "ligatures": "favorite", - "id": 7, - "prevSize": 24, - "code": 59517, - "name": "favorite" - }, - "setIdx": 3, - "setId": 3, - "iconIdx": 7 - }, - { - "icon": { - "paths": [ - "M554 598v-172h-84v172h84zM554 768v-86h-84v86h84zM42 896l470-810 470 810h-940z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "warning" - ], - "defaultCode": 57346, - "grid": 24 - }, - "attrs": [], - "properties": { - "order": 29, - "ligatures": "report_problem, warning", - "id": 8, - "prevSize": 24, - "code": 57346, - "name": "warning" - }, - "setIdx": 3, - "setId": 3, - "iconIdx": 8 - }, - { - "icon": { - "paths": [ - "M170 430c234 0 424 190 424 424h-122c0-166-136-302-302-302v-122zM170 190c366 0 664 298 664 664h-120c0-300-244-544-544-544v-120zM170 760c0-52 42-92 94-92s92 40 92 92-40 94-92 94-94-42-94-94z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "rss_feed" - ], - "defaultCode": 57573, - "grid": 24 - }, - "attrs": [], - "properties": { - "order": 21, - "ligatures": "rss_feed", - "id": 9, - "prevSize": 24, - "code": 57573, - "name": "rss" - }, - "setIdx": 3, - "setId": 3, - "iconIdx": 9 - }, - { - "icon": { - "paths": [ - "M1024 405.714v453.714c0 50.286-41.143 91.429-91.429 91.429h-841.143c-50.286 0-91.429-41.143-91.429-91.429v-453.714c17.143 18.857 36.571 35.429 57.714 49.714 94.857 64.571 190.857 129.143 284 197.143 48 35.429 107.429 78.857 169.714 78.857h1.143c62.286 0 121.714-43.429 169.714-78.857 93.143-67.429 189.143-132.571 284.571-197.143 20.571-14.286 40-30.857 57.143-49.714zM1024 237.714c0 64-47.429 121.714-97.714 156.571-89.143 61.714-178.857 123.429-267.429 185.714-37.143 25.714-100 78.286-146.286 78.286h-1.143c-46.286 0-109.143-52.571-146.286-78.286-88.571-62.286-178.286-124-266.857-185.714-40.571-27.429-98.286-92-98.286-144 0-56 30.286-104 91.429-104h841.143c49.714 0 91.429 41.143 91.429 91.429z" - ], - "width": 1024, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "envelope" - ], - "defaultCode": 61664, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "email", - "id": 0, - "order": 3, - "prevSize": 28, - "code": 61664 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 0 - }, - { - "icon": { - "paths": [ - "M438.857 449.143h414.286c4 22.286 6.857 44 6.857 73.143 0 250.286-168 428.571-421.143 428.571-242.857 0-438.857-196-438.857-438.857s196-438.857 438.857-438.857c118.286 0 217.714 43.429 294.286 114.857l-119.429 114.857c-32.571-31.429-89.714-68-174.857-68-149.714 0-272 124-272 277.143s122.286 277.143 272 277.143c173.714 0 238.857-124.571 249.143-189.143h-249.143v-150.857z" - ], - "width": 860.0137142857142, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "google" - ], - "defaultCode": 61856, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "google", - "id": 1, - "order": 4, - "prevSize": 28, - "code": 61856 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 1 - }, - { - "icon": { - "paths": [ - "M679.429 746.857l84-396c7.429-34.857-12.571-48.571-35.429-40l-493.714 190.286c-33.714 13.143-33.143 32-5.714 40.571l126.286 39.429 293.143-184.571c13.714-9.143 26.286-4 16 5.143l-237.143 214.286-9.143 130.286c13.143 0 18.857-5.714 25.714-12.571l61.714-59.429 128 94.286c23.429 13.143 40 6.286 46.286-21.714zM1024 512c0 282.857-229.143 512-512 512s-512-229.143-512-512 229.143-512 512-512 512 229.143 512 512z" - ], - "width": 1024, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "telegram" - ], - "defaultCode": 62150, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "telegram", - "id": 2, - "order": 2, - "prevSize": 28, - "code": 62150 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 2 - }, - { - "icon": { - "paths": [ - "M1024 483.429c0 44.571-25.143 82.857-62.286 101.714 4.571 17.714 6.857 36 6.857 54.857 0 180.571-204 326.857-455.429 326.857-250.857 0-454.857-146.286-454.857-326.857 0-18.286 2.286-36.571 6.286-53.714-38.286-18.857-64.571-57.714-64.571-102.857 0-62.857 50.857-113.714 113.714-113.714 32.571 0 61.714 13.714 82.857 36 77.143-53.714 180-88.571 294.286-92.571l66.286-297.714c2.286-10.286 13.143-17.143 23.429-14.857l210.857 46.286c13.714-27.429 42.857-46.857 76-46.857 47.429 0 85.714 38.286 85.714 85.143 0 47.429-38.286 85.714-85.714 85.714-46.857 0-85.143-38.286-85.143-85.143l-190.857-42.286-59.429 269.714c114.857 3.429 218.857 37.714 296.571 91.429 20.571-21.714 49.714-34.857 81.714-34.857 62.857 0 113.714 50.857 113.714 113.714zM238.857 597.143c0 47.429 38.286 85.714 85.143 85.714 47.429 0 85.714-38.286 85.714-85.714 0-46.857-38.286-85.143-85.714-85.143-46.857 0-85.143 38.286-85.143 85.143zM701.714 800c8.571-8.571 8.571-21.143 0-29.714-8-8-21.143-8-29.143 0-34.286 34.857-108 46.857-160.571 46.857s-126.286-12-160.571-46.857c-8-8-21.143-8-29.143 0-8.571 8-8.571 21.143 0 29.714 54.286 54.286 158.857 58.286 189.714 58.286s135.429-4 189.714-58.286zM700 682.857c46.857 0 85.143-38.286 85.143-85.714 0-46.857-38.286-85.143-85.143-85.143-47.429 0-85.714 38.286-85.714 85.143 0 47.429 38.286 85.714 85.714 85.714z" - ], - "width": 1024, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "reddit-alien" - ], - "defaultCode": 62081, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "reddit", - "id": 3, - "order": 4, - "prevSize": 28, - "code": 62081 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 3 - }, - { - "icon": { - "paths": [ - "M925.714 233.143c-25.143 36.571-56.571 69.143-92.571 95.429 0.571 8 0.571 16 0.571 24 0 244-185.714 525.143-525.143 525.143-104.571 0-201.714-30.286-283.429-82.857 14.857 1.714 29.143 2.286 44.571 2.286 86.286 0 165.714-29.143 229.143-78.857-81.143-1.714-149.143-54.857-172.571-128 11.429 1.714 22.857 2.857 34.857 2.857 16.571 0 33.143-2.286 48.571-6.286-84.571-17.143-148-91.429-148-181.143v-2.286c24.571 13.714 53.143 22.286 83.429 23.429-49.714-33.143-82.286-89.714-82.286-153.714 0-34.286 9.143-65.714 25.143-93.143 90.857 112 227.429 185.143 380.571 193.143-2.857-13.714-4.571-28-4.571-42.286 0-101.714 82.286-184.571 184.571-184.571 53.143 0 101.143 22.286 134.857 58.286 41.714-8 81.714-23.429 117.143-44.571-13.714 42.857-42.857 78.857-81.143 101.714 37.143-4 73.143-14.286 106.286-28.571z" - ], - "width": 950.8571428571428, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "twitter" - ], - "defaultCode": 61593, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "twitter", - "id": 4, - "order": 4, - "prevSize": 28, - "code": 61593 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 4 - }, - { - "icon": { - "paths": [ - "M438.857 73.143c242.286 0 438.857 196.571 438.857 438.857 0 193.714-125.714 358.286-300 416.571-22.286 4-30.286-9.714-30.286-21.143 0-14.286 0.571-61.714 0.571-120.571 0-41.143-13.714-67.429-29.714-81.143 97.714-10.857 200.571-48 200.571-216.571 0-48-17.143-86.857-45.143-117.714 4.571-11.429 19.429-56-4.571-116.571-36.571-11.429-120.571 45.143-120.571 45.143-34.857-9.714-72.571-14.857-109.714-14.857s-74.857 5.143-109.714 14.857c0 0-84-56.571-120.571-45.143-24 60.571-9.143 105.143-4.571 116.571-28 30.857-45.143 69.714-45.143 117.714 0 168 102.286 205.714 200 216.571-12.571 11.429-24 30.857-28 58.857-25.143 11.429-89.143 30.857-127.429-36.571-24-41.714-67.429-45.143-67.429-45.143-42.857-0.571-2.857 26.857-2.857 26.857 28.571 13.143 48.571 64 48.571 64 25.714 78.286 148 52 148 52 0 36.571 0.571 70.857 0.571 81.714 0 11.429-8 25.143-30.286 21.143-174.286-58.286-300-222.857-300-416.571 0-242.286 196.571-438.857 438.857-438.857zM166.286 703.429c1.143-2.286-0.571-5.143-4-6.857-3.429-1.143-6.286-0.571-7.429 1.143-1.143 2.286 0.571 5.143 4 6.857 2.857 1.714 6.286 1.143 7.429-1.143zM184 722.857c2.286-1.714 1.714-5.714-1.143-9.143-2.857-2.857-6.857-4-9.143-1.714-2.286 1.714-1.714 5.714 1.143 9.143 2.857 2.857 6.857 4 9.143 1.714zM201.143 748.571c2.857-2.286 2.857-6.857 0-10.857-2.286-4-6.857-5.714-9.714-3.429-2.857 1.714-2.857 6.286 0 10.286s7.429 5.714 9.714 4zM225.143 772.571c2.286-2.286 1.143-7.429-2.286-10.857-4-4-9.143-4.571-11.429-1.714-2.857 2.286-1.714 7.429 2.286 10.857 4 4 9.143 4.571 11.429 1.714zM257.714 786.857c1.143-3.429-2.286-7.429-7.429-9.143-4.571-1.143-9.714 0.571-10.857 4s2.286 7.429 7.429 8.571c4.571 1.714 9.714 0 10.857-3.429zM293.714 789.714c0-4-4.571-6.857-9.714-6.286-5.143 0-9.143 2.857-9.143 6.286 0 4 4 6.857 9.714 6.286 5.143 0 9.143-2.857 9.143-6.286zM326.857 784c-0.571-3.429-5.143-5.714-10.286-5.143-5.143 1.143-8.571 4.571-8 8.571 0.571 3.429 5.143 5.714 10.286 4.571s8.571-4.571 8-8z" - ], - "width": 877.7142857142857, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "github" - ], - "defaultCode": 61595, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "github", - "id": 5, - "order": 13, - "prevSize": 28, - "code": 61595 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 5 - }, - { - "icon": { - "paths": [ - "M199.429 357.143v566.286h-188.571v-566.286h188.571zM211.429 182.286c0.571 54.286-40.571 97.714-106.286 97.714v0h-1.143c-63.429 0-104-43.429-104-97.714 0-55.429 42.286-97.714 106.286-97.714 64.571 0 104.571 42.286 105.143 97.714zM877.714 598.857v324.571h-188v-302.857c0-76-27.429-128-95.429-128-52 0-82.857 34.857-96.571 68.571-4.571 12.571-6.286 29.143-6.286 46.286v316h-188c2.286-513.143 0-566.286 0-566.286h188v82.286h-1.143c24.571-38.857 69.143-95.429 170.857-95.429 124 0 216.571 81.143 216.571 254.857z" - ], - "width": 877.7142857142857, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "linkedin" - ], - "defaultCode": 61665, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "linkedin", - "id": 6, - "order": 2, - "prevSize": 28, - "code": 61665 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 6 - }, - { - "icon": { - "paths": [ - "M406.286 644.571l276.571-142.857-276.571-144.571v287.429zM512 152c215.429 0 358.286 10.286 358.286 10.286 20 2.286 64 2.286 102.857 43.429 0 0 31.429 30.857 40.571 101.714 10.857 82.857 10.286 165.714 10.286 165.714v77.714s0.571 82.857-10.286 165.714c-9.143 70.286-40.571 101.714-40.571 101.714-38.857 40.571-82.857 40.571-102.857 42.857 0 0-142.857 10.857-358.286 10.857v0c-266.286-2.286-348-10.286-348-10.286-22.857-4-74.286-2.857-113.143-43.429 0 0-31.429-31.429-40.571-101.714-10.857-82.857-10.286-165.714-10.286-165.714v-77.714s-0.571-82.857 10.286-165.714c9.143-70.857 40.571-101.714 40.571-101.714 38.857-41.143 82.857-41.143 102.857-43.429 0 0 142.857-10.286 358.286-10.286v0z" - ], - "width": 1024, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "youtube-play" - ], - "defaultCode": 61802, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "youtube", - "id": 7, - "order": 10, - "prevSize": 28, - "code": 61802 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 7 - }, - { - "icon": { - "paths": [ - "M736.571 932.571h-638.857v-274.286h-91.429v365.714h821.714v-365.714h-91.429v274.286zM198.286 633.143l18.857-89.714 447.429 94.286-18.857 89.143zM257.143 419.429l38.286-83.429 414.286 193.714-38.286 82.857zM372 216l58.286-70.286 350.857 293.143-58.286 70.286zM598.857 0l272.571 366.286-73.143 54.857-272.571-366.286zM188.571 840.571v-90.857h457.143v90.857h-457.143z" - ], - "width": 877.7142857142857, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "stack-overflow" - ], - "defaultCode": 61804, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "stack-overflow", - "id": 8, - "order": 22, - "prevSize": 28, - "code": 61804 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 8 - }, - { - "icon": { - "paths": [ - "M585.143 512c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286zM664 512c0 124.571-100.571 225.143-225.143 225.143s-225.143-100.571-225.143-225.143 100.571-225.143 225.143-225.143 225.143 100.571 225.143 225.143zM725.714 277.714c0 29.143-23.429 52.571-52.571 52.571s-52.571-23.429-52.571-52.571 23.429-52.571 52.571-52.571 52.571 23.429 52.571 52.571zM438.857 152c-64 0-201.143-5.143-258.857 17.714-20 8-34.857 17.714-50.286 33.143s-25.143 30.286-33.143 50.286c-22.857 57.714-17.714 194.857-17.714 258.857s-5.143 201.143 17.714 258.857c8 20 17.714 34.857 33.143 50.286s30.286 25.143 50.286 33.143c57.714 22.857 194.857 17.714 258.857 17.714s201.143 5.143 258.857-17.714c20-8 34.857-17.714 50.286-33.143s25.143-30.286 33.143-50.286c22.857-57.714 17.714-194.857 17.714-258.857s5.143-201.143-17.714-258.857c-8-20-17.714-34.857-33.143-50.286s-30.286-25.143-50.286-33.143c-57.714-22.857-194.857-17.714-258.857-17.714zM877.714 512c0 60.571 0.571 120.571-2.857 181.143-3.429 70.286-19.429 132.571-70.857 184s-113.714 67.429-184 70.857c-60.571 3.429-120.571 2.857-181.143 2.857s-120.571 0.571-181.143-2.857c-70.286-3.429-132.571-19.429-184-70.857s-67.429-113.714-70.857-184c-3.429-60.571-2.857-120.571-2.857-181.143s-0.571-120.571 2.857-181.143c3.429-70.286 19.429-132.571 70.857-184s113.714-67.429 184-70.857c60.571-3.429 120.571-2.857 181.143-2.857s120.571-0.571 181.143 2.857c70.286 3.429 132.571 19.429 184 70.857s67.429 113.714 70.857 184c3.429 60.571 2.857 120.571 2.857 181.143z" - ], - "width": 877.7142857142857, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "instagram" - ], - "defaultCode": 61805, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "instagram", - "id": 9, - "order": 3, - "prevSize": 28, - "code": 61805 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 9 - }, - { - "icon": { - "paths": [ - "M713.143 73.143c90.857 0 164.571 73.714 164.571 164.571v548.571c0 90.857-73.714 164.571-164.571 164.571h-548.571c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571zM398.857 512c0-66.857-54.286-121.143-121.143-121.143s-121.143 54.286-121.143 121.143 54.286 121.143 121.143 121.143 121.143-54.286 121.143-121.143zM721.143 512c0-66.857-54.286-121.143-121.143-121.143s-121.143 54.286-121.143 121.143 54.286 121.143 121.143 121.143 121.143-54.286 121.143-121.143z" - ], - "width": 877.7142857142857, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "flickr" - ], - "defaultCode": 61806, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "flickr", - "id": 10, - "order": 19, - "prevSize": 28, - "code": 61806 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 10 - }, - { - "icon": { - "paths": [ - "M585.143 857.143c-5.714-33.143-27.429-147.429-80-284.571-0.571 0-1.714 0.571-2.286 0.571 0 0-222.286 77.714-294.286 234.286-3.429-2.857-8.571-6.286-8.571-6.286 65.143 53.143 148 85.714 238.857 85.714 52 0 101.143-10.857 146.286-29.714zM479.429 510.286c-9.143-21.143-19.429-42.286-30.286-63.429-193.143 57.714-378.286 53.143-384.571 53.143-0.571 4-0.571 8-0.571 12 0 96 36.571 184 96 250.286v0c102.286-182.286 304.571-247.429 304.571-247.429 5.143-1.714 10.286-2.857 14.857-4.571zM418.286 389.143c-65.143-115.429-134.286-209.143-139.429-216-104.571 49.143-182.286 145.714-206.857 261.714 9.714 0 166.286 1.714 346.286-45.714zM809.143 571.429c-8-2.286-112.571-35.429-233.714-16.571 49.143 135.429 69.143 245.714 73.143 268 84-56.571 143.429-146.857 160.571-251.429zM349.143 148c-0.571 0-0.571 0-1.143 0.571 0 0 0.571-0.571 1.143-0.571zM686.286 230.857c-65.714-58.286-152.571-93.714-247.429-93.714-30.286 0-60 4-88.571 10.857 5.714 7.429 76.571 100.571 140.571 218.286 141.143-52.571 194.286-133.714 195.429-135.429zM813.714 508c-1.143-88.571-32.571-170.286-85.143-234.286-1.143 1.143-61.143 88-209.143 148.571 8.571 17.714 17.143 36 25.143 54.286 2.857 6.286 5.143 13.143 8 19.429 129.143-16.571 256.571 11.429 261.143 12zM877.714 512c0 242.286-196.571 438.857-438.857 438.857s-438.857-196.571-438.857-438.857 196.571-438.857 438.857-438.857 438.857 196.571 438.857 438.857z" - ], - "width": 877.7142857142857, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "dribbble" - ], - "defaultCode": 61821, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "dribbble", - "id": 11, - "order": 12, - "prevSize": 28, - "code": 61821 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 11 - }, - { - "icon": { - "paths": [ - "M1056 193.714h-292v70.857h292v-70.857zM912 437.143c-68.571 0-114.286 42.857-118.857 111.429h233.143c-6.286-69.143-42.286-111.429-114.286-111.429zM921.143 771.429c43.429 0 99.429-23.429 113.143-68h126.286c-38.857 119.429-119.429 175.429-244 175.429-164.571 0-266.857-111.429-266.857-273.714 0-156.571 108-276 266.857-276 163.429 0 253.714 128.571 253.714 282.857 0 9.143-0.571 18.286-1.143 26.857h-376c0 83.429 44 132.571 128 132.571zM158.286 742.857h169.143c64.571 0 117.143-22.857 117.143-95.429 0-73.714-44-102.857-113.714-102.857h-172.571v198.286zM158.286 436h160.571c56.571 0 96.571-24.571 96.571-85.714 0-66.286-51.429-82.286-108.571-82.286h-148.571v168zM0 145.143h339.429c123.429 0 230.286 34.857 230.286 178.286 0 72.571-33.714 119.429-98.286 150.286 88.571 25.143 131.429 92 131.429 182.286 0 146.286-122.857 209.143-253.714 209.143h-349.143v-720z" - ], - "width": 1170.2857142857142, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "behance" - ], - "defaultCode": 61876, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "behance", - "id": 12, - "order": 18, - "prevSize": 28, - "code": 61876 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 12 - }, - { - "icon": { - "paths": [ - "M644 691.429c0-16-6.286-22.286-17.143-29.143-73.714-44-159.429-65.714-255.429-65.714-56 0-109.714 7.429-164 19.429-13.143 2.857-24 11.429-24 29.714 0 14.286 10.857 28 28 28 5.143 0 14.286-2.857 21.143-4.571 44.571-9.143 91.429-15.429 138.857-15.429 84 0 163.429 20.571 226.857 58.857 6.857 4 11.429 6.286 18.857 6.286 14.286 0 26.857-11.429 26.857-27.429zM698.857 568.571c0-15.429-5.714-26.286-20-34.857-87.429-52-198.286-80.571-313.143-80.571-73.714 0-124 10.286-173.143 24-18.286 5.143-27.429 17.714-27.429 36.571s15.429 34.286 34.286 34.286c8 0 12.571-2.286 21.143-4.571 40-10.857 88-18.857 143.429-18.857 108.571 0 207.429 28.571 278.857 70.857 6.286 3.429 12.571 7.429 21.714 7.429 19.429 0 34.286-15.429 34.286-34.286zM760.571 426.857c0-21.143-9.143-32-22.857-40-98.857-57.714-234.286-84.571-363.429-84.571-76 0-145.714 8.571-208 26.857-16 4.571-30.857 18.286-30.857 42.286 0 23.429 17.714 41.714 41.143 41.714 8.571 0 16.571-2.857 22.857-4.571 55.429-15.429 115.429-21.143 175.429-21.143 118.857 0 242.286 26.286 321.714 73.714 8 4.571 13.714 6.857 22.857 6.857 21.714 0 41.143-17.143 41.143-41.143zM877.714 512c0 242.286-196.571 438.857-438.857 438.857s-438.857-196.571-438.857-438.857 196.571-438.857 438.857-438.857 438.857 196.571 438.857 438.857z" - ], - "width": 877.7142857142857, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "spotify" - ], - "defaultCode": 61884, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "spotify", - "id": 13, - "order": 15, - "prevSize": 28, - "code": 61884 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 13 - }, - { - "icon": { - "paths": [ - "M123.429 668l344.571 229.714v-205.143l-190.857-127.429zM88 585.714l110.286-73.714-110.286-73.714v147.429zM556 897.714l344.571-229.714-153.714-102.857-190.857 127.429v205.143zM512 616l155.429-104-155.429-104-155.429 104zM277.143 458.857l190.857-127.429v-205.143l-344.571 229.714zM825.714 512l110.286 73.714v-147.429zM746.857 458.857l153.714-102.857-344.571-229.714v205.143zM1024 356v312c0 14.286-7.429 28.571-19.429 36.571l-468 312c-7.429 4.571-16 7.429-24.571 7.429s-17.143-2.857-24.571-7.429l-468-312c-12-8-19.429-22.286-19.429-36.571v-312c0-14.286 7.429-28.571 19.429-36.571l468-312c7.429-4.571 16-7.429 24.571-7.429s17.143 2.857 24.571 7.429l468 312c12 8 19.429 22.286 19.429 36.571z" - ], - "width": 1024, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "codepen" - ], - "defaultCode": 61899, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "codepen", - "id": 14, - "order": 16, - "prevSize": 28, - "code": 61899 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 14 - }, - { - "icon": { - "paths": [ - "M829.143 73.143c26.857 0 48.571 21.714 48.571 48.571v780.571c0 26.857-21.714 48.571-48.571 48.571h-223.429v-340h113.714l17.143-132.571h-130.857v-84.571c0-38.286 10.286-64 65.714-64l69.714-0.571v-118.286c-12-1.714-53.714-5.143-101.714-5.143-101.143 0-170.857 61.714-170.857 174.857v97.714h-114.286v132.571h114.286v340h-420c-26.857 0-48.571-21.714-48.571-48.571v-780.571c0-26.857 21.714-48.571 48.571-48.571h780.571z" - ], - "width": 877.7142857142857, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "facebook-official" - ], - "defaultCode": 62000, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "facebook", - "id": 15, - "order": 2, - "prevSize": 28, - "code": 62000 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 15 - }, - { - "icon": { - "paths": [ - "M0 341.143c0-210.857 193.143-341.143 388.571-341.143 179.429 0 342.857 123.429 342.857 312.571 0 177.714-90.857 374.857-293.143 374.857-48 0-108.571-24-132-68.571-43.429 172-40 197.714-136 329.143l-8 2.857-5.143-5.714c-3.429-36-8.571-71.429-8.571-107.429 0-116.571 53.714-285.143 80-398.286-14.286-29.143-18.286-64.571-18.286-96.571 0-57.714 40-130.857 105.143-130.857 48 0 73.714 36.571 73.714 81.714 0 74.286-50.286 144-50.286 216 0 49.143 40.571 83.429 88 83.429 131.429 0 172-189.714 172-290.857 0-135.429-96-209.143-225.714-209.143-150.857 0-267.429 108.571-267.429 261.714 0 73.714 45.143 111.429 45.143 129.143 0 14.857-10.857 67.429-29.714 67.429-2.857 0-6.857-1.143-9.714-1.714-81.714-24.571-111.429-133.714-111.429-208.571z" - ], - "width": 731.4285714285713, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "pinterest-p" - ], - "defaultCode": 62001, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "pinterest", - "id": 16, - "order": 20, - "prevSize": 28, - "code": 62001 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 16 - }, - { - "icon": { - "paths": [ - "M562.857 556.571c9.714 0 102.857 48.571 106.857 55.429 1.143 2.857 1.143 6.286 1.143 8.571 0 14.286-4.571 30.286-9.714 43.429-13.143 32-66.286 52.571-98.857 52.571-27.429 0-84-24-108.571-35.429-81.714-37.143-132.571-100.571-181.714-173.143-21.714-32-41.143-71.429-40.571-110.857v-4.571c1.143-37.714 14.857-64.571 42.286-90.286 8.571-8 17.714-12.571 29.714-12.571 6.857 0 13.714 1.714 21.143 1.714 15.429 0 18.286 4.571 24 19.429 4 9.714 33.143 87.429 33.143 93.143 0 21.714-39.429 46.286-39.429 59.429 0 2.857 1.143 5.714 2.857 8.571 12.571 26.857 36.571 57.714 58.286 78.286 26.286 25.143 54.286 41.714 86.286 57.714 4 2.286 8 4 12.571 4 17.143 0 45.714-55.429 60.571-55.429zM446.857 859.429c197.714 0 358.857-161.143 358.857-358.857s-161.143-358.857-358.857-358.857-358.857 161.143-358.857 358.857c0 75.429 24 149.143 68.571 210.286l-45.143 133.143 138.286-44c58.286 38.286 127.429 59.429 197.143 59.429zM446.857 69.714c237.714 0 430.857 193.143 430.857 430.857s-193.143 430.857-430.857 430.857c-72.571 0-144.571-18.286-208.571-53.714l-238.286 76.571 77.714-231.429c-40.571-66.857-61.714-144-61.714-222.286 0-237.714 193.143-430.857 430.857-430.857z" - ], - "width": 877.7142857142857, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "whatsapp" - ], - "defaultCode": 62002, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "whatsapp", - "id": 17, - "order": 28, - "prevSize": 28, - "code": 62002 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 17 - }, - { - "icon": { - "paths": [ - "M484.571 73.143c102.857-1.143 188 56.571 230.857 149.143 13.143 28 15.429 71.429 15.429 102.286 0 36.571-2.857 72.571-5.143 109.143 4.571 2.286 10.857 4 16 4 20.571 0 37.714-15.429 58.286-15.429 19.429 0 47.429 13.714 47.429 36.571 0 54.857-114.857 44.571-114.857 92.571 0 8.571 3.429 16.571 6.857 24.571 27.429 60 79.429 117.714 141.143 143.429 14.857 6.286 29.714 9.714 45.714 13.143 10.286 2.286 16 9.714 16 20 0 38.857-98.857 54.857-125.143 58.857-11.429 17.714-2.857 59.429-33.143 59.429-23.429 0-46.857-7.429-72-7.429-12 0-24 0.571-35.429 2.857-68 11.429-90.857 84.571-202.286 84.571-107.429 0-133.143-73.143-199.429-84.571-12-2.286-24-2.857-36-2.857-25.714 0-50.286 8.571-70.857 8.571-32 0-22.286-42.286-34.286-60.571-26.286-4-125.143-20-125.143-58.857 0-10.286 5.714-17.714 16-20 16-3.429 30.857-6.857 45.714-13.143 61.143-25.143 114.286-83.429 141.143-143.429 3.429-8 6.857-16 6.857-24.571 0-48-115.429-38.857-115.429-92 0-22.286 26.286-36.571 46.286-36.571 17.714 0 35.429 14.857 57.714 14.857 6.286 0 12.571-1.143 18.286-4-2.286-36-5.143-72-5.143-108.571 0-30.857 2.286-74.857 15.429-102.857 50.286-108.571 135.429-148 249.143-149.143z" - ], - "width": 950.8571428571428, - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "snapchat-ghost" - ], - "defaultCode": 62124, - "grid": 14 - }, - "attrs": [], - "properties": { - "name": "snapchat", - "id": 18, - "order": 11, - "prevSize": 28, - "code": 62124 - }, - "setIdx": 4, - "setId": 2, - "iconIdx": 18 - } - ], - "height": 1024, - "preferences": { - "showGlyphs": true, - "showQuickUse": true, - "showQuickUse2": true, - "showSVGs": true, - "fontPref": { - "prefix": "i-", - "metadata": { - "fontFamily": "mapache", - "majorVersion": 3, - "minorVersion": 0, - "fontURL": "https://godofredo.ninja", - "description": "Font Icons for theme mapache for ghost" - }, - "metrics": { - "emSize": 1024, - "baseline": 6.25, - "whitespace": 50 - }, - "embed": false, - "showSelector": false, - "showMetrics": false, - "showMetadata": false, - "showVersion": true - }, - "imagePref": { - "prefix": "icon-", - "png": true, - "useClassSelector": true, - "color": 0, - "bgColor": 16777215, - "classSelector": ".icon", - "name": "icomoon" - }, - "historySize": 100, - "showCodes": false, - "gridSize": 16, - "showGrid": false, - "showLiga": false - } -} \ No newline at end of file