MSU Site

Mega Scratch Userscript site design

by Josh Pullen

HTML

<h1 class="title">Mega Scratch Userscript</h1>
<h4 class="subtitle">Making Scratch better, one script at a time.</h4>
<div class="columns">
    <div class="column-1">
        <h3 class="header">Use it!</h3>
        <p>Scratch is about to become way more awesome. Here are some of the features that you will get if you install the Mega Scratch Userscript:</p>
        <ol>
            <li>Example feature 1</li>
            <li>Example feature 2</li>
            <li>Example feature 3</li>
            <li>Example feature 4</li>
            <li>Example feature 5</li>
        </ol>
        <p>Are you as hyped as we are? Good! Let's start the installation (don't worry, it's easy).</p>
        <h5 class="mini-header">Installation</h5>
        <p>The first step to installing the Mega Scratch Userscript is to get a userscript manager. If you're using Firefox, <a href="https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/">Greasemonkey</a> is a great option. If you're on Google Chrome, use <a href="https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en">Tampermonkey</a>. There is also a version of <a href="https://addons.opera.com/en/extensions/details/tampermonkey-beta/?display=en">Tampermonkey for Opera</a>.</p>
        <p>These userscript managers are what allow us to intall the script. The next step will be super simple. All you have to do is click the button below, and then click on "install", "yes", or a similar option.</p>
        <div class="center">
            <a href="https://github.com/MegaScratchUserscript/Mega-Scratch-Userscript/raw/master/msu-base.user.js" class="button-link">Install</a>
        </div>
        <span style="color:#ff5050;">Someone please check to make sure that button works on Firefox w/ Greasemonkey! (I'm worried it might not...)</span>
    </div>
    <div class="column-2">
        <h3 class="header">Make it!</h3>
        <p>Want to make Scratch awesome? Feel free to help! The more people we can get...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);

* {
    font-family: 'Open Sans', sans-serif;
}
*::selection {
    background:#083875;
    color:white;
}
*::-moz-selection {
    background:#083875;
    color:white;
}
a {
    color:inherit;
    font-size:inherit;
    font-weight:inherit;
}
body {
    background:#115EC2;
    padding:30px;
}
.title {
    text-align:center;
    font-weight:bold;
    font-size:5em;
    color:white;
    text-shadow:1px 1px 0px #083875,
                2px 2px 0px #083875,
                3px 3px 0px #083875,
                4px 4px 0px #083875;
    -webkit-margin-after:0px;
    margin-top:2em;
}
.subtitle {
    color:#083875;
    font-size:1.5em;
    text-align:center;
    -webkit-margin-after:0px;
    -webkit-margin-before:0px;
    position:relative;
    top:-10px;
}
.columns {
    width:100%;
    max-width:966px;
    margin:0 auto;
}
.column-1, .column-2 {
    width:calc(50% - 40px);
    margin:0px;
    padding:0px 20px;
    color:white;
    margin-bottom:100px;
}
.column-1 {
    float:left;
}
.column-2 {
    float:right;
}
.header {
    color:white;
    font-size:3em;
    text-align:center;
    text-shadow:1px 1px 0px #083875,
                2px 2px 0px #083875,
                3px 3px 0px #083875;
}
.mini-header {
    color:white;
    font-size:1.5em;
    text-align:center;
    text-shadow:1px 1px 0px #083875,
                2px 2px 0px #083875;
}
.center {
    text-align:center;
}
.button-link {
    color:white;
    font-size:2em;
    text-decoration:none;
    display:inline-block;
    padding:5px 20px;
    background:#083875;
}
.footer {
    color:white;
    width:100%;
}