Skip to content

Instantly share code, notes, and snippets.

@ugreg

ugreg/dabblet.css

Last active August 29, 2015 14:07
Show Gist options
  • Save ugreg/3f374988ef427517abac to your computer and use it in GitHub Desktop.
Save ugreg/3f374988ef427517abac to your computer and use it in GitHub Desktop.
Download ZIP
Header
Raw
dabblet.css
/* Header */
.wrapper {
}
/* Navbar */
ul.navbar {
list-style-type: none;
text-align: center;
padding:7px 0px;
margin-top:20px;
margin-right: -8px;
margin-left: -11px;
box-shadow: 0px 5px 1px rgba(25, 25, 25, 0.1);
background-color: rgba(250, 250, 250, 0.1);
}
li.navbaritem {
display: inline;
padding: 5px 70px 5px;
font-size: 1.1em;
color: black;
margin: 0px -1px 0px -6px;
}
a.menulink:link, a.menulink:visited, a.menulink:active {
display: inline-block;
text-decoration: none;
border-top:3px solid rgb(210, 210, 251);
} a.menulink:hover {
display: inline-block;
border-top:3px solid #afe8Fc;
} a:last-child {
font-family:inherit;
font-size:inherit;
}
/* Body */
body {
font-family: Calibri, Arial, Times;
font-size: 12pt;
}
@media screen and (min-width: 960px) {
h1 {
font-size: 2.5em;
text-align: center;
text-shadow: 2px 2px #444444;
letter-spacing:15pt;
padding: 20px 0px 20px 210px;
border: 5px #467cc4;
border-style: solid hidden hidden;
margin: -10px -8px -20px -10px;
background-color: #468cc4;
color: #fff;
}
.readonly{
font-size:20%;
letter-spacing:9pt;
float:right;
}
}
@media screen and (max-width: 959px) {
h1 {
font-family: Helvetica;
font-size: 200%;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px #444;
letter-spacing:20pt;
padding: 20px 0px 20px 90px;
border: 8px #468CC4;
border-style: solid hidden hidden;
margin: -10px -8px -20px -10px;
background-color: #555555;
color: #fff;
}
.readonly{
font-size:40%;
letter-spacing:9pt;
float:right;
}
}
h2:first-child {
font-family: Consolas;
generic-family: Courier;
font-size: 110%;
}
h3 {
font-size: 150%;
}
h4 {
font-family: inherit;
font-size: 170%;
padding-bottom:7px;
border-bottom:2px solid #ddd;
margin-left:-60px;
}
/********************* Home *********************/
p.helloWorld {
font-family: monospace, "Courier New", Consolas;
font-size: 450%;
text-align: center;
color:#fbffff;
}
a.golink {
color: #2277ee;
text-shadow: 2px 2px #000000;
text-decoration: none;
}a.golink:hover{
color: #03BF54;
text-shadow: 2px 2px #333333;
}
li.keyinfo {
font-size:120%;
padding:35px 10px;
padding-top:8px;
font-family: monospace, "Courier New", Consolas;
list-style-type: square;
margin-left:-110px;
color:#ddd;
}
li.keyinfo span{
font-size:110%;
font-family: monospace, "Courier New", Consolas;
color:#000;
}
@media screen and (min-width: 1480px) {
.emblem{
height:300px;
width:340px;
margin-top:-650px;
margin-left:50px;
position:absolute;
border-radius:32px;
box-shadow: 10px 10px 0px 1px #555555;
}
}
@media screen and (max-width: 1479px) {
.emblem{
height:300px;
width:340px;
margin-top:-760px;
margin-left:50px;
position:absolute;
border-radius:32px;
box-shadow: 10px 10px 0px 1px #555555;
}
}
.divider {
margin: 0 auto;
width: 100%;
margin-bottom: 8px;
height: 50px;
border:0px solid black;
}
.cross{
position: relative;
float: right;
height:360px;
width:1000px;
margin-top:-408px;
margin-right:-8px;
border-top: 14px solid #555555;
border-left: 14px solid #555555;
}
.pushleft {
padding-left:600px;
}
.overviewblog {
font-family:'Press Start 2P';
background-color: rgb(250, 250, 250);
height: 800px;
padding-top:20px;
padding-left:578px;
margin: -8px;
}
.overviewprojects{
margin:0 auto;
padding:0px 0px 8px;
font-family:'Press Start 2P';
background-color: rgb(250, 250, 250);
height: 800px;
width:100%;
padding-top:20px;
}
.overviewgamerart {
font-family:'Press Start 2P';
background-color: rgb(250, 250, 250);
height: 800px;
padding-top:20px;
padding-left:578px;
margin: -8px;
}
/* Footer */
.footer {
background-color: #555555;
height: 300px;
margin: -8px -8px 0px;
color: #ffffff;
border:4px #3f3f3f;
border-style:solid hidden hidden;
}
.footer table{
text-align: left;
font-family:"Courier new", Arial, Times;
color:#fff;
border-spacing: 50px 0px;
padding: 20px;
margin-left: 10px;
}.footer th {
font-size: 1.1em;
font-weight:bold;
padding-right: 30px;
border-bottom: 1px solid #777;
align: left;
}.footer td {
font-size: 0.9em;
padding: 10px 13px 0px;
}
.gregin {
text-decoration: overline;
color: #0099ff;
}
.creator {
font-size: 11px;
height: 20px;
padding: 8px;
margin: 70px 0px 0px;
text-align: center;
color: #dddddd;
background-color: #3f3f3f;
}
/* Animations */
.blink {
-webkit-animation-name: blinker;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
Raw
dabblet.html
<!DOCTYPE html>
<html>
<head>
<title>Greg Degruy</title>
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
<link rel="shortcut icon" href="http://webusers.xula.edu/gdegruy/images/Symbol_GCI_beta.png">
<link href="http://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Codystar" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=VT323" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Greg D.<span class="readonly">-rw-r--r--</span></h1>
<nav>
<ul class="navbar">
<a class="menulink" href="http://webusers.xula.edu/gdegruy/index.php"><li class="navbaritem">Greg</li></a>
</ul>
</nav>
<p class="helloWorld">G:\>Hello, World!<span class="blink" style="font-size:inherit;" >_</span></p>
<div class="divider" style="background-color:#58B1F7"></div>
<div class="overviewblog">
<h4>Lv1 <a href="http://webusers.xula.edu/gdegruy/index.php" class="golink">GO!</a> Blog</h4>
<ul>
<li class="keyinfo"><span>I'm a Senior Comp Sci student preparing to make my transition into the professional tech world.</span></li>
<li class="keyinfo"><span>I'm currently... Greg Degruy.</span></li>
<li class="keyinfo"><span>Skilled in Java, C++, Python, Gimp.</span></li>
</ul>
</div>
<div class="cross" style="background-color:#58B1F7;"></div>
<div class="emblem" style="background-color:#58B1F7;">
<img src="http://webusers.xula.edu/gdegruy/images/blogicon.png" height="300px" width="340px"/>
</div>
<div class="divider" style="background-color:#81C3E7"></div>
<div class="overviewprojects">
<div class="pushleft">
<h4>Lv2 <a href="http://webusers.xula.edu/gdegruy/index.php" class="golink">GO!</a> Projects</h4>
<ul>
<li class="keyinfo"><span>I'm a programmer, check out what I've done here.</span></li>
<li class="keyinfo"><span>Android apps...</span></li>
<li class="keyinfo"><span>I have done some dabbling in Blender and InDesign as well.</span></li>
</ul>
</div>
</div>
<div class="cross" style="background-color:#81C3E7;"></div>
<div class="emblem" style="background-color:#81C3E7;">
<img src="http://webusers.xula.edu/gdegruy/images/projectsicon.png" height="300px" width="340px"/>
</div>
<div class="divider" style="background-color:#468CC4"></div>
<div class="overviewgamerart">
<h4>Lv3 <a href="http://webusers.xula.edu/gdegruy/idnex.php" class="golink">GO!</a> GamesXArt</h4>
<ul>
<li class="keyinfo"><span>I am a massive Nintendo fan. I must prove this to all!</span></li>
<li class="keyinfo"><span>Non-Nintendo games that tickle my fancy can be found here too.</span></li>
<li class="keyinfo"><span>Digital images are cool, you'll find many of the ones I love here.</span></li>
</ul>
</div>
<div class="cross" style="background-color:#468CC4;"></div>
<div class="emblem" style="background-color:#468CC4;">
<img src="http://webusers.xula.edu/gdegruy/images/gamerarticon.png" height="300px" width="340px"/>
</div>
<div class="footer">
<table>
<thead>
<tr>
<th>Site Map</th>
<th>Social Networking</th>
</tr>
</thead>
<tr>
<td>Home</td>
<td>LinkedIn</td>
</tr>
<tr>
<td>About</td>
<td>Facebook</td>
</tr>
<tr>
<td>Projects</td>
<td></td>
</tr>
<tr>
<td>Games</td>
<td></td>
</tr>
<tr>
<td>Art</td>
<td></td>
</tr>
<td>Contact Me</td>
<td></td>
</tr>
</table>
<div class="creator">._. © 2014 by Gregory Degruy | GREG LinkedIn: <a class="gregin" href="https://www.linkedin.com/profile/view?id=268109042&trk=nav_responsive_tab_profile">in</a> | Google Gregory Degruy :D ._.</div>
</div>
</body>
</html>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment