Browse Source

Add old web design archives

pull/2/head
Noah Petherbridge 7 years ago
parent
commit
946552ed5a
  1. BIN
      www/designs/cosmos/body-shadow.jpg
  2. BIN
      www/designs/cosmos/body-topleft.jpg
  3. BIN
      www/designs/cosmos/border-east.jpg
  4. BIN
      www/designs/cosmos/border-east.png
  5. BIN
      www/designs/cosmos/border-ne.jpg
  6. BIN
      www/designs/cosmos/border-ne.png
  7. BIN
      www/designs/cosmos/border-north.jpg
  8. BIN
      www/designs/cosmos/border-north.png
  9. BIN
      www/designs/cosmos/border-se.jpg
  10. BIN
      www/designs/cosmos/border-se.png
  11. BIN
      www/designs/cosmos/border-south.jpg
  12. BIN
      www/designs/cosmos/border-south.png
  13. BIN
      www/designs/cosmos/border-sw.jpg
  14. BIN
      www/designs/cosmos/border-sw.png
  15. BIN
      www/designs/cosmos/border-west.jpg
  16. BIN
      www/designs/cosmos/border-west.png
  17. 149
      www/designs/cosmos/index.html
  18. BIN
      www/designs/cosmos/logo.jpg
  19. BIN
      www/designs/cosmos/navbody.jpg
  20. BIN
      www/designs/cosmos/navfoot.jpg
  21. BIN
      www/designs/cosmos/navtop.jpg
  22. 268
      www/designs/cosmos/print.css
  23. 344
      www/designs/cosmos/screen.css
  24. BIN
      www/designs/cosmos/starburst.jpg
  25. BIN
      www/designs/cosmos/starrysky.jpg
  26. 129
      www/designs/index.html
  27. BIN
      www/designs/lavender/css.png
  28. BIN
      www/designs/lavender/cuvou.gif
  29. BIN
      www/designs/lavender/cuvou.png
  30. BIN
      www/designs/lavender/fedora.png
  31. BIN
      www/designs/lavender/html.png
  32. 208
      www/designs/lavender/index.html
  33. BIN
      www/designs/lavender/navbg.png
  34. BIN
      www/designs/lavender/navi.png
  35. BIN
      www/designs/lavender/navi.psd
  36. BIN
      www/designs/lavender/perl.png
  37. 73
      www/designs/lavender/print.css
  38. 123
      www/designs/lavender/screen.css
  39. BIN
      www/designs/lavender/starburst.jpg
  40. BIN
      www/designs/lavender/starburst.psd
  41. BIN
      www/designs/screenshots/cosmos.png
  42. BIN
      www/designs/screenshots/cosmos.t.png
  43. BIN
      www/designs/screenshots/lavender.png
  44. BIN
      www/designs/screenshots/lavender.t.png
  45. BIN
      www/designs/screenshots/solar-bootstrap.png
  46. BIN
      www/designs/screenshots/solar-bootstrap.t.png
  47. BIN
      www/designs/screenshots/solar-html5.png
  48. BIN
      www/designs/screenshots/solar-html5.t.png
  49. BIN
      www/designs/screenshots/solar.png
  50. BIN
      www/designs/screenshots/solar.t.png
  51. BIN
      www/designs/screenshots/starburst.png
  52. BIN
      www/designs/screenshots/starburst.t.png
  53. BIN
      www/designs/screenshots/storm.png
  54. BIN
      www/designs/screenshots/storm.t.png
  55. 5
      www/designs/solar-bootstrap/bootstrap-theme.min.css
  56. 5
      www/designs/solar-bootstrap/bootstrap.min.css
  57. 6
      www/designs/solar-bootstrap/bootstrap.min.js
  58. 82
      www/designs/solar-bootstrap/codehilite.css
  59. BIN
      www/designs/solar-bootstrap/css3.png
  60. BIN
      www/designs/solar-bootstrap/digital-ocean.png
  61. BIN
      www/designs/solar-bootstrap/html5.png
  62. 266
      www/designs/solar-bootstrap/index.html
  63. 4
      www/designs/solar-bootstrap/jquery-2.1.0.min.js
  64. BIN
      www/designs/solar-bootstrap/kirsle.png
  65. 52
      www/designs/solar-bootstrap/monokai.css
  66. 20
      www/designs/solar-bootstrap/offsite.js
  67. BIN
      www/designs/solar-bootstrap/panelbg.png
  68. 246
      www/designs/solar-bootstrap/print.css
  69. BIN
      www/designs/solar-bootstrap/python.png
  70. 494
      www/designs/solar-bootstrap/screen.css
  71. BIN
      www/designs/solar-bootstrap/space.png
  72. BIN
      www/designs/solar-bootstrap/supernova.jpg
  73. 531
      www/designs/solar-bootstrap/ui.css
  74. 29
      www/designs/solar-bootstrap/vim-syntax.css
  75. 82
      www/designs/solar-html5/codehilite.css
  76. BIN
      www/designs/solar-html5/css3.png
  77. BIN
      www/designs/solar-html5/digital-ocean.png
  78. BIN
      www/designs/solar-html5/html5.png
  79. 196
      www/designs/solar-html5/index.html
  80. 4
      www/designs/solar-html5/jquery-2.1.0.min.js
  81. BIN
      www/designs/solar-html5/kirsle.png
  82. 52
      www/designs/solar-html5/monokai.css
  83. 20
      www/designs/solar-html5/offsite.js
  84. BIN
      www/designs/solar-html5/panelbg.png
  85. 235
      www/designs/solar-html5/print.css
  86. BIN
      www/designs/solar-html5/python.png
  87. 508
      www/designs/solar-html5/screen.css
  88. BIN
      www/designs/solar-html5/space.png
  89. BIN
      www/designs/solar-html5/supernova.jpg
  90. 29
      www/designs/solar-html5/vim-syntax.css
  91. BIN
      www/designs/solar/css.png
  92. BIN
      www/designs/solar/e.png
  93. BIN
      www/designs/solar/html.png
  94. 264
      www/designs/solar/index.html
  95. BIN
      www/designs/solar/kirsle.jpg
  96. BIN
      www/designs/solar/n.png
  97. BIN
      www/designs/solar/navbody.png
  98. BIN
      www/designs/solar/navfoot.png
  99. BIN
      www/designs/solar/navtop.png
  100. BIN
      www/designs/solar/ne.png

BIN
www/designs/cosmos/body-shadow.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
www/designs/cosmos/body-topleft.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

BIN
www/designs/cosmos/border-east.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

BIN
www/designs/cosmos/border-east.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 B

BIN
www/designs/cosmos/border-ne.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 615 B

BIN
www/designs/cosmos/border-ne.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 381 B

BIN
www/designs/cosmos/border-north.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

BIN
www/designs/cosmos/border-north.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 B

BIN
www/designs/cosmos/border-se.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 B

BIN
www/designs/cosmos/border-se.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 B

BIN
www/designs/cosmos/border-south.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

BIN
www/designs/cosmos/border-south.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 B

BIN
www/designs/cosmos/border-sw.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 619 B

BIN
www/designs/cosmos/border-sw.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 348 B

BIN
www/designs/cosmos/border-west.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

BIN
www/designs/cosmos/border-west.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 B

149
www/designs/cosmos/index.html

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

BIN
www/designs/cosmos/navbody.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
www/designs/cosmos/navfoot.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
www/designs/cosmos/navtop.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

268
www/designs/cosmos/print.css

@ -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
}

344
www/designs/cosmos/screen.css

@ -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
}

BIN
www/designs/cosmos/starburst.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

BIN
www/designs/cosmos/starrysky.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

129
www/designs/index.html

@ -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 %}

BIN
www/designs/lavender/css.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
www/designs/lavender/cuvou.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
www/designs/lavender/cuvou.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
www/designs/lavender/fedora.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
www/designs/lavender/html.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

208
www/designs/lavender/index.html

@ -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>

BIN
www/designs/lavender/navbg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 B

BIN
www/designs/lavender/navi.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
www/designs/lavender/navi.psd

Binary file not shown.

BIN
www/designs/lavender/perl.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

73
www/designs/lavender/print.css

@ -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
}

123
www/designs/lavender/screen.css

@ -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%
}

BIN
www/designs/lavender/starburst.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
www/designs/lavender/starburst.psd

Binary file not shown.

BIN
www/designs/screenshots/cosmos.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 KiB

BIN
www/designs/screenshots/cosmos.t.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

BIN
www/designs/screenshots/lavender.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

BIN
www/designs/screenshots/lavender.t.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
www/designs/screenshots/solar-bootstrap.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
www/designs/screenshots/solar-bootstrap.t.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

BIN
www/designs/screenshots/solar-html5.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
www/designs/screenshots/solar-html5.t.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

BIN
www/designs/screenshots/solar.png

Binary file not shown.