attempt for a new design

1 files changed, 370 insertions, 272 deletions

diff --git a/static/css/screen.css b/static/css/screen.css
index 71cfbeb..109d98f 100644
--- a/static/css/screen.css
+++ b/static/css/screen.css
@@ -1,299 +1,397 @@
-/* reset */
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td,abbr { margin:0; padding:0;}
-/* /reset */
+/* /\* reset *\/ */
+/* body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td,abbr { margin:0; padding:0;} */
+/* /\* /reset *\/ */
 
-body {
-    font-family: Palatino, georgia, "times new roman", serif;
-    font-size: 1.2em;
-    background: #eee;
-}
-
-p { 
-    margin: 0 0 1.5em 0; 
-    text-align: justify; 
-}
-
-a { 
-    text-decoration: none;
-    color: #339; 
-}
+/* body { */
+/*     font-family: Palatino, georgia, "times new roman", serif; */
+/*     font-size: 1.2em; */
+/*     background: #eee; */
+/* } */
 
-a:hover { 
-    text-decoration: underline; 
-    color: #33f; 
-}
-
-#content h1,h2,h3,h4 { 
-	line-height:1em; 
-	font-weight: normal; 
-	clear: left; 	
-	font-family: 'lucida grande', sans-serif; 
-	margin-top: .5em;
-	margin-right: 0;
-	margin-left: 0em;
-	margin-bottom: 0;
-	padding-bottom: .5em;
-}
+/*menu*/
 
-#content h1 span.author {
-    font-size: 0.75em;
-}
-
-#content h1 span.post-date {
-    font-size: 0.75em;
+html{
+    width:100% ;
+    height: 100% ;
 }
 
+body {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    height: 100% ;
+    width:100% ;
+    font-family: sans-serif ;
+    color:#444444 ;
+    font-size: 16px ;
+    display: block;
+    line-height: 1.5em ;
 
-/* post title */
-#content h1.emphnext {
-    font-size: 1.5em;
 }
-#content h1 { font-size: 1.25em; }
-#content h2 { font-size: 1.1em; }
-#content h2::before {
-    color: silver;
-    content: "❯ ";
-}
-#content h3 { font-size: 1em; }
-#content h3::before {
-    color: silver;
-    content: "❯❯ ";
-}
-
-sup { line-height: 1ex; }
 
-#site {
-	max-width: 46em;
-	margin: 1.5em auto 3em auto;
-	line-height:1.5em;
+a{
+    color: #1168CC
 }
 
-#page {
-	background: #eee;
-	padding: .5em 3em 1.5em 3em;
+#menu {
+    width: 250px;
+    background: #22222b;
+    height: 100%;
+    position: fixed;
+    color: #eee;
+    font-size: 14px;
 }
 
-/* @group FancyFirst */
-.emphnext + p:first-letter, p.emphfirst:first-letter {
-	font-size: 2em;
-	padding: 0 0.15em 0 0;
-	margin:  0.05em 0 -0.15em 0;
-	line-height: 1em;
-	float: left;
+#menu h2{
+    line-height: 0em ;
+    color:#aaa;
+    text-transform:uppercase;
+    font-size:12px;
+    padding-left:20px;
 }
 
-.emphnext + p:first-line, p.emphfirst:first-line {
-	font-variant: small-caps;
-	font-size: larger;
-}
-/* @end */
-
-.right { float: right; clear: left; }
-.left { float: left; clear: right; }
-.inset { 
-	border: 1em solid silver; 
-	padding: 2px;
-	margin: 0em 0.8em 0.8em 0.8em;
-}
-.right.inset { margin-right: 0 !important; }
-.left.inset { margin-left: 0 !important; }
-
-blockquote {
-	padding: 0 2.8em;
-	margin: 1.714em 0;
-	color: #444;
-	font-size: 0.875em;
-	line-height: 1.714em;
-}
+#menu ul{
+      padding-left:20px;
+      }
+#menu li{
+      padding-left:10px;
+      }
 
-.note {
-	padding-top: 0.5em; 
-	background-color: #fafaff;
-	border-top: 1px solid silver;
-	border-bottom: 1px solid silver;
+#menu a{
+    color:#eee;
+    text-decoration:none;
 }
-/* @group Table */
-table {
-	width: 80%;
-	margin: 1.5em auto 1.5em auto;
-	table-layout: fixed;
-	border-spacing: 0;
-}
-table tr { text-align: center; }
-table th { font-weight: normal; background-color: #eeeeee; }
-table td { background-color: #eee; }
-table th.title { border-bottom: 1px solid gray; border-top: 1px solid gray; vertical-align: bottom; background-color: lightgrey; }
-caption { 
-	color: #333;
-	font-size: 0.875em;
-	margin: 0.875em auto 0 auto;
-	line-height: 1.14em;
-	text-align: justify;
-}
-
-/* @end */
 
-/* @group Lists */
-ul {
-	margin-top: 1.5em;
-	margin-bottom: 1.5em;
-	line-height: 1.5em;
-	padding-left: 1.5em;
-}
-ul li {
-	list-style-type: square;
-	list-style-position: outside;
-}
-ol li {
-	list-style-type: decimal;
-	list-style-position: inside;
-}
-dt { font-weight: bold;}
-dd { margin: 0 0 1.5em 0; text-align: justify; }
-
-ul.compact { margin: 0; padding: 0;}
-ul.compact li { list-style: none; }
-/* @end */
-
-/* @group Header */
-#header a { color: silver; }
-
-#header {
-    color: silver;
-	position: relative;
-	font-variant: small-caps;
-	line-height: 1em;
-	margin-top: .5em;
-	margin-bottom: 0;
-	background: #eee;
-	padding-top: 0em;
-	padding-left: 3em;
-	padding-right: 3em;
-	padding-bottom: .25em;
+#menu a:hover{
+    text-decoration:underline;
 }
 
-#header h1 {
-    font-size: 1.5em;
-	font-family: Palatino, georgia, "times new roman", serif;
-	margin-bottom: 0;
-	line-height: 0.9em;
-	display: block;
-	font-weight: normal;
-	color: silver;
-}
-/* @end */
-
-/* @group Footnotes */
-.footnotes { color: grey; }
-.footnotes:hover { color: black; }
-.footnotes ol li {
-	list-style-type: decimal;
-	list-style-position: inside;
-	font-size: 75%;
-	line-height: 1.5em;
-}
-.footnotes ol li > a { display: none; }
-/* @end */
-
-.list { font-weight: bold; }
-p.line { position: relative; margin: 0; }
-p.excerpt { margin: 0; }
-.comments { font-size: smaller; position: absolute; color: silver; right: 0; top: 0; }
-.excerpt { color: black; }
-
-/* @group Code */
-pre {
-	margin: 1em 0 1.5em 0;
-	line-height: 1.5em;	
-	color: #111;
-	background: #eee;
-	border: 1px solid #ddc;
-	padding: 0.5em 1em;
-	overflow: hidden;
-}
-
-pre:hover {
-	border-right: none;
-	overflow: visible;
-}
-code {
-	font-size: 1em;
-	background-color: #f7f7ff;
-	line-height: 1.4em;
-}
-pre > code {
-	background-color: transparent;
-}
-/* @end */
-
-/* @group Figures and images */
-dl.figure {
-	margin-top: 1.5em;
-	margin-bottom: 1.5em;
-	text-align: center;
-}
-
-dl.figure dd {
-	color: #333;
-	font-size: 0.875em;
-	margin: 0.875em auto 0 auto;
-	line-height: 1.14em;
-	text-align: justify;
-	width: 85%;
-}
-/* @end */
-
-/* @group Equations */
-div.maruku-equation { display: block ;text-align: center; }
-div.maruku-equation img.maruku-png { position: relative; top: -0.75em;}
-span.maruku-inline { }
-img.maruku-png { }
-/* @end */
-
-#footer {
-    padding: .5em 3em 1.5em 3em;
-    font-family: 'lucida grande', sans-serif; 
-}
-
-#pagination a.back {
+#menu .main,
+#menu .admin {
+    display: block;
+    margin-top: 10px;
     float: left;
 }
 
-#pagination {
-    text-align: center;
-    font-family: 'lucida grande', sans-serif; 
-}
-
-#pagination a.forward {
-    float: right;
+.main{
+    margin-top:2em
 }
 
-#navigation {
-    float: right;
-    font-size: .75em;
-}
-
-#navigation a {
-    color: darkgray;
-}
+.you{
+    width: 250px;
+    height: 30px;
+    top: 0px;
+    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
+    border-bottom: 1px solid rgb(17, 17, 17);
+    box-shadow: 0px 1px 0px rgb(42, 42, 42);
+}
 
-hr {
-  border-color: #ccc;
-  border-style: solid;
-  border-width: 1px 0 0;
-  clear: both;
-  margin: 0 0 20px;
-  height: 0;
-}
-
-#dsq-footer {
-    display: none;
-}
-
-.floatright {
-   float: right;
-   margin-left: 30px;
-   -webkit-box-shadow: 5px 5px 10px #262526; -moz-box-shadow: 5px 5px 10px #262526;  box-shadow: 5px 5px 10px #262526;
-}
+.you h2{
+    padding-top:16px
+}
+
+#content{
+    width:690px ;
+    margin:0 auto;
+    padding:2em 0;
+}
+
+footer {
+    display: block ;
+}
+
+#footer-left{
+    margin:0 auto;
+    width:690px
+}
+
+
+/* p {  */
+/*     margin: 0 0 1.5em 0;  */
+/*     text-align: justify;  */
+/* } */
+
+/* a {  */
+/*     text-decoration: none; */
+/*     color: #339;  */
+/* } */
+
+/* a:hover {  */
+/*     text-decoration: underline;  */
+/*     color: #33f;  */
+/* } */
+
+/* #content h1,h2,h3,h4 {  */
+/* 	line-height:1em;  */
+/* 	font-weight: normal;  */
+/* 	clear: left; 	 */
+/* 	font-family: 'lucida grande', sans-serif;  */
+/* 	margin-top: .5em; */
+/* 	margin-right: 0; */
+/* 	margin-left: 0em; */
+/* 	margin-bottom: 0; */
+/* 	padding-bottom: .5em; */
+/* } */
+
+/* #content h1 span.author { */
+/*     font-size: 0.75em; */
+/* } */
+
+/* #content h1 span.post-date { */
+/*     font-size: 0.75em; */
+/* } */
+
+
+/* /\* post title *\/ */
+/* #content h1.emphnext { */
+/*     font-size: 1.5em; */
+/* } */
+/* #content h1 { font-size: 1.25em; } */
+/* #content h2 { font-size: 1.1em; } */
+/* #content h2::before { */
+/*     color: silver; */
+/*     content: "❯ "; */
+/* } */
+/* #content h3 { font-size: 1em; } */
+/* #content h3::before { */
+/*     color: silver; */
+/*     content: "❯❯ "; */
+/* } */
+
+/* sup { line-height: 1ex; } */
+
+/* #site { */
+/* 	max-width: 46em; */
+/* 	margin: 1.5em auto 3em auto; */
+/* 	line-height:1.5em; */
+/* } */
+
+/* #page { */
+/* 	background: #eee; */
+/* 	padding: .5em 3em 1.5em 3em; */
+/* } */
+
+/* /\* @group FancyFirst *\/ */
+/* .emphnext + p:first-letter, p.emphfirst:first-letter { */
+/* 	font-size: 2em; */
+/* 	padding: 0 0.15em 0 0; */
+/* 	margin:  0.05em 0 -0.15em 0; */
+/* 	line-height: 1em; */
+/* 	float: left; */
+/* } */
+
+/* .emphnext + p:first-line, p.emphfirst:first-line { */
+/* 	font-variant: small-caps; */
+/* 	font-size: larger; */
+/* } */
+/* /\* @end *\/ */
+
+/* .right { float: right; clear: left; } */
+/* .left { float: left; clear: right; } */
+/* .inset {  */
+/* 	border: 1em solid silver;  */
+/* 	padding: 2px; */
+/* 	margin: 0em 0.8em 0.8em 0.8em; */
+/* } */
+/* .right.inset { margin-right: 0 !important; } */
+/* .left.inset { margin-left: 0 !important; } */
+
+/* blockquote { */
+/* 	padding: 0 2.8em; */
+/* 	margin: 1.714em 0; */
+/* 	color: #444; */
+/* 	font-size: 0.875em; */
+/* 	line-height: 1.714em; */
+/* } */
+
+/* .note { */
+/* 	padding-top: 0.5em;  */
+/* 	background-color: #fafaff; */
+/* 	border-top: 1px solid silver; */
+/* 	border-bottom: 1px solid silver; */
+/* } */
+/* /\* @group Table *\/ */
+/* table { */
+/* 	width: 80%; */
+/* 	margin: 1.5em auto 1.5em auto; */
+/* 	table-layout: fixed; */
+/* 	border-spacing: 0; */
+/* } */
+/* table tr { text-align: center; } */
+/* table th { font-weight: normal; background-color: #eeeeee; } */
+/* table td { background-color: #eee; } */
+/* table th.title { border-bottom: 1px solid gray; border-top: 1px solid gray; vertical-align: bottom; background-color: lightgrey; } */
+/* caption {  */
+/* 	color: #333; */
+/* 	font-size: 0.875em; */
+/* 	margin: 0.875em auto 0 auto; */
+/* 	line-height: 1.14em; */
+/* 	text-align: justify; */
+/* } */
+
+/* /\* @end *\/ */
+
+/* /\* @group Lists *\/ */
+/* ul { */
+/* 	margin-top: 1.5em; */
+/* 	margin-bottom: 1.5em; */
+/* 	line-height: 1.5em; */
+/* 	padding-left: 1.5em; */
+/* } */
+/* ul li { */
+/* 	list-style-type: square; */
+/* 	list-style-position: outside; */
+/* } */
+/* ol li { */
+/* 	list-style-type: decimal; */
+/* 	list-style-position: inside; */
+/* } */
+/* dt { font-weight: bold;} */
+/* dd { margin: 0 0 1.5em 0; text-align: justify; } */
+
+/* ul.compact { margin: 0; padding: 0;} */
+/* ul.compact li { list-style: none; } */
+/* /\* @end *\/ */
+
+/* /\* @group Header *\/ */
+/* #header a { color: silver; } */
+
+/* #header { */
+/*     color: silver; */
+/* 	position: relative; */
+/* 	font-variant: small-caps; */
+/* 	line-height: 1em; */
+/* 	margin-top: .5em; */
+/* 	margin-bottom: 0; */
+/* 	background: #eee; */
+/* 	padding-top: 0em; */
+/* 	padding-left: 3em; */
+/* 	padding-right: 3em; */
+/* 	padding-bottom: .25em; */
+/* } */
+
+/* #header h1 { */
+/*     font-size: 1.5em; */
+/* 	font-family: Palatino, georgia, "times new roman", serif; */
+/* 	margin-bottom: 0; */
+/* 	line-height: 0.9em; */
+/* 	display: block; */
+/* 	font-weight: normal; */
+/* 	color: silver; */
+/* } */
+/* /\* @end *\/ */
+
+/* /\* @group Footnotes *\/ */
+/* .footnotes { color: grey; } */
+/* .footnotes:hover { color: black; } */
+/* .footnotes ol li { */
+/* 	list-style-type: decimal; */
+/* 	list-style-position: inside; */
+/* 	font-size: 75%; */
+/* 	line-height: 1.5em; */
+/* } */
+/* .footnotes ol li > a { display: none; } */
+/* /\* @end *\/ */
+
+/* .list { font-weight: bold; } */
+/* p.line { position: relative; margin: 0; } */
+/* p.excerpt { margin: 0; } */
+/* .comments { font-size: smaller; position: absolute; color: silver; right: 0; top: 0; } */
+/* .excerpt { color: black; } */
+
+/* /\* @group Code *\/ */
+/* pre { */
+/* 	margin: 1em 0 1.5em 0; */
+/* 	line-height: 1.5em;	 */
+/* 	color: #111; */
+/* 	background: #eee; */
+/* 	border: 1px solid #ddc; */
+/* 	padding: 0.5em 1em; */
+/* 	overflow: hidden; */
+/* } */
+
+/* pre:hover { */
+/* 	border-right: none; */
+/* 	overflow: visible; */
+/* } */
+/* code { */
+/* 	font-size: 1em; */
+/* 	background-color: #f7f7ff; */
+/* 	line-height: 1.4em; */
+/* } */
+/* pre > code { */
+/* 	background-color: transparent; */
+/* } */
+/* /\* @end *\/ */
+
+/* /\* @group Figures and images *\/ */
+/* dl.figure { */
+/* 	margin-top: 1.5em; */
+/* 	margin-bottom: 1.5em; */
+/* 	text-align: center; */
+/* } */
+
+/* dl.figure dd { */
+/* 	color: #333; */
+/* 	font-size: 0.875em; */
+/* 	margin: 0.875em auto 0 auto; */
+/* 	line-height: 1.14em; */
+/* 	text-align: justify; */
+/* 	width: 85%; */
+/* } */
+/* /\* @end *\/ */
+
+/* /\* @group Equations *\/ */
+/* div.maruku-equation { display: block ;text-align: center; } */
+/* div.maruku-equation img.maruku-png { position: relative; top: -0.75em;} */
+/* span.maruku-inline { } */
+/* img.maruku-png { } */
+/* /\* @end *\/ */
+
+/* #footer { */
+/*     padding: .5em 3em 1.5em 3em; */
+/*     font-family: 'lucida grande', sans-serif;  */
+/* } */
+
+/* #pagination a.back { */
+/*     float: left; */
+/* } */
+
+/* #pagination { */
+/*     text-align: center; */
+/*     font-family: 'lucida grande', sans-serif;  */
+/* } */
+
+/* #pagination a.forward { */
+/*     float: right; */
+/* } */
+
+/* #navigation { */
+/*     float: right; */
+/*     font-size: .75em; */
+/* } */
+
+/* #navigation a { */
+/*     color: darkgray; */
+/* } */
+
+/* hr { */
+/*   border-color: #ccc; */
+/*   border-style: solid; */
+/*   border-width: 1px 0 0; */
+/*   clear: both; */
+/*   margin: 0 0 20px; */
+/*   height: 0; */
+/* } */
+
+/* #dsq-footer { */
+/*     display: none; */
+/* } */
+
+/* .floatright { */
+/*    float: right; */
+/*    margin-left: 30px; */
+/*    -webkit-box-shadow: 5px 5px 10px #262526; -moz-box-shadow: 5px 5px 10px #262526;  box-shadow: 5px 5px 10px #262526; */
+/* } */