_sass/_page.scss in cosy-jekyll-theme-1.0.5 vs _sass/_page.scss in cosy-jekyll-theme-1.0.6
- old
+ new
@@ -18,29 +18,78 @@
.body-title {
display: block;
}
-.hentry-dark {
- background-color: $header-color;
-}
-
.entry-content {
@include font-size(16);
+ position: relative;
word-wrap: break-word;
- // Dotted line underlines for links
+ .page-info {
+ color: rgba(85, 85, 85, 0.8);
+ @include font-size(14);
+ font-weight: normal;
+ margin: -5px 2px 0;
+ position: relative;
+ time {
+ margin: 0 20px;
+ }
+ .qr-text {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA9ElEQVRYR9VXWw7DIAwbN+Yo3HjTJqUfqSI/FNaWvwpIjeOYMOac75cw1lrjuzz2xXeEUOMNdcM2APkkmRR0YgSsincwcBsAOSXVyVRGgoEc78TAYwBk1SOm2hnYBqCyhJxzVgMonl0F7QBYM6ycL2uAjWc7IdIADYBdyDqjGu93sTij0oAaqzQiVNeVdaNqyfPXA6jEhHKunrRaf2gA5bTrh6fLSBWNygxab1cB8gFWpLYRdaXkPgB2tWSIKfs2ZDUgA3BbMreM23rCvwNwU5B9wWZgGwDUw7EvICS+mLerwM15+TBh7wS2J2T7CdsJXQ1k5j7FF35r3ynsoAAAAABJRU5ErkJggg==) no-repeat;
+ background-size: 16px 16px;
+ width: 16px;
+ height: 16px;
+ display: none;
+ position: relative;
+ &::before {
+ content: '';
+ position: absolute;
+ top: -20px;
+ right: -20px;
+ bottom: -20px;
+ left: -20px;
+ }
+ &:hover {
+ .qr-code {
+ width: 128px;
+ opacity: 1;
+ @include transform(none)
+ }
+ }
+ }
+ .qr-code {
+ position: absolute;
+ opacity: 0;
+ @include transition(0.3s all ease-in-out);
+ @include transform(scale(0) perspective(60px) rotateX(50deg));
+ width: 0;
+ left:-4px;
+ top:-4px;
+ z-index: 10;
+ >img{
+ box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.5);
+ padding: 4px;
+ background-color: #fff;
+ }
+ }
+ @media #{$medium}{
+ @include font-size(16);
+ .qr-text {
+ display: inline-block;
+ }
+ }
+ }
p > a,
li > a {
border-bottom: 1px dotted lighten($link-color, 50);
&:hover {
border-bottom-style: solid;
}
}
}
///sections
-
.content-header-title {
text-align: center;
margin: 30px 0 0;
h1 {
margin: 10px 20px;
@@ -101,15 +150,10 @@
margin-left: 10px;
color: lighten($base-color, 60);
a {
color: lighten($base-color, 60);
}
- .vcard {
- &:before {
- content: "BYB";
- }
- }
.tag {
display: inline-block;
margin: 4px;
color: $white;
@include rounded(3px);
@@ -124,33 +168,22 @@
}
&:hover {
background-color: lighten($base-color, 40);
}
}
- .entry-reading-time {
- float: right;
- }
}
-header .entry-meta {
- display: none; // hide header meta on small screens
- @media #{$medium} {
- display: block;
- }
-}
-
#post,
#page {
.entry-content {
- margin: 20px 2px 20px 2px;
+ margin: 80px 2px 20px 2px;
padding: 10px 15px;
background-color: $white;
box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.1);
@include rounded(3px);
@media #{$medium} {
- margin-left: 10px;
- margin-right: 10px;
+ margin: 30px 10px;
padding: 20px 30px;
}
@media #{$large} {
max-width: 800px;
margin: 30px auto 30px auto;
@@ -192,11 +225,17 @@
.year-heading {
margin-top: 0;
}
.tag-list {
- line-height: 1.5;
+ line-height: 1.6;
+ .tag-time {
+ display: none;
+ @media #{$medium} {
+ display: inline-block;
+ }
+ }
}
// Go to the exact location of bookmarks in tags, categories
.anchor-bookmark {
display: block;
@@ -210,11 +249,11 @@
margin-right: 7px;
}
// Post Pagination Module
.pagination {
- margin: 20px 10px;
+ margin: 36px 10px 0;
text-align: center;
ul {
display: inline;
margin-left: 10px;
margin-right: 10px;
@@ -228,24 +267,25 @@
}
}
// Read More Module
.read-more {
+ display: block;
position: relative;
margin: 40px 2px 20px 2px;
padding: 40px 15px 25px;
background-color: $white;
box-shadow: 0 0 0 1px rgba($border-color, 0.1), 0 6px 12px rgba($black, 0.1);
@include rounded(3px);
@media #{$medium} {
- margin: 50px 10px 20px 10px;
+ margin: 40px 10px 30px 10px;
padding: 50px 40px 25px;
}
@media #{$large} {
max-width: 800px;
padding: 50px 80px;
- margin: 60px auto;
+ margin: 50px auto 30px;
}
text-align: center;
@include clearfix;
}
@@ -253,18 +293,18 @@
position: absolute;
top: -20px;
left: 0;
right: 0;
height: 35px;
- a {
+ .read-more-btn {
@extend .btn;
}
}
.read-more-content {
@include font-size(16);
- // Dotted line underlines for links
+ margin-bottom: 0;
p {
text-align: left;
}
p > a,
li > a {
@@ -273,11 +313,14 @@
border-bottom-style: solid;
}
}
h3 {
margin: 0;
- @include font-rem(28);
+ @include font-rem(20);
+ @media #{$medium} {
+ @include font-rem(28);
+ }
a {
color: $text-color;
}
@media #{$medium} {
@include font-rem(36);
@@ -295,49 +338,22 @@
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
-.read-more-list {
- border-top: solid 2px lighten($base-color, 80);
-}
-
-.list-item {
- width: 100%;
- text-align: left;
- h4 {
- @include font-rem(18);
- margin-bottom: 0;
- }
- span {
- display: block;
- @include font-rem(14);
- color: lighten($base-color, 50);
- }
- @media #{$medium} {
- width: 49%;
- float: left;
- &:nth-child(2) {
- text-align: right;
- }
- }
-}
-
// Post Index
// --------------------------------------------------
#post-index {
#main {
- margin: 20px 2px 20px 2px;
+ margin: 80px 2px 20px 2px;
+ overflow: hidden;
@media #{$medium} {
- margin-left: 20px;
- margin-right: 20px;
+ margin: 20px;
}
@media #{$large} {
max-width: 800px;
- margin-top: 50px;
- margin-left: auto;
- margin-right: auto;
+ margin: 30px auto 0;
}
}
article {
background-color: $white;
box-shadow: 0 0 0 0, 0 6px 12px rgba($base-color, 0.1);
@@ -353,44 +369,40 @@
}
}
}
.entry-image-index {
- margin-top: -25px;
- margin-left: -15px;
- margin-right: -15px;
- margin-bottom: 10px;
+ margin: -25px -15px 10px -15px;
position: relative;
@media #{$medium} {
- margin-top: -30px;
- margin-left: -30px;
- margin-right: -30px;
- margin-bottom: 15px;
+ margin: -30px -30px 15px -30px;
}
@media #{$large} {
- margin-top: -50px;
- margin-left: -80px;
- margin-right: -80px;
- margin-bottom: 20px;
+ margin: -50px -80px 20px -80px;
}
img {
@include border-radius(3px, 0, 0, 3px); // round image corners
}
}
// Footer
// --------------------------------------------------
.footer-wrapper {
@include clearfix;
- margin: 0 auto 20px auto;
+ margin: 14px auto 30px auto;
text-align: center;
color: lighten($text-color, 20);
+ @include font-rem(14);
+ @media #{$medium} {
+ margin: 8px auto 35px auto;
+ }
a {
color: lighten($text-color, 20);
}
}
+
// Browser Upgrade
// --------------------------------------------------
.upgrade {
padding: 10px;
text-align: center;
@@ -416,92 +428,54 @@
padding: 8px 20px;
display: inline-block;
@include font-rem(14);
background-color: $white;
color: $text-color;
- border-width: 2px !important;
- border-style: solid !important;
+ border-width: 2px ;
+ border-style: solid ;
border-color: lighten($primary, 50);
@include rounded(3px);
}
#goog-wm-sb {
@extend .btn;
}
// Header
-// --------------------------------------------------
.entry-header {
- width: 100%;
- overflow: hidden;
position: relative;
- width: 100%;
overflow: hidden;
- height: 60px;
- @media #{$medium} {
- background-color: $header-color;
- min-height: 260px;
- }
-}
-
-.header-title {
- margin-top: 0;
width: 100%;
- overflow: hidden;
- line-height: 1;
+ height: 260px;
+ background: $header-color;
display: none;
- @media #{$medium} {
- @include flexbox();
- @include align-items(center);
- @include justify-content(center);
- @include flex-direction(column);
- min-height: 200px;
+ svg {
margin-top: 60px;
}
- h2 {
- color: $white;
+ canvas {
+ position: absolute;
+ left: 0;
+ top: 0;
}
- h1 {
- font-weight: 700;
- margin-bottom: 20px;
- @include font-rem(32);
- color: $white;
- text-shadow: 1px 1px 4px rgba($base-color, 0.6);
+ @media #{$medium} {
display: block;
- a {
- color: $white;
- }
- @media #{$medium} {
- @include font-rem(26);
- }
- @media #{$large} {
- @include font-rem(36);
- }
}
- h1.post-title {
- display: block;
- @media #{$medium}{
- display: none;
- }
- }
- p {
- color: $white;
- }
}
.header-menu {
position: absolute;
top: 0;
left: 0;
width: 100%;
- height: $menu-height;
z-index: 20;
+ overflow: hidden;
+ background-color: $menu-top;
+ height: $menu-height;
+ box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.1);
@media #{$medium} {
position: fixed;
- &.header-menu-top{
- box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
- }
+ @include transition(0.3s height ease-out);
}
ul {
margin: 0 auto;
list-style-type: none;
height: 100%;
@@ -510,50 +484,37 @@
max-width: 900px;
}
}
}
-.header-menu-top {
- background-color: $menu-top;
- box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.1);
-}
-
.header-menu-overflow {
- background-color: $menu-overflow;
- z-index: 100;
- box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
- display: none;
+ @media #{$medium} {
+ height: 0;
+ }
}
-.header-menu-overflow ul li a {
- color: $white;
-}
-
-.header-menu-top .sub-item {
- background-color: $menu-top;
-}
-
-.header-menu-overflow .sub-item {
- background-color: $menu-overflow;
-}
-
.header-item,
.header-item-title {
float: right;
padding-left: 20px;
padding-right: 20px;
- border-top-color: transparent;
- border-top-style: solid;
- border-top-width: 5px;
- box-sizing: border-box;
-
a {
vertical-align: middle;
display: table-cell;
- height: $menu-height - 2;
- font-size: 12px;
+ height: $menu-height;
+ @include font-rem(16);
+ box-sizing: border-box;
+ font-weight: 600;
+ &:visited {
+ color: $text-color;
+ }
}
+ &.active, &:hover {
+ a {
+ color: $header-active;
+ }
+ }
}
///sections
.logo {
width: $menu-height;
@@ -579,95 +540,92 @@
height: 100%;
a.title {
font-size: 1.5rem;
padding-left: 5px;
vertical-align: middle;
- height: $menu-height - 2;
+ height: $menu-height;
@media #{$medium}{
display: table-cell;
}
}
}
-.header-item.active,
-.header-item:hover {
- border-top-color: $header-margin;
-}
-
-.header-item:hover .header-submenu {
+.header-href {
display: block;
- position: absolute;
}
-.header-submenu {
- display: none;
- border-top: 2px solid $header-margin;
- width: 200px;
- z-index: 100;
- list-style-type: none;
- transform: translateX(-25%);
+.index-content-time {
+ margin-left: -6px;
}
-.sub-item {
+.video-container {
position: relative;
- padding-left: 10px;
- width: 100%;
- border-bottom: 1px solid gray;
- border-left: 1px solid;
- height: 50px;
- text-decoration: none;
+ padding-bottom: 75%;
+ padding-top: 30px;
+ height: 0;
+ overflow: hidden;
+ iframe,
+ object,
+ embed,
+ video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
}
-.sub-item a {
- vertical-align: middle;
- display: table-cell;
- height: 50px;
-}
-
-.sub-item:hover {
- border-bottom-color: $header-margin;
- border-left-color: $header-margin;
-}
-
-.button-twitter {
- color: $white;
- position: fixed;
- margin-top: $menu-height / 2 - 20;
- margin-right: 10px;
- top: 0;
- right: 0;
- z-index: 10000000000;
- @media #{$large}{
- top: auto;
- bottom: 0;
+.coffee{
+ width: 100%;
+ @include flexbox();
+ @include flex-direction(column);
+ @include align-items(center);
+ margin:20px 0 15px;
+ @media #{$medium} {
+ margin: 40px 0 -20px;
}
-
- span {
- display: none;
- @media #{$medium}{
- display: inline;
+ .buy-me-coffee{
+ @extend .btn;
+ margin: 0 auto;
+ position: relative;
+ height: 36px;
+ width: 174px;
+ padding-left: 38px;
+ font-size: 16px;
+ line-height: 18px;
+ text-align: center;
+ @include text-overflow(clip);
+ cursor: pointer;
+ @include user-select(none);
+ &:hover{
+ background-color: #222;
+ color: #fff;
}
- }
-}
-
-footer {
- font-size: 13px;
-}
-
-.entry-content{
- position: relative;
- .page-info{
- color: rgba(85,85,85,0.8);
- font-size: 14px;
- font-weight: normal;
- margin: -15px 2px 0;
- time{
- margin-left: 20px;
+ &.active{
+ background-color: #fff;
+ color: #222;
}
- @media #{$medium}{
- font-size: 16px;
+ &::after{
+ content: "";
+ position: absolute;
+ top: 12px;
+ left: 10px;
+ width: 20px;
+ height: 13px;
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjE4MS45ODgybW0iICAgaGVpZ2h0PSIxMTUuOTU2MjltbSIgICB2aWV3Qm94PSIwIDAgNjQ0Ljg0MDEgNDEwLjg2ODc1IiAgIGlkPSJzdmc0MjM4IiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJjdXBsb2dvLnN2ZyI+ICA8ZGVmcyAgICAgaWQ9ImRlZnM0MjQwIiAvPiAgPHNvZGlwb2RpOm5hbWVkdmlldyAgICAgaWQ9ImJhc2UiICAgICBwYWdlY29sb3I9IiNmZmZmZmYiICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIgICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOnpvb209IjAuMzUiICAgICBpbmtzY2FwZTpjeD0iNzgwLjI3NzE4IiAgICAgaW5rc2NhcGU6Y3k9Ii0yMTQuNTY1NjEiICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiICAgICBzaG93Z3JpZD0iZmFsc2UiICAgICBmaXQtbWFyZ2luLXRvcD0iMCIgICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIgICAgIGZpdC1tYXJnaW4tcmlnaHQ9IjAiICAgICBmaXQtbWFyZ2luLWJvdHRvbT0iMCIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4MCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjY5OSIgICAgIGlua3NjYXBlOndpbmRvdy14PSIwIiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjEiICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIiAvPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjQzIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGcgICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIgICAgIGlkPSJsYXllcjEiICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzcuNTc5OTY0LC0xMzUuNDk5MjcpIj4gICAgPGcgICAgICAgaWQ9Imc0MCIgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4xNDIxNTI4LDAsMCwtMS4xNDIxNTI4LDI2NS45MzM5OCw0NjAuNzMwOTUpIj4gICAgICA8ZyAgICAgICAgIGlkPSJnNDE4NCI+ICAgICAgICA8cGF0aCAgICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgICAgICAgICAgIGlkPSJwYXRoMzgiICAgICAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIiAgICAgICAgICAgZD0ibSAwLDAgYyAtMTkuOTQ2LC0yLjQ5MiAtMzYuMTUxLC0wLjYyMiAtMzYuMTUxLC0wLjYyMiBsIDAsMTIyLjEzMiAzOC4wMiwwIGMgMCwwIDQyLjM4NSwtMTEuODM5IDQyLjM4NSwtNTYuNzA0IEMgNDQuMjU0LDIzLjY4IDIzLjA2Myw3LjQ3OCAwLDAgTSAxMDUuMDYzLDg1LjczOSBDIDg4LjQzNSwxNzMuNTYgMC42MjQsMTg0LjQ3MyAwLjYyNCwxODQuNDczIGwgLTM5My4zMzMsMCBjIC0xMi45OSwwIC0xNC41ODgsLTE3LjE0OCAtMTQuNTg4LC0xNy4xNDggMCwwIC0xLjc1MiwtMTU3LjQzIC0wLjQ4MSwtMjU0LjExMiAzLjUyNCwtNTIuMDkzIDU1LjU5NywtNTcuNDM1IDU1LjU5NywtNTcuNDM1IDAsMCAxNzcuNzAxLDAuNTIgMjU3LjIsMS4wMzkgNTIuNDEsOS4xODEgNTcuNjc0LDU1LjE1NSA1Ny4xNTUsODAuMyA5My41MjcsLTUuMTk2IDE1OS41MTUsNjAuOCAxNDIuODg5LDE0OC42MjIiICAgICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjA5NDQyNDUsMCwwLDEuMDk0NDI0NSwyNDYuODU1MzYsODIuODYxNDQ2KSIgLz4gICAgICAgIDxwYXRoICAgICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAgICAgICAgICAgaWQ9InBhdGg0MiIgICAgICAgICAgIHN0eWxlPSJmaWxsOiNmZjVmNWY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiICAgICAgICAgICBkPSJtIDAsMCBjIDQuNDQ1LC0yLjIzOCA3LjI4NSwwLjU0MyA3LjI4NSwwLjU0MyAwLDAgNjUuMDQ1LDU5LjM2NyA5NC4zNDgsOTMuNTU3IDI2LjA2MywzMC41ODYgMjcuNzYyLDgyLjEyOSAtMTYuOTk3LDEwMS4zODggLTQ0Ljc1OCwxOS4yNTggLTgxLjU4NCwtMjIuNjU3IC04MS41ODQsLTIyLjY1NyAtMzEuOTM1LDM1LjEyMyAtODAuMjY4LDMzLjM0NSAtMTAyLjYyMyw5LjU3NSAtMjIuMzU0LC0yMy43NyAtMTQuNTQ4LC02NC41NjggMi4xMjksLTg3LjI3NCAxNS42NTUsLTIxLjMxNCA4NC40NjUsLTgyLjY0NCA5NC44OTQsLTkzLjAxNiAwLDAgMC43NiwtMC43OTUgMi41NDgsLTIuMTE2IiAvPiAgICAgIDwvZz4gICAgPC9nPiAgPC9nPjwvc3ZnPg==);
+ background-size: 20px 13px;
}
}
-}
-.header-href{
- display: block;
+ .my-pay-img{
+ width: 360px;
+ display: block;
+ overflow: hidden;
+ height: 0;
+ @include transition(0.5s all ease-in-out);
+ @include transform(scale(0) perspective(360px) rotateX(60deg));
+ &.active{
+ height: 489px;
+ @include transform(none);
+ }
+ }
}