EayvVr

EayvVr.markdown

EayvVr

Forked from Captain Anonymous's Pen pvbNJm.

A Pen by Gerhard Preuss on CodePen.

License.

index.jade

header
  nav
    button.burger Menu
    ul
      li 
        a Home
      li 
        a Termine
      li 
        a Unglueckskekse
      li 
        a Museum des Scheiterns 
      li 
        a Kontakt/Impressum

div.main
  article
    p Museum des Scheiterns buchen? Anfrage an [email protected]  
  
    p Was in ein Museum des Scheiterns gehört? Eigentlich wäre es am konsequentesten, einfach einen leeren weißen Raum zu nehmen und nur einen Satz an die Wand zu schreiben: „Dinge, die es leider nicht in die Ausstellung geschafft haben.“ Fertig.  
    
    p Doch das wäre nur kurz lustig, und dann doch ziemlich langweilig.  
  
    p Konsequent wäre es auch, das Museum zwar fertig zu gestalten, aber die Öffnungszeiten für einen Montagmorgen zwischen 3.30 Uhr und 3.31 Uhr anzusetzen oder in der Werbung einfach eine falsche Adresse anzugeben. Doch auch so ein Scheitern ist zwar künstlerisch schön, bietet aber keinen großen Erkenntniswert.  
  
    p Interessanter hingegen finden wir den Umgang einer Leistungsgesellschaft, in der Scheitern zum Tabu wird. Die Gesellschaft wünscht sich persönlichen und kollektiven (meist wirtschaftlichen) Erfolg. Im ewig währenden Wettbewerb ist das Ziel Platz 1, alles andere ist egal und nicht der Rede wert. So gibt es nur die Forbes-Liste der reichsten Menschen der Welt, nicht die Forbes-Liste der ärmsten. Und Museen oder Enzyklopädien des Scheiterns funktionieren nur selten, denn Scheitern ist peinlich. Niemand gibt mit seinem Scheitern an. Es sei denn, das Scheitern ist Teil einer Erfolgsgeschichte. Motivationstrainer behaupten gerne, irgendwann in ihrem Leben bankrott gewesen zu sein, aber sich da selbst herausgearbeitet haben („Und Sie können das auch!“). In dieser Ausstellung soll es aber nicht ums optimierte Scheitern, sondern ums echte Scheitern gehen.  
  
    p Eigentlich ist Scheitern in einer erfolgsorientierten Gesellschaft nicht nur peinlich, sondern manchmal auch hilfreich, üblich, und fast immer natürlich. Auch die Menschheit wird von Anfang an vom Scheitern begleitet.  

    p Schon bevor ein neuer Mensch entsteht, geht auf dem Weg zur Eizelle fast alles schief: 200 Millionen Samen machen sich auf den Weg, ein Spermium kommt an. Die meisten Menschen werden nie geboren.  
  
    p Wir haben mit dieser Ausstellung das Ziel, das Scheitern von wirklich ALLEN Seiten zu beleuchten:  

    p Natürlich haben wir uns damit viel mehr vorgenommen, als wir umsetzenkönnen. Aber in dem wir hier scheitern, erfüllen wir wenigstens den Zweck (und sind erfolgreich erfolglos).  
  
    p Museum des Scheiterns in Salzburg:   

    p Argekultur "Erfolgreich erfolglos", 13.11.2014 - 23.11.2014  

  aside
    ul
     li.selected
       img(src='http://placehold.it/400x300&text=123')
     li
       img(src='http://placehold.it/400x300&text=abc')
     li
       img(src='http://placehold.it/400x300')
     li
       img(src='http://placehold.it/400x300')
footer
  .footer-content
    .more
      ul
        li
        li
        li
        li
        li
    .newsletter-info
      p Keine Lust auf Facebook oder das     andere Gedöns? Dann hier eintragen   und höchstens viermal im Jahr auf   dem Laufenden sein rund um Demotivationsworkshops,    Unglückskekse und co! Als Belohnung gibt es hier einen von Nicos 
    .newsletter
      h3 Vier Jahreszeiten Newsletter
      input(type='email',placeholder='[email protected]')
      button Senden

script.js

$('.burger').click(function(){
  $('body').toggleClass('show-menu');
});

$('aside li').click(function(e){
  $('aside li').removeClass('selected');
  $(e.target.parentElement).addClass('selected');
});

style.sass

html
  //height: 100vh
  //width: 100vw
  overflow-x: hidden
  overflow-y: scroll
  -webkit-overflow-scrolling: touch

@mixin vertical-align 
  position: relative
  top: 50%
  transform: translateY(-50%)

li
  a
    display: block
    margin: 10px 0px

body
  transition: all 0.3s ease
  width: 100%
  //padding: 0 10px
  > *
    //width: 100%
    //padding: 0 10px
    box-sizing: border-box

body.show-menu
  transform: translateX(80%)
    
header
  margin: 0 0
  background-color: gray
    
nav
  margin: 0 10px
  height: 50px
  width: 100%
  
  > ul 
    padding: 0 10px
  
  @media(max-width: 565px)
    .burger
      height: 50px
      margin-left: 10px
    > ul
      background-color: gray
      margin-top: 50px
      position: absolute
      width: 80vw
      left: 0
      top: 0
      bottom: 0
      //padding: 0 0
      transform: translateX(-100%)
      li
        text-align: right
        padding: 20px 20px
      
      
  
  @media(min-width: 566px)
    .burger 
      display: none
    > ul
      margin: 0 0
      display: flex
      height: 100%
      list-style: none
      //padding: 0 0
      width: 100%
      > li
        flex-grow: 1
        text-align: center
      > li:first-child
        background-color: darkgrey
        flex-grow: 0
        width: 50px

.main
  min-height: calc(100vh - 182px)
  margin: 10px auto
  max-width: 1050px
  padding: 0 10px
  display: flex
  @media(max-width: 565px)
    flex-direction: column
      
  article
    flex-grow: 2
    padding: 0 10px
    //p
    //  width: 100%
    
  @media(max-width: 565px)
    article
      order: 2
    aside
      order: 1
      ul
        padding: 0 0px
        //height: 200px
        display: flex
        flex-wrap: wrap
        li
          padding: 10px
          display: inline
        li:not(.selected)
          order: 2
          flex-shrink: 1
          flex-basis: 0
          min-width: 20%
          img
            width: 100%
        li.selected
          order: 1
          flex-grow: 1
          min-width: 100%
          box-sizing: border-box
          img 
            width: 100%
    
  @media(min-width: 566px)
    aside
      float: right
      min-width: 33.333%
      //min-width: 200px
      //flex-grow: 1
      ul
        padding: 0 0
        list-style: none
        width: 100%
        li
          padding: 10px
        img
          max-width: 100%
          max-height: 100%
    
  
footer
  width: 100%
  background-color: lightgray
  .footer-content
    padding: 0 10px
    margin: 0 auto
    max-width: 1030px
    min-height: 100px
    display: flex
    flex-wrap: wrap
    > *
      flex-grow: 1
      flex-basis: 0   
      min-width: 250px
      margin: 10px

.more ul
  padding: 0 0
  list-style: none
  display: flex
  justify-content: space-between
  > li
    width: 40px
    height: 40px
    margin: 10px
    background-color: black
  > li:first-child
    margin-left: 0
  > li:last-child
    margin-right: 0
      
.newsletter-info
  font-size: 10px
  text-align: center
  height: 100%
  
@viewport
  zoom: 1.0
  width: device-width