From ef16cecf50fcbf2b7e2d9ebc1dc8fd6ba80029d7 Mon Sep 17 00:00:00 2001 From: aggelosQQ Date: Wed, 8 Feb 2017 17:00:42 +0200 Subject: [PATCH] Many updates that beautified the page a lot --- css/main.css | 656 +++++++++++++++++++++++++---------------------- css/staff.css | 73 +++++- index.html | 25 +- js/index.js | 2 +- prepros-6.config | 244 ++++++++++++++++++ scss/main.scss | 119 ++++++--- scss/staff.scss | 80 ++++++ 7 files changed, 849 insertions(+), 350 deletions(-) create mode 100644 prepros-6.config create mode 100644 scss/staff.scss diff --git a/css/main.css b/css/main.css index 45fee2e..523c716 100644 --- a/css/main.css +++ b/css/main.css @@ -1,308 +1,348 @@ -* { - margin: 0; - padding: 0; } - -body { - font-family: 'Raleway', sans-serif; - font-weight: 100; - color: #fff; - background: #222 url(../images/cover-1.png) center no-repeat fixed; - background-size: cover; } - -#rules-title, -.button { - -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; - z-index: 100; - padding: 10px 55px; - background: rgba(255, 255, 255, 0.1); - color: #c8c8c8; } - #rules-title:hover, - .button:hover { - background: rgba(200, 200, 200, 0.2); } - -#rules-title { - border-radius: 0px; } - -.admins ul, -.cover-1, -.cover-2, -.cover-3 .section-title, -.rank { - text-align: center; - position: relative; } - -.brand-logo { - margin-top: 5px; - margin-bottom: 5px; } - -.button-collapse { - margin-top: 5px; - margin-bottom: 10px; } - -.cover-1 { - font-size: 1.5em; - color: rgba(255, 255, 255, 0.4); - height: 100vh; } - -.cover-1 a, -.cover-1 h3 { - margin-top: 23%; } - -.cover-2 { - background: url(../images/cover-2.png) center fixed; - background-size: cover; - height: auto; - padding-bottom: 40px; } - -.rule { - z-index: 100; - display: none; - padding: 30px; } - -#rules-title, -.admins > ul > a { - padding: 10px; - display: inline-block; } - -#rules-title { - font-size: 2.2em; - background: rgba(230, 230, 230, 0.1); - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - -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; } - -#rules-title:hover { - background: rgba(210, 210, 210, 0.2); } - -.admins > ul > a, -i.rules-icon { - -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; } - -i.rules-icon { - position: relative; - float: right; - color: rgba(150, 150, 150, 0.3); - -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; } - i.rules-icon:hover { - color: #969696; } - -.cover-2 h2, -.cover-2 p { - width: 75%; - margin: 0 auto; } - -.cover-2 p { - font-size: 1.2em; - height: auto; } - -.section-title { - font-size: 4em; - color: rgba(255, 255, 255, 0.9); - z-index: 100; } - -.cover-3 { - background: url(../images/cover-3.png) no-repeat fixed; - background-size: cover; } - -.admins > ul > a { - margin: 5px; - background: rgba(0, 0, 0, 0.3); - -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; - z-index: 200; } - -.admins > ul > a:hover { - background: rgba(100, 100, 100, 0.3); - transform: translateY(-4px); } - -.admins ul { - z-index: 101; } - -.admins a li { - color: rgba(255, 255, 255, 0.5); - font-size: 1.2em; - z-index: 102; } - -.rank { - font-size: 2em; - z-index: 103; } - -.rest > li > a, -.useful a { - padding: 10px; - z-index: 100; - text-align: center; } - -.cover-1, -.cover-2, -.cover-3 { - border-bottom: 1px solid rgba(255, 255, 255, 0.2); } - -.rest > li > a { - font-size: 1.5em; - color: rgba(255, 255, 255, 0.6); - border-radius: 50px; - -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; } - -.rest > li > a:hover { - background: rgba(255, 255, 255, 0.2); - color: #fff; } - -.rest > li { - margin-top: 50px; - -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; } - -.rest > li:hover { - transform: translateX(5px); } - -.useful a { - display: inline-block; - font-size: 1.2em; - color: rgba(255, 255, 255, 0.6); - border: 2px solid rgba(255, 255, 255, 0.6); - margin-right: 10px; - border-radius: 50px; - width: 200px; - -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; - margin-bottom: 10px; } - -.useful > a > li > i { - font-size: 2em; - margin-bottom: 10px; } - -.useful a:hover { - background: rgba(255, 255, 255, 0.2); - color: #fff; - transform: translateY(-5px); } - -#note { - text-align: center; - color: #ccc; - border-radius: 150px; - padding: 15px; - z-index: 1; } - -#note h5 { - margin-bottom: -20px; } - -#note a { - color: #c8c8c8; - font-weight: 700; } - -.nav-wrapper { - background: rgba(0, 0, 0, 0.3); } - -.cover-2 a { - font-size: 1.3em; - color: rgba(255, 255, 255, 0.3); } - -.head-icon { - width: 20px; - height: 20px; - float: left; - margin-right: 5px; - border-radius: 50%; } - -small { - font-size: 0.9em; } - -.modal { - background: rgba(0, 0, 0, 0.5); - color: #ccc; } - -.modal a { - color: #c8c8c8; } - -.modal ul { - display: inline-block; } - -.modal li { - display: inline-block; - /* word-wrap: break-word;*/ - padding: 10px; - margin: 4px; - background: rgba(150, 150, 150, 0.3); - -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; } - -.modal li:hover { - background: rgba(200, 200, 200, 0.3); } - -.modal h4 { - margin-bottom: 38px; } - -.modal > .modal-footer { - background: rgba(50, 50, 50, 0.6); } - -.waves-effect.waves-brown .waves-ripple { - background-color: rgba(230, 230, 230, 0.3); } - -.typed-cursor { - display: none; } - -@media only screen and (max-width: 768px) { - .cover-2 h2, - .cover-2 p { - width: 100%; } - - .online-part { - padding: 25% 0.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 */ +* { + margin: 0; + padding: 0; } + +body { + font-family: 'Raleway', sans-serif; + font-weight: 300; + color: #fff; + background: #222 url(../images/cover-1.png) center no-repeat fixed; + background-size: cover; } + +#rules-title, +.button { + -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; + z-index: 100; + padding: 10px 55px; + background: rgba(255, 255, 255, 0.1); + color: #c8c8c8; } + #rules-title:hover, + .button:hover { + background: rgba(200, 200, 200, 0.2); } + +#online { + font-weight: 200; } + +#rules-title { + border-radius: 0px; } + +.admins ul, +.cover-1, +.cover-2, +.cover-3 .section-title, +.rank { + text-align: center; + position: relative; } + +.brand-logo { + margin-top: 5px; + margin-bottom: 5px; + font-weight: 100; } + +.button-collapse { + margin-top: 5px; + margin-bottom: 10px; } + +.cover-1 { + font-size: 1.5em; + color: rgba(255, 255, 255, 0.4); + height: 100vh; } + +.cover-1 a, +.cover-1 h3 { + margin-top: 23%; } + +.cover-2 { + background: url(../images/cover-2.png) center fixed; + background-size: cover; + height: auto; + padding-bottom: 40px; } + +.rule { + z-index: 100; + display: none; + padding: 30px; } + +#rules-title, +.admins > ul > a { + padding: 10px; + display: inline-block; } + +#rules-title { + font-size: 1.9em; + background: rgba(180, 180, 180, 0.1); + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + -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; } + +#rules-title:hover { + 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 { + -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; } + +i.rules-icon { + position: relative; + float: right; + color: rgba(150, 150, 150, 0.3); + -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; } + i.rules-icon:hover { + color: #969696; } + +.cover-2 h2, +.cover-2 p { + width: 75%; + font-weight: 300; + margin: 0 auto; } + +.cover-2 p { + font-size: 1.2em; + height: auto; } + +.section-title { + font-size: 2.5em; + color: white; + z-index: 100; + font-weight: 100; } + +.cover-3 { + background: url(../images/cover-3.png) no-repeat fixed; + background-size: cover; } + +.admins > ul > a { + margin: 5px; + background: rgba(0, 0, 0, 0.3); + -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: 5px; + z-index: 200; + font-size: 0.9em; } + +.admins > ul > a:hover { + background: rgba(70, 70, 70, 0.15); + -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.1em; + z-index: 102; + font-weight: 300; } + +.rank { + font-size: 1.6em; + z-index: 103; + font-weight: 200; } + +.rest > li > a, +.useful a { + padding: 10px; + z-index: 100; + text-align: center; } + +.cover-1, +.cover-2, +.cover-3 { + border-bottom: 1px solid rgba(255, 255, 255, 0.2); } + +.rest > li > a { + font-size: 1.35em; + font-weight: 300; + color: rgba(255, 255, 255, 0.6); + 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; + display: inline-block; } + +.rest > li > a:hover { + 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; + -o-transition: all 0.2s ease; + 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.05em; + color: rgba(255, 255, 255, 0.6); + border: 2px solid rgba(200, 200, 200, 0.3); + margin-right: 10px; + border-radius: 50px; + width: 200px; + -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; + margin-bottom: 10px; } + +.useful h3 { + font-weight: 100; } + +.useful > a > li > i { + font-size: 2em; + margin-bottom: 10px; } + +.useful a:hover { + background: rgba(100, 100, 100, 0.1); + color: #fff; + -webkit-transform: translateY(-5px); + -ms-transform: translateY(-5px); + transform: translateY(-5px); } + +#note { + text-align: center; + color: #ccc; + border-radius: 150px; + padding: 15px; + z-index: 1; } + +#note h5 { + margin-bottom: -20px; } + +#note a { + color: #c8c8c8; + font-weight: 700; } + +.nav-wrapper { + 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.17em; + color: rgba(255, 255, 255, 0.3); } + +.head-icon { + width: 20px; + height: 20px; + float: left; + margin-right: 5px; + border-radius: 2px; } + +small { + font-size: 0.9em; } + +.modal { + background: rgba(10, 10, 10, 0.8); + color: #ccc; } + +.modal a { + color: #c8c8c8; } + +.modal ul { + display: inline-block; } + +.modal li { + display: inline-block; + padding: 10px; + margin: 4px; + 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: 5px; + font-size: 0.8em; } + +.modal li:hover { + background: rgba(150, 150, 150, 0.3); } + +.modal h4 { + 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.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); } + +.typed-cursor { + display: none; } + +@media only screen and (max-width: 768px) { + .cover-2 h2, + .cover-2 p { + width: 100%; } + .online-part { + 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%; } } diff --git a/css/staff.css b/css/staff.css index 2676683..de93191 100644 --- a/css/staff.css +++ b/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}} \ No newline at end of file +#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; } } diff --git a/index.html b/index.html index c029898..ebeb49e 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + @@ -50,8 +50,15 @@

+ +
+
Why don't you visit us yourself?
+ play.totalfreedom.me +
+ +
+ I'm Done
-
Close
@@ -76,9 +83,12 @@

Adhere to Authority

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.

-
-

TotalFreedom does not accept donations.

- Read more + + +

TotalFreedom does not accept donations.

+ Read the Conduct Policy + +

TotalFreedom Help

Saving Builds

@@ -170,14 +180,15 @@


-

Useful Links

+
    +

    Useful Links


  • Forum
    •  diff --git a/js/index.js b/js/index.js index 6ed184d..039161a 100644 --- a/js/index.js +++ b/js/index.js @@ -12,7 +12,7 @@ $(document).ready(function() { $(".button").hide(); } else { $("#online").html('TotalFreedom has ' + json.players.online + ' players online!
    '); - $("#players-online").html(json.players.online + ' online players!'); + $("#players-online").html(json.players.online + ' Online Players!'); $('.button').show(); } }); diff --git a/prepros-6.config b/prepros-6.config new file mode 100644 index 0000000..3093f1c --- /dev/null +++ b/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\"]}" +} \ No newline at end of file diff --git a/scss/main.scss b/scss/main.scss index 61f848d..508d70d 100644 --- a/scss/main.scss +++ b/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; - background: rgba(230, 230, 230, .1); + font-size: 1.9em; + 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; - color: rgba(255, 255, 255, .9); - z-index: 100 + font-size: 2.5em; + color: rgba(255, 255, 255, 1); + 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); - transform: translateY(-4px); + background: rgba(70, 70, 70, .15); + transform: translateY(-3px); } .admins ul { z-index: 101 } .admins a li { color: rgba(255, 255, 255, .5); - font-size: 1.2em; - z-index: 102 + font-size: 1.1em; + z-index: 102; + font-weight:300; } .rank { - font-size: 2em; - z-index: 103 + font-size: 1.6em; + 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; - color: rgba(255, 255, 255, .3) + font-size: 1.17em; + 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 { diff --git a/scss/staff.scss b/scss/staff.scss new file mode 100644 index 0000000..f168d6b --- /dev/null +++ b/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 + } +} \ No newline at end of file