mirror of
https://github.com/foo-dogsquared/website.git
synced 2025-02-07 06:19:04 +00:00
Refactor and modularize SCSS
This commit is contained in:
foo-dogsquared
parent
842bc91fbc
commit
7c02d44130
@ -44,7 +44,7 @@ plugins:
|
||||
- jekyll-sitemap
|
||||
- jekyll-redirect-from
|
||||
|
||||
pinpost: ["A Freebie's Resource List (Mostly Related to Programming)", "An Absolute Beginners' Complete Web Development Resource List"]
|
||||
pinpost: ["A Freebie's Resource List (Mostly Related to Programming)"]
|
||||
|
||||
google_analytics: UA-126718538-1
|
||||
|
||||
|
||||
@ -7,22 +7,6 @@ a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: $light-brown; // Specified settings for the headers in 'post.html'
|
||||
&.heading-links {
|
||||
color: $text-color;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
&::after {
|
||||
color: $grey-color;
|
||||
content: ' →';
|
||||
}
|
||||
}
|
||||
}
|
||||
&.post-link:visited {
|
||||
color: $brown;
|
||||
}
|
||||
&.post-alt-link:visited {
|
||||
color: $brown;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@ -34,11 +18,7 @@ blockquote {
|
||||
word-spacing: 1px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 h4,
|
||||
h5,
|
||||
h6 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
code {
|
||||
font-size: 1em;
|
||||
}
|
||||
@ -100,43 +80,6 @@ table:not(.rouge-table) {
|
||||
}
|
||||
}
|
||||
|
||||
.relative-posts {
|
||||
color: $grey-color-dark;
|
||||
display: flex;
|
||||
font-size: $small-font-size;
|
||||
justify-content: space-between;
|
||||
margin-top: 2em;
|
||||
|
||||
a {
|
||||
font-size: $base-font-size * 1.2;
|
||||
}
|
||||
|
||||
.previous-post {
|
||||
text-align: left;
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
.next-post {
|
||||
text-align: right;
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
flex-flow: column wrap;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
> * {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.previous-post, .next-post {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// code syntax table
|
||||
figure.highlight {
|
||||
border: 1px solid $grey-color-light;
|
||||
@ -162,93 +105,6 @@ figure.highlight {
|
||||
font-size: 1.4em !important;
|
||||
}
|
||||
|
||||
// alt title properties
|
||||
main .home {
|
||||
> .home-post:not(:first-of-type) {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
> .home-post > * {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2.post-alt-title {
|
||||
font-family: "Georgia", $base-font-family;
|
||||
}
|
||||
|
||||
// wrapper
|
||||
.wrapper {
|
||||
main > & {
|
||||
& > :first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
> h1:not(:first-of-type){
|
||||
margin-top: $spacing-unit * 1.65;
|
||||
}
|
||||
|
||||
h2:first-of-type {
|
||||
margin-top: $spacing-unit * 1.5;
|
||||
}
|
||||
|
||||
h2:not(:first-of-type) {
|
||||
margin-top: $spacing-unit * 1.4;
|
||||
}
|
||||
|
||||
h3:not(:first-of-type) {
|
||||
margin-top: $spacing-unit * 1.15;
|
||||
}
|
||||
|
||||
> p {
|
||||
word-spacing: 1px;
|
||||
}
|
||||
|
||||
p > img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
ul.resources-link {
|
||||
list-style: none;
|
||||
margin-left: 1.9em;
|
||||
|
||||
@include media-query($on-palm) {
|
||||
margin-left: 0;
|
||||
|
||||
> li {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// notes.md
|
||||
.entry-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: .25em;
|
||||
padding: .5em;
|
||||
&:nth-child(odd) {
|
||||
background: lighten($brown, 50%);
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.post-list-date {
|
||||
display: block;
|
||||
}
|
||||
@include media-query($on-palm) {
|
||||
flex-flow: column;
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
// custom properties for several layout items
|
||||
#personal-logo {
|
||||
width: 29px;
|
||||
@ -261,229 +117,12 @@ h2.post-alt-title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p.caption {
|
||||
color: $grey-color;
|
||||
font-size: $small-font-size;
|
||||
padding-bottom: 1.5em;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
code.fileName {
|
||||
color: darken($code-keywords, 10%);
|
||||
}
|
||||
|
||||
// List of topics properties found on posts type
|
||||
#list-container {
|
||||
border: 3px $brown dashed;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
color: $grey-color;
|
||||
line-height: 1.75em;
|
||||
margin: 2em 0;
|
||||
padding: 2em;
|
||||
width: inherit;
|
||||
@include relative-font-size(0.95);
|
||||
ul {
|
||||
list-style: upper-roman;
|
||||
}
|
||||
}
|
||||
|
||||
// Header custom settings
|
||||
.site-header {
|
||||
background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
|
||||
border-top: 5px solid $dark-brown;
|
||||
border-bottom: 1px solid $grey-color-light;
|
||||
color: $super-platinum;
|
||||
.site-title {
|
||||
@include relative-font-size(1.625);
|
||||
font-weight: 300;
|
||||
line-height: $base-line-height * $base-font-size * 2.25;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 0;
|
||||
float: left;
|
||||
&,
|
||||
&:visited {
|
||||
color: $super-platinum;
|
||||
}
|
||||
}
|
||||
.site-nav {
|
||||
float: right;
|
||||
line-height: $base-line-height * $base-font-size * 2.25;
|
||||
.nav-trigger {
|
||||
display: none;
|
||||
}
|
||||
.menu-icon {
|
||||
display: none;
|
||||
}
|
||||
.page-link {
|
||||
color: $super-platinum;
|
||||
line-height: $base-line-height; // Gaps between nav items, but not on the last one
|
||||
&:not(:last-child) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
@include media-query($on-palm) {
|
||||
.page-link {
|
||||
color: $text-color;
|
||||
margin: 0 .5em;
|
||||
text-align: left;
|
||||
}
|
||||
.menu-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Post Title
|
||||
.post-subtitle {
|
||||
color: $grey-color;
|
||||
font-size: $base-font-size * 1.7;
|
||||
margin: .24em 0;
|
||||
}
|
||||
|
||||
// Markdown Table of Content
|
||||
// Pinned posts style on the homepage
|
||||
#pinned-section {
|
||||
background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
|
||||
border: $brown 4px solid;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
color: white;
|
||||
margin-bottom: 2em;
|
||||
padding: $base-font-size;
|
||||
|
||||
|
||||
ul.pinned-posts {
|
||||
& * {color: white;}
|
||||
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
@include media-query($on-palm) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dt-updated, .reading-minutes {
|
||||
color: $grey-color;
|
||||
font-size: $small-font-size;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Pagination custom settings
|
||||
.pagination {
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 2em;
|
||||
.previous,
|
||||
.next {
|
||||
border-radius: 4px;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
&.disabled {
|
||||
color: $grey-color;
|
||||
}
|
||||
}
|
||||
&>* {
|
||||
padding: 1em;
|
||||
}
|
||||
@include media-query($on-palm) {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Tags custom settings
|
||||
.list-tags {
|
||||
color: $grey-color;
|
||||
}
|
||||
|
||||
.home-tags {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
|
||||
.post-updatedOn {
|
||||
color: $grey-color-dark;
|
||||
font-size: $small-font-size;
|
||||
margin-bottom: $base-font-size;
|
||||
span.updatedPostDate {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
color: $grey-color-dark;
|
||||
font-size: $small-font-size;
|
||||
.link-tag {
|
||||
color: $brown;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer custom settings
|
||||
.site-footer {
|
||||
background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
|
||||
border-top: 1px solid $grey-color-light;
|
||||
color: $platinum;
|
||||
padding: $spacing-unit 0;
|
||||
.footer-col-1 {
|
||||
width: -webkit-calc(25% - (#{$spacing-unit} / 2));
|
||||
width : calc(25% - (#{$spacing-unit} / 2));
|
||||
}
|
||||
.footer-col-2 {
|
||||
width: -webkit-calc(30% - (#{$spacing-unit} / 2));
|
||||
width : calc(30% - (#{$spacing-unit} / 2));
|
||||
}
|
||||
.footer-col-wrapper {
|
||||
color: $super-platinum;
|
||||
.u-email,
|
||||
.username {
|
||||
color: $super-platinum;
|
||||
&:hover {
|
||||
color: $super-platinum;
|
||||
}
|
||||
}
|
||||
.svg-icon {
|
||||
fill: $super-platinum;
|
||||
}
|
||||
}
|
||||
|
||||
.site-icon-credits {
|
||||
font-size: $small-font-size;
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $footer-link;
|
||||
}
|
||||
}
|
||||
|
||||
.site-credits {
|
||||
text-align: center;
|
||||
> p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $footer-link;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
}
|
||||
@include media-query($on-palm) {
|
||||
.footer-col-1,
|
||||
.footer-col-2,
|
||||
.footer-col-3 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
21
_sass/custom_elems/_pinned_posts.scss
Normal file
21
_sass/custom_elems/_pinned_posts.scss
Normal file
@ -0,0 +1,21 @@
|
||||
#pinned-section {
|
||||
background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
|
||||
border: $brown 4px solid;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
color: white;
|
||||
margin-bottom: 2em;
|
||||
padding: $base-font-size;
|
||||
|
||||
|
||||
ul.pinned-posts {
|
||||
& * {color: white;}
|
||||
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
@include media-query($on-palm) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
_sass/custom_elems/index.scss
Normal file
3
_sass/custom_elems/index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import
|
||||
"pinned_posts"
|
||||
;
|
||||
66
_sass/custom_layout/_footer.scss
Normal file
66
_sass/custom_layout/_footer.scss
Normal file
@ -0,0 +1,66 @@
|
||||
.site-footer {
|
||||
background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
|
||||
border-top: 1px solid $grey-color-light;
|
||||
color: $platinum;
|
||||
padding: $spacing-unit 0;
|
||||
}
|
||||
|
||||
.footer-col-1 {
|
||||
width: -webkit-calc(25% - (#{$spacing-unit} / 2));
|
||||
width : calc(25% - (#{$spacing-unit} / 2));
|
||||
}
|
||||
|
||||
.footer-col-2 {
|
||||
width: -webkit-calc(30% - (#{$spacing-unit} / 2));
|
||||
width : calc(30% - (#{$spacing-unit} / 2));
|
||||
}
|
||||
|
||||
.footer-col-wrapper {
|
||||
color: $super-platinum;
|
||||
.u-email,
|
||||
.username {
|
||||
color: $super-platinum;
|
||||
&:hover {
|
||||
color: $super-platinum;
|
||||
}
|
||||
}
|
||||
.svg-icon {
|
||||
fill: $super-platinum;
|
||||
}
|
||||
}
|
||||
|
||||
.site-icon-credits {
|
||||
font-size: $small-font-size;
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $footer-link;
|
||||
}
|
||||
}
|
||||
|
||||
.site-credits {
|
||||
text-align: center;
|
||||
> p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $footer-link;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-query($on-palm) {
|
||||
.footer-col-1,
|
||||
.footer-col-2,
|
||||
.footer-col-3 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
51
_sass/custom_layout/_header.scss
Normal file
51
_sass/custom_layout/_header.scss
Normal file
@ -0,0 +1,51 @@
|
||||
.site-header {
|
||||
background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
|
||||
border-top: 5px solid $dark-brown;
|
||||
border-bottom: 1px solid $grey-color-light;
|
||||
color: $super-platinum;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
@include relative-font-size(1.625);
|
||||
font-weight: 300;
|
||||
line-height: $base-line-height * $base-font-size * 2.25;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 0;
|
||||
float: left;
|
||||
&,
|
||||
&:visited {
|
||||
color: $super-platinum;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
float: right;
|
||||
line-height: $base-line-height * $base-font-size * 2.25;
|
||||
|
||||
.nav-trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
color: $super-platinum;
|
||||
line-height: $base-line-height; // Gaps between nav items, but not on the last one
|
||||
&:not(:last-child) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-query($on-palm) {
|
||||
.page-link {
|
||||
color: $text-color;
|
||||
margin: 0 .5em;
|
||||
text-align: left;
|
||||
}
|
||||
.menu-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
_sass/custom_layout/index.scss
Normal file
4
_sass/custom_layout/index.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import
|
||||
"footer",
|
||||
"header"
|
||||
;
|
||||
@ -68,5 +68,13 @@ $code-flags: #16e2e9;
|
||||
"minima/base",
|
||||
"minima/layout",
|
||||
"minima/syntax-highlighting",
|
||||
|
||||
"custom_layout/index",
|
||||
"custom_elems/index",
|
||||
|
||||
"pages/index",
|
||||
"pagination/index",
|
||||
"post_content/index",
|
||||
|
||||
"custom"
|
||||
;
|
||||
|
||||
@ -170,8 +170,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Page content
|
||||
*/
|
||||
@ -206,50 +204,3 @@
|
||||
display: block;
|
||||
@include relative-font-size(1.5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Posts
|
||||
*/
|
||||
.post-header {
|
||||
margin-bottom: $spacing-unit;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
@include relative-font-size(2.625);
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
@include relative-font-size(2.25);
|
||||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-bottom: $spacing-unit;
|
||||
|
||||
h2 {
|
||||
@include relative-font-size(2);
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
@include relative-font-size(1.75);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include relative-font-size(1.625);
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
@include relative-font-size(1.375);
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include relative-font-size(1.25);
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
@include relative-font-size(1.125);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
3
_sass/pages/index.scss
Normal file
3
_sass/pages/index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import
|
||||
"notes"
|
||||
;
|
||||
20
_sass/pages/notes.scss
Normal file
20
_sass/pages/notes.scss
Normal file
@ -0,0 +1,20 @@
|
||||
.entry-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: .25em;
|
||||
padding: .5em;
|
||||
&:nth-child(odd) {
|
||||
background: lighten($brown, 50%);
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.post-list-date {
|
||||
display: block;
|
||||
}
|
||||
@include media-query($on-palm) {
|
||||
flex-flow: column;
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
9
_sass/pagination/_home_post_list.scss
Normal file
9
_sass/pagination/_home_post_list.scss
Normal file
@ -0,0 +1,9 @@
|
||||
main .home {
|
||||
> .home-post:not(:first-of-type) {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
> .home-post > * {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
25
_sass/pagination/_style.scss
Normal file
25
_sass/pagination/_style.scss
Normal file
@ -0,0 +1,25 @@
|
||||
.pagination {
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 2em;
|
||||
.previous,
|
||||
.next {
|
||||
border-radius: 4px;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
&.disabled {
|
||||
color: $grey-color;
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
@include media-query($on-palm) {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
}
|
||||
4
_sass/pagination/index.scss
Normal file
4
_sass/pagination/index.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import
|
||||
"style",
|
||||
"home_post_list"
|
||||
;
|
||||
15
_sass/post_content/_list_container.scss
Normal file
15
_sass/post_content/_list_container.scss
Normal file
@ -0,0 +1,15 @@
|
||||
#list-container {
|
||||
border: 3px $brown dashed;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
color: $grey-color;
|
||||
line-height: 1.75em;
|
||||
margin: 2em 0;
|
||||
padding: 2em;
|
||||
width: inherit;
|
||||
@include relative-font-size(0.95);
|
||||
|
||||
ul {
|
||||
list-style: upper-roman;
|
||||
}
|
||||
}
|
||||
90
_sass/post_content/_post.scss
Normal file
90
_sass/post_content/_post.scss
Normal file
@ -0,0 +1,90 @@
|
||||
|
||||
/**
|
||||
* Posts
|
||||
*/
|
||||
.post-header {
|
||||
margin-bottom: $spacing-unit;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
@include relative-font-size(2.625);
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
@include relative-font-size(2.25);
|
||||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-bottom: $spacing-unit;
|
||||
|
||||
h2 {
|
||||
@include relative-font-size(2);
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
@include relative-font-size(1.75);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include relative-font-size(1.625);
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
@include relative-font-size(1.375);
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include relative-font-size(1.25);
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
@include relative-font-size(1.125);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.caption {
|
||||
color: $grey-color;
|
||||
font-size: $small-font-size;
|
||||
padding-bottom: 1.5em;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.relative-posts {
|
||||
color: $grey-color-dark;
|
||||
display: flex;
|
||||
font-size: $small-font-size;
|
||||
justify-content: space-between;
|
||||
margin-top: 2em;
|
||||
|
||||
a {
|
||||
font-size: $base-font-size * 1.2;
|
||||
}
|
||||
|
||||
.previous-post {
|
||||
text-align: left;
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
.next-post {
|
||||
text-align: right;
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
flex-flow: column wrap;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
> * {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.previous-post, .next-post {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
_sass/post_content/_post_links.scss
Normal file
20
_sass/post_content/_post_links.scss
Normal file
@ -0,0 +1,20 @@
|
||||
.heading-links {
|
||||
color: $text-color;
|
||||
&:hover {
|
||||
color: $text-color;
|
||||
text-decoration: none;
|
||||
&::after {
|
||||
color: $grey-color;
|
||||
content: ' →';
|
||||
}
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.post-link:visited {
|
||||
color: $brown;
|
||||
}
|
||||
|
||||
24
_sass/post_content/_tags.scss
Normal file
24
_sass/post_content/_tags.scss
Normal file
@ -0,0 +1,24 @@
|
||||
.list-tags {
|
||||
color: $grey-color;
|
||||
}
|
||||
|
||||
.home-tags {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
|
||||
.post-updatedOn {
|
||||
color: $grey-color-dark;
|
||||
font-size: $small-font-size;
|
||||
margin-bottom: $base-font-size;
|
||||
span.updatedPostDate {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
color: $grey-color-dark;
|
||||
font-size: $small-font-size;
|
||||
.link-tag {
|
||||
color: $brown;
|
||||
}
|
||||
}
|
||||
48
_sass/post_content/_wrapper.scss
Normal file
48
_sass/post_content/_wrapper.scss
Normal file
@ -0,0 +1,48 @@
|
||||
.wrapper {
|
||||
main > & {
|
||||
& > :first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
> h1:not(:first-of-type){
|
||||
margin-top: $spacing-unit * 1.65;
|
||||
}
|
||||
|
||||
h2:first-of-type {
|
||||
margin-top: $spacing-unit * 1.5;
|
||||
}
|
||||
|
||||
h2:not(:first-of-type) {
|
||||
margin-top: $spacing-unit * 1.4;
|
||||
}
|
||||
|
||||
h3:not(:first-of-type) {
|
||||
margin-top: $spacing-unit * 1.15;
|
||||
}
|
||||
|
||||
> p {
|
||||
word-spacing: 1px;
|
||||
}
|
||||
|
||||
p > img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
ul.resources-link {
|
||||
list-style: none;
|
||||
margin-left: 1.9em;
|
||||
|
||||
@include media-query($on-palm) {
|
||||
margin-left: 0;
|
||||
|
||||
> li {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
_sass/post_content/index.scss
Normal file
7
_sass/post_content/index.scss
Normal file
@ -0,0 +1,7 @@
|
||||
@import
|
||||
"list_container",
|
||||
"post",
|
||||
"post_links",
|
||||
"tags",
|
||||
"wrapper"
|
||||
;
|
||||
Loading…
Reference in New Issue
Block a user