init commit
This commit is contained in:
0
myproject/src/assets/scss/components/.gitkeep
Normal file
0
myproject/src/assets/scss/components/.gitkeep
Normal file
@@ -0,0 +1,71 @@
|
||||
// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
|
||||
$social-brand-facebook: #3b5998;
|
||||
$social-brand-twitter: #55acee;
|
||||
$social-brand-linkedin: #007bb5;
|
||||
$about-the-author-text-transform: uppercase;
|
||||
$about-the-author-separator-width: 5rem;
|
||||
$about-the-author-separator-thickness: 0.125rem;
|
||||
|
||||
.about-the-author {
|
||||
background-color: $white;
|
||||
padding: 1rem;
|
||||
border: 1px solid $medium-gray;
|
||||
|
||||
.separator-left {
|
||||
text-align: left;
|
||||
@include clearfix;
|
||||
|
||||
&::after {
|
||||
position: relative;
|
||||
width: $about-the-author-separator-width;
|
||||
border-bottom: $about-the-author-separator-thickness solid $primary-color;
|
||||
margin: 0.3rem auto 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.author-title {
|
||||
text-transform: $about-the-author-text-transform;
|
||||
}
|
||||
|
||||
.author-social {
|
||||
text-align: center;
|
||||
margin-top: 0.7rem;
|
||||
margin-bottom: 0.7rem;
|
||||
|
||||
.fa-stack {
|
||||
display: inline-block;
|
||||
|
||||
&.facebook {
|
||||
color: lighten($social-brand-facebook, 10%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $social-brand-facebook;
|
||||
}
|
||||
}
|
||||
|
||||
&.twitter {
|
||||
color: lighten($social-brand-twitter, 10%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $social-brand-twitter;
|
||||
}
|
||||
}
|
||||
|
||||
&.linkedin {
|
||||
color: lighten($social-brand-linkedin, 10%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $social-brand-linkedin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.author-image {
|
||||
border: 1px solid $medium-gray;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.article-row-section {
|
||||
@include flex-grid-row(null, $global-width, 12);
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.article-row-section-inner {
|
||||
@include flex-grid-column(12);
|
||||
|
||||
@include breakpoint(medium) {
|
||||
@include flex-grid-column(10);
|
||||
}
|
||||
}
|
||||
|
||||
.article-row-section-header {
|
||||
padding: 1.5rem 0;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.article-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid $light-gray;
|
||||
padding: 1.5rem 0;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.article-row-img img {
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
max-width: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.article-row-content {
|
||||
padding: 1.5rem 0 0;
|
||||
color: $body-font-color;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
padding: 0 0 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.article-row-content-header {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.article-row-content-description {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.article-row-content-author,
|
||||
.article-row-content-time {
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.article-row-reversed {
|
||||
.article-row-content {
|
||||
order: 2;
|
||||
padding: 0 1.5rem 0 0;
|
||||
}
|
||||
|
||||
.article-row-img {
|
||||
order: 1;
|
||||
padding: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
.article-row-content {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.article-row-img {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
.blockquote-container {
|
||||
&.blockquote-left {
|
||||
float: left;
|
||||
width: 35%;
|
||||
margin-right: $global-margin;
|
||||
|
||||
@include breakpoint (small only) {
|
||||
float: none;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.blockquote-right {
|
||||
float: right;
|
||||
width: 35%;
|
||||
margin-left: $global-margin;
|
||||
}
|
||||
|
||||
.callout {
|
||||
.blockquote-title {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
quotes: "“""”""‘""’ ";
|
||||
border-left: none;
|
||||
|
||||
&:before {
|
||||
content: open-quote;
|
||||
color: $dark-gray;
|
||||
font-size: 4em;
|
||||
line-height: 0.1em;
|
||||
vertical-align: -0.4em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: close-quote;
|
||||
color: $dark-gray;
|
||||
font-size: 4em;
|
||||
line-height: 0.1em;
|
||||
vertical-align: -0.6em;
|
||||
}
|
||||
|
||||
.blockquote-content {
|
||||
display: inline;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
$comment-form-bg: $light-gray;
|
||||
$comment-section-bg: $white;
|
||||
$comment-section-padding: $global-padding;
|
||||
|
||||
.comment-section-container {
|
||||
background-color: $comment-section-bg;
|
||||
padding: $global-padding;
|
||||
}
|
||||
|
||||
.comment-section-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.comment-section-name {
|
||||
margin-left: 1rem;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-section-box {
|
||||
background-color: $comment-form-bg;
|
||||
padding: $global-padding;
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
.ecommerce-footer {
|
||||
background-color: $white;
|
||||
padding: 70px 20px 40px 20px;
|
||||
}
|
||||
|
||||
.ecommerce-footer-links {
|
||||
|
||||
h5 {
|
||||
color: $black;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.menu > li > a {
|
||||
line-height: 1.5em;
|
||||
padding: 0.5rem 0rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: lighten($black, 40%);
|
||||
font-size: 1rem;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $black;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.more-categories {
|
||||
margin-top: 2rem;
|
||||
|
||||
@include breakpoint(small down) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-footer-links-block {
|
||||
|
||||
@include breakpoint(medium down) {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-footer-bottom-bar {
|
||||
border-top: 1px solid $light-gray;
|
||||
margin-top: 40px;
|
||||
padding-bottom: 80px;
|
||||
padding-top: 30px;
|
||||
|
||||
.menu > li > a {
|
||||
line-height: 1.2em;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $dark-gray;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $black;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
ul {
|
||||
@include breakpoint(small down) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.bottom-links {
|
||||
margin-top: 0.65rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.bottom-links li {
|
||||
padding-right: 2rem;
|
||||
|
||||
@include breakpoint(small down) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-footer-logomark {
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint(small down) {
|
||||
padding-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-copyright {
|
||||
color: $dark-gray;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.2em;
|
||||
padding-top: 1rem;
|
||||
text-align: right;
|
||||
|
||||
@include breakpoint(small down) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
$featured-article-text-color: $white;
|
||||
$featured-article-border: rem-calc(1) solid $white;
|
||||
$featured-article-links-border: rem-calc(1) solid $light-gray;
|
||||
$featured-article-side-links-height: rem-calc(450);
|
||||
|
||||
// big feature
|
||||
$featured-article-big-bg: url('https://placehold.it/600?text=Big+Feature') no-repeat center center;
|
||||
$featured-article-title-size-big: rem-calc(28);
|
||||
$featured-article-author-size-big: rem-calc(18);
|
||||
|
||||
// small feature
|
||||
$featured-article-small-bg: url('https://placehold.it/200?text=Small+Feature') no-repeat center center;
|
||||
$featured-article-title-size-small: rem-calc(16);
|
||||
$featured-article-author-size-small: rem-calc(12);
|
||||
|
||||
.featured-article-big {
|
||||
background: $featured-article-big-bg;
|
||||
background-size: cover;
|
||||
height: $featured-article-side-links-height;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: rem-calc(10);
|
||||
border-right: $featured-article-border;
|
||||
|
||||
.featured-article-text {
|
||||
.featured-article-title {
|
||||
font-size: $featured-article-title-size-big;
|
||||
font-weight: bold;
|
||||
line-height: rem-calc(30);
|
||||
.author {
|
||||
font-size: $featured-article-author-size-big;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $featured-article-text-color;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured-article-small-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: $featured-article-side-links-height;
|
||||
|
||||
:last-child .featured-article-small {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-article-small {
|
||||
background: $featured-article-small-bg;
|
||||
height: $featured-article-side-links-height / 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: rem-calc(10);
|
||||
border-bottom: $featured-article-border;
|
||||
|
||||
:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.featured-article-text {
|
||||
.featured-article-title {
|
||||
font-size: $featured-article-title-size-small;
|
||||
font-weight: bold;
|
||||
line-height: rem-calc(15);
|
||||
max-height: rem-calc(45);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
p {
|
||||
color: $featured-article-text-color;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured-article-links-container {
|
||||
border: $featured-article-links-border;
|
||||
background-color: $white;
|
||||
height: $featured-article-side-links-height;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.featured-article-links,
|
||||
.featured-article-links-header {
|
||||
padding: rem-calc(10);
|
||||
border-bottom: $featured-article-links-border;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-article-links-header {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
/// Defatul bottom margin of the panel
|
||||
/// @type List
|
||||
$panel-margin: rem-calc(20 10);
|
||||
/// Default background color of the panel
|
||||
/// @type Color
|
||||
$panel-container-background-color: $white !default;
|
||||
|
||||
/// Default radius of the panel
|
||||
/// @type List
|
||||
$panel-container-radius: $global-radius !default;
|
||||
|
||||
/// Default bottom border width of the panel's header
|
||||
/// @type Number
|
||||
$panel-header-border-bottom-width: rem-calc(4) !default;
|
||||
|
||||
/// Default bottom border color of the panel's header
|
||||
/// @type Color
|
||||
$panel-header-border-bottom-color: $light-gray !default;
|
||||
|
||||
/// Default font color of the panel's title
|
||||
/// @type Color
|
||||
$panel-header-color: $dark-gray;
|
||||
|
||||
/// Default font size of the panel's title
|
||||
/// @type Number
|
||||
$panel-header-font-size: rem-calc(26) !default;
|
||||
|
||||
/// Default bottom border color of the post
|
||||
/// @type Color
|
||||
$post-item-border-bottom-color: $light-gray !default;
|
||||
|
||||
/// Default bottom border width of the post
|
||||
/// @type Number
|
||||
$post-item-border-bottom-width: rem-calc(1) !default;
|
||||
|
||||
/// Adds styles for post-list's elements in small screen and it also could be used for bigger screen in small areas
|
||||
@mixin small-posts-list {
|
||||
.posts-list{
|
||||
.post-title{
|
||||
font-size: rem-calc(18);
|
||||
}
|
||||
|
||||
.post-meta{
|
||||
font-size: rem-calc(12);
|
||||
}
|
||||
|
||||
.post-summary{
|
||||
font-size: rem-calc(12);
|
||||
}
|
||||
.post-read-more{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.posts-panel{
|
||||
@include grid-col-row();
|
||||
float: none !important;
|
||||
margin: $panel-margin;
|
||||
background-color: $panel-container-background-color;
|
||||
border-radius: $panel-container-radius;
|
||||
box-shadow: rem-calc(0 0 4 0) rgba(0,0,0,.2);
|
||||
|
||||
.panel-header{
|
||||
@include grid-col-row();
|
||||
border-bottom: $panel-header-border-bottom-width solid $panel-header-border-bottom-color;
|
||||
|
||||
.panel-title{
|
||||
margin: 0;
|
||||
padding: rem-calc(15 0);
|
||||
color: $panel-header-color;
|
||||
font-size: $panel-header-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content{
|
||||
padding: rem-calc(15 0);
|
||||
}
|
||||
|
||||
.pinned-post, .posts-list{
|
||||
@include grid-col-row($gutters: 0);
|
||||
}
|
||||
|
||||
.posts-list{
|
||||
.post-item:not(:last-child){
|
||||
border-bottom: $post-item-border-bottom-width solid $post-item-border-bottom-color;
|
||||
}
|
||||
}
|
||||
|
||||
.post-item{
|
||||
@include grid-row();
|
||||
padding: rem-calc(15 0);
|
||||
|
||||
.post-thumbnail{
|
||||
display: block;
|
||||
@include grid-column($columns: 4);
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.post-text{
|
||||
@include grid-column($columns: 8);
|
||||
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.post-title{
|
||||
font-size: rem-calc(26);
|
||||
}
|
||||
.post-meta{
|
||||
color: $dark-gray;
|
||||
font-size: rem-calc(14);
|
||||
}
|
||||
.meta{
|
||||
display: inline-block;
|
||||
margin-#{$global-right}: rem-calc(15);
|
||||
}
|
||||
.meta-icon, .meta-text{
|
||||
display: inline-block;
|
||||
padding-#{$global-right}: rem-calc(5);
|
||||
}
|
||||
|
||||
.post-summary{
|
||||
|
||||
}
|
||||
|
||||
.post-read-more{
|
||||
display: block;
|
||||
font-size: rem-calc(14);
|
||||
|
||||
.fa{
|
||||
padding: rem-calc(0 5)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pinned-post{
|
||||
.post-item{
|
||||
border-bottom: $post-item-border-bottom-width solid $post-item-border-bottom-color;
|
||||
}
|
||||
.post-thumbnail{
|
||||
display: block;
|
||||
@include grid-col-row();
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.post-text{
|
||||
@include grid-col-row();
|
||||
margin-top: rem-calc(15);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small only){
|
||||
@include small-posts-list;
|
||||
}
|
||||
|
||||
@include breakpoint(medium only){
|
||||
.posts-list{
|
||||
.post-title{
|
||||
font-size: rem-calc(20);
|
||||
}
|
||||
|
||||
.post-meta{
|
||||
font-size: rem-calc(14);
|
||||
}
|
||||
|
||||
.post-summary{
|
||||
font-size: rem-calc(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid styles
|
||||
&.grid{
|
||||
.pinned-post, .posts-list{
|
||||
@include grid-column($columns: 6, $gutters: 0);
|
||||
|
||||
@include breakpoint(small only){
|
||||
@include grid-col-row($gutters: 0);
|
||||
}
|
||||
}
|
||||
|
||||
.pinned-post{
|
||||
.post-item{
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include small-posts-list;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
$caption-font-size: .9rem;
|
||||
|
||||
.flexible-article-image-full {
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: $caption-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.flexible-article-image-left {
|
||||
float: left;
|
||||
margin: 1rem 1.5rem 0 0;
|
||||
max-width: rem-calc(200);
|
||||
|
||||
.caption {
|
||||
font-size: $caption-font-size;
|
||||
}
|
||||
|
||||
@include breakpoint (small only) {
|
||||
float: none;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
|
||||
.thumbnail {
|
||||
width:100%;
|
||||
|
||||
img {
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flexible-article-image-right {
|
||||
float: right;
|
||||
margin: 0 0 1rem 1.5rem;
|
||||
max-width: rem-calc(200);
|
||||
|
||||
.caption {
|
||||
font-size: $caption-font-size;
|
||||
}
|
||||
|
||||
@include breakpoint (small only) {
|
||||
float: none;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
|
||||
.thumbnail {
|
||||
width:100%;
|
||||
|
||||
img {
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
$large-article-header-bg: url('https://unsplash.it/1024/500/?blur') !default;
|
||||
$large-article-header-color: $black !default;
|
||||
$large-article-header-bg-color: $white !default;
|
||||
$large-article-header-height: rem-calc(500) !default;
|
||||
|
||||
.large-article-header {
|
||||
background: $large-article-header-bg $large-article-header-bg-color no-repeat center;
|
||||
background-size: cover;
|
||||
background-color: $large-article-header-bg-color;
|
||||
height: $large-article-header-height;
|
||||
position: relative;
|
||||
|
||||
@include breakpoint(small only) {
|
||||
height: ($large-article-header-height / 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.large-article-header-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
bottom: rem-calc(50);
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
@include breakpoint(small only) {
|
||||
bottom: rem-calc(20);
|
||||
}
|
||||
|
||||
.center-container {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
|
||||
@include breakpoint(small only) {
|
||||
width: 100%;
|
||||
padding: 0 rem-calc(20);
|
||||
}
|
||||
}
|
||||
|
||||
.article-date {
|
||||
color: $large-article-header-color;
|
||||
}
|
||||
.article-title {
|
||||
h1 {
|
||||
line-height: rem-calc(50);
|
||||
color: $large-article-header-color;
|
||||
font-weight: 600;
|
||||
|
||||
@include breakpoint(small only) {
|
||||
line-height: rem-calc(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
a {
|
||||
color: $large-article-header-color;
|
||||
}
|
||||
}
|
||||
.article-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: $global-margin 0;
|
||||
img {
|
||||
border-radius: rem-calc(50);
|
||||
}
|
||||
a {
|
||||
margin-left: $global-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
$social-button-size: 3.125rem;
|
||||
$social-button-border-width: 0.125rem;
|
||||
$social-button-font-size: 1.5625rem;
|
||||
$social-button-line-height: 2em;
|
||||
$social-button-border-radius: 1.6875rem;
|
||||
$social-button-transition: all 0.5s ease;
|
||||
$social-button-margin: 0.75rem;
|
||||
|
||||
// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
|
||||
$social-brand-facebook: #3b5998;
|
||||
$social-brand-twitter: #55acee;
|
||||
$social-brand-google-plus: #dd4b39;
|
||||
|
||||
@mixin social-button($brand-color, $brand-icon) {
|
||||
background: $brand-color;
|
||||
|
||||
&:before {
|
||||
font-family: "FontAwesome";
|
||||
content: $brand-icon;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $brand-color;
|
||||
background: $white;
|
||||
border-color: $brand-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.neat-article-container {
|
||||
margin-top: 1.5rem;
|
||||
|
||||
.neat-article-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.article-header-avatar {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
.header-avatar {
|
||||
width: rem-calc(60);
|
||||
height: rem-calc(60);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.article-header-author {
|
||||
flex: 1 0 0;
|
||||
|
||||
.author-name {
|
||||
color: $black;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.author-description,
|
||||
.article-date-read {
|
||||
color: $dark-gray;
|
||||
margin-bottom: 0;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.neat-article-title {
|
||||
margin-top: 1rem;
|
||||
|
||||
.article-title {
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.neat-article-image {
|
||||
margin-top: 1.5rem;
|
||||
|
||||
.article-image {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
@include breakpoint(medium only) {
|
||||
height: 65vh;
|
||||
}
|
||||
|
||||
@include breakpoint(small only) {
|
||||
height: 45vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.neat-article-content {
|
||||
margin-top: 2rem;
|
||||
|
||||
.article-social {
|
||||
.rounded-social-buttons {
|
||||
text-align: center;
|
||||
|
||||
.social-button {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: $social-button-size;
|
||||
height: $social-button-size;
|
||||
border: $social-button-border-width solid transparent;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
font-size: $social-button-font-size;
|
||||
font-weight: normal;
|
||||
line-height: $social-button-line-height;
|
||||
border-radius: $social-button-border-radius;
|
||||
transition: $social-button-transition;
|
||||
margin-right: $social-button-margin;
|
||||
margin-bottom: $social-button-margin;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
&.facebook {
|
||||
@include social-button($social-brand-facebook, "\f09a")
|
||||
}
|
||||
|
||||
&.twitter {
|
||||
@include social-button($social-brand-twitter, "\f099")
|
||||
}
|
||||
|
||||
&.google-plus {
|
||||
@include social-button($social-brand-google-plus, "\f0d5")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-content {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
$news-card-label-background: $primary-color;
|
||||
$news-card-label-background-hover: scale-color($news-card-label-background, $lightness: -15%);
|
||||
|
||||
.news-card-tag {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
.label {
|
||||
border-radius: 0.125rem;
|
||||
background-color: $news-card-label-background;
|
||||
color: $white;
|
||||
|
||||
a {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $news-card-label-background-hover;
|
||||
|
||||
a {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news-card {
|
||||
background-color: $white;
|
||||
font-weight: 400;
|
||||
margin-bottom: 1.6rem;
|
||||
border-radius: 0.125rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0, 0.12), 0 1px 2px rgba(0,0,0, 0.24);
|
||||
|
||||
.card-section {
|
||||
background-color: inherit;
|
||||
|
||||
.news-card-date {
|
||||
font-size: 1em;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.news-card-article {
|
||||
background-color: inherit;
|
||||
|
||||
.news-card-title {
|
||||
line-height: 1.3;
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $dark-gray;
|
||||
transition: color 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news-card-description {
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.news-card-author {
|
||||
overflow: hidden;
|
||||
padding-bottom: 1.6rem;
|
||||
|
||||
.news-card-author-image {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.news-card-author-name {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
$social-button-size: 2.5rem;
|
||||
$social-button-border-width: .125rem;
|
||||
$social-button-font-size: 1.25rem;
|
||||
$social-button-line-height: 1.8em;
|
||||
$social-button-border-radius: 1.6875rem;
|
||||
$social-button-transition: 0.5s ease all;
|
||||
$social-button-margin: .25rem;
|
||||
|
||||
// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
|
||||
$social-brand-facebook: #3b5998;
|
||||
$social-brand-twitter: #55acee;
|
||||
$social-brand-linkedin: #007bb5;
|
||||
$social-brand-google-plus: #dd4b39;
|
||||
|
||||
@mixin social-button($brand-color, $brand-icon) {
|
||||
background: $brand-color;
|
||||
|
||||
&:before {
|
||||
font-family: "FontAwesome";
|
||||
content: $brand-icon;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $brand-color;
|
||||
background: $white;
|
||||
border-color: $brand-color;
|
||||
}
|
||||
}
|
||||
|
||||
.news-image-gallery-container {
|
||||
background-color: $white;
|
||||
padding: 2rem 1.5rem 1rem;
|
||||
|
||||
.rounded-social-buttons {
|
||||
text-align: left;
|
||||
|
||||
.social-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: $social-button-size;
|
||||
height: $social-button-size;
|
||||
border: $social-button-border-width solid transparent;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
font-size: $social-button-font-size;
|
||||
font-weight: normal;
|
||||
line-height: $social-button-line-height;
|
||||
border-radius: $social-button-border-radius;
|
||||
transition: $social-button-transition;
|
||||
margin-right: $social-button-margin;
|
||||
margin-bottom: $social-button-margin;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
&.facebook {
|
||||
@include social-button($social-brand-facebook, "\f09a")
|
||||
}
|
||||
&.twitter {
|
||||
@include social-button($social-brand-twitter, "\f099")
|
||||
}
|
||||
&.linkedin {
|
||||
@include social-button($social-brand-linkedin, "\f0e1")
|
||||
}
|
||||
&.google-plus {
|
||||
@include social-button($social-brand-google-plus, "\f0d5")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news-image-gallery-title {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
$pagination-circular-size: 18px; // controls font and circle size
|
||||
$pagination-circular-color: $primary-color;
|
||||
$pagination-circular-disabled-color: $medium-gray;
|
||||
$pagination-circular-border-thickness: 1px;
|
||||
|
||||
|
||||
.pagination-circular li.current {
|
||||
border: $pagination-circular-border-thickness solid $pagination-circular-color;
|
||||
border-radius: 5000px;
|
||||
padding: 0.285em 0.8em;
|
||||
font-size: $pagination-circular-size;
|
||||
}
|
||||
|
||||
.pagination-circular li.disabled {
|
||||
border: $pagination-circular-border-thickness solid $pagination-circular-disabled-color;
|
||||
padding: 0.285em 0.8em;
|
||||
border-radius: 5000px;
|
||||
font-size: $pagination-circular-size;
|
||||
}
|
||||
|
||||
.pagination-circular a {
|
||||
border-radius: 5000px;
|
||||
padding: 0.285em 0.8em;
|
||||
border: $pagination-circular-border-thickness solid $pagination-circular-color;
|
||||
font-size: $pagination-circular-size;
|
||||
}
|
||||
|
||||
.pagination-circular li:not(.disabled):hover a {
|
||||
background: $pagination-circular-color;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.pagination-circular li a {
|
||||
transition: background 0.15s ease-in, color 0.15s ease-in;
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
$white: #fff;
|
||||
$pagination-primary-color: #2c3840;
|
||||
$pagination-current-color: dodgerblue;
|
||||
$pagination-radius: 4px;
|
||||
|
||||
.pagination-pointed {
|
||||
.pagination-pointed-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $pagination-radius;
|
||||
background-color: $pagination-primary-color;
|
||||
color: $white;
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($pagination-primary-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.current {
|
||||
@extend .pagination-pointed-button;
|
||||
background: $pagination-current-color;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($pagination-current-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-next a {
|
||||
border-radius: $pagination-radius 0 0 $pagination-radius;
|
||||
margin-right: 18px;
|
||||
|
||||
&:hover::after {
|
||||
border-left: 17px solid lighten($pagination-primary-color, 10%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -18px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 17px solid transparent;
|
||||
border-bottom: 17px solid transparent;
|
||||
border-left: 17px solid $pagination-primary-color;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-previous {
|
||||
@extend .pagination-pointed-button;
|
||||
border-radius: 0 $pagination-radius $pagination-radius 0;
|
||||
margin-left: 18px;
|
||||
|
||||
&:hover::after {
|
||||
border-right: 17px solid lighten($pagination-primary-color, 10%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ""; //removes the arrow
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -18px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 17px solid transparent;
|
||||
border-top: 17px solid transparent;
|
||||
border-right: 17px solid $pagination-primary-color;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
$polls-question-label-color: $primary-color;
|
||||
$polls-submit-button-transform: uppercase;
|
||||
|
||||
.polls {
|
||||
margin-bottom: 1rem;
|
||||
.polls-question {
|
||||
margin-bottom: .5rem;
|
||||
.polls-question-label {
|
||||
color: $polls-question-label-color;
|
||||
font-weight: 500;
|
||||
margin-right: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.polls-submit {
|
||||
margin-top: .3rem;
|
||||
.button {
|
||||
margin-right: .5rem;
|
||||
text-transform: $polls-submit-button-transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
$quote-inline-width: rem-calc(350);
|
||||
|
||||
.quote-inline-wrap-article-content {
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quote-inline-wrap {
|
||||
float: left;
|
||||
max-width: $quote-inline-width;
|
||||
padding: 0 1rem 1rem 0;
|
||||
|
||||
.quote-inline-marks {
|
||||
font-size: rem-calc(100);
|
||||
color: $dark-gray;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.quote-inline-testimonial {
|
||||
border-radius: 5px;
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.quote-inline-person {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.quote-inline-photo img {
|
||||
border-radius: 50%;
|
||||
width: rem-calc(70);
|
||||
height: rem-calc(70);
|
||||
float: left;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
|
||||
&:nth-child(2) {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium down) {
|
||||
width: 100%;
|
||||
float: none;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
$hero-height: 60vh;
|
||||
|
||||
|
||||
$hero-height: 60vh;
|
||||
|
||||
.hero-section {
|
||||
background: url('https://static.pexels.com/photos/248064/pexels-photo-248064.jpeg') 50% no-repeat;
|
||||
background-size: cover;
|
||||
height: $hero-height;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.hero-section-text {
|
||||
color: $white;
|
||||
text-shadow: 1px 1px 2px $black;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
// Default colors, Change as per your requirement.
|
||||
$color-1: $primary-color;
|
||||
$color-2: darken($primary-color, 10%);
|
||||
$color-3: darken($primary-color, 20%);
|
||||
|
||||
$responsive-hidden-nav-min-width: 240px;
|
||||
|
||||
/*! CSS for Responsive Hidden Nav */
|
||||
.responsive-hidden-nav-container {
|
||||
min-width: $responsive-hidden-nav-min-width;
|
||||
background: $color-1;
|
||||
padding: .5rem 1rem;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.responsive-hidden-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
min-width: $responsive-hidden-nav-min-width;
|
||||
background: $white;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 1.25rem 2rem;
|
||||
background: $white;
|
||||
font-size: 1.1em;
|
||||
color: $color-1;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $color-3;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
padding: 0 1rem;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background-color: $color-2;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-3;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(count);
|
||||
position: absolute;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
left: -1rem;
|
||||
top: .75rem;
|
||||
text-align: center;
|
||||
background-color: $color-3;
|
||||
color: $white;
|
||||
font-size: .9em;
|
||||
line-height: 1.6;
|
||||
border-radius: 50%;
|
||||
border: .25rem solid $white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
transform: scale(1.075);
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
@include hamburger(
|
||||
$color: $white,
|
||||
$color-hover: $white
|
||||
);
|
||||
}
|
||||
|
||||
.visible-links {
|
||||
display: inline-table;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: table-cell;
|
||||
border-left: 1px solid $color-1;
|
||||
|
||||
&:first-child {
|
||||
font-weight: bold;
|
||||
a {
|
||||
color: $color-1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-links {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
border-top: .0625rem solid $color-2;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
$article-title-case: uppercase;
|
||||
|
||||
// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
|
||||
$social-brand-facebook: #3b5998;
|
||||
$social-brand-twitter: #55acee;
|
||||
$social-brand-linkedin: #007bb5;
|
||||
$social-brand-google-plus: #dd4b39;
|
||||
|
||||
.simple-article-header {
|
||||
background: $white;
|
||||
padding: 1.3rem 2rem .7rem;
|
||||
border: 1px solid $medium-gray;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.article-date-read {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
text-transform: $article-title-case;
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-author-comments {
|
||||
a.article-comments {
|
||||
color: $dark-gray;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-date-read,
|
||||
.article-title,
|
||||
.article-author-comments,
|
||||
.article-social,
|
||||
.article-post-image,
|
||||
.article-post-content {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.article-social {
|
||||
margin-top: 0.75rem;
|
||||
|
||||
.social {
|
||||
margin-right: 0.25rem;
|
||||
|
||||
&.facebook {
|
||||
@include button-style($social-brand-facebook, auto, $white);
|
||||
}
|
||||
&.twitter {
|
||||
@include button-style($social-brand-twitter, auto, $white);
|
||||
}
|
||||
&.linkedin {
|
||||
@include button-style($social-brand-linkedin, auto, $white);
|
||||
}
|
||||
&.google-plus {
|
||||
@include button-style($social-brand-google-plus, auto, $white);
|
||||
}
|
||||
|
||||
> .fa {
|
||||
color: $white;
|
||||
|
||||
&.fa-comments-o {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
|
||||
$social-brand-facebook: #3b5998;
|
||||
$social-brand-twitter: #55acee;
|
||||
$social-brand-linkedin: #007bb5;
|
||||
$social-brand-youtube: #bb0000;
|
||||
$social-brand-instagram: #125688;
|
||||
$social-brand-pinterest: #cb2027;
|
||||
$social-brand-google-plus: #dd4b39;
|
||||
$social-brand-github: #000000;
|
||||
$social-brand-tumblr: #32506d;
|
||||
|
||||
.social {
|
||||
margin-right: .25rem;
|
||||
|
||||
&.facebook {
|
||||
@include button-style($social-brand-facebook, auto, $white);
|
||||
}
|
||||
&.twitter {
|
||||
@include button-style($social-brand-twitter, auto, $white);
|
||||
}
|
||||
&.linkedin {
|
||||
@include button-style($social-brand-linkedin, auto, $white);
|
||||
}
|
||||
&.youtube {
|
||||
@include button-style($social-brand-youtube, auto, $white);
|
||||
}
|
||||
&.instagram {
|
||||
@include button-style($social-brand-instagram, auto, $white);
|
||||
}
|
||||
&.pinterest {
|
||||
@include button-style($social-brand-pinterest, auto, $white);
|
||||
}
|
||||
&.google-plus {
|
||||
@include button-style($social-brand-google-plus, auto, $white);
|
||||
}
|
||||
&.github {
|
||||
@include button-style($social-brand-github, auto, $white);
|
||||
}
|
||||
&.tumblr {
|
||||
@include button-style($social-brand-tumblr, auto, $white);
|
||||
}
|
||||
|
||||
> .fa {
|
||||
color: $white;
|
||||
margin-right: .25rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
$social-bar-position: left; // Change this value to `right` for changing sidebar's position.
|
||||
$social-bar-transformation: rem-calc(140);
|
||||
$social-bar-width: rem-calc(180);
|
||||
$social-bar-background: #333333;
|
||||
$social-icon-color: $white;
|
||||
$social-icon-transition: all 0.3s ease-in-out;
|
||||
$social-icon-font-size: 1.1rem;
|
||||
$social-icon-padding: 0.5rem;
|
||||
|
||||
// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
|
||||
$social-brand-facebook: #3b5998;
|
||||
$social-brand-twitter: #55acee;
|
||||
$social-brand-linkedin: #007bb5;
|
||||
$social-brand-youtube: #bb0000;
|
||||
$social-brand-instagram: #125688;
|
||||
$social-brand-pinterest: #cb2027;
|
||||
|
||||
.sticky-social-bar {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: $social-bar-width;
|
||||
background-color: $social-bar-background;
|
||||
position: fixed;
|
||||
|
||||
@if $social-bar-position == left {
|
||||
left: $social-bar-transformation * -1;
|
||||
}
|
||||
@if $social-bar-position == right {
|
||||
right: $social-bar-transformation * -1;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
list-style-type: none;
|
||||
color: $social-icon-color;
|
||||
background-color: inherit;
|
||||
margin: 0;
|
||||
transition: $social-icon-transition;
|
||||
cursor: pointer;
|
||||
font-size: $social-icon-font-size;
|
||||
padding: 0.25rem 0.25rem 0.5rem;
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: 0.375rem;
|
||||
}
|
||||
&:last-of-type {
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
|
||||
> .fa {
|
||||
padding: $social-icon-padding;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
@if $social-bar-position == left {
|
||||
float: right;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
@if $social-bar-position == right {
|
||||
float: left;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.fa-facebook {
|
||||
background-color: $social-brand-facebook;
|
||||
}
|
||||
&.fa-twitter {
|
||||
background-color: $social-brand-twitter;
|
||||
}
|
||||
&.fa-linkedin {
|
||||
background-color: $social-brand-linkedin;
|
||||
}
|
||||
&.fa-youtube {
|
||||
background-color: $social-brand-youtube;
|
||||
}
|
||||
&.fa-instagram {
|
||||
background-color: $social-brand-instagram;
|
||||
}
|
||||
&.fa-pinterest-p {
|
||||
background-color: $social-brand-pinterest;
|
||||
}
|
||||
}
|
||||
|
||||
> .social-icon-text {
|
||||
font-size: 80%;
|
||||
color: $social-icon-color;
|
||||
text-transform: uppercase;
|
||||
|
||||
@if $social-bar-position == left {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
@if $social-bar-position == right {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
@if $social-bar-position == left {
|
||||
transform:translateX($social-bar-transformation * 1);
|
||||
}
|
||||
@if $social-bar-position == right {
|
||||
transform:translateX($social-bar-transformation * -1);
|
||||
}
|
||||
|
||||
> a {
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
$tag-cloud-tag-color: #2c3840;
|
||||
$tag-cloud-type-color: $light-gray;
|
||||
$tag-cloud-separator-color: $medium-gray;
|
||||
$tag-cloud-section-bg: lighten($tag-cloud-tag-color, 35%);
|
||||
$tag-cloud-section-width: 800px;
|
||||
|
||||
.tag-cloud-section {
|
||||
background: $tag-cloud-section-bg;
|
||||
padding: 4rem;
|
||||
max-width: $tag-cloud-section-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tag-cloud-title {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
color: $tag-cloud-type-color;
|
||||
border-bottom: 1px solid $tag-cloud-separator-color;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tag-cloud {
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
|
||||
.tag-cloud-individual-tag {
|
||||
@include label;
|
||||
border-radius: 5000px;
|
||||
background: $tag-cloud-tag-color;
|
||||
display: inline-block;
|
||||
color: $tag-cloud-type-color;
|
||||
margin: 3px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
|
||||
.fa {
|
||||
margin-left: 7px;
|
||||
color: $tag-cloud-type-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($tag-cloud-tag-color, 25%);
|
||||
transition: background-color .2s ease-in;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
$topbar-responsive-bg: #2c3840;
|
||||
$topbar-responsive-animation-type: fade-in; // or use slide-down or none
|
||||
|
||||
.topbar-responsive {
|
||||
background: $topbar-responsive-bg;
|
||||
padding: 1rem 1.5rem;
|
||||
|
||||
.topbar-responsive-logo {
|
||||
color: $white;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.menu {
|
||||
background: $topbar-responsive-bg;
|
||||
|
||||
li:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
transition: color 0.15s ease-in;
|
||||
|
||||
&:hover {
|
||||
color: lighten($topbar-responsive-bg, 60%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 39.9375em) {
|
||||
padding: 0.875rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-responsive-button {
|
||||
color: $white;
|
||||
border-color: $white;
|
||||
border-radius: 5000px;
|
||||
transition: color 0.15s ease-in, border-color 0.15s ease-in;
|
||||
|
||||
&:hover {
|
||||
color: lighten($topbar-responsive-bg, 60%);
|
||||
border-color: lighten($topbar-responsive-bg, 60%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 39.9375em) {
|
||||
width: 100%;
|
||||
margin: 0.875rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 39.9375em) {
|
||||
padding: 0.75rem;
|
||||
|
||||
.top-bar-title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
border: 1px solid $white;
|
||||
border-radius: 5px;
|
||||
padding: 0.25rem 0.45rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.menu-icon {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity:0;
|
||||
} to {
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small only) {
|
||||
.topbar-responsive-links {
|
||||
animation-fill-mode: both;
|
||||
animation-duration: 0.5s;
|
||||
width: 100%;
|
||||
|
||||
@if $topbar-responsive-animation-type == slide-down {
|
||||
animation: slideDown 1s ease-in;
|
||||
} @else if $topbar-responsive-animation-type == fade-in {
|
||||
animation: fadeIn 1s ease-in;
|
||||
} @else {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
|
||||
$social-comments: $dark-gray;
|
||||
$social-brand-facebook: #3b5998;
|
||||
$social-brand-twitter: #55acee;
|
||||
$social-brand-linkedin: #007bb5;
|
||||
$social-brand-google-plus: #dd4b39;
|
||||
|
||||
.wide-article-link {
|
||||
background-color: $white;
|
||||
padding: 1rem 1rem 0.5rem;
|
||||
border: 1px solid $medium-gray;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.article-title {
|
||||
a {
|
||||
color: $black;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-elipsis {
|
||||
.read-more {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.article-title,
|
||||
.article-author,
|
||||
.article-elipsis {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.article-social {
|
||||
margin-top: 0.75rem;
|
||||
|
||||
.social {
|
||||
margin-right: 0.25rem;
|
||||
|
||||
&.comments {
|
||||
@include button-style($social-comments, auto, $white);
|
||||
}
|
||||
&.facebook {
|
||||
@include button-style($social-brand-facebook, auto, $white);
|
||||
}
|
||||
&.twitter {
|
||||
@include button-style($social-brand-twitter, auto, $white);
|
||||
}
|
||||
&.linkedin {
|
||||
@include button-style($social-brand-linkedin, auto, $white);
|
||||
}
|
||||
&.google-plus {
|
||||
@include button-style($social-brand-google-plus, auto, $white);
|
||||
}
|
||||
|
||||
> .fa {
|
||||
color: $white;
|
||||
|
||||
&.fa-comments-o {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user