├── screenshot.png ├── README.md ├── sidebar.php ├── page.php ├── 404.php ├── header.php ├── archive.php ├── index.php ├── navbar.php ├── post.php ├── footer.php ├── functions.php ├── comments.php └── style.css /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benzBrake/Less/HEAD/screenshot.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Less 2 | 3 | 一个完全扒回来的自适应Typecho主题，极简，没几行JS。 4 | 5 | 适合做文本记录类。 6 | 7 | ## 使用说明 8 | 9 | 1、直接下载压缩包解压到 `/usr/themes` 目录下，确保目录名为 Less； 10 | 11 | 2、启用主题。 12 | 13 | 3、建议设置文章列表数量为 2 和 3 的公倍数。 14 | 15 | ## 预览 16 | 17 | [https://xiamp.net/Less/](https://apply.free.hr/?theme=Less) 18 | -------------------------------------------------------------------------------- /sidebar.php: -------------------------------------------------------------------------------- 1 | 2 |
3 | ☰ 4 | options->title(); ?> 5 |
6 |
7 | need('navbar.php'); ?> 8 | need('footer.php'); ?> 9 |
10 | -------------------------------------------------------------------------------- /page.php: -------------------------------------------------------------------------------- 1 | need('header.php'); 3 | $this->need('sidebar.php'); ?> 4 | 7 |
8 |
9 |
10 | content(); ?> 11 |
12 |
13 | need('comments.php'); ?> 14 |
15 | need('footer.php'); ?> 16 | -------------------------------------------------------------------------------- /404.php: -------------------------------------------------------------------------------- 1 | need('header.php'); 3 | ?> 4 | need('sidebar.php'); ?> 5 | 8 | need('sidebar.php'); ?> 9 | 10 |
11 | 12 |
13 |

404 -

14 |

15 |
16 |

17 |

18 |
19 |
20 | 21 |
22 | -------------------------------------------------------------------------------- /header.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | <?php $this->archiveTitle(array( 10 | 'category' => _t('分类 %s 下的文章'), 11 | 'search' => _t('包含关键字 %s 的文章'), 12 | 'tag' => _t('标签 %s 下的文章'), 13 | 'author' => _t('%s 发布的文章') 14 | ), '', ' - '); ?><?php $this->options->title(); ?> 15 | 16 | 17 | 22 | 23 | header(); ?> 24 | 25 | 26 | -------------------------------------------------------------------------------- /archive.php: -------------------------------------------------------------------------------- 1 | need('header.php'); 3 | $this->need('sidebar.php'); ?> 4 | 13 |
14 | have()): ?> 15 | next()): ?> 16 |
17 |

title() ?>

18 |
19 | content('- 阅读剩余部分 -'); ?> 20 |
21 |
22 | 23 | 24 |
25 |

26 |
27 | 28 | 29 | pageNav('« 前一页', '后一页 »'); ?> 30 |
-------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | need('header.php'); 14 | ?> 15 | need('sidebar.php'); ?> 16 | 24 |
25 |
26 | next()) : ?> 27 |
28 | 32 |
33 | 34 |
35 | pageNav('« 前一页', '后一页 »'); ?> 36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /navbar.php: -------------------------------------------------------------------------------- 1 | 2 | 21 |
22 | 27 |
-------------------------------------------------------------------------------- /post.php: -------------------------------------------------------------------------------- 1 | need('header.php'); 3 | $this->need('sidebar.php'); ?> 4 | 7 |
8 |
9 | 15 |
16 | content(); ?> 17 |
18 |

tags(', ', true, 'none'); ?>

19 |
20 | 21 | need('comments.php'); ?> 22 | 23 | 27 |
28 | 29 | -------------------------------------------------------------------------------- /footer.php: -------------------------------------------------------------------------------- 1 | 2 | 8 | 45 | footer(); ?> -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | addInput($logoUrl); 8 | } 9 | 10 | 11 | /* 12 | function themeFields($layout) { 13 | $logoUrl = new Typecho_Widget_Helper_Form_Element_Text('logoUrl', NULL, NULL, _t('站点LOGO地址'), _t('在这里填入一个图片URL地址, 以在网站标题前加上一个LOGO')); 14 | $layout->addItem($logoUrl); 15 | } 16 | */ 17 | function themeInit($archive) 18 | { 19 | if ($archive->is('single') || $archive->is('page')) { 20 | viewsCounter($archive); 21 | } 22 | } 23 | /* 24 | * 转换时间显示方式为X天前 25 | * @param Typecho_Date $date 26 | * @return String 27 | */ 28 | function getDayAgo($date) 29 | { 30 | $d = new Typecho_Date(Typecho_Date::gmtTime()); 31 | $now = $d->format('Y-m-d H:i:s'); 32 | $post = $date->format('Y-m-d H:i:s'); 33 | $t = strtotime($now) - strtotime($post); 34 | if ($t < 60) return $t . '秒前'; 35 | if ($t < 3600) return floor($t / 60) . '分钟前'; 36 | if ($t < 86400) return floor($t / 3670) . '小时前'; 37 | if ($t < 604800) return floor($t / 86400) . '天前'; 38 | if ($t < 2419200) return floor($t / 604800) . '周前'; 39 | if ($t < 31536000) return floor($t / 2592000) . '月前'; 40 | return floor($t / 31536000) . '年前'; 41 | } 42 | 43 | function getPostViews($widget, $format0 = "0", $format1 = "1", $formats = "%d", $return = false, $field = 'views') 44 | { 45 | $fields = unserialize($widget->fields); 46 | if (array_key_exists($field, $fields)) { 47 | $fieldValue = (!empty($fields[$field])) ? intval($fields[$field]) : 0; 48 | } else { 49 | $fieldValue = 0; 50 | } 51 | if ($fieldValue == 0) { 52 | $fieldValue = sprintf($format0, $fieldValue); 53 | } else if ($fieldValue == 1) { 54 | $fieldValue = sprintf($format1, $fieldValue); 55 | } else { 56 | $fieldValue = sprintf($formats, $fieldValue); 57 | } 58 | if ($return) { 59 | return $fieldValue; 60 | } else { 61 | echo $fieldValue; 62 | } 63 | } 64 | 65 | /** 66 | * 增加浏览次数 67 | * 使用方法: 在themeInit函数中添加代码 68 | * 
if($archive->is('single') || $archive->is('page')){ viewsCounter($archive);}
69 | * 70 | * @param Widget_Archive $widget 71 | * @return boolean 72 | */ 73 | function viewsCounter($widget, $field = 'views') 74 | { 75 | if (!$widget instanceof Widget_Archive) { 76 | return false; 77 | } 78 | 79 | $fieldValue = getPostViews($widget, "%d", "%d", "%d", true, $field); 80 | $fieldRecords = Typecho_Cookie::get('__typecho_' . $field); 81 | if (empty($fieldRecords)) { 82 | $fieldRecords = array(); 83 | } else { 84 | $fieldRecords = explode(',', $fieldRecords); 85 | } 86 | 87 | if (!in_array($widget->cid, $fieldRecords)) { 88 | $fieldValue = $fieldValue + 1; 89 | $widget->setField($field, 'str', strval($fieldValue), $widget->cid); 90 | $fieldRecords[] = $widget->cid; 91 | $fieldRecords = implode(',', $fieldRecords); 92 | Typecho_Cookie::set('__typecho_' . $field, $fieldRecords); 93 | return true; 94 | } 95 | return false; 96 | } 97 | -------------------------------------------------------------------------------- /comments.php: -------------------------------------------------------------------------------- 1 | 2 | 60 | authorId) { 64 | if ($comments->authorId == $comments->ownerId) { 65 | $commentClass .= ' comment-by-author'; 66 | } else { 67 | $commentClass .= ' comment-by-user'; 68 | } 69 | } 70 | 71 | $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent'; 72 | 73 | if ($comments->url) { 74 | $author = '' . $comments->author . ''; 75 | } else { 76 | $author = $comments->author; 77 | } 78 | ?> 79 | 80 |
  • 90 |
    91 | commentsAvatarRating; 96 | $hash = md5(strtolower($comments->mail)); 97 | $avatar = $host . $url . $hash . '?s=' . $size . '&r=' . $rating . '&d='; 98 | ?> 99 | 100 | <?php echo $comments->author; ?> 101 |
    102 | content(); ?> 103 |
    104 | author(); ?> 105 | 106 | reply(); ?> 107 |
    108 |
    109 |
    110 | children) { ?> 111 |
    112 | threadedComments($options); ?> 113 |
    114 | 115 |
    • 116 | 117 | 118 |
    119 | comments()->to($comments); ?> 120 | have()): ?> 121 |

    commentsNum(_t('暂无评论'), _t('仅有 1 条评论'), _t('已有 %d 条评论')); ?>

    122 | 123 | listComments(); ?> 124 | 125 | pageNav('«', '»'); ?> 126 | 127 | 128 | 129 | allow('comment')): ?> 130 |
    131 |
    132 | cancelReply(); ?> 133 | 134 |
    135 | 136 |
    137 | user->hasLogin()): ?> 138 |

    user->screenName(); ?>. »

    139 | 140 | 141 | options->commentsRequireMail): ?> required> 142 | options->commentsRequireURL): ?> required> 143 | 144 | 145 | 146 |
    147 |
    148 | 149 |
    -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* ------------------------------------ 2 | * Less 3 | * 4 | * @author 极限运维 5 | * @link http://www.32mb.win/ 6 | * @update 2016-08-28 7 | * --------------------------------- */ 8 | 9 | /* ------------------ 10 | * Global style 11 | * --------------- */ 12 | * { 13 | padding: 0; 14 | margin : 0; 15 | border : none; 16 | outline: none; 17 | } 18 | 19 | body { 20 | background-color: #FFF; 21 | color : #444; 22 | /*font-family :"Helvetica Neue",Helvetica,Arial,sans-serif; 23 | */ 24 | font-family : "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Verdana, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Zen Hei", "WenQuanYi Micro Hei", "Noto Sans CJK SC", "Source Han Sans CN", SimSun, sans-serif; 25 | font-size : 81.25%; 26 | } 27 | 28 | a { 29 | color : #dd0000; 30 | text-decoration: none; 31 | } 32 | 33 | a:hover { 34 | color : #333333; 35 | text-decoration: underline; 36 | transition : .2s esae-in-out 37 | } 38 | 39 | pre, 40 | code { 41 | background : #F3F3F3; 42 | font-family: Menlo, Monaco, Consolas, "Lucida Console", "Courier New", monospace; 43 | font-size : .92857em; 44 | white-space: break-spaces; 45 | } 46 | 47 | div.md_content { 48 | padding: 5px !important; 49 | } 50 | 51 | p { 52 | padding : .7em 0; 53 | line-height: 200%; 54 | } 55 | 56 | ::-webkit-input-placeholder { 57 | color : inherit; 58 | opacity: .5 59 | } 60 | 61 | ::-moz-placeholder { 62 | color : inherit; 63 | opacity: .5 64 | } 65 | 66 | :-ms-input-placeholder { 67 | color : inherit; 68 | opacity: .5 69 | } 70 | 71 | ::placeholder { 72 | color : inherit; 73 | opacity: .5 74 | } 75 | 76 | ::-ms-clear { 77 | display: none 78 | } 79 | 80 | code, 81 | kbd, 82 | pre, 83 | samp { 84 | font-family: Consolas, "Ubuntu Mono", Monaco, Menlo, "Andale Mono", "Liberation Mono", Courier, monospace 85 | } 86 | 87 | code, 88 | kbd, 89 | pre { 90 | padding : .2em .7em; 91 | font-size : 87.5%; 92 | background : #F7F7F7; 93 | border-radius: .2em 94 | } 95 | 96 | pre { 97 | padding: 1em 1.5em 98 | } 99 | 100 | pre code { 101 | padding : 0; 102 | font-size : 114.2857%; 103 | background: 0 0 104 | } 105 | 106 | pre>:first-child { 107 | margin-top: 0 108 | } 109 | 110 | pre>:last-child { 111 | margin-bottom: 0 112 | } 113 | 114 | blockquote { 115 | margin : 1em 0; 116 | padding-left: 1.5em; 117 | border-left : 4px solid #eee; 118 | color : #666; 119 | } 120 | 121 | table { 122 | border: 1px solid #ddd; 123 | width : 100%; 124 | } 125 | 126 | table th, 127 | table td { 128 | padding: 5px 10px; 129 | border : 1px solid #eee; 130 | } 131 | 132 | table th { 133 | background: #f3f3f3; 134 | } 135 | 136 | h1, 137 | h2, 138 | h3, 139 | h4, 140 | h5, 141 | h6 { 142 | line-height: 1.3; 143 | } 144 | 145 | input[type="text"], 146 | input[type="email"], 147 | input[type="url"], 148 | input[type="password"], 149 | textarea { 150 | padding : 5px; 151 | border : 1px solid #E9E9E9; 152 | width : 100%; 153 | border-radius : 2px; 154 | -webkit-box-sizing: border-box; 155 | -moz-box-sizing : border-box; 156 | box-sizing : border-box; 157 | } 158 | 159 | textarea { 160 | resize: vertical; 161 | } 162 | 163 | .submit { 164 | padding : 5px 10px; 165 | cursor : pointer; 166 | color : #fff; 167 | background-color: #dd0000; 168 | } 169 | 170 | /* Special link style */ 171 | .browsehappy { 172 | padding : 8px 0; 173 | background: #FBE3E4; 174 | color : #8A1F11; 175 | text-align: center; 176 | } 177 | 178 | .browsehappy a { 179 | color : #8A1F11; 180 | text-decoration: underline; 181 | font-weight : bold; 182 | } 183 | 184 | /* Navigation menu */ 185 | #mobnav { 186 | display : block; 187 | font-size : 2em; 188 | height : 40px; 189 | overflow : hidden; 190 | position : fixed; 191 | top : 0; 192 | right : 0; 193 | left : 0; 194 | transition: all .2s linear; 195 | background: rgba(248, 80, 50, 1); 196 | background: -moz-linear-gradient(top, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 31%, rgba(240, 47, 23, 1) 52%, rgba(231, 56, 39, 1) 64%, rgba(231, 56, 39, 1) 73%, rgba(241, 111, 92, 1) 86%, rgba(241, 111, 92, 1) 97%, rgba(241, 111, 92, 1) 100%); 197 | background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(248, 80, 50, 1)), color-stop(31%, rgba(246, 41, 12, 1)), color-stop(52%, rgba(240, 47, 23, 1)), color-stop(64%, rgba(231, 56, 39, 1)), color-stop(73%, rgba(231, 56, 39, 1)), color-stop(86%, rgba(241, 111, 92, 1)), color-stop(97%, rgba(241, 111, 92, 1)), color-stop(100%, rgba(241, 111, 92, 1))); 198 | background: -webkit-linear-gradient(top, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 31%, rgba(240, 47, 23, 1) 52%, rgba(231, 56, 39, 1) 64%, rgba(231, 56, 39, 1) 73%, rgba(241, 111, 92, 1) 86%, rgba(241, 111, 92, 1) 97%, rgba(241, 111, 92, 1) 100%); 199 | background: -o-linear-gradient(top, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 31%, rgba(240, 47, 23, 1) 52%, rgba(231, 56, 39, 1) 64%, rgba(231, 56, 39, 1) 73%, rgba(241, 111, 92, 1) 86%, rgba(241, 111, 92, 1) 97%, rgba(241, 111, 92, 1) 100%); 200 | background: -ms-linear-gradient(top, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 31%, rgba(240, 47, 23, 1) 52%, rgba(231, 56, 39, 1) 64%, rgba(231, 56, 39, 1) 73%, rgba(241, 111, 92, 1) 86%, rgba(241, 111, 92, 1) 97%, rgba(241, 111, 92, 1) 100%); 201 | background: linear-gradient(to bottom, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 31%, rgba(240, 47, 23, 1) 52%, rgba(231, 56, 39, 1) 64%, rgba(231, 56, 39, 1) 73%, rgba(241, 111, 92, 1) 86%, rgba(241, 111, 92, 1) 97%, rgba(241, 111, 92, 1) 100%); 202 | filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#f85032', endColorstr='#f16f5c', GradientType=0); 203 | } 204 | 205 | #mobnav.show { 206 | margin-left: 250px; 207 | } 208 | 209 | #mobnav a { 210 | color : #fff; 211 | text-decoration: none; 212 | cursor : pointer; 213 | padding : 5px; 214 | } 215 | 216 | #nav { 217 | overflow: hidden; 218 | } 219 | 220 | #site-menu { 221 | list-style: none; 222 | text-align: right; 223 | float : right; 224 | margin-top: 6em; 225 | } 226 | 227 | #site-menu li { 228 | display: block; 229 | } 230 | 231 | #site-menu li a { 232 | display : block; 233 | padding : .7em 1em; 234 | color : #000; 235 | font-size: 1.4em; 236 | } 237 | 238 | #site-menu li a.current { 239 | background-color: #dd0000; 240 | color : #fff; 241 | text-decoration : none; 242 | } 243 | 244 | #site-menu li a.current:hover { 245 | transition: background-color .2s ease-in-out; 246 | } 247 | 248 | #site-menu li a:hover { 249 | background-color: #ff0000; 250 | text-decoration : none; 251 | color : #f9f9f9; 252 | transition : color .2s ease-in-out; 253 | } 254 | 255 | /* Search */ 256 | #search { 257 | position : relative; 258 | margin-top: 15px; 259 | display : flex; 260 | } 261 | 262 | #search input { 263 | padding-right: 30px; 264 | } 265 | 266 | #search button { 267 | position : absolute; 268 | right : 4px; 269 | top : 2px; 270 | border : none; 271 | padding : 0; 272 | width : 24px; 273 | height : 24px; 274 | background : transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABNUlEQVRIid2VW42FMBCGPwlIQAISkICEIwEJdYCEIwEJSOCddloJSOg+7HTTvVAo2ZNNtkkTHmbm++fSAf71sdALjB4WgV0gCMwWTID2duAAjcCkQWPhTtXBN+hUaVTA5GDYoAvQOhgsmAyyb9BdVu5hFYgelpLjBp2WLgqESwAtS/SwBGiu+CSIh6VoqKWpS5mPfkWBWGy8wHi3cVlPxhJgFogOhlqAgyFlXwKE0zQPTl6mVwOOpylNg4NHLUBffPSwHhqlEbVgbgBSk+dDowBtalRNmdRvV3F90VjgeenRfPaZT9VnapqkxsNaykRtU/DyG8jPl2UXLRgLfYAmQGOh15p/27SnJSqo+/F6WBw8bkHgffwsGN2wu0DQ7znfV2lMb0FqxOT/iF8HJIhm+HwJ4E/OG7uFArUW86SLAAAAAElFTkSuQmCC) no-repeat center center; 275 | direction : ltr; 276 | /* fix RTL language */ 277 | text-indent: -9999em; 278 | } 279 | 280 | /* ------------------ 281 | * Main 282 | * --------------- */ 283 | /* ------------------ 284 | * Header 285 | * --------------- */ 286 | #header { 287 | padding : 30px 20px; 288 | margin-top: 35px; 289 | } 290 | 291 | #header[role="post"] { 292 | margin-bottom: -15px; 293 | font-size : 1.4em; 294 | } 295 | 296 | #header, 297 | #main { 298 | transition: all .2s linear; 299 | } 300 | 301 | #main { 302 | margin : 0; 303 | padding: 0; 304 | } 305 | 306 | #main.show { 307 | margin-left: 250px !important; 308 | } 309 | 310 | .posts-list article { 311 | display : flex; 312 | align-items: center; 313 | } 314 | 315 | .posts-list { 316 | display : flex; 317 | flex-wrap: wrap; 318 | } 319 | 320 | .post { 321 | padding: 15px; 322 | } 323 | 324 | .post-container { 325 | width: 100%; 326 | } 327 | 328 | #main[role="home"] .post-container:nth-child(2n+1) .post { 329 | background-color: rgba(0, 0, 0, 0.033); 330 | } 331 | 332 | .post-time { 333 | margin : 7px 5px; 334 | display: none; 335 | color : #999999; 336 | } 337 | 338 | .post-title { 339 | font-size : 1.4em; 340 | display : inline-block; 341 | overflow : hidden; 342 | height : 1.4em; 343 | line-height: 1.4em; 344 | width : auto; 345 | margin-left: 10px; 346 | } 347 | 348 | .post-meta li { 349 | display : inline-block; 350 | margin-right: 10px; 351 | } 352 | 353 | .post-meta { 354 | list-style : none; 355 | text-align : center; 356 | margin-bottom: 15px; 357 | padding : 15px 0; 358 | border-color : #ccc; 359 | border-style : dashed; 360 | border-width : 1px 0; 361 | color : #999999; 362 | } 363 | 364 | .post-content { 365 | font-size : 16px; 366 | line-height: 240%; 367 | } 368 | 369 | .post-content>* { 370 | margin-bottom: 10px; 371 | } 372 | 373 | .post-content>*:last-child { 374 | margin-bottom: 0; 375 | } 376 | 377 | .post-content img { 378 | margin-right: 50px !important; 379 | max-width : 90%; 380 | height : auto; 381 | } 382 | 383 | .post .tags { 384 | clear: both; 385 | } 386 | 387 | .post-near { 388 | list-style: none; 389 | margin : 30px 0; 390 | padding : 0; 391 | color : #999; 392 | } 393 | 394 | .post-near li { 395 | margin : 10px 0; 396 | height : 20px; 397 | overflow: hidden; 398 | } 399 | 400 | .archive-title { 401 | margin : 1em 0 -1em; 402 | padding-top: 20px; 403 | color : #999; 404 | font-size : 1em; 405 | } 406 | 407 | .more { 408 | text-align: center; 409 | } 410 | 411 | .more a { 412 | border: none; 413 | } 414 | 415 | .protected .text { 416 | width: 50%; 417 | } 418 | 419 | /* Page nav */ 420 | 421 | .page-navigator { 422 | list-style: none; 423 | margin : 25px 0; 424 | padding : 0; 425 | text-align: center; 426 | } 427 | 428 | .page-navigator li { 429 | display: inline-block; 430 | margin : 0 4px; 431 | } 432 | 433 | .page-navigator a { 434 | display : inline-block; 435 | padding : 0 10px; 436 | height : 30px; 437 | line-height: 30px; 438 | } 439 | 440 | .page-navigator a:hover { 441 | background : #EEE; 442 | text-decoration: none; 443 | } 444 | 445 | .page-navigator .current a { 446 | color : #444; 447 | background: #EEE; 448 | } 449 | 450 | /* ------------------ 451 | * Comment list 452 | * --------------- */ 453 | .comments-title { 454 | margin : 10px 0; 455 | padding : 5px 0; 456 | font-size : 32px; 457 | font-weight : 400; 458 | border-color: #ccc; 459 | border-style: dashed; 460 | border-width: 1px 0; 461 | color : #222; 462 | text-align : center; 463 | } 464 | 465 | .comment-list { 466 | list-style: none; 467 | } 468 | 469 | .comment-body { 470 | position : relative; 471 | min-height: 60px; 472 | } 473 | 474 | .comment-main { 475 | margin-left: 60px; 476 | padding : 10px 10px 10px 0; 477 | } 478 | 479 | .comment-main>p { 480 | display: inline; 481 | } 482 | 483 | .comment-list .avatar { 484 | float : left; 485 | height : 48px; 486 | width : 48px; 487 | border-radius: 50%; 488 | margin-top : 10px; 489 | } 490 | 491 | #author, 492 | #url, 493 | #mail { 494 | width : 150px; 495 | height : 38px; 496 | padding : 0px 10px; 497 | border : 0px none; 498 | box-shadow : 0px 2px 6px rgba(0, 0, 0, 0.2); 499 | margin-bottom: 5px; 500 | } 501 | 502 | #comment-form { 503 | margin: 10px; 504 | } 505 | 506 | #textarea { 507 | width : 90%; 508 | width : calc(100% - 20px); 509 | height : 80px; 510 | border : 1px dashed #ccc; 511 | background: #FFF none repeat scroll 0% 0%; 512 | padding : 10px; 513 | resize : none; 514 | } 515 | 516 | .cancel-comment-reply { 517 | float : right; 518 | margin: 10px; 519 | } 520 | 521 | #misubmit { 522 | width : 56px; 523 | box-shadow : 0px 2px 6px rgba(0, 0, 0, 0.2); 524 | border : 0px none; 525 | color : #FFF; 526 | padding : 0px; 527 | margin-top : -30px; 528 | height : 56px; 529 | float : right; 530 | transition : all 0.3s ease 0s; 531 | overflow : hidden; 532 | background : #dd0000 none repeat scroll 0% 0%; 533 | border-radius: 50%; 534 | position : relative; 535 | } 536 | 537 | #misubmit::after { 538 | content : "✚"; 539 | font-size: 2em; 540 | position : relative; 541 | } 542 | 543 | /* ------------------ 544 | * secondary 545 | * --------------- */ 546 | #secondary { 547 | width : 200px; 548 | height : 100%; 549 | float : left; 550 | top : 0; 551 | left : -200px; 552 | position : fixed; 553 | transition : all .2s linear; 554 | background-color: #ccc; 555 | border : 10px solid transparent; 556 | box-sizing : border-box; 557 | overflow-x : hidden; 558 | } 559 | 560 | #secondary.show { 561 | left : 0px; 562 | width: 250px; 563 | } 564 | 565 | 566 | /* ------------------ 567 | * Footer 568 | * --------------- */ 569 | #footer { 570 | line-height: 1.5; 571 | text-align : right; 572 | color : #999; 573 | position : absolute; 574 | bottom : 0; 575 | right : 0; 576 | width : 100%; 577 | } 578 | 579 | #footer ul { 580 | list-style: none; 581 | padding : 10px; 582 | } 583 | 584 | /* ----------------- 585 | * Error page 586 | * -------------- */ 587 | .error-page { 588 | margin-top : 30px; 589 | margin-bottom: 100px; 590 | } 591 | 592 | .error-search { 593 | float: left; 594 | width: 300px; 595 | } 596 | 597 | /* ----------------- 598 | * Content format 599 | *--------------- */ 600 | .post-content, 601 | .comment-content { 602 | line-height: 1.5; 603 | word-wrap : break-word; 604 | } 605 | 606 | .post-content h2, 607 | .comment-content h2 { 608 | font-size: 1.28571em; 609 | } 610 | 611 | .post-content img, 612 | .comment-content img, 613 | .post-content video, 614 | .comment-content video { 615 | max-width: 100%; 616 | } 617 | 618 | .post-content a img, 619 | .comment-content a img { 620 | background: #FFF; 621 | position : relative; 622 | bottom : -4px; 623 | /* hidden img parent link border */ 624 | } 625 | 626 | .post-content hr, 627 | .comment-content hr { 628 | margin : 2em auto; 629 | width : 100px; 630 | border : 1px solid #E9E9E9; 631 | border-width: 2px 0 0 0; 632 | } 633 | 634 | /* ----------------- 635 | * Misc 636 | *--------------- */ 637 | .aligncenter, 638 | div.aligncenter { 639 | display : block; 640 | margin-left : auto; 641 | margin-right: auto; 642 | } 643 | 644 | .alignleft { 645 | float: left; 646 | } 647 | 648 | .alignright { 649 | float: right; 650 | } 651 | 652 | img.alignleft { 653 | margin: 0 15px 0 0; 654 | } 655 | 656 | img.alignright { 657 | margin: 0 0 0 15px; 658 | } 659 | 660 | /* ----------------- 661 | * Responsive 662 | *--------------- */ 663 | @media (min-width: 768px) { 664 | #header { 665 | margin-top: 0; 666 | } 667 | 668 | #header, 669 | #main { 670 | margin-left: 220px; 671 | } 672 | 673 | #main[role="home"] .post-time { 674 | display: inline-block; 675 | } 676 | 677 | #secondary { 678 | float : none; 679 | left : 0; 680 | background: transparent; 681 | box-shadow: unset; 682 | } 683 | 684 | .site-search { 685 | margin-left: 20px; 686 | } 687 | 688 | #mobnav { 689 | display: none; 690 | } 691 | } 692 | 693 | @media (min-width:1200px) { 694 | 695 | #header, 696 | #main { 697 | width : auto; 698 | margin-left: 250px; 699 | } 700 | 701 | #main { 702 | margin-right: 250px; 703 | } 704 | 705 | .post-container { 706 | width: 50%; 707 | } 708 | } 709 | 710 | @media (min-width:1920px) { 711 | .post-container { 712 | width: 33.3%; 713 | } 714 | } 715 | 716 | /* 717 | * Hide from both screenreaders and browsers:h5bp.com/u 718 | */ 719 | .hidden { 720 | display : none !important; 721 | visibility: hidden; 722 | } 723 | 724 | /* 725 | * Hide only visually,but have it available for screenreaders:h5bp.com/v 726 | */ 727 | .sr-only { 728 | border : 0; 729 | height : 1px; 730 | margin : -1px; 731 | overflow: hidden; 732 | padding : 0; 733 | position: absolute; 734 | width : 1px; 735 | } 736 | 737 | /* 738 | * Extends the .sr-only class to allow the element to be focusable 739 | * when navigated to via the keyboard:h5bp.com/p 740 | */ 741 | .sr-only.focusable:active, 742 | .sr-only.focusable:focus { 743 | clip : auto; 744 | height : auto; 745 | margin : 0; 746 | overflow: visible; 747 | position: static; 748 | width : auto; 749 | } 750 | 751 | /* 752 | * Hide visually and from screenreaders,but maintain layout 753 | */ 754 | .invisible { 755 | visibility: hidden; 756 | } --------------------------------------------------------------------------------