Changeset 1423 in t29-www


Ignore:
Timestamp:
Jan 7, 2018, 1:31:58 AM (19 months ago)
Author:
sven
Message:

Startseite: Exemplarischen Slider (Karoussell) hinzugefügt, mit Platzhalterelementen.

Files:
1 added
3 edited

Legend:

Unmodified
Added
Removed
  • de/index.php

    r1414 r1423  
    88
    99<header class="teaser seitenstart">
    10         <h2>
    11         Vergangenheit verstehen <br>
    12         <span class="subtext">Zukunft gestalten</span>
    13         </h2>
    14         <img class="no-copyright" src="/shared/photos/start/startseite.jpg" width="940" height="289">
     10<div class="slider-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
     11        <!-- Erstes Bild (Noscript: Default) -->
     12        <div class="slide">
     13                <h2>
     14                Vergangenheit verstehen <br>
     15                <span class="subtext">Zukunft gestalten</span>
     16                </h2>
     17                <img class="no-copyright" src="/shared/photos/start/startseite.jpg" width="940" height="289">
     18        </div>
     19
     20        <!-- Zweites Bild (nur mit JavaScript) -->
     21        <div class="slide js">
     22                <h2>
     23                Mit Mechanischer Rechnertechnik<br>
     24                <span class="subtext">und weiter</span>
     25                </h2>
     26                <img class="no-copyright" src="/shared/photos/rechnertechnik/header-mechanik.jpg" width="940" height="289">
     27        </div>
     28
     29        <!-- Zweites Bild (nur mit JavaScript) -->
     30        <div class="slide js">
     31                <h2>
     32                Und Speichermedien<br>
     33                <span class="subtext">und weiter</span>
     34                </h2>
     35                <img class="no-copyright" src="/shared/photos/rechnertechnik/speichermedien/header-memory.jpg" width="940" height="289">
     36        </div>
     37</div>
    1538</header>
    16 
    1739
    1840
  • lib/ressourceloader.php

    r516 r1423  
    209209                                $urls[] = 'http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAraTKZ5cINardZ8ITNVssKhRcOoEBtCgYLJRQznXYEV8m1M3fRRRT9wMSvFwhyo62fD3KyiwQxe5ruw';
    210210                                break;
     211                        case 'startseite':
     212                                $urls[] = '/shared/js-v6/libs/flickity.pkgd.min.js'; // Caroussel-Slider
     213                                break;
    211214                }
    212215                return $urls;
  • shared/css-v6/pagestyles/startseite.css

    r741 r1423  
    250250}
    251251
     252
     253/*** Slider (http://meandmax.github.io/lory/) Styles ***/
     254/*** Started 2018-01-07 ***/
     255
     256header h2 a.anchor { /* Keine Ablenkung */
     257        display: none;
     258}
     259
     260/*! Flickity v2.0.10
     261http://flickity.metafizzy.co
     262---------------------------------------------- */
     263
     264.flickity-enabled {
     265  position: relative;
     266}
     267
     268.flickity-enabled:focus { outline: none; }
     269
     270.flickity-viewport {
     271  overflow: hidden;
     272  position: relative;
     273  height: 100%;
     274}
     275
     276.flickity-slider {
     277  position: absolute;
     278  width: 100%;
     279  height: 100%;
     280}
     281
     282/* draggable */
     283
     284.flickity-enabled.is-draggable {
     285  -webkit-tap-highlight-color: transparent;
     286          tap-highlight-color: transparent;
     287  -webkit-user-select: none;
     288     -moz-user-select: none;
     289      -ms-user-select: none;
     290          user-select: none;
     291}
     292
     293.flickity-enabled.is-draggable .flickity-viewport {
     294  cursor: move;
     295  cursor: -webkit-grab;
     296  cursor: grab;
     297}
     298
     299.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
     300  cursor: -webkit-grabbing;
     301  cursor: grabbing;
     302}
     303
     304/* ---- previous/next buttons ---- */
     305
     306.flickity-prev-next-button {
     307  position: absolute;
     308  top: 50%;
     309  width: 44px;
     310  height: 44px;
     311  border: none;
     312  border-radius: 50%;
     313  background: white;
     314  background: hsla(0, 0%, 100%, 0.75);
     315  cursor: pointer;
     316  /* vertically center */
     317  -webkit-transform: translateY(-50%);
     318          transform: translateY(-50%);
     319}
     320
     321.flickity-prev-next-button:hover { background: white; }
     322
     323.flickity-prev-next-button:focus {
     324  outline: none;
     325  box-shadow: 0 0 0 5px #09F;
     326}
     327
     328.flickity-prev-next-button:active {
     329  opacity: 0.6;
     330}
     331
     332.flickity-prev-next-button.previous { left: 10px; }
     333.flickity-prev-next-button.next { right: 10px; }
     334/* right to left */
     335.flickity-rtl .flickity-prev-next-button.previous {
     336  left: auto;
     337  right: 10px;
     338}
     339.flickity-rtl .flickity-prev-next-button.next {
     340  right: auto;
     341  left: 10px;
     342}
     343
     344.flickity-prev-next-button:disabled {
     345  opacity: 0.3;
     346  cursor: auto;
     347}
     348
     349.flickity-prev-next-button svg {
     350  position: absolute;
     351  left: 20%;
     352  top: 20%;
     353  width: 60%;
     354  height: 60%;
     355}
     356
     357.flickity-prev-next-button .arrow {
     358  fill: #333;
     359}
     360
     361/* ---- page dots ---- */
     362
     363.flickity-page-dots {
     364  position: absolute;
     365  width: 100%;
     366  bottom: -25px;
     367  padding: 0;
     368  margin: 0;
     369  list-style: none;
     370  text-align: center;
     371  line-height: 1;
     372}
     373
     374.flickity-rtl .flickity-page-dots { direction: rtl; }
     375
     376.flickity-page-dots .dot {
     377  display: inline-block;
     378  width: 10px;
     379  height: 10px;
     380  margin: 0 8px;
     381  background: #333;
     382  border-radius: 50%;
     383  opacity: 0.25;
     384  cursor: pointer;
     385}
     386
     387.flickity-page-dots .dot.is-selected {
     388  opacity: 1;
     389}
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