Skip to content

GitLab

Commit a93b616d authored by Patrick's avatar Patrick
Browse files

some css updates

parent 00bf25fb
Hide whitespace changes
Inline Side-by-side
vcm/css/vcm.css
View file @ a93b616d
......@@ -228,7 +228,7 @@ img.scale {
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
width: 140px;
width: 15%;
height: 50px;
margin-top: .3em;
display: inline-block;
......@@ -240,7 +240,7 @@ img.scale {
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 140px;
width: 15%;
margin-top: .5em;
height: 40px;
}
......@@ -250,7 +250,7 @@ img.scale {
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 140px;
width: 15%;
margin-top: .6em;
height: 40px;
margin-right:1.5em;
......@@ -264,7 +264,7 @@ img.scale {
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 140px;
width: 15%;
padding-left: 10px;
/* margin-left:15px; */
margin-top: .6em;
......@@ -1315,8 +1315,69 @@ a.monument{
overflow: auto;
max-height: 32rem;
}
#balloon_logo01{
width: 55%
}
#balloon_logo02{
width: 45%
}
#balloon_logo03{
width: 65%
}
#balloon_logo04{
width: 25%
}
}
@media screen and (max-width:30em /*480px*/) {
.company-logo3 {
/* background-image: url(../images/logo_kleiner.svg); */
background-image: url(../images/logo_kleiner.svg);
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
width: 12%;
margin-top: .3em;
display: inline-block;
}
.company-logo2 {
background-image: url(../images/Wid_Logo_weiß.png);
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 12%;
margin-top: .5em;
}
.company-logo {
background-image: url(../icons/STUTTGARTmitPferdweiß.png);
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 12%;
margin-top: .6em;
margin-right:1.5em;
margin-left: .8em;
}
.company-logo4 {
background-image: url(../icons/Die_STEG_2010_weiss.png);
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 12%;
padding-left: 10px;
/* margin-left:15px; */
margin-top: .6em;
}
#myBalloon{
top: 29rem !important;
left: 3% !important;
......@@ -1335,19 +1396,48 @@ a.monument{
overflow: auto;
max-height: 20rem;
}
#balloon_logo01{
width: 55%
}
#balloon_logo02{
width: 45%
}
#balloon_logo03{
width: 65%
}
#balloon_logo04{
width: 25%
}
}
@media screen and (max-height: 22.75em /*380px*/){
.balloon-content {
overflow: auto;
max-height: 11rem;
}
#balloon_logo01{
width: 55%
}
#balloon_logo02{
width: 45%
}
#balloon_logo03{
width: 65%
}
#balloon_logo04{
width: 25%
}
}
@media screen and (min-width:30em /*480px*/) {
.balloon-content {
overflow: auto;
max-height: 25rem;
}
.balloon:before {
content: "";
position: absolute;
bottom: -20px;
/* bottom: -20px; */
left: 40px;
border-width: 20px 20px 0;
border-style: solid;
......@@ -1358,7 +1448,7 @@ a.monument{
.balloon:after {
content: "";
position: absolute;
bottom: -12px;
/* bottom: -12px; */
left: 47px;
border-width: 13px 13px 0;
border-style: solid;
......@@ -1366,10 +1456,82 @@ a.monument{
display: block;
width: 0;
}
#balloon_logo01{
width: 55%
}
#balloon_logo02{
width: 45%
}
#balloon_logo03{
width: 65%
}
#balloon_logo04{
width: 25%
}
}
@media screen and (min-width:48em /*768px*/) {
#balloon-startscreen.balloon {
position: absolute;
top: 9%;
left: 10%;
right: auto;
min-width: 45rem;
max-width: 75rem;
max-height:45rem;
margin-bottom:10px;
}
.company-logo3 {
/* background-image: url(../images/logo_kleiner.svg); */
background-image: url(../images/logo_kleiner.svg);
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
width: 140px;
height: 50px;
margin-top: .3em;
display: inline-block;
}
.company-logo2 {
background-image: url(../images/Wid_Logo_weiß.png);
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 140px;
margin-top: .5em;
height: 40px;
}
.company-logo {
background-image: url(../icons/STUTTGARTmitPferdweiß.png);
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 140px;
margin-top: .6em;
height: 40px;
margin-right:1.5em;
margin-left: .8em;
}
.company-logo4 {
background-image: url(../icons/Die_STEG_2010_weiss.png);
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 140px;
padding-left: 10px;
/* margin-left:15px; */
margin-top: .6em;
height: 40px;
}
#balloonContainer {
/*width: 0px;
height: 0px;*/
......@@ -1393,6 +1555,18 @@ a.monument{
div.balloon-content h1{
font-size: 1.1rem;
}
#balloon_logo01{
width: 55%
}
#balloon_logo02{
width: 45%
}
#balloon_logo03{
width: 65%
}
#balloon_logo04{
width: 25%
}
}
......
vcm/index.html
View file @ a93b616d
......@@ -309,11 +309,11 @@
<button id="tourstart-btn" onclick="stopStory();" style="display:none;" class="buttonset one"><span class="i18n_balloon_startscreen_btn">Start</span>
</button> <br>
<div id="iconlist" style="display:none;">
<img src="./icons/STUTTGARTmitPferd.png" alt="Stadt_Logo" style="padding-top:45px;width:500px;padding-left:2em;padding-bottom:45px;">
<img src="./icons/HFT_M4_LAB_rgb.svg" alt="M4_Lab_Logo" width="400px">
<img id="balloon_logo01" src="./icons/STUTTGARTmitPferd.png" alt="Stadt_Logo">
<img id="balloon_logo02" src="./icons/HFT_M4_LAB_rgb.svg" alt="M4_Lab_Logo" >
<img src="./icons/innHoch.svg" alt="InnHochschule" style="width:600px">
<img src="./icons/Die_STEG_2010.jpg" alt="STEG" style="width:20%;padding-bottom:50px;padding-top:50px;">
<img id="balloon_logo03" src="./icons/innHoch.svg" alt="InnHochschule">
<img id="balloon_logo04" src="./icons/Die_STEG_2010.jpg" alt="STEG">
</div>
</div>
<div class="dialog-image-balloon"></div>
......
vcm/templates/story/story.css
View file @ a93b616d
......@@ -311,7 +311,19 @@ div.title-fill {
.vcs_map_container{
bottom: 0px;
right: 45%
}
}
#balloon_logo01{
width: 55%
}
#balloon_logo02{
width: 45%
}
#balloon_logo03{
width: 65%
}
#balloon_logo04{
width: 25%
}
#story-frame{
/* -webkit-transition: left .5s ease-in;
-moz-transition: left .5s ease-in;
......@@ -360,9 +372,9 @@ div.title-fill {
position: absolute;
top: 9%;
left: 10%;
right: auto;
min-width: 45rem;
max-width: 75rem;
right: 10%;
min-width: 90%;
max-width: 90%;
max-height:45rem;
margin-bottom:10px;
......@@ -395,6 +407,35 @@ div.title-fill {
.balloon.teaser-balloon {
left: 4%;
}
#balloon_logo01{
padding-top:45px;
width:500px;
padding-left:2em;
padding-bottom:45px;
}
#balloon_logo02{
width: 400px;
}
#balloon_logo03{
width: 600px;
}
#balloon_logo04{
width:20%;
padding-bottom:50px;
padding-top:50px;
}
#balloon-startscreen.balloon {
position: absolute;
top: 9%;
left: 10%;
right: auto;
min-width: 45rem;
max-width: 75rem;
max-height:45rem;
margin-bottom:10px;
}
}
@media screen and (min-width:75em /*1200px*/) {
......@@ -421,6 +462,35 @@ div.title-fill {
#logoContainer{
display: block;
}
#balloon_logo01{
padding-top:45px;
width:500px;
padding-left:2em;
padding-bottom:45px;
}
#balloon_logo02{
width: 400px;
}
#balloon_logo03{
width: 600px;
}
#balloon_logo04{
width:20%;
padding-bottom:50px;
padding-top:50px;
}
#balloon-startscreen.balloon {
position: absolute;
top: 9%;
left: 10%;
right: auto;
min-width: 45rem;
max-width: 75rem;
max-height:45rem;
margin-bottom:10px;
}
}
.vcs_map_container.tour-inactive{
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal