diff options
| -rw-r--r-- | views/layouts/default.html.php | 6 | ||||
| -rw-r--r-- | webroot/css/ribbon.css | 115 |
2 files changed, 121 insertions, 0 deletions
diff --git a/views/layouts/default.html.php b/views/layouts/default.html.php index 9313414..cd179f9 100644 --- a/views/layouts/default.html.php +++ b/views/layouts/default.html.php @@ -8,10 +8,16 @@ use \lithium\security\Auth; <title>OtakuHub<?php $title = $this->title(); if ($title) echo " > $title" ?></title> <?= $this->html->style(array('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> <header> <?php $links = array( diff --git a/webroot/css/ribbon.css b/webroot/css/ribbon.css new file mode 100644 index 0000000..580b9d3 --- /dev/null +++ b/webroot/css/ribbon.css @@ -0,0 +1,115 @@ +@font-face { + font-family: Collegiate; + src: url("Collegiate.ttf"); +} + +.ribbon-holder { + 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 { + font-family: Collegiate, sans-serif; + letter-spacing: -.1px; + opacity: 0.95; + + padding: 0.25em 0; + position: relative; + top: 2.5em; + + /* 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; +} + +.ribbon .text { + padding: 0.1em 3em; +} + +.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; +} |