Style adjustments

2 years ago · 1da7eacefc
parent ae395819a4
commit 1da7eacefc
2 changed files with 54 additions and 71 deletions
--- a/public/css/index.css
+++ b/public/css/index.css
@ -3,15 +3,14 @@
 body
 {
    margin:0;
-    background-image: url("../images/wallhaven-650953.jpg");
    height:100%;
    width:100%;
+    margin: 0 0 0 0;
    position:absolute;
    top:0%;
    left:0%;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-position: center;
+    font-family: 'lato';
+    background-color: #071c24;
 }
 .Footer
 {
@ -42,8 +41,8 @@ button
 }
 .githublogo
 {
-    height:5%;
-    width:5%;
+    height: 20px;
+    width: 20px;
 }
 .github
 {
@ -54,14 +53,22 @@ button
    font-weight:bolder;
    color:black;
    position: absolute;
-    top:55%;
-    left:40vw;
+    top: 55%;
+    left: 50%;
+    width: 8%;
+    height: 4%;
+    transform: translateX(-50%);
+}
+a
+{
+    text-decoration: none;
+    color:black;
 }
 h1
 {
-    display:block;
-    padding-bottom: 30%;
-    color:rgb(0, 183, 255);
+    display: block;
+    padding-top: 22%;
+    color: rgb(0, 183, 255);
    font-size: 50px;
    font-family: 'Lato', sans-serif;
    font-weight: bolder;
@ -72,67 +79,41 @@ h1
 {
    text-align: center;
    position: relative;
-    top: 60%;
+
    padding-top: 1%;
 }
-.bottom
-{   
-    position: absolute;    
-    top:98%;
-    width: 85%;
-    border-bottom: 2px solid #010f14;
-}
-a,
-a:link,
-a:visited,
-a:hover,
-a:active
-{ 
-    text-decoration: none;
-    color:black;
-}
-.center 
-{
-    text-align: center;
-    margin: auto;
-    width: 50%;
-    padding: 10px;
-}
-
-
-.verticalCenter
+.Container 
 {
+    height: 100%;
+    width: 100%;
    position: absolute;
-    margin: 0;
-    top: 50%;
-    left: 50%;
-    -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-}
-.container 
-{
-  height: 100%;
-  position: relative;
-  
-}
-
-#iName:focus
-{
-    color: black
+    top:0;
+    left:0;
+    background-color: #fffff08c;
 }
-#iPassword:focus
+.background
 {
-    color: black
-}
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top:0;
+    left:0;
+    background-image: url("../images/wallhaven-650953.jpg");
+    background-size: 100.5% 100%;
+    background-position: 9990% 0%;
+    background-repeat-x: repeat;
+    background-repeat-y: no-repeat;
+    background-attachment: fixed;
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+    filter: contrast(1) blur(0.5px) grayscale(0.2)

-label
-{
-    color:ivory;
 }
 .LoginBT
 {
-    position: relative;
-    float:right;
+    position: absolute;
+    top: 0;
+    right: 0;
    margin-top: 5vh;
    margin-right: 5vw;
    text-align: center;
@ -141,14 +122,15 @@ label
    width: 10vw;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 5px;
-    font-size: larger;
+    font-size: 1em;
    font-weight: bolder;
    font-family: 'Lato';
-    cursor:pointer;
+    cursor: pointer;
 }
 #login
 {
    color:rgb(252, 252, 218);
    position: relative;
    top:1vh;
+    font-size: 1em;
 }
--- a/views/home.ejs
+++ b/views/home.ejs
@ -11,13 +11,14 @@
 </head>

 <body>
-  <div class="Container center verticalCenter">
-    <h1 >Rem-chan</h1>
-</div>
+  <div class="Container">
+    <div class="background">

+    </div>
+    <h1 >Rem-chan</h1>
    <div class="LoginBT" >
      <a id="login" target="_blank" href="https://discord.com/api/oauth2/authorize?client_id=356104008366030863&redirect_uri=https%3A%2F%2Frem.wordfights.com%2Fdashboard&response_type=token&scope=identify%20guilds" class=" ">
-          <span>Login with Discord</span>
+          <span>Login</span>
      </a>
    </div>
    <div class="DiscordBtn">
@ -26,15 +27,15 @@
      </a>
    </div>
    <div class="github">
-      <a target="_blank" class="githubbtn" href="https://github.com/masterhc/Discord-Bot">
-        <img class="githublogo" style="vertical-align:middle" alt="github logo" src="images/github.png">
+      <img class="githublogo" style="vertical-align:middle" alt="github logo" src="images/github.png">
+      <a target="_blank" class="githubbtn" href="https://git.wordfights.com/masterhc/Remchanv2">
        <span style="vertical-align:middle"></span>GitHub</span>
      </a>
    </div>
    <h3 class="h3">
      Rem themed discord bot. Everything you want in a bot, with a weabo twist.
    </h3>
-    <div class="githubbtn">
+    <div class="githubbtn"></div>

    
  </div>