Customizr x Squircle theme


[mathjax]
如果大家有留意 iOS 7 Home screen 入面嘅 icon, 就會發現佢並唔係普通有圓角嘅正方形, 而係一個 Squircle,cocoanetics 更加搵出 Squircle 唧參數為:

$$left|frac{x}{60}right|^5 + left|frac{y}{60}right|^5 = 1$$

咁啱我個網站想轉個 theme 做 customizr, 於是乎試下將兩者合二為一。做法好簡單,就係喺 css disable 佢個圓形 thumbnail 效果, 同時加個 mask box image:

.round-div {
    left:0px;
    top:0px;
    border: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -webkit-mask-box-image: url(/wp-content/uploads/2013/06/ios72.png);
    -webkit-mask-size:100% 100%;
    background: #fafafa;
    width:100%;
    height:100%;
}

注意: 暫時唔支援 Internet Explorer 及 Firefox

mask box image 就喺依個:
ios72

不過d icon 會喺某 d resolution 時變長方形, 解決方法如下:

.thumb-wrapper {
height: 250px;
width: 269px;
}
.thumb-wrapper img {
height: 250px;
max-width: 269px;
}

解決 banner 太多空位嘅問題:

@media (max-width: 480px) {
.carousel-control {
top:20%;
}
.carousel .item {
line-height:normal;
min-height:110px;
}
}
@media (max-width: 767px) and (min-width: 480px) {
.carousel .item {
line-height:normal;
min-height:180px;
}
}
@media (max-width: 979px) and (min-width:767px) {
.span4 {
width:269px;
}
.carousel .item {
line-height:normal;
min-height:240px;
}
}
@media (max-width: 1200px) and (min-width:979px) {
.carousel .item {
line-height:normal;
min-height:256px;
}
}
@media (min-width: 1200px) {
.carousel .item {
line-height:normal;
min-height:400px;
}
}

其他個人喜好嘅改動,

li.recentcomments {
text-align:left;
}

注意: 暫時唔支援 Internet Explorer 及 Firefox, Customizr verion 2.1.8

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>