kaboomserver/website
1
0
Fork 0
mirror of https://github.com/kaboomserver/website.git synced 2024-12-23 00:05:03 +00:00
Code Issues Projects Releases Wiki Activity

Cleaning up CSS

Browse source
This commit is contained in:
mathias 2015-02-16 03:08:08 +02:00
parent 54fd115691
commit a9392a5c4f
2 changed files with 26 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
css/minecraft.css
View file

@ -31,11 +31,7 @@ body {
webkit-tap-highlight-color: rgba(255,255,255,.2); webkit-tap-highlight-color: rgba(255,255,255,.2);
} }
h2, h2 {
h3,
h4,
h5,
h6 {
margin: 0 0 15px; margin: 0 0 15px;
text-transform: uppercase; text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
@ -56,7 +52,7 @@ a:focus {
text-decoration: none; text-decoration: none;
} }
.intro { #intro {
display: table; display: table;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -68,13 +64,13 @@ a:focus {
background-size: cover; background-size: cover;
} }
.intro-body { #intro-body {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
} }
.brand-heading { #logo {
font-size: 35px; font-size: 35px;
text-transform: uppercase; text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
@ -84,14 +80,16 @@ a:focus {
margin: 0; margin: 0;
} }
.intro-text { h1 {
font-size: 13px; font-size: 13px;
text-transform: uppercase; text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
margin-bottom: 12px; margin-bottom: 12px;
margin-top: 0;
font-weight: 400;
} }
.btn-circle { #btn-circle {
display: inline-block; display: inline-block;
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -109,14 +107,14 @@ a:focus {
text-decoration: none; text-decoration: none;
} }
.btn-circle:hover, #btn-circle:hover,
.btn-circle:focus { #btn-circle:focus {
outline: 0; outline: 0;
color: #fff; color: #fff;
background: rgba(255,255,255,.1); background: rgba(255,255,255,.1);
} }
.about-section { #about {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #fff; color: #fff;
@ -124,7 +122,7 @@ a:focus {
background: #000; background: #000;
} }
.about-body { #about-body {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
padding-left: 10px; padding-left: 10px;
@ -180,21 +178,14 @@ input[type="text"]:focus {
border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px;
} }
@media(min-width:767px) { @media(min-width:767px) {
h2, h2 {
h3,
h4,
h5,
h6 {
margin: 0 0 25px; margin: 0 0 25px;
} }
p { p {
margin: 0 0 20px; margin: 0 0 20px;
line-height: 1.5; line-height: 1.5;
} }
h2,h3,h4,h5,h6 { #about-body {
margin: 0 0 30px;
}
.about-body {
padding-left: 90px; padding-left: 90px;
padding-right: 90px; padding-right: 90px;
padding-top: 40px; padding-top: 40px;
@ -209,17 +200,17 @@ margin: 25px 0 0 0;
font-size: 21px; font-size: 21px;
margin: 25px 0 0 0; margin: 25px 0 0 0;
} }
.btn-circle { #btn-circle {
font-size: 29px; font-size: 29px;
width: 60px; width: 60px;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
border: 2px solid #fff; border: 2px solid #fff;
} }
.brand-heading { #logo {
font-size: 100px; font-size: 100px;
} }
.intro-text { h1 {
font-size: 25px; font-size: 25px;
margin-bottom: 30px; margin-bottom: 30px;
} }

18
index.html
View file

@ -8,23 +8,21 @@
<link href="css/minecraft.css" rel="stylesheet"> <link href="css/minecraft.css" rel="stylesheet">
</head> </head>
<body> <body>
<section class="intro"> <div id="intro">
<div class="intro-body"> <div id="intro-body">
<h1 class="brand-heading">Minecraft.ga</h1> <p id="logo">Minecraft.ga</p>
<p class="intro-text">Sandbox Server in Minecraft</p> <h1>Sandbox Server in Minecraft</h1>
<div class="page-scroll"> <a href="#about" id="btn-circle">▼</a>
<a href="#about" class="btn btn-circle">▼</a>
</div> </div>
</div> </div>
</section> <div id="about">
<section id="about" class="about-section"> <div id="about-body">
<div class="about-body">
<h2>About Minecraft.ga</h2> <h2>About Minecraft.ga</h2>
<p>Minecraft.ga provides you a unique and interesting experience in Minecraft. This server allows you to do whatever you want; griefing, acting like a staff member, building - you name it. A large set of operator (OP) commands is granted for you to use whenever you like, as well as a few server plugins, such as WorldEdit. With no rules, this is the perfect place to do what you may not be allowed to do elsewhere.</p> <p>Minecraft.ga provides you a unique and interesting experience in Minecraft. This server allows you to do whatever you want; griefing, acting like a staff member, building - you name it. A large set of operator (OP) commands is granted for you to use whenever you like, as well as a few server plugins, such as WorldEdit. With no rules, this is the perfect place to do what you may not be allowed to do elsewhere.</p>
<p>Minecraft.ga uses an auto restart function, which assures the server will always stay up for you to play on. To give you a fresh and lag-free experience, the world will also reset automatically every Sunday. If you need to reach us, please send a mail to hello@minecraft.ga!</p> <p>Minecraft.ga uses an auto restart function, which assures the server will always stay up for you to play on. To give you a fresh and lag-free experience, the world will also reset automatically every Sunday. If you need to reach us, please send a mail to hello@minecraft.ga!</p>
<span id="ipbox">IP</span><input type="text" value="minecraft.ga" onfocus="this.select();" onmouseup="return false;" size="10"> <span id="ipbox">IP</span><input type="text" value="minecraft.ga" onfocus="this.select();" onmouseup="return false;" size="10">
</div> </div>
</section> </div>
<script src="js/scroll.js"></script> <script src="js/scroll.js"></script>
</body> </body>
</html> </html>