Is it not time to go responsive?

[Ritalin]

I don't use gw or ascension much on my phone but when I do its terrible..

Zooming and missing content etc is a thing of the past!! Can we not get mobile layouts?

Not sure on how much exp admin/sol/jo etc have in responsive none javascript web design so I think as a community all of the coders/web designers should create a 1 page template based on the existing design and make it fully mobile and tablet responsive and host a copy on a free domain for everyone to view and vote on...

Not sure how admin feels about this but I think I could be fun and better for us players in the long run!

I think if anyone is willing to have a go that you should definatly remove all tables lol tables are soooooooo crap

[Support]

A responsive layout is already being made.

Good call though.
If anyone wants to make images for use with SGW that do not infringe on any copyrights, your creative juices are more useful in that direction.

[Ritalin]

A responsive layout is already being made.

Good call though.
If anyone wants to make images for use with SGW that do not infringe on any copyrights, your creative juices are more useful in that direction.

sweet, cant wait to see whats been done... will it be a updated on Dev for us to get a sneaky peak?

Also my image design skills are not the best but there are tons of good sig makers that probably would be great for this!!

[Ritalin]

Maybe you could use something similar to this in the design

The HTML

[spoiler]

Code: Select all

<h1>Gatewars.com</h1>
<div class="light"></div>

<div class="pyramid-gyro">
  <div class="pyramid-axis">
    
    <div class="pyramid-wall front"></div>
    <div class="pyramid-wall back"></div>
    <div class="pyramid-wall left"></div>
    <div class="pyramid-wall right"></div>
    
    <div class="bottom"></div>
    <div class="shadow"></div>
  </div>
</div>

[/spoiler]


The CSS
[spoiler]

Code: Select all

.light {
  position: absolute;
  width: 0;
  height: 150px;
  top: -200px;
  left: 50%;
  box-shadow: 0 0 25px 25px rgba(0, 128, 255, 0.5), 0 -15px 8px 8px rgba(255, 255, 255, 0.5);
  z-index: 1;
}

.pyramid-gyro {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -100px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 100px;
  -moz-perspective-origin: 50% 100px;
  -ms-perspective-origin: 50% 100px;
  -o-perspective-origin: 50% 100px;
  perspective-origin: 50% 100px;
}

.pyramid-axis {
  position: relative;
  width: 200px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.pyramid-wall {
  position: absolute;
  border: 100px solid transparent;
}

.front {
  bottom: -20px;
  border-bottom: 200px solid rgba(30, 20, 0, 0.5);
  -webkit-transform: translateZ(25px) rotateX(30deg);
  -moz-transform: translateZ(25px) rotateX(30deg);
  -ms-transform: translateZ(25px) rotateX(30deg);
  -o-transform: translateZ(25px) rotateX(30deg);
  transform: translateZ(25px) rotateX(30deg);
}

.back {
  bottom: -20px;
  border-bottom: 200px solid rgba(30, 20, 0, 0.5);
  -webkit-transform: translateZ(-25px) rotateY(180deg) rotateX(30deg);
  -moz-transform: translateZ(-25px) rotateY(180deg) rotateX(30deg);
  -ms-transform: translateZ(-25px) rotateY(180deg) rotateX(30deg);
  -o-transform: translateZ(-25px) rotateY(180deg) rotateX(30deg);
  transform: translateZ(-25px) rotateY(180deg) rotateX(30deg);
}

.left {
  bottom: -20px;
  left: 75px;
  border-bottom: 200px solid rgba(25, 15, 0, 0.5);
  -webkit-transform: rotateY(270deg) translateX(-100px) rotateX(30deg);
  -moz-transform: rotateY(270deg) translateX(-100px) rotateX(30deg);
  -ms-transform: rotateY(270deg) translateX(-100px) rotateX(30deg);
  -o-transform: rotateY(270deg) translateX(-100px) rotateX(30deg);
  transform: rotateY(270deg) translateX(-100px) rotateX(30deg);
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -ms-transform-origin: center left;
  -o-transform-origin: center left;
  transform-origin: center left;
}

.right {
  bottom: -40px;
  right: 150px;
  border-bottom: 200px solid rgba(25, 15, 0, 0.5);
  -webkit-transform: rotateY(-270deg) translateX(100px) rotateX(30deg);
  -moz-transform: rotateY(-270deg) translateX(100px) rotateX(30deg);
  -ms-transform: rotateY(-270deg) translateX(100px) rotateX(30deg);
  -o-transform: rotateY(-270deg) translateX(100px) rotateX(30deg);
  transform: rotateY(-270deg) translateX(100px) rotateX(30deg);
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
}

.bottom {
  width: 200px;
  height: 200px;
  border-bottom: 200px solid rgba(25, 15, 0, 0.75);
  -webkit-transform: rotateX(90deg) translateY(100px);
  -moz-transform: rotateX(90deg) translateY(100px);
  -ms-transform: rotateX(90deg) translateY(100px);
  -o-transform: rotateX(90deg) translateY(100px);
  transform: rotateX(90deg) translateY(100px);
  -webkit-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  -o-transform-origin: bottom center;
  transform-origin: bottom center;
}

.shadow {
  position: absolute;
  top: 250px;
  width: 0;
  height: 0;
  box-shadow: 0 0 50px 100px rgba(0, 0, 0, 0.5);
  -webkit-transform: rotateX(90deg) translateX(100px);
  -moz-transform: rotateX(90deg) translateX(100px);
  -ms-transform: rotateX(90deg) translateX(100px);
  -o-transform: rotateX(90deg) translateX(100px);
  transform: rotateX(90deg) translateX(100px);
}
/* ANIMATIONS */

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotateY(0);
  }
  to {
    -moz-transform: rotateY(360deg);
  }
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotateY(0);
  }
  to {
    -ms-transform: rotateY(360deg);
  }
}

@-o-keyframes spin {
  from {
    -o-transform: rotateY(0);
  }
  to {
    -o-transform: rotateY(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}

.pyramid-axis {
  -webkit-animation: spin 16s infinite linear;
  -moz-animation: spin 16s infinite linear;
  -ms-animation: spin 16s infinite linear;
  -o-animation: spin 16s infinite linear;
  animation: spin 16s infinite linear;
}

.light {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.pyramid-wall,
.bottom,
.shadow {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  -webkit-transition-delay: 1.25s;
  -moz-transition-delay: 1.25s;
  -ms-transition-delay: 1.25s;
  -o-transition-delay: 1.25s;
  transition-delay: 1.25s;
}

body:hover .light {
  top: 0;
}

body:hover .front,
body:hover .back {
  border-bottom-color: rgba(0, 128, 255, 0.1);
}

body:hover .left,
body:hover .right,
body:hover .bottom {
  border-bottom-color: rgba(0, 108, 235, 0.1);
}

body:hover .shadow {
  box-shadow: 0 0 50px 100px rgba(0, 108, 235, 0.5);
}
/* NORMAL DOCUMENT STYLING */

a {
  position: absolute;
  top: 0;
  right: 25px;
  padding: 10px;
  border-radius: 0 0 5px 5px;
  background: #222;
  color: #888;
  text-decoration: none;
}

a:hover {
  background: #0088ff;
  color: #fff;
}

h1 {
  position: relative;
  width:240px;
  height:55px;
  margin: 0 15px;
  font-family: 'Palatino', 'Georgia', serif;
  color: #222244;
  text-shadow: 0 0 4px #fff;
}

h1:after {
  content: "Where God Is Just A Title...";
  position: absolute;
  top: 35px;
  right: 0px;
  font-size: 14px;
  color: #fff;
  opacity: 0.5;
  font-weight: normal;
}

body {
  width: 800px;
  height: 425px;
  margin: 0 auto;
  background: url() no-repeat;
  background-size: 100%;
}

html {
  background: #000;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[/spoiler]

And this has a lot of potential

https://jsfiddle.net/wNKcU/608/embedded/result/

And even this

http://codepen.io/schoenwaldnils/pen/LVYzZW

And this gate is very basic but its just a frame that can have image segments in place of the colours

http://codepen.io/stevelacey/pen/DusaI