1
0
mirror of https://github.com/kirsle/kirsle.net synced 2024-12-21 22:49:28 +00:00

Add old web design archives

This commit is contained in:
Noah 2014-10-16 12:18:26 -07:00
parent 0c11a0ad83
commit 946552ed5a
147 changed files with 6680 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 615 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 381 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 619 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 348 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 B

View File

@ -0,0 +1,149 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cuvou.com</title>
<link rel="StyleSheet" type="text/css" media="screen" href="/designs/cosmos/screen.css">
</head>
<body>
<div class="cv-content-wrapper">
<div class="cv-content-eyecandy">
<div class="cv-content-topedge">
<div class="cv-content-brdrne"></div>
</div>
<div class="cv-content-left">
<div class="cv-content-right">
<div class="cv-content-botedge">
<div class="cv-content-brdrsw">
<div class="cv-content-brdrse">
<div class="cv-content-body">
<h1 class="top">Cuvou.com Cosmos</h1>
This was the final web design for Cuvou.com, after
<a href="/designs/storm">Storm</a> and before
<a href="/designs/solar">Kirsle.net Solar</a> (the first iteration, anyway).
<p>
<h2>Heading Level 2</h2>
Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Duis pede purus, ornare interdum, consequat in, dignissim vitae, nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare. Phasellus interdum,
sem vulputate commodo congue, augue nisl aliquet velit, eu volutpat justo ante vitae lacus. Donec pulvinar scelerisque nisl.
Donec viverra sem eu augue. Phasellus faucibus nulla nec lacus aliquam dapibus. Aliquam nibh ipsum, blandit sit amet, consequat
in, blandit et, massa. Quisque nec urna. Aliquam nec elit ut erat consectetuer feugiat. Suspendisse tincidunt purus vel diam
blandit sagittis. Sed vestibulum, dolor nec vehicula accumsan, purus leo congue risus, at dapibus massa lorem sit amet purus.<p>
Nullam et nulla. <a href="#">Fusce consectetuer</a>, ante et auctor egestas, mi mi eleifend lorem, quis pulvinar tellus est at ligula. Donec
pulvinar, nisl vitae tempor fermentum, massa nulla placerat neque, ac posuere enim enim facilisis velit. Phasellus et augue
et nisi placerat eleifend. Mauris quam lectus, consequat ut, rutrum vitae, elementum a, sem. Nam aliquam, metus et tincidunt
cursus, felis risus faucibus dolor, quis ultricies tellus justo sed ligula. Integer orci magna, cursus sed, eleifend a,
imperdiet vitae, nibh. Aenean mattis nisl at tortor. Integer diam elit, adipiscing vitae, mollis ac, aliquam et, elit. Etiam
hendrerit, diam non ultrices pellentesque, leo augue egestas mauris, at dictum nisl augue nec odio. Praesent condimentum.
Morbi semper tellus eget ipsum porta pellentesque.
<pre>Preformatted
T e x t . i</pre>
<h3>Heading Level 3</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pede purus, ornare interdum, consequat in, dignissim vitae, nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare. Phasellus interdum,
sem vulputate commodo congue, augue nisl aliquet velit, eu volutpat justo ante vitae lacus. Donec pulvinar scelerisque nisl.
Donec viverra sem eu augue. Phasellus faucibus nulla nec lacus aliquam dapibus. Aliquam nibh ipsum, blandit sit amet, consequat
in, blandit et, massa. Quisque nec urna. Aliquam nec elit ut erat consectetuer feugiat. Suspendisse tincidunt purus vel diam
blandit sagittis. Sed vestibulum, dolor nec vehicula accumsan, purus leo congue risus, at dapibus massa lorem sit amet purus.<p>
Nullam et nulla. Fusce consectetuer, ante et auctor egestas, mi mi eleifend lorem, quis pulvinar tellus est at ligula. Donec
pulvinar, nisl vitae tempor fermentum, massa nulla placerat neque, ac posuere enim enim facilisis velit. Phasellus et augue
et nisi placerat eleifend. Mauris quam lectus, consequat ut, rutrum vitae, elementum a, sem. Nam aliquam, metus et tincidunt
cursus, felis risus faucibus dolor, quis ultricies tellus justo sed ligula. Integer orci magna, cursus sed, eleifend a,
imperdiet vitae, nibh. Aenean mattis nisl at tortor. Integer diam elit, adipiscing vitae, mollis ac, aliquam et, elit. Etiam
hendrerit, diam non ultrices pellentesque, leo augue egestas mauris, at dictum nisl augue nec odio. Praesent condimentum.
Morbi semper tellus eget ipsum porta pellentesque.
<h4>Heading Level 4</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pede purus, ornare interdum, consequat in, dignissim vitae, nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare. Phasellus interdum,
sem vulputate commodo congue, augue nisl aliquet velit, eu volutpat justo ante vitae lacus. Donec pulvinar scelerisque nisl.
Donec viverra sem eu augue. Phasellus faucibus nulla nec lacus aliquam dapibus. Aliquam nibh ipsum, blandit sit amet, consequat
in, blandit et, massa. Quisque nec urna. Aliquam nec elit ut erat consectetuer feugiat. Suspendisse tincidunt purus vel diam
blandit sagittis. Sed vestibulum, dolor nec vehicula accumsan, purus leo congue risus, at dapibus massa lorem sit amet purus.<p>
Nullam et nulla. Fusce consectetuer, ante et auctor egestas, mi mi eleifend lorem, quis pulvinar tellus est at ligula. Donec
pulvinar, nisl vitae tempor fermentum, massa nulla placerat neque, ac posuere enim enim facilisis velit. Phasellus et augue
et nisi placerat eleifend. Mauris quam lectus, consequat ut, rutrum vitae, elementum a, sem. Nam aliquam, metus et tincidunt
cursus, felis risus faucibus dolor, quis ultricies tellus justo sed ligula. Integer orci magna, cursus sed, eleifend a,
imperdiet vitae, nibh. Aenean mattis nisl at tortor. Integer diam elit, adipiscing vitae, mollis ac, aliquam et, elit. Etiam
hendrerit, diam non ultrices pellentesque, leo augue egestas mauris, at dictum nisl augue nec odio. Praesent condimentum.
Morbi semper tellus eget ipsum porta pellentesque.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cv-starburst">
<div class="cv-logo">
<a href="#"><img src="/designs/cosmos/logo.jpg" width="403" height="145"></a>
</div>
</div>
<div class="cv-leftnav-wrapper">
<div class="cv-leftnav-panel">
<div class="cv-leftnav-body">
<div class="cv-nav-section">Cuvou.com</div>
&#0187; <a href="#">Homepage</a><br>
&#0187; <a href="#">About Me</a>
<div class="cv-nav-section">Nav Section</div>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a>
<div class="cv-nav-section">Nav Section</div>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a>
<div class="cv-nav-section">Nav Section</div>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a>
<div class="cv-nav-section">Nav Section</div>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a>
<div class="cv-nav-section">Nav Section</div>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a>
<div class="cv-nav-section">Nav Section</div>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a><br>
&#0187; <a href="#">Links</a>
</div>
</div>
<div class="cv-leftnav-foot"></div>
</div>
</body>
</html>

BIN
www/designs/cosmos/logo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -0,0 +1,268 @@
body {
background-color: #FFFFFF;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #000000;
}
a:link, a:visited {
color: #0000FF;
text-decoration: underline;
}
a:hover, a:active {
color: #FF0000
}
.cv-leftnav-body a:link, .cv-leftnav-body a:visited {
display: none
}
a img {
border: 0px
}
h1,h2,h3,h4 {
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-weight: bold;
color: #FFFFFF
}
h1.top, h2.top, h3.top, h4.top {
margin-top: 0px;
}
h1 {
margin-top: 0px;
font-size: 24pt
}
h2 {
font-size: 18pt
}
h3 {
font-size: 18pt;
font-style: italic
}
h4 {
font-size: 16pt;
font-style: italic
}
pre {
display: inline;
font-family: "Lucida Console","DejaVu LGC Sans Mono","DejaVu Sans Mono","Bistream Vera Sans Mono",monospace;
font-size: 10pt;
color: #006666
}
pre.notes {
/* No special styles needed */
}
code {
display: inline;
font-family: "Lucida Console","DejaVu LGC Sans Mono","DejaVu Sans Mono","Bistream Vera Sans Mono",monospace;
font-size: 9pt;
color: #006666
}
/* A logo for the printed page */
.logo-printed {
display: block;
text-align: center;
font-family: "Trebuchet MS","Verdana","Arial",sans-serif;
font-size: 36pt;
font-weight: bold;
border-bottom: 2px solid #000000;
margin-bottom: 24px
}
.logo-printed small {
font-size: 12pt
}
/* Copyright block */
.copyright {
text-align: center;
font-size: x-small;
font-weight: bold;
color: #000000;
margin-top: 50px
}
/******************************************************************************
* Software Design Styles *
******************************************************************************/
.distro {
border: 1px solid #CCCCCC
}
.distro th {
width: 150px;
text-align: center;
vertical-align: top
}
.distro td {
width: 150px;
text-align: center;
vertical-align: top;
border: 1px solid #808080
}
.distro td img {
float: left
}
.sw-tab-wrapper {
display: block
}
.sw-tab-top {
padding-left: 16px;
}
.sw-tab-frame {
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999
}
.sw-tab-content {
padding: 5px
}
.sw-tab-active {
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
margin-right: 10px
}
.sw-tab-normal {
border-top: 1px solid #666666;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
margin-right: 10px
}
.sw-tab-active span, .sw-tab-normal span {
padding-left: 4px;
padding-right: 4px
}
.sw-tab-active a:link, .sw-tab-active a:visited,
.sw-tab-normal a:link, .sw-tab-normal a:visited {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
font-weight: normal;
text-decoration: none;
}
/******************************************************************************
* Starburst CMS Mandated Style Classes for the Web Blog *
******************************************************************************/
.sblog-title {
display: block;
margin-bottom: 0px;
margin-top: 15px;
font-size: 24pt;
font-weight: bold
}
.sblog-title a:link, .sblog-title a:visited {
color: #000000;
text-decoration: none
}
.sblog-title a:hover, .sblog-title a:active {
color: #000000;
text-decoration: underline
}
/******************************************************************************
* Cuvou.com Web Design Styles *
******************************************************************************/
/*-------------------------------------*
* Background and Logo Styles *
*-------------------------------------*/
/* The main starburst BG image */
.cv-starburst {
display: none
}
/* The container for the logo */
.cv-logo {
display: none
}
/*-------------------------------------*
* Left Navigation Bar *
*-------------------------------------*/
/* The wrapper that holds the left navigation panel */
.cv-leftnav-wrapper {
display: none
}
/* This has the BG image for the top part of the nav bar */
.cv-leftnav-panel {
display: none
}
/* This div holds the actual text of the navigation bar */
.cv-leftnav-body {
display: none
}
/* This is the footer of the nav bar */
.cv-leftnav-foot {
display: none
}
/* Header sections on the navigation bar */
.cv-nav-section {
display: none
}
.subsection {
display: none
}
/*-------------------------------------*
* Main Content Panel *
*-------------------------------------*/
/* The overall wrapper for the content panel */
.cv-content-wrapper {
display: inline
}
/* Provide the eye candy background image */
.cv-content-eyecandy {
display: inline
}
/* Top edge of the window */
.cv-content-topedge {
display: inline
}
/* Abs positioned top right border corner */
.cv-content-brdrne {
display: inline
}
/* Provides the left border to the content area */
.cv-content-left {
display: inline
}
/* Adds the right border to the content area */
.cv-content-right {
display: inline
}
/* The wrapper for the actual body area */
.cv-content-body {
display: inline
}
/* Bottom edge of the window */
.cv-content-botedge {
display: inline
}
/* Abs position the bottom left border corner */
.cv-content-brdrsw {
display: inline
}
/* Abs position the bottom right border corner */
.cv-content-brdrse {
display: inline
}

View File

@ -0,0 +1,344 @@
body {
background-color: #000000;
background-image: url("starrysky.jpg");
background-repeat: repeat;
background-position: top left;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #CCCCCC;
margin: 0px;
margin-bottom: 20px
}
a:link, a:visited {
color: #99CCFF;
text-decoration: underline;
}
a:hover, a:active {
color: #FFCCFF
}
.cv-leftnav-body a:link, .cv-leftnav-body a:visited {
font-weight: bold;
font-size: x-small
}
a img {
border: 0px
}
h1,h2,h3,h4 {
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-weight: bold;
color: #FFFFFF
}
h1.top, h2.top, h3.top, h4.top {
margin-top: 0px;
}
h1 {
margin-top: 0px;
font-size: 24pt;
font-weight: bold
}
h2 {
font-size: 18pt
}
h3 {
font-size: 18pt;
font-style: italic
}
h4 {
font-size: 16pt;
font-style: italic
}
pre {
display: block;
border: 1px dashed #CCCCCC;
padding: 5px;
font-family: "Lucida Console","DejaVu LGC Sans Mono","DejaVu Sans Mono","Bistream Vera Sans Mono",monospace;
font-size: 10pt;
color: #00CCCC
}
pre.notes {
height: 300px;
overflow: auto
}
code {
display: inline;
font-family: "Lucida Console","DejaVu LGC Sans Mono","DejaVu Sans Mono","Bistream Vera Sans Mono",monospace;
font-size: 9pt;
color: #00CCCC
}
/* A logo for the printed page */
.logo-printed {
display: none
}
/* Copyright block */
.copyright {
text-align: center;
font-size: x-small;
font-weight: bold;
color: #999999;
margin-top: 50px
}
/******************************************************************************
* Software Design Styles *
******************************************************************************/
.distro {
border: 1px solid #CCCCCC
}
.distro th {
width: 150px;
text-align: center;
vertical-align: top
}
.distro td {
width: 150px;
text-align: center;
vertical-align: top;
border: 1px solid #808080
}
.distro td img {
float: left
}
.sw-tab-wrapper {
display: block
}
.sw-tab-top {
padding-left: 16px;
}
.sw-tab-frame {
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999
}
.sw-tab-content {
padding: 5px
}
.sw-tab-active {
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
margin-right: 10px
}
.sw-tab-normal {
border-top: 1px solid #666666;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
margin-right: 10px
}
.sw-tab-active span, .sw-tab-normal span {
padding-left: 4px;
padding-right: 4px
}
.sw-tab-active a:link, .sw-tab-active a:visited,
.sw-tab-normal a:link, .sw-tab-normal a:visited {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
font-weight: normal;
text-decoration: none;
}
/******************************************************************************
* Starburst CMS Mandated Style Classes for the Web Blog *
******************************************************************************/
.sblog-title {
display: block;
margin-bottom: 0px;
margin-top: 15px;
font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
font-size: 24pt;
font-weight: bold
}
.sblog-title a:link, .sblog-title a:visited {
color: #FFFFFF;
text-decoration: none
}
.sblog-title a:hover, .sblog-title a:active {
color: #FFFFFF;
text-decoration: underline
}
/******************************************************************************
* Cuvou.com Web Design Styles *
******************************************************************************/
/*-------------------------------------*
* Background and Logo Styles *
*-------------------------------------*/
/* The main starburst BG image */
.cv-starburst {
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
width: 750px;
height: 579px;
background-image: url("starburst.jpg");
background-repeat: no-repeat;
background-position: top left
}
/* The container for the logo */
.cv-logo {
z-index: 150;
position: absolute;
top: 0px;
left: 236px;
width: 403px;
height: 145px;
padding: 0px
}
/*-------------------------------------*
* Left Navigation Bar *
*-------------------------------------*/
/* The wrapper that holds the left navigation panel */
.cv-leftnav-wrapper {
z-index: 200;
position: absolute;
top: 159px;
left: 25px;
width: 174px
}
/* This has the BG image for the top part of the nav bar */
.cv-leftnav-panel {
width: 174px;
background-image: url("navbody.jpg");
background-repeat: repeat-y;
background-position: top left;
/* margin-bottom: 20px */
/* Adds some padding to the end of the bar */
}
/* This div holds the actual text of the navigation bar */
.cv-leftnav-body {
background-image: url("navtop.jpg");
background-repeat: no-repeat;
background-position: top left;
padding: 4px
}
/* This is the footer of the nav bar */
.cv-leftnav-foot {
background-image: url("navfoot.jpg");
background-repeat: no-repeat;
background-position: top left;
width: 174px;
height: 11px
}
/* Header sections on the navigation bar */
.cv-nav-section {
display: block;
text-align: center;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-size: 14pt;
color: #FFFFFF;
font-weight: bold;
border-bottom: 1px solid #FFFFFF
}
.subsection {
text-align: center;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-size: 10pt;
font-weight: bold;
border-bottom: 1px dashed #999999;
color: #CCCCCC
}
/*-------------------------------------*
* Main Content Panel *
*-------------------------------------*/
/* The overall wrapper for the content panel */
.cv-content-wrapper {
z-index: 300;
position: absolute;
top: 159px;
left: 224px;
right: 20px;
background-image: url("body-shadow.jpg");
background-repeat: repeat;
background-position: top left
}
/* Provide the eye candy background image */
.cv-content-eyecandy {
background-image: url("body-topleft.jpg");
background-repeat: no-repeat;
background-position: top left
}
/* Top edge of the window */
.cv-content-topedge {
height: 12px;
margin-left: 11px;
background-image: url("border-north.png");
background-repeat: repeat-x;
background-position: top left
}
/* Abs positioned top right border corner */
.cv-content-brdrne {
position: absolute;
top: 0px;
right: 0px;
width: 11px;
height: 12px;
background-image: url("border-ne.png");
background-repeat: no-repeat;
background-position: top left
}
/* Provides the left border to the content area */
.cv-content-left {
background-image: url("border-west.png");
background-repeat: repeat-y;
background-position: top left;
}
/* Adds the right border to the content area */
.cv-content-right {
background-image: url("border-east.png");
background-repeat: repeat-y;
background-position: top right;
}
/* The wrapper for the actual body area */
.cv-content-body {
padding-top: 0px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 8px;
}
/* Bottom edge of the window */
.cv-content-botedge {
background-image: url("border-south.png");
background-repeat: repeat-x;
background-position: bottom left
}
/* Abs position the bottom left border corner */
.cv-content-brdrsw {
background-image: url("border-sw.png");
background-repeat: no-repeat;
background-position: bottom left
}
/* Abs position the bottom right border corner */
.cv-content-brdrse {
background-image: url("border-se.png");
background-repeat: no-repeat;
background-position: bottom right
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

129
www/designs/index.html Normal file
View File

@ -0,0 +1,129 @@
{% extends "layout.html" %}
{% block title %}Error Message Generator{% endblock %}
{% block content %}
<h1>Web Design</h1>
Here you can find an archive of some past web designs used for my personal
website, in chronological order.<p>
<div class="row">
<div class="col-md-4 center">
<a href="/designs/lavender" target="_blank">
<img src="/designs/screenshots/lavender.t.png" alt="Lavender" class="portrait">
</a>
</div>
<div class="col-md-8">
<a href="/designs/lavender" target="_blank">Cuvou.com Lavender</a><p>
This was the first web design for Cuvou.com, which was the domain I was
using for my personal website somewhere around the year 2006.
</div>
</div>
<br>
<div class="row">
<div class="col-md-4 center">
<a href="/designs/starburst" target="_blank">
<img src="/designs/screenshots/starburst.t.png" alt="Starburst" class="portrait">
</a>
</div>
<div class="col-md-8">
<a href="/designs/starburst" target="_blank">Cuvou.com Starburst</a><p>
This was the second redesign for Cuvou.com. It featured lighter shades
of blue to improve the readability of the pages. I named it Starburst
both for the visual look of the theme, and because it was the name of
the Perl CMS I was programming to run Cuvou.com.
</div>
</div>
<br>
<div class="row">
<div class="col-md-4 center">
<a href="/designs/storm" target="_blank">
<img src="/designs/screenshots/storm.t.png" alt="Storm" class="portrait">
</a>
</div>
<div class="col-md-8">
<a href="/designs/storm" target="_blank">Cuvou.com Storm</a><p>
This was the third design. I didn't end up liking it very much and
quickly replaced it.
</div>
</div>
<br>
<div class="row">
<div class="col-md-4 center">
<a href="/designs/cosmos" target="_blank">
<img src="/designs/screenshots/cosmos.t.png" alt="Cosmos" class="portrait">
</a>
</div>
<div class="col-md-8">
<a href="/designs/cosmos" target="_blank">Cuvou.com Cosmos</a><p>
This was the final redesign for Cuvou.com and features an outer space
style theme, while still keeping the blue and pink color scheme.
</div>
</div>
<br>
<div class="row">
<div class="col-md-4 center">
<a href="/designs/solar" target="_blank">
<img src="/designs/screenshots/solar.t.png" alt="Solar" class="portrait">
</a>
</div>
<div class="col-md-8">
<a href="/designs/solar" target="_blank">Kirsle.net Solar</a><p>
This was the original "Solar" theme for Kirsle.net, which was the next
logical upgrade from the Cosmos theme. This first iteration used static,
flat images for every part of the design: though the design looks like
it has transparent backgrounds, they were actually pre-rendered, because
I wanted to support Internet Explorer 6 and it couldn't handle alpha
channels in PNG images.<p>
I actually lost my copy of this template and had to dig it up on
<a href="http://www.archive.org/">The Internet Archive</a> and piece it
back together.
</div>
</div>
<br>
<div class="row">
<div class="col-md-4 center">
<a href="/designs/solar-html5" target="_blank">
<img src="/designs/screenshots/solar-html5.t.png" alt="Solar HTML5" class="portrait">
</a>
</div>
<div class="col-md-8">
<a href="/designs/solar-html5" target="_blank">Kirsle.net Solar (HTML5)</a><p>
An HTML5/CSS3 refresh of the Kirsle.net Solar theme. I started using
CSS3 for the rounded panel borders and transparent PNGs for the panel
background colors, breaking compatibility with MSIE 6.0.<p>
This design went live on Kirsle.net on May 12, 2010.
<a href="/blog/entry/design-refresh">Relevant blog post</a>.
</div>
</div>
<br>
<div class="row">
<div class="col-md-4 center">
<a href="/designs/solar-bootstrap" target="_blank">
<img src="/designs/screenshots/solar-bootstrap.t.png" alt="Solar Bootstrap" class="portrait">
</a>
</div>
<div class="col-md-8">
<a href="/designs/solar-bootstrap" target="_blank">Kirsle.net Solar (Bootstrap)</a><p>
Another design refresh that uses Twitter Bootstrap as the layout engine,
improving compatibility with mobile browsers. This design went live on
October 15, 2014.
</div>
</div>
{% endblock %}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,208 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cuvou.com</title>
<link rel="StyleSheet" type="text/css" media="screen" href="/designs/lavender/screen.css">
<link rel="StyleSheet" type="text/css" media="print" href="/designs/lavender/print.css">
</head>
<body>
<div style="display: none">
<a href="aelita/"><small>Don't Click Here</small></a>
<a href="aelita/guestbook/"><small>.</small></a>
<a href="aelita/guestbook/post/"><small>.</small></a>
<a href="aelita/guestbook/contact/"><small>.</small></a>
<a href="aelita/guestbook/email/"><small>.</small></a>
<a href="aelita/guestbook/message/"><small>.</small></a>
</div>
<div class="leader">
<img src="/designs/lavender/cuvou.gif" alt="Cuvou">
</div>
<div class="navstrip">
<div class="navi">
<div class="navhead">Cuvou</div>
&#0187; <a href="#link?module=index">Homepage</a><br>
&#0187; <a href="#link?module=guestbook">Guestbook</a><br>
&#0187; <a href="#link?module=map">Site Map</a><br>
&#0187; <a href="#http://www.project-fearless.com/">Project Fearless</a>
<div class="navhead">Author</div>
&#0187; <a href="#link?module=cuvou">Biography</a><br>
&#0187; <a href="#link?module=pics">Pictures</a><br>
&#0187; <a href="#link?module=contact">Contact</a>
<div class="navhead">Creativity</div>
&#0187; <a href="#link?module=render">3D Rendered</a><br>
&#0187; <a href="#link?module=flash">Flash Animation</a><br>
&#0187; <a href="#link?module=fonts">TrueType Fonts</a><br>
&#0187; <a href="#link?module=philosophy">Philosophy</a>
<div class="navhead">Software</div>
&#0187; <a href="#link?module=distro">[Distro Help]</a><br>
&#0187; <a href="#link?module=pccc">CyanChat Client</a><br>
&#0187; <a href="#link?module=azulenc">Azulian Encoder</a><br>
&#0187; <a href="#link?module=errorgen">Error Generator</a><br>
&#0187; <a href="#link?module=tkcalc">Tk Calculator</a><br>
&#0187; <a href="#link?module=terminal">Terminal Apps</a><br>
&#0187; <a href="#link?module=metacity">Metacity</a><br>
&#0187; <a href="#link?module=apps">Misc. Apps</a>
<div class="navhead">Articles</div>
&#0187; <a href="#link?module=ubuntu">To Ubuntu</a><br>
&#0187; <a href="#link?module=acer">Aspire 5050</a>
<div class="navhead">Projects</div>
&#0187; <a href="#link?module=tkhtml">Tk HTML</a><br>
&#0187; <a href="#perlaim/dev.html">PerlAIM</a>
<div class="navhead">Web Tools</div>
&#0187; <a href="/wizards/translator.html">Azulian Web Enc.</a>
<div class="navhead">E-Mail</div>
&#0187; <a href="#http://mail.live.com">Check E-Mail</a><br>
&#0187; <a href="#https://domains.live.com/members/signup.aspx?domain=cuvou.net">Sign Up</a><p>
&#0187; <a href="#link?module=referer">HTTP Referrers</a><br>
&#0187; <a href="#link?module=agents">User Agents</a><br>
&#0187; <a href="#link?module=stats">File Popularity</a>
<div style="text-align: center">
<a href="http://validator.w3.org/check?uri=referer">
<img src="/designs/lavender/html.png" width="88" height="31" alt="HTML 4.01 Strict">
</a><br>
<a href="http://jigsaw.w3.org/css-validator/">
<img src="/designs/lavender/css.png" width="88" height="31" alt="Valid CSS">
</a><br>
<a href="http://www.perl.com/">
<img src="/designs/lavender/perl.png" width="88" height="31" alt="Powered by Perl">
</a><br>
<a href="http://www.fedoraproject.org/">
<img src="/designs/lavender/fedora.png" width="88" height="31" alt="Powered by Fedora">
</a>
</div>
</div>
</div>
<div class="wrapper">
<h1>Cuvou.com Lavender</h1>
This is the original web design for Cuvou.com, codenamed Lavender. This
design was later replaced with <a href="/designs/starburst">Starburst</a>.
<h1>Heading Level 1</h1>
And some text.
<h2>Heading Level 2</h2>
And more text.
<h3>Heading Level 3</h3>
And some more text.
<h4>Heading Level 4</h4>
And even more text.<p>
<pre>And
preformatted
text!</pre>
</div>
<p>&nbsp;
<div class="copyright">
All content on this website is original and is copyright &#0169; 2007 Casey Kirsle.<br>
Use content only with permission.
<p>&nbsp;
</div>
<script type="text/javascript">
/*
##########################################################
# Hyperlink Editor Script || Copyright 2007 Casey Kirsle #
#--------------------------------------------------------#
# This script makes all offsite links open in a new #
# window, and turns all e-mail links in the format of #
# "name-at-domain.com" into "name\@domain.com" #
#--------------------------------------------------------#
# Use content only with permission. Get permission from #
# casey "at" cuvou.org #
##########################################################
*/
// var localAddr = new Array();
// localAddr[0] = "cuvou.com";
// localAddr[1] = "www.cuvou.com";
// localAddr[2] = "cuvou.net";
// localAddr[3] = "www.cuvou.net";
// localAddr[4] = "cuvou.org";
// localAddr[5] = "www.cuvou.org";
// localAddr[6] = "upsilon.cuvou.com";
// if (document.getElementsByTagName) {
// var links = document.getElementsByTagName("a");
// for (var i = 0; i < links.length; i++) {
// var loc = links[i].href;
// var parts = loc.split ("/"); // http, null, domain name, request
// var prot = parts[0].split(":");
// var protocol = prot[0];
// protocol.toLowerCase;
// if (protocol == "http" || protocol == "https") {
// // This is an absolute URL.
// var isLocal = 0;
// for (var j = 0; j < localAddr.length; j++) {
// if (parts[2] == localAddr[j]) {
// isLocal = 1;
// }
// }
// if (isLocal == 1) {
// // Local links don't need to be modified.
// }
// else {
// // Remote links need to open in a new window.
// links[i].target = "_blank";
// }
// }
// else if (protocol == "mailto") {
// // MailTo link. See if this isn't a normal link.
// if (loc.indexOf("-at-") > -1) {
// var newhref = loc.split("-at-").join("@");
// links[i].href = newhref;
// // Convert it in the text too.
// if (links[i].innerHTML.indexOf("-at-") > -1) {
// var mailLabel = links[i].innerHTML.split("-at-");
// var newLabel = mailLabel.join ("@");
// links[i].innerHTML = newLabel;
// }
// }
// }
// else if (protocol == "msnim") {
// if (loc.indexOf("-at-") > -1) {
// var newhref = loc.split("-at-").join("@");
// links[i].href = newhref;
// // Convert it in the text too.
// if (links[i].innerHTML.indexOf("-at-") > -1) {
// var mailLabel = links[i].innerHTML.split("-at-");
// var newLabel = mailLabel.join ("@");
// links[i].innerHTML = newLabel;
// }
// }
// }
// }
// }
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,73 @@
body {
background-color: #FFFFFF;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #000000;
margin-left: 100px;
margin-top: 130px;
margin-right: 100px;
margin-bottom: 0px
}
a:link, a:visited, a:hover, a:active {
font-weight: bold;
color: #502000;
text-decoration: underline
}
a:link:after, a:visited:after, a:hover:after, a:active:after {
content: " (" attr(href) ") ";
font-size: smaller
}
h1 {
font-family: Arial,Helvetica,sans-serif;
font-size: 36pt;
font-weight: bold;
font-style: italic;
margin-bottom: 20px;
margin-top: 20px
}
h2 {
font-family: Arial,Helvetica,sans-serif;
font-size: 18pt;
font-weight: bold;
font-style: italic;
margin-bottom: 20px;
margin-top: 20px
}
pre {
font-family: "Courier New",Courier,monospace;
font-size: small;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #000000;
display: block;
padding: 2px
}
.leader {
display: none
}
.printleader {
position: absolute;
left: 100px;
right: 100px;
top: 30px;
text-align: center;
border-bottom: 2px solid #000000
}
.navstrip {
display: none
}
.navi {
display: none
}
.navhead {
display: none
}
.copyright {
text-align: center;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: smaller;
font-weight: bold
}
.wrapper {
display: inline
}

View File

@ -0,0 +1,123 @@
body {
background-image: url(starburst.jpg);
background-repeat: no-repeat;
background-color: #0099FF;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #000000;
margin-left: 220px;
margin-top: 130px;
margin-right: 25px;
margin-bottom: 0px
}
a:link, a:visited {
font-weight: bold;
color: #FFFFFF;
text-decoration: none
}
a:hover, a:active {
font-weight: bold;
color: #FFFFFF;
text-decoration: underline
}
a:link img, a:visited img, a:hover img, a:active img {
border: 0px
}
img.left {
float: left
}
img.right {
float: right
}
.center {
text-align: center
}
h1 {
font-family: Arial,Helvetica,sans-serif;
font-size: 36pt;
font-weight: bold;
font-style: italic;
margin-bottom: 20px;
margin-top: 20px
}
h2 {
font-family: Arial,Helvetica,sans-serif;
font-size: 24pt;
font-weight: bold;
font-style: italic;
margin-bottom: 20px;
margin-top: 20px
}
h3 {
font-family: Arial,Helvetica,sans-serif;
font-size: 14pt;
font-weight: bold;
margin-bottom: 20px;
margin-top: 20px
}
pre {
font-family: "Courier New",Courier,monospace;
font-size: small;
color: #000000;
background-color: #EEEEFF;
border: 1px solid #000000;
display: block;
padding: 2px
}
pre.notes {
height: 300px;
overflow: auto
}
.leader {
position: absolute;
left: 300px;
top: 30px;
}
.printleader {
display: none
}
.navstrip {
position: absolute;
left: 31px;
top: 129px;
width: 150px;
background-image: url(navbg.png);
background-repeat: repeat-y;
border-bottom: 3px solid #036BB2
}
.navi {
background-image: url(navi.png);
background-repeat: repeat-x;
color: #FFFFFF;
padding: 5px
}
.navhead {
font-family: Arial,Helvetica,sans-serif;
text-align: center;
font-weight: bold;
font-size: large;
color: #00FFFF;
border-bottom: 1px solid #00FFFF;
margin-left: 20px;
margin-right: 20px
}
.copyright {
text-align: center;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: smaller;
font-weight: bold
}
.wrapper {
display: inline
}
.dltab {
width: 700px;
border: 1px solid #000000
}
.dltab th {
width: 25%
}
.dltab td {
border: 1px solid #000000;
width: 25%
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 802 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,82 @@
/* Syntax highlighting classes for markdown codehilite plugin, which uses
Pygments. This file was generated by doing this in the Python shell:
>>> from pygments.formatters import HtmlFormatter
>>> fh = open("codehilite.css", "w")
>>> fh.write(HtmlFormatter().get_style_defs(".codehilite"))
>>> fh.close()
*/
.codehilite .hll { background-color: #ffffcc }
.codehilite { background: #f8f8f8; }
.codehilite .c { color: #408080; font-style: italic } /* Comment */
.codehilite .err { border: 1px solid #FF0000 } /* Error */
.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
.codehilite .o { color: #666666 } /* Operator */
.codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */
.codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */
.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .gr { color: #FF0000 } /* Generic.Error */
.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.codehilite .gi { color: #00A000 } /* Generic.Inserted */
.codehilite .go { color: #888888 } /* Generic.Output */
.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.codehilite .gt { color: #0044DD } /* Generic.Traceback */
.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.codehilite .kt { color: #B00040 } /* Keyword.Type */
.codehilite .m { color: #666666 } /* Literal.Number */
.codehilite .s { color: #BA2121 } /* Literal.String */
.codehilite .na { color: #7D9029 } /* Name.Attribute */
.codehilite .nb { color: #008000 } /* Name.Builtin */
.codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */
.codehilite .no { color: #880000 } /* Name.Constant */
.codehilite .nd { color: #AA22FF } /* Name.Decorator */
.codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */
.codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
.codehilite .nf { color: #0000FF } /* Name.Function */
.codehilite .nl { color: #A0A000 } /* Name.Label */
.codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
.codehilite .nv { color: #19177C } /* Name.Variable */
.codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
.codehilite .mf { color: #666666 } /* Literal.Number.Float */
.codehilite .mh { color: #666666 } /* Literal.Number.Hex */
.codehilite .mi { color: #666666 } /* Literal.Number.Integer */
.codehilite .mo { color: #666666 } /* Literal.Number.Oct */
.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
.codehilite .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
.codehilite .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
.codehilite .sx { color: #008000 } /* Literal.String.Other */
.codehilite .sr { color: #BB6688 } /* Literal.String.Regex */
.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
.codehilite .vc { color: #19177C } /* Name.Variable.Class */
.codehilite .vg { color: #19177C } /* Name.Variable.Global */
.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */
/* Dark theme overrides --Kirsle */
.codehilite { background-color: transparent }
.codehilite .nf { color: #0099FF }
.codehilite .sd { color: #FF99FF }
.codehilite .s { color: #FF4400 }
.codehilite .nv { color: #0099FF }
.codehilite .sx,
.codehilite .k,
.codehilite .nb { color: #00BB00 }
.codehilite .nn { color: #00CCCC }

Binary file not shown.

After

Width:  |  Height:  |  Size: 805 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1005 B

View File

@ -0,0 +1,266 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Solar Bootstrap - Kirsle.net</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="/designs/solar-bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/designs/solar-bootstrap/bootstrap-theme.min.css">
<!-- Kirsle.net Solar -->
<link rel="stylesheet" type="text/css" media="screen" href="/designs/solar-bootstrap/ui.css">
<link rel="stylesheet" type="text/css" media="print" href="/designs/solar-bootstrap/print.css">
<link rel="stylesheet" type="text/css" href="/designs/solar-bootstrap/monokai.css">
<link rel="stylesheet" type="text/css" href="/designs/solar-bootstrap/vim-syntax.css">
<link rel="alternate" type="application/rss+xml" title="Kirsle's RSS Feed" href="/blog/rss">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="mobile-nav">
<a href="#navbar" class="btn btn-primary"><i class="glyphicon glyphicon-list"></i></a>
</div>
<div class="k-supernova"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-3">
<div class="k-kirsle" onclick="self.location='/'"></div>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-sm-push-2">
<div class="k-content-panel">
<h1>Kirsle.net Solar (Bootstrap)</h1>
This is another design refresh for Kirsle.net Solar that uses Twitter
Bootstrap as its layout engine, making it work better on mobile. Resize
the browser window and see how the site reacts.<p>
This design went live on Kirsle.net on October 15, 2014. It replaced
the previous version of the <a href="/designs/solar-html5">Solar</a> theme.
<h2>Heading Level 2</h2>
Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Duis pede purus, ornare interdum, consequat in, dignissim vitae, nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare. Phasellus interdum,
sem vulputate commodo congue, augue nisl aliquet velit, eu volutpat justo ante vitae lacus. Donec pulvinar scelerisque nisl.
Donec viverra sem eu augue. Phasellus faucibus nulla nec lacus aliquam dapibus. Aliquam nibh ipsum, blandit sit amet, consequat
in, blandit et, massa. Quisque nec urna. Aliquam nec elit ut erat consectetuer feugiat. Suspendisse tincidunt purus vel diam
blandit sagittis. Sed vestibulum, dolor nec vehicula accumsan, purus leo congue risus, at dapibus massa lorem sit amet purus.<p>
Nullam et nulla. <a href="#">Fusce consectetuer</a>, ante et auctor egestas, mi mi eleifend lorem, quis pulvinar tellus est at ligula. Donec
pulvinar, nisl vitae tempor fermentum, massa nulla placerat neque, ac posuere enim enim facilisis velit. Phasellus et augue
et nisi placerat eleifend. Mauris quam lectus, consequat ut, rutrum vitae, elementum a, sem. Nam aliquam, metus et tincidunt
cursus, felis risus faucibus dolor, quis ultricies tellus justo sed ligula. Integer orci magna, cursus sed, eleifend a,
imperdiet vitae, nibh. Aenean mattis nisl at tortor. Integer diam elit, adipiscing vitae, mollis ac, aliquam et, elit. Etiam
hendrerit, diam non ultrices pellentesque, leo augue egestas mauris, at dictum nisl augue nec odio. Praesent condimentum.
Morbi semper tellus eget ipsum porta pellentesque.
<pre>Preformatted
T e x t . i</pre>
<h3>Heading Level 3</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pede purus, ornare interdum, consequat in, dignissim vitae, nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare. Phasellus interdum,
sem vulputate commodo congue, augue nisl aliquet velit, eu volutpat justo ante vitae lacus. Donec pulvinar scelerisque nisl.
Donec viverra sem eu augue. Phasellus faucibus nulla nec lacus aliquam dapibus. Aliquam nibh ipsum, blandit sit amet, consequat
in, blandit et, massa. Quisque nec urna. Aliquam nec elit ut erat consectetuer feugiat. Suspendisse tincidunt purus vel diam
blandit sagittis. Sed vestibulum, dolor nec vehicula accumsan, purus leo congue risus, at dapibus massa lorem sit amet purus.<p>
Nullam et nulla. Fusce consectetuer, ante et auctor egestas, mi mi eleifend lorem, quis pulvinar tellus est at ligula. Donec
pulvinar, nisl vitae tempor fermentum, massa nulla placerat neque, ac posuere enim enim facilisis velit. Phasellus et augue
et nisi placerat eleifend. Mauris quam lectus, consequat ut, rutrum vitae, elementum a, sem. Nam aliquam, metus et tincidunt
cursus, felis risus faucibus dolor, quis ultricies tellus justo sed ligula. Integer orci magna, cursus sed, eleifend a,
imperdiet vitae, nibh. Aenean mattis nisl at tortor. Integer diam elit, adipiscing vitae, mollis ac, aliquam et, elit. Etiam
hendrerit, diam non ultrices pellentesque, leo augue egestas mauris, at dictum nisl augue nec odio. Praesent condimentum.
Morbi semper tellus eget ipsum porta pellentesque.
<h4>Heading Level 4</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pede purus, ornare interdum, consequat in, dignissim vitae, nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare. Phasellus interdum,
sem vulputate commodo congue, augue nisl aliquet velit, eu volutpat justo ante vitae lacus. Donec pulvinar scelerisque nisl.
Donec viverra sem eu augue. Phasellus faucibus nulla nec lacus aliquam dapibus. Aliquam nibh ipsum, blandit sit amet, consequat
in, blandit et, massa. Quisque nec urna. Aliquam nec elit ut erat consectetuer feugiat. Suspendisse tincidunt purus vel diam
blandit sagittis. Sed vestibulum, dolor nec vehicula accumsan, purus leo congue risus, at dapibus massa lorem sit amet purus.<p>
Nullam et nulla. Fusce consectetuer, ante et auctor egestas, mi mi eleifend lorem, quis pulvinar tellus est at ligula. Donec
pulvinar, nisl vitae tempor fermentum, massa nulla placerat neque, ac posuere enim enim facilisis velit. Phasellus et augue
et nisi placerat eleifend. Mauris quam lectus, consequat ut, rutrum vitae, elementum a, sem. Nam aliquam, metus et tincidunt
cursus, felis risus faucibus dolor, quis ultricies tellus justo sed ligula. Integer orci magna, cursus sed, eleifend a,
imperdiet vitae, nibh. Aenean mattis nisl at tortor. Integer diam elit, adipiscing vitae, mollis ac, aliquam et, elit. Etiam
hendrerit, diam non ultrices pellentesque, leo augue egestas mauris, at dictum nisl augue nec odio. Praesent condimentum.
Morbi semper tellus eget ipsum porta pellentesque.
<div class="k-copyright">
Copyright &copy; 2014 Noah Petherbridge &mdash; All rights reserved<br>
Powered by <a href="http://rophako.kirsle.net/" target="_blank">Rophako</a> v0.01 -
Hosted by <a href="#">DigitalOcean</a><br>
Page generated in 0.001s.
</div>
</div>
</div>
<div class="col-sm-2 col-sm-pull-10">
<div class="k-navpanel">
<a name="navbar"></a>
<div class="k-section">Kirsle</div>
<ul>
<li>&#0187; <a href="#/">Homepage</a> (<a href="#">RSS</a>)</li>
<li>&#0187; <a href="#/about">About Me</a></li>
<li>&#0187; <a href="#/photos/albums">Photo Albums</a></li>
<li>&#0187; <a href="#/guestbook">Guestbook</a></li>
<li>&#0187; <a href="#/contact">Contact Me</a></li>
</ul>
<div class="k-section">Channels</div>
<ul>
<li>&#0187; <a href="#">Blog Archives</a></li>
</ul>
<div class="k-section">Creativity</div>
<ul>
<li>&#0187; <a href="#/rendering">3D Renderings</a></li>
<li>&#0187; <a href="#/flash">Flash Animation</a></li>
<li>&#0187; <a href="#/javascript">JavaScript</a></li>
<li>&#0187; <a href="#/fonts">Fonts</a></li>
<li>&#0187; <a href="#/metacity">Metacity</a></li>
<li>&#0187; <a href="#/doc/">Tutorials</a></li>
<li>&#0187; <a href="#/designs">Web Design</a></li>
</ul>
<div class="k-section">Software</div>
<ul>
<li>&#0187; <a href="#/rivescript">RiveScript</a></li>
<li>&#0187; <a href="#/errorgen">Error Generator</a></li>
<li>&#0187; <a href="#/tkcalc">Tk Calculator</a></li>
<li>&#0187; <a href="#http://sh.kirsle.net/" target="_blank">Terminal Apps</a></li>
<li>&#0187; <a href="#/pccc">CyanChat Client</a></li>
</ul>
<div class="k-section">Web Tools</div>
<ul>
<li>&#0187; <a href="#/wizards/ttf2eot.cgi">TTF to EOT</a></li>
<li>&#0187; <a href="#/wizards/ps1.html">Base $PS1 Prompt</a></li>
<li>&#0187; <a href="#/wizards/fader.cgi">Text Fader</a></li>
<li>&#0187; <a href="#/wizards/favicon.cgi">Favicons</a></li>
<li>&#0187; <a href="#/wizards/distance.cgi">Distance Calc</a></li>
<li>&#0187; <a href="#/wizards/translator.html">Azulian Translater</a></li>
<li>&#0187; <a href="#/wizards/xbmask.cgi">XBM Masks</a></li>
<li>&#0187; <a href="#/wizards/flask-session.py">Flask Session</a></li>
</ul>
<div class="k-section">Subdomains</div>
<ul>
<li>&#0187; <a href="#http://sh.kirsle.net/">Shell Scripts</a></li>
<li>&#0187; <a href="#http://rpm.kirsle.net/">Linux RPMs</a></li>
<li>&#0187; <a href="#http://rophako.kirsle.net/">Rophako CMS</a></li>
<li>&#0187; <a href="#http://nano.kirsle.net/">Kirsle::Nano</a></li>
<li>&#0187; <a href="#http://mc.kirsle.net/">Minecraft Server</a></li>
</ul>
<div class="k-section">Miscellany</div>
<ul>
<li>&#0187; <a href="#/firered">Pok&#0233;mon Fuchsia City</a></li>
<li>&#0187; <a href="#/msdos">DOS and Windows</a></li>
<li>&#0187; <a href="#/raspberrypi">Raspberry Pi</a></li>
</ul>
<div class="k-section">Links</div>
<ul>
<li>&#0187; <a href="#https://www.google.com/+NoahPetherbridge">Google+</a></li>
<li>&#0187; <a href="#https://twitter.com/kirsle">Twitter</a></li>
<li>&#0187; <a href="#https://myspace.com/kirsle">MySpace</a></li>
<li>&#0187; <a href="#https://github.com/kirsle">Github</a></li>
<li>&#0187; <a href="#http://search.cpan.org/~kirsle">CPAN</a></li>
<li>&#0187; <a href="#https://www.npmjs.org/~kirsle">npm</a></li>
</ul>
<div class="k-section">Fan Club</div>
<ul>
<li>&#0187; <a href="#" class="login-link">Log In</a></li>
</ul>
<div class="center">
<a href="https://www.python.org/" target="_blank">
<img src="/designs/solar-bootstrap/python.png" width="80" height="15" alt="Python powered">
</a><br>
<a href="http://validator.w3.org/check?uri=referer">
<img src="/designs/solar-bootstrap/html5.png" width="80" height="15" alt="W3C Valid HTML5">
</a><br>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.kirsle.com/solar/screen.css">
<img src="/designs/solar-bootstrap/css3.png" width="80" height="15" alt="W3C Valid CSS3">
</a><p>
<a href="#" target="_blank">
<img src="/designs/solar-bootstrap/digital-ocean.png" width="140" height="39" alt="Proudly hosted by DigitalOcean">
</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/designs/solar-bootstrap/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/designs/solar-bootstrap/offsite.js"></script>
<script type="text/javascript" src="/designs/solar-bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".login-link").click(function() {
$("#login-link").hide();
$("#login-inline").show(500);
return false;
});
});
</script>
{% block scripts %}{% endblock %}
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-27498092-1', 'kirsle.net');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u=(("https:" == document.location.protocol) ? "https" : "http") + "://www.kirsle.net/piwik/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript';
g.defer=true; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="http://www.kirsle.net/piwik/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
</body>
</html>

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

View File

@ -0,0 +1,52 @@
/* Monokai Bright highlight theme, converted from
* http://tmtheme-editor.herokuapp.com/#/theme/Monokai%20Bright
* Using: https://github.com/davinche/pygments-from-tmtheme
*/
.codehilite { background-color: #272822; color: #F8F8F2; }
.codehilite .ge { font-style: italic; }
.codehilite .gs { font-weight: bold; }
.codehilite .c { color: #75715E; }
.codehilite .cp { color: #75715E; }
.codehilite .c1 { color: #75715E; }
.codehilite .cs { color: #75715E; }
.codehilite .cm { color: #75715E; }
.codehilite .m { color: #AE81FF; }
.codehilite .mf { color: #AE81FF; }
.codehilite .mi { color: #AE81FF; }
.codehilite .mo { color: #AE81FF; }
.codehilite .se { color: #AE81FF; }
.codehilite .kc { color: #AE81FF; }
.codehilite .k { color: #66D9EF; font-style: italic; }
.codehilite .kd { color: #66D9EF; font-style: italic; }
.codehilite .kn { color: #F92672; }
.codehilite .kt { color: #66D9EF; font-style: italic; }
.codehilite .s { color: #E6DB74; }
.codehilite .sb { color: #E6DB74; }
.codehilite .sc { color: #E6DB74; }
.codehilite .sd { color: #E6DB74; }
.codehilite .s2 { color: #E6DB74; }
.codehilite .sh { color: #E6DB74; }
.codehilite .si { color: #E6DB74; }
.codehilite .sx { color: #E6DB74; }
.codehilite .sr { color: #E6DB74; }
.codehilite .s1 { color: #E6DB74; }
.codehilite .ss { color: #E6DB74; }
.codehilite .na { color: #A6E22E; }
.codehilite .nc { color: #A6E22E; font-style: italic; text-decoration: underline; }
.codehilite .no { color: #AE81FF; }
.codehilite .nd { color: #A6E22E; text-decoration: underline; }
.codehilite .ne { color: #A6E22E; text-decoration: underline; }
.codehilite .nf { color: #A6E22E; }
.codehilite .nt { color: #F92672; }
.codehilite .nv { color: #F8F8F2; }
.codehilite .ow { color: #F92672; }
.codehilite .o { color: #F92672; }
.codehilite .n { color: #F8F8F2; }
.codehilite .nl { color: #F8F8F2; }
.codehilite .nn { color: #F8F8F2; }
.codehilite .nx { color: #F8F8F2; }
.codehilite .bp { color: #F8F8F2; }
.codehilite .p { color: #F8F8F2; }
/* Kirsle.net overrides */
.codehilite { background-color: transparent }

View File

@ -0,0 +1,20 @@
/*
* Hyperlink Editor Script || Copyright 2014 Kirsle
*
* This script makes all offsite links open in a new window.
*/
$(document).ready(function() {
$("a").each(function() {
var $a = $(this);
var href = $a.attr("href");
if (href === undefined) {
return;
}
// Detect offsite links.
if (href.indexOf("http:") == 0 || href.indexOf("https:") == 0) {
$a.attr("target", "_blank");
}
});
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1,246 @@
body {
background-color: #FFFFFF;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #000000;
margin: 0px;
padding: 0px
}
a:link, a:visited {
color: #0000FF;
text-decoration: underline
}
a:hover, a:active {
color: #0000FF
}
a img {
border: 0px
}
h1,h2,h3,h4 {
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold
}
h1 {
font-size: 32pt;
padding-top: 15px;
padding-bottom: 15px;
}
h1:first-of-type {
padding-top: 0px;
}
h2 {
font-size: 24pt
}
h3 {
font-size: 18pt
}
h4 {
font-size: 16pt
}
pre,code {
font-family: "Lucida Console","DejaVu LGC Sans Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
font-size: 9pt;
color: #000000
}
pre {
display: block;
border: 1px dashed #000000;
padding: 10px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
overflow-x: auto
}
code {
display: inline
}
label {
cursor: pointer
}
legend {
color: #000000;
font-weight: bold
}
table,th,td {
border-color: #999999
}
table.box {
border: 1px solid #999999
}
/* Bootstrap overrides */
.col-md-4.col-md-offset-3 {
/* Left nav, hide it */
display: none;
}
.col-sm-10.col-sm-push-2 {
/* Main body column */
left: 0;
width: 100%;
}
/*******************************************************************************
* General CSS Classes *
******************************************************************************/
.center {
margin: auto;
text-align: center
}
.right {
margin-left: auto;
margin-right: 0px;
text-align: right
}
.invisible {
display: none
}
/*******************************************************************************
* Styles Needed by Specific Pages in the CMS *
******************************************************************************/
/* Downloads */
.distro {
border: 1px solid #CCCCCC
}
.distro th {
width: 150px;
text-align: center;
vertical-align: top
}
.distro td {
width: 150px;
text-align: center;
vertical-align: top;
border: 1px solid #808080
}
.distro td img {
float: left
}
/********
* Blog *
*******/
/* Blog titles when shown on index view */
a.blog-title-index:link, a.blog-title-index:visited {
font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
font-size: 32pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none
}
a.blog-title-index:hover, a.blog-title-index:active {
text-decoration: underline
}
/* Poster's avatar box */
.blog-author, .comment-author {
float: right;
background-color: #444444;
border: 1px solid #CCCCCC;
padding: 2px;
margin-left: 10px;
margin-bottom: 10px;
width: 100px; /* 96 avatar width + 4px padding */
text-align: center;
font-weight: bold
}
/* Timestamp and author line below blog titles */
.blog-timestamp {
font-size: smaller;
font-style: italic;
padding-left: 30px;
padding-top: 5px;
padding-bottom: 10px
}
ul.blog-categories {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
ul.blog-categories li {
display: inline;
}
ul.blog-categories li:after {
content: ", ";
}
ul.blog-categories li:last-child:after {
content: "";
}
/* Blog comment wrapper */
.comment {
border: 1px dashed #006699;
padding: 5px
}
/*******************************************************************************
* Supernova Website Design Classes - Copyright 2009 Casey Kirsle - Kirsle.com *
******************************************************************************/
/*************
* Eye Candy *
************/
.k-supernova {
/* Main BG image */
display: none
}
.k-kirsle {
/* Kirsle logo */
display: none
}
/********************
* Navigation Panel *
*******************/
.k-navpanel {
/* Wrapper for nav bar */
display: none
}
.k-section {
/* Division of navigation bar */
}
.k-navi {
/* Stretches of hyperlinks inside the nav bar */
}
/* Hyperlinks inside the nav bar */
.k-navi a:link, .k-navi a:visited {
}
/*********************
* Main Content Area *
********************/
.k-content-panel {
/* Wrapper for the content panel */
display: inline;
margin-left: 25px;
margin-right: 25px
}
.k-copyright {
/* Copyright text */
text-align: center;
font-size: x-small;
color: #000000;
font-weight: bold;
padding: 20px 0px
}
.k-space {
background-image: url("space.png");
background-repeat: repeat;
background-position: 0px 0px;
height: 50px
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 767 B

View File

@ -0,0 +1,494 @@
body {
background-color: #000000;
background-image: url("space.png");
background-repeat: repeat;
background-position: 0px 0px;
background-attachment: fixed;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #BEBEBE;
margin: 0px;
padding: 0px
}
a:link, a:visited {
color: #99CCFF;
text-decoration: underline
}
a:hover, a:active {
color: #FFCCFF
}
a img {
border: 0px
}
h1,h2,h3,h4 {
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0px 0px 10px #0099FF;
-moz-text-shadow: 0px 0px 10px #0099FF;
-webkit-text-shadow: 0px 0px 10px #0099FF
}
h1 {
font-size: 32pt;
padding-top: 15px;
padding-bottom: 15px;
}
h1:first-of-type {
padding-top: 0px;
}
h2 {
font-size: 24pt
}
h3 {
font-size: 18pt
}
h4 {
font-size: 16pt
}
pre,code {
font-family: "Lucida Console","DejaVu LGC Sans Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
font-size: 9pt;
color: #00CCCC
}
pre {
display: block;
border: 1px dashed #CCCCCC;
padding: 10px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
max-height: 550px;
overflow: auto
}
code {
display: inline
}
label {
cursor: pointer
}
fieldset {
border: 1px solid #006699;
}
legend {
color: #0099FF;
font-weight: bold
}
table.box {
border: 1px solid #999999
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
textarea,
input[type="file"],
select { /* To hell with IE */
background-color: #000000;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #CCCCCC;
border-top: 1px solid #666666;
border-left: 1px solid #666666;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC
}
acronym,abbr {
border-bottom: 1px dotted #BEBEBE;
cursor: help;
}
/*******************************************************************************
* General CSS Classes *
******************************************************************************/
.center {
margin: auto;
text-align: center
}
.right {
margin-left: auto;
margin-right: 0px;
text-align: right
}
.invisible {
display: none
}
.clear {
clear: both;
}
table.table,
table.table th,
table.table td {
border: 1px solid #999999;
}
table.table {
border-collapse: collapse;
border-spacing: 0;
margin: 10px 0px;
padding: 0px;
}
table.table-wide {
width: 100%;
}
table.table th {
background-color: #003366;
color: #FFFFFF;
text-align: left;
padding: 4px;
}
table.table tr:nth-child(even) {
background-color: #000000;
}
table.table tr:nth-child(odd) {
background-color: #202020;
}
table.table td {
padding: 4px;
vertical-align: top;
text-align: left;
}
/*******************************************************************************
* Styles Needed by Specific Pages in the CMS *
******************************************************************************/
/* Downloads */
.distro {
border: 1px solid #CCCCCC
}
.distro th {
width: 150px;
text-align: center;
vertical-align: top
}
.distro td {
width: 150px;
text-align: center;
vertical-align: top;
border: 1px solid #808080
}
.distro td img {
float: left
}
/**********
* Photos *
**********/
/* Photo Upload page */
.photo-upload-dropbox {
border: 2px dashed #0099FF;
padding: 40px;
}
.photo-upload-dropbox.active {
border: 4px dashed #FF99FF;
}
.upload-trough {
position: relative;
border: 1px solid #000000;
width: 100%;
height: 28px;
}
.upload-progress-bar {
position: relative;
width: 0%;
height: 100%;
background-color: #FF9900;
}
/* Photo Grids: see http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
ul.photo-grid {
list-style: none;
display: inline;
margin: 0;
padding: 0;
position: relative;
}
ul.photo-grid li {
position: relative;
/*float: left;*/
display: inline-block;
width: 260px;
height: 260px;
margin-left: 20px;
margin-top: 20px;
}
ul.photo-grid li .dummy {
padding-top: 100%;
}
.photo-grid-item {
cursor: pointer;
overflow: hidden; /* Crop off long names, etc. */
/* We use absolute positioning to detach this element from the flow, */
/* allowing the .dummy to dictate the height of the square. */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.photo-grid-item img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.photo-grid-item .name {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
font-family: Arial,Helvetica,sans-serif;
font-size: 14pt;
font-weight: bold;
color: #FFFFFF;
text-align: left;
text-shadow: 1px 1px 0px #000000,
-1px -1px 0px #000000,
1px -1px 0px #000000,
-1px 1px 0px #000000;
}
.photo-description {
display: block;
border: 1px solid #FF99FF;
box-shadow: 0px 0px 4px #0099FF;
padding: 10px;
margin: 20px 0px;
background-color: #000000;
width: 790px;
}
/*ul#arrange-photos {
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul#arrange-photos li {
cursor: pointer;
margin: 20px;
padding: 1px;
float: left;
width: 150px;
}*/
/********
* Blog *
*******/
/* Blog titles when shown on index view */
a.blog-title-index:link, a.blog-title-index:visited {
font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
font-size: 32pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
text-shadow: 0px 0px 10px #0099FF;
-moz-text-shadow: 0px 0px 10px #0099FF;
-webkit-text-shadow: 0px 0px 10px #0099FF
}
a.blog-title-index:hover, a.blog-title-index:active {
text-decoration: underline;
text-shadow: 0px 0px 10px #FF99FF;
-moz-text-shadow: 0px 0px 10px #FF99FF;
-webkit-text-shadow: 0px 0px 10px #FF99FF
}
/* Poster's avatar box */
.blog-author, .comment-author {
float: right;
background-color: #444444;
border: 1px solid #CCCCCC;
padding: 2px;
margin-left: 10px;
margin-bottom: 10px;
width: 100px; /* 96 avatar width + 4px padding */
text-align: center;
font-weight: bold
}
.blog-author a, .comment-author a {
text-decoration: none;
}
div.siikir-avatar {
width: 96px;
margin: auto;
}
/* Timestamp and author line below blog titles */
.blog-timestamp {
font-size: smaller;
font-style: italic;
padding-left: 30px;
padding-top: 5px;
padding-bottom: 10px
}
ul.blog-categories {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
ul.blog-categories li {
display: inline;
}
ul.blog-categories li:after {
content: ", ";
}
ul.blog-categories li:last-child:after {
content: "";
}
/* Blog comment wrapper */
.comment {
border: 1px dashed #006699;
padding: 5px
}
/*******************************************************************************
* Supernova Website Design Classes - Copyright 2009 Casey Kirsle - Kirsle.com *
******************************************************************************/
/* Make a photo look nice. */
.portrait {
display: inline;
background-color: #CFCFCF;
padding: 4px;
border: 1px solid #000000;
box-shadow: 0px 0px 4px #0099FF;
-moz-box-shadow: 0px 0px 4px #0099FF;
-webkit-box-shadow: 0px 0px 4px #0099FF;
}
/*************
* Eye Candy *
************/
.k-supernova {
/* Main BG image */
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
width: 960px;
height: 1000px;
background-image: url("supernova.jpg");
background-repeat: no-repeat;
background-position: 0px 0px
}
.k-kirsle {
/* Kirsle logo */
position: absolute;
z-index: 150;
top: 9px;
left: 433px;
width: 317px;
height: 177px;
background-image: url("kirsle.png");
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer
}
/********************
* Navigation Panel *
*******************/
.k-navpanel {
/* Wrapper for nav bar */
background-image: url("panelbg.png");
background-repeat: repeat-y;
background-position: 0px 0px;
position: absolute;
z-index: 200;
top: 203px;
left: 57px;
width: 152px;
border: 2px ridge #0099FF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px
}
.k-section {
/* Division of navigation bar */
display: block;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-size: 14pt;
font-weight: bold;
text-align: center;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
margin-left: 2px;
margin-right: 2px;
padding: 0px;
text-shadow: 0px 0px 10px #0099FF;
-moz-text-shadow: 0px 0px 10px #0099FF;
-webkit-text-shadow: 0px 0px 10px #0099FF
}
.k-navi {
/* Stretches of hyperlinks inside the nav bar */
padding-left: 4px;
padding-right: 4px;
font-size: x-small;
line-height: 160%
}
/* Hyperlinks inside the nav bar */
.k-navi a:link, .k-navi a:visited {
font-size: x-small;
font-weight: bold
}
/*********************
* Main Content Area *
********************/
.k-content-panel {
/* Wrapper for the content panel */
background-image: url("panelbg.png");
background-repeat: repeat;
background-position: 0px 0px;
z-index: 300;
position: absolute;
top: 203px;
left: 262px;
right: 40px;
padding: 6px;
border: 2px ridge #0099FF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px
}
.k-copyright {
/* Copyright text */
text-align: center;
font-size: x-small;
color: #999999;
font-weight: bold;
padding: 20px 0px
}
.k-space {
background-image: url("space.png");
background-repeat: repeat;
background-position: 0px 0px;
height: 50px
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

View File

@ -0,0 +1,531 @@
body {
background-color: #000000;
background-image: url("space.png");
background-repeat: repeat;
background-position: 0px 0px;
background-attachment: fixed;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #BEBEBE;
margin: 0px;
padding: 0px
}
a:link, a:visited {
color: #99CCFF;
text-decoration: underline
}
a:hover, a:active {
color: #FFCCFF
}
a img {
border: 0px
}
h1,h2,h3,h4 {
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0px 0px 10px #0099FF;
-moz-text-shadow: 0px 0px 10px #0099FF;
-webkit-text-shadow: 0px 0px 10px #0099FF
}
h1 {
font-size: 32pt;
padding-top: 15px;
padding-bottom: 15px;
}
h1:first-of-type {
padding-top: 0px;
}
h2 {
font-size: 24pt
}
h3 {
font-size: 18pt
}
h4 {
font-size: 16pt
}
pre,code {
font-family: "Lucida Console","DejaVu LGC Sans Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
font-size: 9pt;
color: #00CCCC;
background-color: transparent;
}
pre {
display: block;
border: 1px dashed #CCCCCC;
padding: 10px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
max-height: 550px;
overflow: auto
}
code {
display: inline;
padding: 0
}
label {
cursor: pointer
}
legend {
color: #0099FF;
}
table.box {
border: 1px solid #999999
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
textarea,
input[type="file"],
select { /* To hell with IE */
background-color: #000000 !important;
font-family: Verdana,Arial,Helvetica,sans-serif !important;
font-size: small !important;
color: #CCCCCC !important;
margin: 2px 0px;
max-width: 400px;
}
acronym,abbr {
border-bottom: 1px dotted #BEBEBE;
cursor: help;
}
/* Some bootstrap override helpers */
.input-lg {
max-width: none !important;
width: 650px;
}
.input-sm {
width: 4em;
}
.form-control.inline {
display: inline;
}
/* Bootstrap CSS overrides */
p {
margin: 10px 0px;
}
/* Our own custom nav button for Bootstrap */
.mobile-nav {
display: none; /* for small screens only */
position: absolute;
z-index: 100;
top: 10px;
right: 10px;
}
@media (max-width: 768px) {
.mobile-nav {
display: block;
}
}
/*******************************************************************************
* General CSS Classes *
******************************************************************************/
.center {
margin: auto;
text-align: center
}
.right {
margin-left: auto;
margin-right: 0px;
text-align: right
}
.invisible {
display: none
}
.clear {
clear: both;
}
table.table,
table.table th,
table.table td {
border: 1px solid #999999;
}
table.table {
border-collapse: collapse;
border-spacing: 0;
margin: 10px 0px;
padding: 0px;
}
table.table-wide {
width: 100%;
}
table.table th {
background-color: #003366;
color: #FFFFFF;
text-align: left;
padding: 4px;
}
table.table tr:nth-child(even) {
background-color: #000000;
}
table.table tr:nth-child(odd) {
background-color: #202020;
}
table.table td {
padding: 4px;
vertical-align: top;
text-align: left;
}
/*******************************************************************************
* Styles Needed by Specific Pages in the CMS *
******************************************************************************/
/* Downloads */
.distro {
border: 1px solid #CCCCCC
}
.distro th {
width: 150px;
text-align: center;
vertical-align: top
}
.distro td {
width: 150px;
text-align: center;
vertical-align: top;
border: 1px solid #808080
}
.distro td img {
float: left
}
/**********
* Photos *
**********/
/* Photo Upload page */
.photo-upload-dropbox {
border: 2px dashed #0099FF;
padding: 40px;
}
.photo-upload-dropbox.active {
border: 4px dashed #FF99FF;
}
.upload-trough {
position: relative;
border: 1px solid #000000;
width: 100%;
height: 28px;
}
.upload-progress-bar {
position: relative;
width: 0%;
height: 100%;
background-color: #FF9900;
}
/* Photo Grids: see http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
ul.photo-grid {
list-style: none;
display: inline;
margin: 0;
padding: 0;
position: relative;
}
ul.photo-grid li {
position: relative;
/*float: left;*/
display: inline-block;
width: 260px;
height: 260px;
margin-left: 20px;
margin-top: 20px;
}
ul.photo-grid li .dummy {
padding-top: 100%;
}
.photo-grid-item {
cursor: pointer;
overflow: hidden; /* Crop off long names, etc. */
/* We use absolute positioning to detach this element from the flow, */
/* allowing the .dummy to dictate the height of the square. */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.photo-grid-item img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.photo-grid-item .name {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
font-family: Arial,Helvetica,sans-serif;
font-size: 14pt;
font-weight: bold;
color: #FFFFFF;
text-align: left;
text-shadow: 1px 1px 0px #000000,
-1px -1px 0px #000000,
1px -1px 0px #000000,
-1px 1px 0px #000000;
}
.photo-description {
display: block;
border: 1px solid #FF99FF;
box-shadow: 0px 0px 4px #0099FF;
padding: 10px;
margin: 20px 0px;
background-color: #000000;
width: 790px;
}
/*ul#arrange-photos {
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul#arrange-photos li {
cursor: pointer;
margin: 20px;
padding: 1px;
float: left;
width: 150px;
}*/
/********
* Blog *
*******/
/* Blog titles when shown on index view */
a.blog-title-index:link, a.blog-title-index:visited {
font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
font-size: 32pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
text-shadow: 0px 0px 10px #0099FF;
-moz-text-shadow: 0px 0px 10px #0099FF;
-webkit-text-shadow: 0px 0px 10px #0099FF
}
a.blog-title-index:hover, a.blog-title-index:active {
text-decoration: underline;
text-shadow: 0px 0px 10px #FF99FF;
-moz-text-shadow: 0px 0px 10px #FF99FF;
-webkit-text-shadow: 0px 0px 10px #FF99FF
}
/* Poster's avatar box */
.blog-author, .comment-author {
float: right;
background-color: #444444;
border: 1px solid #CCCCCC;
padding: 2px;
margin-left: 10px;
margin-bottom: 10px;
width: 100px; /* 96 avatar width + 4px padding */
text-align: center;
font-weight: bold
}
.blog-author a, .comment-author a {
text-decoration: none;
}
div.siikir-avatar {
width: 96px;
margin: auto;
}
/* Timestamp and author line below blog titles */
.blog-timestamp {
font-size: smaller;
font-style: italic;
padding-left: 30px;
padding-top: 5px;
padding-bottom: 10px
}
ul.blog-categories {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
ul.blog-categories li {
display: inline;
}
ul.blog-categories li:after {
content: ", ";
}
ul.blog-categories li:last-child:after {
content: "";
}
/* Blog comment wrapper */
.comment {
border: 1px dashed #006699;
padding: 5px
}
/*******************************************************************************
* Supernova Website Design Classes - Copyright 2009 Casey Kirsle - Kirsle.com *
******************************************************************************/
/* Make a photo look nice. */
.portrait {
display: inline;
background-color: #CFCFCF;
padding: 4px;
border: 1px solid #000000;
box-shadow: 0px 0px 4px #0099FF;
-moz-box-shadow: 0px 0px 4px #0099FF;
-webkit-box-shadow: 0px 0px 4px #0099FF;
}
/*************
* Eye Candy *
************/
.k-supernova {
/* Main BG image */
position: absolute;
z-index: -100;
top: 0;
left: 0;
width: 960px;
height: 1000px;
background-image: url("supernova.jpg");
background-repeat: no-repeat;
background-position: 0 0;
}
@media (min-width: 768px) {
.k-supernova {
position: fixed;
}
}
.k-kirsle {
/* Kirsle logo */
width: 317px;
height: 177px;
background-image: url("kirsle.png");
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer
}
/********************
* Navigation Panel *
*******************/
.k-navpanel {
/* Wrapper for nav bar */
background-image: url("panelbg.png");
background-repeat: repeat;
background-position: 0px 0px;
/* width and margins to have some control over the nav bar size
despite bootstrap's grid system */
max-width: 152px;
min-width: 130px;
margin-left: auto;
margin-right: auto;
border: 2px ridge #0099FF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px
}
.k-navpanel > .k-section {
/* Division of navigation bar */
display: block;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-size: 14pt;
font-weight: bold;
text-align: center;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding: 0px;
text-shadow: 0px 0px 10px #0099FF;
-moz-text-shadow: 0px 0px 10px #0099FF;
-webkit-text-shadow: 0px 0px 10px #0099FF
}
.k-navpanel ul {
/* Stretches of hyperlinks inside the nav bar */
list-style: none;
margin: 0 4px;
padding-left: 1em;
text-indent: -1em;
font-size: x-small;
line-height: 160%
}
.k-navpanel a:link, .k-navpanel a:visited {
/* Hyperlinks inside the nav bar */
font-size: x-small;
font-weight: bold
}
/*********************
* Main Content Area *
********************/
.k-content-panel {
/* Wrapper for the content panel */
background-image: url("panelbg.png");
background-repeat: repeat;
background-position: 0px 0px;
z-index: 300;
padding: 6px;
border: 2px ridge #0099FF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px
}
.k-copyright {
/* Copyright text */
text-align: center;
font-size: x-small;
color: #999999;
font-weight: bold;
padding: 20px 0px
}
.k-space {
background-image: url("space.png");
background-repeat: repeat;
background-position: 0px 0px;
height: 50px
}
/* Simplify panels for mobile */
@media (max-width: 768px) {
.k-navpanel, .k-content-panel {
background-image: none;
background-color: #000000;
}
}

View File

@ -0,0 +1,29 @@
/* CSS classes used by vim syntax highlighting */
pre.vim {
background-color: #000000;
color: #FFFFFF;
max-height: 450px;
overflow: auto;
}
pre.vim span.Identifier {
color: #00FFFF;
font-weight: bold;
}
pre.vim span.Constant {
color: #FF99FF;
font-weight: bold;
}
pre.vim span.Statement {
color: #FFFF00;
font-weight: bold;
}
pre.vim span.Comment {
color: #0099FF;
font-weight: bold;
}
pre.vim span.PreProc {
color: #8080FF;
font-weight: bold;
}

View File

@ -0,0 +1,82 @@
/* Syntax highlighting classes for markdown codehilite plugin, which uses
Pygments. This file was generated by doing this in the Python shell:
>>> from pygments.formatters import HtmlFormatter
>>> fh = open("codehilite.css", "w")
>>> fh.write(HtmlFormatter().get_style_defs(".codehilite"))
>>> fh.close()
*/
.codehilite .hll { background-color: #ffffcc }
.codehilite { background: #f8f8f8; }
.codehilite .c { color: #408080; font-style: italic } /* Comment */
.codehilite .err { border: 1px solid #FF0000 } /* Error */
.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
.codehilite .o { color: #666666 } /* Operator */
.codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */
.codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */
.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .gr { color: #FF0000 } /* Generic.Error */
.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.codehilite .gi { color: #00A000 } /* Generic.Inserted */
.codehilite .go { color: #888888 } /* Generic.Output */
.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.codehilite .gt { color: #0044DD } /* Generic.Traceback */
.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.codehilite .kt { color: #B00040 } /* Keyword.Type */
.codehilite .m { color: #666666 } /* Literal.Number */
.codehilite .s { color: #BA2121 } /* Literal.String */
.codehilite .na { color: #7D9029 } /* Name.Attribute */
.codehilite .nb { color: #008000 } /* Name.Builtin */
.codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */
.codehilite .no { color: #880000 } /* Name.Constant */
.codehilite .nd { color: #AA22FF } /* Name.Decorator */
.codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */
.codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
.codehilite .nf { color: #0000FF } /* Name.Function */
.codehilite .nl { color: #A0A000 } /* Name.Label */
.codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
.codehilite .nv { color: #19177C } /* Name.Variable */
.codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
.codehilite .mf { color: #666666 } /* Literal.Number.Float */
.codehilite .mh { color: #666666 } /* Literal.Number.Hex */
.codehilite .mi { color: #666666 } /* Literal.Number.Integer */
.codehilite .mo { color: #666666 } /* Literal.Number.Oct */
.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
.codehilite .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
.codehilite .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
.codehilite .sx { color: #008000 } /* Literal.String.Other */
.codehilite .sr { color: #BB6688 } /* Literal.String.Regex */
.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
.codehilite .vc { color: #19177C } /* Name.Variable.Class */
.codehilite .vg { color: #19177C } /* Name.Variable.Global */
.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */
/* Dark theme overrides --Kirsle */
.codehilite { background-color: transparent }
.codehilite .nf { color: #0099FF }
.codehilite .sd { color: #FF99FF }
.codehilite .s { color: #FF4400 }
.codehilite .nv { color: #0099FF }
.codehilite .sx,
.codehilite .k,
.codehilite .nb { color: #00BB00 }
.codehilite .nn { color: #00CCCC }

Binary file not shown.

After

Width:  |  Height:  |  Size: 805 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1005 B

View File

@ -0,0 +1,196 @@
<!DOCTYPE html>
<html>
<head>
<title>Solar Theme - Kirsle.net</title>
<link rel="stylesheet" type="text/css" media="screen" href="/designs/solar-html5/screen.css">
<link rel="stylesheet" type="text/css" href="/designs/solar-html5/monokai.css">
<link rel="stylesheet" type="text/css" media="print" href="/designs/solar-html5/print.css">
<link rel="stylesheet" type="text/css" media="all" href="/designs/solar-html5/vim-syntax.css">
<link rel="alternate" type="application/rss+xml" title="Kirsle's RSS Feed" href="/blog/rss">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="k-supernova"></div>
<div class="k-kirsle" onClick="self.location='/'"></div>
<div class="k-content-panel">
<h1>Kirsle.net Solar (HTML5)</h1>
This was the HTML5 refresh of the Kirsle.net Solar theme, which went live
on Kirsle.net on May 12, 2010. It updates the design to use CSS3 rounded
borders and alpha transparency PNG images, making the design a lot more
flexible but cutting out support for Internet Explorer 6.0.<p>
This design was a replacement for the original,
<a href="/designs/solar">flat Solar theme</a>, and was itself later upgraded
to use Bootstrap to <a href="/designs/solar-bootstrap">support mobile
browsers</a>.
<h2>Heading Level 2</h2>
Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Duis pede purus, ornare interdum, consequat in, dignissim vitae, nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare. Phasellus interdum,
sem vulputate commodo congue, augue nisl aliquet velit, eu volutpat justo ante vitae lacus. Donec pulvinar scelerisque nisl.
Donec viverra sem eu augue. Phasellus faucibus nulla nec lacus aliquam dapibus. Aliquam nibh ipsum, blandit sit amet, consequat
in, blandit et, massa. Quisque nec urna. Aliquam nec elit ut erat consectetuer feugiat. Suspendisse tincidunt purus vel diam
blandit sagittis. Sed vestibulum, dolor nec vehicula accumsan, purus leo congue risus, at dapibus massa lorem sit amet purus.<p>
Nullam et nulla. <a href="#">Fusce consectetuer</a>, ante et auctor egestas, mi mi eleifend lorem, quis pulvinar tellus est at ligula. Donec
pulvinar, nisl vitae tempor fermentum, massa nulla placerat neque, ac posuere enim enim facilisis velit. Phasellus et augue
et nisi placerat eleifend. Mauris quam lectus, consequat ut, rutrum vitae, elementum a, sem. Nam aliquam, metus et tincidunt
cursus, felis risus faucibus dolor, quis ultricies tellus justo sed ligula. Integer orci magna, cursus sed, eleifend a,
imperdiet vitae, nibh. Aenean mattis nisl at tortor. Integer diam elit, adipiscing vitae, mollis ac, aliquam et, elit. Etiam
hendrerit, diam non ultrices pellentesque, leo augue egestas mauris, at dictum nisl augue nec odio. Praesent condimentum.
Morbi semper tellus eget ipsum porta pellentesque.
<pre>Preformatted
T e x t . i</pre>
<h3>Heading Level 3</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pede purus, ornare interdum, consequat in, dignissim vitae, nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare. Phasellus interdum,
sem vulputate commodo congue, augue nisl aliquet velit, eu volutpat justo ante vitae lacus. Donec pulvinar scelerisque nisl.
Donec viverra sem eu augue. Phasellus faucibus nulla nec lacus aliquam dapibus. Aliquam nibh ipsum, blandit sit amet, consequat
in, blandit et, massa. Quisque nec urna. Aliquam nec elit ut erat consectetuer feugiat. Suspendisse tincidunt purus vel diam
blandit sagittis. Sed vestibulum, dolor nec vehicula accumsan, purus leo congue risus, at dapibus massa lorem sit amet purus.<p>
Nullam et nulla. Fusce consectetuer, ante et auctor egestas, mi mi eleifend lorem, quis pulvinar tellus est at ligula. Donec
pulvinar, nisl vitae tempor fermentum, massa nulla placerat neque, ac posuere enim enim facilisis velit. Phasellus et augue
et nisi placerat eleifend. Mauris quam lectus, consequat ut, rutrum vitae, elementum a, sem. Nam aliquam, metus et tincidunt
cursus, felis risus faucibus dolor, quis ultricies tellus justo sed ligula. Integer orci magna, cursus sed, eleifend a,
imperdiet vitae, nibh. Aenean mattis nisl at tortor. Integer diam elit, adipiscing vitae, mollis ac, aliquam et, elit. Etiam
hendrerit, diam non ultrices pellentesque, leo augue egestas mauris, at dictum nisl augue nec odio. Praesent condimentum.
Morbi semper tellus eget ipsum porta pellentesque.
<h4>Heading Level 4</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pede purus, ornare interdum, consequat in, dignissim vitae, nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare. Phasellus interdum,
sem vulputate commodo congue, augue nisl aliquet velit, eu volutpat justo ante vitae lacus. Donec pulvinar scelerisque nisl.
Donec viverra sem eu augue. Phasellus faucibus nulla nec lacus aliquam dapibus. Aliquam nibh ipsum, blandit sit amet, consequat
in, blandit et, massa. Quisque nec urna. Aliquam nec elit ut erat consectetuer feugiat. Suspendisse tincidunt purus vel diam
blandit sagittis. Sed vestibulum, dolor nec vehicula accumsan, purus leo congue risus, at dapibus massa lorem sit amet purus.<p>
Nullam et nulla. Fusce consectetuer, ante et auctor egestas, mi mi eleifend lorem, quis pulvinar tellus est at ligula. Donec
pulvinar, nisl vitae tempor fermentum, massa nulla placerat neque, ac posuere enim enim facilisis velit. Phasellus et augue
et nisi placerat eleifend. Mauris quam lectus, consequat ut, rutrum vitae, elementum a, sem. Nam aliquam, metus et tincidunt
cursus, felis risus faucibus dolor, quis ultricies tellus justo sed ligula. Integer orci magna, cursus sed, eleifend a,
imperdiet vitae, nibh. Aenean mattis nisl at tortor. Integer diam elit, adipiscing vitae, mollis ac, aliquam et, elit. Etiam
hendrerit, diam non ultrices pellentesque, leo augue egestas mauris, at dictum nisl augue nec odio. Praesent condimentum.
Morbi semper tellus eget ipsum porta pellentesque.
<div class="k-copyright">
Copyright &copy; 2014 Noah Petherbridge &mdash; All rights reserved<br>
Powered by <a href="http://rophako.kirsle.net/" target="_blank">Rophako</a> v0.01 -
Hosted by <a href="#">DigitalOcean</a><br>
Page generated in 0.001s.
</div>
</div>
<div class="k-navpanel">
<div class="k-section">Kirsle</div>
<div class="k-navi">
&#0187; <a href="#/">Homepage</a> (<a href="#">RSS</a>)<br>
&#0187; <a href="#/about">About Me</a><br>
&#0187; <a href="#/photos/albums">Photo Albums</a><br>
&#0187; <a href="#/guestbook">Guestbook</a><br>
&#0187; <a href="#/contact">Contact Me</a>
</div>
<div class="k-section">Channels</div>
<div class="k-navi">
&#0187; <a href="#">Blog Archives</a>
</div>
<div class="k-section">Creativity</div>
<div class="k-navi">
&#0187; <a href="#/rendering">3D Renderings</a><br>
&#0187; <a href="#/flash">Flash Animation</a><br>
&#0187; <a href="#/javascript">JavaScript</a><br>
&#0187; <a href="#/fonts">Fonts</a><br>
&#0187; <a href="#/metacity">Metacity</a><br>
&#0187; <a href="#/doc/">Tutorials</a>
</div>
<div class="k-section">Software</div>
<div class="k-navi">
&#0187; <a href="#/rivescript">RiveScript</a><br>
&#0187; <a href="#/errorgen">Error Generator</a><br>
&#0187; <a href="#/tkcalc">Tk Calculator</a><br>
&#0187; <a href="#http://sh.kirsle.net/" target="_blank">Terminal Apps</a><br>
&#0187; <a href="#/pccc">CyanChat Client</a>
</div>
<div class="k-section">Web Tools</div>
<div class="k-navi">
&#0187; <a href="#/wizards/ttf2eot.cgi">TTF to EOT</a><br>
&#0187; <a href="#/wizards/ps1.html">Bash $PS1 Prompt</a><br>
&#0187; <a href="#/wizards/fader.cgi">Text Fader</a><br>
&#0187; <a href="#/wizards/favicon.cgi">Favicons</a><br>
&#0187; <a href="#/wizards/distance.cgi">Distance Calc</a><br>
&#0187; <a href="#/wizards/translator.html">Azulian Encoder</a><br>
&#0187; <a href="#/wizards/xbmask.cgi">XBM Masks</a><br>
&#0187; <a href="#/wizards/flask-session.py">Flask Session</a>
</div>
<div class="k-section">Subdomains</div>
<div class="k-navi">
&#0187; <a href="#http://sh.kirsle.net/" target="_blank">Shell Scripts</a><br>
&#0187; <a href="#http://rpm.kirsle.net/" target="_blank">Linux RPMs</a><br>
&#0187; <a href="#http://rophako.kirsle.net/" target="_blank">Rophako CMS</a><br>
&#0187; <a href="#http://nano.kirsle.net/" target="_blank">Kirsle::Nano</a><br>
&#0187; <a href="#http://minecraft.kirsle.net/" target="_blank">Minecraft Server</a>
</div>
<div class="k-section">Miscellany</div>
<div class="k-navi">
&#0164; <a href="#/firered">Pokemon Fuchsia City</a><br>
&#0164; <a href="#/msdos">DOS and Windows</a><br>
&#0164; <a href="#/raspberrypi">Raspberry Pi</a>
</div>
<div class="k-section">Links</div>
<div class="k-navi">
&#0164; <a href="#https://www.google.com/+NoahPetherbridge">Google+</a><br>
&#0164; <a href="#https://twitter.com/kirsle">Twitter</a><br>
&#0164; <a href="#https://myspace.com/kirsle">MySpace</a><br>
&#0164; <a href="#https://github.com/kirsle">Github</a><br>
&#0164; <a href="#http://search.cpan.org/~kirsle">CPAN</a><br>
&#0164; <a href="#https://www.npmjs.org/~kirsle">npm</a>
</div>
<div class="k-section">Fan Club</div>
<div class="k-navi">
&#0187; <a href="#" class="login-link">Log In</a>
</div><p>
<div class="k-navi">
<div class="center">
<a href="https://www.python.org/" target="_blank">
<img src="/designs/solar-html5/python.png" width="80" height="15" alt="Python powered">
</a><br>
<a href="http://validator.w3.org/check?uri=referer">
<img src="/designs/solar-html5/html5.png" width="80" height="15" alt="W3C Valid HTML5">
</a><br>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.kirsle.com/solar/screen.css">
<img src="/designs/solar-html5/css3.png" width="80" height="15" alt="W3C Valid CSS3">
</a><p>
<a href="#" target="_blank">
<img src="/designs/solar-html5/digital-ocean.png" width="140" height="39" alt="Proudly hosted by DigitalOcean">
</a>
</div>
</div>
</div>
<script type="text/javascript" src="/designs/solar-html5/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/designs/solar-html5/offsite.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

View File

@ -0,0 +1,52 @@
/* Monokai Bright highlight theme, converted from
* http://tmtheme-editor.herokuapp.com/#/theme/Monokai%20Bright
* Using: https://github.com/davinche/pygments-from-tmtheme
*/
.codehilite { background-color: #272822; color: #F8F8F2; }
.codehilite .ge { font-style: italic; }
.codehilite .gs { font-weight: bold; }
.codehilite .c { color: #75715E; }
.codehilite .cp { color: #75715E; }
.codehilite .c1 { color: #75715E; }
.codehilite .cs { color: #75715E; }
.codehilite .cm { color: #75715E; }
.codehilite .m { color: #AE81FF; }
.codehilite .mf { color: #AE81FF; }
.codehilite .mi { color: #AE81FF; }
.codehilite .mo { color: #AE81FF; }
.codehilite .se { color: #AE81FF; }
.codehilite .kc { color: #AE81FF; }
.codehilite .k { color: #66D9EF; font-style: italic; }
.codehilite .kd { color: #66D9EF; font-style: italic; }
.codehilite .kn { color: #F92672; }
.codehilite .kt { color: #66D9EF; font-style: italic; }
.codehilite .s { color: #E6DB74; }
.codehilite .sb { color: #E6DB74; }
.codehilite .sc { color: #E6DB74; }
.codehilite .sd { color: #E6DB74; }
.codehilite .s2 { color: #E6DB74; }
.codehilite .sh { color: #E6DB74; }
.codehilite .si { color: #E6DB74; }
.codehilite .sx { color: #E6DB74; }
.codehilite .sr { color: #E6DB74; }
.codehilite .s1 { color: #E6DB74; }
.codehilite .ss { color: #E6DB74; }
.codehilite .na { color: #A6E22E; }
.codehilite .nc { color: #A6E22E; font-style: italic; text-decoration: underline; }
.codehilite .no { color: #AE81FF; }
.codehilite .nd { color: #A6E22E; text-decoration: underline; }
.codehilite .ne { color: #A6E22E; text-decoration: underline; }
.codehilite .nf { color: #A6E22E; }
.codehilite .nt { color: #F92672; }
.codehilite .nv { color: #F8F8F2; }
.codehilite .ow { color: #F92672; }
.codehilite .o { color: #F92672; }
.codehilite .n { color: #F8F8F2; }
.codehilite .nl { color: #F8F8F2; }
.codehilite .nn { color: #F8F8F2; }
.codehilite .nx { color: #F8F8F2; }
.codehilite .bp { color: #F8F8F2; }
.codehilite .p { color: #F8F8F2; }
/* Kirsle.net overrides */
.codehilite { background-color: transparent }

View File

@ -0,0 +1,20 @@
/*
* Hyperlink Editor Script || Copyright 2014 Kirsle
*
* This script makes all offsite links open in a new window.
*/
$(document).ready(function() {
$("a").each(function() {
var $a = $(this);
var href = $a.attr("href");
if (href === undefined) {
return;
}
// Detect offsite links.
if (href.indexOf("http:") == 0 || href.indexOf("https:") == 0) {
$a.attr("target", "_blank");
}
});
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1,235 @@
body {
background-color: #FFFFFF;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #000000;
margin: 0px;
padding: 0px
}
a:link, a:visited {
color: #0000FF;
text-decoration: underline
}
a:hover, a:active {
color: #0000FF
}
a img {
border: 0px
}
h1,h2,h3,h4 {
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold
}
h1 {
font-size: 32pt;
padding-top: 15px;
padding-bottom: 15px;
}
h1:first-of-type {
padding-top: 0px;
}
h2 {
font-size: 24pt
}
h3 {
font-size: 18pt
}
h4 {
font-size: 16pt
}
pre,code {
font-family: "Lucida Console","DejaVu LGC Sans Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
font-size: 9pt;
color: #000000
}
pre {
display: block;
border: 1px dashed #000000;
padding: 10px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
overflow-x: auto
}
code {
display: inline
}
label {
cursor: pointer
}
legend {
color: #000000;
font-weight: bold
}
table,th,td {
border-color: #999999
}
table.box {
border: 1px solid #999999
}
/*******************************************************************************
* General CSS Classes *
******************************************************************************/
.center {
margin: auto;
text-align: center
}
.right {
margin-left: auto;
margin-right: 0px;
text-align: right
}
.invisible {
display: none
}
/*******************************************************************************
* Styles Needed by Specific Pages in the CMS *
******************************************************************************/
/* Downloads */
.distro {
border: 1px solid #CCCCCC
}
.distro th {
width: 150px;
text-align: center;
vertical-align: top
}
.distro td {
width: 150px;
text-align: center;
vertical-align: top;
border: 1px solid #808080
}
.distro td img {
float: left
}
/********
* Blog *
*******/
/* Blog titles when shown on index view */
a.blog-title-index:link, a.blog-title-index:visited {
font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
font-size: 32pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none
}
a.blog-title-index:hover, a.blog-title-index:active {
text-decoration: underline
}
/* Poster's avatar box */
.blog-author, .comment-author {
float: right;
background-color: #444444;
border: 1px solid #CCCCCC;
padding: 2px;
margin-left: 10px;
margin-bottom: 10px;
width: 100px; /* 96 avatar width + 4px padding */
text-align: center;
font-weight: bold
}
/* Timestamp and author line below blog titles */
.blog-timestamp {
font-size: smaller;
font-style: italic;
padding-left: 30px;
padding-top: 5px;
padding-bottom: 10px
}
ul.blog-categories {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
ul.blog-categories li {
display: inline;
}
ul.blog-categories li:after {
content: ", ";
}
ul.blog-categories li:last-child:after {
content: "";
}
/* Blog comment wrapper */
.comment {
border: 1px dashed #006699;
padding: 5px
}
/*******************************************************************************
* Supernova Website Design Classes - Copyright 2009 Casey Kirsle - Kirsle.com *
******************************************************************************/
/*************
* Eye Candy *
************/
.k-supernova {
/* Main BG image */
display: none
}
.k-kirsle {
/* Kirsle logo */
display: none
}
/********************
* Navigation Panel *
*******************/
.k-navpanel {
/* Wrapper for nav bar */
display: none
}
.k-section {
/* Division of navigation bar */
}
.k-navi {
/* Stretches of hyperlinks inside the nav bar */
}
/* Hyperlinks inside the nav bar */
.k-navi a:link, .k-navi a:visited {
}
/*********************
* Main Content Area *
********************/
.k-content-panel {
/* Wrapper for the content panel */
display: inline;
margin-left: 25px;
margin-right: 25px
}
.k-copyright {
/* Copyright text */
text-align: center;
font-size: x-small;
color: #000000;
font-weight: bold;
padding: 20px 0px
}
.k-space {
background-image: url("space.png");
background-repeat: repeat;
background-position: 0px 0px;
height: 50px
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 767 B

View File

@ -0,0 +1,508 @@
body {
background-color: #000000;
background-image: url("space.png");
background-repeat: repeat;
background-position: 0px 0px;
background-attachment: fixed;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #BEBEBE;
margin: 0px;
padding: 0px
}
a:link, a:visited {
color: #99CCFF;
text-decoration: underline
}
a:hover, a:active {
color: #FFCCFF
}
a img {
border: 0px
}
h1,h2,h3,h4 {
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0px 0px 10px #0099FF;
-moz-text-shadow: 0px 0px 10px #0099FF;
-webkit-text-shadow: 0px 0px 10px #0099FF
}
h1 {
font-size: 32pt;
padding-top: 15px;
padding-bottom: 15px;
}
h1:first-of-type {
padding-top: 0px;
}
h2 {
font-size: 24pt
}
h3 {
font-size: 18pt
}
h4 {
font-size: 16pt
}
pre,code {
font-family: "Lucida Console","DejaVu LGC Sans Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
font-size: 9pt;
color: #00CCCC
}
pre {
display: block;
border: 1px dashed #CCCCCC;
padding: 10px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
max-height: 550px;
overflow: auto
}
code {
display: inline
}
label {
cursor: pointer
}
fieldset {
border: 1px solid #006699;
}
legend {
color: #0099FF;
font-weight: bold
}
table.box {
border: 1px solid #999999
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
textarea,
input[type="file"],
select { /* To hell with IE */
background-color: #000000;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #CCCCCC;
border-top: 1px solid #666666;
border-left: 1px solid #666666;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC
}
acronym,abbr {
border-bottom: 1px dotted #BEBEBE;
cursor: help;
}
/*******************************************************************************
* General CSS Classes *
******************************************************************************/
.center {
margin: auto;
text-align: center
}
.right {
margin-left: auto;
margin-right: 0px;
text-align: right
}
.invisible {
display: none
}
.clear {
clear: both;
}
table.table,
table.table th,
table.table td {
border: 1px solid #999999;
}
table.table {
border-collapse: collapse;
border-spacing: 0;
margin: 10px 0px;
padding: 0px;
}
table.table-wide {
width: 100%;
}
table.table th {
background-color: #003366;
color: #FFFFFF;
text-align: left;
padding: 4px;
}
table.table tr:nth-child(even) {
background-color: #000000;
}
table.table tr:nth-child(odd) {
background-color: #202020;
}
table.table td {
padding: 4px;
vertical-align: top;
text-align: left;
}
/*******************************************************************************
* Styles Needed by Specific Pages in the CMS *
******************************************************************************/
/* Downloads */
.distro {
border: 1px solid #CCCCCC
}
.distro th {
width: 150px;
text-align: center;
vertical-align: top
}
.distro td {
width: 150px;
text-align: center;
vertical-align: top;
border: 1px solid #808080
}
.distro td img {
float: left
}
/**********
* Photos *
**********/
/* Photo Upload page */
.photo-upload-dropbox {
border: 2px dashed #0099FF;
padding: 40px;
}
.photo-upload-dropbox.active {
border: 4px dashed #FF99FF;
}
.upload-trough {
position: relative;
border: 1px solid #000000;
width: 100%;
height: 28px;
}
.upload-progress-bar {
position: relative;
width: 0%;
height: 100%;
background-color: #FF9900;
}
/* Photo Grids: see http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
ul.photo-grid {
list-style: none;
display: inline;
margin: 0;
padding: 0;
position: relative;
}
ul.photo-grid li {
position: relative;
/*float: left;*/
display: inline-block;
width: 260px;
height: 260px;
margin-left: 20px;
margin-top: 20px;
}
ul.photo-grid li .dummy {
padding-top: 100%;
}
.photo-grid-item {
cursor: pointer;
overflow: hidden; /* Crop off long names, etc. */
/* We use absolute positioning to detach this element from the flow, */
/* allowing the .dummy to dictate the height of the square. */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.photo-grid-item img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.photo-grid-item .name {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
font-family: Arial,Helvetica,sans-serif;
font-size: 14pt;
font-weight: bold;
color: #FFFFFF;
text-align: left;
text-shadow: 1px 1px 0px #000000,
-1px -1px 0px #000000,
1px -1px 0px #000000,
-1px 1px 0px #000000;
}
.photo-description {
display: block;
border: 1px solid #FF99FF;
box-shadow: 0px 0px 4px #0099FF;
padding: 10px;
margin: 20px 0px;
background-color: #000000;
width: 790px;
}
/*ul#arrange-photos {
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul#arrange-photos li {
cursor: pointer;
margin: 20px;
padding: 1px;
float: left;
width: 150px;
}*/
/********
* Blog *
*******/
/* Blog titles when shown on index view */
a.blog-title-index:link, a.blog-title-index:visited {
font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
font-size: 32pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
text-shadow: 0px 0px 10px #0099FF;
-moz-text-shadow: 0px 0px 10px #0099FF;
-webkit-text-shadow: 0px 0px 10px #0099FF
}
a.blog-title-index:hover, a.blog-title-index:active {
text-decoration: underline;
text-shadow: 0px 0px 10px #FF99FF;
-moz-text-shadow: 0px 0px 10px #FF99FF;
-webkit-text-shadow: 0px 0px 10px #FF99FF
}
/* Poster's avatar box */
.blog-author, .comment-author {
float: right;
background-color: #444444;
border: 1px solid #CCCCCC;
padding: 2px;
margin-left: 10px;
margin-bottom: 10px;
width: 100px; /* 96 avatar width + 4px padding */
text-align: center;
font-weight: bold
}
.blog-author a, .comment-author a {
text-decoration: none;
}
div.siikir-avatar {
width: 96px;
margin: auto;
}
/* Timestamp and author line below blog titles */
.blog-timestamp {
font-size: smaller;
font-style: italic;
padding-left: 30px;
padding-top: 5px;
padding-bottom: 10px
}
ul.blog-categories {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
ul.blog-categories li {
display: inline;
}
ul.blog-categories li:after {
content: ", ";
}
ul.blog-categories li:last-child:after {
content: "";
}
/* Blog comment wrapper */
.comment {
border: 1px dashed #006699;
padding: 5px
}
/* Comment style overrides */
.comment h1 {
font-size: 14pt;
}
.comment h2 {
font-size: 12pt;
}
.comment h3 {
font-size: 10pt;
}
.comment h4 {
font-size: 9pt;
}
/*******************************************************************************
* Supernova Website Design Classes - Copyright 2009 Casey Kirsle - Kirsle.com *
******************************************************************************/
/* Make a photo look nice. */
.portrait {
display: inline;
background-color: #CFCFCF;
padding: 4px;
border: 1px solid #000000;
box-shadow: 0px 0px 4px #0099FF;
-moz-box-shadow: 0px 0px 4px #0099FF;
-webkit-box-shadow: 0px 0px 4px #0099FF;
}
/*************
* Eye Candy *
************/
.k-supernova {
/* Main BG image */
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
width: 960px;
height: 1000px;
background-image: url("supernova.jpg");
background-repeat: no-repeat;
background-position: 0px 0px
}
.k-kirsle {
/* Kirsle logo */
position: absolute;
z-index: 150;
top: 9px;
left: 433px;
width: 317px;
height: 177px;
background-image: url("kirsle.png");
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer
}
/********************
* Navigation Panel *
*******************/
.k-navpanel {
/* Wrapper for nav bar */
background-image: url("panelbg.png");
background-repeat: repeat-y;
background-position: 0px 0px;
position: absolute;
z-index: 200;
top: 203px;
left: 57px;
width: 152px;
border: 2px ridge #0099FF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px
}
.k-section {
/* Division of navigation bar */
display: block;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-size: 14pt;
font-weight: bold;
text-align: center;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
margin-left: 2px;
margin-right: 2px;
padding: 0px;
text-shadow: 0px 0px 10px #0099FF;
-moz-text-shadow: 0px 0px 10px #0099FF;
-webkit-text-shadow: 0px 0px 10px #0099FF
}
.k-navi {
/* Stretches of hyperlinks inside the nav bar */
padding-left: 4px;
padding-right: 4px;
font-size: x-small;
line-height: 160%
}
/* Hyperlinks inside the nav bar */
.k-navi a:link, .k-navi a:visited {
font-size: x-small;
font-weight: bold
}
/*********************
* Main Content Area *
********************/
.k-content-panel {
/* Wrapper for the content panel */
background-image: url("panelbg.png");
background-repeat: repeat;
background-position: 0px 0px;
z-index: 300;
position: absolute;
top: 203px;
left: 262px;
right: 40px;
padding: 6px;
border: 2px ridge #0099FF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px
}
.k-copyright {
/* Copyright text */
text-align: center;
font-size: x-small;
color: #999999;
font-weight: bold;
padding: 20px 0px
}
.k-space {
background-image: url("space.png");
background-repeat: repeat;
background-position: 0px 0px;
height: 50px
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

View File

@ -0,0 +1,29 @@
/* CSS classes used by vim syntax highlighting */
pre.vim {
background-color: #000000;
color: #FFFFFF;
max-height: 450px;
overflow: auto;
}
pre.vim span.Identifier {
color: #00FFFF;
font-weight: bold;
}
pre.vim span.Constant {
color: #FF99FF;
font-weight: bold;
}
pre.vim span.Statement {
color: #FFFF00;
font-weight: bold;
}
pre.vim span.Comment {
color: #0099FF;
font-weight: bold;
}
pre.vim span.PreProc {
color: #8080FF;
font-weight: bold;
}

BIN
www/designs/solar/css.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
www/designs/solar/e.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 B

BIN
www/designs/solar/html.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,264 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Welcome to my site! - Kirsle.net</title>
<link rel="StyleSheet" type="text/css" media="screen" href="/designs/solar/screen.css">
<link rel="StyleSheet" type="text/css" media="print" href="/designs/solar/print.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div class="k-supernova">
<div class="k-kirsle" onClick="self.location='/'"></div>
</div>
<!-- ####################################################################### -->
<!-- ## Main Content ## -->
<!-- ####################################################################### -->
<div class="k-content-panel">
<div class="k-content-eyecandy">
<div class="k-content-n">
<div class="k-content-ne"></div>
</div>
<div class="k-content-main">
<div class="k-content-body">
<h1>Kirsle.net Solar</h1>
This is the first iteration of the Kirsle.net Solar theme. It uses lots of flat,
static images rather than true transparency to support Internet Explorer 6.<p>
This design went into effect somewhere around September 28, 2009, which is also
when I moved my personal site from Cuvou.com over to Kirsle.net. It replaced
the previous <a href="/designs/cosmos">Cosmos</a> theme.<p>
I later <a href="/designs/solar-html5">gave it an HTML5 refresh</a> and broke
compatibility with MSIE 6.
<h2>Heading Level 2</h2>
Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Duis pede purus, ornare interdum, consequat in, dignissim vitae, nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare. Phasellus interdum,
sem vulputate commodo congue, augue nisl aliquet velit, eu volutpat justo ante vitae lacus. Donec pulvinar scelerisque nisl.
Donec viverra sem eu augue. Phasellus faucibus nulla nec lacus aliquam dapibus. Aliquam nibh ipsum, blandit sit amet, consequat
in, blandit et, massa. Quisque nec urna. Aliquam nec elit ut erat consectetuer feugiat. Suspendisse tincidunt purus vel diam
blandit sagittis. Sed vestibulum, dolor nec vehicula accumsan, purus leo congue risus, at dapibus massa lorem sit amet purus.<p>
Nullam et nulla. <a href="#">Fusce consectetuer</a>, ante et auctor egestas, mi mi eleifend lorem, quis pulvinar tellus est at ligula. Donec
pulvinar, nisl vitae tempor fermentum, massa nulla placerat neque, ac posuere enim enim facilisis velit. Phasellus et augue
et nisi placerat eleifend. Mauris quam lectus, consequat ut, rutrum vitae, elementum a, sem. Nam aliquam, metus et tincidunt
cursus, felis risus faucibus dolor, quis ultricies tellus justo sed ligula. Integer orci magna, cursus sed, eleifend a,
imperdiet vitae, nibh. Aenean mattis nisl at tortor. Integer diam elit, adipiscing vitae, mollis ac, aliquam et, elit. Etiam
hendrerit, diam non ultrices pellentesque, leo augue egestas mauris, at dictum nisl augue nec odio. Praesent condimentum.
Morbi semper tellus eget ipsum porta pellentesque.
<pre>Preformatted
T e x t . i</pre>
<h3>Heading Level 3</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pede purus, ornare interdum, consequat in, dignissim vitae, nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare. Phasellus interdum,
sem vulputate commodo congue, augue nisl aliquet velit, eu volutpat justo ante vitae lacus. Donec pulvinar scelerisque nisl.
Donec viverra sem eu augue. Phasellus faucibus nulla nec lacus aliquam dapibus. Aliquam nibh ipsum, blandit sit amet, consequat
in, blandit et, massa. Quisque nec urna. Aliquam nec elit ut erat consectetuer feugiat. Suspendisse tincidunt purus vel diam
blandit sagittis. Sed vestibulum, dolor nec vehicula accumsan, purus leo congue risus, at dapibus massa lorem sit amet purus.<p>
Nullam et nulla. Fusce consectetuer, ante et auctor egestas, mi mi eleifend lorem, quis pulvinar tellus est at ligula. Donec
pulvinar, nisl vitae tempor fermentum, massa nulla placerat neque, ac posuere enim enim facilisis velit. Phasellus et augue
et nisi placerat eleifend. Mauris quam lectus, consequat ut, rutrum vitae, elementum a, sem. Nam aliquam, metus et tincidunt
cursus, felis risus faucibus dolor, quis ultricies tellus justo sed ligula. Integer orci magna, cursus sed, eleifend a,
imperdiet vitae, nibh. Aenean mattis nisl at tortor. Integer diam elit, adipiscing vitae, mollis ac, aliquam et, elit. Etiam
hendrerit, diam non ultrices pellentesque, leo augue egestas mauris, at dictum nisl augue nec odio. Praesent condimentum.
Morbi semper tellus eget ipsum porta pellentesque.
<h4>Heading Level 4</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pede purus, ornare interdum, consequat in, dignissim vitae, nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare. Phasellus interdum,
sem vulputate commodo congue, augue nisl aliquet velit, eu volutpat justo ante vitae lacus. Donec pulvinar scelerisque nisl.
Donec viverra sem eu augue. Phasellus faucibus nulla nec lacus aliquam dapibus. Aliquam nibh ipsum, blandit sit amet, consequat
in, blandit et, massa. Quisque nec urna. Aliquam nec elit ut erat consectetuer feugiat. Suspendisse tincidunt purus vel diam
blandit sagittis. Sed vestibulum, dolor nec vehicula accumsan, purus leo congue risus, at dapibus massa lorem sit amet purus.<p>
Nullam et nulla. Fusce consectetuer, ante et auctor egestas, mi mi eleifend lorem, quis pulvinar tellus est at ligula. Donec
pulvinar, nisl vitae tempor fermentum, massa nulla placerat neque, ac posuere enim enim facilisis velit. Phasellus et augue
et nisi placerat eleifend. Mauris quam lectus, consequat ut, rutrum vitae, elementum a, sem. Nam aliquam, metus et tincidunt
cursus, felis risus faucibus dolor, quis ultricies tellus justo sed ligula. Integer orci magna, cursus sed, eleifend a,
imperdiet vitae, nibh. Aenean mattis nisl at tortor. Integer diam elit, adipiscing vitae, mollis ac, aliquam et, elit. Etiam
hendrerit, diam non ultrices pellentesque, leo augue egestas mauris, at dictum nisl augue nec odio. Praesent condimentum.
Morbi semper tellus eget ipsum porta pellentesque.
<div class="k-copyright">
Copyright &copy; 2010 Kirsle<br>
Powered by Siikir 0.01 by Casey Kirsle
</div>
</div>
<div class="k-content-foot">
<div class="k-content-sw"></div>
<div class="k-content-se"></div>
</div>
</div>
</div>
</div>
<!-- ####################################################################### -->
<!-- ## Navigation Panel ## -->
<!-- ####################################################################### -->
<div class="k-navpanel">
<div class="k-navbg">
<div class="k-navbody">
<div class="k-section">Kirsle</div>
<div class="k-navi">
&#0187; <a href="#/">Homepage</a><br>
&#0187; <a href="#/about.html">About Me</a><br>
&#0187; <a href="#/photos.html?u=kirsle">Photo Albums</a><br>
&#0187; <a href="#/guestbook.html">Guestbook</a><br>
&#0187; <a href="#/profile.html?u=kirsle">Contact Me</a>
</div>
<div class="k-section">Channels</div>
<div class="k-navi">
&#0164; <a href="#/blog.html?u=kirsle&amp;category=General">General</a> <small>(35)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Linux">Linux</a> <small>(27)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Perl">Perl</a> <small>(20)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Software">Software</a> <small>(15)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=HTML">HTML</a> <small>(7)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=RiveScript">RiveScript</a> <small>(5)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Design">Design</a> <small>(5)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Windows">Windows</a> <small>(5)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Tk">Tk</a> <small>(4)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Reviews">Reviews</a> <small>(4)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Rant">Rant</a> <small>(4)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=KAGE">KAGE</a> <small>(3)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=DOS">DOS</a> <small>(3)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Photos">Photos</a> <small>(3)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Java">Java</a> <small>(3)</small>
<div id="show-more-categories" style="display: block">&#0164; <a href="#/#">More...</a>
</div>
<div id="more-categories" style="display: none">&#0164; <a href="#/blog.html?u=kirsle&amp;category=VirtualBox">VirtualBox</a> <small>(2)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Blackhat">Blackhat</a> <small>(2)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Nostalgia">Nostalgia</a> <small>(2)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Ajax">Ajax</a> <small>(2)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Curiosity">Curiosity</a> <small>(2)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=JavaScript">JavaScript</a> <small>(2)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Hacking">Hacking</a> <small>(2)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Ideas">Ideas</a> <small>(2)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Zelda">Zelda</a> <small>(1)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Apple">Apple</a> <small>(1)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Perl%206">Perl 6</a> <small>(1)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=AIML">AIML</a> <small>(1)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Famous">Famous</a> <small>(1)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Game%20Oddities">Game Oddities</a> <small>(1)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Personal">Personal</a> <small>(1)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Licensing">Licensing</a> <small>(1)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Experiment">Experiment</a> <small>(1)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=Android">Android</a> <small>(1)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=C%2B%2B">C++</a> <small>(1)</small><br>
&#0164; <a href="#/blog.html?u=kirsle&amp;category=PHP">PHP</a> <small>(1)</small></div>
</div>
<div class="k-section">Creativity</div>
<div class="k-navi">
&#0187; <a href="#/rendering.html">3D Renderings</a><br>
&#0187; <a href="#/flash.html">Flash Animation</a><br>
&#0187; <a href="#/javascript.html">JavaScript</a><br>
&#0187; <a href="#/fonts.html">Fonts</a><br>
&#0187; <a href="#/metacity.html">Metacity</a><br>
&#0187; <a href="#/doc/">Tutorials</a>
</div>
<div class="k-section">Software</div>
<div class="k-navi">
&#0187; <a href="#/rivescript.html">RiveScript</a><br>
&#0187; <a href="#/errorgen.html">Error Generator</a><br>
&#0187; <a href="#/tkcalc.html">Tk Calculator</a><br>
&#0187; <a href="#/terminal.html">Terminal Apps</a><br>
&#0187; <a href="#/pccc.html">CyanChat Client</a>
</div>
<div class="k-section">Web Tools</div>
<div class="k-navi">
&#0187; <a href="#/wizards/ttf2eot.cgi">TTF to EOT</a><br>
&#0187; <a href="#/wizards/fader.cgi">Text Fader</a><br>
&#0187; <a href="#/wizards/favicon.cgi">Favicons</a><br>
&#0187; <a href="#/wizards/distance.cgi">Distance Calc</a><br>
&#0187; <a href="#/wizards/translator.html">Azulian Encoder</a><br>
&#0187; <a href="#/wizards/xbmask.cgi">XBM Masks</a>
</div>
<div class="k-section">Subdomains</div>
<div class="k-navi">
&#0187; <a href="#http://svn.kirsle.net/">Subversion</a><br>
&#0187; <a href="#http://sh.kirsle.net/">Shell Scripts</a><br>
&#0187; <a href="#http://rpm.kirsle.net/">Linux RPMs</a>
</div>
<div class="k-section">Fan Club</div>
<div class="k-navi">
&#0187; <a href="#/login.html">Log In</a><br>
&#0187; <a href="#/register.html">Sign Up</a>
</div><p>
<div class="k-navi">
<div class="center">
<a href="#http://validator.w3.org/check?uri=referer">
<img src="/designs/solar/html.png" width="88" height="31" alt="HTML 4.01 Strict">
</a><br>
<a href="#http://jigsaw.w3.org/css-validator/validator?uri=http://www.kirsle.com/solar/screen.css">
<img src="/designs/solar/css.png" width="88" height="31" alt="CSS">
</a><br>
<a href="#http://www.perl.org/">
<img src="/designs/solar/perlpowered.png" width="88" height="31" alt="Powered by Perl">
</a>
</div>
</div><p>
<div style="margin-left: 4px; margin-right: 4px; border: 1px solid #006699">
<div style="background-color: #006699; color: #FFFFFF; font-size: 8pt; font-weight: bold; text-align: center; border-bottom: 1px solid #000000">
Statistics
</div>
<div style="padding: 2px; font-size: smaller">
Total Hits:
<div style="border: 1px inset #006699; padding: 2px">
<strong>490</strong> today, and<br>
<strong>31264</strong> altogether
</div>
Unique Visitors:
<div style="border: 1px inset #006699; padding: 2px">
<strong>256</strong> today, and<br>
<strong>852</strong> altogether
</div>
&#0164; <a href="#/traffic.html?do=hits" style="text-decoration: underline; font-weight: normal">
Traffic Stats</a><br>
&#0164; <a href="#/traffic.html?do=browsers" style="text-decoration: underline; font-weight: normal">
Web Browsers &amp; OS's</a><br>
&#0164; <a href="#/traffic.html?do=referer" style="text-decoration: underline; font-weight: normal">
HTTP Referrers</a>
</div>
</div>
</div>
</div>
<div class="k-navfoot"></div>
</div>
</body>
</html>
<!--
FILE ARCHIVED ON 1:33:28 May 6, 2010 AND RETRIEVED FROM THE
INTERNET ARCHIVE ON 18:25:04 Oct 16, 2014.
JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.
ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
SECTION 108(a)(3)).
-->

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
www/designs/solar/n.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 628 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

BIN
www/designs/solar/ne.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 B

Some files were not shown because too many files have changed in this diff Show More