Basic sytling für die Startseite erstellt

- Startseite arbeitet nun mit einem Flow-Design
- Weiterleitende Links angepasst

src/main/resources/static/styles/start.css

@@ -1,18 +1,154 @@
-body {
-    background-color: rgb(44, 49, 54);
-    font-family: Arial, Helvetica, sans-serif;
+input {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -300%);
+    display: block;
+    width: 70vw;
+    opacity: 0;
+    pointer-events: none;
+    transition: all .5s cubic-bezier(.4, .25, .8, .3);
 }
 
-h2 {
-    color: whitesmoke;
-    font-size: 2em;
-    font-family: Georgia, 'Times New Roman', Times, serif;
-    border-bottom: 5px dotted #e3e7ec;
-    border-top: 5px dotted white;
-    width: 50%;
+input {
+    padding: .25rem 0;
+    border: 0;
+    border-bottom: 1px solid #bb1515;
+    outline: 0;
+    background: transparent;
+    color: #fff;
+    font-size: 3rem;
+    line-height: 4rem;
+    letter-spacing: .125rem;
+    transition: all .5s cubic-bezier(.4, .25, .8, .3);
+}
+
+input::selection {
+    background: rgba(#bb1515, 0.25);
+}
+
+.signup-button {
+    padding: .25em 0;
+    border: 0;
+    outline: 0;
+    background: #bb1515;
+    color: #fff;
+    font-size: 2rem;
+    line-height: 3.6rem;
+    letter-spacing: .0625rem;
+    box-shadow: 0 3px 5px 1px rgba(#000, 0.25);
+    text-shadow: 0 -2px 0 rgba(#000, 0.25), 0 1px 0 rgba(#fff, 0.2);
+}
+
+input:focus,
+button:focus {
+    opacity: 1;
+    transform: translate(-50%, -100%);
+    pointer-events: auto;
+    transition: all .4s cubic-bezier(.1, .45, .1, .85) .5s;
+    z-index: 10;
+}
+
+input:focus~input,
+input:focus~button {
+    transform: translate(-50%, 500%);
+    transition: all .5s ease-in;
+}
+
+input:focus~label .label-text {
+    transform: translate(-50%, 300%);
+    transition: all .5s ease-in;
+}
+
+input:focus~.tip {
+    opacity: 1;
+}
+
+input:focus~.signup-button,
+button:focus~.signup-button {
+    opacity: 0;
+}
+
+input:focus+label .label-text {
+    opacity: 1;
+    transform: translate(-50%, -100%);
+    transition: all .3s cubic-bezier(.1, .45, .1, .85) .4s;
+}
+
+input:focus+label .nav-dot:before {
+    background: darken(#bb1515, 5%);
+    box-shadow: 0 0 0 .15rem #111, 0 0 .05rem .26rem #bb1515;
+}
+
+.tip {
+    position: fixed;
+    top: 57%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 70%;
+    opacity: 0;
+    color: #fff;
+    font-size: .875rem;
+    font-weight: 300;
+    letter-spacing: .125rem;
+    text-transform: uppercase;
+    text-align: right;
+    transition: opacity .25s .5s;
+}
+
+.signup-button,
+.signup-button-trigger {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -100%);
+    width: 70vw;
+    padding: .25rem 0;
+    line-height: 3.6rem;
+    text-align: center;
+    pointer-events: none;
+    cursor: pointer;
+    transition: opacity .4s .3s;
+}
+
+.signup-button-trigger {
+    opacity: 0;
+    pointer-events: auto;
+}
+
+.label-text {
+    position: fixed;
+    top: calc(50% - 4rem);
+    left: 50%;
+    transform: translate(-50%, -300%);
+    width: 70vw;
+    padding: 3.125rem 0 1.5rem;
+    text-transform: uppercase;
+    color: #fff;
+    opacity: 0;
+    font-size: 1.125rem;
+    font-weight: 300;
+    letter-spacing: .125rem;
+    pointer-events: none;
+    transition: all .4s cubic-bezier(.4, .25, .8, .3) .05s;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(to bottom right, #111E25 0%, #111 100%);
+    font-family: 'Lato', sans-serif;
 }
 
 form {
-    color: #3cff00;
-    font-weight: bold;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
 }