From 65089ff16c15d90302541f86de2a497a303ac824 Mon Sep 17 00:00:00 2001 From: Kevin Meyer Date: Tue, 19 Aug 2014 13:15:02 +0200 Subject: [PATCH] improved article style: using same style as in iphone app --- assets/main.css | 243 +++++++++++++++++++ assets/ratatouille.css | 155 ++++++++++++ res/layout/article.xml | 59 ++--- src/fr/gaulupeau/apps/Poche/ReadArticle.java | 31 ++- 4 files changed, 444 insertions(+), 44 deletions(-) create mode 100755 assets/main.css create mode 100644 assets/ratatouille.css diff --git a/assets/main.css b/assets/main.css new file mode 100755 index 0000000..40f485e --- /dev/null +++ b/assets/main.css @@ -0,0 +1,243 @@ +/* ========================================================================== + Sommaire + + 1 = Style Guide + 2 = Layout + 3 = Pictos + 4 = Messages + 5 = Article + 6 = Media queries + + ========================================================================== */ + +html { + min-height: 100%; +} + +body { + background: #EEE; +} + +/* ========================================================================== + 1 = Style Guide + ========================================================================== */ + +::selection { + color: #FFF; + background: #000; +} + +h2, h3, h4 { + font-family: 'PT Sans', sans-serif; + text-transform: uppercase; +} + +p, li { + color: #666; +} + +a { + color: #000; + font-weight: bold; +} + +a:hover, a:focus { + text-decoration: none; +} + +h2:after { + content: ""; + height: 4px; + width: 70px; + background: #000; + display: block; +} + +.links { + padding: 0; + margin: 0; +} + .links li { + list-style: none; + margin: 0; + padding: 0; + } + + +#links { + position: fixed; + top: 0; + width: 10em; + left: 0; + text-align: right; + background: #333; + padding-top: 9.5em; + height: 100%; + box-shadow:inset -4px 0 20px rgba(0,0,0,0.6); + z-index: 10; +} + +#main { + margin-left: 13em; + position: relative; + z-index: 10; + padding-right: 5%; + padding-bottom: 1em; +} + + #links a { + display: block; + padding: 0.5em 2em 0.5em 1em; + color: #FFF; + position: relative; + text-transform: uppercase; + text-decoration: none; + font-weight: normal; + font-family: 'PT Sans', sans-serif; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; + } + + #links a:hover, #links a:focus { + background: #999; + color: #000; + } + + #links .current:after { + content: ""; + width: 0; + height: 0; + position: absolute; + border-style: solid; + border-width: 10px; + border-color: transparent #EEE transparent transparent; + right: 0; + top: 50%; + margin-top: -10px; + } + + #links li:last-child { + position: fixed; + bottom: 1em; + width: 10em; + } + + #links li:last-child a:before { + font-size: 1.2em; + position: relative; + top: 2px; + } + + + +/* ========================================================================== + 2 = Layout + ========================================================================== */ + +#content { + margin-top: 1em; + min-height: 30em; +} + +footer { + text-align: right; + position: relative; + bottom: 0; + right: 5em; + color: #999; + font-size: 0.8em; + font-style: italic; + z-index: 20; +} + +footer a { + color: #999; + font-weight: normal; +} + +/* ========================================================================== + 5 = Article + ========================================================================== */ + +header.mbm { + text-align: left; +} + +#article { + width: 70%; +/* margin-bottom: 3em; */ + text-align: justify; + word-wrap: break-word; +} + +#article .tags { + margin-bottom: 1em; +} + +#article i { + font-style: normal; +} + +blockquote { + border:1px solid #999; + background: #FFF; + padding: 1em; + margin: 0; +} + +#article h2, #article h3, #article h4 { + text-transform: none; +} + +#article h2:after { + content: none; +} + +/* ========================================================================== + 6 = Media Queries + ========================================================================== */ + + +@media screen { + body > header { + background: #333; + position: fixed; + top: 0; + width: 100%; + height: 3em; + z-index: 11; + } + #links li:last-child { + position: static; + width: auto; + } + #links li:last-child a:before { + content: none; + } + #links { + display: none; + width: 100%; + height: auto; + padding-top: 3em; + } + footer { + position: static; + margin-right: 3em; + } + #main { + margin-left: 1.5em; + padding-right: 1.5em; + position: static; + } + + #article { + width: 100%; + } + + #article h1 { + font-size: 1.2em; + } +} diff --git a/assets/ratatouille.css b/assets/ratatouille.css new file mode 100644 index 0000000..1901693 --- /dev/null +++ b/assets/ratatouille.css @@ -0,0 +1,155 @@ +/* + Ratatouille mini Framework css by Thomas LEBEAU + Base on KNACSS => www.KNACSS.com (2013-10) @author: Raphael Goetter, Alsacreations + and normalize.css +*/ + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +body { + font-size: 1em; + line-height:1.5; + margin: 0; +} + +/* ========================================================================== + Mise en forme + ========================================================================== */ + +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child, +h6:first-child, +p:first-child, +ul:first-child, +ol:first-child, +dl:first-child{ + margin-top: 0; +} + +code, +kbd, +pre, +samp { + font-family: monospace, serif; +} + +pre { + white-space: pre-wrap; +} + + +.upper { + text-transform: uppercase; +} + +.bold { + font-weight: bold; +} + +.inner { + margin: 0 auto; + max-width: 61.25em;/*980px*/ +} + +table, img { + max-width: 100%; + height :auto; +} + +iframe { + max-width: 100%; +} + +.fl { + float: left; +} + +.fr { + float: right; +} + +table { + border-collapse: collapse; +} + +figure { + margin: 0; +} + +button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; +} + +input[type="search"] { + -webkit-appearance: textfield; +} + +/* ========================================================================== + Mise en page + ========================================================================== */ + +.dib { + display: inline-block; + vertical-align: middle; +} + +.dnone { + display: none; +} + +.dtable { display:table } + + .dtable > * { display:table-row; } + + .dtable > * > * { display:table-cell; } + +.element-invisible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.small { + font-size:0.8em; +} + +.big { + font-size: 1.2em; +} + +/*Width*/ + +.w100 { width:100%; } +.w90 { width:90%; } +.w80 { width:80%; } +.w70 { width:70%; } +.w60 { width:60%; } +.w50 { width:50%; } +.w40 { width:40%; } +.w30 { width:30%; } +.w20 { width:20%; } +.w10 { width:10%; } + diff --git a/res/layout/article.xml b/res/layout/article.xml index eb1bd3e..4e9b073 100644 --- a/res/layout/article.xml +++ b/res/layout/article.xml @@ -7,49 +7,36 @@ - - - - - - + android:orientation="vertical" > - - -