From db789913e2f04db96a814188ce537d6ddffeb17e Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Tue, 24 Jan 2012 22:28:08 +0100 Subject: [PATCH] Initial commit --- .gitignore | 1 + index.html | 25 ++++ y.css | 263 +++++++++++++++++++++++++++++++++++++++ y.sass | 354 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 643 insertions(+) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 y.css create mode 100644 y.sass diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5df1b9b --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.sass-cache diff --git a/index.html b/index.html new file mode 100644 index 0000000..5d0074a --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + HTML Title + + +

This is the main page title

+

With a subtitle

+
+ + <h1>The article title</h1> + +

This is the article

+

A sub title

+

Something to say? This is a link

+
+ This is a blockquote +
+
+ + + diff --git a/y.css b/y.css new file mode 100644 index 0000000..9db4d47 --- /dev/null +++ b/y.css @@ -0,0 +1,263 @@ +/* Colors (might be simplified) */ +/* End for colors */ +/* Blocks */ +/* End for blocks */ +/* Generic styles */ +body { + color: #333333; + background-color: #fafafa; } + +a:hover { + text-shadow: 0 0 2px #ffaaaa; } + +a, a:link, a:visited, a:active, a:hover { + text-decoration: none; + outline: none; } + +a, a:link, a:visited, a:active { + color: #333333; } + +a:hover { + color: #aa5533; } + +hr { + color: #eeeeee; + border-top: 1px solid #eeeeee; + border-bottom: none; + border-left: none; + border-right: none; } + +/* List decaled */ +ul { + list-style: square; } + +ol, ul { + padding-left: 0; } + +ol li, ul li { + margin: 0.5em 0; } + +ol li ul, ol li ol, ul li ol, ul li ul { + margin: 0.5em 1.5em; + list-style: circle; } + +body, h1, h2, h3, h4 { + font-family: Georgia, Palatino, "Century Schoolbook L", "Times New Roman", Times, serif; + line-height: 1.4em; } + +article { + text-align: left; + width: 35em; + display: block; + margin: 2em auto; + /* Header Numbering */ + counter-reset: niv02; + /* End of Header Numbering */ } + article h2 { + counter-increment: niv02; + counter-reset: niv03; + marker-offset: 3em; } + article h2:before { + content: counter(niv02) ". "; } + article h3 { + counter-increment: niv03; + counter-reset: niv04; } + article h3:before { + content: counter(niv02) "." counter(niv03) ". "; } + article h4 { + counter-increment: niv04; } + article h4:before { + content: counter(niv02) "." counter(niv03) "." counter(niv04) ". "; } + +pre { + background-color: #333333; + color: #fafafa; + box-shadow: 0 0 1em black inset; + border-radius: 3px; + padding: 1em; + line-height: 1.2em; + font-size: 0.9em; } + +p { + margin-bottom: 1.2em; } + +blockquote { + font-style: italic; + padding: 0.5em 1em; + color: #555555; + background-color: #f2f2f2; + border: 1px solid #cccccc; } + blockquote a:hover { + color: #aa5533; } + blockquote strong, blockquote b, blockquote i, blockquote em { + font-weight: normal; + font-style: normal; + color: #333333; } + +abbr, +acronym { + font-variant: small-caps; + text-decoration: none; + border-bottom-width: 0; } + +.tiny { + font-size: 0.7em; } + +.small { + font-size: 0.8em; } + +.sc { + font-variant: small-caps; } + +.intro, .resume { + font-size: 0.9em; + font-style: italic; + padding: 0.5em 1em; + color: #555555; } + .intro a:hover, .resume a:hover { + color: #aa5533; } + .intro strong, .intro b, .intro i, .intro em, .resume strong, .resume b, .resume i, .resume em { + font-weight: normal; + font-style: normal; + color: #333333; } + +/* End of Typography classes */ +body { + text-align: center; + font-size: 18px; } + +footer { + color: #cccccc; } + footer a { + color: #cccccc; } + footer a:hover { + color: #aa5533; } + +/* Layout helper put a
to reset floats. + * Not the cleanest, but efficient */ +.clear { + clear: both; } + +.box { + color: #333333; + border: #cccccc solid 1px; + border-radius: 5px; + box-shadow: 0 0 2px #cccccc inset; + background-color: #eeeeee; } + .box a { + color: #666666; } + .box a:hover { + color: #aa5533; } + .box a:hover strong, .box a:hover b, .box a:hover i, .box a:hover em, .box a:hover .nicer { + color: #ffbb99; } + .box hr { + color: #666666; + border-top: 1px solid #666666; } + .box strong, .box b, .box i, .box em { + color: #333333; } + +img { + max-width: 30em; + border: 1px solid #cccccc; + background-color: #fafafa; + padding: 0.5em; + box-shadow: 0 10px 15px #cccccc; + border-radius: 3px; } + +a:hover img { + background-color: #bb4422; } + +img .left, img .right { + max-width: 33%; + margin-top: 0.6em; + margin-bottom: 0.6em; } +img .left { + float: left; + margin-left: 0; + margin-right: 2em; } +img .right { + float: right; + margin-left: 2em; + margin-right: 0; } + +img.inside { + display: inline; + vertical-align: middle; } + +pre { + overflow-x: auto; + overflow-y: hidden; } + +.footnotes { + font-size: 0.8em; } + .footnotes ol { + color: #cccccc; + font-weight: bold; + margin-left: 0; } + .footnotes ol p { + color: #333333; + font-weight: normal; } + +strong, b, i, em { + font-weight: normal; + color: #888888; } + strong a, b a, i a, em a { + color: #333333; } + strong a:hover, b a:hover, i a:hover, em a:hover { + color: #aa5533; } + +article a:hover strong, article a:hover b, article a:hover i, article a:hover em { + color: #e25f2f; } + +a:hover .nicer { + color: #ffbb99; } + +.nicer { + color: #cccccc; + font-family: "Lucida Grande", Tahoma; } + +.left { + float: left; } + +.right { + float: right; } + +article p a, article ul a { + color: #555555; } +article p a:hover, article ul a:hover { + color: #aa5533; } + +article a:after { + content: "†"; + vertical-align: super; + line-height: 0; + font-size: 0.66em; + color: #888888; } + article a:after .footnotes a:after, article a:after sup a:after { + content: ""; } + article a:after sup a { + font-weight: bold; + background: #cccccc; + padding: 0 0.3em; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + color: #fafafa; } + article a:after sup a:hover { + background: #aa5533; } + +table { + border: 1px solid #cccccc; } + +table tr td { + padding: 2px 0.5em; } + +table tr:nth-child(odd) { + background-color: #f2f2f2; } +table tr:nth-child(even) { + background-color: #fafafa; } + +p code { + background: #f2f2f2; + border: solid 1px #cccccc; + padding: 2px; } diff --git a/y.sass b/y.sass new file mode 100644 index 0000000..e22f8f4 --- /dev/null +++ b/y.sass @@ -0,0 +1,354 @@ +/* Colors (might be simplified) */ +$behindColor: #333 +$mainTextColor: $behindColor +$mainBackgroundColor: #FAFAFA +$mainShadowColor: $mainBackgroundColor - #333 +$secondBackgroundColor: #F2F2F2 +$revealColor: #A53 +$secondRevealColor: #AA5533 +$lighterRevealColor: $revealColor + #666 +$imageBackgroundColor: $mainBackgroundColor +$imageBorderColor: #cccccc +$borderColor: #cccccc +$mainLinkColor: $mainTextColor +$textLinkColor: #555555 +$highlightColor: #888888 +$highlightBlockColor: #555555 +$highlightRevealColor: #e25f2f +$lighterText: #cccccc +$lighterColor: #eeeeee +$lighterColorBorderTop: $lighterText +$lighterColorBorderBottom: $lighterText +$secondTextColor: #666666 +$codeBlockColor: $mainBackgroundColor +$codeBlockBackgroundColor: $behindColor +/* End for colors */ + +/* Blocks */ +=mainColor + color: $behindColor + background: + color: $mainBackgroundColor + +=lightColor + color: $lighterText + a + color: $lighterText + a:hover + color: $lighterRevealColor + +=highlight + font: + style: italic + padding: 0.5em 1em + color: $highlightBlockColor + a:hover + color: $revealColor + strong, b, i, em + font: + weight: normal + style: normal + color: $behindColor + +=secondColor + color: $behindColor + border: $borderColor solid 1px + border-radius: 5px + box-shadow: 0 0 2px $borderColor inset + background: + color: $lighterColor + a + color: $secondTextColor + a:hover + color: $secondRevealColor + strong, b, i, em, .nicer + color: $lighterRevealColor + hr + color: $secondTextColor + border: + top: 1px solid $secondTextColor + strong, b, i, em + color: $behindColor + +=revealColor + color: $revealColor + +=codeColor + background: + color: $codeBlockBackgroundColor + color: $codeBlockColor + +=insetbox + background: rgba(#000,.05) + box-shadow: 0 0 2px #FFF, 0 0 3px #CCC inset + border: 1px solid rgba(#000,.1) + border-radius: 3px + &:hover + background: rgba(#000,.1) + box-shadow: 0 0 6px #555 inset + +=clearbutton + display: block + width: 25% + cursor: pointer + margin: 1em 0 + padding: 1em + font-size: 16px + line-height: 1.4em + border-radius: 5px + border: 2px solid $mainBackgroundColor + color: $lighterText + &:hover + color: $highlightRevealColor + text-shadow: 0 0 2px #FAA + background: #ECECEC + box-shadow: 0 -1px 8px #CCC inset + &:active + color: $highlightRevealColor + text-shadow: 0 0 2px #FAA + background: #EEE + box-shadow: 0 -1px 8px #AAA inset + +/* End for blocks */ + +/* Generic styles */ +body + +mainColor + +a:hover + text-shadow: 0 0 2px #FAA + +a, a:link, a:visited, a:active, a:hover + text-decoration: none + outline: none + +a, a:link, a:visited, a:active + color: $mainLinkColor + +a:hover + +revealColor + +hr + color: $lighterColor + border: + top: 1px solid $lighterColor + bottom: none + left: none + right: none + +/* List decaled */ +ul + list-style: square + +ol,ul + padding-left: 0 +ol li, ul li + margin: .5em 0 +ol li ul, ol li ol, ul li ol, ul li ul + margin: .5em 1.5em + list-style: circle + +body, h1, h2, h3, h4 + font-family: Georgia, Palatino, "Century Schoolbook L", "Times New Roman", Times, serif + line-height: 1.4em + +article + text-align: left + width: 35em + display: block + margin: 2em auto + /* Header Numbering */ + counter-reset: niv02 + h2 + counter-increment: niv02 + counter-reset: niv03 + marker-offset: 3em + &:before + content: counter(niv02) ". " + h3 + counter-increment: niv03 + counter-reset: niv04 + &:before + content: counter(niv02) "." counter(niv03) ". " + h4 + counter-increment: niv04 + &:before + content: counter(niv02) "." counter(niv03) "." counter(niv04) ". " + /* End of Header Numbering */ + +pre + +codeColor + box-shadow: 0 0 1em #000 inset + border-radius: 3px + padding: 1em + line-height: 1.2em + font-size: .9em + +p + margin-bottom: 1.2em + +blockquote + +highlight + background-color: $secondBackgroundColor + border: 1px solid $borderColor + +abbr, +acronym + font-variant: small-caps + text: + decoration: none + border: + bottom: + width: 0 + +// -- TYPOGRAPHY -- +.tiny + font-size: 0.7em + +.small + font-size: 0.8em + +.sc + font-variant: small-caps + +.intro, .resume + font-size: 0.9em + +highlight +/* End of Typography classes */ + +// --- LAYOUTS -- +$VPadCorps: 3em +$VMarginCorps: 3em +$content_width: 52em + +body + text-align: center + font-size: 18px + +footer + color: $lighterText + a + color: $lighterText + a:hover + +revealColor + +/* Layout helper put a
to reset floats. + * Not the cleanest, but efficient */ +.clear + clear: both + +.box + +secondColor + +img + max-width: 30em + border: 1px solid $imageBorderColor + background-color: $imageBackgroundColor + padding: 0.5em + box-shadow: 0 10px 15px #CCC + border-radius: 3px + +a:hover img + background-color: $revealColor + #100 - #011 + +img + .left, .right + max-width: 33% + margin: + top: .6em + bottom: .6em + .left + float: left + margin: + left: 0 + right: 2em + .right + float: right + margin: + left: 2em + right: 0 + +img.inside + display: inline + vertical-align: middle + +pre + overflow-x: auto + overflow-y: hidden + +.footnotes + font-size: 0.8em + ol + color: #CCC + font-weight: bold + margin-left: 0 + p + color: $behindColor + font-weight: normal + +strong, b, i, em + font-weight: normal + color: $highlightColor + a + color: $mainTextColor + a:hover + color: $revealColor + +article + a:hover + strong, b, i, em + color: $highlightRevealColor + +a:hover .nicer + color: $lighterRevealColor + +.nicer + color: $lighterText + font-family: "Lucida Grande", Tahoma + +.left + float: left + +.right + float: right + +article + p a, ul a + color: $textLinkColor + p a:hover, ul a:hover + color: $revealColor + +article a:after + content: "†" + vertical-align: super + line-height: 0 + font-size: .66em + color: $highlightColor + .footnotes, sup + a:after + content: "" + sup a + font-weight: bold + background: #CCC + padding: 0 .3em + border-radius: 3px + -moz-border-radius: 3px + -webkit-border-radius: 3px + color: $mainBackgroundColor + &:hover + background: $revealColor + +table + border: 1px solid $borderColor +table tr td + padding: 2px .5em +table tr + &:nth-child(odd) + background-color: $secondBackgroundColor + &:nth-child(even) + background-color: $mainBackgroundColor + +p code + background: $secondBackgroundColor + border: solid 1px $borderColor + padding: 2px