important css changes to improve responsive design

This commit is contained in:
Federico Justus Denkena 2023-08-05 00:14:34 +02:00
parent 73ae438f2a
commit 7d4396eb9d
Signed by: f-denkena
GPG Key ID: 28F91C66EE36F382
4 changed files with 15 additions and 15 deletions

View File

@ -20,7 +20,7 @@ fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
html,body,div{overflow-x:hidden}
body,html{font-family:"Liberation Serif",serif;font-size:1vw;line-height:1.5em;padding-top:32px;height:100%;}
body,html{font-family:"Liberation Serif",serif;font-size:15px;line-height:1.5em;padding-top:32px;height:100%;}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
a,b,body,div,h1,h2,h3,h4,h5,h6,html,i,img,p,span {margin: 0;padding: 0;border: 0;line-height:1.5em}
@ -63,8 +63,9 @@ div.desc{padding:15px;text-align:center;}
.dc-padding-top-large{padding-top:3%!Important}
.dc-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.dc-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.dc-bar{width:100%;overflow:hidden}.dc-center .dc-bar{display:inline-block;width:auto}
.dc-bar .dc-bar-item{padding:1% 16px;float:left;width:auto;border:none;display:block;outline:0}
.dc-bar{padding:1% 16px;float:left;width:100%;overflow:hidden;display:block;float:center}.dc-center .dc-bar{display:inline-block;width:auto}
.dc-bar-item{padding:1% 16px;float:left;width:20%;border:none;display:block;outline:0}
@media (max-width:561px){.dc-bar-item{float:none;width:100%;}}
.dc-bar .dc-dropdown-hover,.dc-bar .dc-dropdown-click{position:static;float:left}
.dc-bar .dc-button{white-space:normal;padding:16px}
.dc-bar-block .dc-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
@ -113,13 +114,13 @@ div.desc{padding:15px;text-align:center;}
.dc-animate-input{transition:width 0.4s ease-in-out}.dc-animate-input:focus{width:100%!important}
.dc-opacity,.dc-hover-opacity:hover{opacity:0.60}.dc-opacity-off,.dc-hover-opacity-off:hover{opacity:1}
.dc-opacity-max{opacity:0.25}.dc-opacity-min{opacity:0.75}
.dc-tiny{font-size:10px!important}.dc-small{font-size:12px!important}.dc-medium{font-size:1vw!important}.dc-large{font-size:1,5vw!important}
.dc-xlarge{font-size:2vw!important}.dc-xxlarge{font-size:36px!important}.dc-xxxlarge{font-size:48px!important}.dc-jumbo{font-size:64px!important}
.dc-tiny{font-size:10px!important}.dc-small{font-size:12px!important}.dc-medium{font-size:15px!important}.dc-large{font-size:18px!important}
.dc-xlarge{font-size:24px!important}.dc-xxlarge{font-size:36px!important}.dc-xxxlarge{font-size:48px!important}.dc-jumbo{font-size:64px!important}
.dc-left-align{text-align:left!important}.dc-right-align{text-align:right!important}.dc-justify{text-align:justify!important}.dc-center{text-align:center!important}
.dc-border-0{border:0!important}.dc-border{border:1px solid #ccc!important}
.dc-border-top{border-top:1px solid #ccc!important}.dc-border-bottom{border-bottom:1px solid #ccc!important}
.dc-border-left{border-left:1px solid #ccc!important}.dc-border-right{border-right:1px solid #ccc!important}
.dc-topbar{border-top:6px solid #ccc!important}.dc-bottombar{border-bottom:6px solid #ccc!important}
.dc-topbar{border-top:6px!important}.dc-bottombar{border-bottom:6px solid #ccc!important}
.dc-leftbar{border-left:6px solid #ccc!important}.dc-rightbar{border-right:6px solid #ccc!important}
.dc-section,.dc-code{margin-top:16px!important;margin-bottom:16px!important}
.dc-margin{margin:16px!important}.dc-margin-top{margin-top:16px!important}.dc-margin-bottom{margin-bottom:16px!important}
@ -176,8 +177,8 @@ div.desc{padding:15px;text-align:center;}
.dc-border-grey,.dc-hover-border-grey:hover,.dc-border-gray,.dc-hover-border-gray:hover{border-color:#9e9e9e!important}
.dc-border-light-grey,.dc-hover-border-light-grey:hover,.dc-border-light-gray,.dc-hover-border-light-gray:hover{border-color:#f1f1f1!important}
.dc-border-dark-grey,.dc-hover-border-dark-grey:hover,.dc-border-dark-gray,.dc-hover-border-dark-gray:hover{border-color:#616161!important}
.dc-main-title{font-weight:700;font-size:5vw !important;line-height:1.1em;text-align:center}
.dc-subtitle{font-weight:500;font-size:3vw !important;line-height:1.1em;text-align:center}
.dc-main-title{font-weight:700;font-size:70px!important;line-height:1.1em;text-align:center}
.dc-subtitle{font-weight:500;font-size:40px!important;line-height:1.1em;text-align:center}
.dc-parallax {background-repeat: no-repeat;background-position: top;background-size: 100%;position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;display: block}
.dc-header {padding: 5vh 0;position: relative;background-position: 50%;background-size: cover}

View File

@ -61,7 +61,6 @@
<h2 class="dc-large dc-text-white dc-center">Hinweise</h2>
<ol class="dc-medium">
<li>Bei überschreiten der maximalen Sitzanzahl von 7 pro Veranstaltung wird Ihre gesamte Reservierung ungültig gemacht.</li>
<li>Gerne können Sie den Rechnungsbetrag für Ihr Ticket auch überweisen. Die Kontodaten finden Sie unter <a href="{% url 'unterstuetzen' %}">Unterstützen</a>. Bitte geben Sie Ihren Namen und einen Hinweis auf die Reservierung im Verwendungszweck mit an.</li>
<li>Für Reservierungen werden die Hälfte aller Plätze bereitgestellt. Weitere Plätze sind, solange der Vorrat reicht, an der Kasse verfügbar.</li>
<li>Die Essensanmeldung umfasst ein Mittagessen während der Pause am Aufführungstag. Pro Essensanmeldung kann nur eine Person erfasst werden. Ein Unkostenbeitrag wird für das Essen erhoben.</li>
<li>Falls Sie eine inkorrekte Mail angegeben haben, Ihre Reservierung noch einmal bearbeiten möchten oder ein anderes Problem haben schreiben Sie eine Mail an <a href="mailto:mysteriendrama@denkena-consulting.com">mysteriendrama@denkena-consulting.com</a>. Wir sind bei allen Anliegen gerne behilflich.</li>

View File

@ -11,7 +11,7 @@
</head>
<body>
<div class="dc-wrapper">
<div class="dc-wrapper dc-responsive">
{% include 'navbar.html' %}
{% block content %}
{% endblock content %}

View File

@ -7,11 +7,11 @@
</div>
<div style="width:100%;padding-left:0%;padding-right:0%" class="dc-bar dc-padding-top-24 dc-flex-container" data-fixed-height="40">
<a style="width:20%" class="dc-bar-item dc-button dc-light-grey dc-padding dc-border-right dc-round-small" href="{% url 'homepage' %}">Startseite</a>
<a style="width:20%" class="dc-bar-item dc-button dc-light-grey dc-padding dc-border-right dc-round-small" href="{% url 'unterstuetzen' %}">Unterstützen</a>
<a style="width:20%" class="dc-bar-item dc-button dc-light-grey dc-padding dc-border-right dc-round-small" href="{% url 'ueber' %}">Über Uns</a>
<a style="width:20%" class="dc-bar-item dc-button dc-light-grey dc-padding dc-border-right dc-round-small" href="{% url 'drama' %}">Zum Drama</a>
<a style="width:20%" class="dc-bar-item dc-button dc-light-grey dc-padding" href="{% url 'kontakt' %}">Kontakt</a>
<a class="dc-bar-item dc-button dc-light-grey dc-padding dc-border-right dc-round-small dc-border-bottom" href="{% url 'homepage' %}">Startseite</a>
<a class="dc-bar-item dc-button dc-light-grey dc-padding dc-border-right dc-round-small dc-border-bottom" href="{% url 'unterstuetzen' %}">Unterstützen</a>
<a class="dc-bar-item dc-button dc-light-grey dc-padding dc-border-right dc-round-small dc-border-bottom" href="{% url 'ueber' %}">Über Uns</a>
<a class="dc-bar-item dc-button dc-light-grey dc-padding dc-border-right dc-round-small dc-border-bottom" href="{% url 'drama' %}">Zum Drama</a>
<a class="dc-bar-item dc-button dc-light-grey dc-padding dc-border-bottom" href="{% url 'kontakt' %}">Kontakt</a>
</div>
</div>
</header>