saul365/LoveIt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: tidy style and layout

Browse Source
This commit is contained in:
Dillon
2019-08-24 19:32:41 +08:00
parent c8bb0770e9
commit 5cc4fdbe46
98 changed files with 751 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
assets/css/_core/_base.scss
View File

@@ -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;
}
}
}
@@ -73,11 +73,3 @@ a {
}
}
}
.navbar {
background-color: $navbar-background-color;
.dark-theme & {
background-color: $navbar-background-color-dark;
}
}

21
assets/css/_core/_layout.scss
View File

@@ -1,5 +1,4 @@
/** Layout **/
/** Layout **/
.wrapper {
display: flex;
flex-direction: column;
@@ -7,24 +6,6 @@
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;
}

195
assets/css/_core/_media.scss
View File

@@ -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;
}
max-width: 80%;
.navbar-mobile {
display: none !important;
}
.post-toc {
display: none;
}
.post-toc {
display: none !important;
}
.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%;
.categories-card {
.card-item {
width: 95%;
}
}
}
.post-toc {
display: block !important;
margin-left: 800px !important;
}
.navbar-mobile {
display: none !important;
}
.post-toc-mobile {
.dynamic-to-top {
display: none !important;
}
}