From 5ed8050791ef562ff4351ede3a077ab1e8b0d916 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolas=20L=C5=93uillet?= Date: Wed, 8 Jan 2014 11:28:46 +0100 Subject: [add] courgette theme --- themes/courgette/css/style.css | 620 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 620 insertions(+) create mode 100755 themes/courgette/css/style.css (limited to 'themes/courgette/css/style.css') diff --git a/themes/courgette/css/style.css b/themes/courgette/css/style.css new file mode 100755 index 00000000..2ba16b71 --- /dev/null +++ b/themes/courgette/css/style.css @@ -0,0 +1,620 @@ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +body { + margin: 10px; + font-family: 'Roboto',Verdana,Geneva,sans-serif; + font-size: 16px; + color: #000; +} + +h1 span { + color #FFF; + background: #000; + display: inline-block; + padding: 0.2em 1em 0.2em 1.2em; + font-size: 0.7em; + position: relative; + top: -1em; + left: -1em; +} + +h1 a { + color: #FFF; + text-decoration: none; +} + +#menu { + font-family: 'fontello'; + position:fixed; + z-index: 11; + top: 0.7em; + right: 0.5em; + border:0; + font-size: 2em; + background: #000; + color:#FFF; + height: 58px; + width: 58px; + line-height:58px; + border-radius:120px; +} + +#menu:hover, #menu:focus { + background: #FFF; + color:#000; + cursor: pointer; +} + +#menu span { + position: absolute; + top: -99999px; +} + +#menuContainer ul, #article_toolbar ul { + position:fixed; + top: 0; + left:0; + width: 100%; + padding: 0; + margin: 0; + text-align:center; + height:80px; +} + +/*Inspired by http://tympanus.net/Tutorials/AnimatedBorderMenus/index.html */ + +#menuContainer, #article_toolbar { + position: fixed; + top: 0; + left:0; + width: 100%; + height: 0; + overflow: hidden; + border-width:0; + border-style: solid; + border-color:#000; + background-color: transparent; + -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s; + -moz-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s; + transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s; +} + +#article_toolbar ul { + padding: 1.7em; +} + +#menuContainer.open, #article_toolbar.open { + border-width:80px; + height: 100%; + background: rgba(0,0,0,0.5); + -webkit-transition: border-width 0.3s, background-color 0.3s; + -moz-transition: border-width 0.3s, background-color 0.3s; + transition: border-width 0.3s, background-color 0.3s; + z-index: 1; +} + +#links li, #article_toolbar li { + list-style: none; + display: inline-block; +} + +#links li a, #article_toolbar a { + color:#FFF; + display: block; + position:relative; + top: -200px; + -webkit-transition: top 0.3s ease; + -moz-transition: top 0.3s ease; + transition: top 0.3s ease; + padding:1.85em 1em; +} + +#links li a { + text-decoration:none; + text-transform:uppercase; +} + +#links li a:hover, #links li a:focus { + background: #FFF; + color:#000; +} + +#menuContainer.open li a, #article_toolbar.open a { + top: 0; + -webkit-transition: top 0.3s ease; + -moz-transition: top 0.3s ease; + transition: top 0.3s ease; + -webkit-transition-delay:0.25ms; + -moz-transition-delay:0.25ms; + transition-delay:0.25ms; +} + +#menuContainer.open li:nth-child(2) a { + -webkit-transition-delay:0.50ms; + -moz-transition-delay:0.50ms; + transition-delay:0.50ms; +} + +#menuContainer.open li:nth-child(3) a { + -webkit-transition-delay:1ms; + -moz-transition-delay:1ms; + transition-delay:1ms; +} + +#menuContainer.open li:nth-child(4) a { + -webkit-transition-delay:1.25ms; + -moz-transition-delay:1.25ms; + transition-delay:1.25ms; +} + +#menuContainer.open li:nth-child(5) a { + -webkit-transition-delay:1.55ms; + -moz-transition-delay:1.55ms; + transition-delay:1.55ms; +} + +#menu:before { + content: "\e801"; + display: block; + text-indent: 0; +} + +body > header { + position: fixed; + top: 0; + left: 1em; + z-index: 10; +} + +#main { + padding:6em; +} + +/* ========================================================================== + entrie + ========================================================================== */ + +.entrie, #article { + width: 45em; + margin: auto; + position:relative; + padding: 0 0 1em 0; + margin-bottom: 1.5em; +} + +#article a { + text-decoration: underline; + color:#000; +} + +#article a:hover, #article a:focus { + text-decoration: none; +} + +.entrie:after { + content:""; + position: absolute; + width: 100%; + height: 4px; + background: #000; + bottom:0; + left: -1em; +} + +.entrie p { + padding:0 0 0 1.5em; +} + +.entrie:before { + content:''; + position: absolute; + top: 0; + left: -1em; + width: 4px; + height: 100%; + background: #000; +} + +.entrie h2:after { + content:""; + display: block; + width: 0; + height: 0; + border-color: #000; + border-width:7px; + border-color:transparent transparent transparent #000; + border-style: solid; + position: absolute; + top: 0.8em; + right: -0.58em; +} + +.entrie h2 { + margin:0; + display: inline-block; + position: relative; + max-width: 78%; +} + +.entrie h2 a { + color:#000; + text-decoration:none; + display: block; + background: #000; + padding: 0.4em 1em; + color:#FFF; + margin-left: -0.5em; + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +.entrie h2 a:hover, .entrie h2 a:focus { + padding:0.4em 1em 0.4em 2em; +} + +ul { + padding:0; + margin:0; +} + +ul li { + list-style: none; +} + +.tools { + display: inline-block; + margin-left: 1em; + vertical-align: top; + padding-top: 1em; +} + +.tools a span { + position:absolute; + top: -99999px; +} + +.tools li { + display: inline-block; +} + +.tools a { + display: block; + color:#FFF; + background: #000; + text-decoration:none; + height: 1.5em; + width: 1.5em; + text-align: center; + line-height:1.5em; + border-radius: 90px; +} + +.tools a:hover, .tools a:focus { + background: #FFF; + color:#000; +} + +.tools a:before { display: block; font-family: 'fontello'; } + + +.fav-off:before, .fav:before { content: '\e805'; } /* '' */ +.archive-off:before, .archive:before { content: '\e804'; } /* '' */ +.tools .archive, .tools .fav { + background: #FFF; + color:#000; +} +.link:before { content: '\e800'; } /* '' */ +.delete:before { content: '\e803'; } /* '' */ +.reading-time:before { content: '\e802'; } /* '' */ + +#article_toolbar a:before { + display: block; + font-family: 'fontello'; +} + +#article_toolbar a { + display: block; + color:#000; + background: #FFF; + text-decoration:none; + height: 1.5em; + width: 1.5em; + text-align: center; + line-height:1.5em; + border-radius: 90px; + padding: 0; +} + +#article_toolbar a:hover, #article_toolbar a:focus { + background: #000; + color:#FFF; +} + +#article_toolbar span { + position: absolute; + top: -99999px; +} + +.email:before { content: '\e80a'; } /* '' */ +.icon-check:before { content: '\e804'; } /* '' */ +.back:before { content: '\e806'; } /* '' */ +.bad-display:before { content: '\e808'; } /* '' */ +.twitter:before { content: '\e807'; } /* '' */ + +#article_toolbar .flattrli { + display: none; +} + +#article_toolbar li { + margin: 0 0 0 1em; +} + + +footer { + position: fixed; + bottom: 0; + width: 100%; + padding: 0 2%; + left: 0; + text-align:right; + font-size: 0.8em; + font-style: italic; + background: rgba(255,255,255,0.5); +} + +footer a { + color:#000; +} + +footer a:hover,footer a:focus { + text-decoration: none; +} + +footer p:first-child { + float:left; +} + +#loginForm fieldset { + border:5px solid #000; + padding: 1.5em; +} + +fieldset { + border:0; + padding: 0; +} + +#loginForm { + max-width: 25em; + margin: auto; +} + +#loginForm .row { + margin-bottom: 0.5em; +} + +form h2 { + margin-top: 0; +} + +form label { + width: 40%; + display: inline-block; +} + +form input[type="text"], form input[type="password"], form input[type='url'], form select { + border:1px solid #000; + padding:0.5em 1em; +} + +@media screen and (-webkit-min-device-pixel-ratio:0){ + form select{ + -webkit-appearance: none; + background: url(../img/bg-select.png) no-repeat right center; + padding-right: 2.2em; + border-radius: 0; + } +} + +form button, form input[type="submit"] { + background: #000; + color:#FFF; + border:0; + font-size:1em; + padding:0.5em 1em; + margin-top: 1em; + cursor: pointer; +} + +form button:hover, form button:focus, form input[type="submit"]:hover, form input[type="submit"]:focus { + background: #FFF; + color: #000; +} + +/* ========================================================================== + Config + ========================================================================== */ + +#config { + max-width: 60%; + margin: auto; +} + +#config a { + background: #000; + text-decoration: none; + color:#FFF; + padding: 0.2em 1em; +} + +#config .special { + background: none; + padding:0; + color: #000; +} + +#config a:hover, #config a:focus { + background: #FFF; + color:#000; +} + +#config li { + margin-bottom: 1em; +} + +#plainurl { + font-size: 1em; +} + +#config label { + width: 20%; +} + +.results { + max-width: 62.5%; + font-style:italic; + margin: 1em auto 2.5em; +} + +#sort { + max-width: 62.5%; + margin: 0 auto -2.5em; + text-align: right; + border-bottom:1px dotted #000; +} + +#sort li { + display: inline-block; + vertical-align: top; + position: relative; + top: -0.1em; + margin-left: 1em; +} + +#sort li img { + display: none; +} + +#sort a { + display: inline-block; + font-family: 'fontello'; + color:#000; + text-decoration: none; +} + +#sort a:hover, #sort a:focus { + text-decoration: underline; +} + +#sort a:before { + display: block; +} + +#sort li a:first-child:before { + content: '\e809'; +} + +#sort li a:first-child + a:before { + content: '\e80b'; +} + +@media screen and (max-width: 860px) { + .entrie, #article { + width: 30em; + } +} + +@media screen and (max-width: 650px) { + #menuContainer ul, #article_toolbar ul { + width: 120px; + height: 100%; + } + + body > header { + position: static; + } + + #main { + padding: 0 0.5em 6em; + } + + #menu { + display: none; + } + + #main:before { + content:none; + } + + #menuContainer, #article_toolbar, #menuContainer ul, #article_toolbar ul { + position: static; + width: 100%; + height: auto; + } + + #links li a, #article_toolbar a { + position: static; + color: #000; + } + + #links li a { + padding: 1em; + min-width: 120px; + text-align: left; + } + + #article_toolbar li { + margin-bottom: 1em; + margin-left: 0.5em; + } + +} + +@media screen and (max-width: 500px) { + .entrie, #article { + width: 17em; + } + .entrie h2 { + width: 100%; + max-width: none; + } + .entrie h2 a:hover, .entrie h2 a:focus { + padding-left: 1em; + background: #FFF; + color: #000; + } + .entrie h2:after { + content:none; + } + + .messages { + width: 100%!important; + } + + #sort { + margin: 3em auto 0; + max-width: none; + text-align: center; + } + #config { + margin: 7em auto 0; + max-width: none; + } + #config label { width: 100%; } + .results { + max-width: none; + margin-bottom: 1em; + } + + footer p:first-child { + float: none; + } + footer { + position:static; + } +} -- cgit v1.2.3