diff options
author | somrat <monnaf37@gmail.com> | 2020-06-15 08:13:15 +0300 |
---|---|---|
committer | somrat <monnaf37@gmail.com> | 2020-06-15 08:13:15 +0300 |
commit | 756387e8f4dcc638259f983f660b144b0230629f (patch) | |
tree | f63d665d591aa69bb00ae0888c971f3e6afec9d5 /assets |
initialize template
Diffstat (limited to 'assets')
-rw-r--r-- | assets/js/script.js | 21 | ||||
-rw-r--r-- | assets/scss/_buttons.scss | 77 | ||||
-rw-r--r-- | assets/scss/_common.scss | 184 | ||||
-rw-r--r-- | assets/scss/_mixins.scss | 40 | ||||
-rw-r--r-- | assets/scss/_typography.scss | 49 | ||||
-rw-r--r-- | assets/scss/_variables.scss | 13 | ||||
-rw-r--r-- | assets/scss/style.scss | 27 | ||||
-rw-r--r-- | assets/scss/templates/_main.scss | 407 | ||||
-rw-r--r-- | assets/scss/templates/_navigation.scss | 98 |
9 files changed, 916 insertions, 0 deletions
diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..0427347 --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,21 @@ +// Preloader js +$(window).on('load', function () { + $('.preloader').fadeOut(100); +}); + +(function ($) { + 'use strict'; + + + // Search Form Open + $('#searchOpen').on('click', function () { + $('.search-wrapper').addClass('open'); + setTimeout(function () { + $('.search-box').focus(); + }, 400); + }); + $('#searchClose').on('click', function () { + $('.search-wrapper').removeClass('open'); + }); + +})(jQuery);
\ No newline at end of file diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss new file mode 100644 index 0000000..9468d1e --- /dev/null +++ b/assets/scss/_buttons.scss @@ -0,0 +1,77 @@ +/* Button style */ +.btn { + font-size: 14px; + font-family: $primary-font; + text-transform: capitalize; + padding: 10px 25px; + border-radius: 0; + border: 1px solid; + position: relative; + z-index: 1; + transition: .2s ease; + + &:hover, + &:active, + &:focus { + outline: 0; + box-shadow: none !important; + } +} + +.btn-primary { + background: $primary-color; + color: $white; + border-color: $primary-color; + + &:active, + &:hover, + &.focus, + &.active { + background: $primary-color !important; + border-color: $primary-color !important; + } +} + +.btn-outline-primary { + background: transparent; + color: $text-color; + border-color: $primary-color; + + &:active, + &:hover, + &.focus, + &.active { + background: $primary-color !important; + border-color: $primary-color !important; + color: $white; + } +} + +.btn-link { + background-color: transparent; + border: 0; + color: $text-color; + padding: 0; + + i { + margin-left: 10px; + margin-top: 2px; + vertical-align: middle; + font-size: 90%; + transition: inherit; + } + + &:active, + &:hover, + &.focus, + &.active { + background: transparent !important; + border: 0 !important; + color: $primary-color; + text-decoration: none; + + i { + margin-left: 15px; + } + } +}
\ No newline at end of file diff --git a/assets/scss/_common.scss b/assets/scss/_common.scss new file mode 100644 index 0000000..a5a39a7 --- /dev/null +++ b/assets/scss/_common.scss @@ -0,0 +1,184 @@ +body { + background-color: $body-color; + overflow-x: hidden; + transition: .2s ease; +} + +::selection { + background: lighten($color: $primary-color, $amount: 10); + color: $white; +} + +/* preloader */ +.preloader { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: $body-color; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; +} + +img { + vertical-align: middle; + border: 0; +} + +a { + color: inherit; +} + +a, +a:hover, +a:focus { + text-decoration: none; +} + +a, +button, +select { + cursor: pointer; + transition: .2s ease; + + &:focus { + outline: 0; + } +} + +a:hover { + color: $primary-color; +} + +.slick-slide { + outline: 0; +} + +.section { + padding-top: 80px; + padding-bottom: 80px; + + &-sm { + padding-top: 50px; + padding-bottom: 50px; + } + + &-title { + margin-bottom: 30px; + } +} + +.bg-cover { + background-size: cover; + background-position: center center; + background-repeat: no-repeat; +} + +.border-primary { + border-color: $border-color !important; +} + +/* overlay */ + +.overlay { + position: relative; + + &::before { + position: absolute; + content: ''; + height: 100%; + width: 100%; + top: 0; + left: 0; + background: $black; + opacity: .5; + } +} + + +.border-default { + border-color: $border-color !important; +} + +.outline-0 { + outline: 0 !important; +} + +.d-unset { + display: unset !important; +} + +.bg-primary { + background: $primary-color !important; +} + +.bg-black { + background: $black !important; +} + +.text-primary { + color: $primary-color !important; +} + +.bg-light{ + background-color: $light !important; +} + +// form control +.form-control { + width: 100%; + height: 50px; + border: 1px solid $border-color; + background-color: transparent; + color: $text-color-dark; + + &:focus { + border-color: $primary-color !important; + color: inherit; + box-shadow: none; + background-color: transparent; + } +} + +.form-group { + label { + color: $text-color-dark; + margin-bottom: 10px; + display: block; + } + + .form-control { + border: 0; + border: 1px solid $border-color; + border-radius: 0; + padding: 0 20px; + height: 50px; + background-color: inherit; + color: $text-color-dark; + + &::placeholder { + font-size: 15px; + opacity: 1; + color: $text-color; + } + } + + margin-bottom: 20px; +} + +textarea.form-control { + height: 150px !important; + padding: 20px !important; +} + +mark{ + background-color: transparent; + color: $white; + border: 1px solid $white; + border-radius: 3px; + margin: 0 5px; + padding: 0 5px; +}
\ No newline at end of file diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss new file mode 100644 index 0000000..f7d2744 --- /dev/null +++ b/assets/scss/_mixins.scss @@ -0,0 +1,40 @@ +@mixin mobile-xs { + @media(max-width:400px) { + @content; + } +} + +@mixin mobile { + @media(max-width:575px) { + @content; + } +} + +@mixin tablet { + @media(max-width:767px) { + @content; + } +} + +@mixin desktop { + @media(max-width:991px) { + @content; + } +} + +@mixin desktop-lg { + @media(max-width:1200px) { + @content; + } +} + +@mixin size($size) { + width: $size; + height: $size; +} + +@mixin category($name, $color) { + .#{$name} a::before { + background-color: $color !important; + } +}
\ No newline at end of file diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss new file mode 100644 index 0000000..5c99e8b --- /dev/null +++ b/assets/scss/_typography.scss @@ -0,0 +1,49 @@ +/* typography */ +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap'); + +body { + line-height: 1.2; + font-family: $primary-font; + -webkit-font-smoothing: antialiased; + font-size: 16px; + color: $text-color; +} + +p, .paragraph { + font-weight: 400; + color: $text-color; + font-size: 16px; + line-height: 1.7; + font-family: $primary-font; +} + +h1,h2,h3,h4,h5,h6 { + color: $text-color-dark; + font-family: $primary-font; + font-weight: 500; + line-height: 1.2; +} + +h1, .h1{ + font-size: 36px; +} + +h2, .h2{ + font-size: 24px; +} + +h3, .h3{ + font-size: 20px; +} + +h4, .h4{ + font-size: 18px; +} + +h5, .h5{ + font-size: 16px; +} + +h6, .h6{ + font-size: 14px; +} diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss new file mode 100644 index 0000000..eb8dba5 --- /dev/null +++ b/assets/scss/_variables.scss @@ -0,0 +1,13 @@ +// Color Variables +$primary-color: #222; +$text-color: #555; +$text-color-dark: #333; +$body-color: #fff; +$border-color: #eee; +$black: #000; +$white: #fff; +$light: #fbfbfb; + +// Font Variables +$primary-font: 'Playfair Display', sans-serif; +$icon-font: 'themify';
\ No newline at end of file diff --git a/assets/scss/style.scss b/assets/scss/style.scss new file mode 100644 index 0000000..365c07c --- /dev/null +++ b/assets/scss/style.scss @@ -0,0 +1,27 @@ +/*!------------------------------------------------------------------ +[MAIN STYLESHEET] + +PROJECT: Persian Hugo +VERSION: 1.0.0 +AUTHOR: Themefisher +AUTHOR WEBSITE: https://themefisher.com + +-------------------------------------------------------------------*/ + +/*------------------------------------------------------------------ +[TABLE OF CONTENTS] +-------------------------------------------------------------------*/ + +@import 'mixins'; + +@import 'variables'; + +@import 'typography'; + +@import 'buttons'; + +@import 'common'; + +@import 'templates/navigation.scss'; + +@import 'templates/main.scss';
\ No newline at end of file diff --git a/assets/scss/templates/_main.scss b/assets/scss/templates/_main.scss new file mode 100644 index 0000000..cef1549 --- /dev/null +++ b/assets/scss/templates/_main.scss @@ -0,0 +1,407 @@ +.post { + position: relative; + + &-content { + padding: 5% 10%; + position: absolute; + top: 0; + left: 0; + right: 0; + text-align: center; + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + + * { + position: relative; + z-index: 1; + } + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, rgba(56, 56, 56, .50), rgba(56, 56, 56, .30) 100%); + } + } + + &-date { + color: $white; + min-height: 75px; + width: 75px; + border-radius: 50%; + border: 1px solid $white; + margin: 0 auto 20px; + @include mobile { + zoom: .7; + } + + span { + display: block; + text-transform: uppercase; + + &:first-child { + font-size: 180%; + margin-bottom: 5px; + } + } + } + + &-title { + font-size: 4rem; + color: $white; + @include desktop-lg { + font-size: 3rem; + } + @include desktop { + font-size: 1.7rem; + } + @include mobile { + font-size: 1.2rem; + } + + a { + color: inherit; + } + } + + &-meta { + margin-top: auto; + + i { + font-size: 20px; + } + + a { + text-transform: uppercase; + + &:hover { + color: $primary-color; + } + } + } + + .post-meta { + + i { + color: $white; + } + + a { + color: $white; + + @include mobile { + font-size: 12px; + } + } + } + + &-sm { + .post-title { + font-size: 1.7rem; + @include mobile { + font-size: 1.2rem; + } + } + } +} + +.author-img{ + height: 100px; + width: 100px; + border-radius: 50%; + object-fit: cover; + transform: translateY(50px); +} + +.facts{ + text-align: center; + h1,h2,h3{ + display: inline-block; + border-bottom: 1px solid $black; + margin-bottom: 20px; + } + li{ + border-bottom: 1px solid $border-color; + padding: 10px 0; + margin: 0 !important; + &::before{ + display: none; + } + } +} + + +// pagination +.pagination { + margin-top: 30px; + + .page-item { + .page-link { + display: inline-block; + width: 40px; + height: 40px; + line-height: 40px; + border-radius: 50%; + background: transparent; + text-align: center; + padding: 0; + margin-right: 10px; + border: 0; + color: $text-color; + + &:hover { + background: $primary-color; + color: $white; + } + + &:focus { + box-shadow: none; + } + } + + &:first-child, + &:last-child { + .page-link { + border-radius: 50%; + } + } + + &.active { + .page-link { + background: $primary-color; + color: $white; + } + } + } +} + +// content style +.content { + + * { + word-break: break-word; + overflow-wrap: break-word; + } + + img { + max-width: 100%; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: 500; + } + + strong { + font-weight: 600; + } + + a { + color: $text-color; + border-bottom: 1px dotted $border-color; + + &:hover { + color: $primary-color; + } + } + + ol, + ul { + padding-left: 20px; + + li { + margin-bottom: 10px; + } + } + + ul { + padding-left: 0; + margin-bottom: 20px; + list-style-type: none; + + li { + padding-left: 20px; + position: relative; + + &::before { + position: absolute; + content: ''; + height: 8px; + width: 8px; + border-radius: 50%; + background: $primary-color; + left: 3px; + top: 8px; + } + } + + } + + table { + width: 100%; + max-width: 100%; + margin-bottom: 1rem; + border: 1px solid $border-color; + } + + table td, + table th { + padding: .75rem; + vertical-align: top; + margin-bottom: 0; + } + + tr:not(:last-child) { + border-bottom: 1px solid $border-color; + } + + th { + font-weight: 500; + } + + thead { + background: $light; + margin-bottom: 0; + + tr { + border-bottom: 1px solid $border-color; + } + } + + tbody { + background: lighten($color: $light, $amount: 5); + margin-bottom: 0; + } + + .notices { + margin: 2rem 0; + position: relative; + overflow: hidden; + } + + .notices p { + padding: 10px; + margin-bottom: 0; + } + + .notices p::before { + position: absolute; + top: 2px; + color: $white; + font-family: "themify"; + font-weight: 900; + content: "\e717"; + left: 10px; + } + + .notices.note p { + border-top: 30px solid #6ab0de; + background: $light; + } + + .notices.note p::after { + content: 'Note'; + position: absolute; + top: 2px; + color: $white; + left: 2rem; + } + + + .notices.tip p { + border-top: 30px solid #78C578; + background: $light; + } + + .notices.tip p::after { + content: 'Tip'; + position: absolute; + top: 2px; + color: $white; + left: 2rem; + } + + .notices.info p { + border-top: 30px solid #F0B37E; + background: $light; + } + + .notices.info p::after { + content: 'Info'; + position: absolute; + top: 2px; + color: $white; + left: 2rem; + } + + + .notices.warning p { + border-top: 30px solid #E06F6C; + background: $light; + } + + .notices.warning p::after { + content: 'Warning'; + position: absolute; + top: 2px; + color: #fff; + left: 2rem; + } + + + blockquote { + font-size: 20px !important; + color: $text-color; + padding: 20px 40px; + border-left: 2px solid $primary-color; + margin: 40px 0; + font-weight: bold; + background: $light; + + p { + margin-bottom: 0 !important; + } + } + + pre { + display: block; + padding: 9.5px; + margin: 10px 0px 10px; + white-space: pre-wrap; + } + + code { + margin-bottom: 0 !important; + font-size: 100%; + } +} + +.quote { + background-color: $light; + display: flex; + padding: 20px; + margin-bottom: 20px; + + i { + font-size: 24px; + color: $primary-color; + margin-right: 10px; + } + + p { + font-style: italic; + } + + &-by { + color: $primary-color; + } +} diff --git a/assets/scss/templates/_navigation.scss b/assets/scss/templates/_navigation.scss new file mode 100644 index 0000000..e5b76d5 --- /dev/null +++ b/assets/scss/templates/_navigation.scss @@ -0,0 +1,98 @@ +.navigation{ + position: relative; + padding: 50px 0; +} + +.navbar-light .navbar-nav .nav-link { + color: $text-color-dark; + text-transform: capitalize; + font-size: 18px; + + &:hover { + color: $primary-color; + } +} + +.navbar-expand-md .navbar-nav { + .nav-item { + margin: 0; + + .nav-link { + padding: 15px 25px; + } + } + + .dropdown-menu { + background-color: $body-color; + padding: 10px 0; + margin: 0; + border-radius: 0; + border-color: $border-color; + text-align: center; + + .dropdown-item { + color: $text-color; + font-size: 14px; + padding: 7px 22px; + + &:hover { + color: $primary-color; + } + } + } +} + + +/* search */ +.search-btn { + border: 0; + background: transparent; +} + +.search-wrapper { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + z-index: 2; + visibility: hidden; + transition: .2s ease; + opacity: 0; + + &.open { + visibility: visible; + opacity: 1; + } +} + +.search-box { + height: 100%; + width: 100%; + border: 0; + background: $white; + font-size: 20px; + padding: 0; + + &:focus { + box-shadow: none !important; + outline: 0; + } +} + +.search-close { + position: absolute; + right: 5px; + top: 50%; + transform: translateY(-50%); + border: 0; + background: transparent; + page-break-after: 10px; + font-size: 20px; +} + +.navigation-modal{ + height: 100vh; + width: 100vw; + background: $body-color; +}
\ No newline at end of file |