diff --git a/themes/hello/README.md b/themes/hello/README.md index 0bae686..63d2b7a 100755 --- a/themes/hello/README.md +++ b/themes/hello/README.md @@ -4,6 +4,6 @@ hello Un thème pour [Miniflux 1.1.3](http://miniflux.net/) avec utilisation de : * Font Awesome 4 .1 [http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/) -* Oxygen-Sans -* Open Sans + + diff --git a/themes/hello/config.rb b/themes/hello/config.rb new file mode 100755 index 0000000..6b15afb --- /dev/null +++ b/themes/hello/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/miniflux/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +fonts_dir = "fonts" + +# You can select your preferred output style here (can be overridden via the command line): +# output_style = :expanded or :nested or :compact or :compressed +output_style = :nested + +# To enable relative paths to assets via compass helper functions. Uncomment: +relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +line_comments = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass assets/sass scss && rm -rf sass && mv scss sass diff --git a/themes/hello/css/app.css b/themes/hello/css/app.css old mode 100644 new mode 100755 index d093dbd..997ae43 --- a/themes/hello/css/app.css +++ b/themes/hello/css/app.css @@ -1,3 +1,5 @@ +@charset "UTF-8"; +@import url(http://fonts.googleapis.com/css?family=Montserrat:700,400); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -13,14 +15,14 @@ menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; - border: 0; } - -html { - line-height: 1; + border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } +html { + line-height: 1; } + ol, ul { list-style: none; } @@ -42,140 +44,84 @@ q, blockquote { a img { border: none; } -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { +article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - word-wrap: break-word; } +.alert.alert-normal h3, .page-header h2, .page-section h2, .items article h2 a, #current-item > h1 { + font-family: "Montserrat", sans-serif; + font-weight: 700; + font-size: 1rem; } -strong { - font-weight: bold; } +.items article .preview { + font-family: Helvetica, Arial, sans-serif; + font-size: 0.9rem; } -/* -* Font awesome -*/ @font-face { font-family: 'FontAwesome'; src: url("../fonts/fontawesome-webfont.eot?v=4.1.0"); src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } +header nav li > a:before, .page-header ul li a, .items .item-menu li a:before { + font-family: "FontAwesome"; } -header nav li > a:before, .page-header ul li a, .items .item-menu li a { - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } - -/* -* Open Sans -* -*/ -@font-face { - font-family: "OpenSansLight"; - src: url(../fonts/OpenSans-Light-webfont.eot); - src: url(../fonts/OpenSans-Light-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/OpenSans-Light-webfont.woff) format("woff"), url(../fonts/OpenSans-Light-webfont.ttf) format("truetype"), url(../fonts/OpenSans-Light-webfont.svg#OpenSansLight) format("svg"); - font-weight: normal; - font-style: normal; } - -@font-face { - font-family: "OpenSansRegular"; - src: url(../fonts/OpenSans-Regular-webfont.eot); - src: url(../fonts/OpenSans-Regular-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/OpenSans-Regular-webfont.woff) format("woff"), url(../fonts/OpenSans-Regular-webfont.ttf) format("truetype"), url(../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format("svg"); - font-weight: normal; - font-style: normal; } - -@font-face { - font-family: "OpenSansRegular"; - src: url(../fonts/OpenSans-Bold-webfont.eot); - src: url(../fonts/OpenSans-Bold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/OpenSans-Bold-webfont.woff) format("woff"), url(../fonts/OpenSans-Bold-webfont.ttf) format("truetype"), url(../fonts/OpenSans-Bold-webfont.svg#OpenSansBold) format("svg"); - font-weight: bold; - font-style: normal; } - -/* -* Oxygen -* -*/ -@font-face { - font-family: 'Oxygen-Sans'; - src: url("../fonts/oxygen-sans-webfont.eot"); - src: url("../fonts/oxygen-sans-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/oxygen-sans-webfont.woff") format("woff"), url("../fonts/oxygen-sans-webfont.ttf") format("truetype"), url("../fonts/oxygen-sans-webfont.svg#oxygen-sanssans-book") format("svg"); - font-weight: normal; - font-style: normal; } - -@font-face { - font-family: 'Oxygen-Sans'; - src: url("../fonts/oxygen-sans-bold-webfont.eot"); - src: url("../fonts/oxygen-sans-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/oxygen-sans-bold-webfont.woff") format("woff"), url("../fonts/oxygen-sans-bold-webfont.ttf") format("truetype"), url("../fonts/oxygen-sans-bold-webfont.svg#oxygen-sanssans-bold") format("svg"); - font-weight: bold; - font-style: normal; } - -form input, -form button, -form textarea, -form select { - font-family: "Oxygen-Sans", sans-serif; - font-size: 1em; - color: #595959; } -form input, -form textarea, -form select { - background-color: white; - border: 1px solid #f2f2f2; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; - border-radius: 5px; - padding: 5px; } -form label, -form input, -form select { - display: -moz-inline-stack; - display: inline-block; - vertical-align: middle; - *vertical-align: auto; - zoom: 1; - *display: inline; } -form label[for*="form-"] { - width: 26.35432%; } -form input[type="submit"], -form button[type="button"], -form button[type="submit"] { - background-color: #009463; - color: #f2f2f2; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; - border-radius: 5px; - cursor: pointer; - padding: 10px; - border: 1px solid #f2f2f2; } -form ul { - list-style-type: square; - margin: 10px 40px; } +form { + background-color: #fFFFFF; + padding: 10px; } + form input, + form button, + form textarea, + form select { + font-family: Helvetica, Arial, sans-serif; + font-size: 1em; + color: #595959; } + form input, + form textarea, + form select { + background-color: white; + border: 1px solid #f2f2f2; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + padding: 5px; } + form label, + form input, + form select { + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + *zoom: 1; + *display: inline; } + form label[for*="form-"] { + width: 26.35432%; } + form input[type="submit"], + form button[type="button"], + form button[type="submit"] { + background-color: #009463; + color: #f2f2f2; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + cursor: pointer; + padding: 10px; + border: 1px solid #f2f2f2; } + form ul { + list-style-type: square; + margin: 10px 40px; } .alert { padding: 5px 10px; border: 1px solid #f2f2f2; - margin: 10px 0; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; - border-radius: 5px; } + margin: 10px 0; } .alert.alert-error { background-color: rgba(253, 242, 213, 0.7); color: rgba(77, 16, 10, 0.8); font-size: .8em; } .alert.alert-normal { - border-width: 0px; } + background-color: #fFFFFF; + border-width: 0px; + padding-top: 10px; + padding-bottom: 10px; } .alert.alert-normal ul { list-style-type: square; margin: 10px 40px; } @@ -195,9 +141,10 @@ form ul { display: none; } body { - font-family: "Oxygen-Sans", sans-serif; - font-size: 1em; - font-weight: normal; } + background-color: #e8e8e8; + font-family: Helvetica, Arial, sans-serif; + font-weight: normal; + line-height: 25px; } body > header, body > section { bottom: 0; @@ -215,39 +162,43 @@ header { header nav { margin: 20px auto; position: relative; - width: 150px; } + width: 90%; } header nav > ul { margin-top: 30px; } header nav li { line-height: 30px; } + header nav li.active a { + color: #edbf47; } header nav li > a { color: white; - font-family: "Oxygen-Sans", sans-serif; margin-left: 5px; - text-decoration: none; } + text-decoration: none; + font-family: "Montserrat", sans-serif; + font-weight: bold; } + header nav li > a:hover { + color: #edbf47; } header nav li > a:before { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; color: white; margin-right: 10px; text-align: center; width: 24px; } header nav li > a[href="?action=unread"]:before { - content: "\f0e0"; } + content: ""; } header nav li > a[href="?action=bookmarks"]:before { - content: "\f02e"; } + content: ""; } header nav li > a[href="?action=history"]:before { - content: "\f1da"; } + content: ""; } header nav li > a[href="?action=feeds"]:before { - content: "\f143"; } + content: ""; } header nav li > a[href="?action=config"]:before { - content: "\f1de"; } + content: ""; } header nav li > a[href="?action=logout"]:before { - content: "\f08b"; } + content: ""; } header nav li > a[href="?action=more"]:before { content: "\f009"; } header .logo { @@ -263,7 +214,7 @@ header { section.page { right: 0; - width: 85.35871%; + width: 81.69839%; padding: 10px 20px; } section.page .page-header { position: relative; } @@ -271,17 +222,22 @@ section.page { color: #009966; } .page-header { - margin: 0 0 15px; } + margin: 0 0 15px; + *zoom: 1; } + .page-header:after { + content: ""; + display: table; + clear: both; } + .page-header h2 { + float: left; + line-height: 30px; } .page-header ul { - position: absolute; - right: 0; - top: 5px; } + float: right; } .page-header ul li { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; text-align: center; } .page-header ul li a, @@ -296,13 +252,11 @@ section.page { color: #008055; position: relative; text-indent: -999px; - -webkit-border-radius: 5px; -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; + -webkit-border-radius: 5px; border-radius: 5px; - -webkit-box-shadow: 0 3px 0 #009966; -moz-box-shadow: 0 3px 0 #009966; + -webkit-box-shadow: 0 3px 0 #009966; box-shadow: 0 3px 0 #009966; } .page-header ul li a:after { position: absolute; @@ -330,45 +284,38 @@ section.page { .page-header ul li a[href="?action=feeds"]:after { content: "\f143"; } -.items article { - -webkit-box-shadow: 0 3px 0 #006644; - -moz-box-shadow: 0 3px 0 #006644; - box-shadow: 0 3px 0 #006644; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; - border-radius: 5px; - background-color: rgba(242, 242, 242, 0.29); +.page-section h2 { margin-bottom: 15px; - padding: 20px; } + margin-top: 15px; } + +.items article { + -moz-box-shadow: 0 3px 0 #006644; + -webkit-box-shadow: 0 3px 0 #006644; + box-shadow: 0 3px 0 #006644; + background-color: #fFFFFF; + margin-bottom: 15px; + padding: 10px 20px; } .items article[data-item-status="read"][data-item-page="feed-items"] { background-color: rgba(153, 153, 153, 0.7); } - .items article > h2, - .items article > p.preview { - display: block; - font-family: "OpenSansRegular", Helvetica, Arial, sans-serif; } .items article h2 { - font-size: 1em; - font-weight: normal; } + display: block; + margin-bottom: 5px; } .items article h2 a { color: #000; - font-weight: bold; text-decoration: none; } .items article h2 .feed-last-checked { font-size: .8em; } - .items article p.preview { - color: #4d4d4d; - font-size: 1em; - font-weight: normal; } + .items article .preview { + display: block; + line-height: 25px; } .items .item-menu { - font-size: .8em; } + font-size: 0.9rem; + margin-top: 5px; } .items .item-menu li { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; } .items .item-menu li:before { content: " / "; @@ -412,25 +359,48 @@ section.page { display: none; visibility: hidden; } +#items-paging { + display: block; + *zoom: 1; } + #items-paging:after { + content: ""; + display: table; + clear: both; } + #items-paging a { + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + -moz-box-shadow: 0 3px 0 #006644; + -webkit-box-shadow: 0 3px 0 #006644; + box-shadow: 0 3px 0 #006644; + background-color: #f2f2f2; + padding-left: 10px; + padding-right: 10px; + text-decoration: none; } + #items-paging #previous-page { + float: left; } + #items-paging #next-page { + float: right; } + #current-item { position: relative; } #current-item > nav { - position: absolute; - right: 0; - top: 0; *zoom: 1; } #current-item > nav:after { content: ""; display: table; clear: both; } + #current-item > nav.top { + display: block; + float: right; } + #current-item > nav.bottom { + display: none; } #current-item > nav span { - -webkit-box-shadow: 0 3px 0 #009966; -moz-box-shadow: 0 3px 0 #009966; + -webkit-box-shadow: 0 3px 0 #009966; box-shadow: 0 3px 0 #009966; - -webkit-border-radius: 5px; -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; + -webkit-border-radius: 5px; border-radius: 5px; background-color: #f2f2f2; display: block; @@ -440,33 +410,41 @@ section.page { text-decoration: none; color: #009966; } #current-item > nav span.nav-left { - float: left; margin-right: 10px; } + float: left; + margin-right: 10px; } #current-item > nav span.nav-right { float: right; } #current-item > h1 { - font-size: 1.6em; } + display: inline-block; + float: left; + line-height: 25px; + margin-bottom: 20px; + max-width: 82%; } #current-item > h1 a { - color: black; - text-decoration: none; } + color: #000; + text-decoration: none; + vertical-align: middle; } #current-item .item-infos { border-bottom: 1px solid #b2b2b2; border-top: 1px solid #b2b2b2; - margin: 10px 0; - padding: 5px 0; } + clear: both; + display: block; + padding: 0; } #current-item .item-infos li { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; - font-size: 0.9em; } + font-size: 0.9rem; + margin: 10px 0; } #current-item .item-infos li:before { content: " / "; } #current-item .item-infos li:first-child:before { display: none; } #current-item .item-infos li a { color: #009966; + font-size: 0.9rem; text-decoration: none; } #current-item .item-infos li a:hover { text-decoration: underline; } @@ -479,43 +457,47 @@ section.page { clear: both; } #current-item #item-content #item-content-enclosure { display: none; } - #current-item #item-content h1, #current-item #item-content h2, #current-item #item-content h3, #current-item #item-content h4 { - padding: 15px 0 5px 0; } - #current-item #item-content h1 { - font-size: 1.5em; - margin-left: 5px; } - #current-item #item-content h2 { - font-size: 1.4em; - margin-left: 10px; } - #current-item #item-content h3 { - font-size: 1.3em; - margin-left: 15px; } - #current-item #item-content h4 { - font-size: 1.2em; - margin-left: 20px; } - #current-item #item-content p, - #current-item #item-content li { - line-height: 1.5; } - #current-item #item-content pre { - background-color: #f2f2f2; - border: 1px solid #b2b2b2; - padding: 10px; - margin: 10px 0; } - #current-item #item-content ul { - padding: 0 0 0 30px; - margin: 10px 0; - list-style-type: square; } - #current-item #item-content img { - margin: 15px auto 15px auto; - max-width: 95%; - width: 50%; - display: block; } - #current-item #item-content p, - #current-item #item-content br { - line-height: 30px; } + +#item-content h1, #item-content h2, #item-content h3, #item-content h4 { + font-family: "Montserrat", sans-serif; + padding: 15px 0 5px 0; } +#item-content h1 { + font-size: 1.5em; + margin-left: 5px; } +#item-content h2 { + font-size: 1.4em; + margin-left: 10px; } +#item-content h3 { + font-size: 1.3em; + margin-left: 15px; } +#item-content h4 { + font-size: 1.2em; + margin-left: 20px; } +#item-content ul, +#item-content ol { + list-style-type: square; + margin: 10px 0; + padding: 0 0 0 30px; } +#item-content pre, +#item-content q, +#item-content blockquote { + padding: 10px; + margin-top: 10px; + margin-bottom: 10px; + background-color: #fFFFFF; } +#item-content q, +#item-content blockquote { + margin-left: 20px; + margin-right: 20px; } +#item-content strong { + font-weight: bold; } +#item-content img { + display: block; + margin: 15px auto 15px auto; + max-width: 50%; } #login-page { - background-color: #fff; } + background-color: #e8e8e8; } #login-page section { width: auto; position: relative; @@ -526,15 +508,13 @@ section.page { #login-page .page-header { visibility: hidden; } #login-page form { - -webkit-border-radius: 10px; -moz-border-radius: 10px; - -ms-border-radius: 10px; - -o-border-radius: 10px; + -webkit-border-radius: 10px; border-radius: 10px; - -webkit-box-shadow: 0 3px 0 #009966; -moz-box-shadow: 0 3px 0 #009966; + -webkit-box-shadow: 0 3px 0 #009966; box-shadow: 0 3px 0 #009966; - background-color: rgba(216, 216, 216, 0.9); + background-color: #fFFFFF; margin-left: 20px; padding: 10px; } #login-page form > * { @@ -576,11 +556,10 @@ section.page { header nav > ul { margin: auto; } header nav li { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; padding: 5px 0; } header nav li:first-child { @@ -592,14 +571,12 @@ section.page { width: 35px; height: 35px; line-height: 35px; - -webkit-box-shadow: 0 3px 0 #009966; - -moz-box-shadow: 0 3px 0 #009966; - box-shadow: 0 3px 0 #009966; - -webkit-border-radius: 5px; -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; + -webkit-border-radius: 5px; border-radius: 5px; + -moz-box-shadow: 0 3px 0 #006644; + -webkit-box-shadow: 0 3px 0 #006644; + box-shadow: 0 3px 0 #006644; background-color: #f2f2f2; } header nav li a[href*="action=more"]:before { height: 100%; @@ -620,14 +597,12 @@ section.page { margin-top: 50px; } .menu-more li { display: block; - -webkit-box-shadow: 0 3px 0 #009966; - -moz-box-shadow: 0 3px 0 #009966; - box-shadow: 0 3px 0 #009966; - -webkit-border-radius: 5px; -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; + -webkit-border-radius: 5px; border-radius: 5px; + -moz-box-shadow: 0 3px 0 #006644; + -webkit-box-shadow: 0 3px 0 #006644; + box-shadow: 0 3px 0 #006644; background-color: #f2f2f2; margin: 10px auto; } .menu-more li a { @@ -636,11 +611,19 @@ section.page { text-decoration: none; width: 100%; } - .items article p.preview { + .items article .preview { display: none; } #current-item { padding-top: 35px; } + #current-item nav.top { + display: none; } + #current-item nav.bottom { + display: block; } + #current-item > h1 { + float: none; } + #current-item iframe { + width: 100%; } form label { display: block; } diff --git a/themes/hello/fonts/OpenSans-Bold-webfont.eot b/themes/hello/fonts/OpenSans-Bold-webfont.eot deleted file mode 100755 index 5d20d91..0000000 Binary files a/themes/hello/fonts/OpenSans-Bold-webfont.eot and /dev/null differ diff --git a/themes/hello/fonts/OpenSans-Bold-webfont.svg b/themes/hello/fonts/OpenSans-Bold-webfont.svg deleted file mode 100755 index 3ed7be4..0000000 --- a/themes/hello/fonts/OpenSans-Bold-webfont.svg +++ /dev/null @@ -1,1830 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/themes/hello/fonts/OpenSans-Bold-webfont.ttf b/themes/hello/fonts/OpenSans-Bold-webfont.ttf deleted file mode 100755 index 2109c95..0000000 Binary files a/themes/hello/fonts/OpenSans-Bold-webfont.ttf and /dev/null differ diff --git a/themes/hello/fonts/OpenSans-Bold-webfont.woff b/themes/hello/fonts/OpenSans-Bold-webfont.woff deleted file mode 100755 index 1205787..0000000 Binary files a/themes/hello/fonts/OpenSans-Bold-webfont.woff and /dev/null differ diff --git a/themes/hello/fonts/OpenSans-Light-webfont.eot b/themes/hello/fonts/OpenSans-Light-webfont.eot deleted file mode 100755 index 1486840..0000000 Binary files a/themes/hello/fonts/OpenSans-Light-webfont.eot and /dev/null differ diff --git a/themes/hello/fonts/OpenSans-Light-webfont.svg b/themes/hello/fonts/OpenSans-Light-webfont.svg deleted file mode 100755 index 11a472c..0000000 --- a/themes/hello/fonts/OpenSans-Light-webfont.svg +++ /dev/null @@ -1,1831 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/themes/hello/fonts/OpenSans-Light-webfont.ttf b/themes/hello/fonts/OpenSans-Light-webfont.ttf deleted file mode 100755 index 63af664..0000000 Binary files a/themes/hello/fonts/OpenSans-Light-webfont.ttf and /dev/null differ diff --git a/themes/hello/fonts/OpenSans-Light-webfont.woff b/themes/hello/fonts/OpenSans-Light-webfont.woff deleted file mode 100755 index e786074..0000000 Binary files a/themes/hello/fonts/OpenSans-Light-webfont.woff and /dev/null differ diff --git a/themes/hello/fonts/OpenSans-Regular-webfont.eot b/themes/hello/fonts/OpenSans-Regular-webfont.eot deleted file mode 100755 index 6bbc3cf..0000000 Binary files a/themes/hello/fonts/OpenSans-Regular-webfont.eot and /dev/null differ diff --git a/themes/hello/fonts/OpenSans-Regular-webfont.svg b/themes/hello/fonts/OpenSans-Regular-webfont.svg deleted file mode 100755 index 25a3952..0000000 --- a/themes/hello/fonts/OpenSans-Regular-webfont.svg +++ /dev/null @@ -1,1831 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/themes/hello/fonts/OpenSans-Regular-webfont.ttf b/themes/hello/fonts/OpenSans-Regular-webfont.ttf deleted file mode 100755 index c537f83..0000000 Binary files a/themes/hello/fonts/OpenSans-Regular-webfont.ttf and /dev/null differ diff --git a/themes/hello/fonts/OpenSans-Regular-webfont.woff b/themes/hello/fonts/OpenSans-Regular-webfont.woff deleted file mode 100755 index e231183..0000000 Binary files a/themes/hello/fonts/OpenSans-Regular-webfont.woff and /dev/null differ diff --git a/themes/hello/fonts/oxygen-sans-bold-webfont.eot b/themes/hello/fonts/oxygen-sans-bold-webfont.eot deleted file mode 100755 index 303f173..0000000 Binary files a/themes/hello/fonts/oxygen-sans-bold-webfont.eot and /dev/null differ diff --git a/themes/hello/fonts/oxygen-sans-bold-webfont.svg b/themes/hello/fonts/oxygen-sans-bold-webfont.svg deleted file mode 100755 index 6d52194..0000000 --- a/themes/hello/fonts/oxygen-sans-bold-webfont.svg +++ /dev/null @@ -1,346 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/themes/hello/fonts/oxygen-sans-bold-webfont.ttf b/themes/hello/fonts/oxygen-sans-bold-webfont.ttf deleted file mode 100755 index 5b40bb4..0000000 Binary files a/themes/hello/fonts/oxygen-sans-bold-webfont.ttf and /dev/null differ diff --git a/themes/hello/fonts/oxygen-sans-bold-webfont.woff b/themes/hello/fonts/oxygen-sans-bold-webfont.woff deleted file mode 100755 index 5d47a95..0000000 Binary files a/themes/hello/fonts/oxygen-sans-bold-webfont.woff and /dev/null differ diff --git a/themes/hello/fonts/oxygen-sans-webfont.eot b/themes/hello/fonts/oxygen-sans-webfont.eot deleted file mode 100755 index 411f5da..0000000 Binary files a/themes/hello/fonts/oxygen-sans-webfont.eot and /dev/null differ diff --git a/themes/hello/fonts/oxygen-sans-webfont.svg b/themes/hello/fonts/oxygen-sans-webfont.svg deleted file mode 100755 index 59f0ed0..0000000 --- a/themes/hello/fonts/oxygen-sans-webfont.svg +++ /dev/null @@ -1,264 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/themes/hello/fonts/oxygen-sans-webfont.ttf b/themes/hello/fonts/oxygen-sans-webfont.ttf deleted file mode 100755 index 19731e9..0000000 Binary files a/themes/hello/fonts/oxygen-sans-webfont.ttf and /dev/null differ diff --git a/themes/hello/fonts/oxygen-sans-webfont.woff b/themes/hello/fonts/oxygen-sans-webfont.woff deleted file mode 100755 index 82e018b..0000000 Binary files a/themes/hello/fonts/oxygen-sans-webfont.woff and /dev/null differ diff --git a/themes/hello/scss/_alert.scss b/themes/hello/scss/_alert.scss new file mode 100755 index 0000000..42aa54b --- /dev/null +++ b/themes/hello/scss/_alert.scss @@ -0,0 +1,49 @@ +.alert { + padding: 5px 10px; + border: 1px solid $button-background-grey; + margin: 10px 0; + + &.alert-error { + background-color: rgba(lighten($alert-warning, 30%), 0.7); + color: rgba(darken($alert-error, 40%), .8); + font-size: .8em; + } + + &.alert-normal { + background-color: $theme-background-light; + border-width: 0px; + padding: { + top: 10px; + bottom: 10px; + } + h3 { + @extend %title; + } + ul { + list-style-type: square; + margin: 10px 40px; + } + } + &.alert-info { + background-color: rgba(lighten($alert-info, 30%), 0.7); + color: rgba(darken($alert-info, 40%), .8); + } + + &.alert-success { + background-color: rgba(lighten($alert-sucess, 30%), 0.7); + color: rgba(darken($alert-sucess, 40%), .8); + border-color: darken($theme-background-highlight, 25%); + } + &#shortcuts { + li { + strong { + &:before { + content: " ' "; + } + &:after { + content: " ' "; + } + } + } + } +} \ No newline at end of file diff --git a/themes/hello/scss/_common.scss b/themes/hello/scss/_common.scss new file mode 100755 index 0000000..42afc2d --- /dev/null +++ b/themes/hello/scss/_common.scss @@ -0,0 +1,33 @@ +$ui-device-width: 1366px; + +// Theme +$theme-background-main: #e8e8e8; +$theme-background-highlight: #009966; +$theme-background-light: #fFFFFF; + +// Bordure +$border-size: 1px; +$border-radius: 5px; + +// Bouton +$button-background-grey: #f2f2f2; + +// Link +$link-color-hover: #edbf47; + +// Font +$ui-font-content: Helvetica, Arial, sans-serif; +$ui-font-highlight: "Montserrat", sans-serif; +$ui-font-title-size: 1rem; +$ui-font-content-size: .9rem; +$ui-font-text-small: .9rem; +$ui-font-color-content: #000; + +// Alerts +$alert-warning: #f6c443; +$alert-error: #e74c3c; +$alert-info: #40bac8; +$alert-sucess: #72c5a1; + +// Logo +$logo-basecolor: #339966; \ No newline at end of file diff --git a/themes/hello/scss/_core.scss b/themes/hello/scss/_core.scss new file mode 100755 index 0000000..c886ac6 --- /dev/null +++ b/themes/hello/scss/_core.scss @@ -0,0 +1,255 @@ +body { + background-color: $theme-background-main; + + font: { + family: $ui-font-content; + weight: normal; + } + line-height: 25px; + + > header, + > section { + bottom: 0; + top: 0; + } + + > section { + overflow: auto; + position: absolute; + } +} +// Sidebar +header { + background-color: $theme-background-highlight; + left: 0; + position: fixed; + overflow: hidden; + width: px2cent(200px); + + nav { + margin: 20px auto; + position: relative; + width: 90%; + + > ul { + margin-top: 30px; + } + + li { + line-height: 30px; + + &.active { + a { + color: $link-color-hover; + } + } + > a { + color: lighten($theme-background-highlight, 75%); + margin-left: 5px; + text-decoration: none; + font: { + family: $ui-font-highlight; + weight: bold; + } + + &:hover { + color: $link-color-hover; + } + + &:before { + @extend %awesome; + @include inline-block(middle); + color: white; + margin-right: 10px; + text-align: center; + width: 24px; + } + + &[href="?action=unread"] { + &:before { + content: "\f0e0" ; + } + } + &[href="?action=bookmarks"] { + &:before { + content: "\f02e" ; + } + } + &[href="?action=history"] { + &:before { + content: "\f1da" ; + } + } + &[href="?action=feeds"] { + &:before { + content: "\f143" ; + } + } + &[href="?action=config"] { + &:before { + content: "\f1de" ; + } + } + &[href="?action=logout"] { + &:before { + content: "\f08b" ; + } + } + &[href="?action=more"] { + &:before { + content: "\f009"; + } + } + } + } + } + + .logo { + + color: white; + display: block; + font-size: 1.6em; + margin: 0 auto; + text-align: center; + text-decoration: none; + width: 70%; + + span { + color: lighten($logo-basecolor, 40%); + } + } +} +// Main container +section { + &.page { + right: 0; + width: px2cent( (1366px - 250px)); + padding: 10px 20px; + + .page-header{ + position: relative; + } + + a { + color: $theme-background-highlight; + } + } +} +// Toolbar +.page-header { + margin: 0 0 15px; + @include pie-clearfix; + + h2 { + float: left; + line-height: 30px; + @extend %title; + } + ul { + float: right; + + li { + @include inline-block; + text-align: center; + + a , + a:after { + overflow: hidden; + display: block; + height: 25px; + text-decoration: none; + width: 25px; + } + + a { + background-color: $button-background-grey; + color: darken($theme-background-highlight, 5%); + position: relative; + text-indent: -999px; + @include border-radius(5px); + @include box-shadow(0 3px 0 $theme-background-highlight); + @extend %awesome; + + &:after { + position: absolute; + top: 0; + left: 0; + line-height: 25px; + z-index: 999; + text-indent: 0; + } + + } + + + a{ + &[href*="action=unread"], + &[href*="action=feed-items"] { + &[href*="direction=asc"] { + &:after { + content: "\f162"; + } + } + } + } + a { + &[href*="action=unread"], + &[href*="action=feed-items"] { + &[href*="direction=desc"] { + &:after { + content: "\f163"; + } + } + } + } + + a{ + &[href*="mark-as-read"], + &[href*="mark-feed-as-read"] { + &:after { + content: "\f058"; + } + } + } + a[href="?action=add"] { + &:after { + content: "\f067"; + } + } + a[href="?action=import"] { + &:after { + content: "\f093"; + } + } + a[href="?action=export"] { + &:after { + content: "\f019"; + } + } + a[href="?action=refresh-all"] { + &:after { + content: "\f021"; + } + } + a[href="?action=confirm-flush-history"] { + &:after { + content: "\f014"; + } + } + a[href="?action=feeds"] { + &:after { + content: "\f143"; + } + } + } + } +} + .page-section { + h2 { + @extend %title; + margin: { + bottom: 15px; + top: 15px; + } + } + } diff --git a/themes/hello/scss/_fonts.scss b/themes/hello/scss/_fonts.scss new file mode 100755 index 0000000..d673ab4 --- /dev/null +++ b/themes/hello/scss/_fonts.scss @@ -0,0 +1,16 @@ +// Mont Serrat : utilisé pour les titres +@import url(http://fonts.googleapis.com/css?family=Montserrat:700,400); + +// A partir d'ici, personnaliser et/ou changer les polices ( sauf les icones) de chaque élément +%title { + font-family: $ui-font-highlight; + font-weight: 700; + font-size: $ui-font-title-size; +} + +%paragraph { + font: { + family: $ui-font-content; + size: $ui-font-content-size; + } +} diff --git a/themes/hello/scss/_forms.scss b/themes/hello/scss/_forms.scss new file mode 100755 index 0000000..26de286 --- /dev/null +++ b/themes/hello/scss/_forms.scss @@ -0,0 +1,48 @@ +form { + background-color: $theme-background-light; + padding: 10px; + + input, + button, + textarea, + select { + font-family: $ui-font-content; + font-size: 1em; + color: darken($button-background-grey, 60%); + } + input, + textarea, + select { + background-color: white; + border: 1px solid $button-background-grey; + @include border-radius(5px); + padding: 5px; + + &:focus { + + } + } + label, + input, + select { + @include inline-block(middle); + } + label[for*="form-"] { + width: px2cent(360px); + } + input[type="submit"], + button[type="button"], + button[type="submit"] { + background-color: darken($theme-background-highlight, 1%); + color: $button-background-grey; + @include border-radius(5px); + cursor: pointer; + padding: 10px; + border: 1px solid $button-background-grey; + } + + ul { + list-style-type: square; + margin: 10px 40px; + } +} \ No newline at end of file diff --git a/themes/hello/scss/_icons.scss b/themes/hello/scss/_icons.scss new file mode 100644 index 0000000..47b34e3 --- /dev/null +++ b/themes/hello/scss/_icons.scss @@ -0,0 +1,10 @@ +@font-face { + font-family: 'FontAwesome'; + src: url("../fonts/fontawesome-webfont.eot?v=4.1.0"); + src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg"); + font-weight: normal; + font-style: normal; } + +%awesome { + font-family: "FontAwesome"; +} diff --git a/themes/hello/scss/_items.scss b/themes/hello/scss/_items.scss new file mode 100755 index 0000000..d2cbee3 --- /dev/null +++ b/themes/hello/scss/_items.scss @@ -0,0 +1,160 @@ +.items { + article { + + @include box-shadow(0 3px 0 darken($theme-background-highlight, 10%)); + background-color: $theme-background-light; + margin-bottom: 15px; + padding: 10px 20px; + + &[data-item-status="read"] { + &[data-item-page="feed-items"] { + background-color: rgba(lighten(black,60%), .7); + } + } + + h2 { + display: block; + margin-bottom: 5px; + + a { + @extend %title; + color: #000; + text-decoration: none; + } + + .feed-last-checked { + font-size: .8em; + } + } + .preview { + @extend %paragraph; + display: block; + line-height: 25px; + } + } + + .item-menu { + font-size: $ui-font-text-small; + margin-top: 5px; + + li { + @include inline-block; + + &:before { + content: " / "; + padding-right: 5px; + padding-left: 5px; + } + + &:first-child { + &:before { + display: none; + } + } + a { + color: darken($theme-background-highlight, 5%); + text-decoration: none; + + &:before { + margin-right: 2px; + @extend %awesome; + } + + &:first-child { + &:before { + content: "\f0b0"; + } + } + &[id*="original-"] { + &:before { + content: "\f08e"; + } + } + &[href*="action=confirm-remove-feed"] { + &:before { + content: "\f014"; + } + } + &[href*="action=edit-feed"] { + &:before { + content: "\f044"; + } + } + &[href*="action=refresh-feed"] { + &:before { + content: "\f021"; + } + } + + &[id*="bookmark-"] { + &:before { + content: "\f088"; + } + &[data-reverse-label*="remove"] { + &:before { + content: "\f087"; + } + } + } + + + &[href*="action=mark-item-removed"] { + &:before { + content: "\f014"; + margin-right: 2px; + } + } + + &[id*="status-"] { + &:before { + content: "\f058"; + } + } + &[href*="action=disable-grabber-feed"] { + &:before { + content: "\f057"; + } + } + &[href*="action=enable-grabber-feed"] { + &:before { + content: "\f058"; + } + } + &[href*="action=confirm-disable-feed"] { + &:before { + content: "\f05c"; + } + } + &[href*="action=enable-feed"] { + &:before { + content: "\f05d"; + } + } + } + } + } + #bottom-menu { + display: none; + visibility: hidden; + } +} +#items-paging { + display: block; + @include pie-clearfix; + + a { + @include flat-box($theme-background-highlight, $button-background-grey, 5px); + padding: { + left: 10px; + right: 10px; + } + text-decoration: none; + } + + #previous-page { + float: left; + } + #next-page { + float: right; + } +} \ No newline at end of file diff --git a/themes/hello/scss/_login.scss b/themes/hello/scss/_login.scss new file mode 100755 index 0000000..6cf67b7 --- /dev/null +++ b/themes/hello/scss/_login.scss @@ -0,0 +1,34 @@ +#login-page { + background-color: $theme-background-main ; + + section { + width: auto; + position: relative; + overflow: visible; + + &.page { + margin: 20px; + width: 480px; + } + } + .page-header { + visibility: hidden; + } + form { + @include border-radius(10px); + @include box-shadow(0 3px 0 $theme-background-highlight); + background-color: $theme-background-light; + margin-left: 20px; + padding: 10px; + + > * { + margin: 10px; + } + + [type="text"], + [type="password"] { + width: 380px; + } + + } +} \ No newline at end of file diff --git a/themes/hello/scss/_mixins.scss b/themes/hello/scss/_mixins.scss new file mode 100755 index 0000000..1d1565c --- /dev/null +++ b/themes/hello/scss/_mixins.scss @@ -0,0 +1,18 @@ +// Convert pixels to ems +// eg. for a relational value of 12px write em(12) when the parent is 16px +// if the parent is another value say 24px write em(12, 24) + +@function px2cent($pxval) { + $reference: 1366px; + + @return ($pxval * 100%) / $reference; +} + +@mixin box-shadow-flat(){ + @include box-shadow(0 3px 0 darken($theme-background-highlight, 10%)); +} +@mixin flat-box($shadowColor, $buttonColor, $radius) { + @include border-radius($radius); + @include box-shadow(0 3px 0 darken($shadowColor, 10%)); + background-color: $buttonColor; +} diff --git a/themes/hello/scss/_queries.scss b/themes/hello/scss/_queries.scss new file mode 100755 index 0000000..6251abd --- /dev/null +++ b/themes/hello/scss/_queries.scss @@ -0,0 +1,176 @@ +@import "compass/layout/sticky-footer"; + +@media only screen and (max-width: 480px) { + #login-page { + + section { + &.page { + margin: 5px; + width: auto; + } + } + + form { + margin: 0 auto; + padding: 10px; + [type="text"], + [type="password"] { + width: 220px; + } + } + } +} + +@media only screen and (max-width: 960px) { + #login-page { + background: url("../images/bg-small.jpg") repeat center center; + } + + body { + > header { + top: 5px; + left: 20px; + bottom: inherit; + width: auto; + z-index: 999; + background-color: transparent !important; + } + > .page { + width: 100%; + position: relative; + } + } + // Menu + header { + nav { + width: auto; + + margin: auto; + + .logo { + display: none; + } + > ul { + margin: auto + } + + li { + @include inline-block; + padding: 5px 0; + + &:first-child { + display: none; + } + + a { + display: block; + color: $theme-background-highlight; + + &[href*="action=more"] { + width: 35px; + height: 35px; + line-height: 35px; + @include flat-box($theme-background-highlight, $button-background-grey, 5px); + + &:before { + height: 100%; + width: 100%; + line-height: inherit; + } + } + &:before { + color: $theme-background-highlight; + } + } + } + } + } + + .page { + .page-header { + h2 { + visibility: hidden; + } + + ul { + li { + a, + a:after { + width: 35px; + height: 35px; + line-height: 35px; + } + } + } + } + } + + // Menu mobile + .menu-more { + margin-top: 50px; + + li { + display: block; + + @include flat-box($theme-background-highlight, $button-background-grey, 5px); + margin: 10px auto; + + a { + display: block; + // height: 100%; + padding: 10px 20px; + text-decoration: none; + width: 100%; + } + } + } + .items { + article { + .preview { + display: none; + } + } + } + #current-item { + padding-top: 35px; + + nav { + &.top { + display: none; + } + &.bottom { + display: block; + } + } + > h1 { + float: none; + } + + iframe { + width: 100%; + } + } + form { + label { + display: block; + + &[for*="form-"] { + width: auto; + } + } + } + .alert { + &.alert-normal { + ul { + margin: 10px 5px; + } + } + } + + .hide-mobile { + display: none !important; + } + .hide-desktop { + display: block; + } +} diff --git a/themes/hello/scss/_single.scss b/themes/hello/scss/_single.scss new file mode 100755 index 0000000..51a1d71 --- /dev/null +++ b/themes/hello/scss/_single.scss @@ -0,0 +1,144 @@ +#current-item { + position: relative; + + > nav { + @include pie-clearfix; + + &.top { + display: block; + float: right; + } + &.bottom { + display: none; + } + + span { + a { + text-decoration: none; + color: $theme-background-highlight; + } + + @include box-shadow(0 3px 0 $theme-background-highlight); + @include border-radius(5px); + background-color: $button-background-grey; + display: block; + padding: 5px 10px; + color: darken($button-background-grey, 45%); + + &.nav-left { + float: left; + margin-right: 10px; + } + &.nav-right { + float: right; + } + } + } + > h1 { + @extend %title; + display: inline-block; + float: left; + line-height: 25px; + margin-bottom: 20px; + max-width: 82%; + + a { + color: $ui-font-color-content; + text-decoration: none; + vertical-align: middle; + } + + } + + .item-infos { + border-bottom: 1px solid darken($button-background-grey, 25%); + border-top: 1px solid darken($button-background-grey, 25%); + clear: both; + display: block; + padding: 0; + + li { + @include inline-block; + font-size: $ui-font-text-small; + margin: 10px 0; + + &:before { + content: " / "; + } + + &:first-child { + &:before { + display: none; + } + } + + a { + color: $theme-background-highlight; + font-size: $ui-font-content-size; + text-decoration: none; + + &:hover{ + text-decoration: underline; + } + } + } + } + + #item-content { + padding: 10px 0; + @include pie-clearfix; + + #item-content-enclosure { + display: none; + } + } +} +#item-content { + h1,h2,h3,h4 { + font-family: $ui-font-highlight; + padding: 15px 0 5px 0; + } + + @for $i from 1 through 4 { + $ui-title-size: 1.6em - ( $i * 0.1); + $ui-title-indent: $i * 5px; + + h#{$i} { + font-size: $ui-title-size; + margin-left: $ui-title-indent; + } + } + p { + + } + ul, + ol { + list-style-type: square; + margin: 10px 0; + padding: 0 0 0 30px; + } + pre, + q, + blockquote { + padding: 10px; + margin: { + top: 10px; + bottom: 10px; + } + background-color: $theme-background-light; + } + + q, + blockquote { + margin-left: 20px; + margin-right: 20px; + } + strong { + font-weight: bold; + } + img { + display: block; + margin: 15px auto 15px auto; + max-width: 50%; + } +} \ No newline at end of file diff --git a/themes/hello/scss/_utilities.scss b/themes/hello/scss/_utilities.scss new file mode 100644 index 0000000..c3c1c59 --- /dev/null +++ b/themes/hello/scss/_utilities.scss @@ -0,0 +1,3 @@ +.hide-desktop { + display: none; +} diff --git a/themes/hello/scss/app.scss b/themes/hello/scss/app.scss new file mode 100755 index 0000000..37fca14 --- /dev/null +++ b/themes/hello/scss/app.scss @@ -0,0 +1,29 @@ +@import "compass/utilities" ; + +@import "compass/css3"; + +@import "compass/reset"; + +@import "common"; + +@import "mixins"; + +@import "fonts"; + +@import "icons"; + +@import "forms"; + +@import "alert"; + +@import "utilities"; + +@import "core"; + +@import "items"; + +@import "single"; + +@import "login"; + +@import "queries"; \ No newline at end of file