Permalink
Browse files

ui: update

  • Loading branch information...
1 parent c2793fc commit a9bbc938afe57d2f2b40d9cf4aa87cae0d16a203 @indutny committed Mar 31, 2013
View
@@ -6,7 +6,7 @@ exports.add = function add(app) {
if (err) return next(err);
res.render('index.jade', {
- title: 'Fedor Indutny\'s blog',
+ title: null,
posts: posts
});
});
View
@@ -4,7 +4,7 @@
"private": true,
"domain": "blog.indutny.com",
"dependencies": {
- "express": "~3.0.6",
+ "express": "~3.1.0",
"socket.io": "~0.9.10",
"marked": "~0.2.5",
"jade": "~0.28.1",
View
@@ -1,92 +1,146 @@
* {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- -o-box-sizing: border-box;
+ font-family: Helvetica, Arial, serif;
-ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
- font-family: 'Indie Flower', cursive;
+a {
+ color: #444;
}
-html, body, #wrapper {
- min-height: 100%;
+html, body {
+ height: 100%;
+ background: #222;
}
-body {
- background: #31353a url(/images/bg.png) repeat repeat;
+.clear {
+ clear: both;
}
-/*
- * #31353a - bg
- * #3a7edc - main
- * #20467a - secondary
- * #2e63ad - secondary light
- * #ee4966 - alternative
- */
+nav {
+ position: relative;
+ float: left;
+ width: 360px;
+ text-align: right;
+ display: block;
+ margin: 0 32px 0 0;
+ padding: 4px 32px 0 8px;
+ height: 100%;
+}
-a {
- color: #20467a;
+nav header h1 {
+ color: #fff;
+ font-family: Existence;
+ font-size: 48px;
}
-a:visited {
- color: #2e63ad;
+h2.index {
+ font-size: 36px;
}
-#wrapper {
- position: relative;
+nav footer {
+ position: absolute;
+ right: 0px;
+ bottom: 0px;
+ padding: 8px 32px 8px 8px;
+}
- width: 800px;
- margin: 0 auto;
- background: rgba(255,255,255,0.94);
- -webkit-box-shadow: 0 0 12px #3a7edc;
- -moz-box-shadow: 0 0 12px #3a7edc;
- -o-box-shadow: 0 0 12px #3a7edc;
- -ms-box-shadow: 0 0 12px #3a7edc;
- box-shadow: 0 0 12px #3a7edc;
+nav footer, nav footer a {
+ font-size: 11px;
+ color: #aaa;
}
-header {
- height: 90px;
- padding-bottom: 6px;
- border-bottom: 3px solid #20467a;
+section#content {
+ position: relative;
+ padding: 24px 32px;
+ max-width: 800px;
+ min-height: 100%;
+ background: #fff;
+ float: left;
}
-header h1 {
- padding: 18px 33px 18px 0;
+section#content h2.index {
text-align: center;
}
-header .home-link {
- margin-right: 33px;
+section#content section.post-content div.date {
+ text-align: right;
+ font-style: italic;
+ font-size: 16px;
}
-#content {
- padding: 3px 21px 32px 12px;
- font-size: 21px;
+section#content a.home-link {
+ font-family: Existence;
+ font-size: 36px;
+ color: #333;
+ text-decoration: none;
}
-footer {
- width: 800px;
- margin-top: 18px;
- padding: 3px 6px 0 6px;
- height: 30px;
- text-align: right;
- font-size: 15px;
+
+section.post.teaser {
+ margin: 16px 0;
}
-span.date {
- font-size: 11px;
+section.post.teaser .rate {
+ display: inline-block;
+ border: 1px solid #aaa;
+ margin: 0 8px 0 4px;
+ padding: 2px;
}
-div.date {
- text-align: right;
+section.post.teaser .date {
+ color: #ccc;
+}
+
+/* Text formatting */
+
+section#content p,
+section#content a,
+section#content li,
+section#content b,
+section#content strong,
+section#content i {
+ font-family: Helvetica;
+ font-size: 22px;
+ line-height: 28px;
+}
+
+section#content p {
+ margin: 32px 0;
}
-section.post.big .rate {
+section#content ul,
+section#content ol {
+ padding: 0 0 0 21px;
+}
+
+section#content img {
+ display: block;
+ margin: 0 auto;
+}
+
+section#content pre {
+ background: white;
+ border: 1px solid #20467a;
+ padding: 3px 6px;
+}
+
+section#content pre code {
+ font-family: 'Bitstream Vera Sans Mono', 'Courier', monospace;
+ font-size: 15px;
+ line-height: 18px;
+}
+
+/*
+ * Rate
+ */
+
+section#content section.post.big .rate {
position: absolute;
- right: -60px;
+ right: -144px;
top: 27px;
width: 120px;
height: 120px;
@@ -108,7 +162,7 @@ section.post.big .rate {
cursor: pointer;
}
-section.post .rate .wrapper {
+section#content section.post.big .rate .wrapper {
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
@@ -121,17 +175,17 @@ section.post .rate .wrapper {
-ms-transition: -ms-transform 0.3s linear;
}
-section.post .rate.voting .wrapper,
-section.post .rate.can-vote:hover .wrapper {
+section#content section.post.big .rate.voting .wrapper,
+section#content section.post.big .rate.can-vote:hover .wrapper {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
-section.post.big .rate .front,
-section.post.big .rate .back {
+section#content section.post.big .rate .front,
+section#content section.post.big .rate .back {
position: absolute;
top: 0;
left: 0;
@@ -151,7 +205,7 @@ section.post.big .rate .back {
box-shadow: 0 0 3px rgba(34,34,34,0.6);
}
-section.post.big .rate .front {
+section#content section.post.big .rate .front {
background: white;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
@@ -161,12 +215,13 @@ section.post.big .rate .front {
z-index: 2;
}
-section.post.big .rate .back {
+section#content section.post.big .rate .back {
display: block;
color: white;
background: #ee4966;
text-decoration: none;
font-size: 50px;
+ line-height: 108px;
z-index: 1;
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
@@ -175,40 +230,80 @@ section.post.big .rate .back {
transform: scale(-1, 1);
}
-/* Text formatting */
+@media screen and (max-width: 767px) {
+ img {
+ max-width: 100%;
+ }
-section.post-content p,
-section.post-content a,
-section.post-content li,
-section.post-content b,
-section.post-content strong,
-section.post-content i {
- font-family: Helvetica;
- font-size: 15px;
-}
+ nav {
+ position: inherit;
+ float: none;
+ height: auto;
+ padding-right: 4px;
+ text-align: center;
+ width: auto;
+ margin: 0;
+ }
-section.post-content p {
- margin: 15px 0;
-}
+ nav footer {
+ position: inherit;
+ float: right;
+ text-align: right;
+ }
-section.post-content ul,
-section.post-content ol {
- padding: 0 0 0 21px;
-}
+ nav header h1 {
+ font-size: 24px;
+ }
-section.post-content img {
- display: block;
- margin: 0 auto;
-}
+ section#content {
+ padding: 24px 8px 8px 8px;
+ max-width: auto;
+ }
-section.post-content pre {
- background: white;
- border: 1px solid #20467a;
- padding: 3px 6px;
-}
+ section#content a.home-link {
+ display: inline-block;
+ font-size: 24px;
+ margin-bottom: 16px;
+ }
-section.post-content pre code {
- font-family: 'Bitstream Vera Sans Mono', 'Courier', monospace;
- font-size: 15px;
- line-height: 18px;
+ section#content section.post.big .rate {
+ position: absolute;
+ right: 8px;
+ top: 27px;
+ width: 60px;
+ height: 60px;
+ line-height: 54px;
+ font-size: 24px;
+ }
+
+ section#content section.post.big .rate .front,
+ section#content section.post.big .rate .back {
+ width: 60px;
+ height: 60px;
+ border: 3px solid #2e63ad;
+ border-radius: 30px;
+ -webkit-border-radius: 30px;
+ -moz-border-radius: 30px;
+ -o-border-radius: 30px;
+ -ms-border-radius: 30px;
+
+ -webkit-box-shadow: 0 0 3px rgba(34,34,34,0.6);
+ -moz-box-shadow: 0 0 3px rgba(34,34,34,0.6);
+ -o-box-shadow: 0 0 3px rgba(34,34,34,0.6);
+ -ms-box-shadow: 0 0 3px rgba(34,34,34,0.6);
+ box-shadow: 0 0 3px rgba(34,34,34,0.6);
+ }
+
+ section#content section.post.big .rate .back {
+ font-size: 25px;
+ line-height: 54px;
+ }
+
+ section#content pre,
+ section#content pre code {
+ font-size: 16px;
+ text-overflow: ellipsis;
+ word-wrap: break-word;
+ word-break: break-all;
+ }
}
Oops, something went wrong.

0 comments on commit a9bbc93

Please sign in to comment.