Skip to content

Instantly share code, notes, and snippets.

@skopp

skopp/index.html

Created December 12, 2012 20:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save skopp/4271307 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save skopp/4271307 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by skopp. My personal blog on scriptogram - This is the underlying code of the frontend of scriptogr.am/skopp I have NO idea how it ended up on Codepen. O.o Thank goodness I didn't leave any important notes or bank details in<!-- comments -->
Raw
index.html
<!--
"Typographic" Scriptogr.am theme by http://sicanstudios.com
Change the links of menu and header to match your website.
Also the description tag and Twitter username (in footer).
--><head>{{head}}</head>
<body>
<div class="wrapper">
<div id="sidebar">
<div id="menu">
<strong>♣ <a href="" title="skopp">skopp</a></strong> on tech & life
<a href="http://scriptogr.am/skopp/feed" title="RSS Feed">RSS Feed</a>
<a href="http://scriptogr.am/skopp/archive">Archive</a>
</div>
</div><!-- end sidebar -->
<div class="blog">
<div class="container">
</div><!-- end container -->
</div><!-- end blog -->
<footer>
<div class="share-twitter">
<a href="https://twitter.com/skudatech" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @skudatech</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="right">
<a class="ppl" href="#" title="Back to top">Back to Top <strong>↑</strong></a> /
© 2013 mr essop / <a href="http://skuda.net/">skuda/subm3rg3d_media</a> /
all rights reserved /
<a href="http://scriptogr.am" title="Scriptogr.am for Dropbox">Powered by Scriptogr.am</a>
</div>
</footer>
</div><!-- end wrapper -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
/* iPhone address bar hiding and orientation fix */
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
window.addEventListener("load",function() {
setTimeout(function() {
window.scrollTo(0, 1);
}, 1000);
});
/* hide the date on iPhone */
var iPhone = navigator.userAgent.match(/iPhone/i) != null;
if (iPhone) {
$("span.date").hide();
}
}
</script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
/* FitText parameters for resizing type */
$("h1, .archive-divider>h2").fitText(0.9, { minFontSize: '32px', maxFontSize: '100px' })
$("#menu, footer h3").fitText(2.5, { minFontSize: '14px', maxFontSize: '19px' })
$(".archive-title>h2").fitText(2, { minFontSize: '14px', maxFontSize: '22px' })
</script>
<!-- scriptogr.am -->
<script type="text/javascript" src="http://include.reinvigorate.net/re_.js"></script><script type="text/javascript">try{reinvigorate.url_filter=function(a){return a};reinvigorate.track("vix62-03bwewoe4u")}catch(err){}var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-33446752-1"]);_gaq.push(["_trackPageview"]);(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();</script>
<a href="http://scriptogr.am/dashboard/" style="z-index:99999;position:fixed;top:35px;right:35px"><img src="http://scriptogr.am/lib/img/admin.png" /></a>
</body>
</html>
Raw
style.css
/* Body */
* {
margin: 0;
padding: 0;
}
body {
background: #f9f9f9;
color: #333;
font: 16px/1.8 'Droid Serif', Georgia, serif;
padding: 0;
width: 90%;
margin: 5% auto 0;
max-width: 1350px;
}
::selection {
background: #fe580f;
color: #fff;
}
::-moz-selection {
background: #fe580f;
color: #fff;
}
/* Links & Typography */
a:link, a:visited {
text-decoration: none;
border-bottom: 1px solid #FE580F;
color: #222;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
transition: all 0.6s;
padding-bottom: 2px;
}
a:hover {
color: #FE580F;
}
a.img, img {
border: none;
border-radius: 5px;
}
a.img:hover>img, .design_thumb a:hover>img {
-moz-box-shadow: 0 1px 11px rgba(254, 88, 15, 0.4);
-webkit-box-shadow: 0 1px 11px rgba(254, 88, 15, 0.4);
box-shadow: 0 1px 11px rgba(254, 88, 15, 0.4);
}
a.button {
margin: 0.5em 0;
display: inline-block;
background: #FE580F;
padding: 2% 7% !important;
color: #fff !important;
text-align: center;
border-radius: 6px;
border: solid 1px #f34a00;
}
a.button:hover {
background: #f34a00;
}
h2, h3, h4 {
font: 1.5em/1.8 'Droid Serif', Georgia, sans-serif;
padding: 1.5em 0 0;
font-weight: bold;
margin: 0;
}
.title h1 {
display: inline-block;
width: 100%;
font-size: 100px;
line-height: 1.17em;
}
.title h1 span {
font-family: 'Droid Serif', Georgia, sans-serif;
margin: 0;
border-bottom: none;
color: #222;
}
/* no border for title */
.title h1 span a {
border: none;
color: #222 !important;
}
/* on title hover, change colour */
.title h1 span:hover>a {
color: #f9f9f9 !important;
text-shadow: -1px -1px 0 #333,1px -1px 0 #333,-1px 1px 0 #333,1px 1px 0 #333;
}
.body-post {
margin: 4% auto 0;
max-width: 800px;
}
.body-post img, .body-page img {
margin: 0.5em 0;
display: block;
max-width: 800px;
width: 100%;
}
figcaption {
font-style: italic;
color: #999;
}
p {
margin: 0;
padding: 0.5em 0;
}
.excerpt > div {
height: 450px;
display: block;
overflow: hidden;
position: relative;
}
.excerpt > div:after {
content: "";
width: 100%;
height: 70px;
position: absolute;
bottom: 0;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(249,249,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(249,249,249,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(249,249,249,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(249,249,249,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(249,249,249,1) 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(249,249,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f9f9f9',GradientType=0 );
}
.continue_reading {
margin-top: 0.5em;
display: block;
background: #FE580F;
padding: 2% !important;
color: #fff !important;
text-align: center;
border-radius: 6px;
border: solid 1px #f34a00;
}
.continue_reading:hover {
background: #f34a00;
}
blockquote {
padding-left: 1em;
padding-right: 1em;
color: #444;
border: 1px solid #eee;
border-left: 8px solid #ddd;
margin: 0.5em 0;
background: #f4f4f4;
position: relative;
}
strong, b {
color: #333;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
code {
font-family: 'Consolas', monospace, 'Courier New';
background: #eee;
color: #111;
max-width: 666px;
padding: 0 1px;
}
pre {
margin: 0.5em 0;
font-size: 0.875em;
padding: 0.5em 1.6em;
background: #eee;
border: 1px solid #e5e5e5;
border-left: 8px solid #ddd;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
/* footnote link in text should be bold */
a[rel="footnote"] {
color: #FE580F !important;
font-weight: bold;
border-bottom: none;
padding: 3px;
}
/* move footnotes container down */
.footnotes {
margin: 2.5em 0 0.5em;
}
/* title of footnotes container */
.footnotes:before {
content: "FOOTNOTES:";
display: block;
font-weight: bold;
padding-bottom: 0.5em;
}
/* hide the */
.footnotes hr {
display: none;
}
/* target the footnote on click */
.footnotes li:target, sup:target {
background: #d7f3ff;
}
/* back to text link */
a[rev="footnote"] {
font-weight: bold;
border-bottom: none;
color: #FE580F !important;
}
/* back to text link (actual text) */
a[rev="footnote"]:after {
content: "Back to Text";
text-transform: uppercase;
font-size: 12px;
}
/* hover effects for footnotes */
a[rel="footnote"]:hover, a[rev="footnote"]:hover {
border-bottom: solid 1px #FE580F;
}
/* Menu */
#menu {
height: 60px;
font-size: 1.2em;
font-style: italic;
margin: 0 auto 4%;
max-width: 800px;
}
#menu:after {
content: "";
display: block;
clear: both;
}
#menu a {
border: none;
color: #FE580F;
display: inline;
padding: 16px 0.2%;
}
#menu a:hover {
color: #333;
}
#menu strong a {
color: #333;
}
#menu strong a:hover {
color: #FE580F;
}
#menu>:last-child:before, #menu>:nth-last-child(2):before {
content: "/ ";
color: #bbb !important;
margin: 0 0.8%;
}
#menu >:nth-child(2) {
padding-left: 1.5%;
}
/* Post & Page */
.archive-post {
margin: 0 auto 0;
max-width: 800px;
}
.archive-divider {
margin-top: 7%;
}
.archive-divider.divider_0 {
margin-top: 0 !important;
}
.archive-divider h2 {
font-size: 100px;
margin: 0 auto 4%;
width: 90%;
line-height: 1.17em;
padding: 0;
color: #222;
}
.archive-title h2 {
padding: 0 0 0.7em;
font-size: 1.4em;
}
.archive-title h2 a {
border: none !important;
}
h2 .date {
color: #bbb;
font-weight: normal;
font-size: 0.875em;
}
ul.tags {
width: 460px;
border-top: 1px solid #ccc;
margin: 20px 0;
padding: 20px 0;
}
ul.tags li {
list-style: none;
}
ul.tags li a {
margin: 0 15px 0 0;
float: left;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
/* Lists */
ul, ol {
margin-left: 1em;
padding: 0
}
/* move more to the right because of nubmers */
ol {
margin-left: 1.4em;
}
li {
color: #333;
margin: 0.5em 0;
padding-left: 14px;
}
ol li {
padding-left: 10px;
}
.more a {
width: 100%;
max-width: 800px;
margin: 2em auto;
display: block;
background: #FE580F;
padding: 1.4% 0 !important;
color: #fff !important;
text-align: center;
border-radius: 6px;
border: solid 1px #f34a00;
}
.more a:hover {
background: #f34a00;
}
/* FOOTER */
footer {
margin: 6em auto 0;
max-width: 800px;
font-size: 0.875em;
text-align: center;
padding-bottom: 2%;
}
.share-twitter {
margin-left: 18px;
}
.right {
margin-top: 1em;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.right:hover {
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.right a {
margin: 0 5px;
border: none !important;
}
.ppl a{
color:purple';
}
.ppl a:hover{
opacity:1;
-moz-opacity:1;
-khtml-opacity:1;
}
/* Disqus */
#dsq-global-toolbar, #dsq-pagination, #dsq-sort-by, #dsq-sort-select {display: none;}
.dsq-brlink {margin-left: 130px;}
#disqus-thread {font-family: georgia; width: 500px !important; margin-left: 130px !important;}
#dsq-content {width: 500px !important; margin-left: 130px !important;}
.dsq-textarea-reply {font-famyly: georgia;}
.dsq-textarea-background {background: #fff;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment