Skip to content
GitLab
Commit a93b616d authored by Patrick's avatar Patrick
Browse files

some css updates

parent 00bf25fb
Show whitespace changes
Inline Side-by-side
vcm/css/vcm.css
View file @ a93b616d
...@@ -228,7 +228,7 @@ img.scale { ...@@ -228,7 +228,7 @@ img.scale {
background-color: transparent; background-color: transparent;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 140px; width: 15%;
height: 50px; height: 50px;
margin-top: .3em; margin-top: .3em;
display: inline-block; display: inline-block;
...@@ -240,7 +240,7 @@ img.scale { ...@@ -240,7 +240,7 @@ img.scale {
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 140px; width: 15%;
margin-top: .5em; margin-top: .5em;
height: 40px; height: 40px;
} }
...@@ -250,7 +250,7 @@ img.scale { ...@@ -250,7 +250,7 @@ img.scale {
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 140px; width: 15%;
margin-top: .6em; margin-top: .6em;
height: 40px; height: 40px;
margin-right:1.5em; margin-right:1.5em;
...@@ -264,7 +264,7 @@ img.scale { ...@@ -264,7 +264,7 @@ img.scale {
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 140px; width: 15%;
padding-left: 10px; padding-left: 10px;
/* margin-left:15px; */ /* margin-left:15px; */
margin-top: .6em; margin-top: .6em;
...@@ -1315,8 +1315,69 @@ a.monument{ ...@@ -1315,8 +1315,69 @@ a.monument{
overflow: auto; overflow: auto;
max-height: 32rem; 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*/) { @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{ #myBalloon{
top: 29rem !important; top: 29rem !important;
left: 3% !important; left: 3% !important;
...@@ -1335,19 +1396,48 @@ a.monument{ ...@@ -1335,19 +1396,48 @@ a.monument{
overflow: auto; overflow: auto;
max-height: 20rem; 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*/){ @media screen and (max-height: 22.75em /*380px*/){
.balloon-content { .balloon-content {
overflow: auto; overflow: auto;
max-height: 11rem; 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*/) { @media screen and (min-width:30em /*480px*/) {
.balloon-content {
overflow: auto;
max-height: 25rem;
}
.balloon:before { .balloon:before {
content: ""; content: "";
position: absolute; position: absolute;
bottom: -20px; /* bottom: -20px; */
left: 40px; left: 40px;
border-width: 20px 20px 0; border-width: 20px 20px 0;
border-style: solid; border-style: solid;
...@@ -1358,7 +1448,7 @@ a.monument{ ...@@ -1358,7 +1448,7 @@ a.monument{
.balloon:after { .balloon:after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: -12px; /* bottom: -12px; */
left: 47px; left: 47px;
border-width: 13px 13px 0; border-width: 13px 13px 0;
border-style: solid; border-style: solid;
...@@ -1366,10 +1456,82 @@ a.monument{ ...@@ -1366,10 +1456,82 @@ a.monument{
display: block; display: block;
width: 0; 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*/) { @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 { #balloonContainer {
/*width: 0px; /*width: 0px;
height: 0px;*/ height: 0px;*/
...@@ -1393,6 +1555,18 @@ a.monument{ ...@@ -1393,6 +1555,18 @@ a.monument{
div.balloon-content h1{ div.balloon-content h1{
font-size: 1.1rem; 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 @@ ...@@ -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 id="tourstart-btn" onclick="stopStory();" style="display:none;" class="buttonset one"><span class="i18n_balloon_startscreen_btn">Start</span>
</button> <br> </button> <br>
<div id="iconlist" style="display:none;"> <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 id="balloon_logo01" src="./icons/STUTTGARTmitPferd.png" alt="Stadt_Logo">
<img src="./icons/HFT_M4_LAB_rgb.svg" alt="M4_Lab_Logo" width="400px"> <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 id="balloon_logo03" src="./icons/innHoch.svg" alt="InnHochschule">
<img src="./icons/Die_STEG_2010.jpg" alt="STEG" style="width:20%;padding-bottom:50px;padding-top:50px;"> <img id="balloon_logo04" src="./icons/Die_STEG_2010.jpg" alt="STEG">
</div> </div>
</div> </div>
<div class="dialog-image-balloon"></div> <div class="dialog-image-balloon"></div>
......
vcm/templates/story/story.css
View file @ a93b616d
...@@ -311,6 +311,18 @@ div.title-fill { ...@@ -311,6 +311,18 @@ div.title-fill {
.vcs_map_container{ .vcs_map_container{
bottom: 0px; bottom: 0px;
right: 45% right: 45%
}
#balloon_logo01{
width: 55%
}
#balloon_logo02{
width: 45%
}
#balloon_logo03{
width: 65%
}
#balloon_logo04{
width: 25%
} }
#story-frame{ #story-frame{
/* -webkit-transition: left .5s ease-in; /* -webkit-transition: left .5s ease-in;
...@@ -360,9 +372,9 @@ div.title-fill { ...@@ -360,9 +372,9 @@ div.title-fill {
position: absolute; position: absolute;
top: 9%; top: 9%;
left: 10%; left: 10%;
right: auto; right: 10%;
min-width: 45rem; min-width: 90%;
max-width: 75rem; max-width: 90%;
max-height:45rem; max-height:45rem;
margin-bottom:10px; margin-bottom:10px;
...@@ -395,6 +407,35 @@ div.title-fill { ...@@ -395,6 +407,35 @@ div.title-fill {
.balloon.teaser-balloon { .balloon.teaser-balloon {
left: 4%; 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*/) { @media screen and (min-width:75em /*1200px*/) {
...@@ -421,6 +462,35 @@ div.title-fill { ...@@ -421,6 +462,35 @@ div.title-fill {
#logoContainer{ #logoContainer{
display: block; 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{ .vcs_map_container.tour-inactive{
......
Supports Markdown
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