Skip to content
This repository was archived by the owner on Mar 9, 2022. It is now read-only.

Commit

Permalink
feat: tidy style and layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@dillonzq
dillonzq committed Aug 24, 2019
1 parent c8bb077 commit 5cc4fdb
Show file tree
Hide file tree
Showing 98 changed files with 746 additions and 495 deletions.
12 changes: 2 additions & 10 deletions assets/css/_core/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ html {

&::-webkit-scrollbar-thumb {
height: 40px;
background-color: #eee;
background-color: #87878D;
border-radius: 16px;

&:hover {
background-color: #C2C2C2;
background-color: #A9A9B3;
}
}
}
Expand Down Expand Up @@ -73,11 +73,3 @@ a {
}
}
}

.navbar {
background-color: $navbar-background-color;

.dark-theme & {
background-color: $navbar-background-color-dark;
}
}
21 changes: 1 addition & 20 deletions assets/css/_core/_layout.scss
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,11 @@
/** Layout **/

/** Layout **/
.wrapper {
display: flex;
flex-direction: column;
min-height: 98vh;
width: 100%;
}

.navbar {
display: block !important;
position: fixed;
width: 100%;
z-index: 100;
height: 4rem;
line-height: 4rem;

.container {
width: auto;
max-width: 1200px;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
}

.main {
flex: 1 0 auto;
}
Expand Down
193 changes: 25 additions & 168 deletions assets/css/_core/_media.scss
View file
Original file line number Diff line number Diff line change
@@ -1,192 +1,49 @@
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.navbar {
display: none !important;
}

.post-toc {
display: none !important;
}

.navbar-mobile {
display: block !important;
position: fixed !important;
width: 100% !important;
z-index: 100 !important;
transition: all 0.3s ease 0s !important;

.container {
padding: 0 !important;
margin: 0 !important;
height: 4.5em !important;
line-height: 4.5em !important;
background: $global-background-color !important;

.navbar-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
font-size: 18px !important;
padding-right: 1em !important;
padding-left: 1em !important;
box-sizing: border-box !important;

.menu-toggle {
cursor: pointer !important;
line-height: 4.5em !important;

span {
display: block !important;
background: #000 !important;
width: 36px !important;
height: 2px !important;
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
border-radius: 3px !important;
-webkit-transition: .2s margin .2s, .2s transform !important;
-moz-transition: .2s margin .2s, .2s transform !important;
transition: .2s margin .2s, .2s transform !important;

.dark-theme & {
background: $global-font-color-dark !important;
}
}

span:nth-child(1) {
margin-bottom: 8px !important;
}

span:nth-child(3) {
margin-top: 8px !important;
}

&.active {
span {
-webkit-transition: .2s margin, .2s transform .2s !important;
-moz-transition: .2s margin, .2s transform .2s !important;
transition: .2s margin, .2s transform .2s !important;
}

span:nth-child(1) {
-moz-transform: rotate(45deg) translate(4px, 6px) !important;
-ms-transform: rotate(45deg) translate(4px, 6px) !important;
-webkit-transform: rotate(45deg) translate(4px, 6px) !important;
transform: rotate(45deg) translate(4px, 6px) !important;
}

span:nth-child(2) {
opacity: 0
}

span:nth-child(3) {
-moz-transform: rotate(-45deg) translate(8px, -10px) !important;
-ms-transform: rotate(-45deg) translate(8px, -10px) !important;
-webkit-transform: rotate(-45deg) translate(8px, -10px) !important;
transform: rotate(-45deg) translate(8px, -10px) !important;
}
}
}
}

.menu {
text-align: center !important;
background: $global-background-color !important;
border-top: 2px solid $global-font-color !important;
display: none !important;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1) !important;

a {
display: block !important;
line-height: 2.5em !important;
}

&.active {
display: block !important;
}

.dark-theme & {
background: $global-background-color-dark !important;
border-top: 2px solid $global-font-color-dark !important;
}
}

.dark-theme & {
background: $global-background-color-dark !important;
}
}
}

#dynamic-to-top {
display: none !important;
}

/* iPads (landscape) ----------- */
@media only screen and (max-width: 1300px) {
.post-warp {
.categories-card {
.card-item {
width: 95% !important;
}
max-width: 560px;

.post-toc {
margin-left: 580px;
}
}
}

/* iPads (portrait) ----------- */

@media only screen and (min-width: 768px) {
@media only screen and (max-width: 1080px) {
.post-warp {
max-width: 600px !important;
}

.navbar-mobile {
display: none !important;
}
max-width: 80%;

.post-toc {
display: none !important;
}
.post-toc {
display: none;
}

.post-toc-mobile {
display: block !important;
.post-toc-mobile {
display: block;
}
}
}

/* iPads (landscape) ----------- */

@media only screen and (min-width: 1080px) {
.post-warp {
max-width: 560px !important;
}

.post-toc {
display: block !important;
margin-left: 580px !important;
@media only screen and (max-width: 400px) {
.navbar {
display: none;
}

.navbar-mobile {
display: none !important;
display: block;
}

.post-toc-mobile {
display: none !important;
}
}

/* Desktops and laptops ----------- */

@media only screen and (min-width: 1300px) {
.post-warp {
max-width: 780px !important;
}
max-width: 100%;

.post-toc {
display: block !important;
margin-left: 800px !important;
}

.navbar-mobile {
display: none !important;
.categories-card {
.card-item {
width: 95%;
}
}
}

.post-toc-mobile {
.dynamic-to-top {
display: none !important;
}
}
7 changes: 0 additions & 7 deletions assets/css/_custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,3 @@
// Custom style
// ==============================
// You can override the variables in _variables.scss to customize the style

.since {
padding: 30px;
text-align:center;
font-size: 30px;
line-height: 50px;
}
48 changes: 24 additions & 24 deletions assets/css/_page/_home.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
/** Home **/
.intro {
.home-intro {
transform: translateY(25vh);
text-align: center;

.avatar {
padding: 10px;
.home-avatar {
padding: 0.6rem;

img {
width: 128px;
width: 8rem;
height: auto;
display: inline-block;
-webkit-border-radius: 100%;
Expand All @@ -23,35 +23,35 @@

&:hover {
position: relative;
-webkit-transform: translateY(-0.75em);
-moz-transform: translateY(-0.75em);
-ms-transform: translateY(-0.75em);
-o-transform: translateY(-0.75em);
transform: translateY(-0.75em);
-webkit-transform: translateY(-0.75rem);
-moz-transform: translateY(-0.75rem);
-ms-transform: translateY(-0.75rem);
-o-transform: translateY(-0.75rem);
transform: translateY(-0.75rem);
cursor: pointer;
}
}
}
}

h2.description {
font-size: 1em;
font-weight: normal;
padding: 5px;
}

.social-links {
a {
.home-description {
font-size: 1rem;
font-weight: normal;
padding: .4rem;
}

padding: 0 5px;
.home-social-links {
padding-top: .6rem;

&:hover {
a {
padding: 0 .4rem;

background-color: transparent;
&:hover {
background-color: transparent;
}
}
}

i {
font-size: 1.4em;
i {
font-size: 1.4rem;
}
}
}
9 changes: 8 additions & 1 deletion assets/css/_page/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,16 @@
.archive {
.post-title {
text-align: right;
padding-bottom: 2em;
padding-bottom: 2rem;
}

@import "_terms";
@import "_tags";
}

.single {
.post-title {
text-align: right;
padding-bottom: 2rem;
}
}
Loading

0 comments on commit 5cc4fdb

Please sign in to comment.