kaboomserver/website
1
0
Fork 0
mirror of https://github.com/kaboomserver/website.git synced 2024-12-22 15:55:04 +00:00
Code Issues Projects Releases Wiki Activity

First version of new website

Browse source
This commit is contained in:
mathias 2016-12-22 20:53:29 +02:00
parent a36d249fa1
commit 1c39b7ede1
3 changed files with 260 additions and 249 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
_includes/fonts.css
View file

File diff suppressed because one or more lines are too long

463
_includes/index.css
View file

@ -1,9 +1,16 @@
/* Animation */ /* Animation */
@keyframes fadein { @keyframes fadein {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
} }
to {
opacity: 1;
}
}
/* Main */ /* Main */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -18,376 +25,384 @@ body {
height: 100%; height: 100%;
} }
body { body {
background: #000; background: #f5f5f5;
color: #fff; color: #565656;
font-family: montserratlight, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: montserratlight, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.000em; font-size: 1.000em;
line-height: 1; line-height: 1;
-webkit-tap-highlight-color: rgba(255,255,255,.2); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
::-moz-selection { ::-moz-selection {
background: #7b7b7b; background: rgba(0, 0, 0, .3);
background: rgba(255,255,255,.04);
} }
::selection { ::selection {
background: #7b7b7b; background: rgba(0, 0, 0, .3);
background: rgba(255,255,255,.04);
} }
h1, h1,
h2 { h2 {
font-family: montserratregular,"Helvetica Neue",Helvetica,Arial,sans-serif; color: #aa0000;
font-family: montserratbold, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 3.000em;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
letter-spacing: 1px;
margin: 0 0 0.438em 0;
text-transform: uppercase; text-transform: uppercase;
} }
h1 {
font-size: 1.000em;
line-height: 1.875em;
margin: 0 0 2.125em 0;
}
h2:before {
cursor: default;
margin: 0 0.625em 0 0;
vertical-align: top;
}
h2 {
font-size: 1.750em;
margin: 0 0 0.813em 0;
}
a { a {
color: rgba(255,255,255,.4); color: #aa0000;
text-decoration: none; text-decoration: none;
} }
a:hover, a:hover,
a:focus { a:focus {
color: rgba(255,255,255,.2); color: #d10000;
} }
/* Combined Rules */
h2:before, /* Icons */
#intro i,
#intro a:before { .logo:before {
font-family: 'icons'; content: '\1F525';
} }
#aboutbutton:before, .join:before {
#about h2:before {
content: "\2139"; content: "\2139";
} }
#downloadsbutton:before, .downloads:before {
#downloads h2:before {
content: "\2193"; content: "\2193";
} }
#intro,
#about { /* Main */
width: 100%;
height: 100%; .main {
display: table; display: table;
height: 100%;
width: 100%;
} }
#aboutcontainer, .main-container {
#downloadscontainer { animation: fadein 1s;
padding: 2.000em 5.625em 2.000em 5.625em;
}
#introcontainer,
#aboutcontainer,
#downloadscontainer {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
font-size: 1.000em; padding: 3.000em 5.625em 3.000em 10.625em;
text-align: center; text-align: center;
animation: fadein 1s;
} }
#about p, .main p {
#downloads p {
margin: 0 0 1.875em 0; margin: 0 0 1.875em 0;
line-height: 1.6; line-height: 1.6;
} }
/* Intro */
#intro { /* Navigation */
#navigation {
background: #aa0000; background: #aa0000;
}
#introcontainer {
padding: 3.125em 0 3.125em 0;
}
#intro i:before {
font-size: 21.875em;
content: "\1F525";
cursor: default;
}
#intro p {
font-size: 3.063em;
text-transform: uppercase;
font-family: montserratbold,"Helvetica Neue",Helvetica,Arial,sans-serif;
letter-spacing: 1px;
margin: 0.438em 0 0 0;
}
#intro a {
background: #fff;
color: #aa0000;
font-size: 1.188em;
}
#intro a:hover {
background: rgba(255,255,255,.9);
}
#aboutbutton {
border-radius: 1.313em 0 0 1.313em;
border-right: 1px solid #aa0000;
padding: 0.438em 0.813em 0.313em 1.125em;
}
#downloadsbutton {
border-radius: 0 1.313em 1.313em 0;
padding: 0.438em 1.063em 0.313em 0.875em;
}
/* About */
#about {
background: #000;
}
/* IP */
#ip, #ip span, #ip i {
display: inline-block;
}
#ip {
border: #fff solid 1px;
border-radius: 0.313em;
}
#ip span {
background: #fff;
border-radius: 0.188em 0 0 0.188em;
color: #000;
font-family: montserratregular,"Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 0.563em 0.563em 0.563em 0.625em;
}
#ip i {
color: #fff;
padding: 0.500em 0.563em 0.500em 0.563em;
}
/* Downloads */
#downloads {
background: #0b0b0b;
display: table; display: table;
width: 100%; height: 100%;
height: 40%; position: fixed;
table-layout: fixed;
text-align: center;
} }
#downloads a:last-child { #navigation span {
margin: 0 0 0 0.500em; display: table-row;
} }
#downloads a { #navigation a:before {
border: #fff solid 1px; font-family: 'icons';
border-radius: 0.313em; }
#navigation a.logo {
font-size: 3.250em;
padding: 0.250em;
}
#navigation a {
color: #f5f5f5;
display: table-cell;
font-size: 1.875em;
padding: 0.875em;
vertical-align: middle;
}
#navigation a:hover,
#navigation a:focus {
color: #fff; color: #fff;
}
/* Buttons */
.button {
background: #aa0000;
border-radius: 0.375em;
color: #f5f5f5;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-family: montserratregular, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: montserratregular, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.000em; font-size: 1.000em;
height: 2.313em; margin: 0 0.313em 0 0.313em;
line-height: 2.313em; padding: 0.938em;
padding: 0 0.688em 0 0.688em;
text-transform: uppercase; text-transform: uppercase;
} }
#downloads a:hover, #downloads a:focus { .button:hover,
background: rgba(255,255,255,.05); .button:focus {
background: #d10000;
color: #f5f5f5;
} }
/* Responsive Design */ /* Responsive Design */
@media (min-width: 0px) { @media (min-width: 0px) {
html { font-size: 76%; } html {
#aboutcontainer, #downloadscontainer { padding-right: 3%; padding-left: 3%; } font-size: 84%;
}
} }
@media (min-width: 100px) { @media (min-width: 100px) {
html { font-size: 78%; } html {
font-size: 86%;
}
} }
@media (min-width: 200px) { @media (min-width: 200px) {
html { font-size: 80%; } html {
font-size: 88%;
}
} }
@media (min-width: 300px) { @media (min-width: 300px) {
html { font-size: 82%; } html {
font-size: 90%;
}
} }
@media (min-width: 400px) { @media (min-width: 400px) {
html { font-size: 84%; } html {
font-size: 92%;
}
} }
@media (min-width: 500px) { @media (min-width: 500px) {
html { font-size: 86%; } html {
font-size: 94%;
}
} }
@media (min-width: 600px) { @media (min-width: 600px) {
html { font-size: 88%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 4% 2.000em 4%; } font-size: 96%;
}
} }
@media (min-width: 700px) { @media (min-width: 700px) {
html { font-size: 90%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 5% 2.000em 5%; } font-size: 98%;
#newscontainer { padding: 2.000em 8% 2.000em 8%; } }
#contactcontainer { padding: 2.000em 12% 2.000em 12%; }
} }
@media (min-width: 800px) { @media (min-width: 800px) {
html { font-size: 92%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 6% 2.000em 6%; } font-size: 100%;
}
} }
@media (min-width: 900px) { @media (min-width: 900px) {
html { font-size: 94%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 7% 2.000em 7%; } font-size: 102%;
}
} }
@media (min-width: 1000px) { @media (min-width: 1000px) {
html { font-size: 96%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 8% 2.000em 8%; } font-size: 104%;
}
} }
@media (min-width: 1100px) { @media (min-width: 1100px) {
html { font-size: 98%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 9% 2.000em 9%; } font-size: 106%;
} }
}
@media (min-width: 1200px) { @media (min-width: 1200px) {
html { font-size: 100%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 10% 2.000em 10%; } font-size: 108%;
}
} }
@media (min-width: 1300px) { @media (min-width: 1300px) {
html { font-size: 102%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 11% 2.000em 11%; } font-size: 110%;
}
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {
html { font-size: 104%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 12% 2.000em 12%; } font-size: 112%;
}
} }
@media (min-width: 1500px) { @media (min-width: 1500px) {
html { font-size: 106%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 13% 2.000em 13%; } font-size: 114%;
}
} }
@media (min-width: 1600px) { @media (min-width: 1600px) {
html { font-size: 108%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 14% 2.000em 14%; } font-size: 116%;
}
} }
@media (min-width: 1700px) { @media (min-width: 1700px) {
html { font-size: 110%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 15% 2.000em 15%; } font-size: 118%;
}
} }
@media (min-width: 1800px) { @media (min-width: 1800px) {
html { font-size: 112%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 16% 2.000em 16%; } font-size: 120%;
}
} }
@media (min-width: 1900px) { @media (min-width: 1900px) {
html { font-size: 114%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 17% 2.000em 17%; } font-size: 122%;
}
} }
@media (min-width: 2000px) { @media (min-width: 2000px) {
html { font-size: 116%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 18% 2.000em 18%; } font-size: 124%;
}
} }
@media (min-width: 2100px) { @media (min-width: 2100px) {
html { font-size: 118%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 19% 2.000em 19%; } font-size: 126%;
}
} }
@media (min-width: 2200px) { @media (min-width: 2200px) {
html { font-size: 120%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 20% 2.000em 20%; } font-size: 128%;
}
} }
@media (min-width: 2300px) { @media (min-width: 2300px) {
html { font-size: 122%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 21% 2.000em 21%; } font-size: 130%;
}
} }
@media (min-width: 2400px) { @media (min-width: 2400px) {
html { font-size: 124%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 22% 2.000em 22%; } font-size: 132%;
}
} }
@media (min-width: 2500px) { @media (min-width: 2500px) {
html { font-size: 126%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 23% 2.000em 23%; } font-size: 134%;
}
} }
@media (min-width: 2600px) { @media (min-width: 2600px) {
html { font-size: 128%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 24% 2.000em 24%; } font-size: 136%;
}
} }
@media (min-width: 2700px) { @media (min-width: 2700px) {
html { font-size: 130%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 25% 2.000em 25%; } font-size: 138%;
}
} }
@media (min-width: 2800px) { @media (min-width: 2800px) {
html { font-size: 132%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 26% 2.000em 26%; } font-size: 140%;
}
} }
@media (min-width: 2900px) { @media (min-width: 2900px) {
html { font-size: 134%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 27% 2.000em 27%; } font-size: 142%;
}
} }
@media (min-width: 3000px) { @media (min-width: 3000px) {
html { font-size: 136%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 28% 2.000em 28%; } font-size: 144%;
}
} }
@media (min-width: 3100px) { @media (min-width: 3100px) {
html { font-size: 138%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 29% 2.000em 29%; } font-size: 146%;
}
} }
@media (min-width: 3200px) { @media (min-width: 3200px) {
html { font-size: 140%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 30% 2.000em 30%; } font-size: 148%;
}
} }
@media (min-width: 3300px) { @media (min-width: 3300px) {
html { font-size: 142%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 31% 2.000em 31%; } font-size: 150%;
}
} }
@media (min-width: 3400px) { @media (min-width: 3400px) {
html { font-size: 144%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 32% 2.000em 32%; } font-size: 152%;
}
} }
@media (min-width: 3500px) { @media (min-width: 3500px) {
html { font-size: 146%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 33% 2.000em 33%; } font-size: 154%;
}
} }
@media (min-width: 3600px) { @media (min-width: 3600px) {
html { font-size: 148%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 34% 2.000em 34%; } font-size: 156%;
}
} }
@media (min-width: 3700px) { @media (min-width: 3700px) {
html { font-size: 150%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 35% 2.000em 35%; } font-size: 158%;
}
} }
@media (min-width: 3800px) { @media (min-width: 3800px) {
html { font-size: 152%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 36% 2.000em 36%; } font-size: 160%;
}
} }
@media (min-width: 3900px) { @media (min-width: 3900px) {
html { font-size: 154%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 37% 2.000em 37%; } font-size: 162%;
}
} }
@media (min-width: 4000px) { @media (min-width: 4000px) {
html { font-size: 156%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 38% 2.000em 38%; } font-size: 164%;
}
} }
@media (min-width: 4100px) { @media (min-width: 4100px) {
html { font-size: 158%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 39% 2.000em 39%; } font-size: 166%;
}
} }
@media (min-width: 4200px) { @media (min-width: 4200px) {
html { font-size: 160%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 40% 2.000em 40%; } font-size: 168%;
}
} }
@media (min-width: 4300px) { @media (min-width: 4300px) {
html { font-size: 162%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 41% 2.000em 41%; } font-size: 170%;
}
} }
@media (min-width: 4400px) { @media (min-width: 4400px) {
html { font-size: 164%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 42% 2.000em 42%; } font-size: 172%;
}
} }
@media (min-width: 4500px) { @media (min-width: 4500px) {
html { font-size: 166%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 43% 2.000em 43%; } font-size: 174%;
}
} }
@media (min-width: 4600px) { @media (min-width: 4600px) {
html { font-size: 168%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 44% 2.000em 44%; } font-size: 176%;
}
} }
@media (min-width: 4700px) { @media (min-width: 4700px) {
html { font-size: 170%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 45% 2.000em 45%; } font-size: 178%;
}
} }
@media (min-width: 4800px) { @media (min-width: 4800px) {
html { font-size: 172%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 46% 2.000em 46%; } font-size: 180%;
}
} }
@media (min-width: 4900px) { @media (min-width: 4900px) {
html { font-size: 174%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 47% 2.000em 47%; } font-size: 182%;
}
} }
@media (min-width: 5000px) { @media (min-width: 5000px) {
html { font-size: 176%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 48% 2.000em 48%; } font-size: 184%
}
} }
@media (min-width: 5100px) { @media (min-width: 5100px) {
html { font-size: 178%; } html {
#aboutcontainer, #downloadscontainer { padding: 2.000em 49% 2.000em 49%; } font-size: 186%;
}
} }

39
index.html
View file

@ -17,33 +17,28 @@
</style> </style>
</head> </head>
<body> <body>
<div id="intro"> <div id="navigation">
<div id="introcontainer"> <span><a href="#home" title="Home" class="logo"></a></span>
<i></i> <span><a href="#join" title="Join Server" class="join"></a></span>
<p>Flame.ga</p> <span><a href="#downloads" title="Downloads" class="downloads"></a></span>
<h1>Free OP Server in Minecraft</h1> </div>
<a href="#about" id="aboutbutton" title="About"></a> <div id="home" class="main">
<a href="#downloads" id="downloadsbutton" title="Downloads"></a> <div class="main-container">
<h1>Welcome to Flame.ga!</h1>
<p>Flame.ga provides you a unique experience in Minecraft. On this multiplayer server, you are allowed to do whatever you want. You get access to a large amount of free OP (operator) commands to use whenever you like, as well as a few server plugins, such as WorldEdit and DisguiseCraft. To make your experience fresh and lag-free, the server will reset once every day.</p>
<a href="#join" class="button">Join Server</a>
</div> </div>
</div> </div>
<div id="about"> <div id="join" class="main">
<div id="aboutcontainer"> <div class="main-container">
<h2>About</h2> <h1>Join Server</h1>
<p> <p>If you want to join the server, simply add the IP "flame.ga" to your server list in Minecraft.</p>
Flame.ga provides you a unique experience in Minecraft. On this multiplayer server, you are allowed to do whatever you want. You get access to a large amount of free OP (operator) commands to use whenever you like, as well as a few server plugins, such as WorldEdit and DisguiseCraft. To make your experience fresh and lag-free, the server will reset once every day.
</p>
<div id="ip">
<span>IP</span>
<i>flame.ga</i>
</div> </div>
</div> </div>
</div> <div id="downloads" class="main">
<div id="downloads"> <div class="main-container">
<div id="downloadscontainer">
<h2>Downloads</h2> <h2>Downloads</h2>
<p> <p>We provide downloads for worlds and schematics on the server, to make it easy for you to export your creations. The downloads update every five minutes.</p>
Feel free to download a copy of the server's schematics and worlds. Updates every five minutes.
</p>
<a href="https://github.com/flameserver/downloads/archive/schematics.zip">Schematics</a> <a href="https://github.com/flameserver/downloads/archive/schematics.zip">Schematics</a>
<a href="https://github.com/flameserver/downloads/archive/worlds.zip">Worlds</a> <a href="https://github.com/flameserver/downloads/archive/worlds.zip">Worlds</a>
</div> </div>