plain.css

/* plain style for Ohrenbaum */

body {
    background-color: rgba(255, 255, 255, 0.3);
    font-family: Arial,sans-serif;
    
    margin: 0; padding: 0;
}

/* mobile first */
main,nav { padding: 2%; }

header, nav {
    background-color: #eee;
}

/* Logo */
header a {
    box-sizing: border-box;
    margin: .5em;
    
    text-indent: -1000px;
    background-image: url(Ohrenbaum.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 100%;
    width: 100%;
    max-width: 600px;
    display: block;
    margin: 0 auto;
}

nav ul, nav li {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

a:link, a:visited {
    text-decoration: none;
    position: relative;
    color: #3366FF;
    padding: .2em 0;
}
a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 2px solid #3366FF;
    transition: 0.4s;
}
a:hover:after, a:hover:focus {
    width: 100%;
}

blockquote {
    border-left: .3em dotted #c4c4c4;
    margin-left: 0;
    padding-left: 1em;
}

main p, main li, main blockquote {
    line-height: 1.28;
}

main li {
    margin-bottom: .2em;
}

/* General fadeIn stuff */
@keyframes fadeIn {
  from { opacity: 0;  }
  to { opacity: 1; }
}

.hidden { opacity: 0; }
.fadeIn {
  animation-name: fadeIn;
  animation-duration: 3s;
}

#leaflet-map {
    height: 400px;
    box-shadow: 0 0 15px #aaa;
    border-radius: 3px;
}

@media only screen and (min-width: 800px) {
    /* frameset, anybody?  */
    html,body { width: 100%; height: 100%; overflow: hidden; }
    main { height: 85%;  overflow: scroll;  }
    html,body,main { scroll-behavior: smooth; }
    
    body { 
        display: flex;
        flex-wrap: wrap;
    }

    /* flex items: */
    header, main, nav {
        padding: 2%;
        box-sizing: border-box;
        position: relative;
    }
    
    header {
        flex-basis: 100%;
        width: 100%;
        height: 15%;
        padding: 0;
    }

    main {
        flex-grow: 2;
        width: 80%;
        
        box-shadow: 0 0 9px #aaa inset;
    }
    
    /* Centered image heading */
    header {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    nav li, nav a {
        display: block;
        width: 100%;
    }
    
    nav a {
        padding: .2em !important;
        margin: .5em !important;
    }
    
    nav a:hover, nav a:focus {
        background-color: #C4D3FF;
    }
    
    nav form {
        position: absolute;
        bottom: 5%;
        left: 0;
        width: 100%;
    }
    
    nav label {
        display: block;
        text-align: center;
        font-size: 80%;
        
        opacity: 0;
    }
    
    nav form:hover label {
        opacity: 1;
    }
    
    nav select {
        display: block;
        opacity: .8;
        font-size: 80%;
        margin: 0 auto;
    }
    
    dl {
        display: flex;
        flex-flow: row wrap;
    }

    dt,dd {
        padding: .5em 1em .5em 0;
    }

    /* seperation lines */
    dt:not(:last-of-type), dd:not(:last-of-type) {
        border-bottom: 1px dotted #aaa;
    }

    dt {
        font-weight: bold;
        /* break-after: avoid; */
    }
    dd {
        flex-grow: 2;
        margin: 0;
    }
    
    dl.dt20 dt { flex-basis: 20%; }
    dl.dt20 dd { flex-basis: 70%; }
    dl.dt50 dt { flex-basis: 40%; }
    dl.dt50 dd { flex-basis: 50%; }
    
    #leaflet-map {
        float: right;
        width: 40%;
        margin: 0 0 2em 2em;
    }
    
    img.fullsize {
        position: absolute;
        left: 0; top: 0;
        width: 100%;
    }
}

@media only screen and (max-width: 799px) {
    header {
        padding: 1em 0;
    }
    header a {
        max-width: 70%;
    }
    
    nav { display: flex; }
    nav ul, nav form { display: inline-block; align-self: center; }
    
    nav form {
        text-align: right;
        flex-grow: 2;
    }
    
    nav form label { display: none; }
    
    nav li:not(:first-child):before {
        display: inline-block;
        content: "·";
        padding: 0 .2em;
    }
    
    nav {
        box-shadow: 0 0 30px #bfbfbf;
    }
    
    div.jumbotron div.center { padding-top: 20%; }
    
    dt,dd {
        padding: .5em 1em .5em 0;
        margin: 0;
    }
    dt { font-weight: bold; }
    dd:not(:last-of-type) {
        border-bottom: 1px dotted #aaa; 
    }
    
    #leaflet-map {
        width: 100%;
    }
}


a.top {
    font-weight: bold;
}

div.bild {
    text-align: center;
}

div.bild img {
    width: 80%;
    max-width: 1000px;
    min-width: 400px;
    
    box-shadow: 5px 5px 20px #bdbdbd;
    border: 10px solid white;
    border-radius: 5px;
}

nav a.active {
    color: black;
}


/* Startseite */
    div.jumbotron {
        height: 100%; width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    div.jumbotron > div {
      min-width: 300px;
      max-width: 900px;
      width: 35%;
    }
    div.jumbotron img {
      display: inline-block;
      width: 100%;
      height: auto;
    }
    
    div.jumbotron img.shadow {
      box-shadow: 5px 10px 15px #aaa;
    }

    
/* Irony! */
/* Usage:  .irony-{eq,geq,gt}-{number}, where eq = equals, geq = greater equals, gt = greater then */

/*
body.ironyLevel0 .irony-gt-0,
body.ironyLevel0 .irony-gt-1, body.ironyLevel0 .irony-geq-1, body.ironyLevel0 .irony-eq-1,
body.ironyLevel0 .irony-gt-2, body.ironyLevel0 .irony-geq-2, body.ironyLevel0 .irony-eq-2,
body.ironyLevel0 .irony-gt-3, body.ironyLevel0 .irony-geq-3, body.ironyLevel0 .irony-eq-3,

                                                             body.ironyLevel1 .irony-eq-0,
body.ironyLevel1 .irony-gt-1,                                body.ironyLevel1 .irony-eq-1,
body.ironyLevel1 .irony-gt-2, body.ironyLevel1 .irony-geq-2, body.ironyLevel1 .irony-eq-2,
body.ironyLevel1 .irony-gt-3, body.ironyLevel1 .irony-geq-3, body.ironyLevel1 .irony-eq-3

*/

/* Usage: data-irony="i"       => show if irony level >= i
 *        data-reputation="i"  => show if irony level <= i */

a.asldkjasd { color:red; }

body.ironyLevel0 [data-irony="3"], body.ironyLevel0 [data-irony="2"], body.ironyLevel0 [data-irony="1"],
body.ironyLevel1 [data-irony="3"], body.ironyLevel1 [data-irony="2"],
body.ironyLevel2 [data-irony="3"],

body.ironyLevel1 [data-reputation="0"],
body.ironyLevel2 [data-reputation="0"], body.ironyLevel2 [data-reputation="1"],
body.ironyLevel3 [data-reputation="0"], body.ironyLevel3 [data-reputation="1"], body.ironyLevel3 [data-reputation="2"]
{
    display: none;
}

/* selector doesn't work? Pay attention to wrong comma in foo,baz,{bar} */
/* selector doesn't work? Pay attention to wrong comma in a,b c,d,e {bar} */


/**** what follows are nicer colors for the higher irony levels */

body.ironyLevel1 header, body.ironyLevel1 nav,
body.ironyLevel2 header, body.ironyLevel2 nav,
body.ironyLevel3 header, body.ironyLevel3 nav {
    background-color: transparent;
    box-shadow: none;
}

body.ironyLevel1 > main, body.ironyLevel2 > main, body.ironyLevel3 > main {
    background-color: #ffffffc4;
}

body.ironyLevel1 {
    background-color: #dae8d1;
}

body.ironyLevel2 header a,
body.ironyLevel3 header a {
    background-image: url(Oehrchenbaum.svg);
    margin: .5em;
}

body.ironyLevel2 header, body.ironyLevel2 nav {
    background-color: #020400b5;
}

body.ironyLevel2 nav a {
    color: white;
}

body.ironyLevel2 header a {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

body.ironyLevel2 {
  background-image: linear-gradient(to bottom, transparent 50%, #28487d 50%),
                    linear-gradient(to right, #617ca2 50%, #28487d 50%);
  background-size: 10px 10px, 10px 10px;
}

body.ironyLevel3 header, body.ironyLevel3 nav {
    background-color: #ffffff4a;
}

body.ironyLevel3 nav a {
    background-color: #0000002a;
    color: white;
}

body.ironyLevel3 {
    background:
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
    linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
    background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
    background-color: #840b2a;
}

body.ironyLevel3 {
    cursor: url('https://upload.wikimedia.org/wikipedia/commons/f/fe/Emoji_u1f333.svg'), auto;
}

body.ironyLevel3 a {
    cursor: url('https://upload.wikimedia.org/wikipedia/commons/c/cf/Noto_Emoji_KitKat_1f60d.svg'), auto;
}

body.ironyLevel3 a:hover {
    /*background-color: black;
    color: white;*/
    outline: 20px solid white;
}