refactor css

_layouts/default.html

@@ -31,8 +31,8 @@
         </script>
         <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/latest.js?config=TeX-AMS-MML_HTMLorMML' async></script>
         {% endif %}
-        <link rel="stylesheet" href="/stylesheets/screen.css">
+        <link rel="stylesheet" href="/css/screen.css">
-        <link rel="stylesheet" href="/stylesheets/friendly.css">
+        <link rel="stylesheet" href="/css/friendly.css">
         <!--[if lt IE 9]>
         <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
         <![endif]-->

_sass/ie.scss

@@ -1,5 +0,0 @@
-/* Welcome to Compass. Use this file to write IE specific override styles.
- * Import this file using the following HTML or equivalent:
- * <!--[if IE]>
- *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
- * <![endif]--> */

_sass/print.scss

@@ -1,3 +0,0 @@
-/* Welcome to Compass. Use this file to define print styles.
- * Import this file using the following HTML or equivalent:
- * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

css/friendly.css

@@ -0,0 +1,61 @@
+pre code .hll { background-color: #ffffcc }
+pre code .c { color: #60a0b0; font-style: italic } /* Comment */
+pre code .err { border: 1px solid #FF0000 } /* Error */
+pre code .k { color: #007020; font-weight: bold } /* Keyword */
+pre code .o { color: #666666 } /* Operator */
+pre code .cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */
+pre code .cp { color: #007020 } /* Comment.Preproc */
+pre code .c1 { color: #60a0b0; font-style: italic } /* Comment.Single */
+pre code .cs { color: #60a0b0; background-color: #fff0f0 } /* Comment.Special */
+pre code .gd { color: #A00000 } /* Generic.Deleted */
+pre code .ge { font-style: italic } /* Generic.Emph */
+pre code .gr { color: #FF0000 } /* Generic.Error */
+pre code .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+pre code .gi { color: #00A000 } /* Generic.Inserted */
+pre code .go { color: #808080 } /* Generic.Output */
+pre code .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
+pre code .gs { font-weight: bold } /* Generic.Strong */
+pre code .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+pre code .gt { color: #0040D0 } /* Generic.Traceback */
+pre code .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
+pre code .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
+pre code .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
+pre code .kp { color: #007020 } /* Keyword.Pseudo */
+pre code .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
+pre code .kt { color: #902000 } /* Keyword.Type */
+pre code .m { color: #40a070 } /* Literal.Number */
+pre code .s { color: #4070a0 } /* Literal.String */
+pre code .na { color: #4070a0 } /* Name.Attribute */
+pre code .nb { color: #007020 } /* Name.Builtin */
+pre code .nc { color: #0e84b5; font-weight: bold } /* Name.Class */
+pre code .no { color: #60add5 } /* Name.Constant */
+pre code .nd { color: #555555; font-weight: bold } /* Name.Decorator */
+pre code .ni { color: #d55537; font-weight: bold } /* Name.Entity */
+pre code .ne { color: #007020 } /* Name.Exception */
+pre code .nf { color: #06287e } /* Name.Function */
+pre code .nl { color: #002070; font-weight: bold } /* Name.Label */
+pre code .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
+pre code .nt { color: #062873; font-weight: bold } /* Name.Tag */
+pre code .nv { color: #bb60d5 } /* Name.Variable */
+pre code .ow { color: #007020; font-weight: bold } /* Operator.Word */
+pre code .w { color: #bbbbbb } /* Text.Whitespace */
+pre code .mf { color: #40a070 } /* Literal.Number.Float */
+pre code .mh { color: #40a070 } /* Literal.Number.Hex */
+pre code .mi { color: #40a070 } /* Literal.Number.Integer */
+pre code .mo { color: #40a070 } /* Literal.Number.Oct */
+pre code .sb { color: #4070a0 } /* Literal.String.Backtick */
+pre code .sc { color: #4070a0 } /* Literal.String.Char */
+pre code .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
+pre code .s2 { color: #4070a0 } /* Literal.String.Double */
+pre code .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
+pre code .sh { color: #4070a0 } /* Literal.String.Heredoc */
+pre code .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
+pre code .sx { color: #c65d09 } /* Literal.String.Other */
+pre code .sr { color: #235388 } /* Literal.String.Regex */
+pre code .s1 { color: #4070a0 } /* Literal.String.Single */
+pre code .ss { color: #517918 } /* Literal.String.Symbol */
+pre code .bp { color: #007020 } /* Name.Builtin.Pseudo */
+pre code .vc { color: #bb60d5 } /* Name.Variable.Class */
+pre code .vg { color: #bb60d5 } /* Name.Variable.Global */
+pre code .vi { color: #bb60d5 } /* Name.Variable.Instance */
+pre code .il { color: #40a070 } /* Literal.Number.Integer.Long */

css/screen.scss

@@ -0,0 +1,157 @@
+---
+---
+
+$bg: #eee;
+$text: #444;
+$strong: #111;
+$dim: #999;
+$links: #55f;
+$rule: #999;
+$tr-rule: #ccc;
+$highlight: #ccc;
+
+$width: 800px;
+$margin: 17px;
+$in_width: $width - $margin;
+$small-width: 500px;
+
+/* reset */
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
+ margin:0;
+ padding:0;
+ border:0;
+ font:inherit;
+ font-size:100%;
+ vertical-align:baseline
+}
+
+@font-face {
+ font-family:"OpenSans";
+ src:url('/css/fonts/OpenSans.woff') format('woff')
+}
+@font-face {
+ font-family:"OpenSansLight";
+ src:url('/css/fonts/OpenSans-Light.woff') format('woff')
+}
+@font-face {
+ font-family:"OpenSans";
+ src:url('/css/fonts/OpenSans-Italic.woff') format('woff');
+ font-style:italic
+}
+
+html, body { height: 100%; text-align: justify;
+             background-color: $bg; color: $text;
+             font-family: "OpenSans", sans;
+             line-height: 1.4em; }
+
+a { text-decoration: none; color: $links; }
+a:hover { text-decoration: underline; }
+
+strong { font-weight: bold; }
+
+hr { height: 1px; border: none; background-color: $rule; margin-top: 1em; }
+
+section h1 { font-size: 150%; border-left: 4px solid $links;
+             padding-left: 11px; margin-left: -$margin; }
+
+section h2 { font-size: 120%; font-weight: bold; }
+
+section h3 { font-size: 100%; font-weight: bold; }
+
+h1, h2, h3, h4, h5 { margin: 0.7em 0 0.5em 0; }
+
+header { text-align: center; font-family: "OpenSansLight", sans;
+         line-height: 1.3em; font-weight: 400; font-size: 1.2em;
+         padding-top: 1em; }
+
+header h1 { font-size: 1.5em; margin:0 0 0.3em 0; }
+
+header a { color: $text; }
+
+pre { background-color: #f5f5f5; padding: 0.5em; margin: 0.5em 0; }
+code { font-family: mono; }
+
+nav { text-align: center; font-size: 120%; margin: 1em 0; }
+nav ul li { display: inline; margin: 0; clear: both; padding: 0 10px 0 11px; }
+nav ul li:nth-child(n+2) { border-left: 1px solid $rule; }
+
+footer { font-size: 75%; padding-bottom: 175px; }
+
+em { font-style: italic; }
+
+table { width: 100%; }
+thead { color: $dim; }
+th, td { padding: 0.3em; }
+tr { border-bottom: 1px dotted $tr-rule; }
+
+.publi_table td:nth-child(1) { width: 30%; }
+.publi_table td:nth-child(2) { width: 60%; }
+.publi_table td:nth-child(3) { width: 10%; }
+
+ul { list-style-image: url('/images/bullet_dark.png'); }
+ul li { margin-left: 1em; }
+
+ol { list-style-type: decimal; }
+ol li { padding: 0.5em 10px 0.5em 0; }
+ol li:nth-child(n+2) { border-top: 1px solid #ddd; }
+ol li:hover { border-right: 3px solid $links; padding-right: 7px; }
+
+.float-left { float: left; }
+.right, .float-right { float: right; margin-left: 1em; }
+.clear { clear: both; }
+
+.switcher { float: left; }
+
+.credits { color: $dim; }
+
+.centered_img { display: block; margin: 1em auto; }
+
+#wrapper { max-width: $in_width; margin: auto; }
+#outter-wrapper { width: 100%; height: auto; min-height: 100%; position: relative; }
+#foot_image { height: 150px; background: linear-gradient(to top, #FFFFFF 0%, #FFFFFF 50%, #EEEEEE 100%);
+          position: absolute; bottom: 0px; width: 100%; text-align: center; overflow: hidden; }
+#clouds { background-image: url('../images/clouds.png'); height: 150px; width: 200%;
+          position: relative; top: -150px; margin-bottom: -150px; }
+#foot_image:active #ski { visibility: visible; animation: ski 3s linear; }
+#clouds:hover { animation: clouds 100s infinite linear; }
+#ski { position: relative; visibility: hidden; top: -107px; left: -210px; }
+
+#portrait { margin: 0 15px 15px 0; padding: 23px 0 18px 0; width: 150px; display: inline-block; vertical-align:middle; }
+
+#info span { display: inline-block; width: 100%; max-width: 618px; vertical-align: middle; }
+
+#cv_title { font-family: "OpenSansLight",sans; font-size: 2em; margin: 1em; }
+
+#http_code { text-align: center; font-size: 10em; line-height: 1em; }
+
+@media (max-width: $small-width) {
+    body { font-size: 80%; }
+    .switcher { float: none; }
+}
+
+@media (max-width: $width) {
+#outter-wrapper { width: 100%; }
+header h1 { font-size: 1.2em; }
+header { font-size: 1em; }
+body { padding: 0 $margin; }
+#foot_image { display: none; }
+footer { display: none; }
+}
+
+@keyframes clouds {
+    0% { transform: translate(0, 0); }
+    100% { transform: translate(-774px, 0); }
+}
+
+@keyframes ski {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  10% { transform: translate(10px, 0) rotate(0deg); }
+  20% { transform: translate(10px, 8px) rotate(45deg); }
+  25% { transform: translate(25px, 16px) rotate(15deg); }
+  30% { transform: translate(55px, 32px) rotate(0deg); }
+  40% { transform: translate(90px, 20px) rotate(-20deg); }
+  50% { transform: translate(110px, 15px) rotate(-200deg); }
+  60% { transform: translate(130px, 35px) rotate(-380deg); }
+  68% { transform: translate(164px, 27px) rotate(-360deg); }
+  100% { transform: translate(300px, 66px) rotate(20deg); }
+}

stylesheets/screen.css

@@ -1 +0,0 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}@font-face{font-family:"OpenSans";src:url('/stylesheets/fonts/OpenSans.woff') format('woff')}@font-face{font-family:"OpenSansLight";src:url('/stylesheets/fonts/OpenSans-Light.woff') format('woff')}@font-face{font-family:"OpenSans";src:url('/stylesheets/fonts/OpenSans-Italic.woff') format('woff');font-style:italic}html,body{height:100%;text-align:justify;background-color:#eee;color:#444;font-family:"OpenSans", sans;line-height:1.4em}a{text-decoration:none;color:#55f}a:hover{text-decoration:underline}strong{font-weight:bold}hr{height:1px;border:none;background-color:#999;margin-top:1em}section h1{font-size:150%;border-left:4px solid #55f;padding-left:11px;margin-left:-17px}section h2{font-size:120%;font-weight:bold}section h3{font-size:100%;font-weight:bold}h1,h2,h3,h4,h5{margin:0.7em 0 0.5em 0}header{text-align:center;font-family:"OpenSansLight", sans;line-height:1.3em;font-weight:400;font-size:1.2em;padding-top:1em}header h1{font-size:1.5em;margin:0 0 0.3em 0}header a{color:#444}pre{background-color:#f5f5f5;padding:0.5em;margin:0.5em 0}code{font-family:mono}nav{text-align:center;font-size:120%;margin:1em 0}nav ul li{display:inline;margin:0;clear:both;padding:0 10px 0 11px}nav ul li:nth-child(n+2){border-left:1px solid #999}footer{font-size:75%;padding-bottom:175px}em{font-style:italic}table{width:100%}thead{color:#999}th,td{padding:0.3em}tr{border-bottom:1px dotted #ccc}.publi_table td:nth-child(1){width:30%}.publi_table td:nth-child(2){width:60%}.publi_table td:nth-child(3){width:10%}ul{list-style-image:url("/images/bullet_dark.png")}ul li{margin-left:1em}ol{list-style-type:decimal}ol li{padding:0.5em 10px 0.5em 0}ol li:nth-child(n+2){border-top:1px solid #ddd}ol li:hover{border-right:3px solid #55f;padding-right:7px}.float-left{float:left}.right,.float-right{float:right}.clear{clear:both}.switcher{float:left}.credits{color:#999}.centered_img{display:block;margin:1em auto}#wrapper{max-width:783px;margin:auto}#outter-wrapper{width:100%;height:auto;min-height:100%;position:relative}#foot_image{height:150px;background:linear-gradient(to top, #ffffff 0%,#ffffff 50%,#eeeeee 100%);position:absolute;bottom:0px;width:100%;text-align:center;overflow:hidden}#clouds{background-image:url("../images/clouds.png");height:150px;width:200%;position:relative;top:-150px;margin-bottom:-150px}#foot_image:active #ski{visibility:visible;animation:ski 3s linear}#clouds:hover{animation:clouds 100s infinite linear}#ski{position:relative;visibility:hidden;top:-107px;left:-210px}#portrait{margin:0 15px 15px 0;padding:23px 0 18px 0;width:150px;display:inline-block;vertical-align:middle}#info span{display:inline-block;width:100%;max-width:618px;vertical-align:middle}#cv_title{font-family:"OpenSansLight",sans;font-size:2em;margin:1em}#http_code{text-align:center;font-size:10em;line-height:1em}@media (max-width: 500px){body{font-size:80%}.switcher{float:none}}@media (max-width: 800px){#outter-wrapper{width:100%}header h1{font-size:1.2em}header{font-size:1em}body{padding:0 17px}#foot_image{display:none}footer{display:none}}@keyframes clouds{0%{transform:translate(0, 0)}100%{transform:translate(-774px, 0)}}@keyframes ski{0%{transform:translate(0, 0) rotate(0deg)}10%{transform:translate(10px, 0) rotate(0deg)}20%{transform:translate(10px, 8px) rotate(45deg)}25%{transform:translate(25px, 16px) rotate(15deg)}30%{transform:translate(55px, 32px) rotate(0deg)}40%{transform:translate(90px, 20px) rotate(-20deg)}50%{transform:translate(110px, 15px) rotate(-200deg)}60%{transform:translate(130px, 35px) rotate(-380deg)}68%{transform:translate(164px, 27px) rotate(-360deg)}100%{transform:translate(300px, 66px) rotate(20deg)}}