vbatts/hugo-theme-hyde-hyde
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactors SCSS styles -- see CHANGELOG

Browse source
This commit is contained in:
Huy Tran 2018-07-25 12:21:03 +10:00
parent adfeaa7e76
commit b3a71874a8
10 changed files with 195 additions and 219 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static-src/scss/hyde-hyde.scss
View file

@ -8,8 +8,10 @@
@import 'hyde-hyde/base'; @import 'hyde-hyde/base';
@import 'hyde-hyde/theme'; @import 'hyde-hyde/theme';
@import 'hyde-hyde/sidebar'; @import 'hyde-hyde/sidebar';
@import 'hyde-hyde/list';
@import 'hyde-hyde/post'; @import 'hyde-hyde/post';
@import 'hyde-hyde/code'; @import 'hyde-hyde/code';
@import 'hyde-hyde/gist'; @import 'hyde-hyde/gist';
@import 'hyde-hyde/project'; @import 'hyde-hyde/project';
@import 'hyde-hyde/customised'; @import 'hyde-hyde/responsive';
@import 'hyde-hyde/misc';

13
static-src/scss/hyde-hyde/_base.scss
View file

@ -24,6 +24,10 @@ h4 {
font-size: $h4-font-size; font-size: $h4-font-size;
} }
h5 {
font-size: $h5-font-size;
}
%quotebox { %quotebox {
padding: .8889rem; padding: .8889rem;
margin-top: 1.4em; margin-top: 1.4em;
@ -102,10 +106,7 @@ a {
} }
} }
.text-center { .content {
text-align: center; padding-bottom: 2rem;
} padding-top: 2rem;
.pull-right {
float: right;
} }

18
static-src/scss/hyde-hyde/_code.scss
View file

@ -1,7 +1,12 @@
pre { pre {
border: 1px solid $gray-1; //border: 1px solid $gray-1;
border-radius: 2px; //border-radius: 2px;
tab-size: 2; tab-size: 2;
//width: 111%;
//margin-left: -11%;
//padding-left: 9%;
//padding-right: 2%;
//background: #29292e;
code { code {
white-space: pre-wrap; white-space: pre-wrap;
} }
@ -10,11 +15,11 @@ pre {
%code-font { %code-font {
font-family: $code-font-family; font-family: $code-font-family;
font-size: $code-font-size; font-size: $code-font-size;
line-height: $code-line-height; //line-height: $code-line-height;
} }
%code-in-rounded-box { %code-in-rounded-box {
border-radius: 3px; border-radius: 4px;
padding: 2px 4px; padding: 2px 4px;
color: $code-color; color: $code-color;
background-color: $code-background-color; background-color: $code-background-color;
@ -39,6 +44,9 @@ code {
// highlight.js // highlight.js
.hljs { .hljs {
font-size: $code-fence-font-size;
font-weight: 300;
white-space: pre; white-space: pre;
border:none; border: 1px solid $gray-3;
border-radius: 4px;
} }

114
static-src/scss/hyde-hyde/_customised.scss
View file

@ -1,114 +0,0 @@
@media(min-width: 48em) {
html,body {
-webkit-text-size-adjust: 100%; // iOS
font-size: 16px;
box-direction: normal;
}
.sidebar {
bottom: 0;
left: 0;
position: fixed;
text-align: left;
top: 0;
width: 18rem;
}
.sidebar-sticky {
left: 1rem;
position: absolute;
right: 1rem;
top: 1rem;
}
.content {
margin-left: 20rem;
margin-right: 2rem;
max-width: 38rem;
}
.layout-reverse {
.sidebar {
left: auto;
right: 0;
}
.content {
margin-left: 2rem;
margin-right: 20rem;
}
}
}
@media(min-width: 58em) {
html,body {
text-size-adjust: none;
font-size: 17px;
font-weight: 400;
line-height: 1.611em; // golden ratio
}
}
.content {
padding-bottom: 2rem;
padding-top: 2rem;
}
@media(min-width: 64em) {
.content {
margin-left: 20rem;
margin-right: 2rem;
max-width: 46.056rem;
}
.layout-reverse .content {
margin-left: 4rem;
margin-right: 22rem;
}
}
@media(max-width: 48rem) {
.hidden-tablet {
display: none;
}
}
.element--center {
display: block;
margin-left: auto;
margin-right: auto;
}
.section__title {
font-size: $section__title-font-size;
}
.post-list__item {
margin-bottom: 3em;
}
.item__title--big {
display: block;
font-size: $item__title-big-font-size;
line-height: 1.25;
}
.item__title--small {
font-size: 1rem;
}
.item__date {
color: $item__date-color;
display: block;
font-size: $item__date-font-size;
margin-bottom: .2rem;
margin-top: .2rem;
}
#references {
li {
font-size: .9rem;
}
}
.menu {
background-color: #f3f3f3;
color: #333;
border-radius: 2px;
padding: 1px 5px;
}

27
static-src/scss/hyde-hyde/_list.scss Normal file
View file

@ -0,0 +1,27 @@
// for the list of posts
.section__title {
font-size: $section__title-font-size;
}
.post-list__item {
margin-bottom: 3em;
}
.item__title--big {
display: block;
font-size: $item__title-big-font-size;
line-height: 1.25;
}
.item__title--small {
font-size: 1rem;
}
.item__date {
color: $item__date-color;
display: block;
font-size: $item__date-font-size;
margin-bottom: .2rem;
margin-top: .2rem;
}

21
static-src/scss/hyde-hyde/_misc.scss Normal file
View file

@ -0,0 +1,21 @@
// some misc styles
.element--center {
display: block;
margin-left: auto;
margin-right: auto;
}
.menu {
background-color: #f3f3f3;
color: #333;
border-radius: 2px;
padding: 1px 5px;
}
.text-center {
text-align: center;
}
.pull-right {
float: right;
}

23
static-src/scss/hyde-hyde/_post.scss
View file

@ -30,7 +30,7 @@
margin: 0 auto; margin: 0 auto;
margin-top: 60px; margin-top: 60px;
a { a {
font-size: .8rem; font-size: 0.8rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -51,7 +51,7 @@
} }
} }
.fa { .fa {
font-size: .8rem; font-size: 0.8rem;
} }
.post--navigation-prev { .post--navigation-prev {
text-align: left; text-align: left;
@ -66,19 +66,12 @@
} }
} }
} }
@media only screen and(min-width: 34rem) {
.post--navigation {
display: flex;
justify-content: space-between;
a {
width: calc(50% - 10px);
&:nth-child(2) {
margin-top: 0;
}
}
}
}
.post--navigation-single a { .post--navigation-single a {
text-transform: none; text-transform: none;
} }
#references {
li {
font-size: 0.9rem;
}
}

81
static-src/scss/hyde-hyde/_project.scss
View file

@ -12,8 +12,14 @@
} }
} }
.project__image {
border: 1px solid $gray-2;
box-shadow: 1px 1px $gray-2;
}
.project__title { .project__title {
margin-top: 1.765rem; margin-top: 1.765rem;
letter-spacing: 1px;
font-size: $project__title-font-size; font-size: $project__title-font-size;
} }
@ -37,59 +43,6 @@
.project__featured-image { .project__featured-image {
position: relative; position: relative;
.ribbon {
position: absolute;
top: -9px;
right: -8px;
width: 110px;
height: 110px;
overflow: hidden;
.text {
position: relative;
left: -8px;
top: 18px;
width: 158px;
padding: 10px;
letter-spacing: 2px;
font-size: 1.133rem;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: $white;
background-color: $ribbon-background-color;
transform: rotate(45deg) translate3d(0, 0, 0);
&:before {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid $ribbon-color;
bottom: -5px;
content: "";
position: absolute;
left: 0;
}
&:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid $ribbon-color;
bottom: -5px;
content: "";
position: absolute;
right: 0;
}
}
}
}
.project-image {
&:hover {
opacity: 0.8;
}
}
@media (max-width: 767px) {
.project-image {
margin-bottom: 0.882rem;
}
} }
.project__summary { .project__summary {
@ -132,27 +85,7 @@
.col-md-8 { .col-md-8 {
@extend %col_extend; @extend %col_extend;
} }
@media (min-width: 992px) {
.col-md-4 {
float: left;
width: 33.33333333%;
}
.col-md-8 {
float: left;
width: 66.66666667%;
}
.portfolio-container {
width: 1360px;
}
}
@media (min-width: 768px) {
.col-sm-8 {
width: 66.66666667%;
}
.project__title {
margin-top: .2rem;
}
}
.img-responsive { .img-responsive {
display: block; display: block;
max-width: 100%; max-width: 100%;

103
static-src/scss/hyde-hyde/_responsive.scss Normal file
View file

@ -0,0 +1,103 @@
// mobile ~320..480px
// 320px ~ 16rem/16px ~ 18.8235/17px ~ 17.7778/18px
// 480px ~ 30rem/16px ~ 28.2353rem/17px ~ 26.6667rem/18px
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
// styles
}
// tablet/medium device ~768px+
// 768px ~ 48em/16px ~ 45.1765em/17px ~ 42.6667/18px
@media (min-width: 768px) {
html,
body {
-webkit-text-size-adjust: 100%; // iOS
font-size: 16px;
box-direction: normal;
}
.sidebar {
bottom: 0;
left: 0;
position: fixed;
text-align: left;
top: 0;
width: 18rem;
}
.sidebar-sticky {
left: 1rem;
position: absolute;
right: 1rem;
top: 1rem;
}
.content {
margin-left: 20rem;
margin-right: 2rem;
max-width: 38rem;
}
.layout-reverse {
.sidebar {
left: auto;
right: 0;
}
.content {
margin-left: 2rem;
margin-right: 20rem;
}
}
.col-sm-8 {
width: 66.66666667%;
}
.project__title {
margin-top: 0.2rem;
}
.hidden-tablet {
display: none;
}
.post--navigation {
display: flex;
justify-content: space-between;
a {
width: calc(50% - 10px);
&:nth-child(2) {
margin-top: 0;
}
}
}
}
// Large devices (laptops/desktops, 992px and up)
// ~ 62rem/16px ~ 58.3529rem/17px ~ 55.1111rem/18px
@media (min-width: 992px) {
html,
body {
text-size-adjust: none;
font-size: 17px;
font-weight: 400;
line-height: 1.611em; // golden ratio
}
.content {
margin-left: 20rem;
margin-right: 2rem;
max-width: 46.056rem;
}
.layout-reverse .content {
margin-left: 4rem;
margin-right: 22rem;
}
.col-md-4 {
float: left;
width: 33.33333333%;
}
.col-md-8 {
float: left;
width: 66.66666667%;
}
.portfolio-container {
width: 1360px;
}
}
// Large device ~1024px
// 1024px ~ 64rem/16px ~ 60.2353rem/17px 56.8889rem/18px
@media (min-width: 1024px) {
// styles
}

10
static-src/scss/hyde-hyde/_variables.scss
View file

@ -1,8 +1,9 @@
$gray-0: #fafafa; $gray-0: #fafafa;
$gray-1: #f9f9f9; $gray-1: #f9f9f9;
$gray-2: #eee; $gray-2: #eee;
$gray-3: #ddd;
$gray-4: #ccc; $gray-4: #ccc;
$gray-5: #ddd; $gray-4: #bbb;
$gray-6: #878787; $gray-6: #878787;
$gray-7: #767676; $gray-7: #767676;
$gray-8: #515151; $gray-8: #515151;
@ -32,8 +33,8 @@ $large-font-size: 20px;
// https://www.client9.com/css-system-font-stack-monospace-v2 // https://www.client9.com/css-system-font-stack-monospace-v2
$code-font-family: "SF-Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace; $code-font-family: "SF-Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace;
$code-font-size: .85rem; $code-font-size: .9rem;
$code-fence-font-size: .7rem; $code-fence-font-size: .9rem;
$code-color: #bf616a; $code-color: #bf616a;
$code-background-color: #f9f2f4; $code-background-color: #f9f2f4;
$code-line-height: 1.4; $code-line-height: 1.4;
@ -65,6 +66,7 @@ $h1-line-height: 1.25;
$h2-font-size: 1.85rem; $h2-font-size: 1.85rem;
$h3-font-size: 1.5rem; $h3-font-size: 1.5rem;
$h4-font-size:1.3rem; $h4-font-size:1.3rem;
$h5-font-size:1rem;
$sidebar-color: #300030; $sidebar-color: #300030;
@ -78,7 +80,7 @@ $post--navigation-color: #c2255c;
// portfolio // portfolio
$project__title-font-size: $h2-font-size; $project__title-font-size: $h2-font-size;
$project__subtitle-font-size-big: $h3-font-size; $project__subtitle-font-size-big: $h3-font-size;
$project__subtitle-font-size-small: ($h3-font-size - 0.5rem); $project__subtitle-font-size-small: $h4-font-size;
$project__subtitle-font-style: italic; $project__subtitle-font-style: italic;
$project__subtitle-color: #778492; $project__subtitle-color: #778492;
$ribbon-color: #276582; $ribbon-color: #276582;