Skip to content

Instantly share code, notes, and snippets.

@d5

d5/style.css

Last active May 23, 2023 14:33
Show Gist options
  • Save d5/8174755 to your computer and use it in GitHub Desktop.
Save d5/8174755 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
style.css
body {
background-color: #ffffff;
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
font-family: Helvetica, arial, freesans, clean, sans-serif;
}
table {
font-size: 15px;
border-collapse: collapse;
border-spacing: 0px;
border: 0px;
-webkit-text-size-adjust: 100%;
}
#left {
width: 280px;
min-width: 280px;
text-align: right;
vertical-align: top;
}
#main-title {
position: relative;
font-size: 60px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 100;
right: -3px;
padding-bottom: 0px;
}
#tagline {
font-family: 'Alegreya Sans SC', sans-serif;
position: relative;
font-weight: 100;
color: #666666;
font-size: 15px;
top: 10px;
right: 2px;
}
#main-menu {
position: relative;
top: -10px;
border-top: 1px solid #eeeeee;
}
.menu-item {
font-size: 16px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 300;
margin-top: 8px;
}
#mid {
width: 25px;
}
#right {
width: 600px;
min-width: 300px;
vertical-align: top;
}
#right-top {
line-height: 0px;
}
#right-bottom {
line-height: 10px;
}
#right-margin {
width: 20px;
}
a {
text-decoration: none;
color: #ff3300;
}
a#index {
color: black;
}
#content {
color: #333333;
font-family: Helvetica, arial, freesans, clean, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: 100;
word-wrap: break-word;
padding-left: 10px;
padding-right: 10px;
}
#content p {
color: #333333;
display: block;
font-family: Helvetica, arial, freesans, clean, sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 100;
line-height: 25px;
margin: 15px 0px 15px 0px;
}
#content h1 {
border-bottom: 1px solid #DDDDDD;
cursor: text;
display: block;
font-size: 44px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 100;
line-height: 63px;
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 0px;
position: relative;
}
#content h2 {
border-bottom: 1px solid #EEEEEE;
cursor: text;
display: block;
font-size: 30px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 100;
line-height: 51px;
margin: 30px 0px 15px 0px;
padding: 0px 0px 0px 0px;
position: relative;
}
#content h3 {
cursor: text;
display: block;
font-size: 23px;
font-family: 'Alegreya Sans', sans-serif;
font-weight: 100;
line-height: 38px;
margin: 22px 0px 15px 0px;
padding: 0px 0px 0px 0px;
position: relative;
}
#content a {
color: rgb(65, 131, 196);
}
#content a:hover {
text-decoration: underline;
}
#content li {
line-height: 25px;
}
#content code {
background-color: #f8f8f8;
border-bottom: 1px #dddddd solid;
border-left: 1px #dddddd solid;
border-right: 1px #dddddd solid;
border-top: 1px #dddddd solid;
border-radius: 3px;
color: #333333;
display: block;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 13px;
margin: 15px 0px 15px 0px;
padding: 6px 6px 6px 6px;
overflow-x: auto;
overflow-y: auto;
word-wrap: normal;
line-height: 19px;
}
#content blockquote {
border-left: 4px solid #dddddd;
display: block;
margin-bottom: 15px;
margin-left: 0px;
margin-right: 0px;
margin-top: 15px;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 15px;
padding-top: 0px;
}
#content blockquote p {
color: #777777;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 20px;
word-wrap: break-word;
}
#content p code, #content li code {
border-color: #eeeeee;
border-radius: 2px;
display: inline;
padding: 1px 1px 1px 1px;
}
#content hr {
border: 0px;
border-top: 1px solid #666666;
}
Raw
test.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="http://static.gist.sh/js/showdown.github.js"></script>
<link href='http://fonts.googleapis.com/css?family=Inconsolata|Alegreya+Sans:100,300,400|Alegreya+Sans+SC:100,300,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/s/8174755/style.css?ctype=text/css">
<script>
function getQuery(key) {
var queryString = (location.search.substr(1)).split("&");
for(var i = 0; i < queryString.length; i++) {
var temp = queryString[i].split("=");
if(key === temp[0]) { return unescape(temp[1]); }
}
return null;
}
function render(fileName) {
//jQuery.ajax('/s/8174755/' + fileName, {
jQuery.ajax('http://s.gist.sh/b4c6dd3185d1a3a84e9bcfd82e89240381f36095', {
crossDomain: true,
success: function(data) {
var conv = new Showdown.converter({ extensions: ['github'] });
$("#content").html(conv.makeHtml(data));
},
error: function(xhr, ajaxOpts, thrownError) {
var out = '';
for(var i=0;i<xhr.length;++i) {
out += xhr[i] + '=' + xhr[xhr[i]];
}
$("#content").text(out);
}
});
/*
jQuery.get('/s/8174755/' + fileName, function(data) {
var conv = new Showdown.converter({ extensions: ['github'] });
$("#content").html(conv.makeHtml(data));
});*/
}
$(document).ready(function() {
$.support.cors = true;
var curSection = null;
var section = getQuery('st') || 'test';
curSection = section;
render(section+'.md');
$('.content-load').click(function() {
event.preventDefault();
var section = $(this).attr('id');
if(curSection !== section) {
curSection = section;
render(section + '.md');
}
});
});
</script>
<title>Gist Script</title>
</head>
<body>
<table>
<tr>
<td id="left">
<div id="tagline">Scriptify your gists</div>
<div id="main-title"><a class="content-load" id="index" href="#">Gist Script</a></div>
<div id="main-menu">
<div class="menu-item"><a class="content-load" id="quick-tutorial" href="#">Quick Tutorial</a></div>
<div class="menu-item"><a class="content-load" id="using-gist-script" href="#">Using Gist Script</a></div>
<div class="menu-item"><a class="content-load" id="template-syntax" href="#">Template Syntax</a></div>
<div class="menu-item"><a class="content-load" id="about" href="#">About</a></div>
</div>
</td>
<td id="mid">&nbsp;</td>
<td id="right">
<table>
<tr><td id="right-top">&nbsp;</td></tr>
<tr><td id="content">&nbsp;</td></tr>
<tr><td id="right-bottom">&nbsp;</td></tr>
</table>
</td>
<td id="right-margin">&nbsp;</td>
</tr>
</table>
</body>
</html>
Raw
test.md

Test

Hello, World!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment