eintopf.info@v0.13.16/themes/eintopf/assets/css/detail.css (about)

     1  .header .left .search {
     2    display: none;
     3  }
     4  
     5  .header .title {
     6    display: inline-block;
     7    margin-top: 3px;
     8    margin-bottom: 3px;
     9    text-transform: none;
    10    width: calc(100% - 30px);
    11  }
    12  
    13  .header .burger {
    14    margin-top: 0px;
    15  }
    16  
    17  section.detail .container-header {
    18    display: none;
    19  }
    20  
    21  section.detail .infos {
    22    margin-bottom: 1rem;
    23  }
    24  section.detail .info {
    25    font-weight: 700;
    26  }
    27  
    28  section.detail .info .canceled-info {
    29    text-transform: uppercase;
    30  }
    31  
    32  section.detail .info-label {
    33    display: inline-block;
    34    padding-left: 5px;
    35    padding-right: 5px;
    36  
    37    text-transform: uppercase;
    38    background-color: var(--color-grey-light);
    39  }
    40  
    41  section.detail .container-content a {
    42    text-decoration: underline;
    43  }
    44  section.detail .container-content .info-tags a {
    45    text-decoration: none;
    46  }
    47  
    48  section.detail p:not(:last-child) {
    49    margin-bottom: 8px;
    50  }
    51  
    52  section.detail .link {
    53    display: block;
    54    margin-top: var(--spacing-4);
    55    margin-bottom: var(--spacing-4);
    56    text-decoration: underline;
    57  }
    58  
    59  section.detail .image {
    60    width: 100%;
    61  }
    62  
    63  .description {
    64    margin-bottom: 1rem;
    65  }
    66  
    67  #map {
    68    height: 380px;
    69  }
    70  
    71  section.container-eventlist-small .container-header {
    72    display: block;
    73    text-align: center;
    74  }
    75  
    76  section.container-eventlist-small .container-header .name {
    77    display: block;
    78    text-transform: uppercase;
    79  }
    80  
    81  section.container-eventlist-small .event .event-time {
    82    width: 75px;
    83  }
    84  
    85  @media only screen and (max-width: 500px) {
    86    section.detail .container-content {
    87      display: flex;
    88      flex-wrap: wrap;
    89    }
    90    section.detail .container-content .image {
    91      order: 3;
    92    }
    93    section.detail .info {
    94      margin-bottom: 7px;
    95    }
    96  }
    97  
    98  @media only screen and (min-width: 500px) {
    99    section.detail .image {
   100      width: 50%;
   101      float: right;
   102      margin-left: 1rem;
   103      margin-bottom: 1rem;
   104    }
   105    section.detail {
   106      height: fit-content;
   107    }
   108    section.detail .info {
   109      margin-bottom: 7px;
   110    }
   111  }
   112  
   113  @media only screen and (min-width: 800px) {
   114    section.detail .infos {
   115      display: flex;
   116    }
   117    section.detail .infos > div {
   118      width: 50%;
   119    }
   120  
   121    section.detail .container-header {
   122      display: flex;
   123    }
   124  
   125    section.detail .info:last-child {
   126      margin-bottom: 0px;
   127    }
   128  }