diff options
| -rw-r--r-- | views/layouts/default.html.php | 14 | ||||
| -rw-r--r-- | webroot/css/ribbon.css | 92 |
2 files changed, 14 insertions, 92 deletions
diff --git a/views/layouts/default.html.php b/views/layouts/default.html.php index cd179f9..289ec8a 100644 --- a/views/layouts/default.html.php +++ b/views/layouts/default.html.php @@ -6,18 +6,20 @@ use \lithium\security\Auth; <head> <?= $this->html->charset(); ?> <title>OtakuHub<?php $title = $this->title(); if ($title) echo " > $title" ?></title> - <?= $this->html->style(array('style', 'base')) ?> + <?= $this->html->style('style') ?> + <?= $this->html->style('base') ?> <?= $this->html->style('themes/light') ?> <?= $this->html->style('ribbon'); ?> <?= $this->html->style('jquery.fancybox-1.3.4') ?> <?= $this->html->style('http://fonts.googleapis.com/css?family=Cantarell:regular,bold&v1') ?> <?= $this->styles(); ?> </head> -<div class="right ribbon-holder"> - <a href="http://github.com/jbalogh" class="orange ribbon"> - <span class="text"><?= lithium\core\Environment::is('development') ? "Development" : "Production" ?></span> - </a> - </div> +<body> +<aside id="ribbon"> + <a href="http://github.com/jbalogh"> + <?= lithium\core\Environment::is('development') ? "Development" : "Production" ?> + </a> +</aside> <header> <?php $links = array( diff --git a/webroot/css/ribbon.css b/webroot/css/ribbon.css index b4af918..bc25c06 100644 --- a/webroot/css/ribbon.css +++ b/webroot/css/ribbon.css @@ -1,109 +1,29 @@ -.ribbon-holder { +#ribbon { position: absolute; top: 0; overflow: hidden; height: 10em; -} - -.right.ribbon-holder { right: 0; } -.left.ribbon-holder { - left: 0; -} - -.ribbon, -.ribbon:hover { - text-decoration: none; -} - -.ribbon { +#ribbon a { letter-spacing: -.1px; opacity: 0.95; - padding: 0.25em 0; position: relative; top: 2.5em; + right: -2.6em; + padding: 0.1em 3em; - /* Defaults friendly for white pages. */ -moz-box-shadow: 0 0 13px #888; -webkit-box-shadow: 0 0 13px #888; color: #FFF; display: block; line-height: 1.35em; -} + border: 1px solid #ebaa65; -.ribbon .text { - padding: 0.1em 3em; -} + background-color: #e57504; -.right .ribbon { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); - right: -2.6em; -} - -.left .ribbon { - -moz-transform: rotate(-45deg); - -webkit-transform: rotate(-45deg); - left: -2.6em; -} - -.white.ribbon { - color: #111; - background-color: #F5F5F5; - background: -webkit-gradient(linear, left bottom, left top, from(#f3f3f3), to(#fff)); - -moz-box-shadow: 0 0 13px #999; - -webkit-box-shadow: 0 0 13px #999; - text-shadow: 0 0 .05em; -} - -.white.ribbon .text { - border: 1px solid #cecece; -} - -.red.ribbon { - background-color: #9a0000; - background: -webkit-gradient(linear, left bottom, left top, from(#9a0000), to(#a90000)); -} - -.red.ribbon .text { - border: 1px solid #bf6060; -} - -.green.ribbon { - background-color: #006e00; - background: -webkit-gradient(linear, left bottom, left top, from(#006e00), to(#007200)); -} - -.green.ribbon .text { - border: 1px solid #6bac6b; -} - -.darkblue.ribbon { - background-color: #121621; - color: #ecedee; -} - -.darkblue.ribbon .text { - border: 1px solid #53565e; -} - -.orange.ribbon { - background-color: #E57504; - background: -webkit-gradient(linear, left bottom, left top, from(#dc7202), to(#ee7906)); -} - -.orange.ribbon .text { - border: 1px solid #ebaa65; -} - -.gray.ribbon { - background-color: #6d6d6d; - background: -webkit-gradient(linear, left bottom, left top, from(#6a6a6a) to(#6d6d6d)); -} - -.gray.ribbon .text { - border: 1px solid #a4a4a4; } |