makyo/makyo.ink
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Default dark mode

Browse Source
This commit is contained in:
Madison Scott-Clary
2019-06-08 00:39:10 -07:00
parent f65c6f7033
commit 29be060697
12 changed files with 118 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/css/parts/_about.scss
View File

@ -22,7 +22,7 @@
display: block;
height: 1px;
width: 80px;
background-color: $dark-purple;
background-color: $light-purple;
}
.author-image-container {
width: 100px;
@ -32,7 +32,7 @@
margin: 0 auto 30px;
}
.subtitle {
color: $dark-purple;
color: $light-purple;
font-weight: 300;
margin: 0;
}
@ -52,13 +52,13 @@
}
a {
display: block;
color: $light-gray;
color: $dark-gray;
font-size: 21px;
text-decoration: none;
padding: 5px;
transition: all 350ms cubic-bezier(0.13, 0.43, 0.54, 1.82);
&:hover {
color: $dark-pink;
color: $light-pink;
transform: scale(1.3);
}
}

4
assets/css/parts/_author-box.scss
View File

@ -4,7 +4,7 @@
align-items: center;
margin-top: 30px;
padding-bottom: 30px;
border-bottom: 1px solid $lighten-gray;
border-bottom: 1px solid $dark-gray;
.author-img {
width: 120px;
height: 120px;
@ -31,7 +31,7 @@
}
a {
font-size: 18px;
color: $dark-gray;
color: $light-gray;
&:hover {
opacity: .8;
}

4
assets/css/parts/_footer.scss
View File

@ -1,10 +1,10 @@
.main-footer {
padding: 15px 0;
background-color: #efefef;
background-color: #black;
.copyright {
text-align: center;
color: $dark-purple;
color: $light-purple;
font-size: 16px;
}
}

18
assets/css/parts/_header.scss
View File

@ -1,7 +1,7 @@
.main-header {
font-family: 'Lato', sans-serif;
padding: 15px 0;
background-color: $white;
background-color: $darken-gray;
box-shadow: 0px -5px 15px rgba(0,0,0,.3);
.header-flex {
@ -17,7 +17,7 @@
text-transform: uppercase;
font-size: 27px;
font-weight: 300;
color: $dark-purple;
color: $light-purple;
}
}
}
@ -29,18 +29,18 @@
z-index: 10;
width: 300px;
height: 100%;
background-color: $white;
background-color: $darken-gray;
padding: 25px 30px;
transform: translate3d(-300px, 0, 0);
ul {
background-color: $white;
background-color: $darken-gray;
padding: 15px 0 0;
margin: 0 -30px 0 -30px;
list-style: none;
li {
border-bottom: 1px solid $lighten-gray;
background-color: $white;
border-bottom: 1px solid $black;
background-color: $darken-gray;
a {
display: block;
margin: 0 30px;
@ -49,10 +49,10 @@
text-transform: uppercase;
font-weight: 400;
font-size: 16px;
color: $dark-purple;
color: $light-purple;
&:hover {
opacity: .8;
color: $dark-pink;
color: $light-pink;
}
}
}
@ -75,7 +75,7 @@
.search-icon-close {
cursor: pointer;
font-size: 18px;
color: $dark-purple;
color: $light-purple;
transition: all .4s;
&:hover {
opacity: .8;

4
assets/css/parts/_pagination.scss
View File

@ -4,12 +4,12 @@ ul.pagination {
padding: 0px;
margin: 1rem 0 1rem calc(-2rem + 10px) !important;
text-align: center;
}
ul.pagination li {
display: inline-block;
border: 1px solid $light-gray;
border: 1px solid $dark-gray;
min-width: 2rem;
text-align: center;
margin-right: -5px;

33
assets/css/parts/_post-page.scss
View File

@ -5,7 +5,7 @@
padding: 0;
margin: 0;
height: 500px;
background-color: $white;
background-color: $darken-gray;
overflow: hidden;
.cover-image {
@ -20,17 +20,18 @@
line-height: 1.75;
margin-top: -5px;
margin-bottom: 100px;
background-color: $white;
background-color: $darken-gray;
padding: 20px 50px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.1);
.verse {
white-space: pre-wrap;
}
.invert & {
background-color: $darken-gray;
color: $white;
background-color: $white;
color: $black;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
}
.with-image & {
@ -91,10 +92,10 @@
font-size: 36px;
text-align: center;
margin: 0 0 20px;
color: $dark-purple;
color: $light-purple;
.invert & {
color: $light-purple;
color: $dark-purple;
}
}
.page-meta {
@ -113,18 +114,18 @@
margin-top: 30px;
padding-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid $lighten-gray;
border-bottom: 1px solid $dark-gray;
.page-tag,
.page-share {
text-transform: uppercase;
font-size: 12px;
color: $dark-purple;
color: $light-purple;
}
.page-tag {
margin-bottom: 10px;
a {
text-decoration: none;
color: $dark-pink;
color: $light-pink;
&:hover {
opacity: .8;
}
@ -135,7 +136,7 @@
text-align: center;
a {
text-decoration: none;
color: $light-gray;
color: $dark-gray;
margin-left: 10px;
font-size: 18px;
&:hover {
@ -152,7 +153,7 @@
.recent-title {
font-family: 'Lato', sans-serif;
font-weight: 400;
color: $dark-purple;
color: $light-purple;
text-align: center;
margin: 0 0 30px;
}
@ -170,7 +171,7 @@
font-size: 12px;
left: 2.5%;
bottom: 10%;
color: $white;
color: $black;
}
&:hover {
opacity: 0.8;
@ -230,8 +231,8 @@
height: 40px;
font-size: 14px;
text-align: center;
color: $white;
background-color: $dark-purple;
color: $black;
background-color: $light-purple;
vertical-align: baseline;
cursor: pointer;
border: none;
@ -239,7 +240,7 @@
outline: none;
transition: all .3s;
&:hover {
background-color: $dark-pink;
background-color: $light-pink;
}
}
}

16
assets/css/parts/_tags.scss
View File

@ -2,17 +2,17 @@
margin: 100px 0 100px;
.invert & {
h1 {
color: $light-purple;
color: $dark-purple;
}
.tags li a {
color: $light-purple;
color: $dark-purple;
}
.tag-list {
span a {
color: $light-pink;
color: $dark-pink;
}
small {
color: $light-purple;
color: $dark-purple;
}
}
}
@ -23,7 +23,7 @@
font-size: 36px;
text-align: center;
margin: 0 0 30px;
color: $dark-purple;
color: $light-purple;
}
.tags {
margin: 0;
@ -32,7 +32,7 @@
li {
a {
display: inline-block;
color: $dark-purple;
color: $light-purple;
&:hover {
opacity: .8;
}
@ -43,7 +43,7 @@
span {
a {
display: inline-block;
color: $dark-pink;
color: $light-pink;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
@ -55,7 +55,7 @@
}
}
small {
color: $dark-purple;
color: $light-purple;
}
}
}