diff --git a/css/spni.css b/css/spni.css
index d5e11f6e1cd162614f3137e756b8a91533a9718e..7c8404b3e489c544d74f494ca046e38180946bec 100644
--- a/css/spni.css
+++ b/css/spni.css
@@ -854,6 +854,8 @@ body.modal-open {
* Classes for the title screen.
************************************************************/
+/* Common title classes and elements: */
+
.banner-flair {
text-align: center;
font-size: 110%;
@@ -917,20 +919,22 @@ body.modal-open {
left: 25%;
width: 50%;
bottom: 0;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
-.title-label {
- padding: 0px;
- margin-top: 5px;
- margin-bottom: 0px;
- text-align: center;
- font-size: 160%;
- color: #DD3333;
- text-shadow:
- -1px -1px 0 #000,
- 1px -1px 0 #000,
- -1px 1px 0 #000,
- 1px 1px 0 #000;
+.title-menu-buttons-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ width: 100%;
+}
+
+#warning-screen .title-menu-buttons-container {
+ margin-top: 6%;
}
.title-content-button {
@@ -946,16 +950,53 @@ body.modal-open {
background: #F0F0F0;
}
+/* Main title screen blocks: */
+
#title-name-block {
- position: absolute;
- width: 80%;
height: 16%;
- top: 0;
- margin-left: 10%;
+ width: 80%;
+}
+
+.title-gender-size-container {
+ width: 80%;
+ height: 10.92%;
+ display: flex;
+}
+
+.title-size-block {
+ width: 60%;
+ margin-left: auto;
+
+ display: flex;
+ justify-content: flex-end;
+}
+
+#title-wardrobe-block {
+ width: 90%;
+ margin-top: 2.5%;
+}
+
+/* Name / Gender / Size block elements: */
+
+.title-gender-button {
+ width: 16.875%;
+}
+
+.title-label {
+ padding: 0px;
+ margin-top: 5px;
+ margin-bottom: 0px;
+ text-align: center;
+ font-size: 160%;
+ color: #DD3333;
+ text-shadow:
+ -1px -1px 0 #000,
+ 1px -1px 0 #000,
+ -1px 1px 0 #000,
+ 1px 1px 0 #000;
}
#player-name-field {
- position: absolute;
width: 100%;
height: 60%;
text-align: center;
@@ -963,31 +1004,14 @@ body.modal-open {
background: rgba(240, 240, 240, 1);
}
-#title-gender-block {
- position: absolute;
- width: 30%;
- top: 16.5%;
- margin-left: 10%;
-}
-
-#male-gender-button {
- position: relative;
- width: 45%;
- top: 0;
- right: 0;
+#female-gender-button {
+ margin-left: 1%;
}
.main-title-container.male #male-gender-button {
opacity: 1;
}
-#female-gender-button {
- position: relative;
- width: 45%;
- top: 0;
- right: 0;
-}
-
.main-title-container.female #female-gender-button {
opacity: 1;
}
@@ -1008,14 +1032,6 @@ body.modal-open {
display: none;
}
-.title-size-block {
- position: absolute;
- width: 45%;
- top: 16.5%;
- right: 0;
- margin-right: 7.25%;
-}
-
.small > .title-small-button {
opacity: 1;
}
@@ -1028,27 +1044,11 @@ body.modal-open {
opacity: 1;
}
-.title-small-button {
- position: relative;
+.title-size-button {
width: 30%;
}
-.title-medium-button {
- position: relative;
- width: 30%;
-}
-
-.title-large-button {
- position: relative;
- width: 30%;
-}
-
-#title-wardrobe-block {
- position: absolute;
- width: 90%;
- top: 30%;
- margin-left: 5%;
-}
+/* Title clothing block elements: */
.title-clothing-container {
margin-top: 1%;
@@ -1083,22 +1083,33 @@ body.modal-open {
width: 15.7%;
}
-#title-start-edge {
- position: absolute;
+/* Gallery / Start / Tag button elements: */
+
+.centered-icon-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.centered-icon-image {
+ width: 55%;
+ height: auto;
+}
+
+.centered-icon-glyphicon {
+ width: 2em;
+ height: auto;
+ font-size: 1.25em;
+}
+
+.title-start-edge {
width: 36%;
- height: 15%;
- bottom: 6%;
- /*right: 6%;*/
- left: 32%;
font-size: 200%;
padding: 0.5%;
background: linear-gradient(#222222, #111111);
}
-#title-start-button {
- position: absolute;
- width: 97%;
- height: 95%;
+.title-start-button {
padding-left: 2%;
padding-right: 3%;
font-size: 200%;
@@ -1110,25 +1121,20 @@ body.modal-open {
width: 90%;
}
-#title-gallery-edge {
- position: absolute;
- /*
- width: 11%;
- height: 8.5%;
- */
- width: 24%;
- height: 15%;
- bottom: 6%;
- left: 6%;
+.title-gallery-edge {
+ width: 20%;
+ height: 80%;
+
font-size: 200%;
padding: 0.2%;
background: linear-gradient(#222222, #111111);
+
+ margin-right: 6.25%;
}
-#title-gallery-button {
- position: absolute;
- width: 97%;
- height: 95%;
+.title-gallery-button {
+ height: 100%;
+
padding-top: 1%;
padding-bottom: 1%;
padding-left: 2%;
@@ -1136,29 +1142,21 @@ body.modal-open {
font-size: 200%;
}
-.title-gallery-image {
- position: absolute;
- top: 20%;
- left: 35%;
- width: 30%;
- height: auto;
-}
-
-#title-tags-edge {
- position: absolute;
- width: 11%;
- height: 8.5%;
- bottom: 6%;
- right: 0%;
+.title-tags-edge {
+ width: 20%;
+ height: 80%;
+
font-size: 200%;
padding: 0.2%;
background: linear-gradient(#222222, #111111);
+
+ margin-left: 6.25%;
}
-#title-tags-button {
- position: absolute;
- width: 97%;
- height: 95%;
+.title-tags-button {
+ width: 100%;
+ height: 100%;
+
padding-left: 3%;
padding-right: 2%;
font-size: 100%;
diff --git a/index.html b/index.html
index 4b7c4766faf648a71e3ae5bd0a0888672131f27b..df8c82a13a805f90138fb1bbbe44c03c3f966d4d 100644
--- a/index.html
+++ b/index.html
@@ -62,10 +62,12 @@
<!-- Start Button -->
- <div id='title-start-edge' class='bordered'>
- <button id='title-start-button' class='bordered smooth-button smooth-button-red' onclick="enterTitleScreen()">
- <img class='title-entrance-image' src='img/enter.png'/>
- </button>
+ <div class='title-menu-buttons-container'>
+ <div class='bordered title-start-edge'>
+ <button class='bordered smooth-button smooth-button-red title-start-button' onclick="enterTitleScreen()">
+ <img class='title-entrance-image' src='img/enter.png'/>
+ </button>
+ </div>
</div>
</div>
@@ -117,26 +119,26 @@
<input type="text" class='bordered' id='player-name-field'/>
</div>
- <!-- Player Gender -->
- <div id='title-gender-block'>
- <input type='image' value='' id='male-gender-button' class='bordered title-content-button' src='img/male.png' onclick='changePlayerGender("male")'>
- <input type='image' value='' id='female-gender-button' class='bordered title-content-button' src='img/female.png' onclick='changePlayerGender("female")'>
- </div>
-
- <!-- Player Male Size -->
- <div id='male-size-container' class='title-size-block medium'>
- <input type='image' value='' id="small-junk-button" class='bordered title-small-button title-content-button' src='img/male_small.png' onclick='changePlayerSize("small")'>
- <input type='image' value='' id="medium-junk-button" class='bordered title-medium-button title-content-button' src='img/male_medium.png' onclick='changePlayerSize("medium")'>
- <input type='image' value='' id="large-junk-button" class='bordered title-large-button title-content-button' src='img/male_large.png' onclick='changePlayerSize("large")'>
- </div>
-
- <!-- Player Female Size -->
- <div id='female-size-container' class='title-size-block medium'>
- <input type='image' value='' id="small-boobs-button" class='bordered title-small-button title-content-button' src='img/female_small.png' onclick='changePlayerSize("small")'>
- <input type='image' value='' id="medium-boobs-button" class='bordered title-medium-button title-content-button' src='img/female_medium.png' onclick='changePlayerSize("medium")'>
- <input type='image' value='' id="large-boobs-button" class='bordered title-large-button title-content-button' src='img/female_large.png' onclick='changePlayerSize("large")'>
+ <div class="title-gender-size-container">
+ <!-- Player Gender -->
+ <input type='image' value='' id='male-gender-button' class='bordered title-content-button title-gender-button' src='img/male.png' onclick='changePlayerGender("male")'>
+ <input type='image' value='' id='female-gender-button' class='bordered title-content-button title-gender-button' src='img/female.png' onclick='changePlayerGender("female")'>
+
+ <!-- Player Male Size -->
+ <div id='male-size-container' class='title-size-block medium'>
+ <input type='image' value='' id="small-junk-button" class='bordered title-small-button title-content-button title-size-button' src='img/male_small.png' onclick='changePlayerSize("small")'>
+ <input type='image' value='' id="medium-junk-button" class='bordered title-medium-button title-content-button title-size-button' src='img/male_medium.png' onclick='changePlayerSize("medium")'>
+ <input type='image' value='' id="large-junk-button" class='bordered title-large-button title-content-button title-size-button' src='img/male_large.png' onclick='changePlayerSize("large")'>
+ </div>
+
+ <!-- Player Female Size -->
+ <div id='female-size-container' class='title-size-block medium'>
+ <input type='image' value='' id="small-boobs-button" class='bordered title-small-button title-content-button title-size-button' src='img/female_small.png' onclick='changePlayerSize("small")'>
+ <input type='image' value='' id="medium-boobs-button" class='bordered title-medium-button title-content-button title-size-button' src='img/female_medium.png' onclick='changePlayerSize("medium")'>
+ <input type='image' value='' id="large-boobs-button" class='bordered title-large-button title-content-button title-size-button' src='img/female_large.png' onclick='changePlayerSize("large")'>
+ </div>
</div>
-
+
<!-- Player Wardrobe -->
<div id='title-wardrobe-block'>
<div class='title-label'>What are you wearing?</div>
@@ -191,26 +193,25 @@
</div>
</div>
- <!-- Start Button -->
- <div id='title-start-edge' class='bordered'>
- <button id='title-start-button' class='bordered smooth-button smooth-button-red' onclick="validateTitleScreen()">
- <img class='title-entrance-image' src='img/enter.png'/>
- </button>
- </div>
- <div id='title-gallery-edge' class='bordered'>
- <button id='title-gallery-button' class='bordered smooth-button smooth-button-red' onclick="loadGalleryScreen()">
- <img class='title-gallery-image' src='img/gallery.svg'/>
- </button>
- </div>
- <div id='title-tags-edge' class='bordered'>
- <button id='title-tags-button' class='bordered smooth-button smooth-button-red' onclick="showPlayerTagsModal()">
- <span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
- </button>
- </div>
-
+ <!-- Start Button -->
+ <div class='title-menu-buttons-container'>
+ <div class='bordered title-gallery-edge'>
+ <button class='bordered smooth-button smooth-button-red centered-icon-button title-menu-button title-gallery-button' onclick="loadGalleryScreen()">
+ <img class='centered-icon-image' src='img/gallery.svg'/>
+ </button>
+ </div>
+ <div class='bordered title-start-edge'>
+ <button class='bordered smooth-button smooth-button-red centered-icon-button title-start-button' onclick="validateTitleScreen()">
+ <img class='centered-icon-image title-entrance-image' src='img/enter.png'/>
+ </button>
+ </div>
+ <div class='bordered title-tags-edge'>
+ <button class='bordered smooth-button smooth-button-red centered-icon-button title-menu-button title-tags-button' onclick="showPlayerTagsModal()">
+ <span class="glyphicon glyphicon-tags centered-icon-glyphicon" aria-hidden="true"></span>
+ </button>
+ </div>
+ </div>
</div>
-
-
</div>
</div>