Many updates that beautified the page a lot

css/main.css

@@ -4,7 +4,7 @@
 
 body {
   font-family: 'Raleway', sans-serif;
-  font-weight: 100;
+  font-weight: 300;
   color: #fff;
   background: #222 url(../images/cover-1.png) center no-repeat fixed;
   background-size: cover; }
@@ -24,6 +24,9 @@ body {
   .button:hover {
     background: rgba(200, 200, 200, 0.2); }
 
+#online {
+  font-weight: 200; }
+
 #rules-title {
   border-radius: 0px; }
 
@@ -37,7 +40,8 @@ body {
 
 .brand-logo {
   margin-top: 5px;
-  margin-bottom: 5px; }
+  margin-bottom: 5px;
+  font-weight: 100; }
 
 .button-collapse {
   margin-top: 5px;
@@ -69,8 +73,8 @@ body {
   display: inline-block; }
 
 #rules-title {
-  font-size: 2.2em;
+  font-size: 1.9em;
-  background: rgba(230, 230, 230, 0.1);
+  background: rgba(180, 180, 180, 0.1);
   cursor: pointer;
   user-select: none;
   -moz-user-select: none;
@@ -83,7 +87,10 @@ body {
   transition: all 0.2s ease; }
 
 #rules-title:hover {
-  background: rgba(210, 210, 210, 0.2); }
+  background: rgba(150, 150, 150, 0.2);
+  -webkit-transform: scale(1.03, 1.03);
+  -ms-transform: scale(1.03, 1.03);
+  transform: scale(1.03, 1.03); }
 
 .admins > ul > a,
 i.rules-icon {
@@ -108,6 +115,7 @@ i.rules-icon {
 .cover-2 h2,
 .cover-2 p {
   width: 75%;
+  font-weight: 300;
   margin: 0 auto; }
 
 .cover-2 p {
@@ -115,9 +123,10 @@ i.rules-icon {
   height: auto; }
 
 .section-title {
-  font-size: 4em;
+  font-size: 2.5em;
-  color: rgba(255, 255, 255, 0.9);
+  color: white;
-  z-index: 100; }
+  z-index: 100;
+  font-weight: 100; }
 
 .cover-3 {
   background: url(../images/cover-3.png) no-repeat fixed;
@@ -131,24 +140,29 @@ i.rules-icon {
   -ms-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
   transition: all 0.2s ease;
-  border-radius: 150px;
+  border-radius: 5px;
-  z-index: 200; }
+  z-index: 200;
+  font-size: 0.9em; }
 
 .admins > ul > a:hover {
-  background: rgba(100, 100, 100, 0.3);
+  background: rgba(70, 70, 70, 0.15);
-  transform: translateY(-4px); }
+  -webkit-transform: translateY(-3px);
+  -ms-transform: translateY(-3px);
+  transform: translateY(-3px); }
 
 .admins ul {
   z-index: 101; }
 
 .admins a li {
   color: rgba(255, 255, 255, 0.5);
-  font-size: 1.2em;
+  font-size: 1.1em;
-  z-index: 102; }
+  z-index: 102;
+  font-weight: 300; }
 
 .rank {
-  font-size: 2em;
+  font-size: 1.6em;
-  z-index: 103; }
+  z-index: 103;
+  font-weight: 200; }
 
 .rest > li > a,
 .useful a {
@@ -162,21 +176,24 @@ i.rules-icon {
   border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
 
 .rest > li > a {
-  font-size: 1.5em;
+  font-size: 1.35em;
+  font-weight: 300;
   color: rgba(255, 255, 255, 0.6);
-  border-radius: 50px;
+  border-radius: 10px;
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -ms-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
-  transition: all 0.2s ease; }
+  transition: all 0.2s ease;
+  display: inline-block; }
 
 .rest > li > a:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(100, 100, 100, 0.2);
   color: #fff; }
 
 .rest > li {
   margin-top: 50px;
+  display: inline-block;
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -ms-transition: all 0.2s ease;
@@ -184,13 +201,15 @@ i.rules-icon {
   transition: all 0.2s ease; }
 
 .rest > li:hover {
+  -webkit-transform: translateX(5px);
+  -ms-transform: translateX(5px);
   transform: translateX(5px); }
 
 .useful a {
   display: inline-block;
-  font-size: 1.2em;
+  font-size: 1.05em;
   color: rgba(255, 255, 255, 0.6);
-  border: 2px solid rgba(255, 255, 255, 0.6);
+  border: 2px solid rgba(200, 200, 200, 0.3);
   margin-right: 10px;
   border-radius: 50px;
   width: 200px;
@@ -201,13 +220,18 @@ i.rules-icon {
   transition: all 0.2s ease;
   margin-bottom: 10px; }
 
+.useful h3 {
+  font-weight: 100; }
+
 .useful > a > li > i {
   font-size: 2em;
   margin-bottom: 10px; }
 
 .useful a:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(100, 100, 100, 0.1);
   color: #fff;
+  -webkit-transform: translateY(-5px);
+  -ms-transform: translateY(-5px);
   transform: translateY(-5px); }
 
 #note {
@@ -225,10 +249,14 @@ i.rules-icon {
   font-weight: 700; }
 
 .nav-wrapper {
-  background: rgba(0, 0, 0, 0.3); }
+  margin: -8px;
+  background: rgba(20, 20, 20, 0.5); }
+  .nav-wrapper li > a {
+    font-weight: 200;
+    font-size: .9em; }
 
 .cover-2 a {
-  font-size: 1.3em;
+  font-size: 1.17em;
   color: rgba(255, 255, 255, 0.3); }
 
 .head-icon {
@@ -236,13 +264,13 @@ i.rules-icon {
   height: 20px;
   float: left;
   margin-right: 5px;
-  border-radius: 50%; }
+  border-radius: 2px; }
 
 small {
   font-size: 0.9em; }
 
 .modal {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(10, 10, 10, 0.8);
   color: #ccc; }
 
 .modal a {
@@ -253,25 +281,44 @@ small {
 
 .modal li {
   display: inline-block;
-  /*	word-wrap: break-word;*/
   padding: 10px;
   margin: 4px;
-  background: rgba(150, 150, 150, 0.3);
+  background: rgba(100, 100, 100, 0.2);
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -ms-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
   transition: all 0.2s ease;
-  border-radius: 150px; }
+  border-radius: 5px;
+  font-size: 0.8em; }
 
 .modal li:hover {
-  background: rgba(200, 200, 200, 0.3); }
+  background: rgba(150, 150, 150, 0.3); }
 
 .modal h4 {
-  margin-bottom: 38px; }
+  margin-bottom: 38px;
+  font-size: 1.2em;
+  font-weight: 400; }
+
+.modal-msg {
+  background: rgba(34, 34, 34, 0.3);
+  display: inline-block;
+  margin: 100px auto;
+  padding: 20px 40px; }
+  .modal-msg h5 {
+    font-weight: 100;
+    font-size: 0.85em;
+    border-bottom: 3px solid rgba(204, 204, 204, 0.3);
+    padding-bottom: 20px; }
+  .modal-msg span {
+    font-size: 0.9em;
+    font-weight: 200; }
 
 .modal > .modal-footer {
-  background: rgba(50, 50, 50, 0.6); }
+  background: rgba(50, 50, 50, 0.3); }
+  .modal > .modal-footer .modal-close {
+    font-size: .9em;
+    text-transform: none; }
 
 .waves-effect.waves-brown .waves-ripple {
   background-color: rgba(230, 230, 230, 0.3); }
@@ -283,26 +330,19 @@ small {
   .cover-2 h2,
   .cover-2 p {
     width: 100%; }
-
   .online-part {
-    padding: 25% 0.7%; }
+    padding: 25% .7%; }
-
   .rule {
     padding: 15px; }
-
   .admins > ul > a {
     display: block;
     border-radius: 0; }
-
   .head-icon {
     width: 20px;
     height: 20px;
     margin-right: 0;
     float: left;
     border-radius: 50%; }
-
   .modal li {
     display: block;
     width: 95%; } }
-
-/*# sourceMappingURL=main.css.map */

css/staff.css

@@ -1 +1,72 @@
-#note a,a{color:#c8c8c8}#note,.admins,.page-title,.rank{text-align:center}.brand-logo,h2{font-family:'Raleway', sans-serif;}*{margin:0;padding:0}body{margin-bottom:50px;background:url(../images/staff-bg.png) center fixed #222;color:#ccc}.nav-wrapper{background:rgba(0,0,0,.2)}.admins{width:85%;margin:0 auto;background:rgba(100,100,100,.1);padding:15px;border-radius:10px}.admins li{display:inline-block;padding:10px;background:rgba(100,100,100,.2);margin:5px;border-radius:50px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.admins li:hover{background:rgba(100,100,100,.5)}h2{font-size:1.5em}#note h5{margin-bottom:-15px}#note a{font-weight:700}.page-title{font-size:3.8em;font-weight:300}.brand-logo{font-size:2em;font-weight:200} .typed-cursor { display: none; } @media only screen and (max-width:768px){.admins{width:95%}.admins li{display:block;border-radius:0}}
+#note a,
+a {
+  color: #c8c8c8; }
+
+#note,
+.admins,
+.page-title,
+.rank {
+  text-align: center; }
+
+.brand-logo,
+h2 {
+  font-family: 'Raleway', sans-serif; }
+
+* {
+  margin: 0;
+  padding: 0; }
+
+body {
+  margin-bottom: 50px;
+  background: url(../images/staff-bg.png) center fixed #222;
+  color: #ccc; }
+
+.nav-wrapper {
+  background: rgba(0, 0, 0, 0.2); }
+
+.admins {
+  width: 85%;
+  margin: 0 auto;
+  background: rgba(100, 100, 100, 0.1);
+  padding: 15px;
+  border-radius: 10px; }
+  .admins li {
+    display: inline-block;
+    padding: 10px;
+    background: rgba(100, 100, 100, 0.2);
+    margin: 5px;
+    border-radius: 5px;
+    -webkit-transition: all 0.13s ease-in-out;
+    -moz-transition: all 0.13s ease-in-out;
+    -ms-transition: all 0.13s ease-in-out;
+    -o-transition: all 0.13s ease-in-out;
+    transition: all 0.13s ease-in-out; }
+    .admins li:hover {
+      background: rgba(200, 200, 200, 0.2); }
+
+h2 {
+  font-size: 1.5em; }
+
+#note h5 {
+  margin-bottom: -15px; }
+
+#note a {
+  font-weight: 700; }
+
+.page-title {
+  font-size: 3.8em;
+  font-weight: 300; }
+
+.brand-logo {
+  font-size: 2em;
+  font-weight: 200; }
+
+.typed-cursor {
+  display: none; }
+
+@media only screen and (max-width: 768px) {
+  .admins {
+    width: 95%; }
+  .admins li {
+    display: block;
+    border-radius: 0; } }

index.html

@@ -8,7 +8,7 @@
       <meta name="author" content="aggelosQQ, markbyron, DarthSalamon, Madgeek1450, TotalFreedom">
       <meta name="keywords" content="TF,minecraft,totalfreedom,free op,server,worldedit,freebuild">
       <meta name="description" content="TotalFreedom is the first Free OP Minecraft server, which is up and running since 2010! play.totalfreedom.me">
-      <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+      <link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600" rel="stylesheet">
       <link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
       <link async rel="stylesheet" href="css/component.min.css">
       <link async rel="stylesheet" href="css/main.css">
@@ -50,8 +50,15 @@
                <h4 id="players-online">
                </h5> 
                <ul id="players"></ul>
+               
+               <div class="modal-msg">
+                  <h5>Why don't you visit us yourself?</h5>
+                  <span class="ip">play.totalfreedom.me</span>
+               </div>
+            </div>
+            <div class="modal-footer"> 
+               <a href="#!" class="modal-action modal-close btn-flat waves-effect waves-dark">I'm Done</a>
             </div>
-            <div class="modal-footer"> <a href="#!" class=" modal-action modal-close btn-flat waves-effect waves-dark">Close</a> </div>
          </div>
       </div>
       <div class="section cover-2" id="rules-sec">
@@ -76,9 +83,12 @@
             <h2 id="rules-title" class="five waves-effect waves-brown">Adhere to Authority <i class="fa fa-chevron-right rules-icon hide-on-med-and-down"></i></h2>
             <p class="rule e">Do not override the actions of the server owner (markbyron) or other admins. For example, if an admin de-ops or bans a player for griefing, you may not re-op or pardon them without permission. Super admins will follow the directions of senior admins with respect to any admin matter unless it violates server rules. If it violates the rules, the admin will notify the proper authority.</p>
          </div>
-         <br>
+
-         <p class="caution"><i class="fa fa-exclamation-circle"></i> TotalFreedom does not accept donations.</p>
+
-         <a href="http://totalfreedom.boards.net/thread/21065/server-conduct-policy-players-admins">Read more</a> 
+         <p class="caution"><i class="fa fa-exclamation-triangle"></i> TotalFreedom does not accept donations.</p>
+         <a class="grey-text" href="http://totalfreedom.boards.net/thread/21065/server-conduct-policy-players-admins">Read the Conduct Policy</a> 
+
+
          <h1 class="section-title">TotalFreedom Help</h1>
          <div class="rules-section">
             <h2 id="rules-title" class="six">Saving Builds <i class="fa fa-chevron-right rules-icon hide-on-med-and-down"></i></h2>
@@ -170,14 +180,15 @@
             </ul>
             <div class="container">
                <ul class="rest">
-                  <li><a href="staff.html" class="readmore waves-effect waves-light">See the rest of the staff <i class="fa fa-arrow-right"></i></a></li>
+                  <li><a href="staff.html" class="readmore waves-effect waves-light">See the rest of the staff <i class="fa fa-chevron-right fa-fw"></i></a></li>
                   <br/> 
                </ul>
                <br/> 
                <hr>
                <br/> 
-               <h3 style="text-align: center;">Useful Links</h3>
+               
                <ul class="useful">
+               <h3 style="text-align: center;">Useful Links</h3>
                   <a href="http://totalfreedom.boards.net" target="_blank" class="readmore waves-effect waves-dark">
                      <li><i class="fa fa-comments icon"></i><br/> Forum</li>
                   </a>

js/index.js

@@ -12,7 +12,7 @@ $(document).ready(function() {
                 $(".button").hide();
             } else {
                 $("#online").html('TotalFreedom has  <font color="green">' + json.players.online + '</font> players online!<br/>');
-                $("#players-online").html(json.players.online + ' online players!');
+                $("#players-online").html(json.players.online + ' Online Players!');
                 $('.button').show();
             }
         });

prepros-6.config

@@ -0,0 +1,244 @@
+{
+  "name": "Website",
+  "firstRun": false,
+  "exportConfig": true,
+  "fileConfigs": [],
+  "fileTree": {
+    "expandedDirs": [],
+    "hideSystemFiles": true,
+    "systemFiles": [
+      ".*",
+      "desktop.ini",
+      "prepros.config",
+      "$RECYCLE.BIN",
+      "prepros.cfg",
+      "prepros-6.config",
+      "Prepros Export"
+    ],
+    "hideUnwatchedFiles": false
+  },
+  "imports": [
+    {
+      "path": "scss/main.scss",
+      "imports": [
+        "scss/_mixins.scss"
+      ]
+    },
+    {
+      "path": "scss/staff.scss",
+      "imports": [
+        "scss/_mixins.scss"
+      ]
+    }
+  ],
+  "projectView": {
+    "selectedView": "log"
+  },
+  "fileWatcher": {
+    "enabled": true,
+    "watchedExtensions": [
+      "less",
+      "sass",
+      "scss",
+      "styl",
+      "md",
+      "markdown",
+      "coffee",
+      "js",
+      "jade",
+      "haml",
+      "slim",
+      "ls",
+      "kit",
+      "png",
+      "jpg",
+      "jpeg",
+      "ts",
+      "pug",
+      "css",
+      "html",
+      "htm",
+      "php"
+    ]
+  },
+  "pathFilters": [
+    "node_modules",
+    ".*",
+    "bower_components",
+    "prepros.config",
+    "Prepros Export",
+    "prepros-6.config",
+    "prepros.cfg",
+    "wp-admin",
+    "wp-includes"
+  ],
+  "server": {
+    "port": 7880,
+    "assignNewPortAutomatically": true,
+    "enable": true,
+    "proxy": {
+      "enable": false,
+      "url": ""
+    }
+  },
+  "browser-sync": {
+    "enable": false,
+    "clicks": true,
+    "forms": true,
+    "scroll": true
+  },
+  "live-reload": {
+    "enable": true,
+    "animate": true,
+    "delay": 0
+  },
+  "ftp-deploy": {
+    "connectionType": "ftp",
+    "remotePath": "",
+    "uploadTimeout": 20000,
+    "uploadOnChange": false,
+    "ftp": {
+      "secure": false,
+      "host": "",
+      "port": 21,
+      "user": "",
+      "password": ""
+    },
+    "sftp": {
+      "host": "",
+      "port": 22,
+      "usePrivateKey": false,
+      "username": "",
+      "password": "",
+      "privateKey": "",
+      "passphrase": ""
+    },
+    "pathFilters": [
+      "config.rb",
+      "prepros.config",
+      "prepros-6.config",
+      "node_modules",
+      "Prepros Export",
+      ".git",
+      ".idea",
+      ".sass-cache",
+      ".hg",
+      ".svn",
+      ".cache",
+      ".DS_Store",
+      "*.sass",
+      "*.scss",
+      "*.less",
+      "*.pug",
+      "*.jade",
+      "*.styl",
+      "*.haml",
+      "*.slim",
+      "*.coffee",
+      "*.ls",
+      "*.kit",
+      "*.ts"
+    ],
+    "history": []
+  },
+  "file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}",
+  "file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}",
+  "autoprefixer": {
+    "browsers": "last 5 versions"
+  },
+  "file-type-pug": "{\"compilers\":[\"pug\"]}",
+  "file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}",
+  "file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}",
+  "file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}",
+  "file-type-markdown": "{\"compilers\":[\"markdown\"]}",
+  "file-type-haml": "{\"compilers\":[\"haml\"]}",
+  "file-type-slim": "{\"compilers\":[\"slim\"]}",
+  "file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}",
+  "file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}",
+  "file-type-kit": "{\"compilers\":[\"kit\"]}",
+  "uglify-js": {
+    "compress": {
+      "sequences": true,
+      "properties": true,
+      "dead_code": true,
+      "drop_debugger": true,
+      "unsafe": false,
+      "unsafe_comps": false,
+      "conditionals": true,
+      "comparisons": true,
+      "evaluate": true,
+      "booleans": true,
+      "loops": true,
+      "unused": true,
+      "hoist_funs": true,
+      "keep_fargs": false,
+      "hoist_vars": false,
+      "if_return": true,
+      "join_vars": true,
+      "cascade": true,
+      "side_effects": true,
+      "pure_getters": false,
+      "negate_iife": true,
+      "screw_ie8": false,
+      "drop_console": false,
+      "angular": false,
+      "warnings": false,
+      "pure_funcs": [],
+      "global_defs": []
+    },
+    "output": {
+      "quote_keys": false,
+      "space_colon": true,
+      "ascii_only": false,
+      "unescape_regexps": false,
+      "inline_script": false,
+      "beautify": false,
+      "bracketize": false,
+      "semicolons": true,
+      "comments": false,
+      "preserve_line": false,
+      "screw_ie8": false
+    }
+  },
+  "cssnext": {
+    "customProperties": true,
+    "applyRule": true,
+    "calc": false,
+    "nesting": true,
+    "customMedia": true,
+    "mediaQueriesRange": true,
+    "customSelectors": true,
+    "attributeCaseInsensitive": true,
+    "colorRebeccapurple": true,
+    "colorHwb": true,
+    "colorGray": true,
+    "colorHexAlpha": true,
+    "colorFunction": true,
+    "fontVariant": true,
+    "filter": true,
+    "initial": true,
+    "rem": true,
+    "pseudoElements": true,
+    "pseudoClassMatches": true,
+    "pseudoClassNot": true,
+    "pseudoClassAnyLink": true,
+    "colorRgba": true,
+    "overflowWrap": true
+  },
+  "file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"]}",
+  "babel": {
+    "useBabelRc": true,
+    "presets": {
+      "babel-preset-es2015": true
+    },
+    "plugins": {
+      "babel-plugin-syntax-jsx": true,
+      "babel-plugin-transform-react-jsx": true,
+      "babel-plugin-transform-async-to-generator": true,
+      "babel-plugin-transform-class-properties": true,
+      "babel-plugin-transform-object-rest-spread": true
+    }
+  },
+  "file-type-png": "{\"compilers\":[\"png\"]}",
+  "file-type-jpg": "{\"compilers\":[\"jpg\"]}"
+}

scss/main.scss

@@ -6,7 +6,7 @@
 }
 body {
     font-family: 'Raleway', sans-serif;
-    font-weight:100;
+    font-weight:300;
     color: #fff;
     background: #222 url(../images/cover-1.png) center no-repeat fixed;
     background-size: cover
@@ -23,6 +23,9 @@ body {
     }
 }
 
+#online {
+    font-weight: 200;
+}
 #rules-title {
     border-radius: 0px;
 }
@@ -36,7 +39,8 @@ body {
 }
 .brand-logo {
     margin-top: 5px;
-    margin-bottom: 5px
+    margin-bottom: 5px;
+    font-weight: 100;
 }	
 .button-collapse {
     margin-top: 5px;
@@ -69,14 +73,15 @@ body {
     display: inline-block
 }
 #rules-title {
-    font-size: 2.2em;
+    font-size: 1.9em;
-    background: rgba(230, 230, 230, .1);
+    background: rgba(180, 180, 180, .1);
     cursor: pointer;
     @include userselect(none);
     @include transition(all .2s ease);
 }
 #rules-title:hover {
-    background: rgba(210, 210, 210, .2)
+    background: rgba(150, 150, 150, .2);
+    transform: scale(1.03,1.03);
 }
 .admins>ul>a,
 i.rules-icon {
@@ -94,16 +99,18 @@ i.rules-icon {
 .cover-2 h2,
 .cover-2 p {
     width: 75%;
-    margin: 0 auto
+    font-weight: 300;
+    margin: 0 auto;
 }
 .cover-2 p {
     font-size: 1.2em;
     height: auto
 }
 .section-title {
-    font-size: 4em;
+    font-size: 2.5em;
-    color: rgba(255, 255, 255, .9);
+    color: rgba(255, 255, 255, 1);
-    z-index: 100
+    z-index: 100;
+    font-weight:100;
 }
 .cover-3 {
     background: url(../images/cover-3.png) no-repeat fixed;
@@ -113,24 +120,27 @@ i.rules-icon {
     margin: 5px;
     background: rgba(0, 0, 0, .3);
     @include transition(all .2s ease);
-    border-radius: 150px;
+    border-radius:5px;
     z-index: 200;
+    font-size: 0.9em;
 }
 .admins>ul>a:hover {
-    background: rgba(100, 100, 100, .3);
+    background: rgba(70, 70, 70, .15);
-    transform: translateY(-4px);
+    transform: translateY(-3px);
 }
 .admins ul {
     z-index: 101
 }
 .admins a li {
     color: rgba(255, 255, 255, .5);
-    font-size: 1.2em;
+    font-size: 1.1em;
-    z-index: 102
+    z-index: 102;
+    font-weight:300;
 }
 .rank {
-    font-size: 2em;
+    font-size: 1.6em;
-    z-index: 103
+    z-index: 103;
+    font-weight: 200;
 }
 .rest>li>a,
 .useful a {
@@ -144,17 +154,20 @@ i.rules-icon {
     border-bottom: 1px solid rgba(255, 255, 255, .2)
 }
 .rest>li>a {
-    font-size: 1.5em;
+    font-size: 1.35em;
+    font-weight: 300;
     color: rgba(255, 255, 255, .6);
-    border-radius: 50px;
+    border-radius: 10px;
     @include transition(all .2s ease);
+    display: inline-block;
 }
 .rest>li>a:hover {
-    background: rgba(255, 255, 255, .2);
+    background: rgba(100, 100, 100, .2);
     color: #fff
 }
 .rest>li {
     margin-top: 50px;
+    display: inline-block;
     @include transition(all .2s ease);
 }
 .rest>li:hover {
@@ -162,21 +175,24 @@ i.rules-icon {
 }
 .useful a {
     display: inline-block;
-    font-size: 1.2em;
+    font-size: 1.05em;
     color: rgba(255, 255, 255, .6);
-    border: 2px solid rgba(255, 255, 255, .6);
+    border: 2px solid rgba(200, 200, 200, .3);
     margin-right: 10px;
     border-radius: 50px;
     width: 200px;
     @include transition(all .2s ease);
     margin-bottom: 10px
 }
+.useful h3 {
+    font-weight: 100;
+}
 .useful>a>li>i {
     font-size: 2em;
     margin-bottom: 10px
 }
 .useful a:hover {
-    background: rgba(255, 255, 255, .2);
+    background: rgba(100, 100, 100, .1);
     color: #fff;
     transform: translateY(-5px)
 }
@@ -195,25 +211,30 @@ i.rules-icon {
     font-weight: 700
 }
 .nav-wrapper {
-    background: rgba(0, 0, 0, .3)
+    margin: -8px;
+    background: rgba(20, 20, 20, .5);
+    li>a {
+        font-weight: 200;
+        font-size: .9em;
+    }
 }
 .cover-2 a {
-    font-size: 1.3em;
+    font-size: 1.17em;
-    color: rgba(255, 255, 255, .3)
+    color: rgba(255, 255, 255, .3);
 }
 .head-icon {
     width: 20px;
     height: 20px;
     float: left;
     margin-right: 5px;
-    border-radius: 50%
+    border-radius:2px;
 }
 
 small {
     font-size:0.9em;
 }
 .modal {
-    background: rgba(0, 0, 0, .5);
+    background: rgba(10, 10, 10, .8);
     color: #ccc
 }
 .modal a {
@@ -224,27 +245,59 @@ small {
 }
 .modal li {
 	display: inline-block;
-/*	word-wrap: break-word;*/
 	padding:10px;
 	margin:4px;
-	background: rgba(150, 150, 150, .3);
+	background: rgba(100, 100, 100, .2);
     @include transition(all .2s ease);
-    border-radius: 150px;
+    border-radius: 5px;
+    font-size: 0.8em;
 }
 .modal li:hover {
-	background: rgba(200, 200, 200, .3);
+	background: rgba(150, 150, 150, .3);
 }
 .modal h4 {
-    margin-bottom: 38px
+    margin-bottom: 38px;
+    font-size: 1.2em;
+    font-weight: 400;
 }
+
+.modal-msg {
+    background: rgba(#222, .3);
+    display: inline-block;
+    margin:100px auto;
+    padding: 20px 40px;
+    h5 {
+        font-weight: 100;
+        font-size: 0.85em;
+        border-bottom: 3px solid rgba(#ccc, 0.3);
+        padding-bottom: 20px;
+    }
+    span {
+        font-size: 0.9em;
+        font-weight: 200;
+    }
+}
+
 .modal>.modal-footer {
-    background: rgba(50, 50, 50, .6)
+    background: rgba(50, 50, 50, .3);
+    .modal-close {
+        font-size: .9em;
+        text-transform: none;
+    }
 }
 .waves-effect.waves-brown .waves-ripple {
     background-color: rgba(230, 230, 230, .3)
 }
 .typed-cursor { display: none; }
 
+
+
+
+
+
+
+
+
 @media only screen and (max-width: 768px) {
     .cover-2 h2,
     .cover-2 p {

scss/staff.scss

@@ -0,0 +1,80 @@
+@import 'mixins';
+
+#note a,
+a {
+    color: #c8c8c8
+}
+#note,
+.admins,
+.page-title,
+.rank {
+    text-align: center
+}
+.brand-logo,
+h2 {
+    font-family: 'Raleway', sans-serif;
+}
+* {
+    margin: 0;
+    padding: 0
+}
+body {
+    margin-bottom: 50px;
+    background: url(../images/staff-bg.png) center fixed #222;
+    color: #ccc
+}
+.nav-wrapper {
+    background: rgba(#000, .2)
+}
+.admins {
+    width: 85%;
+    margin: 0 auto;
+    background: rgba(100, 100, 100, .1);
+    padding: 15px;
+    border-radius: 10px;
+    li {
+        display: inline-block;
+        padding: 10px;
+        background: rgba(100, 100, 100, .2);
+        margin: 5px;
+        border-radius: 5px;
+        @include transition(all .13s ease-in-out);
+        &:hover {
+            background: rgba(200, 200, 200, .2);
+        }
+    }
+}
+
+h2 {
+    font-size: 1.5em
+}
+#note {
+    h5 {
+       margin-bottom: -15px 
+    }
+    a {
+        font-weight: 700
+    }
+}
+
+
+.page-title {
+    font-size: 3.8em;
+    font-weight: 300
+}
+.brand-logo {
+    font-size: 2em;
+    font-weight: 200
+}
+.typed-cursor {
+    display: none;
+}
+@media only screen and (max-width: 768px) {
+    .admins {
+        width: 95%
+    }
+    .admins li {
+        display: block;
+        border-radius: 0
+    }
+}