summaryrefslogtreecommitdiffstats
path: root/sass
diff options
context:
space:
mode:
Diffstat (limited to 'sass')
-rw-r--r--sass/_partials.scss7
-rw-r--r--sass/_parts.scss5
-rw-r--r--sass/base/_color.scss9
-rw-r--r--sass/base/_font.scss10
-rw-r--r--sass/base/_layout.scss5
-rw-r--r--sass/partials/_banner.scss109
-rw-r--r--sass/partials/_comments.scss0
-rw-r--r--sass/partials/_footer.scss56
-rw-r--r--sass/partials/_header.scss140
-rw-r--r--sass/partials/_index.scss140
-rw-r--r--sass/partials/_post.scss21
-rw-r--r--sass/partials/_sidebar.scss51
-rw-r--r--sass/parts/_article.scss75
-rw-r--r--sass/parts/_banner.scss6
-rw-r--r--sass/parts/_footer.scss6
-rw-r--r--sass/parts/_header.scss89
-rw-r--r--sass/parts/_index.scss2
-rw-r--r--sass/screen.scss2
18 files changed, 194 insertions, 539 deletions
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
--- a/sass/partials/_comments.scss
+++ /dev/null
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
generated by cgit v1.1-2-g2b99 at 2024-11-22 13:16:28 +0100