diff options
Diffstat (limited to 'sass')
| -rw-r--r-- | sass/_base.scss | 3 | ||||
| -rw-r--r-- | sass/_partials.scss | 7 | ||||
| -rw-r--r-- | sass/base/_color.scss | 3 | ||||
| -rw-r--r-- | sass/base/_font.scss | 10 | ||||
| -rw-r--r-- | sass/base/_layout.scss | 51 | ||||
| -rw-r--r-- | sass/partials/_banner.scss | 109 | ||||
| -rw-r--r-- | sass/partials/_comments.scss | 0 | ||||
| -rw-r--r-- | sass/partials/_footer.scss | 56 | ||||
| -rw-r--r-- | sass/partials/_header.scss | 140 | ||||
| -rw-r--r-- | sass/partials/_index.scss | 140 | ||||
| -rw-r--r-- | sass/partials/_post.scss | 21 | ||||
| -rw-r--r-- | sass/partials/_sidebar.scss | 51 | ||||
| -rw-r--r-- | sass/screen.scss | 4 |
13 files changed, 595 insertions, 0 deletions
diff --git a/sass/_base.scss b/sass/_base.scss new file mode 100644 index 0000000..e9707e2 --- /dev/null +++ b/sass/_base.scss @@ -0,0 +1,3 @@ +@import "base/color"; +@import "base/font"; +@import "base/layout";
\ No newline at end of file diff --git a/sass/_partials.scss b/sass/_partials.scss new file mode 100644 index 0000000..7a7c3d7 --- /dev/null +++ b/sass/_partials.scss @@ -0,0 +1,7 @@ +@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/base/_color.scss b/sass/base/_color.scss new file mode 100644 index 0000000..38eb870 --- /dev/null +++ b/sass/base/_color.scss @@ -0,0 +1,3 @@ +$black: rgba(0,0,0,0.5); +$main: #258fb8; +$shadow: rgba(0,0,0,0.3);
\ No newline at end of file diff --git a/sass/base/_font.scss b/sass/base/_font.scss new file mode 100644 index 0000000..89fd7e4 --- /dev/null +++ b/sass/base/_font.scss @@ -0,0 +1,10 @@ +$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 diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss new file mode 100644 index 0000000..60d27a7 --- /dev/null +++ b/sass/base/_layout.scss @@ -0,0 +1,51 @@ +$max-width: 1200px; + +@mixin square($property){ + width: $property; + height: $property; +} +@mixin user-select($select){ + -moz-user-select: $select; + -khtml-user-select: $select; + -webkit-user-select: $select; + -o-user-select: $select; + user-select: $select; +} + +*{ + margin: 0; + padding: 0; +} +body{ + font-family: $default; + font-weight: 300; + font-size: 14px; + background: #333 image-url('random_grey_variations.png'); +} +h1{ + font-size: 2em; +} +h2{ + font-size: 1.5em; +} +h3{ + font-size: 1.3em; +} +a{ + text-decoration: none; + outline-width: 0; + color: $main; +} +.left{ + float: left; +} +.right{ + float: right; +} +.clear{ + clear: both; +} +.inner{ + width: $max-width; + margin: 0 auto; +}
\ No newline at end of file diff --git a/sass/partials/_banner.scss b/sass/partials/_banner.scss new file mode 100644 index 0000000..3164048 --- /dev/null +++ b/sass/partials/_banner.scss @@ -0,0 +1,109 @@ +#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 new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/sass/partials/_comments.scss diff --git a/sass/partials/_footer.scss b/sass/partials/_footer.scss new file mode 100644 index 0000000..faa17fb --- /dev/null +++ b/sass/partials/_footer.scss @@ -0,0 +1,56 @@ +#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 new file mode 100644 index 0000000..fb6680e --- /dev/null +++ b/sass/partials/_header.scss @@ -0,0 +1,140 @@ +#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 new file mode 100644 index 0000000..bbb45cb --- /dev/null +++ b/sass/partials/_index.scss @@ -0,0 +1,140 @@ +#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 new file mode 100644 index 0000000..b88812a --- /dev/null +++ b/sass/partials/_post.scss @@ -0,0 +1,21 @@ +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 new file mode 100644 index 0000000..862840c --- /dev/null +++ b/sass/partials/_sidebar.scss @@ -0,0 +1,51 @@ +#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/screen.scss b/sass/screen.scss new file mode 100644 index 0000000..347fc15 --- /dev/null +++ b/sass/screen.scss @@ -0,0 +1,4 @@ +@import "compass"; + +@import "base"; +@import "partials";
\ No newline at end of file |