Skip to content

Commit

Permalink
Add "Widget"
Browse files Browse the repository at this point in the history 
支持在页尾显示侧边栏的内容（最近评论、最新文章、时光机）了，同时还改善优化了一些小细节。
  • Loading branch information
@Dreamer-Paul
Dreamer-Paul committed Nov 18, 2017
1 parent 55c473b commit 784351a
Show file tree
Hide file tree
Showing 8 changed files with 326 additions and 128 deletions.
179 changes: 125 additions & 54 deletions css/binkic.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
# Kico Style 1.5
# By: Dreamer-Paul
# Last Update: 2017.8.27
# Last Update: 2017.9.24
一个简洁、有趣的开源响应式框架，仅包含基础样式，需按照一定规则进行二次开发。
Expand All @@ -23,18 +23,19 @@ fieldset, legend, figure{
margin: 0;
padding: 0;
}

body{
color: #353535;
font: 16px /1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

@media screen and (max-width: 500px){
body[enable-scale]{
html[resize] body{
font-size: 14px;
}
}
@media screen and (min-width: 1930px){
body[enable-scale]{
html[resize] body{
font-size: 18px;
}
}
Expand All @@ -60,31 +61,38 @@ nav, section, main{
background-color: rgba(0,0,0,0.66);
}

::-webkit-scrollbar {
/* - 滚动条 */
::-webkit-scrollbar{
width: 10px;
height: 10px
height: 10px;
}
::-webkit-scrollbar-thumb {
min-height: 28px;
background-color: rgba(0,0,0,.2);
::-webkit-scrollbar-thumb{
border-radius: 5px;
background: rgba(0,0,0,.2);
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-radius: 5px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07)
}
::-webkit-scrollbar-track:hover {
background-color: rgba(0,0,0,.05);
::-webkit-scrollbar-track:hover{
background: rgba(0,0,0,.05);
-webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1)
}

::-webkit-scrollbar-track:active {
::-webkit-scrollbar-track:active{
background-color: rgba(0,0,0,.05);
-webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.14),inset -1px -1px 0 rgba(0,0,0,.07)
}

.bk-scroll-hover::-webkit-scrollbar{
display: none;
}
.bk-scroll-hover:hover::-webkit-scrollbar{
display: inherit;
}

/* 1 - 容器
-------------------------------- */
main, footer{
body > main, body > footer{
overflow: hidden;
}

Expand Down Expand Up @@ -128,6 +136,19 @@ h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:la
margin-bottom: 0;
}

h1.heading-1{
font-size: 6em;
}
h2.heading-2{
font-size: 5.5em;
}
h3.heading-3{
font-size: 4.5em;
}
h4.heading-4{
font-size: 3.5em;
}

p{
line-height: 1.8em;
margin-bottom: 1em;
Expand All @@ -150,6 +171,9 @@ em{
background: #3498db;
}

audio{
vertical-align: middle;
}
img, svg, video{
height: auto;
max-width: 100%;
Expand Down Expand Up @@ -314,23 +338,36 @@ input[readonly]{
background: rgb(235, 235, 228);
}
input, textarea, select{
outline: 0;
outline: none;
font: inherit;
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea, select{
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="search"], textarea, select{
padding: .5em;
color: inherit;
border-radius: 4px;
border: #ccc 1px solid;
}

input[type="number"]:out-of-range{
background: rgba(255, 0, 0, .3);
}

textarea{
display: block;
overflow: auto;
max-width: 100%;
resize: vertical;
}

progress{
overflow: auto;
border-radius: 50px;
}
progress::-webkit-progress-bar {
background-color: #eee;
}


/* - 缤奇表单模组 */
.bk-form label{
display: block;
Expand Down Expand Up @@ -392,10 +429,11 @@ textarea{
width: 60px;
height: 30px;
cursor: pointer;
background: #eee;
position: relative;
border-radius: 50px;
border: 1px solid #ccc;
background: rgba(0,0,0,.05);
border: 1px solid #ddd;
transition: border .3s, background .3s;
}
.bk-form input[type="checkbox"].switch:before{
margin: 0;
Expand All @@ -405,13 +443,16 @@ textarea{
height: 28px;
display: block;
box-shadow: none;
background: #fff;
position: absolute;
border-radius: 100%;
background: rgba(0,0,0,0.2);
transition: background 0.3s, transform 0.3s;
transition: transform 0.3s;
}
.bk-form input[type="checkbox"].switch:checked:before{
.bk-form input[type="checkbox"].switch:checked{
background: #3498db;
border-color: #3498db;
}
.bk-form input[type="checkbox"].switch:checked:before{
transform: translateX(30px);
}

Expand Down Expand Up @@ -508,6 +549,16 @@ iframe{
border: none;
}

/* - 详细信息 */
details > summary{
outline: none;
cursor: pointer;
user-select: none;
}
details > summary + *{
margin-top: .5em;
}

/* - 栅格系统 */
.row{
display: flex;
Expand Down Expand Up @@ -540,6 +591,7 @@ iframe{

/* -- 网格间距 */
.row [class*="col-"]{
position: relative;
padding-left: 20px;
padding-right: 20px;
}
Expand All @@ -553,14 +605,15 @@ iframe{
}

/* -- 网格主体 */
.row [class*="col-s-"], [class*="col-m-"], [class*="col-l-"]{
.row [class*="col-s-"],
.row [class*="col-m-"],
.row [class*="col-l-"]{
flex: 0 0 100%;
max-width: 100%;
position: relative;
margin-bottom: 2em;
}
.row [class*="col-s-"]:last-child, [class*="col-m-"]:last-child, [class*="col-l-"]:last-child{
margin-bottom: 0 !important;
.row [class*="col-s-"]:last-child, .row [class*="col-m-"]:last-child, .row [class*="col-l-"]:last-child{
margin-bottom: 0;
}

@media screen and (min-width: 600px){
Expand All @@ -578,6 +631,42 @@ iframe{
margin-bottom: 0;
}
}
.offset-left-1{
left: -8.3333%;
}
.offset-left-2{
left: -16.6666%;
}
.offset-left-3{
left: -25%;
}
.offset-left-4{
left: -33.3333%;
}
.offset-left-5{
left: -41.6666%;
}
.offset-left-6{
left: -50%;
}
.offset-left-7{
left: -58.3333%;
}
.offset-left-8{
left: -66.6666%;
}
.offset-left-9{
left: -75%;
}
.offset-left-10{
left: -83.3333%;
}
.offset-left-11{
left: -91.6666%;
}
.offset-left-12{
left: -100%;
}

/* --- 固定的 */
.row .col-1{
Expand Down Expand Up @@ -888,11 +977,12 @@ iframe{

/* - 弹窗 */
.bk-notice-list{
top: 3em;
top: 5em;
left: 0;
right: 0;
z-index: 60;
position: fixed;
user-select: none;
pointer-events: none;
}
.bk-notice-list .bk-notice {
Expand All @@ -902,10 +992,10 @@ iframe{
padding: .5em 1em;
border-radius: 3em;
pointer-events: auto;
animation: fade-in-bottom 0.3s backwards;
animation: fade-large 0.3s backwards;
box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2);

max-width: 20em;
max-width: 15em;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
Expand All @@ -916,20 +1006,16 @@ iframe{

/* -- 弹窗颜色 */
.bk-notice.red{
color: #f55d5b;
background: #ffe8e0;
background: #ea644a;
}
.bk-notice.yellow{
color: #eb9c26;
background: #fcf8e3;
background: #f1a325;
}
.bk-notice.blue{
color: #3498db;
background: #d9edf7;
background: #3498db;
}
.bk-notice.green{
color: #27a17e;
background: #dff0d8;
background: #38b03f;
}

.bk-notice .close{
Expand Down Expand Up @@ -967,12 +1053,13 @@ img[bk-imgs=active]{
cursor: zoom-in;
}
.bk-imgs{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 66;
position: fixed;
user-select: none;
}
.bk-imgs:before{
top: 0;
Expand Down Expand Up @@ -1077,7 +1164,7 @@ img[bk-imgs=active]{
100%{ opacity: 1 }
}
.bk-animate.fade-off{
animation-name: fade-in;
animation-name: fade-off;
}
@keyframes fade-off {
0% { opacity: 1 }
Expand Down Expand Up @@ -1172,22 +1259,6 @@ img[bk-imgs=active]{
100%{ transform: scale(1, 1); }
}

.bk-animate.scale-small-left{
animation-name: scale-small-left;
}
@keyframes scale-small-left {
0%{ transform: scale(1.5, 1.5) translateX(15%); }
100%{ transform: scale(1, 1) translateX(0);}
}

.bk-animate.scale-small-right{
animation-name: scale-small-right;
}
@keyframes scale-small-right {
0%{ transform: scale(1.5, 1.5) translateX(15%); }
100%{ transform: scale(1, 1) translateX(0);}
}


/* ----
Expand Down
Loading

0 comments on commit 784351a

Please sign in to comment.