Changeset 269 in t29-www


Ignore:
Timestamp:
Jun 1, 2012, 7:19:51 PM (7 years ago)
Author:
sven
Message:

CSS modular sauber verteilt und JS-Loading-Framework generalisiert zu einem OOP RessourceLoader, der sowohl JS als auch CSS vom Verzeichnis einlesen kann, Cachefile erzeugt und mit Hooks sowie Postprozessor verarbeiten kann (etwa fuer Minify, LESS, usw.). Noch nicht ausgiebig getestet.

Files:
16 added
1 deleted
2 edited
1 moved

Legend:

Unmodified
Added
Removed
  • lib/ressourceloader.php

    r264 r269  
    11<?php
    2 header("Content-Type: application/javascript");
     2/**
     3 * t29REssourceLoader classes.
     4 * This file behaves to loader.php like template.php behaves to technikum29.php.
     5 *
     6 * classes t29JavaScriptRessourceLoader and t29StyleSheetRessourceLoader are also defined in
     7 * this class.
     8 *
     9 * For minification the files JavaScriptMinifier.php and CSSMin.php are included on need.
     10 **/
    311
    4 $lib = dirname(__FILE__);
    5 $webroot = realpath("$lib/../");  # file path to root of t29 web installation
    6 $cache_file = 'compressed.js';
    7 $module_dir = "$webroot/shared/js-v6/modules";
    8 $modules = glob("$module_dir/*.js");
    9 
    10 $debug = isset($_GET['debug']); // skip cache and just concat everything
    11 
    12 if(!$debug) {
    13         require "$lib/cache.php";
    14         $js_cache = new t29Cache();
    15         $js_cache->test_files = $modules;
    16         $js_cache->set_cache_file($webroot, $cache_file);
    17         $js_cache->try_cache_and_exit();
    18         $js_cache->start_cache('minify_javascript', true);
    19 }
    20 
    21 $filenames = array_map('basename', $modules); // filenames like foo.js
    22 ?>
     12class t29RessourceLoader {
     13        public $conf;
     14       
     15        /// @param $conf configuration array.
     16        function __construct($conf) {
     17                $this->conf = $conf;
     18                $this->conf['filenames'] = array_map('basename', $this->conf['modules']); // filenames like foo.js
     19        }
     20       
     21        function print_debug($string) {
     22                if($this->conf['debug'])
     23                        echo $string;
     24        }
     25       
     26        function print_before_file($mod_filename, $dir_index) {
     27                $this->print_debug("\n\n/*** t29v6-RessourceLoader[$dir_index]: Start of $mod_filename ***/\n\n");
     28        }
     29       
     30        function print_after_file($mod_filename, $dir_index) {
     31                echo "\n\n"; // JS: for being sure no former "//" comment in last line wipes out code
     32                $this->print_debug("\n\n/*** t29v6-RessourceLoader[$dir_index]: End of $mod_filename ***/\n\n");
     33        }
     34       
     35        function print_header($title=null) {
     36                if(!$title) $title = __CLASS__;
     37                ?>
    2338/*!
    24  * t29v6 JavaScript Code
    25  * http://technikum29.de/
     39 * t29v6 <?=$title; ?> - http://technikum29.de/
    2640 * $Id$
    2741 *
     
    2943 * Licensed under any of Apache, MIT, GPL, LGPL
    3044 *
    31  * Depends heavily on jQuery
    32  * Packed: <?php echo implode(' ', $filenames); ?>
     45 * Packed: <?php echo implode(' ', $this->conf['filenames']); ?>
    3346 * Arguments: ?debug=true - skip cache and just cat everything
    3447 *            ?purge_cache=true - force rebuild of compressed cache file
    35  * Date: <?php echo date('r'); ?>
    36  */
    37 <?php
     48 * Gen Date: <?php echo date('r'), PHP_EOL;
     49                if($title == __CLASS__) print " **/\n";
     50        }
     51       
     52        function run() {
     53                $this->print_header();
     54                $this->conf['header'] = ob_get_contents(); // for prepending it to minified code
    3855
    39 $header = ob_get_contents(); // for prepending it to minified code
     56                foreach($this->conf['modules'] as $i => $mod) {
     57                        $modfile = $this->conf['filenames'][$i];
     58                        $this->print_before_file($modfile, $i);
     59                        readfile($mod);
     60                        $this->print_after_file($modfile, $i);
     61                }
     62        } // run
    4063
    41 foreach($modules as $i => $mod) {
    42         $modfile = $filenames[$i];
    43         if($debug) echo "\n\n/*** t29v6-RessourceLoader: Start of $modfile ***/\n\n";
    44         readfile($mod);
    45         echo "\n\n"; // for being sure no former "//" comment in last line wipes out code
    46        
    47         if($modfile == "msg.js") {
    48                 // special treatment of this file
    49                 if($debug) echo "\n/*** Auto appended ***/\n";
    50                 require "$lib/messages.php";
    51                 echo "t29.msg.data=";
    52                 echo t29Messages::create_json();
    53                 echo ";\n";
     64        function compression_filter($output) {
     65                return $output;
     66        }
     67} // class t29RessourceLoader
     68
     69class t29JavaScriptRessourceLoader extends t29RessourceLoader {
     70        function print_after_file($mod_filename, $dir_index) {
     71                global $lib;
     72                parent::print_after_file($mod_filename, $dir_index);
     73                if($mod_filename == "msg.js") {
     74                        // special treatment of this file
     75                        $this->print_debug("\n/*** Auto appended ***/\n");
     76                        require "$lib/messages.php";
     77                        echo "t29.msg.data=";
     78                        echo t29Messages::create_json();
     79                        echo ";\n";
     80                }
    5481        }
    5582
    56         if($debug) echo "\n\n/*** t29-v6-RessourceLoader: End of $modfile ***/\n\n";
    57 }
     83        function print_header() {
     84                parent::print_header('JavaScript Code');
     85                echo " * Depends heavily on jQuery\n **/\n";
     86        }
     87       
     88        function compression_filter($code) {
     89                global $lib;
     90                // reduces code size about 1/2 - before: 23kB, after: 12kB
     91                require "$lib/JavaScriptMinifier.php";
     92                $minified = JavaScriptMinifier::minify($code);
     93                return $this->conf['header'] . $minified;
     94        }
     95} // class t29JavaScriptRessourceLoader
    5896
     97class t29StyleSheetRessourceLoader extends t29RessourceLoader {
     98        function print_header() {
     99                parent::print_header('StyleSheet Code');
     100                echo " **/\n";
     101        }
    59102
    60 function minify_javascript($code) {
    61         global $lib, $header;
    62         // reduces code size about 1/2 - before: 23kB, after: 12kB
    63         require "$lib/JavaScriptMinifier.php";
    64         $minified = JavaScriptMinifier::minify($code);
    65         return $header . $minified;
    66 }
     103        function compression_filter($code) {
     104                global $lib;
     105                require "$lib/CSSMin.php";
     106                return "foo";
     107                $minified = CSSMin::minify($code);
     108                return $this->conf['header'] . $minified;
     109               
     110        }
     111} // t29StyleSheetRessourceLoader
  • lib/template.php

    r268 r269  
    210210
    211211  <script>window.t29={'conf': <?php print json_encode($this->javascript_config); ?>};</script>
    212   <script src="/lib/js.php"></script>
     212  <script src="/lib/ressourceloader.php?type=js"></script>
    213213</div><!-- end of div id="footer-background-container" helper -->
    214214</body>
  • shared/css-v6/style.css

    r265 r269  
    1 /* t29v6 Grey Style, 08.01.2012 */
    2 
    3 body {
    4         background: #cbc5bd url("../img-v6/bg-v2.body.png") repeat-x;
    5 }
    6 
    7 .clear { clear: both; }
    8 
    9 /* Anpassungsstyles, die benoetigt werden damit der Text aussieht wie frueher */
    10 #content p { text-align: justify } /* !! */
    11 #content .center { text-align: center; }
    12 
    13 body, input { /* font */
    14         font-family: "Trebuchet MS";
    15 }
    16 
    17 #content {
    18         font-family: Verdana;
    19         font-size: 15px;
    20         line-height: 130%;
    21         text-align: justify;
    22 }
    23 
    24 h2, html>body #page h2 {
    25     font-weight: bold;
    26     font-size: 160%;
    27     line-height: 125%; /* wird sonst relativ zu falscher schriftgroesse vererbt */
    28     margin: 0 0 0.7em 0;
    29     padding: 0;
    30 }
    31 
    32 #content h2, #content h3, #content h4 {
    33     /* Seit 04.01.2010: Neues Ueberschriftenlayout. Soll aber nur
    34        auf Homepage genutzt werden, nicht etwa auf dev. oder so...! */
    35     font-weight: normal;
    36     font-family: Trebuchet Ms,Verdana,Dejavu Sans,Helvetica,Arial,sans-serif;
    37     font-size: 180%;
    38     border-bottom: 3px double #aaa;
    39 }
    40 
    41 #content h3 {
    42     /* Und das gleiche auch fuer Unter-Ueberschriften */
    43     font-size: 140%;
    44         margin: 2em 0 0.3em;
    45 }
    46 
    47 #content h4 {
    48         font-weight: bold;
    49         font-size: 100%;
    50         border-bottom: 1px solid #aaa;
    51         margin: 2.3em 0 1em;
    52 }
    53 
    54 ::-moz-selection{background:#07a;color:#fff;text-shadow:none}
    55 ::selection{background:#07a;color:#fff;text-shadow:none}
    56 
    57 
    58 nav.horizontal a, nav.side .u1 > li > a {
    59         /*font-family: "Futura Std Book", "Trebuchet MS";*/
    60         font-family: "Trebuchet MS";
    61 }
    62 
    63 #footer-background-container {
    64         background: url("../img-v6/bg-v2.body-footer.png") bottom left repeat-x;
    65         padding-bottom: 1px;
    66 }
    67 
    68 #container {
    69         width: 1200px;
    70         margin: 16px auto;
    71         background-color: #f1f1f1;
    72         position: relative;
    73         padding-top: 104px;
    74         overflow: hidden; /* #background-color-container */
    75         box-shadow: 1px 1px 2px 1px rgba(0,0,0,.5);
    76 }
    77 
    78 /* Generelle Grundlagen */
    79 h1, h2 { margin: 0; padding: 0; }
    80 html.js .no-js, html.no-js .js, hr { display: none; }
    81 nav li { display: inline; }
    82 nav a { display: block; text-decoration: none; }
    83 nav a:focus { outline: none; }
    84 
    85 /* Header */
    86 header.banner {
    87         position: absolute;
    88         top: 0; left: 0; /*z-index: 1;*//* aus wegen nav.horizontal klappmenue*/
    89         height: 107px; width: 100%;
    90         text-align: right;
    91        
    92         /*border-bottom: 1px solid #5d5c58;*/
    93         background: url("../img-v6/line.header-footer.png") bottom left repeat-x;
    94 }
    95 
    96 h1 { display: inline; }
    97 h1 a {
    98         position: absolute;
    99         top: 10px; left: 10px; z-index: 2;
    100         text-indent: -9999px;
    101         width: 310px; height: 84px;
    102         background: url("../img-v6/banner.png");
    103 }
    104 
    105 /* Horizontal Navigation (Hauptnavigation) */
    106 nav.horizontal {
    107         position: absolute;
    108         right: 0; bottom: 0;
    109         /*margin: 1em;*/ margin-right: 2em;
    110 }
    111 
    112 nav.horizontal .u1 > li {
    113         display: inline-block;
    114         /*margin-left: 1em;*/
    115         position: relative;
    116 }
    117 
    118 nav.horizontal .u1 > li > a {
    119         padding: 7px;
    120         margin-bottom: 3px;
    121 }
    122 
    123 nav.horizontal .u1 > li.has-submenu > a {
    124         padding-bottom: 10px;
    125         margin-bottom: 0;
    126 }
    127 
    128 nav.horizontal .u1 > li:hover > a {
    129         background-color: white;
    130 }
    131 
    132 nav.horizontal a {
    133         /*font: 15px "Futura Std Book";*/
    134         font-size: 15px;
    135         font-weight: bold;
    136         text-transform: uppercase;
    137         /*color: #124b6b;*/
    138 }
    139 
    140 /* Aufklappnavigation der Horizontalen Navi */
    141 nav.horizontal .u2 { display: none; }
    142 nav.horizontal .u1 > li:hover .u2, nav.horizontal .u1 li.dev-force-open .u2 {
    143         display: block;
    144 }
    145 
    146 
    147 nav.horizontal .u2 {
    148         position: absolute;
    149         z-index: 100; /* Ueber allem */
    150         left: 0; /* top: 0; */
    151         text-align: left;
    152         width: 23em;
    153         background-color: white;
    154         border-bottom: 3px solid #888;
    155 }
    156 
    157 nav.horizontal .u2 a {
    158         padding: .2em .9em;
    159 }
    160 
    161 nav.horizontal .u2 a:hover {
    162         background-color: #efefef;
    163 }
    164 
    165 nav.horizontal .u2 > li.has-submenu {
    166         display: block;
    167         margin: 1em 0;
    168 }
    169 
    170 nav.horizontal .u3 > li > a {
    171         padding-left: 1.9em;
    172         font-weight: normal;
    173 }
    174 
    175 nav.horizontal ul.rich-text a {
    176         padding-top: .9em; padding-bottom: .9em;
    177 }
    178 
    179 nav.horizontal ul.rich-text a:after {
    180         content: ".";
    181         display: block;
    182         clear: left;
    183         height: 0; line-height: 0;
    184         visibility: hidden;
    185 }
    186 
    187 nav.horizontal ul.rich-text img {
    188         float: left;
    189         margin-right: 10px;
    190 }
    191 
    192 nav.horizontal ul.rich-text a:hover img {
    193         box-shadow: 0px 0px 4px #1a5160;
    194         /*outline: 1px solid #1a5160;*/
    195 }
    196 
    197 nav.horizontal ul.rich-text a em {
    198         display: block;
    199         color: black;
    200         text-transform: none;
    201         font-weight: normal;
    202         font-style: normal;
    203         font-size: 13px; /* like body */
    204 }
    205 
    206 /* Farben */
    207 nav.horizontal a, nav.top li.active a, nav.side a {
    208         color: #1a5160;
    209         font-weight: bold;
    210         opacity: .8;
    211 }
    212 
    213 /* Topnavigation (Nebenheadernavigation) */
    214 nav.top {
    215         position: absolute;
    216         right: 0; top: 0;
    217         margin: 1em; margin-right: 2em;
    218 }
    219 
    220 nav.top, nav.top input, nav.top a {
    221         /*font: 15px "Futura Std Medium";*/
    222         font-size: 15px;
    223         text-transform: uppercase;
    224         color: #757575;
    225         font-weight: bold;
    226 }
    227 
    228 nav.top form, nav.top ul {
    229         display: inline-block;
    230         position: relative;
    231 }
    232 nav.top input.text, nav.top input.text.defaultvalue {
    233         border: 1px solid transparent; background: transparent;
    234         /*width: 4em; text-align: right;
    235         padding-right: 22px;*/
    236         border: 2px solid #d8d8d8;
    237         width: 10em; padding-left: .3em;
    238 }
    239 nav.top input.text:focus, nav.top input.text.no-defaultvalue {
    240 /*      text-align: left; width: 8em;
    241         border: 1px solid #bababa;*/
    242         background-color: white;
    243         text-transform: none;
    244         color: #000;
    245 }
    246 nav.top input.button {
    247         display: block;
    248         text-indent: -999px; border: none;
    249         background: url("../img-v6/lupe.png") no-repeat;
    250         width: 13px; height: 13px;
    251         position: absolute; right: 0px; top: 4px;
    252        
    253         display: none;
    254 }
    255 
    256 nav.top a {
    257         display: inline-block;
    258         margin-right: 1em;
    259 }
    260 nav.top li.active a {
    261         /*color: #124b6b;*/
    262         border-bottom: 2px solid #6F2A41;
    263 }
    264 
    265 /* Content */
    266 #content {
    267         padding: 30px 40px 60px;
    268         width: 860px;
    269         float: left;
    270         color: black;
    271 }
    272 
    273 /* Hintergrund nach ganz unten durchschleifen */
    274 #background-color-container {
    275         background-color: #dfeaf0;
    276         float: left;
    277         width: 100%;
    278         position: relative;
    279         left: 940px;
    280 }
    281 
    282 section.sidebar, #content {
    283         position: relative;
    284         left: -940px;
    285 }
    286 
    287 /* Rechtsnavi */
    288 section.sidebar {
    289         width: 210px;
    290         padding: 25px; padding-top: 35px;
    291         /*background-color: #dfeaf0;*/  /* Die uebernimmt der Container*/
    292         float: left;
    293 }
    294 
    295 /* Navigationsleiste */
    296 nav.side .guide-only { display: none; } /* Nur in nav.guide anzeigen */
    297 
    298 nav.side .u1 > li > a {
    299         /*font: 18px "Futura Std Book";*/
    300         font-size: 21px; font-weight: bold;
    301         text-transform: uppercase;
    302         /*color: #124b6b;*/
    303         margin: 0 -25px;
    304         padding: 5px 25px;
    305 }
    306 
    307 nav.side .u2 {
    308         margin: 0 0 20px 0;
    309 }
    310 
    311 nav.side .u2 > li > a {
    312         text-transform: uppercase;
    313         font-size: 15px;
    314         margin: 0 -25px;
    315         padding: 5px 25px;
    316 }
    317 
    318 nav.side .u2 > li.active > a {
    319         color: #E90015; /* hellblau:  #40a8e2; */
    320         font-weight: bold;
    321 }
    322 
    323 nav.side .u3 {
    324         margin-left: 12px;
    325         margin-bottom: 12px;
    326 }
    327 
    328 nav.side .u3 { display: none; }
    329 nav.side .u2 > li.active .u3 { display: block; }
    330 
    331 nav.side .u3 > li > a {
    332         font-size: 14px;
    333         margin: 0 -25px 0 -40px;
    334         padding: 1px 25px 1px 40px;
    335         opacity: .9;
    336         text-transform: uppercase;
    337 }
    338 
    339 nav.side .u3 > li.active a {
    340         color: #e90015;
    341         font-weight: bold;
    342 }
    343 
    344 nav a:hover, nav ul.rich-text li:hover a, nav a:focus, nav ul.rich-text li:focus a {
    345         color: #A12A40;
    346         background-color: white;
    347 }
    348 
    349 /* Nav-Hover-Transistions */
    350 nav a, nav a:link, nav a:visited, nav a:hover, nav a:focus {
    351         /*-webkit-transition: color,background-color .18s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    352         -moz-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    353         -ms-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    354         -o-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    355         transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    356         */
    357 }
    358 
    359 
    360 /* Scroll-Zustände der Navigationsleiste
    361  * Siehe Script, es gibt:
    362  *   html.no-js             - Ausgangslage ohne Javascript
    363  *   html.static-menu       - Default mit Javascript
    364  *   html.fixed-menu        - Umgeschaltet auf fix
    365  *   html.stick-top-menu    - Zwischensituation wenn fix und ganz hochgescrollt (wie static-menu)
    366  *   html.stick-bottom-menu - Zwischensituation wenn fix und ganz runtergescrollt (absolut positioniert)
    367  */
    368 html.static-menu nav.side, html.stick-top-menu nav.side {
    369         /* Ein/Ausblendeffekt fuer .get-menu-Button erzeugen  */
    370         /* http://www.colorzilla.com/gradient-editor */
    371         background: -moz-linear-gradient(top,  rgba(223,234,240,1) 0%, rgba(223,234,240,1) 82%, rgba(223,234,240,0) 100%); /* FF3.6+ */
    372         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(223,234,240,1)), color-stop(82%,rgba(223,234,240,1)), color-stop(100%,rgba(223,234,240,0))); /* Chrome,Safari4+ */
    373         background: -webkit-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* Chrome10+,Safari5.1+ */
    374         background: -o-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* Opera 11.10+ */
    375         background: -ms-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* IE10+ */
    376         background: linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* W3C */
    377         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfeaf0', endColorstr='#00dfeaf0',GradientType=0 ); /* IE6-9 */
    378 
    379         padding-bottom: 200%; /* sic! die 82% aus dem gradient muessen unterhalb der Navi anfangen*/
    380         position: relative; z-index: 10;
    381 }
    382 
    383 html.fixed-menu nav.side {
    384         position: fixed;
    385         width: 210px;
    386         top: 15px;
    387 }
    388 
    389 html.stick-bottom-menu nav.side {
    390         position: absolute;
    391         width: 210px;
    392         /* Top-Wert durch JS gesetzt. */
    393 }
    394 
    395 /* Buttons in Navigationsleiste */
    396 section.sidebar .button {
    397         display: block;
    398         cursor: pointer;
    399 
    400         /*font: 14px "Myriad Pro Light";*/
    401         font-size: 14px;
    402         text-transform: uppercase;
    403         color: #a07f60;
    404         font-weight: bold;
    405 }
    406 
    407 section.sidebar .button:hover {
    408         background-color: white;
    409 }
    410 
    411 section.sidebar .button.get-menu {
    412         /* Menü-runterhol-Button */
    413         position: fixed; z-index: 1;
    414         bottom: 0; margin: 0 -25px;
    415         padding: 15px 25px;
    416         text-align: center; width: 210px;
    417 }
    418 
    419 section.sidebar .button.collapse-menu {
    420         /* Ein/Ausklapp-Button */
    421         margin: 3em -25px 0 -25px;
    422         padding: 5px 25px;
    423 }
    424 
    425 section.sidebar.bottom {
    426         position: absolute;
    427         bottom: 0; left: 0;
    428 }
    429 
    430 section.sidebar.bottom .button.get-menu {
    431         position: static;
    432         margin-bottom: -25px;
    433 }
    434 
    435 html.button-stick-bottom section.sidebar.top .button.get-menu {
    436         display: none;
    437 }
    438 
    439 /* Footer */
    440 footer {
    441         clear: both;
    442         height: 104px; width: 100%;
    443         /* temp. um Navi-Kram zu uebermalen: */
    444         position: relative; z-index: 20;
    445        
    446         /*border-top: 1px solid #5d5c58;*/
    447         background: #f1f1f1 url("../img-v6/line.header-footer.png") top left repeat-x;
    448 }
    449 
    450 /* "Beam Navigation" nav.guide */
    451 nav.guide {
    452         position: absolute;
    453         z-index: 5; /* ueber nav.rel */
    454         top: -5px; left: -5px;
    455         width: 900px; margin: 0 25px; /* wie #content, in breite ein paar px mehr wegen ueberstehenden bullets */
    456 }
    457 nav.guide ul, nav.guide li { display: inline; }
    458 nav.guide a {
    459         float: left;
    460         position: relative;
    461 }
    462 
    463 nav.guide a:hover, nav.guide a:focus {
    464         background-color: inherit; /* Overwrite nav a:hover bg white */
    465 }
    466 
    467 nav.guide .text {
    468         display: block;
    469         /*font: 12px "Futura Std Book";*/
    470         font-size: 12px; font-weight: bold;
    471         text-transform: uppercase;
    472         color: #5d5c58;
    473         position: absolute;
    474         top: -19px; left: 0;
    475         white-space: nowrap;
    476 }
    477 
    478 nav.guide a.higher-text .text {
    479         /* Labeltexte, die die default dargestellten Texte (.visible)
    480            beim Hovern ueberpinseln und daher hoeher dargestellt werden */
    481         top: -34px;
    482 }
    483 
    484 nav.guide .bullet {
    485         width: 0; height: 0;
    486         border: 2px solid #5d5c58;
    487         padding: 4px;
    488         margin: 1px;
    489         display: inline-block;
    490         border-radius: 6px;
    491         position: relative;
    492 }
    493 
    494 nav.guide .visible > a > .bullet {
    495         border-width: 6px;
    496         padding: 0;
    497 }
    498 
    499 nav.guide .bullet, nav.guide .text { visibility: hidden; }
    500 nav.guide li.visible > a > .bullet, nav.guide .visible > a >  .text,
    501 nav.guide a:hover .bullet, nav.guide a:hover  .text,
    502 nav.guide a:focus .bullet, nav.guide a:focus .text { visibility:visible; }
    503 
    504 /*
    505 html.csstransitions nav.guide .bullet, html.csstransitions nav.guide .text {
    506         visibility: visible; opacity: 0;
    507         -webkit-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    508         -moz-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    509         -ms-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    510         -o-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    511         transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    512 }
    513 html.csstransitions nav.guide li.visible > a > .bullet, html.csstransitions nav.guide .visible > a >  .text,
    514 html.csstransitions nav.guide a:hover .bullet, html.csstransitions nav.guide a:hover  .text,
    515 html.csstransitions nav.guide a:focus .bullet, html.csstransitions nav.guide a:focus .text {
    516         opacity: 1;
    517         -webkit-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    518         -moz-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    519         -ms-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    520         -o-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    521         transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
    522 }
    523 */
    524 
    525 nav.guide a:hover .bullet, nav.guide a:focus .bullet {
    526 
    527 }
    528 
    529 /*nav.guide .current > a > .text { color: #40a8e2; }*/
    530 
    531 /* Relationale Navigation */
    532 nav.rel {
    533         height: 20px;
    534         position: absolute;
    535         top: 20px; left: 40px;
    536         z-index: 0;
    537 }
    538 
    539 nav.rel a {
    540         /*font: 12px "Futura Std Medium";*/
    541         font-size: 12px;
    542         color: #40a8e2;
    543         text-transform: uppercase;
    544         display: inline-block;
    545 }
    546 
    547 nav.rel strong { display: block; }
    548 
    549 nav.rel li  a {
    550         /*float: left;
    551         width: 45%; *//* per JS automatisch angepasst */
    552         padding: 10px; margin-top: 3px; /* footer bg */
    553 }
    554 
    555 nav.rel .prev  a {
    556         text-align: right;
    557 }
    558 nav.rel .next a {
    559         text-align: left;
    560 }
    561 
    562 nav.rel a:hover {
    563         background-color: #dfeaf0;
    564 }
    565 
    566 /* Footer Icon-Sammlung und so */
    567 footer .right {
    568         position: absolute;
    569         top: 2px;
    570         right: 0;
    571         width: 230px;
    572         padding: 15px;
    573         text-align: right;
    574 }
    575 
    576 footer .right img.logo {
    577         float: right;
    578         width:30px;
    579         padding-left: 10px;
    580         padding-right: 11px;
    581 }
    582 
    583 footer .right div.icons {
    584         clear: left;
    585         padding-top: 8px;
    586 }
    587 
    588 footer .right .icons a { opacity: .5; }
    589 footer .right .icons a:hover, footer .right .icons a:focus { opacity: 1; }
Note: See TracChangeset for help on using the changeset viewer.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License