refactor css
This commit is contained in:
Gaspard Jankowiak
parent
2e7e15771b
commit
0f5cead0d9
13 changed files with 27 additions and 21 deletions
BIN
css/fonts/OpenSans-Italic.woff
Normal file
BIN
css/fonts/OpenSans-Italic.woff
Normal file
Binary file not shown.
BIN
css/fonts/OpenSans-Light.woff
Normal file
BIN
css/fonts/OpenSans-Light.woff
Normal file
Binary file not shown.
BIN
css/fonts/OpenSans-LightItalic.woff
Normal file
BIN
css/fonts/OpenSans-LightItalic.woff
Normal file
Binary file not shown.
BIN
css/fonts/OpenSans-Semibold.woff
Normal file
BIN
css/fonts/OpenSans-Semibold.woff
Normal file
Binary file not shown.
BIN
css/fonts/OpenSans-SemiboldItalic.woff
Normal file
BIN
css/fonts/OpenSans-SemiboldItalic.woff
Normal file
Binary file not shown.
BIN
css/fonts/OpenSans.woff
Normal file
BIN
css/fonts/OpenSans.woff
Normal file
Binary file not shown.
61
css/friendly.css
Normal file
61
css/friendly.css
Normal file
|
|
@ -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 */
|
||||
157
css/screen.scss
Normal file
157
css/screen.scss
Normal file
|
|
@ -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); }
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue