Merge pull request #1 from iveelco/migration

Migration
This commit is contained in:
IVEEL 2020-10-07 17:23:23 +08:00 committed by GitHub
commit c65d75a955
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
115 changed files with 7829 additions and 7342 deletions

18
.editorconfig Normal file
View File

@ -0,0 +1,18 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.hbs]
insert_final_newline = false
[*.md]
trim_trailing_whitespace = false
[*.{yaml,yml}]
indent_size = 2

15
.github/workflows/deploy-theme.yml vendored Normal file
View File

@ -0,0 +1,15 @@
name: Deploy Theme
on:
push:
branches:
- migration
jobs:
deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v2
- name: Deploy Ghost Theme
uses: TryGhost/action-deploy-theme@v1.4.1
with:
api-url: ${{ secrets.GHOST_ADMIN_API_URL }}
api-key: ${{ secrets.GHOST_ADMIN_API_KEY }}

33
.gitignore vendored
View File

@ -1,7 +1,28 @@
.DS_Store
Thumbs.db
b-cov
*.seed
*.log
*.csv
*.dat
*.out
*.pid
*.gz
pids
logs
results
npm-debug.log
node_modules
.vscode
.editorconfig
assets/css/screen.css
assets/js/main.min.js
package-lock.json
.idea/*
*.iml
projectFilesBackup
.DS_Store
dist/
config.json
changelog.md
changelog.md.bk

40
README.md Normal file
View File

@ -0,0 +1,40 @@
# Ruby
A multi-column theme with a unique card layout. Share your posts with contemporary style. Completely free and fully responsive, released under the MIT license.
**Demo: https://ruby.ghost.io**
 
# Instructions
1. [Download this theme](https://github.com/TryGhost/Ruby/archive/master.zip)
2. Log into Ghost, and go to the `Design` settings area to upload the zip file
# Development
Styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory:
```bash
# Install
yarn
# Run build & watch for changes
$ yarn dev
```
Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.
```bash
yarn zip
```
# PostCSS Features Used
- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
# Copyright & License
Copyright (c) 2013-2020 Ghost Foundation - Released under the [MIT license](LICENSE).

2
assets/built/main.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
assets/built/screen.css Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,9 @@
{
"extends": "stylelint-config-standard",
"plugins": ["stylelint-order"],
"rules": {
"indentation": 4,
"no-descending-specificity": null,
"order/properties-alphabetical-order": true
}
}

111
assets/css/blog/author.css Normal file
View File

@ -0,0 +1,111 @@
.author {
background-color: var(--white-color);
display: flex;
margin-top: 30px;
padding: 30px 20px;
}
.author-image-placeholder {
border-radius: 50%;
flex-shrink: 0;
height: 70px;
overflow: hidden;
width: 70px;
}
.author-wrapper {
margin-left: 25px;
max-width: 550px;
}
.author-header {
align-items: center;
display: flex;
}
.author-header-wrapper {
position: relative;
}
.author-name {
align-items: center;
cursor: pointer;
display: flex;
font-size: 18px;
font-weight: 800;
margin-bottom: 0;
position: relative;
}
.author-name::after {
content: "\e92e";
font-family: IVEEL, sans-serif;
font-size: 19px;
margin-left: 1px;
}
.author-social {
background-color: var(--dark-gray-color);
border-radius: 3px;
display: flex;
flex-direction: column;
font-size: 12px;
left: 100%;
line-height: 1;
margin-left: -26px;
margin-top: 5px;
opacity: 0;
padding: 8px 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(5px);
transition: opacity 0.2s var(--animation-base), transform 0.2s var(--animation-base);
}
.author-social::before {
color: var(--dark-gray-color);
content: "\e900";
font-family: IVEEL, sans-serif;
font-size: 19px;
left: 7px;
position: absolute;
top: -12px;
}
.author-social.enabled {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.author-social-item {
color: var(--white-color);
font-weight: 700;
padding: 5px 11px;
white-space: nowrap;
}
.author-social-item:hover {
color: var(--primary-color);
}
.author-location-icon {
position: relative;
top: 1px;
}
.author-bio {
font-size: 15px;
margin-top: 8px;
}
.author-location {
color: var(--secondary-text-color);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
margin-left: -2px;
margin-top: 12px;
text-transform: uppercase;
}

View File

@ -0,0 +1,5 @@
.comment {
background-color: var(--white-color);
margin-top: 30px;
padding: 30px;
}

View File

@ -0,0 +1,61 @@
.post-feed .featured {
min-height: 350px;
position: relative;
}
.post-feed .featured::before {
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
}
.post-feed .featured > .post-image {
z-index: -1;
}
.post-feed .featured .post-media .post-image {
display: none;
}
.post-feed .featured .u-placeholder,
.post-feed .featured .post-wrapper,
.post-feed .featured .post-footer {
background-color: transparent;
position: relative;
}
.post-feed .featured .post-wrapper {
align-items: flex-end;
display: flex;
}
.post-feed .featured .post-header {
margin-bottom: 0;
}
.post-feed .featured .post-title {
font-size: 22px;
line-height: 1.2;
}
.post-feed .featured .post-title-link,
.post-feed .featured .post-excerpt,
.post-feed .featured .post-link {
color: var(--white-color);
}
.post-feed .featured .post-excerpt {
display: none;
}
.post-feed .featured .post-footer {
border-color: rgba(255, 255, 255, 0.2);
}
.post-feed .featured .post-author-image {
border-color: transparent;
}

View File

@ -0,0 +1,77 @@
.navigation {
display: flex;
margin-top: 30px;
}
.navigation-item {
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100px;
overflow: hidden;
padding: 0 20px;
position: relative;
width: 50%;
}
.navigation-item::before {
background-color: var(--black-color);
bottom: 0;
content: "";
left: 0;
opacity: 0.4;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.2s var(--animation-base);
z-index: 1;
}
.navigation-item:hover::before {
opacity: 0.6;
}
.navigation-previous {
margin-right: 7px;
}
.navigation-next {
align-items: flex-end;
margin-left: auto;
text-align: right;
}
.navigation-label {
color: var(--white-color);
font-size: 11px;
font-weight: 700;
opacity: 0.8;
padding-top: 25px;
position: relative;
text-transform: uppercase;
z-index: 2;
}
.navigation-title {
color: var(--white-color);
font-size: 17px;
margin: 5px 0 0;
padding-bottom: 25px;
position: relative;
z-index: 2;
}
@media (max-width: 767px) {
.navigation {
display: block;
}
.navigation-item {
width: 100%;
}
.navigation-next {
margin-top: 7px;
}
}

10
assets/css/blog/page.css Normal file
View File

@ -0,0 +1,10 @@
.page-template .single .post-header {
border-bottom: 1px solid var(--light-gray-color);
padding: 25px 30px;
}
@media (min-width: 992px) {
.page-template .content-column {
margin-left: 16.666667%;
}
}

View File

@ -0,0 +1,34 @@
.pagination,
.infinite-scroll-status,
body:not(.paged-next) .infinite-scroll-button {
display: none;
}
.infinite-scroll-request {
animation: scaleOut 1s infinite ease-in-out;
background-color: var(--dark-gray-color);
border-radius: 50%;
height: 40px;
margin: 30px auto 0;
width: 40px;
}
.infinite-scroll-action {
display: flex;
justify-content: center;
}
.infinite-scroll-button {
margin-top: 30px;
}
@keyframes scaleOut {
0% {
transform: scale(0);
}
100% {
opacity: 0;
transform: scale(1);
}
}

149
assets/css/blog/post.css Normal file
View File

@ -0,0 +1,149 @@
.post-column {
margin-bottom: 30px;
}
.post {
display: flex;
flex-direction: column;
height: 100%;
}
.post-image {
width: 100%;
}
.post-wrapper {
background-color: var(--white-color);
flex-grow: 1;
padding: 20px;
}
.post-tag {
background-color: var(--primary-color);
border-radius: 15px;
color: var(--white-color);
display: inline-block;
font-size: 12px;
font-weight: 700;
line-height: 1;
margin-bottom: 8px;
padding: 4px 8px;
}
.post-header {
margin-bottom: 10px;
}
.post-title {
font-size: 18px;
margin-bottom: 0;
}
.post-meta {
background-color: var(--white-color);
border-top: 1px solid var(--light-gray-color);
color: var(--secondary-text-color);
display: flex;
font-size: 13px;
font-weight: 700;
padding: 10px 30px;
}
.post-meta-length::before {
content: "\02022";
font-family: serif;
padding: 0 8px;
}
.post-date {
color: var(--secondary-text-color);
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.post-excerpt {
color: var(--secondary-text-color);
font-size: 14px;
}
.post-content {
font-size: 15px;
line-height: 1.8;
}
.post-tags {
margin-top: 15px;
}
.post-tags .tag {
font-weight: 700;
}
.post-tags .tag + .tag {
margin-left: 10px;
}
.post-tags .tag::before {
content: "#";
}
.post-footer {
align-items: center;
background-color: var(--white-color);
border-top: 1px solid var(--light-gray-color);
display: flex;
height: 42px;
justify-content: space-between;
padding: 0 20px;
}
.post-link {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1;
text-transform: uppercase;
}
.post-author {
display: flex;
margin-right: 2px;
}
.post-author-link {
display: block;
height: 28px;
margin: 0 -4px;
position: relative;
width: 28px;
}
.post-author-link:first-child {
z-index: 10;
}
.post-author-link:nth-child(2) {
z-index: 9;
}
.post-author-link:nth-child(3) {
z-index: 8;
}
.post-author-link:nth-child(4) {
z-index: 7;
}
.post-author-link:nth-child(5) {
z-index: 6;
}
.post-author-image {
border: 2px solid var(--white-color);
border-radius: 50%;
height: 100%;
object-fit: cover;
width: 100%;
}

View File

@ -0,0 +1,11 @@
.related-posts .post + .post {
margin-top: 30px;
}
.related-title {
color: var(--secondary-text-color);
font-size: 14px;
letter-spacing: 1px;
margin: 20px 0 30px;
text-transform: uppercase;
}

45
assets/css/blog/share.css Normal file
View File

@ -0,0 +1,45 @@
.share {
align-items: center;
display: flex;
justify-content: center;
line-height: 1;
margin-top: 30px;
}
.share-item {
border-radius: 50%;
color: var(--white-color);
font-size: 16px;
height: 28px;
line-height: 28px;
text-align: center;
width: 28px;
}
.share-item + .share-item {
margin-left: 8px;
}
.share-facebook {
background-color: #3b5998;
}
.share-twitter {
background-color: #1da1f2;
}
.share-pinterest {
background-color: #bd081c;
}
.share-linkedin {
background-color: #0077b5;
}
.share-reddit {
background-color: #ff4500;
}
.share-vk {
background-color: #45668e;
}

View File

@ -0,0 +1,38 @@
.single .post-header {
background-color: var(--white-color);
margin-bottom: 0;
padding: 25px 30px 15px;
}
.single .post-title {
font-size: 22px;
}
.single .post-image-link {
display: block;
pointer-events: none;
}
.single .post-wrapper {
padding: 30px;
}
@media (max-width: 767px) {
.post-template .site-content > .container,
.post-template .site-content > .container .content-column {
padding-left: 0;
padding-right: 0;
}
.post-template .site-content > .container > .row {
margin-left: 0;
margin-right: 0;
}
.post-template .site-content > .container .post,
.post-template .site-content > .container .author,
.post-template .site-content > .container .navigation-item,
.post-template .site-content > .container .comment {
border-radius: 0;
}
}

View File

@ -0,0 +1,137 @@
:root {
--primary-color: #2ec4b6;
--primary-text-color: #333;
--secondary-text-color: #aaa;
--white-color: #fff;
--light-gray-color: #f4f4f4;
--mid-gray-color: #e9e9e9;
--dark-gray-color: #1a1a1a;
--black-color: #000;
--font-base: "Open Sans", sans-serif;
--font-alt: dosis, sans-serif;
--animation-base: ease-in-out;
--shadow-base: 0 0 10px rgba(0, 0, 0, 0.02);
}
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
background-color: var(--light-gray-color);
background-color: #f9f9f9;
color: var(--primary-text-color);
font-family: var(--font-base);
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.65;
text-rendering: optimizeLegibility;
transition: background-color 0.3s var(--animation-base);
word-break: break-word;
}
a {
color: var(--dark-gray-color);
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--dark-gray-color);
font-family: var(--font-alt);
font-weight: 700;
line-height: 1.3;
margin: 0 0 15px;
}
p {
margin: 0 0 20px;
}
img {
display: block;
height: auto;
max-width: 100%;
}
blockquote {
border-left: 4px solid var(--dark-gray-color);
color: var(--dark-gray-color);
font-size: 18px;
line-height: 1.4;
margin: 30px auto;
padding: 5px 0 5px 15px;
}
ul,
ol {
margin: 30px 0;
padding-left: 30px;
}
li {
margin: 5px 0;
}
iframe,
embed {
border: 0;
display: block;
overflow: hidden;
width: 100%;
}
figure {
margin: 45px 0;
}
figcaption {
color: var(--dark-gray-color);
font-size: 14px;
margin-top: 15px;
text-align: center;
}
pre {
margin: 30px 0;
overflow-x: scroll;
}
hr {
background-color: var(--dark-gray-color);
border: 0;
border-radius: 50%;
height: 5px;
margin: 45px auto;
position: relative;
width: 5px;
}
hr::before,
hr::after {
background-color: var(--dark-gray-color);
border-radius: 50%;
content: "";
height: 5px;
position: absolute;
width: 5px;
}
hr::before {
right: 20px;
}
hr::after {
left: 20px;
}

View File

@ -0,0 +1,17 @@
.button {
background-color: var(--primary-color);
border: 0;
border-radius: 30px;
box-shadow: var(--shadow-base);
color: var(--white-color);
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
line-height: 1;
outline: none;
padding: 15px 30px;
text-align: center;
text-transform: uppercase;
}

View File

@ -0,0 +1,17 @@
input[type="text"],
input[type="password"],
input[type="email"] {
appearance: none;
border: 1px solid var(--mid-gray-color);
border-radius: 5px;
font-size: 16px;
height: 50px;
outline: none;
padding: 0 15px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
border-color: var(--primary-color);
}

444
assets/css/general/grid.css Normal file
View File

@ -0,0 +1,444 @@
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (max-width: 767px) {
.container {
max-width: 460px;
padding-left: 30px;
padding-right: 30px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
width: 100%;
}
.col-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
@media (min-width: 576px) {
.col-sm-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-sm-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-sm-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-sm-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-sm-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-sm-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-sm-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-sm-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-sm-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-sm-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-sm-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-sm-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 768px) {
.col-md-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-md-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-md-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-md-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-md-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-md-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-md-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-md-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-md-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-md-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 992px) {
.col-lg-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-lg-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-lg-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-lg-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-lg-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-lg-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-lg-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-lg-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-lg-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-lg-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 1200px) {
.col-xl-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-xl-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-xl-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-xl-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-xl-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-xl-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-xl-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-xl-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-xl-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-xl-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-xl-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-xl-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (max-width: 575px) {
.hidden-xs {
display: none !important;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.hidden-sm {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-md {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-lg {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-xl {
display: none !important;
}
}

View File

@ -7,10 +7,13 @@
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
@ -19,7 +22,6 @@
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
@ -27,7 +29,6 @@ body {
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
@ -36,7 +37,6 @@ main {
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
@ -49,21 +49,29 @@ h1 {
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
font-family: monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
@ -72,7 +80,6 @@ pre {
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
@ -81,17 +88,21 @@ a {
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
@ -101,18 +112,20 @@ strong {
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
font-family: monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
@ -121,7 +134,6 @@ small {
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
@ -144,7 +156,6 @@ sup {
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
@ -156,25 +167,32 @@ img {
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
input {
/* 1 */
overflow: visible;
}
@ -182,16 +200,15 @@ input { /* 1 */
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
@ -202,7 +219,6 @@ button,
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
@ -214,7 +230,6 @@ button::-moz-focus-inner,
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
@ -225,7 +240,6 @@ button:-moz-focusring,
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
@ -236,20 +250,30 @@ fieldset {
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
@ -257,7 +281,6 @@ progress {
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
@ -266,17 +289,19 @@ textarea {
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
@ -286,16 +311,18 @@ textarea {
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
@ -304,10 +331,13 @@ textarea {
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
@ -316,7 +346,6 @@ textarea {
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
@ -324,7 +353,6 @@ details {
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
@ -335,7 +363,6 @@ summary {
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
@ -343,7 +370,6 @@ template {
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

127
assets/css/misc/kg.css Normal file
View File

@ -0,0 +1,127 @@
.kg-width-wide,
.kg-width-full {
margin-left: -30px;
margin-right: -30px;
max-width: calc(100% + 60px);
width: auto;
}
.kg-width-wide img,
.kg-width-full img {
width: 100%;
}
.kg-image-card .kg-image {
cursor: pointer;
}
.kg-gallery-container {
display: flex;
flex-direction: column;
}
.kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.kg-gallery-image {
cursor: pointer;
}
.kg-gallery-image img {
height: 100%;
width: 100%;
}
.kg-gallery-row:not(:first-of-type) {
margin: 10px 0 0 0;
}
.kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 10px;
}
.kg-bookmark-card {
border: 1px solid var(--mid-gray-color);
border-radius: 4px;
}
.kg-bookmark-container {
display: flex;
overflow: hidden;
}
.kg-bookmark-container::after {
display: none;
}
.kg-bookmark-content {
overflow: hidden;
padding: 25px;
}
.kg-bookmark-title {
color: var(--dark-gray-color);
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
.kg-bookmark-description {
color: var(--secondary-text-color);
margin-top: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kg-bookmark-metadata {
align-items: center;
display: flex;
font-size: 14px;
margin-top: 5px;
}
.kg-bookmark-icon {
height: 20px;
margin-right: 5px;
width: 20px;
}
.kg-bookmark-author,
.kg-bookmark-publisher {
color: var(--dark-gray-color);
}
.kg-bookmark-publisher::before {
content: "•";
padding: 0 5px;
}
.kg-bookmark-thumbnail {
flex-shrink: 0;
margin-left: 20px;
position: relative;
width: 300px;
}
.kg-bookmark-thumbnail img {
height: 100%;
object-fit: cover;
position: absolute;
width: 100%;
}
@media (max-width: 767px) {
.kg-bookmark-container {
flex-direction: column;
}
.kg-bookmark-thumbnail {
height: 200px;
margin-left: 0;
width: 100%;
}
}

View File

@ -0,0 +1,117 @@
.u-shadow {
border-radius: 5px;
box-shadow: var(--shadow-base);
overflow: hidden;
transition: box-shadow 0.3s var(--animation-base);
}
.u-shadow:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.12);
}
.u-plain-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.u-placeholder {
background-color: var(--light-gray-color);
position: relative;
z-index: 10;
}
.u-placeholder.same-height {
height: 0;
}
.u-placeholder.rectangle {
padding-bottom: 56.25%;
}
.u-object-fit {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
.u-permalink {
bottom: 0;
left: 0;
outline: none;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
.u-hover-item {
transition: opacity 0.3s var(--animation-base);
}
.u-hover-wrapper:hover .u-hover-item {
opacity: 0.5;
}
.u-hover-wrapper:hover .u-hover-item:hover {
opacity: 1;
}
.u-text-format h1,
.u-text-format h2,
.u-text-format h3,
.u-text-format h4,
.u-text-format h5,
.u-text-format h6 {
font-weight: 800;
margin-top: 40px;
}
.u-text-format h1 {
font-size: 26px;
}
.u-text-format h2 {
font-size: 23px;
}
.u-text-format h3 {
font-size: 20px;
}
.u-text-format h4 {
font-size: 17px;
font-weight: 700;
}
.u-text-format h5 {
font-size: 15px;
font-weight: 700;
}
.u-text-format h6 {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}
.u-text-format strong {
color: var(--dark-gray-color);
}
.u-text-format a {
color: var(--primary-color);
}
.u-text-format > *:first-child,
.u-text-format > *:first-child > *:first-child {
margin-top: 0 !important;
}
.u-text-format > *:last-child,
.u-text-format > *:last-child > *:last-child {
margin-bottom: 0 !important;
}

29
assets/css/screen.css Normal file
View File

@ -0,0 +1,29 @@
@import "general/normalize.css";
@import "general/basics.css";
@import "general/grid.css";
@import "general/form.css";
@import "general/button.css";
@import "site/header.css";
@import "site/social.css";
@import "site/layout.css";
@import "site/widget.css";
@import "site/term.css";
@import "site/burger.css";
@import "site/off-canvas.css";
@import "site/footer.css";
@import "site/error.css";
@import "blog/post.css";
@import "blog/page.css";
@import "blog/featured.css";
@import "blog/single.css";
@import "blog/share.css";
@import "blog/author.css";
@import "blog/navigation.css";
@import "blog/comment.css";
@import "blog/related.css";
@import "blog/pagination.css";
@import "vendor/mdi.css";
@import "vendor/lazyload.css";
@import "vendor/pswp.css";
@import "misc/kg.css";
@import "misc/utilities.css";

View File

@ -0,0 +1,54 @@
.burger {
cursor: pointer;
height: 30px;
margin-left: 20px;
margin-right: -7px;
position: relative;
width: 30px;
}
.burger-bar {
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: transform 0.1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
width: 100%;
}
.burger-bar::before {
background-color: var(--dark-gray-color);
content: "";
height: 2px;
left: 7px;
position: absolute;
transition: transform 0.1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) 0.1008s;
width: 16px;
}
.burger-bar:first-child::before {
top: 14px;
transform: translateY(-3px);
}
.burger-bar:last-child::before {
bottom: 14px;
transform: translateY(3px);
}
.burger-close .burger-bar {
transition: transform 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
.burger-close .burger-bar:first-child {
transform: rotate(45deg);
}
.burger-close .burger-bar:last-child {
transform: rotate(-45deg);
}
.burger-close .burger-bar::before {
transform: none;
transition: transform 0.1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}

16
assets/css/site/error.css Normal file
View File

@ -0,0 +1,16 @@
.error {
text-align: center;
}
.error-code {
font-size: 40px;
font-weight: 700;
letter-spacing: 2px;
line-height: 1;
margin: 60px 0 10px;
}
.error-message {
color: var(--secondary-text-color);
margin-bottom: 45px;
}

View File

@ -1,10 +1,10 @@
.site-footer {
margin-top: 30px;
}
.social {
.site-footer .social {
justify-content: center;
margin-bottom: 15px;
}
}
.footer-inner {
@ -13,8 +13,8 @@
.copyright {
text-align: center;
a {
text-decoration: underline;
}
}
.copyright a {
text-decoration: underline;
}

View File

@ -0,0 +1,55 @@
.site-header {
background-color: var(--white-color);
box-shadow: var(--shadow-base);
padding: 0 30px;
z-index: 80;
}
.navbar {
align-items: center;
display: flex;
height: 70px;
justify-content: space-between;
}
.navbar-left,
.navbar-right {
flex: 2;
}
.navbar-right {
display: flex;
justify-content: flex-end;
}
.logo {
display: inline-block;
margin-right: 15px;
position: relative;
vertical-align: middle;
}
.logo-image {
max-height: 40px;
}
.logo-text {
font-family: var(--font-alt);
font-size: 25px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1;
}
.nav-list {
display: flex;
}
.menu-item {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1;
margin: 0 20px;
text-transform: uppercase;
}

View File

@ -0,0 +1,25 @@
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex-grow: 1;
padding-bottom: 30px;
padding-top: 30px;
}
@media (min-width: 992px) {
.related-column {
order: 1;
}
.content-column {
order: 2;
}
.sidebar-column {
order: 3;
}
}

View File

@ -0,0 +1,77 @@
.dimmer {
background: rgba(0, 0, 0, 0.7);
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 90;
}
.off-canvas {
background-color: var(--light-gray-color);
height: 100vh;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
padding: 60px 0;
position: fixed;
right: 0;
top: 0;
transform: translateX(320px);
transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
width: 320px;
z-index: 90;
}
.off-canvas .burger {
margin: 0;
position: absolute;
right: 12px;
top: 15px;
}
.off-canvas .related-posts {
margin: 45px 0 30px;
padding: 0 20px;
}
.off-canvas .widget-area {
padding: 0 20px;
}
.off-canvas .widget {
background-color: transparent;
box-shadow: none;
padding: 0;
}
.off-canvas .widget + .widget {
margin-top: 45px;
}
body:not(.canvas-visible) .off-canvas {
visibility: hidden;
}
.canvas-opened {
overflow-y: hidden;
}
.canvas-opened .off-canvas {
transform: translateX(0);
visibility: visible;
}
.mobile-menu {
margin: 0 20px 45px;
}
.mobile-menu .nav-list {
display: block;
}
.mobile-menu .menu-item {
letter-spacing: 0;
margin: 20px 0;
}

View File

@ -0,0 +1,12 @@
.social {
display: flex;
}
.social-item {
font-size: 17px;
height: 30px;
line-height: 30px;
margin-left: 2px;
text-align: center;
width: 30px;
}

51
assets/css/site/term.css Normal file
View File

@ -0,0 +1,51 @@
.term-tags {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.term-tags .tag {
color: var(--secondary-text-color);
font-weight: 700;
margin-bottom: 10px;
margin-right: 20px;
}
.term-tags .tag-current {
background-color: var(--primary-color);
border-radius: 15px;
color: var(--white-color);
padding: 2px 10px 3px;
}
@media (max-width: 767px) {
.term-tags {
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
}
.term-tags .tag {
white-space: nowrap;
}
}
.term-author {
display: flex;
margin-bottom: 30px;
}
.term-author .author-image-placeholder {
height: 40px;
margin-right: 15px;
width: 40px;
}
.term-author .author-name {
font-size: 20px;
}
.term-author .author-name::after {
display: none;
}

View File

@ -0,0 +1,85 @@
.widget {
background-color: var(--white-color);
padding: 20px;
}
.widget + .widget {
margin-top: 30px;
}
.widget-no-title {
padding: 5px;
}
.widget-title {
border-bottom: 1px solid var(--light-gray-color);
color: var(--secondary-text-color);
font-family: var(--font-base);
font-size: 11px;
letter-spacing: 0.5px;
margin: -20px -20px 20px;
padding: 15px 20px;
text-transform: uppercase;
}
.widget-tags .tag + .tag {
margin-top: 5px;
}
.widget-tags .tag-link {
align-items: center;
display: flex;
justify-content: space-between;
}
.widget-tags .tag-name {
font-family: var(--font-alt);
font-size: 16px;
font-weight: 600;
}
.widget-tags .tag-count {
align-items: center;
background-color: var(--primary-color);
border-radius: 50%;
color: var(--white-color);
display: flex;
font-size: 12px;
font-weight: 700;
height: 24px;
justify-content: center;
min-width: 24px;
}
.widget-recent .recent {
align-items: center;
display: flex;
}
.widget-recent .recent + .recent {
margin-top: 20px;
}
.widget-recent .post-header {
margin-bottom: 0;
overflow: hidden;
}
.widget-recent .post-title {
font-size: 16px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.widget-recent .post-date {
margin-top: 3px;
}
@media (max-width: 767px) {
.widget-title {
margin-bottom: 0;
margin-top: 0;
}
}

8
assets/css/vendor/lazyload.css vendored Normal file
View File

@ -0,0 +1,8 @@
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 1s var(--animation-base);
}

View File

@ -1,13 +1,9 @@
@font-face {
font-family: "IVEEL";
src:
url('../fonts/IVEEL.ttf') format('truetype'),
url('../fonts/IVEEL.woff') format('woff'),
url('../fonts/IVEEL.svg') format('svg');
src: url('../fonts/IVEEL.ttf') format('truetype'), url('../fonts/IVEEL.woff') format('woff'), url('../fonts/IVEEL.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.icon:before {
display: inline-block;
font: normal normal normal 24px/1 "IVEEL";
@ -17,7 +13,6 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-chevron-left:before {
content: "\e929";
}

View File

@ -12,48 +12,40 @@
z-index: 1500;
-ms-touch-action: none;
-webkit-text-size-adjust: 100%;
img {
max-width: none;
}
}
.pswp img {
max-width: none;
}
.pswp--animate_opacity {
opacity: .001;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
opacity: 0.001;
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
will-change: opacity;
}
.pswp--open {
display: block;
}
.pswp--zoom-allowed .pswp__img {
cursor: zoom-in;
}
.pswp--zoomed-in .pswp__img {
cursor: grab;
}
.pswp--dragging .pswp__img {
cursor: grabbing;
}
.pswp__bg {
backface-visibility: hidden;
background-color: rgba(0,0,0,.85);
background-color: rgba(0, 0, 0, 0.85);
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transform: translateZ(0);
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
width: 100%;
will-change: opacity;
}
.pswp__scroll-wrap {
height: 100%;
left: 0;
@ -62,7 +54,6 @@
top: 0;
width: 100%;
}
.pswp__container,
.pswp__zoom-wrap {
bottom: 0;
@ -72,31 +63,26 @@
top: 0;
touch-action: none;
}
.pswp__container,
.pswp__img {
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.pswp__zoom-wrap {
position: absolute;
transform-origin: left top;
transition: transform 333ms cubic-bezier(.4,0,.22, 1);
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
width: 100%;
}
.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
transition: none;
}
.pswp__container,
.pswp__zoom-wrap {
backface-visibility: hidden;
}
.pswp__item {
bottom: 0;
left: 0;
@ -105,7 +91,6 @@
right: 0;
top: 0;
}
.pswp__img {
height: auto;
left: 0;
@ -113,24 +98,20 @@
top: 0;
width: auto;
}
.pswp__img--placeholder {
backface-visibility: hidden;
}
.pswp__img--placeholder--blank {
background: @black-color;
background: var(--black-color);
}
.pswp--ie .pswp__img {
height: auto !important;
left: 0;
top: 0;
width: 100% !important;
}
.pswp__error-msg {
color: @secondary-text-color;
color: var(--secondary-text-color);
font-size: 14px;
left: 0;
line-height: 16px;
@ -140,14 +121,10 @@
top: 50%;
width: 100%;
}
.pswp__error-msg a {
color: @secondary-text-color;
color: var(--secondary-text-color);
text-decoration: underline;
}
// 1. Button
.pswp__button {
appearance: none;
background: none;
@ -161,28 +138,24 @@
overflow: visible;
padding: 0;
position: relative;
transition: opacity .2s;
transition: opacity 0.2s;
width: 44px;
}
.pswp__button:focus, .pswp__button:hover {
.pswp__button:focus,
.pswp__button:hover {
opacity: 1;
}
.pswp__button:active {
opacity: .9;
opacity: 0.9;
outline: none;
}
.pswp__button::-moz-focus-inner {
border: 0;
padding: 0;
}
.pswp__ui--over-close .pswp__button--close {
opacity: 1;
}
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
@ -191,58 +164,46 @@
height: 44px;
width: 44px;
}
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
.pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left:before,
.pswp--svg .pswp__button--arrow--right:before {
background-image: url(../images/default-skin.svg);
}
.pswp--svg .pswp__button--arrow--left,
.pswp--svg .pswp__button--arrow--right {
background: none;
}
}
.pswp__button--close {
background-position: 0 -44px;
}
.pswp__button--share {
background-position: -44px -44px;
}
.pswp__button--fs {
display: none;
}
.pswp--supports-fs .pswp__button--fs {
display: block;
}
.pswp--fs .pswp__button--fs {
background-position: -44px 0;
}
.pswp__button--zoom {
background-position: -88px 0;
display: none;
}
.pswp--zoom-allowed .pswp__button--zoom {
display: block;
}
.pswp--zoomed-in .pswp__button--zoom {
background-position: -132px 0;
}
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
visibility: hidden;
}
.pswp__button--arrow--left,
.pswp__button--arrow--right {
background: none;
@ -252,15 +213,12 @@
top: 50%;
width: 70px;
}
.pswp__button--arrow--left {
left: 0;
}
.pswp__button--arrow--right {
right: 0;
}
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
content: "";
@ -269,21 +227,16 @@
top: 35px;
width: 32px;
}
.pswp__button--arrow--left:before {
background-position: -138px -44px;
left: 6px;
}
.pswp__button--arrow--right:before {
background-position: -94px -44px;
right: 6px;
}
// 2. Index indicator ("1 of X" counter)
.pswp__counter {
color: @white-color;
color: var(--white-color);
font-size: 11px;
font-weight: 700;
height: 44px;
@ -294,9 +247,6 @@
top: 0;
user-select: none;
}
// 3. Caption
.pswp__caption {
bottom: 0;
left: 0;
@ -304,39 +254,31 @@
position: absolute;
width: 100%;
}
.pswp__caption__center {
color: @white-color;
color: var(--white-color);
font-size: 11px;
line-height: 1.6;
margin: 0 auto;
max-width: 420px;
padding: 25px 15px 30px;
text-align: center;
.post-caption-title {
}
.pswp__caption__center .post-caption-title {
font-size: 15px;
font-weight: 500;
margin-bottom: 7px;
text-transform: uppercase;
}
.post-caption-meta-item + .post-caption-meta-item:before {
}
.pswp__caption__center .post-caption-meta-item + .post-caption-meta-item:before {
content: "\02022";
padding: 0 4px;
}
}
.pswp__caption--empty {
display: none;
}
.pswp__caption--fake {
visibility: hidden;
}
// 4. Loading indicator (preloader)
.pswp__preloader {
direction: ltr;
height: 44px;
@ -345,37 +287,30 @@
opacity: 0;
position: absolute;
top: 0;
transition: opacity .25s ease-out;
transition: opacity 0.25s ease-out;
width: 44px;
will-change: opacity;
}
.pswp__preloader__icn {
height: 20px;
margin: 12px;
width: 20px;
}
.pswp__preloader--active {
opacity: 1;
}
.pswp__preloader--active .pswp__preloader__icn {
background: url(../images/preloader.gif) 0 0 no-repeat;
}
.pswp--css_animation .pswp__preloader--active {
opacity: 1;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
animation: clockwise 500ms linear infinite;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}
.pswp--css_animation .pswp__preloader__icn {
background: none;
height: 14px;
@ -386,17 +321,15 @@
top: 15px;
width: 14px;
}
.pswp--css_animation .pswp__preloader__cut {
height: 14px;
overflow: hidden;
position: relative;
width: 7px;
}
.pswp--css_animation .pswp__preloader__donut {
background: none;
border: 2px solid @white-color;
border: 2px solid var(--white-color);
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: 50%;
@ -408,7 +341,6 @@
top: 0;
width: 14px;
}
@media screen and (max-width: 1024px) {
.pswp__preloader {
float: right;
@ -418,7 +350,6 @@
top: auto;
}
}
@keyframes clockwise {
0% {
transform: rotate(0deg);
@ -427,7 +358,6 @@
transform: rotate(360deg);
}
}
@keyframes donut-rotate {
0% {
transform: rotate(0);
@ -439,16 +369,12 @@
transform: rotate(0);
}
}
// 5. Additional styles
.pswp__ui {
opacity: 1;
visibility: visible;
z-index: 1550;
-webkit-font-smoothing: auto;
}
.pswp__top-bar {
height: 44px;
left: 0;
@ -456,47 +382,39 @@
top: 0;
width: 100%;
}
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
backface-visibility: hidden;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
will-change: opacity;
}
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
visibility: visible;
}
.pswp__ui--idle .pswp__top-bar {
opacity: 0;
}
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
opacity: 0;
}
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
opacity: .001;
opacity: 0.001;
}
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
display: none;
}
.pswp__element--disabled {
display: none !important;
}
.pswp--minimal--dark .pswp__top-bar {
background: none;
}

View File

@ -0,0 +1,3 @@
{
"singleQuote": true
}

View File

@ -5,42 +5,14 @@ window.lazySizesConfig.loadHidden = false;
$(function () {
'use strict';
social();
author();
stickySidebar();
pagination();
facebook();
loadInstagram();
gallery();
copyright();
offCanvas();
});
function social() {
'use strict';
var data = {
facebook: {name: 'Facebook', icon: 'facebook'},
twitter: {name: 'Twitter', icon: 'twitter'},
instagram: {name: 'Instagram', icon: 'instagram'},
dribbble: {name: 'Dribbble', icon: 'dribbble'},
behance: {name: 'Behance', icon: 'behance'},
github: {name: 'GitHub', icon: 'github-circle'},
linkedin: {name: 'LinkedIn', icon: 'linkedin'},
vk: {name: 'VK', icon: 'vk'},
rss: {name: 'RSS', icon: 'rss'},
};
var links = themeOptions.social_links;
var output = '';
for (var key in links) {
if (links[key] != '') {
output += '<a class="social-item" href="' + links[key] + '" target="_blank"><i class="icon icon-' + data[key]['icon'] + '"></i></a>';
}
}
$('.social').html(output);
}
function author() {
'use strict';
$('.author-name').on('click', function () {
@ -91,62 +63,14 @@ function facebook() {
'use strict';
var widget = $('.widget-facebook');
if (widget.find('.fb-page').attr('data-href') == '__YOUR_FACEBOOK_PAGE_URL__') {
if (
widget.find('.fb-page').attr('data-href') ==
'__YOUR_FACEBOOK_PAGE_URL__'
) {
widget.remove();
}
}
function loadInstagram() {
'use strict';
var photos;
var feed = $('.instagram-feed');
var storageKey = 'ruby_instagram';
if (themeOptions.instagram_token != '') {
if ( localStorage.getItem(storageKey) !== null && (Math.floor(Date.now() / 1000) - JSON.parse(localStorage.getItem(storageKey)).timestamp) < 300) {
photos = JSON.parse(localStorage.getItem(storageKey)).photos;
outputInstagram(photos, feed);
} else {
$.ajax({
url: 'https://graph.instagram.com/me/media/',
type: 'GET',
data: {access_token: themeOptions.instagram_token, limit: 6, fields: 'media_url, permalink, thumbnail_url, media_type'},
success: function (result) {
photos = result.data;
var cache = {
photos: photos,
timestamp: Math.floor(Date.now() / 1000)
};
localStorage.setItem(storageKey, JSON.stringify(cache));
outputInstagram(photos, feed);
}
} );
}
} else {
feed.parent('.widget-instagram').remove();
}
}
function outputInstagram(photos, feed) {
'use strict';
var photo;
var output = '';
for (var index in photos) {
photo = photos[index];
var url = photo.media_type != 'VIDEO' ? photo.media_url : photo.thumbnail_url;
output += '<a class="instagram-feed-item" href="' + photo.permalink + '" target="_blank" rel="noopener noreferrer">' +
'<img class="u-object-fit" src="' + url + '">' +
'<i class="instagram-feed-item-icon icon icon-instagram"></i>' +
'</a>';
}
feed.each(function(i, v) {
$(v).html(output);
$(v).css('height', Math.round($(v).height()) + 'px');
});
}
function gallery() {
'use strict';
var images = document.querySelectorAll('.kg-gallery-image img');
@ -158,17 +82,16 @@ function gallery() {
container.style.flex = ratio + ' 1 0%';
});
pswp('.kg-gallery-container', '.kg-gallery-image', '.kg-gallery-image', false, true);
pswp(
'.kg-gallery-container',
'.kg-gallery-image',
'.kg-gallery-image',
false,
true
);
pswp('.kg-image-card', '.kg-image', '.kg-image', false, false);
}
function copyright() {
'use strict';
if (themeOptions.copyright != '') {
$('.copyright').html(themeOptions.copyright);
}
}
function offCanvas() {
'use strict';
$('.burger:not(.burger.close)').on('click', function () {
@ -198,12 +121,16 @@ function pswp(container, element, trigger, caption, isGallery) {
linkEl,
item;
$(el).find(element).each(function (i, v) {
$(el)
.find(element)
.each(function (i, v) {
gridEl = $(v);
linkEl = gridEl.find(trigger);
item = {
src: isGallery ? gridEl.find('img').attr('src') : gridEl.attr('src'),
src: isGallery
? gridEl.find('img').attr('src')
: gridEl.attr('src'),
w: 0,
h: 0,
};
@ -218,7 +145,7 @@ function pswp(container, element, trigger, caption, isGallery) {
return items;
};
var openPhotoSwipe = function(index, galleryElement) {
var openPhotoSwipe = function (index, galleryElement) {
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery,
options,
@ -235,25 +162,35 @@ function pswp(container, element, trigger, caption, isGallery) {
showHideOpacity: true,
};
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery = new PhotoSwipe(
pswpElement,
PhotoSwipeUI_Default,
items,
options
);
gallery.listen('gettingData', function (index, item) {
if (item.w < 1 || item.h < 1) { // unknown size
if (item.w < 1 || item.h < 1) {
// unknown size
var img = new Image();
img.onload = function() { // will get size after load
img.onload = function () {
// will get size after load
item.w = this.width; // set image width
item.h = this.height; // set image height
gallery.updateSize(true); // reinit Items
}
};
img.src = item.src; // let's download image
}
});
gallery.init();
};
var onThumbnailsClick = function(e) {
var onThumbnailsClick = function (e) {
e.preventDefault();
var index = $(e.target).closest(container).find(element).index($(e.target).closest(element))
var index = $(e.target)
.closest(container)
.find(element)
.index($(e.target).closest(element));
var clickedGallery = $(e.target).closest(container);
openPhotoSwipe(index, clickedGallery[0]);

File diff suppressed because one or more lines are too long

View File

@ -1,111 +0,0 @@
.author {
background-color: @white-color;
display: flex;
margin-top: 30px;
padding: 30px 20px;
}
.author-image-placeholder {
border-radius: 50%;
flex-shrink: 0;
height: 70px;
overflow: hidden;
width: 70px;
}
.author-wrapper {
margin-left: 25px;
max-width: 550px;
}
.author-header {
align-items: center;
display: flex;
}
.author-header-wrapper {
position: relative;
}
.author-name {
align-items: center;
cursor: pointer;
display: flex;
font-size: 18px;
font-weight: 800;
margin-bottom: 0;
position: relative;
&:after {
content: "\e92e";
font-family: IVEEL;
font-size: 19px;
margin-left: 1px;
}
}
.author-social {
background-color: @dark-gray-color;
border-radius: 3px;
display: flex;
flex-direction: column;
font-size: 12px;
left: 100%;
line-height: 1;
margin-left: -26px;
margin-top: 5px;
opacity: 0;
padding: 8px 0px;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(5px);
transition: opacity .2s @animation-base, transform .2s @animation-base;
&:before {
color: @dark-gray-color;
content: "\e900";
font-family: IVEEL;
font-size: 19px;
left: 7px;
position: absolute;
top: -12px;
}
&.enabled {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
}
.author-social-item {
color: @white-color;
font-weight: 700;
padding: 5px 11px;
white-space: nowrap;
&:hover {
color: var(--primary-color);
}
}
.author-location-icon {
position: relative;
top: 1px;
}
.author-bio {
font-size: 15px;
margin-top: 8px;
}
.author-location {
color: @secondary-text-color;
font-size: 11px;
font-weight: 800;
letter-spacing: .5px;
margin-left: -2px;
margin-top: 12px;
text-transform: uppercase;
}

View File

@ -1,5 +0,0 @@
.comment {
background-color: @white-color;
margin-top: 30px;
padding: 30px;
}

View File

@ -1,61 +0,0 @@
.post-feed .featured {
min-height: 350px;
position: relative;
&:before {
background: linear-gradient(to top, rgba(0,0,0,.5), transparent);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
}
& > .post-image {
z-index: -1;
}
.post-media .post-image {
display: none;
}
.u-placeholder,
.post-wrapper,
.post-footer {
background-color: transparent;
position: relative;
}
.post-wrapper {
align-items: flex-end;
display: flex;
}
.post-header {
margin-bottom: 0;
}
.post-title {
font-size: 22px;
line-height: 1.2;
}
.post-title-link,
.post-excerpt,
.post-link {
color: @white-color;
}
.post-excerpt {
display: none;
}
.post-footer {
border-color: rgba(255,255,255,.2);
}
.post-author-image {
border-color: transparent;
}
}

View File

@ -1,77 +0,0 @@
.navigation {
display: flex;
margin-top: 30px;
}
.navigation-item {
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100px;
overflow: hidden;
padding: 0 20px;
position: relative;
width: 50%;
&:before {
background-color: @black-color;
bottom: 0;
content: "";
left: 0;
opacity: .4;
position: absolute;
right: 0;
top: 0;
transition: opacity .2s @animation-base;
z-index: 1;
}
&:hover:before {
opacity: .6;
}
}
.navigation-previous {
margin-right: 7px;
}
.navigation-next {
align-items: flex-end;
margin-left: auto;
text-align: right;
}
.navigation-label {
color: @white-color;
font-size: 11px;
font-weight: 700;
opacity: .8;
padding-top: 25px;
position: relative;
text-transform: uppercase;
z-index: 2;
}
.navigation-title {
color: @white-color;
font-size: 17px;
margin: 5px 0 0;
padding-bottom: 25px;
position: relative;
z-index: 2;
}
@media (max-width: 767px) {
.navigation {
display: block;
}
.navigation-item {
width: 100%;
}
.navigation-next {
margin-top: 7px;
}
}

View File

@ -1,14 +0,0 @@
.page-template {
.single .post-header {
border-bottom: 1px solid @light-gray-color;
padding: 25px 30px;
}
}
@media (min-width: 992px) {
.page-template {
.content-column {
margin-left: 16.666667%;
}
}
}

View File

@ -1,31 +0,0 @@
.pagination,
.infinite-scroll-status,
body:not(.paged-next) .infinite-scroll-button {
display: none;
}
.infinite-scroll-request {
animation: scaleOut 1s infinite ease-in-out;
background-color: @dark-gray-color;
border-radius: 50%;
height: 40px;
margin: 30px auto 0;
width: 40px;
}
.infinite-scroll-action {
display: flex;
justify-content: center;
}
.infinite-scroll-button {
margin-top: 30px;
}
@keyframes scaleOut {
0% { transform: scale(0); }
100% {
opacity: 0;
transform: scale(1);
}
}

View File

@ -1,149 +0,0 @@
.post-column {
margin-bottom: 30px;
}
.post {
display: flex;
flex-direction: column;
height: 100%;
}
.post-image {
width: 100%;
}
.post-wrapper {
background-color: @white-color;
flex-grow: 1;
padding: 20px;
}
.post-tag {
background-color: var(--primary-color);
border-radius: 15px;
color: @white-color;
display: inline-block;
font-size: 12px;
font-weight: 700;
line-height: 1;
margin-bottom: 8px;
padding: 4px 8px;
}
.post-header {
margin-bottom: 10px;
}
.post-title {
font-size: 18px;
margin-bottom: 0;
}
.post-meta {
background-color: @white-color;
border-top: 1px solid @light-gray-color;
color: @secondary-text-color;
display: flex;
font-size: 13px;
font-weight: 700;
padding: 10px 30px;
}
.post-meta-length:before {
content: "\02022";
font-family: serif;
padding: 0 8px;
}
.post-date {
color: @secondary-text-color;
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.post-excerpt {
color: @secondary-text-color;
font-size: 14px;
}
.post-content {
font-size: 15px;
line-height: 1.8;
}
.post-tags {
margin-top: 15px;
.tag {
font-weight: 700;
& + .tag {
margin-left: 10px;
}
&:before {
content: "#";
}
}
}
.post-footer {
align-items: center;
background-color: @white-color;
border-top: 1px solid @light-gray-color;
display: flex;
height: 42px;
justify-content: space-between;
padding: 0 20px;
}
.post-link {
font-size: 11px;
font-weight: 700;
letter-spacing: .5px;
line-height: 1;
text-transform: uppercase;
}
.post-author {
display: flex;
margin-right: 2px;
}
.post-author-link {
display: block;
height: 28px;
margin: 0 -4px;
position: relative;
width: 28px;
&:first-child {
z-index: 10;
}
&:nth-child(2) {
z-index: 9;
}
&:nth-child(3) {
z-index: 8;
}
&:nth-child(4) {
z-index: 7;
}
&:nth-child(5) {
z-index: 6;
}
}
.post-author-image {
border: 2px solid @white-color;
border-radius: 50%;
height: 100%;
object-fit: cover;
width: 100%;
}

View File

@ -1,13 +0,0 @@
.related-posts {
.post + .post {
margin-top: 30px;
}
}
.related-title {
color: @secondary-text-color;
font-size: 14px;
letter-spacing: 1px;
margin: 20px 0 30px;
text-transform: uppercase;
}

View File

@ -1,45 +0,0 @@
.share {
align-items: center;
display: flex;
justify-content: center;
line-height: 1;
margin-top: 30px;
}
.share-item {
border-radius: 50%;
color: @white-color;
font-size: 16px;
height: 28px;
line-height: 28px;
text-align: center;
width: 28px;
& + & {
margin-left: 8px;
}
}
.share-facebook {
background-color: #3b5998;
}
.share-twitter {
background-color: #1da1f2;
}
.share-pinterest {
background-color: #bd081c;
}
.share-linkedin {
background-color: #0077b5;
}
.share-reddit {
background-color: #ff4500;
}
.share-vk {
background-color: #45668e;
}

View File

@ -1,43 +0,0 @@
.single {
.post-header {
background-color: @white-color;
margin-bottom: 0;
padding: 25px 30px 15px;
}
.post-title {
font-size: 22px;
}
.post-image-link {
display: block;
pointer-events: none;
}
.post-wrapper {
padding: 30px;
}
}
@media (max-width: 767px) {
.post-template {
.site-content > .container {
&, .content-column {
padding-left: 0;
padding-right: 0;
}
& > .row {
margin-left: 0;
margin-right: 0;
}
.post,
.author,
.navigation-item,
.comment {
border-radius: 0;
}
}
}
}

View File

@ -1,122 +0,0 @@
html {
box-sizing: border-box;
--primary-color: #2ec4b6;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: @light-gray-color;
background-color: #f9f9f9;
color: @primary-text-color;
font-family: @font-base;
font-size: 14px;
line-height: 1.65;
text-rendering: optimizeLegibility;
transition: background-color .3s @animation-base;
word-break: break-word;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: @dark-gray-color;
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: @dark-gray-color;
font-family: @font-alt;
font-weight: 700;
line-height: 1.3;
margin: 0 0 15px;
}
p {
margin: 0 0 20px;
}
img {
display: block;
height: auto;
max-width: 100%;
}
blockquote {
border-left: 4px solid @dark-gray-color;
color: @dark-gray-color;
font-size: 18px;
line-height: 1.4;
margin: 30px auto;
padding: 5px 0 5px 15px;
}
ul, ol {
margin: 30px 0;
padding-left: 30px;
}
li {
margin: 5px 0;
}
iframe,
embed {
border: 0;
display: block;
overflow: hidden;
width: 100%;
}
figure {
margin: 45px 0;
}
figcaption {
color: @dark-gray-color;
font-size: 14px;
margin-top: 15px;
text-align: center;
}
pre {
margin: 30px 0;
overflow-x: scroll;
}
hr {
background-color: @dark-gray-color;
border: 0;
border-radius: 50%;
height: 5px;
margin: 45px auto;
position: relative;
width: 5px;
&:before,
&:after {
background-color: @dark-gray-color;
border-radius: 50%;
content: "";
height: 5px;
position: absolute;
width: 5px;
}
&:before {
right: 20px;
}
&:after {
left: 20px;
}
}

View File

@ -1,17 +0,0 @@
.button {
background-color: var(--primary-color);
border: 0;
border-radius: 30px;
box-shadow: @shadow-base;
color: @white-color;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
line-height: 1;
outline: none;
padding: 15px 30px;
text-align: center;
text-transform: uppercase;
}

View File

@ -1,15 +0,0 @@
input[type="text"],
input[type="password"],
input[type="email"] {
appearance: none;
border: 1px solid @mid-gray-color;
border-radius: 5px;
font-size: 16px;
height: 50px;
outline: none;
padding: 0 15px;
&:focus {
border-color: var(--primary-color);
}
}

View File

@ -1,389 +0,0 @@
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (max-width: 767px) {
.container {
max-width: 460px;
padding-left: 30px;
padding-right: 30px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
width: 100%;
}
.col-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
@media (min-width: 576px) {
.col-sm-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-sm-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-sm-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-sm-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-sm-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-sm-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-sm-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-sm-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-sm-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-sm-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-sm-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-sm-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 768px) {
.col-md-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-md-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-md-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-md-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-md-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-md-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-md-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-md-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-md-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-md-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 992px) {
.col-lg-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-lg-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-lg-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-lg-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-lg-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-lg-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-lg-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-lg-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-lg-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-lg-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 1200px) {
.col-xl-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-xl-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-xl-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-xl-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-xl-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-xl-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-xl-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-xl-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-xl-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-xl-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-xl-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-xl-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (max-width: 575px) {
.hidden-xs {
display: none !important;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.hidden-sm {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-md {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-lg {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-xl {
display: none !important;
}
}

View File

@ -1,126 +0,0 @@
.kg-width-wide,
.kg-width-full {
margin-left: -30px;
margin-right: -30px;
max-width: calc(~"100% + 60px");
width: auto;
img {
width: 100%;
}
}
.kg-image-card .kg-image {
cursor: pointer;
}
.kg-gallery-container {
display: flex;
flex-direction: column;
}
.kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.kg-gallery-image {
cursor: pointer;
img {
height: 100%;
width: 100%;
}
}
.kg-gallery-row:not(:first-of-type) {
margin: 10px 0 0 0;
}
.kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 10px;
}
.kg-bookmark-card {
border: 1px solid @mid-gray-color;
border-radius: 4px;
}
.kg-bookmark-container {
display: flex;
overflow: hidden;
&:after {
display: none;
}
}
.kg-bookmark-content {
overflow: hidden;
padding: 25px;
}
.kg-bookmark-title {
color: @dark-gray-color;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
.kg-bookmark-description {
color: @secondary-text-color;
margin-top: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kg-bookmark-metadata {
align-items: center;
display: flex;
font-size: 14px;
margin-top: 5px;
}
.kg-bookmark-icon {
height: 20px;
margin-right: 5px;
width: 20px;
}
.kg-bookmark-author,
.kg-bookmark-publisher {
color: @dark-gray-color;
}
.kg-bookmark-publisher:before {
content: "•";
padding: 0 5px;
}
.kg-bookmark-thumbnail {
flex-shrink: 0;
margin-left: 20px;
position: relative;
width: 300px;
img {
height: 100%;
object-fit: cover;
position: absolute;
width: 100%;
}
}
@media (max-width: 767px) {
.kg-bookmark-container {
flex-direction: column;
}
.kg-bookmark-thumbnail {
height: 200px;
margin-left: 0;
width: 100%;
}
}

View File

@ -1,114 +0,0 @@
.u-shadow {
border-radius: 5px;
box-shadow: @shadow-base;
overflow: hidden;
transition: box-shadow .3s @animation-base;
&:hover {
box-shadow: 0 0 20px rgba(0,0,0,.12);
}
}
.u-plain-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.u-placeholder {
background-color: @light-gray-color;
position: relative;
z-index: 10;
&.same-height {
height: 0;
}
&.rectangle {
padding-bottom: 56.25%;
}
}
.u-object-fit {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
.u-permalink {
bottom: 0;
left: 0;
outline: none;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
.u-hover-item {
transition: opacity .3s @animation-base;
}
.u-hover-wrapper:hover .u-hover-item {
opacity: .5;
&:hover {
opacity: 1;
}
}
.u-text-format {
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
margin-top: 40px;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 23px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 17px;
font-weight: 700;
}
h5 {
font-size: 15px;
font-weight: 700;
}
h6 {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}
strong {
color: @dark-gray-color;
}
a {
color: var(--primary-color);
}
& > *:first-child,
& > *:first-child > *:first-child {
margin-top: 0 !important;
}
& > *:last-child,
& > *:last-child > *:last-child {
margin-bottom: 0 !important;
}
}

View File

@ -1,35 +0,0 @@
@import "variables.less";
@import "general/normalize.less";
@import "general/basics.less";
@import "general/grid.less";
@import "general/form.less";
@import "general/button.less";
@import "site/header.less";
@import "site/social.less";
@import "site/layout.less";
@import "site/widget.less";
@import "site/term.less";
@import "site/burger.less";
@import "site/off-canvas.less";
@import "site/footer.less";
@import "site/error.less";
@import "blog/post.less";
@import "blog/page.less";
@import "blog/featured.less";
@import "blog/single.less";
@import "blog/share.less";
@import "blog/author.less";
@import "blog/navigation.less";
@import "blog/comment.less";
@import "blog/related.less";
@import "blog/pagination.less";
@import "vendor/mdi.less";
@import "vendor/lazyload.less";
@import "vendor/pswp.less";
@import "misc/kg.less";
@import "misc/utilities.less";

View File

@ -1,56 +0,0 @@
.burger {
cursor: pointer;
height: 30px;
margin-left: 20px;
margin-right: -7px;
position: relative;
width: 30px;
}
.burger-bar {
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
width: 100%;
}
.burger-bar:before {
background-color: @dark-gray-color;
content: "";
height: 2px;
left: 7px;
position: absolute;
transition: transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s;
width: 16px;
}
.burger-bar:first-child:before {
top: 14px;
transform: translateY(-3px);
}
.burger-bar:last-child:before {
bottom: 14px;
transform: translateY(3px);
}
.burger-close {
.burger-bar {
transition: transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s;
}
.burger-bar:first-child {
transform: rotate(45deg);
}
.burger-bar:last-child {
transform: rotate(-45deg);
}
.burger-bar:before {
transform: none;
transition: transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
}

View File

@ -1,16 +0,0 @@
.error {
text-align: center;
}
.error-code {
font-size: 40px;
font-weight: 700;
letter-spacing: 2px;
line-height: 1;
margin: 60px 0 10px;
}
.error-message {
color: @secondary-text-color;
margin-bottom: 45px;
}

View File

@ -1,55 +0,0 @@
.site-header {
background-color: @white-color;
box-shadow: @shadow-base;
padding: 0 30px;
z-index: 80;
}
.navbar {
align-items: center;
display: flex;
height: 70px;
justify-content: space-between;
}
.navbar-left,
.navbar-right {
flex: 2;
}
.navbar-right {
display: flex;
justify-content: flex-end;
}
.logo {
display: inline-block;
margin-right: 15px;
position: relative;
vertical-align: middle;
}
.logo-image {
max-height: 40px;
}
.logo-text {
font-family: @font-alt;
font-size: 25px;
font-weight: 700;
letter-spacing: .5px;
line-height: 1;
}
.nav-list {
display: flex;
}
.menu-item {
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
line-height: 1;
margin: 0 20px;
text-transform: uppercase;
}

View File

@ -1,25 +0,0 @@
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex-grow: 1;
padding-bottom: 30px;
padding-top: 30px;
}
@media (min-width: 992px) {
.related-column {
order: 1;
}
.content-column {
order: 2;
}
.sidebar-column {
order: 3;
}
}

View File

@ -1,77 +0,0 @@
.dimmer {
background: rgba(0,0,0,.7);
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 90;
}
.off-canvas {
background-color: @light-gray-color;
height: 100vh;
overflow-y: scroll;
padding: 60px 0;
position: fixed;
right: 0;
top: 0;
transform: translateX(320px);
transition: transform .6s cubic-bezier(.77,0,.175,1);
width: 320px;
z-index: 90;
-webkit-overflow-scrolling: touch;
.burger {
margin: 0;
position: absolute;
right: 12px;
top: 15px;
}
.related-posts {
margin: 45px 0 30px;
padding: 0 20px;
}
.widget-area {
padding: 0 20px;
}
.widget {
background-color: transparent;
box-shadow: none;
padding: 0;
& + .widget {
margin-top: 45px;
}
}
}
body:not(.canvas-visible) .off-canvas {
visibility: hidden;
}
.canvas-opened {
overflow-y: hidden;
}
.canvas-opened .off-canvas {
transform: translateX(0);
visibility: visible;
}
.mobile-menu {
margin: 0 20px 45px;
.nav-list {
display: block;
}
.menu-item {
margin: 20px 0;
letter-spacing: 0;
}
}

View File

@ -1,12 +0,0 @@
.social {
display: flex;
}
.social-item {
height: 30px;
font-size: 17px;
line-height: 30px;
margin-left: 2px;
text-align: center;
width: 30px;
}

View File

@ -1,51 +0,0 @@
.term-tags {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
.tag {
color: @secondary-text-color;
font-weight: 700;
margin-bottom: 10px;
margin-right: 20px;
}
.tag-current {
background-color: var(--primary-color);
border-radius: 15px;
color: @white-color;
padding: 2px 10px 3px;
}
}
@media (max-width: 767px) {
.term-tags {
flex-wrap: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
.tag {
white-space: nowrap;
}
}
}
.term-author {
display: flex;
margin-bottom: 30px;
.author-image-placeholder {
height: 40px;
margin-right: 15px;
width: 40px;
}
.author-name {
font-size: 20px;
&:after {
display: none;
}
}
}

View File

@ -1,139 +0,0 @@
.widget {
background-color: @white-color;
padding: 20px;
& + & {
margin-top: 30px;
}
}
.widget-no-title {
padding: 5px;
}
.widget-title {
border-bottom: 1px solid @light-gray-color;
color: @secondary-text-color;
font-family: @font-base;
font-size: 11px;
letter-spacing: .5px;
margin: -20px -20px 20px;
padding: 15px 20px;
text-transform: uppercase;
}
.widget-tags {
.tag + .tag {
margin-top: 5px;
}
.tag-link {
align-items: center;
display: flex;
justify-content: space-between;
}
.tag-name {
font-family: @font-alt;
font-size: 16px;
font-weight: 600;
}
.tag-count {
align-items: center;
background-color: var(--primary-color);
border-radius: 50%;
color: @white-color;
display: flex;
font-size: 12px;
font-weight: 700;
height: 24px;
justify-content: center;
min-width: 24px;
}
}
.widget-recent {
.recent {
align-items: center;
display: flex;
& + .recent {
margin-top: 20px;
}
}
.post-header {
margin-bottom: 0;
overflow: hidden;
}
.post-title {
font-size: 16px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.post-date {
margin-top: 3px;
}
}
.widget-instagram {
padding: 4px;
.instagram-feed {
display: flex;
flex-wrap: wrap;
}
.instagram-feed-item {
flex-shrink: 0;
margin: 1px;
position: relative;
width: calc(~"33.3333333333% - 2px");
&:before {
background-color: rgba(0,0,0,.5);
content: "";
display: block;
opacity: 0;
padding-bottom: 100%;
position: relative;
transition: opacity .2s @animation-base;
z-index: 10;
}
&:hover:before,
&:hover .instagram-feed-item-icon {
opacity: 1;
}
}
.instagram-feed-item-icon {
align-items: center;
color: @white-color;
display: flex;
font-size: 20px;
height: 40px;
justify-content: center;
left: 50%;
margin-left: -20px;
margin-top: -20px;
opacity: 0;
position: absolute;
top: 50%;
transition: opacity .2s @animation-base;
width: 40px;
z-index: 20;
}
}
@media (max-width: 767px) {
.widget-title {
margin-bottom: 0;
margin-top: 0;
}
}

View File

@ -1,14 +0,0 @@
// Colors
@primary-text-color: #333;
@secondary-text-color: #aaa;
@white-color: #fff;
@light-gray-color: #f4f4f4;
@mid-gray-color: #e9e9e9;
@dark-gray-color: #1a1a1a;
@black-color: #000;
// Basics
@font-base: "Open Sans", sans-serif;
@font-alt: Dosis, sans-serif;
@animation-base: ease-in-out;
@shadow-base: 0 0 10px rgba(0,0,0,.02);

View File

@ -1,9 +0,0 @@
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 1s @animation-base;
}

View File

@ -4,7 +4,10 @@
{{#author}}
<div class="term-author">
<div class="author-image-placeholder u-placeholder">
<img class="author-image lazyload u-object-fit" data-src="{{img_url profile_image size="xs"}}" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="{{name}}">
<img class="author-image lazyload u-object-fit"
data-src="{{img_url profile_image size="xs"}}"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
alt="{{name}}">
</div>
<h1 class="author-name">{{name}}</h1>
</div>

View File

@ -1,16 +1,17 @@
<!DOCTYPE html>
<html lang="{{@site.lang}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{meta_title}}</title>
<link rel="stylesheet" href="{{asset "css/screen.css"}}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i%7CDosis:600,700&amp;subset=latin-ext">
{{> config}}
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i%7CDosis:600,700&amp;subset=latin-ext">
{{ghost_head}}
</head>
<body class="{{body_class}}{{{block "body_class"}}}">
<div class="site">
{{> header}}
@ -23,12 +24,11 @@
{{> off-canvas}}
{{> pswp}}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="{{asset "js/main.min.js"}}"></script>
<script src="{{asset "built/main.min.js"}}"></script>
{{> facebook}}
@ -36,4 +36,5 @@
{{ghost_foot}}
</body>
</html>

View File

@ -1,11 +0,0 @@
{{!< default}}
<div class="content-area">
<main class="site-main">
<div class="error">
<div class="error-code">{{statusCode}}</div>
<div class="error-message">{{message}}.</div>
<a class="error-link button" href="{{@site.url}}">{{t 'Go to the front page'}}</a>
</div>
</main>
</div>

View File

@ -1,61 +1,101 @@
const gulp = require('gulp');
const {src, dest, series} = gulp;
const touch = require('gulp-touch-fd');
const less = require('gulp-less');
const autoprefixer = require('gulp-autoprefixer');
const uglify = require('gulp-uglify');
const {series, parallel, watch, src, dest} = require('gulp');
const pump = require('pump');
// gulp plugins and utils
const livereload = require('gulp-livereload');
const gulpStylelint = require('gulp-stylelint');
const postcss = require('gulp-postcss');
const concat = require('gulp-concat');
const exec = require('child_process').exec;
const uglify = require('gulp-uglify');
const beeper = require('beeper');
const theme = 'ruby';
const version = '1.2.1';
const root = '/Users/sodbileg/Developer/ghost-themes';
const final = '/Users/sodbileg/Dropbox/IVEEL/Ruby';
// postcss plugins
const easyimport = require('postcss-easy-import');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
function css() {
return src('assets/less/screen.less')
.pipe(less())
.pipe(autoprefixer({
browsers: ['>0.25%'],
cascade: false,
}))
.pipe(dest('assets/css'))
.pipe(touch());
}
function js() {
return src([
'assets/js/vendor/*',
'assets/js/main.js'])
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(dest('assets/js'))
.pipe(touch());
}
function watch() {
gulp.watch('assets/less/**/*', css);
gulp.watch('assets/js/main.js', js);
}
function deploy(done) {
exec('rsync -avz --delete --rsync-path="sudo rsync" --exclude "partials/config.hbs" --exclude "partials/widgets" --exclude "node_modules" --exclude "gulpfile.js" --exclude "package-lock.json" --exclude ".git" --exclude ".gitignore" --exclude ".DS_Store" ' + root + '/content/themes/' + theme + '/ aws:/home/ubuntu/ghost-themes/' + theme + '/content/themes/' + theme + '/', function (err, stdout, stderr) {
console.log(stdout);
});
function serve(done) {
livereload.listen();
done();
}
function prepare(done) {
exec(
'rsync -avz --delete --exclude "assets/js/vendor" --exclude "assets/js/main.js" --exclude "assets/less" --exclude ".git" --exclude ".gitignore" --exclude "node_modules" --exclude "gulpfile.js" --exclude "package-lock.json" ' + root + '/content/themes/' + theme + '/ ' + final + '/' + theme + '/ && ' +
'cd ' + final + ' && ' +
'find ./' + theme + ' -type f -exec chmod 664 {} \\; && ' +
'zip -r -X ' + theme + '-' + version + '.zip ' + theme + ' -x "*.DS_Store" -x "*.gitignore" -x "*.travis.yml" -x "*.tx" -x "*.git" -x "*.svn" && ' +
'rm -r ' + theme
);
done();
function handleError(done) {
return function (err) {
if (err) {
beeper();
}
return done(err);
};
};
function hbs(done) {
pump([
src(['*.hbs', 'partials/**/*.hbs', 'members/**/*.hbs']),
livereload()
], handleError(done));
}
exports.default = series(css, js, watch);
exports.deploy = deploy;
exports.prepare = prepare;
function css(done) {
pump([
src('assets/css/screen.css', {sourcemaps: true}),
postcss([
easyimport,
autoprefixer(),
cssnano()
]),
dest('assets/built/', {sourcemaps: '.'}),
livereload()
], handleError(done));
}
function js(done) {
pump([
src([
'assets/js/lib/*.js',
'assets/js/main.js'
], {sourcemaps: true}),
concat('main.min.js'),
uglify(),
dest('assets/built/', {sourcemaps: '.'}),
livereload()
], handleError(done));
}
function lint(done) {
pump([
src(['assets/css/**/*.css', '!assets/css/vendor/*']),
gulpStylelint({
fix: true,
reporters: [
{formatter: 'string', console: true}
]
}),
dest('assets/css/')
], handleError(done));
}
function zipper(done) {
const filename = require('./package.json').name + '.zip';
pump([
src([
'**',
'!node_modules', '!node_modules/**',
'!dist', '!dist/**',
'!yarn-error.log'
]),
zip(filename),
dest('dist/')
], handleError(done));
}
const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs', 'members/**/*.hbs'], hbs);
const cssWatcher = () => watch('assets/css/**/*.css', css);
const jsWatcher = () => watch('assets/js/**/*.js', js);
const watcher = parallel(hbsWatcher, cssWatcher, jsWatcher);
const build = series(css, js);
exports.build = build;
exports.lint = lint;
exports.zip = series(build, zipper);
exports.default = series(build, serve, watcher);

View File

@ -1,16 +0,0 @@
{
"Read More": "Read More",
"Load More": "Load More",
"Tags": "Tags",
"Recent Posts": "Recent Posts",
"You might also like...": "You might also like...",
"1 min read": "1 min read",
"% min read": "% min read",
"Website": "Website",
"Facebook": "Facebook",
"Twitter": "Twitter",
"More posts": "More posts",
"Previous Post": "Previous Post",
"Next Post": "Next Post",
"Go to the front page": "Go to the front page"
}

4529
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,15 +1,16 @@
{
"name": "ruby",
"description": "Premium Ghost Theme",
"description": "A Ghost theme",
"version": "1.2.1",
"engines": {
"ghost": ">=2.0.0",
"ghost-api": "v2"
"ghost": ">=3.0.0",
"ghost-api": "v3"
},
"license": "MIT",
"author": {
"name": "Iveel",
"email": "hello@iveel.co",
"url": "https://iveel.co"
"name": "Ghost Foundation",
"email": "hello@ghost.org",
"url": "https://ghost.org"
},
"keywords": [
"ghost",
@ -41,14 +42,25 @@
},
"scripts": {
"dev": "gulp",
"test": "gscan ."
"test": "gscan .",
"lint": "gulp lint",
"zip": "gulp zip"
},
"devDependencies": {
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
"gulp-concat": "^2.6.1",
"gulp-less": "^4.0.1",
"gulp-touch-fd": "github:funkedigital/gulp-touch-fd",
"gulp-uglify": "^3.0.1"
"autoprefixer": "9.8.6",
"beeper": "2.0.0",
"cssnano": "4.1.10",
"gulp": "4.0.2",
"gulp-concat": "2.6.1",
"gulp-livereload": "4.0.2",
"gulp-postcss": "8.0.0",
"gulp-stylelint": "^13.0.0",
"gulp-uglify": "3.0.2",
"gulp-zip": "5.0.2",
"postcss-easy-import": "3.0.0",
"pump": "3.0.0",
"stylelint": "^13.7.1",
"stylelint-config-standard": "^20.0.0",
"stylelint-order": "^4.1.0"
}
}

View File

@ -6,7 +6,8 @@
<div class="content-area">
<main class="site-main">
{{#post}}
<article class="{{post_class}}{{#unless feature_image}} no-image{{/unless}} single u-shadow">
<article
class="{{post_class}}{{#unless feature_image}} no-image{{/unless}} single u-shadow">
{{> post-header tag="h1" hide_link=true}}
{{> post-media}}
<div class="post-wrapper">

View File

@ -1,7 +1,10 @@
{{#foreach authors}}
<section class="author u-shadow">
<div class="author-image-placeholder u-placeholder">
<img class="author-image lazyload u-object-fit" data-src="{{img_url profile_image size="xs"}}" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="{{name}}">
<img class="author-image lazyload u-object-fit"
data-src="{{img_url profile_image size="xs"}}"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
alt="{{name}}">
</div>
<div class="author-wrapper">
<header class="author-header">
@ -9,21 +12,29 @@
<h4 class="author-name">{{name}}</h4>
<div class="author-social">
{{#if website}}
<a class="author-social-item author-website" href="{{website}}" target="_blank">{{t 'Website'}}</a>
<a class="author-social-item author-website"
href="{{website}}" target="_blank">Website</a>
{{/if}}
{{#if facebook}}
<a class="author-social-item author-facebook" href="https://www.facebook.com/{{facebook}}" target="_blank">{{t 'Facebook'}}</a>
<a class="author-social-item author-facebook"
href="https://www.facebook.com/{{facebook}}"
target="_blank">Facebook</a>
{{/if}}
{{#if twitter}}
<a class="author-social-item author-twitter" href="https://twitter.com/{{twitter}}" target="_blank">{{t 'Twitter'}}</a>
<a class="author-social-item author-twitter"
href="https://twitter.com/{{twitter}}"
target="_blank">Twitter</a>
{{/if}}
<a class="author-social-item author-more" href={{url}}>{{t 'More posts'}}</a>
<a class="author-social-item author-more"
href={{url}}>More posts</a>
</div>
</div>
</header>
<div class="author-bio">{{bio}}</div>
{{#if location}}
<div class="author-location"><i class="author-location-icon icon icon-map-marker"></i> {{location}}</div>
<div class="author-location"><i
class="author-location-icon icon icon-map-marker"></i>
{{location}}</div>
{{/if}}
</div>
</section>

3
partials/comment.hbs Normal file
View File

@ -0,0 +1,3 @@
{{!-- <div class="comment u-shadow">
If you want to embed comments, this is a good place to do it!
</div> --}}

View File

@ -1,18 +0,0 @@
<script>
var themeOptions = {
disqus_shortname: '',
copyright: 'Powered by <a href="https://ghost.org/" target="_blank">Ghost</a>',
instagram_token: '',
social_links: {
facebook: 'https://www.facebook.com',
twitter: 'https://www.twitter.com',
instagram: 'https://www.instagram.com',
dribbble: '',
behance: '',
github: '',
linkedin: '',
vk: '',
rss: '',
}
};
</script>

View File

@ -1,20 +0,0 @@
<div class="comment u-shadow">
<div id="disqus_thread"></div>
</div>
<script>
var disqus_config = function () {
this.page.url = '{{url absolute="true"}}';
this.page.identifier = 'ghost-{{comment_id}}';
};
if (themeOptions.disqus_shortname != '') {
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://' + themeOptions.disqus_shortname + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
}
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

View File

@ -1,2 +1,3 @@
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

View File

@ -1,8 +1,30 @@
<footer class="site-footer">
<div class="container">
<div class="footer-inner">
<div class="social"></div>
<div class="copyright"></div>
<div class="social">
{{#if @site.facebook}}
<a class="social-item social-item-facebook"
href="{{facebook_url @site.facebook}}" target="_blank"
rel="noopener noreferrer" aria-label="Facebook">
<i class="icon icon-facebook"></i>
</a>
{{/if}}
{{#if @site.twitter}}
<a class="social-item social-item-twitter"
href="{{twitter_url @site.twitter}}" target="_blank"
rel="noopener noreferrer" aria-label="Twitter">
<i class="icon icon-twitter"></i>
</a>
{{/if}}
<a class="social-item social-item-rss"
href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/"
target="_blank" rel="noopener noreferrer" aria-label="RSS">
<i class="icon icon-rss"></i>
</a>
</div>
<div class="copyright">
Powered by <a href="https://ghost.org/" target="_blank">Ghost</a>
</div>
</div>
</div>
</footer>

View File

@ -1,11 +1,10 @@
<article class="{{post_class}}{{#unless feature_image}} no-image{{/unless}} u-shadow">
<article
class="{{post_class}}{{#unless feature_image}} no-image{{/unless}} u-shadow">
{{#if featured}}
<img class="post-image lazyload u-object-fit"
data-src="{{img_url feature_image}}"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-sizes="auto"
alt="{{title}}"
>
data-sizes="auto" alt="{{title}}">
{{/if}}
{{> post-media same_height=true ratio="rectangle"}}
<div class="post-wrapper">

View File

@ -1,5 +1,8 @@
<ul class="nav-list u-plain-list">
{{#foreach navigation}}
<li class="menu-item menu-item-{{slug}}{{#if current}} menu-item-current{{/if}}"><a class="menu-item-link" href="{{url absolute="true"}}">{{label}}</a></li>
<li
class="menu-item menu-item-{{slug}}{{#if current}} menu-item-current{{/if}}">
<a class="menu-item-link" href="{{url absolute="true"}}">{{label}}</a>
</li>
{{/foreach}}
</ul>

View File

@ -7,7 +7,7 @@
<div class="infinite-scroll-request"></div>
</div>
<div class="infinite-scroll-action">
<button class="infinite-scroll-button button">{{t 'Load More'}}</button>
<button class="infinite-scroll-button button">Load More</button>
</div>
{{#contentFor "body_class"}}{{#if next}} paged-next{{/if}}{{/contentFor}}

View File

@ -1,10 +1,12 @@
<footer class="post-footer">
<a class="post-link" href="{{url}}">{{t 'Read More'}}</a>
<a class="post-link" href="{{url}}">Read More</a>
<div class="post-author">
{{#foreach authors}}
{{#if profile_image}}
<a class="post-author-link" href="{{url}}">
<img class="post-author-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}">
<img class="post-author-image"
src="{{img_url profile_image size="xs"}}"
alt="{{name}}">
</a>
{{/if}}
{{/foreach}}

View File

@ -1,13 +1,12 @@
{{#if feature_image}}
<div class="post-media">
<div class="u-placeholder{{#if same_height}} same-height {{ratio}}{{/if}}">
<div
class="u-placeholder{{#if same_height}} same-height {{ratio}}{{/if}}">
<a class="post-image-link" href="{{url}}">
<img class="post-image lazyload{{#if same_height}} u-object-fit{{/if}}"
data-srcset="{{img_url feature_image size="s"}} 400w, {{img_url feature_image size="m"}} 750w, {{img_url feature_image size="l"}} 960w"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-sizes="auto"
alt="{{title}}"
>
data-sizes="auto" alt="{{title}}">
</a>
</div>
</div>

View File

@ -4,10 +4,8 @@
<img class="navigation-image lazyload u-object-fit"
data-srcset="{{img_url feature_image size="s"}} 400w, {{img_url feature_image size="m"}} 750w, {{img_url feature_image size="l"}} 960w"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-sizes="auto"
alt="{{title}}"
>
<span class="navigation-label">{{t 'Previous Post'}}</span>
data-sizes="auto" alt="{{title}}">
<span class="navigation-label">Previous Post</span>
<h4 class="navigation-title">{{title}}</h4>
<a class="u-permalink" href={{url}}></a>
</div>
@ -18,10 +16,8 @@
<img class="navigation-image lazyload u-object-fit"
data-srcset="{{img_url feature_image size="s"}} 400w, {{img_url feature_image size="m"}} 750w, {{img_url feature_image size="l"}} 960w"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-sizes="auto"
alt="{{title}}"
>
<span class="navigation-label">{{t 'Next Post'}}</span>
data-sizes="auto" alt="{{title}}">
<span class="navigation-label">Next Post</span>
<h4 class="navigation-title">{{title}}</h4>
<a class="u-permalink" href={{url}}></a>
</div>

View File

@ -21,10 +21,14 @@
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<button class="pswp__button pswp__button--close"
title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share"
title="Share"></button>
<button class="pswp__button pswp__button--fs"
title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom"
title="Zoom in/out"></button>
<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
@ -37,12 +41,15 @@
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div
class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<button class="pswp__button pswp__button--arrow--left"
title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right"
title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>

View File

@ -1,7 +1,10 @@
{{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags,authors" as |related|}}
{{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}"
include="tags,authors" as |related|}}
{{#if related}}
<section class="related-posts">
<h3 class="related-title"><span class="text">{{t 'You might also like...'}}</span></h3>
<h3 class="related-title">
<span class="text">You might also like...</span>
</h3>
<div class="post-feed">
{{#foreach related}}
{{> loop}}

View File

@ -1,8 +1,20 @@
<div class="share u-hover-wrapper">
<a class="share-item share-facebook u-hover-item" href="https://www.facebook.com/sharer.php?u={{url absolute="true"}}" target="_blank"><i class="icon icon-facebook"></i></a>
<a class="share-item share-twitter u-hover-item" href="https://twitter.com/intent/tweet?url={{url absolute="true"}}&text={{encode title}}" target="_blank"><i class="icon icon-twitter"></i></a>
<a class="share-item share-pinterest u-hover-item" href="https://pinterest.com/pin/create/button/?url={{url absolute="true"}}&media={{featured_image}}&description={{encode title}}" target="_blank"><i class="icon icon-pinterest"></i></a>
<a class="share-item share-linkedin u-hover-item" href="https://www.linkedin.com/shareArticle?mini=true&url={{url absolute="true"}}&title={{encode title}}" target="_blank"><i class="icon icon-linkedin"></i></a>
<a class="share-item share-reddit u-hover-item" href="https://reddit.com/submit?url={{url absolute="true"}}&title={{encode title}}" target="_blank"><i class="icon icon-reddit"></i></a>
<a class="share-item share-vk u-hover-item" href="http://vk.com/share.php?url={{url absolute="true"}}&title={{encode title}}" target="_blank"><i class="icon icon-vk"></i></a>
<a class="share-item share-facebook u-hover-item"
href="https://www.facebook.com/sharer.php?u={{url absolute="true"}}"
target="_blank"><i class="icon icon-facebook"></i></a>
<a class="share-item share-twitter u-hover-item"
href="https://twitter.com/intent/tweet?url={{url absolute="true"}}&text={{encode title}}"
target="_blank"><i class="icon icon-twitter"></i></a>
<a class="share-item share-pinterest u-hover-item"
href="https://pinterest.com/pin/create/button/?url={{url absolute="true"}}&media={{featured_image}}&description={{encode title}}"
target="_blank"><i class="icon icon-pinterest"></i></a>
<a class="share-item share-linkedin u-hover-item"
href="https://www.linkedin.com/shareArticle?mini=true&url={{url absolute="true"}}&title={{encode title}}"
target="_blank"><i class="icon icon-linkedin"></i></a>
<a class="share-item share-reddit u-hover-item"
href="https://reddit.com/submit?url={{url absolute="true"}}&title={{encode title}}"
target="_blank"><i class="icon icon-reddit"></i></a>
<a class="share-item share-vk u-hover-item"
href="http://vk.com/share.php?url={{url absolute="true"}}&title={{encode title}}"
target="_blank"><i class="icon icon-vk"></i></a>
</div>

View File

View File

@ -1,5 +1,6 @@
{{#if tags}}
<div class="post-tags">
{{#foreach tags}}<a class="tag tag-{{slug}}" href="{{url}}" title="{{name}}">{{name}}</a>{{/foreach}}
{{#foreach tags}}<a class="tag tag-{{slug}}" href="{{url}}"
title="{{name}}">{{name}}</a>{{/foreach}}
</div>
{{/if}}

View File

@ -1,10 +1,6 @@
<div class="widget widget-facebook widget-no-title u-shadow">
<div class="fb-page"
data-href="__YOUR_FACEBOOK_PAGE_URL__"
data-small-header="false"
data-hide-cover="false"
data-show-facepile="true"
data-hide-cta="false"
data-tabs="none">
<div class="fb-page" data-href="__YOUR_FACEBOOK_PAGE_URL__"
data-small-header="false" data-hide-cover="false"
data-show-facepile="true" data-hide-cta="false" data-tabs="none">
</div>
</div>

Some files were not shown because too many files have changed in this diff Show More