From 2d0d5648dfabe4f178736ba512efc5b7e3b3cd94 Mon Sep 17 00:00:00 2001 From: SkyArrow Date: Tue, 24 Jan 2012 21:54:06 +0800 Subject: layout --- sass/_partials.scss | 7 -- sass/_parts.scss | 5 ++ sass/base/_color.scss | 9 ++- sass/base/_font.scss | 10 +-- sass/base/_layout.scss | 5 +- sass/partials/_banner.scss | 109 ---------------------------- sass/partials/_comments.scss | 0 sass/partials/_footer.scss | 56 --------------- sass/partials/_header.scss | 140 ------------------------------------ sass/partials/_index.scss | 140 ------------------------------------ sass/partials/_post.scss | 21 ------ sass/partials/_sidebar.scss | 51 ------------- sass/parts/_article.scss | 75 +++++++++++++++++++ sass/parts/_banner.scss | 6 ++ sass/parts/_footer.scss | 6 ++ sass/parts/_header.scss | 89 +++++++++++++++++++++++ sass/parts/_index.scss | 2 + sass/screen.scss | 2 +- source/_includes/after_footer.html | 3 +- source/_includes/article.html | 39 ++++------ source/_includes/banner.html | 11 +-- source/_includes/custom/footer.html | 2 +- source/_includes/disqus.html | 21 ------ source/_includes/footer.html | 7 +- source/_includes/header.html | 7 +- source/_layouts/default.html | 6 +- source/index.html | 30 ++++---- 27 files changed, 233 insertions(+), 626 deletions(-) delete mode 100644 sass/_partials.scss create mode 100644 sass/_parts.scss delete mode 100644 sass/partials/_banner.scss delete mode 100644 sass/partials/_comments.scss delete mode 100644 sass/partials/_footer.scss delete mode 100644 sass/partials/_header.scss delete mode 100644 sass/partials/_index.scss delete mode 100644 sass/partials/_post.scss delete mode 100644 sass/partials/_sidebar.scss create mode 100644 sass/parts/_article.scss create mode 100644 sass/parts/_banner.scss create mode 100644 sass/parts/_footer.scss create mode 100644 sass/parts/_header.scss create mode 100644 sass/parts/_index.scss delete mode 100644 source/_includes/disqus.html diff --git a/sass/_partials.scss b/sass/_partials.scss deleted file mode 100644 index 7a7c3d7..0000000 --- a/sass/_partials.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "partials/header"; -@import "partials/index"; -@import "partials/banner"; -@import "partials/sidebar"; -@import "partials/post"; -@import "partials/comments"; -@import "partials/footer"; \ No newline at end of file diff --git a/sass/_parts.scss b/sass/_parts.scss new file mode 100644 index 0000000..7069d84 --- /dev/null +++ b/sass/_parts.scss @@ -0,0 +1,5 @@ +@import "parts/header"; +@import "parts/banner"; +@import "parts/index"; +@import "parts/article"; +@import "parts/footer"; \ No newline at end of file diff --git a/sass/base/_color.scss b/sass/base/_color.scss index 38eb870..4925193 100644 --- a/sass/base/_color.scss +++ b/sass/base/_color.scss @@ -1,3 +1,6 @@ -$black: rgba(0,0,0,0.5); -$main: #258fb8; -$shadow: rgba(0,0,0,0.3); \ No newline at end of file +$background: #eee; +$main: #FF9500; +$border: #ddd; +$light-shadow: #fff; +$font-main: #666; +$font-meta: #999; \ No newline at end of file diff --git a/sass/base/_font.scss b/sass/base/_font.scss index 89fd7e4..44f829f 100644 --- a/sass/base/_font.scss +++ b/sass/base/_font.scss @@ -1,10 +1,2 @@ $default: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; -$symbol: "WebSymbolsRegular", sans-serif; -$code-font: "Consolas",Monaco,Courier New,Courier,monospace; - -@font-face { - font-family: 'WebSymbolsRegular'; - src: image-url('fonts/websymbols-regular-webfont.ttf'); - font-weight: normal; - font-style: normal; -} \ No newline at end of file +$monospace: "Consolas", Monaco, Courier New, Courier, monospace; \ No newline at end of file diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss index 60d27a7..10d0d10 100644 --- a/sass/base/_layout.scss +++ b/sass/base/_layout.scss @@ -1,4 +1,4 @@ -$max-width: 1200px; +$max-width: 1000px; @mixin square($property){ width: $property; @@ -20,7 +20,8 @@ body{ font-family: $default; font-weight: 300; font-size: 14px; - background: #333 image-url('random_grey_variations.png'); + background: $background; + color: $font-main; } h1{ font-size: 2em; diff --git a/sass/partials/_banner.scss b/sass/partials/_banner.scss deleted file mode 100644 index 3164048..0000000 --- a/sass/partials/_banner.scss +++ /dev/null @@ -1,109 +0,0 @@ -#banner{ - margin-bottom: 30px; - position: relative; - height: 300px; - @include user-select(none); - .image{ - width: 1120px; - position: absolute; - left: 40px; - height: 100%; - overflow: hidden; - background: #000; - .wrap{ - position: absolute; - left: 0; - height: 100%; - } - img{ - height: 100%; - position: absolute; - &:first-child{ - display: block; - } - } - } - .loading, .error{ - width: 1200px; - height: 100%; - position: absolute; - top: 0; - left: 0; - background: #000; - color: #fff; - &:before{ - position: absolute; - top: 50%; - margin-top: -20px; - width: 100%; - text-align: center; - font: 40px/1 $symbol; - } - div{ - position: absolute; - top: 50%; - width: 100%; - text-align: center; - margin-top: 40px; - } - } - .loading{ - &:before{ - content: "P"; - } - } - .error{ - &:before{ - content: "'"; - } - } - .prev, .next{ - position: absolute; - height: 100%; - width: 35px; - background: $black; - cursor: pointer; - &:before{ - position: absolute; - top: 50%; - font: 20px/1 $symbol; - color: #fff; - margin-top: -10px; - } - &:hover{ - background: #000; - } - } - .prev{ - left: 0; - &:before{ - content: "<"; - left: 10px; - } - } - .next{ - right: 0; - &:before{ - content: ">"; - right: 10px; - } - } - .dots{ - position: absolute; - bottom: -40px; - right: 0; - z-index: 1; - li{ - display: inline-block; - margin-left: 10px; - background: $black; - cursor: pointer; - overflow: hidden; - position: relative; - @include square(10px); - &.current, &:hover{ - background: $main; - } - } - } -} \ No newline at end of file diff --git a/sass/partials/_comments.scss b/sass/partials/_comments.scss deleted file mode 100644 index e69de29..0000000 diff --git a/sass/partials/_footer.scss b/sass/partials/_footer.scss deleted file mode 100644 index faa17fb..0000000 --- a/sass/partials/_footer.scss +++ /dev/null @@ -1,56 +0,0 @@ -#footer{ - position: relative; - height: 50px; - margin-bottom: 30px; - &:before{ - position: absolute; - top: 0; - left: 0; - content: "©"; - background: #000; - color: #fff; - font-size: 50px; - line-height: 1.5; - overflow: hidden; - text-align: right; - @include square(50px); - @include user-select(none); - } - .wrap{ - margin-left: 55px; - background: $black; - color: #fff; - line-height: 1; - padding: 29px 10px 10px; - font-size: 11px; - .right{ - margin-top: -5px; - a{ - position: relative; - text-indent: -9999px; - color: #fff; - display: inline-block; - margin-left: 10px; - @include square(16px); - &:before{ - position: absolute; - top: 0; - left: 0; - font: 16px/1 $symbol; - color: #999; - text-indent: 0; - @include user-select(none); - } - &:hover{ - &:before{ - color: #fff; - } - } - &:first-child:before{content: "f"} - &:nth-child(2):before{content: "g"} - &:nth-child(3):before{content: "t"} - &:last-child:before{content: "B"} - } - } - } -} \ No newline at end of file diff --git a/sass/partials/_header.scss b/sass/partials/_header.scss deleted file mode 100644 index fb6680e..0000000 --- a/sass/partials/_header.scss +++ /dev/null @@ -1,140 +0,0 @@ -#header{ - height: 68px; - margin: 30px auto; - text-transform: uppercase; - line-height: 1; - h1{ - a{ - background: #000; - color: #fff; - padding: 30px 10px 10px 100px; - margin-right: 5px; - display: block; - } - } - ul{ - background: $black; - font-size: 14px; - li{ - display: inline-block; - position: relative; - >a{ - color: #fff; - position: relative; - padding: 44px 20px 7px; - display: block; - border-bottom: 3px solid transparent; - &:after{ - font: 13px/1 $symbol; - color: #666; - content: "["; - margin-left: 10px; - } - &:only-child{ - &:after{ - display: none; - } - } - } - &:hover{ - >a{ - background: #000; - border-bottom: 3px solid $main; - &:after{ - color: #ccc; - } - } - >.sub-menu{ - display: block; - } - } - .sub-menu{ - position: absolute; - top: 100%; - left: 0; - background: $main; - white-space: nowrap; - z-index: 5; - text-transform: none; - display: none; - font-size: 13px; - @include box-shadow(0 12px 16px $shadow); - li{ - display: block; - a{ - padding: 10px 40px 10px 20px; - border-bottom: 1px solid lighten($main, 5%); - border-top: 1px solid darken($main, 5%); - &:hover{ - background: darken($main, 10%); - } - &:after{ - content: ">"; - position: absolute; - right: 10px; - font: 13px/1 $symbol; - color: lighten($main, 10%); - } - &:only-child{ - padding-right: 20px; - &:after{ - content: ""; - } - } - } - &:hover{ - >a{ - background: darken($main, 10%); - } - } - &:first-of-type{ - a{ - border-top: none; - } - } - &:last-of-type{ - a{ - border-bottom: none; - } - } - } - .sub-menu{ - top: 0; - left: 100%; - } - } - } - } - .search{ - margin-top: 25px; - input[type="text"]{ - background: rgba(0,0,0,0.2); - border-style: solid; - border-width: 1px 0; - border-color: rgba(0,0,0,0.5) transparent #555; - color: #ccc; - padding: 5px 15px; - margin: 2px 10px 0 0; - width: 150px; - font-size: 13px; - font-family: inherit; - @include border-radius(15px); - &:active, &:focus{ - background: $black; - } - } - input[type="submit"]{ - font: 18px/1 $symbol; - width: 24px; - height: 24px; - @include square(24px); - border: none; - background: none; - color: #fff; - cursor: pointer; - &:hover{ - color: $main; - } - } - } -} \ No newline at end of file diff --git a/sass/partials/_index.scss b/sass/partials/_index.scss deleted file mode 100644 index bbb45cb..0000000 --- a/sass/partials/_index.scss +++ /dev/null @@ -1,140 +0,0 @@ -#main_col{ - width: 750px; - article{ - margin-bottom: 30px; - header{ - line-height: 1; - .date{ - background: #000; - color: #fff; - width: 40px; - height: 50px; - padding: 5px 10px; - margin-right: 5px; - white-space: nowrap; - text-transform: uppercase; - strong{ - display: block; - font-size: 30px; - margin-bottom: 2px; - font-weight: bold; - } - } - .title{ - background: $black; - color: #fff; - font-size: 25px; - padding: 25px 10px 10px; - max-width: 665px; - font-weight: inherit; - a{ - color: #fff; - } - } - } - .entry{ - text-align: justify; - margin-top: 5px; - background: #fff; - padding: 10px 20px; - line-height: 2; - color: #333; - position: relative; - word-wrap: break-word; - p{ - margin-bottom: 10px; - } - img{ - max-width: 100%; - height: auto; - margin-top: 10px; - } - a{ - color: $main; - &:hover{ - text-decoration: underline; - } - } - ul, ol{ - margin-left: 20px; - margin-bottom: 10px; - } - h2{ - margin-bottom: 10px; - border-bottom: 1px solid #ddd; - font-weight: inherit; - color: #000; - } - blockquote{ - color: #666; - font-size: 13px; - position: relative; - padding-left: 30px; - margin-bottom: 10px; - &:before{ - position: absolute; - content: "“"; - font-size: 50px; - line-height: 1; - top: 0; - left: 0; - @include user-select(none); - } - &.attach:before{ - content: "A"; - font: 13px/2 $symbol; - } - } - pre{ - color: #666; - font: 13px $code-font; - position: relative; - margin-bottom: 10px; - overflow-x: auto; - line-height: 1.5; - } - code{ - font-family: $code-font; - } - footer{ - border-top: 1px solid #ddd; - padding-top: 10px; - min-height: 26px; - a{ - color: #000; - position: relative; - &:hover{ - color: $main; - text-decoration: none; - } - &:before, &:after{ - font: 16px $symbol; - @include user-select(none); - } - } - .more-link{ - &:hover{ - color: $main; - text-decoration: none; - } - &:before{ - content: "j"; - padding-right: 10px; - } - } - .comment{ - &:after{ - content: "d"; - right: 0; - padding-left: 10px; - } - &:hover{ - &:after{ - content: "e"; - } - } - } - } - } - } -} \ No newline at end of file diff --git a/sass/partials/_post.scss b/sass/partials/_post.scss deleted file mode 100644 index b88812a..0000000 --- a/sass/partials/_post.scss +++ /dev/null @@ -1,21 +0,0 @@ -article{ - .entry{ - footer{ - .cat{ - font-size: 13px; - position: relative; - padding-left: 25px; - &:before{ - font-family: $symbol; - padding-right: 10px; - position: absolute; - top: 0; - left: 0; - content: ","; - font-size: 14px; - @include user-select(none); - } - } - } - } -} \ No newline at end of file diff --git a/sass/partials/_sidebar.scss b/sass/partials/_sidebar.scss deleted file mode 100644 index 862840c..0000000 --- a/sass/partials/_sidebar.scss +++ /dev/null @@ -1,51 +0,0 @@ -#sidebar{ - width: 420px; - background: $black; - margin: 70px 0 30px; - word-wrap: break-word; - ul{ - list-style: none; - } - .widget{ - margin: 20px; - color: #999; - font-size: 13px; - line-height: 1.5; - h3{ - color: $main; - font-weight: normal; - font-size: 15px; - margin-bottom: 5px; - a{ - color: $main; - &:hover{ - color: $main; - } - } - } - a{ - color: #ccc; - &:hover{ - color: #fff; - text-decoration: underline; - } - } - ul{ - list-style: disc; - margin-left: 15px; - li{ - ul{ - list-style: circle; - } - } - } - &.thin{ - width: 180px; - display: inline-block; - vertical-align: top; - &:nth-of-type(2n){ - margin-right: 0; - } - } - } -} \ No newline at end of file diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss new file mode 100644 index 0000000..d4157fe --- /dev/null +++ b/sass/parts/_article.scss @@ -0,0 +1,75 @@ +article{ + border-bottom: 1px solid $border; + border-top: 1px solid $light-shadow; + padding: 30px 0; + position: relative; + h1.title, .entry{ + margin-left: 200px; + } + h1.title{ + font-size: 25px; + font-weight: 300; + line-height: 35px; + margin-bottom: 20px; + a{ + color: $font-main; + } + } + .entry{ + line-height: 2; + text-align: justify; + a{ + &:hover{ + text-decoration: underline; + } + } + .more-link{ + display: block; + margin-top: 20px; + } + ol, ul{ + margin-left: 20px; + } + p{ + margin-top: 10px; + } + h2{ + font-weight: 300; + margin-top: 10px; + border-bottom: 1px solid $border; + position: relative; + &:before{ + content: ""; + position: absolute; + bottom: -2px; + border-bottom: 1px solid $light-shadow; + width: 100%; + } + } + h3{ + margin-top: 10px; + } + code{ + font-family: $monospace; + } + pre{ + margin-top: 10px; + line-height: 1.5; + } + } + .meta{ + position: absolute; + top: 85px; + line-height: 2; + font-size: 13px; + color: $font-meta; + width: 170px; + a{ + color: $font-meta; + @include transition(0.3s); + &:hover{ + color: $font-main; + } + } + } +} \ No newline at end of file diff --git a/sass/parts/_banner.scss b/sass/parts/_banner.scss new file mode 100644 index 0000000..23b3353 --- /dev/null +++ b/sass/parts/_banner.scss @@ -0,0 +1,6 @@ +#banner{ + border-top: 1px solid $light-shadow; + border-bottom: 1px solid $border; + color: $font-main; + padding: 30px 0; +} \ No newline at end of file diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss new file mode 100644 index 0000000..b713b8e --- /dev/null +++ b/sass/parts/_footer.scss @@ -0,0 +1,6 @@ +footer{ + padding: 30px 0; + border-top: 1px solid $light-shadow; + text-align: center; + font-size: 13px; +} \ No newline at end of file diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss new file mode 100644 index 0000000..79553e3 --- /dev/null +++ b/sass/parts/_header.scss @@ -0,0 +1,89 @@ +header{ + height: 30px; + padding: 30px 0; + border-bottom: 1px solid $border; + line-height: 30px; + a{ + color: $font-main; + @include transition(0.3s); + &:hover{ + color: $main; + } + } + h1{ + font-weight: 300; + font-size: 30px; + } + nav{ + margin-left: 30px; + ul{ + list-style: none; + li{ + float: left; + margin-left: 50px; + } + ul{ + display: none; + } + } + } + .search{ + input[type="text"]{ + background: #f2f2f2; + color: #999; + border: 1px solid $border; + @include border-radius(15px); + font: 13px $default; + padding: 6px 15px; + @include transition(0.3s); + &:focus, &:active{ + background: #fff; + border-top: 1px solid #ccc; + color: $font-main; + } + } + } + .social{ + margin-right: 15px; + a{ + @include border-radius(50%); + display: inline-block; + text-indent: -9999px; + margin-right: 15px; + opacity: 0.5; + @include square(28px); + @include transition(0.3s); + &:hover{ + opacity: 1; + } + &:first-of-type{ + background: #3B5998; + border: 1px solid #3B5998; + &:hover{ + border: 1px solid darken(#3B5998, 10%); + } + } + &:nth-of-type(2){ + background: #C83D20; + border: 1px solid #C83D20; + &:hover{ + border: 1px solid darken(#C83D20, 10%); + } + } + &:nth-of-type(3){ + background: #55CFF8; + border: 1px solid #55CFF8; + &:hover{ + border: 1px solid darken(#55CFF8, 10%); + } + } + &:last-of-type{ + background: #EF7522; + border: 1px solid #EF7522; + &:hover{ + border: 1px solid darken(#EF7522, 10%); + } + } + } + } +} \ No newline at end of file diff --git a/sass/parts/_index.scss b/sass/parts/_index.scss new file mode 100644 index 0000000..2d90e17 --- /dev/null +++ b/sass/parts/_index.scss @@ -0,0 +1,2 @@ +#content{ +} \ No newline at end of file diff --git a/sass/screen.scss b/sass/screen.scss index 347fc15..1c20d06 100644 --- a/sass/screen.scss +++ b/sass/screen.scss @@ -1,4 +1,4 @@ @import "compass"; @import "base"; -@import "partials"; \ No newline at end of file +@import "parts"; \ No newline at end of file diff --git a/source/_includes/after_footer.html b/source/_includes/after_footer.html index 20b9e4d..9e4e391 100644 --- a/source/_includes/after_footer.html +++ b/source/_includes/after_footer.html @@ -1,2 +1 @@ -{% include disqus.html %} -{% include custom/after_footer.html %} +{% include custom/after_footer.html %} \ No newline at end of file diff --git a/source/_includes/article.html b/source/_includes/article.html index 941dd86..d9c5139 100644 --- a/source/_includes/article.html +++ b/source/_includes/article.html @@ -1,34 +1,21 @@ -{% unless page.no_header %} -
- {% if index %} -
{{ post.date | date: "%e" }}{{ post.date | date: "%b" }}
-

{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}

- {% else %} -
{{ post.date | date: "%e" }}{{ post.date | date: "%b" }}
-

{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}

- {% endif %} -
-
-{% endunless %} {% if index %} +

{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}

{{ content | excerpt }} {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %} - + {% if excerpted == 'true' %}閱讀全文{% endif %} +
+
+
{% include post/date.html %}{{ time }}
+
{% include post/categories.html %}
+
留言
{% else %} -
- {{ content }} -
- - 留言 -
- {% include post/categories.html %} -
+

{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}

+
{{ content }}
+
+
{% include post/date.html %}{{ time }}
+
{% include post/categories.html %}
+
留言
{% endif %} \ No newline at end of file diff --git a/source/_includes/banner.html b/source/_includes/banner.html index 93286a8..7da6092 100644 --- a/source/_includes/banner.html +++ b/source/_includes/banner.html @@ -1,10 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/_includes/custom/footer.html b/source/_includes/custom/footer.html index f742b2f..488ea2f 100644 --- a/source/_includes/custom/footer.html +++ b/source/_includes/custom/footer.html @@ -1 +1 @@ -版權所有 © {{ site.time | date: "%Y" }} {{ site.title }} \ No newline at end of file +Copyright © {{ site.time | date: "%Y" }} {{ site.title }} \ No newline at end of file diff --git a/source/_includes/disqus.html b/source/_includes/disqus.html deleted file mode 100644 index eb30877..0000000 --- a/source/_includes/disqus.html +++ /dev/null @@ -1,21 +0,0 @@ -{% comment %} Load script if disquss comments are enabled and `page.comments` is either empty (index) or set to true {% endcomment %} -{% if site.disqus_short_name and page.comments != false %} - -{% endif %} diff --git a/source/_includes/footer.html b/source/_includes/footer.html index 2a5a0eb..aa81074 100644 --- a/source/_includes/footer.html +++ b/source/_includes/footer.html @@ -1,6 +1 @@ -
- {% include custom/footer.html %} -
- FacebookGoogle+TwitterRSS -
-
+{% include custom/footer.html %} \ No newline at end of file diff --git a/source/_includes/header.html b/source/_includes/header.html index 6c7e800..8e4297c 100644 --- a/source/_includes/header.html +++ b/source/_includes/header.html @@ -2,7 +2,12 @@
-
+ {% include custom/header.html %} \ No newline at end of file diff --git a/source/_layouts/default.html b/source/_layouts/default.html index a9cffe9..ad02643 100644 --- a/source/_layouts/default.html +++ b/source/_layouts/default.html @@ -1,11 +1,11 @@ {% capture root_url %}{{ site.root | strip_slash }}{% endcapture %} {% include head.html %} - - + +
{% include header.html %}
{% include banner.html %}
{{ content | expand_urls: root_url }}
-
{% include footer.html %}
+
{% include footer.html %}
{% include after_footer.html %} \ No newline at end of file diff --git a/source/index.html b/source/index.html index 2614667..df4533d 100644 --- a/source/index.html +++ b/source/index.html @@ -2,20 +2,16 @@ layout: default --- -
- {% assign index = true %} - {% for post in paginator.posts %} - {% assign content = post.content %} -
{% include article.html %}
- {% endfor %} - -
-{% include asides.html %} -
\ No newline at end of file +{% assign index = true %} +{% for post in paginator.posts %} +{% assign content = post.content %} +
{% include article.html %}
+{% endfor %} + \ No newline at end of file -- cgit v1.1-2-g2b99