{{.Title}}
- {{.Title}}
{{.Description}}{{.WordCount}} +
+ {{.Title}}
{{.WordCount}} words +
diff --git a/assets/scss/colors.scss b/assets/scss/colors.scss
index 036d366..e7d461b 100644
--- a/assets/scss/colors.scss
+++ b/assets/scss/colors.scss
@@ -1,20 +1,21 @@
-$light-bg: #dde4ff ;
-$light-bg-alt: #733c7c ;
+$light-bg: #dde4ff;
+$light-bg-alt: #733c7c;
$light-fg: #4b3d44;
-$light-ln: #733c7c ;
-$light-accent1: #007582 ;
-$light-accent2: #225091 ;
-$light-accent3: #27234c ;
+$light-ln: #733c7c;
+$light-accent1: #007582;
+$light-accent2: #225091;
+$light-accent3: #27234c;
-$dark-bg: #27234c ;
-$dark-bg-alt: #f2504b ;
-$dark-fg: #e88dc3 ;
-$dark-ln: #f2504b ;
+$dark-bg: #27234c;
+$dark-bg-alt: #f2504b;
+$dark-fg: #e88dc3;
+$dark-ln: #f2504b;
$dark-accent1: #b296ff;
-$dark-accent2: #39b8a3 ;
-$dark-accent3: #dde4ff ;
+$dark-accent2: #39b8a3;
+$dark-accent3: #dde4ff;
-$transition-time: 1s;
+$transition-time: 2s;
+$trans-short: 0.2s;
body {
&.light {
@@ -46,7 +47,7 @@ a.footer-nav-item:hover {
color: $dark-bg-alt;
background-color: $dark-bg;
border-color: $dark-bg;
- transition: 0.24s;
+ transition: $trans-short;
}
footer {
@@ -113,62 +114,117 @@ article {
transition: $transition-time;
}
-article h2 {
+h2,
+h2 a {
background-color: $dark-accent1;
color: $dark-bg;
transition: $transition-time;
+ & a{
+ background-color: transparent;
+ }
}
-article h3 {
+h3,
+h3 a {
background-color: $dark-accent2;
color: $dark-bg;
transition: $transition-time;
+ & a{
+ background-color: transparent;
+ }
}
-article.light h3 {
+h3.light {
background-color: $light-accent2;
color: $light-bg;
transition: $transition-time;
+ &a {
+ color: $light-bg;
+ }
}
-article h5,
-article h6,
-article h4 {
+h5,
+h6,
+h4 {
background-color: $dark-accent3;
color: $dark-bg;
transition: $transition-time;
+ & a {
+ color: $dark-bg;
+ background-color: transparent;
+ }
}
-article.light h5,
-article.light h6,
-article.light h4 {
+h4.light,
+h5.light,
+h6.light{
background-color: $light-accent3;
color: $light-bg;
transition: $transition-time;
}
-article.light h2 {
+h2.light {
background-color: $light-accent1;
color: $light-bg;
transition: $transition-time;
}
-
article.light a {
- background-color: $light-ln;
- color: $light-bg;
+ background-color: transparent;
+ color: $light-ln;
transition: $transition-time;
+ &.hash-link{
+ color: $light-bg;
+ }
+ &.hash-link:hover{
+ background-color: transparent;
+ color: $light-bg;
+ }
}
a:hover {
- &.light {
- color: $light-bg;
- background-color: $light-ln;
- }
color: $dark-bg;
background-color: $dark-ln;
+ transition: $trans-short;
}
+.previous.light:hover,
+.next.light:hover,
+.postdescription a.light:hover,
article.light a:hover {
- color: $light-ln;
- background-color: transparent;
+ color: $light-bg;
+ background-color: $light-ln;
+ transition: $trans-short;
+}
+
+.light.hash-link:hover,
+.hash-link:hover {
+ background-color: transparent;
+ transition: $transition-time;
+}
+
+h1, h2, h3, h4, h5, h6{
+ &a{
+ background-color: transparent;
+ color: $light-bg;
+ &:hover{
+ background-color: transparent;
+ }
+ }
+}
+
+header.light{
+ background-color: $light-bg;
+ transition: $transition-time;
+}
+
+header{
+ transition: $transition-time;
+}
+
+.posttitle a{
+ background-color: transparent;
+ color: $dark-bg;
+ &:hover{
+ background-color: transparent;
+ }
}
diff --git a/assets/scss/font.scss b/assets/scss/font.scss
index e698513..2a2c0ce 100644
--- a/assets/scss/font.scss
+++ b/assets/scss/font.scss
@@ -19,20 +19,20 @@ $small: 12pt;
font-size: $small;
}
-h1 {
+h1{
font-size: $huge;
}
-h2 {
+h2 a{
font-size: $huge;
font-style:bold;
}
-h3, h4 {
+h3 a, h4 a {
font-size: $large;
}
-h5 h6 {
+h5 a, h6 a {
font-size: $big;
}
@@ -53,3 +53,7 @@ label::after {
h6 {
font-style: italic;
}
+
+::before{
+ font-family: CaskaydiaCoveMono;
+}
diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index ae68cd6..617e828 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -24,7 +24,8 @@ footer {
#content p,
#content ul,
#content ol,
-#content table
+#content table,
+.postdescription
{
margin-right: 24%;
margin-left: 24%;
@@ -94,12 +95,18 @@ h6 {
padding-right: 6%;
padding-top: 12pt;
padding-bottom: 12pt;
- margin-right: 6%;
justify-content: right;
display: flex;
align-items: center;
}
+h1 {margin-right: 6%;}
+h2 {margin-right: 12%;}
+h3 {margin-right: 18%;}
+h4 {margin-right: 24%;}
+h5 {margin-right: 32%;}
+h6 {margin-right: 38%;}
+
h2,
h3,
h4,
@@ -113,7 +120,8 @@ article {
margin-inline: auto;
}
-.titlecontainer {
+.titlecontainer,
+header{
width: 100%;
padding-top: 42pt;
}
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 37d4b5e..5ffc808 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -3,80 +3,92 @@ $toggle-width: 42pt;
$toggle-height: 24pt;
* {
- border-width: 2pt;
- }
-
-
-input[type="checkbox"]{
- cursor: pointer;
-}
-.toggleinput{
- opacity: 10;
- max-height: 10;
- overflow: hidden;
+ border-width: 2pt;
}
-.togglelabel{
- width: $toggle-width;
- height: 24pt;
- border-radius: $radius;
- cursor: pointer;
- align-items: center;
- display: flex;
+input[type="checkbox"] {
+ cursor: pointer;
+}
+.toggleinput {
+ opacity: 0;
+ max-height: 0;
+ max-width: 0;
+ overflow: hidden;
}
-.togglelabel::after{
- left: calc(100% - 67pt);
- content: "";
- position: absolute;
- height: 20pt;
- width: 20pt;
- border-width: 1pt;
- border-radius: 100pt;
- transition: 0.3s;
- display: inline-block;
- vertical-align: middle;
- text-align: center;
- display: flex;
- align-items: center;
- justify-content: center;
- content: "";
- border-style: solid;
-
+.togglelabel {
+ width: $toggle-width;
+ height: 24pt;
+ border-radius: $radius;
+ cursor: pointer;
+ align-items: center;
+ display: flex;
}
-input:checked + label:after{
- left: calc(100% - 49pt);
+.togglelabel::after {
+ left: calc(100% - 67pt);
+ content: "";
+ position: absolute;
+ height: 20pt;
+ width: 20pt;
+ border-width: 1pt;
+ border-radius: 100pt;
+ transition: 1s;
+ display: inline-block;
+ vertical-align: middle;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ content: "";
+ border-style: solid;
}
-
-input:checked + label::after{
- content: "滛";
+input:checked + label:after {
+ left: calc(100% - 49pt);
}
-.footer-nav-item{
- border-radius: 100%;
- height: 1em;
- width: 1em;
- justify-content: center;
- align-items: center;
- border-style: solid;
+input:checked + label::after {
+ content: "滛";
}
-.togglelabel{
- border: solid;
+.footer-nav-item {
+ border-radius: 100%;
+ height: 1em;
+ width: 1em;
+ justify-content: center;
+ align-items: center;
+ border-style: solid;
}
-h1, h2, h3, h4, h5, h6 {
- border-top-right-radius: $radius;
- border-bottom-right-radius: $radius;
+.togglelabel {
+ border: solid;
}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ border-top-right-radius: $radius;
+ border-bottom-right-radius: $radius;
+ & .hash-link {
+ &:hover {
+ cursor: pointer;
+ &::before {
+ content: "";
+ }
+ }
+ }
+}
+
+.postdescription,
#content p,
#content ul,
#content ol,
#content table {
- border-left-style: solid;
- border-width: 0.24em;
- padding-left: 2em;
+ border-left-style: solid;
+ border-width: 0.24em;
+ padding-left: 2em;
}
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
new file mode 100644
index 0000000..ee60227
--- /dev/null
+++ b/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,5 @@
+