Permalink
Browse files

feat: rem layout/font-size 字号调节/页面缩放

  • Loading branch information...
MOxFIVE committed Apr 13, 2016
1 parent 21bc9a8 commit 53a83a13cb0145456928d86c0b144e3c1d228e04
View
@@ -96,6 +96,9 @@ youyan:
## "0": white-gray background | 淳朴灰白背景
background_image: 5
# Base Font Size | 字号调节
base_font_size: 16 #px, 16 - 24
## General Color Scheme | 主题配色方案
## 可用值 Value: yilia
color_scheme:
@@ -80,7 +80,7 @@
<%if(theme.tagcloud){%>
<section class="switch-part switch-part2">
<div class="widget tagcloud" id="js-tagcloud">
<%- tagcloud() %>
<%- list_tags({show_count: false}) %>
</div>
</section>
<%}%>
View
@@ -57,7 +57,7 @@
margin: 0 1em .5em 0;
padding: 4px;
border: 1px solid lightgray;
font-size: 1.2em;
font-size: 1.2rem;
}
.category-list a {
color: gray;
@@ -68,7 +68,7 @@
}
.category-list-count {
margin-left: 2px;
font-size: .9em;
font-size: .9rem;
}
.article-entry ul li:before{
display: none;
@@ -45,7 +45,7 @@
}
.archive-article-title {
font-size: 18px;
font-size: (18/16)rem;
color: #333;
transition: color 0.3s;
&:hover{
@@ -99,7 +99,7 @@
}
.archive-article-date{
cursor: default;
font-size: 14px;
font-size: (14/16)rem;
margin-bottom: 5px;
margin-top: -10px;
time{
@@ -108,7 +108,7 @@
color: #999;
position: relative;
margin-right: 10px;
font: 16px FontAwesome;
font: base-font-size FontAwesome;
}
}
}
@@ -101,9 +101,8 @@
color: #696969;
margin-left: 0px;
font-weight: 300;
line-height: 35px;
line-height: 1.3;
margin-bottom: 20px;
font-size: 26px;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
@@ -145,18 +144,18 @@
@require "customise/blockquote"
line-height: 1.65em;
padding:0 2em;
font-size 1rem
a:hover {
text-decoration: underline;
color: #9c9;
}
p{
margin: .85em auto;
line-height: 1.7em;
font-size: 1em;
line-height: 1.7;
}
li{
margin: 0.1em
font-size: 1.1em;
font-size: 1rem;
}
em {
font-style: italic;
@@ -302,8 +301,8 @@
position: absolute;
right: 0;
top: 23px;
width: 150px;
font-size: 14;
width: 8rem;
font-size: (14/16)rem;
text-align: center;
z-index: 1;
time {
@@ -328,8 +327,9 @@
border-radius: 2px;
background: #88acdb;
color: #fff;
font-size: .9em;
font-size: .9rem;
line-height: 1em;
white-space: nowrap;
transition: background 0.3s;
opacity: i-opacity;
&:hover {
@@ -350,6 +350,7 @@
width: 100%;
height: 2.5em;
margin: 1em auto;
font-size 1rem
background: rgba(158, 188, 226, i-opacity);
&:hover {
background: #93b5e0;
@@ -442,13 +443,13 @@ li:hover {
bottom: 1em;
left: 0;
margin-left: 0em;
padding: 6px 10px 10px 50px;
padding: 6px 10px 10px 50 - (base-font-size - 16)*2;
border-radius: 2.8%;
overflow: auto;
}
#toc {
float: right;
font-size: .9em;
font-size: .9rem;
line-height: 1.65em;
a {
color: gray;
@@ -495,7 +496,7 @@ li:hover {
margin: 1.2em auto 0;
padding: .5em 1.8em;
border: 1px solid lightgray;
font-size: .93em;
font-size: .93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255, 255, 255, .4);
@@ -517,6 +518,7 @@ li:hover {
}
.copy-path {
margin-left: 1em;
width 1em
&:hover {
color: gray;
cursor: pointer;
@@ -4,16 +4,16 @@
font-family Arial
li
display inline-block
width 37px
width base-font-size + 21
border-radius 50%
margin 0 2px 6px
font 23px FontAwesome
font base-font-size + 7 FontAwesome
background #6f7170
opacity i-opacity
text-align center
box-shadow 1px 2px 2px rgba(0,0,0, .1), 1px 1px 3px rgba(0,0,0, .3)
a
line-height 37px
line-height @width
color white
&:hover
opacity 1
@@ -9,11 +9,11 @@ $code-block
border-width: 1px
overflow: auto
color: highlight-foreground
line-height: font-size * line-height
line-height: 1.3rem
$line-numbers
color: lightgray
font-size: .85em
font-size: .85rem
.article-entry
pre, code
@@ -57,7 +57,7 @@ $line-numbers
text-align: right
padding-right: 1em
.line
height: font-size * line-height
line-height 1.3rem
.gist
margin: 0 article-padding * -1
border-style: solid
@@ -79,7 +79,7 @@
text-align: center;
margin: 13px 0;
font-family: Roboto, "Roboto", serif;
font-size: 30px;
font-size: base-font-size + 14;
transition: 0.3s;
}
#header{
@@ -95,8 +95,8 @@
display: block;
border: 5px solid #fff;
border-radius: 50%;
width: 128px;
height: 128px;
width: 128 + base-font-size - 16;
height: @width;
margin: 0 auto;
position: relative;
overflow: hidden;
@@ -135,24 +135,24 @@
.header-subtitle{
text-align: center;
color:#999;
font-size: 14px;
line-height: 25px;
font-size: (14/16)rem;
line-height: 1.75;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.header-menu{
menu-line-height = 28px
menu-line-height = (28/16)rem
font-weight: 550;
line-height: menu-line-height;
font-family: inherit;
cursor: pointer;
text-transform: uppercase;
float: none;
min-height: menu-line-height * 3px;
max-height: menu-line-height * 5px;
min-height: @line-height * 3;
max-height: @line-height * 5;
overflow: auto;
text-align: center;
display: -webkit-box;
@@ -162,7 +162,7 @@
li{
cursor: default;
a{
font-size: 14px;
font-size: (14/16)rem;
min-width: left-col-width;
}
}
@@ -172,7 +172,7 @@
width: 100%;
overflow: hidden;
min-height: 260px;
font-size: 14px;
font-size: (14/16)rem;
.switch-wrap{
transition: transform .3s ease-in;
position: relative;
@@ -198,6 +198,7 @@
top: 20px;
overflow-y: auto;
max-height: 260px;
font-size (12/16)rem
}
.switch-part3{
left: 200%;
@@ -341,8 +342,20 @@
}
if hexo-config("github_widget")
.article-entry .github-widget h3::after
content none
.article-entry .github-widget
h3::after
content none
.github-box
font-size (13/16)rem
.github-box-title
h3
font-size 1rem
.github-stats
font-size (11/16)rem
.updated
font-size (11/16)rem
.download
font-size (12/16)rem
if hexo-config("jquery_ui")
.ui-tooltip
@@ -31,7 +31,8 @@
li{
padding: 4px 0;
cursor: pointer;
font-size: 13px;
font-size: (13/16)rem;
line-height 1.15
color: #ddd;
&:hover{
background: #111;
@@ -230,10 +231,10 @@
display:inline-block;
text-decoration:none;
font-weight: normal;
font-size:10px;
font-size: (12/16)rem;
color:#fff;
height:18px;
line-height:18px;
height: (18/16)rem;
line-height: @height;
float: left;
padding:0 5px 0px 10px;
position:relative;
@@ -251,8 +252,8 @@
height: 0px;
position: absolute;
top: 0;
left: -18px;
border: 9px solid transparent;
left: -(18/16)rem;
border: (18/16/2)rem solid transparent;
}
&:after{
content:" ";
@@ -262,7 +263,7 @@
border-radius:4px;
box-shadow:0px 0px 0px 1px rgba(0,0,0,.3);
position:absolute;
top: 7px;
top: (7/16)rem;
left: 2px;
}
}
@@ -309,7 +310,7 @@
float: left;
color: #999;
content: "\f02b";
font: 16px FontAwesome;
font: base-font-size FontAwesome;
margin-left: 1em;
margin-right: 5px;
margin-top: 6px;
@@ -320,9 +321,9 @@
float: left;
color: #999;
content: "\f02d";
font: 16px FontAwesome;
font: base-font-size FontAwesome;
margin-right: 5px;
margin-top: 6px;
margin-top: (1/3)rem;
}
}
.article-pop-out {
@@ -331,12 +332,10 @@
float: left;
color: #999;
content: "\f08d";
font: 16px FontAwesome;
font: base-font-size FontAwesome;
float: left;
//margin-right: 10px;
//margin-top: 9px;
margin-right: 5px;
margin-top: 6px;
margin-top: (1/3)rem;
}
&:after{
float: left;
@@ -26,6 +26,7 @@ font-mono = Menlo, Consolas, "Source Code Pro", Inconsolata, Monaco, monospace
font-icon = FontAwesome
font-icon-path = "font-awesome/fonts/fontawesome-webfont"
font-icon-version = "4.5.0"
base-font-size = hexo-config("base_font_size")px
font-size = 14px
line-height = 1.6em
line-height-title = 1.1em
Oops, something went wrong.

1 comment on commit 53a83a1

@MOxFIVE

This comment has been minimized.

Show comment
Hide comment
@MOxFIVE

MOxFIVE Apr 13, 2016

Owner

16px
16px

20px
20px

Owner

MOxFIVE commented on 53a83a1 Apr 13, 2016

16px
16px

20px
20px

Please sign in to comment.