Skip to content

Instantly share code, notes, and snippets.

@alfonsojon

alfonsojon/SassMeister-input-HTML.html

Last active August 29, 2015 14:24
Show Gist options
  • Save alfonsojon/ed7e0b2c5a1b77ea03cc to your computer and use it in GitHub Desktop.
Save alfonsojon/ed7e0b2c5a1b77ea03cc to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html>
<head>
<title>Livecraft</title>
<link href="css/main.css" rel="stylesheet" />
<meta charset="UTF-8" />
</head>
<body>
<nav>
<ul>
<li class="hamburger">&#9776;</li>
<li>
<a href="index">Home</a>
</li>
<li>
<span class="nav-divider">></span>
</li>
<li>
<a href="about">About Us</a>
</li>
</ul>
</nav>
<div id="container">
<article class="left">
<div class="post-1">
<h1>Welcome to Livecraft!</h1>
<p>
Livecraft is a faction, survival, and creative free build server which has been online since mid-2011. We went online for the first time when Minecraft beta 1.7.3 had been released, and we had a very small user base. Since then, we have graduated to become a dedicated server with a very active and kind community. Livecraft isn’t just about building, it’s about socializing. On Livecraft, you will find that it is truly about building with others, having competitive spirit and sharing experiences with many players. Many develop friendships, while some choose to stick with building. It’s your experience, make it what you want.
<br /><br />
Livecraft is proud to feature a suite of plugins to secure the builds and items that players have. We use LWC, NoCheat, Prism, MCBans, WorldGuard, and VanishNoPacket to make sure our players are safe, whether or not they know it.
<br /><br />
Additionally, Livecraft is proudly home hosted. All of this is ran at home, no hosting service is used at all. This ensures that if the server encounters any problems, it can be fixed as soon as possible by the maintainer of the server’s hardware. This person is known in-game as alfonsojon, but you can call him Jon. If you ever have problems with the server, you are free to email him at [email protected]. Do note, however, that this email is meant for helping with problems, not socializing.
<br /><br />
Overall, Livecraft should be the one of the most premium and entertaining Minecraft multiplayer experiences you can find. Your builds are secure, you are treated fairly as a member, and server problems can be taken care of nearly instantly.
<br /><br />
We look forward to seeing you on Livecraft!
<br /><br />
Regards,
Jonathan (alfonsojon) and Jake (Medius_Echo).
</p>
</div>
</article>
<aside class="right">
<h1>&nbsp;</h1>
<a href="http://minestatus.net/8652-livecraft"><img src="http://minestatus.net/8652-livecraft/image/original.png" alt="Livecraft"></a>
</aside>
</div>
<footer>
<p>&copy;2015 Jonathan Alfonso</p>
<p>Design based upon <a href="google.com/design/spec" class="link-dark">Google's Material Design specifications</a></p>
</footer>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100);
$MAINCOLOR: #6a1b9a;
$LIGHTTEXT: rgb(200,200,200);
$DARKTEXT: rgb(55,55,55);
@mixin material-box-shadow($HEIGHT) {
box-shadow: 0 2px $HEIGHT*5px rgba(0,0,0,0.25);
-moz-box-shadow: 0 2px $HEIGHT*5px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 2px $HEIGHT*5px rgba(0,0,0,0.25);
-o-box-shadow: 0 2px $HEIGHT*5px rgba(0,0,0,0.25);
}
@mixin material-transition($TRANSITION, $TIME) {
transition: $TRANSITION $TIME;
transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
}
html {
font: {
family: "Roboto", sans-serif;
size: 15px;
}
//font-weight: 100;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAA2FBMVEUFAgcGAwcGAwgGBAcHAwcHAwgHAwoHBAcHBAgHBAkIBAkJBAoJBAsJBQoKBAwKBA0KBQsKBQwKBQ0LBQ4MBQ0MBQ8MBRAMBg0MBg4MBhAMBw4NBg8NBw4OBhEOBw8PBhIPBxMPCBEQBxIQBxQQCBMQCRIRBxURBxYRCBQRCBURCBYSCBcTCRYTCRgUCRcUCRgUCRkUCRoVCRoVChkWChsWChwXCh0YCx4YCx8ZCx8ZCyAaCyAbDCEbDCIcDCMcDCQdDSQdDSUeDSYfDSYfDicgDighDin////qgn/vAAACv0lEQVRYw73Wz2/bZADH4cev7cRNum5t2UoH0iZUCSEOSDty578HceKAgAkVRrWtwNakSfzjtblYoaLVfIhLrh8p+kqv/fpJvkEjKqwlEkGmEW109vzgRd8vHd/Zgx1/WdQIKlEqFZWiKJW7lmr84VhQ4Vdnt3o3woIalYlOqhYkOqkoUYAjlx6ZOLZQC9b2t/0ncYQFrYlEJ2gFBLWJWiZXyrQSa/uCmYD9G51shAWFKFcJolSUYa2wtKfReOexVCXY9P21hwpLl575ZYQFCwUSJZr+/yaiQpSJ5tq+r5w7xYk3cufOdKOcwtK1qVQtF6VqtdpMKfHa0r/9uZeO1Gore1h4bbn7giSYmZlJVSiVMkFr5spC62a/lt3Rd13wtalUIxFF5w4caqUSqcpEaeo7L/7T3/mo77ufQlD2J0/tyoko12CjUAlKc7a9dCD3SLPtuy7oBFGLCgSp0gS1jdTSpec3+sbvnvb90sNR7sRWodNJBFSy/pnIBcxdyW/0z8y888ClE0eMsCAVdBqFVkSQqXToBJXU8lY/0Kq88mykU6DSWcutdDKVXKeR2Ahe+dxvntzqnwjOR7kP3st1gk6ltvGnI61rudzK3NxKVG/7hY9dSeRyc/MR3sYnplZSUxMLpampjUIqWrlyONDHeBsfKkw1Hm+//z8rZTpf+t5XA37YfcG+o/6rk2x98NSFU9cqB4b8sPuCU90dPjjtffCXIT/ctw9aQ364bx8Uhvxw/z4Y6rsveGnqpPfB3xZmSjP7d/jgbj/sfh/M1A7NvLWRSa2lplY+9QZBOeiHcX3wrbMbPvjR2hcDfhjbB5W9Gz44E/sn4EN+GNcHe7d8EAb8MLYP8ls+aAb88H/44MP9fnxQ29v6YMgPY/hg4XDrg5mNqbc46n2wGPDDGD5YazwwNXHRP/MRrUQpvX8f/AOCheLvN1PUsAAAAABJRU5ErkJggg==);
background-attachment: fixed;
body {
overflow: auto;
margin: 0;
nav {
@include material-box-shadow(1);
height: 64px;
width: 100%;
background-color: $MAINCOLOR;
position: fixed;
top: 0;
z-index: 999;
ul {
list-style-type: none;
margin: 0;
padding: 0 1em 0 1em;
li {
height: 64px;
font-size: 24px;
line-height: 64px;
padding: 0;
display: inline;
margin: 0 1em 0 0;
a {
color: white;
text-decoration: none;
}
}
}
}
div#container {
@include material-box-shadow(1);
@extend .body-container;
border-radius: 2px 2px 0 0;
margin-top: 48px;
background: #fff;
article.left {
padding: 1%;
width: 65%;
float: left;
}
aside.right {
padding: 1%;
width: 31%;
float: right;
}
@include material-box-shadow(1);
}
footer {
@extend .body-container;
z-index: -100;
color: white;
font-weight: 100;
margin-top: 0;
border-radius: 0 0 2px 2px;
margin-bottom: 2em;
background: rgb(50,50,50);
}
}
}
.body-container {
overflow: auto;
padding: 1em 2em;
width: 75% !important;
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
a.link-dark {
color: $LIGHTTEXT;
text-decoration: none;
}
a.link-light {
@extend a.link-dark;
color: $DARKTEXT;
}
.nav-divider {
color: rgba(220,220,220,1) !important;
}
.hamburger {
color: #fff;
}
Raw
SassMeister-output.css
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100);
html {
font-family: "Roboto", sans-serif;
font-size: 15px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAA2FBMVEUFAgcGAwcGAwgGBAcHAwcHAwgHAwoHBAcHBAgHBAkIBAkJBAoJBAsJBQoKBAwKBA0KBQsKBQwKBQ0LBQ4MBQ0MBQ8MBRAMBg0MBg4MBhAMBw4NBg8NBw4OBhEOBw8PBhIPBxMPCBEQBxIQBxQQCBMQCRIRBxURBxYRCBQRCBURCBYSCBcTCRYTCRgUCRcUCRgUCRkUCRoVCRoVChkWChsWChwXCh0YCx4YCx8ZCx8ZCyAaCyAbDCEbDCIcDCMcDCQdDSQdDSUeDSYfDSYfDicgDighDin////qgn/vAAACv0lEQVRYw73Wz2/bZADH4cev7cRNum5t2UoH0iZUCSEOSDty578HceKAgAkVRrWtwNakSfzjtblYoaLVfIhLrh8p+kqv/fpJvkEjKqwlEkGmEW109vzgRd8vHd/Zgx1/WdQIKlEqFZWiKJW7lmr84VhQ4Vdnt3o3woIalYlOqhYkOqkoUYAjlx6ZOLZQC9b2t/0ncYQFrYlEJ2gFBLWJWiZXyrQSa/uCmYD9G51shAWFKFcJolSUYa2wtKfReOexVCXY9P21hwpLl575ZYQFCwUSJZr+/yaiQpSJ5tq+r5w7xYk3cufOdKOcwtK1qVQtF6VqtdpMKfHa0r/9uZeO1Gore1h4bbn7giSYmZlJVSiVMkFr5spC62a/lt3Rd13wtalUIxFF5w4caqUSqcpEaeo7L/7T3/mo77ufQlD2J0/tyoko12CjUAlKc7a9dCD3SLPtuy7oBFGLCgSp0gS1jdTSpec3+sbvnvb90sNR7sRWodNJBFSy/pnIBcxdyW/0z8y888ClE0eMsCAVdBqFVkSQqXToBJXU8lY/0Kq88mykU6DSWcutdDKVXKeR2Ahe+dxvntzqnwjOR7kP3st1gk6ltvGnI61rudzK3NxKVG/7hY9dSeRyc/MR3sYnplZSUxMLpampjUIqWrlyONDHeBsfKkw1Hm+//z8rZTpf+t5XA37YfcG+o/6rk2x98NSFU9cqB4b8sPuCU90dPjjtffCXIT/ctw9aQ364bx8Uhvxw/z4Y6rsveGnqpPfB3xZmSjP7d/jgbj/sfh/M1A7NvLWRSa2lplY+9QZBOeiHcX3wrbMbPvjR2hcDfhjbB5W9Gz44E/sn4EN+GNcHe7d8EAb8MLYP8ls+aAb88H/44MP9fnxQ29v6YMgPY/hg4XDrg5mNqbc46n2wGPDDGD5YazwwNXHRP/MRrUQpvX8f/AOCheLvN1PUsAAAAABJRU5ErkJggg==);
background-attachment: fixed;
}
html body {
overflow: auto;
margin: 0;
}
html body nav {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
height: 64px;
width: 100%;
background-color: #6a1b9a;
position: fixed;
top: 0;
z-index: 999;
}
html body nav ul {
list-style-type: none;
margin: 0;
padding: 0 1em 0 1em;
}
html body nav ul li {
height: 64px;
font-size: 24px;
line-height: 64px;
padding: 0;
display: inline;
margin: 0 1em 0 0;
}
html body nav ul li a {
color: white;
text-decoration: none;
}
html body div#container {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
border-radius: 2px 2px 0 0;
margin-top: 48px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
html body div#container article.left {
padding: 1%;
width: 65%;
float: left;
}
html body div#container aside.right {
padding: 1%;
width: 31%;
float: right;
}
html body footer {
z-index: -100;
color: white;
font-weight: 100;
margin-top: 0;
border-radius: 0 0 2px 2px;
margin-bottom: 2em;
background: #323232;
}
.body-container, html body div#container, html body footer {
overflow: auto;
padding: 1em 2em;
width: 75% !important;
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
a.link-dark, a.link-light {
color: #c8c8c8;
text-decoration: none;
}
a.link-light {
color: #373737;
}
.nav-divider {
color: gainsboro !important;
}
.hamburger {
color: #fff;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html>
<head>
<title>Livecraft</title>
<link href="css/main.css" rel="stylesheet" />
<meta charset="UTF-8" />
</head>
<body>
<nav>
<ul>
<li class="hamburger">&#9776;</li>
<li>
<a href="index">Home</a>
</li>
<li>
<span class="nav-divider">></span>
</li>
<li>
<a href="about">About Us</a>
</li>
</ul>
</nav>
<div id="container">
<article class="left">
<div class="post-1">
<h1>Welcome to Livecraft!</h1>
<p>
Livecraft is a faction, survival, and creative free build server which has been online since mid-2011. We went online for the first time when Minecraft beta 1.7.3 had been released, and we had a very small user base. Since then, we have graduated to become a dedicated server with a very active and kind community. Livecraft isn’t just about building, it’s about socializing. On Livecraft, you will find that it is truly about building with others, having competitive spirit and sharing experiences with many players. Many develop friendships, while some choose to stick with building. It’s your experience, make it what you want.
<br /><br />
Livecraft is proud to feature a suite of plugins to secure the builds and items that players have. We use LWC, NoCheat, Prism, MCBans, WorldGuard, and VanishNoPacket to make sure our players are safe, whether or not they know it.
<br /><br />
Additionally, Livecraft is proudly home hosted. All of this is ran at home, no hosting service is used at all. This ensures that if the server encounters any problems, it can be fixed as soon as possible by the maintainer of the server’s hardware. This person is known in-game as alfonsojon, but you can call him Jon. If you ever have problems with the server, you are free to email him at [email protected]. Do note, however, that this email is meant for helping with problems, not socializing.
<br /><br />
Overall, Livecraft should be the one of the most premium and entertaining Minecraft multiplayer experiences you can find. Your builds are secure, you are treated fairly as a member, and server problems can be taken care of nearly instantly.
<br /><br />
We look forward to seeing you on Livecraft!
<br /><br />
Regards,
Jonathan (alfonsojon) and Jake (Medius_Echo).
</p>
</div>
</article>
<aside class="right">
<h1>&nbsp;</h1>
<a href="http://minestatus.net/8652-livecraft"><img src="http://minestatus.net/8652-livecraft/image/original.png" alt="Livecraft"></a>
</aside>
</div>
<footer>
<p>&copy;2015 Jonathan Alfonso</p>
<p>Design based upon <a href="google.com/design/spec" class="link-dark">Google's Material Design specifications</a></p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment