mirror of
https://github.com/TryGhost/Ruby.git
synced 2024-10-30 04:48:33 +02:00
IVEEL
GitHub
commit
c65d75a955
18
.editorconfig
Normal file
18
.editorconfig
Normal 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
15
.github/workflows/deploy-theme.yml
vendored
Normal 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
33
.gitignore
vendored
@ -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
40
README.md
Normal 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
2
assets/built/main.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
assets/built/main.min.js.map
Normal file
1
assets/built/main.min.js.map
Normal file
File diff suppressed because one or more lines are too long
2
assets/built/screen.css
Normal file
2
assets/built/screen.css
Normal file
File diff suppressed because one or more lines are too long
1
assets/built/screen.css.map
Normal file
1
assets/built/screen.css.map
Normal file
File diff suppressed because one or more lines are too long
9
assets/css/.stylelintrc.json
Normal file
9
assets/css/.stylelintrc.json
Normal 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
111
assets/css/blog/author.css
Normal 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;
|
||||
}
|
||||
5
assets/css/blog/comment.css
Normal file
5
assets/css/blog/comment.css
Normal file
@ -0,0 +1,5 @@
|
||||
.comment {
|
||||
background-color: var(--white-color);
|
||||
margin-top: 30px;
|
||||
padding: 30px;
|
||||
}
|
||||
61
assets/css/blog/featured.css
Normal file
61
assets/css/blog/featured.css
Normal 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;
|
||||
}
|
||||
77
assets/css/blog/navigation.css
Normal file
77
assets/css/blog/navigation.css
Normal 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
10
assets/css/blog/page.css
Normal 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%;
|
||||
}
|
||||
}
|
||||
34
assets/css/blog/pagination.css
Normal file
34
assets/css/blog/pagination.css
Normal 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
149
assets/css/blog/post.css
Normal 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%;
|
||||
}
|
||||
11
assets/css/blog/related.css
Normal file
11
assets/css/blog/related.css
Normal 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
45
assets/css/blog/share.css
Normal 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;
|
||||
}
|
||||
38
assets/css/blog/single.css
Normal file
38
assets/css/blog/single.css
Normal 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;
|
||||
}
|
||||
}
|
||||
137
assets/css/general/basics.css
Normal file
137
assets/css/general/basics.css
Normal 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;
|
||||
}
|
||||
17
assets/css/general/button.css
Normal file
17
assets/css/general/button.css
Normal 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;
|
||||
}
|
||||
17
assets/css/general/form.css
Normal file
17
assets/css/general/form.css
Normal 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
444
assets/css/general/grid.css
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -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
127
assets/css/misc/kg.css
Normal 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%;
|
||||
}
|
||||
}
|
||||
117
assets/css/misc/utilities.css
Normal file
117
assets/css/misc/utilities.css
Normal 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
29
assets/css/screen.css
Normal 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";
|
||||
54
assets/css/site/burger.css
Normal file
54
assets/css/site/burger.css
Normal 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
16
assets/css/site/error.css
Normal 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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
55
assets/css/site/header.css
Normal file
55
assets/css/site/header.css
Normal 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;
|
||||
}
|
||||
25
assets/css/site/layout.css
Normal file
25
assets/css/site/layout.css
Normal 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;
|
||||
}
|
||||
}
|
||||
77
assets/css/site/off-canvas.css
Normal file
77
assets/css/site/off-canvas.css
Normal 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;
|
||||
}
|
||||
12
assets/css/site/social.css
Normal file
12
assets/css/site/social.css
Normal 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
51
assets/css/site/term.css
Normal 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;
|
||||
}
|
||||
85
assets/css/site/widget.css
Normal file
85
assets/css/site/widget.css
Normal 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
8
assets/css/vendor/lazyload.css
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
.lazyload,
|
||||
.lazyloading {
|
||||
opacity: 0;
|
||||
}
|
||||
.lazyloaded {
|
||||
opacity: 1;
|
||||
transition: opacity 1s var(--animation-base);
|
||||
}
|
||||
@ -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";
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
3
assets/js/.prettierrc.json
Normal file
3
assets/js/.prettierrc.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"singleQuote": true
|
||||
}
|
||||
@ -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]);
|
||||
|
||||
2
assets/js/vendor/instafeed.min.js
vendored
2
assets/js/vendor/instafeed.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
.comment {
|
||||
background-color: @white-color;
|
||||
margin-top: 30px;
|
||||
padding: 30px;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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%;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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";
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
9
assets/less/vendor/lazyload.less
vendored
9
assets/less/vendor/lazyload.less
vendored
@ -1,9 +0,0 @@
|
||||
.lazyload,
|
||||
.lazyloading {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.lazyloaded {
|
||||
opacity: 1;
|
||||
transition: opacity 1s @animation-base;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
15
default.hbs
15
default.hbs
@ -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&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&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>
|
||||
11
error.hbs
11
error.hbs
@ -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>
|
||||
146
gulpfile.js
146
gulpfile.js
@ -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);
|
||||
|
||||
@ -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
4529
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
38
package.json
38
package.json
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
3
page.hbs
3
page.hbs
@ -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">
|
||||
|
||||
@ -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
3
partials/comment.hbs
Normal 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> --}}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
@ -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}}
|
||||
@ -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}}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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>
|
||||
@ -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}}
|
||||
@ -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
Loading…
Reference in New Issue
Block a user