kirsle/kirsle.net
1
0
Fork 0
mirror of https://github.com/kirsle/kirsle.net synced 2024-11-14 04:49:29 +00:00
Code Releases Activity

Website Redesign 2018: Flare Theme

Browse Source
This commit is contained in:
Noah 2018-02-01 19:48:26 -08:00
parent 7688004234
commit b20d4a6d03
14 changed files with 520 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
www/.layout.gohtml
View File

@ -16,11 +16,12 @@
<!-- FontAwesome -->
<link rel="stylesheet" type="text/css" href="/vendor/FontAwesome/css/fa-svg-with-js.css">
<!-- Kirsle.net Solar -->
<link rel="stylesheet" type="text/css" media="screen" href="/solar/ui.css">
<link rel="stylesheet" type="text/css" media="print" href="/solar/print.css">
<!-- Kirsle.net Flare -->
<link rel="stylesheet" type="text/css" href="/flare/ui.css">
<link rel="stylesheet" type="text/css" href="/solar/monokai.css">
<link rel="stylesheet" type="text/css" href="/solar/vim-syntax.css">
<link rel="alternate" type="application/rss+xml" title="Kirsle's RSS Feed" href="/blog/rss">
</head>
<body>
@ -29,19 +30,20 @@
<a href="#navbar" class="btn btn-primary"><i class="fas fa-bars"></i></a>
</div>
<div class="k-supernova"></div>
<div class="brand d-lg-none">
<a href="/">
<img src="/flare/cjk-48.png" width="48" height="48" alt="Kirsle.net logo">
Kirsle.net
</a>
</div>
<div class="wallpaper"></div>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-10 col-xl-8">
<div class="k-kirsle" onclick="self.location='/'"></div>
</div>
</div>
<div class="row">
<div class="order-1 order-lg-12 col-12 col-lg-10 col-xl-8">
<div class="k-content-panel mb-4">
<div class="content-panel mb-4">
{{ if .SetupNeeded }}
<div class="alert alert-success">
Your web blog needs to be set up!
@ -70,76 +72,64 @@
</p>
{{ end }}
<div class="k-copyright">
<div class="mt-4 copyright">
Copyright &copy; {{ Now.Format "2006" }} Noah Petherbridge &mdash; All rights reserved<br>
Hosted by <a href="https://www.digitalocean.com/?refcode=ea01734d3fc7">DigitalOcean</a><br>
Page generated in {{ printf "%.4f" .RequestDuration.Seconds }}s.
Page generated in <code>{{ printf "%.4f" .RequestDuration.Seconds }}s</code>.
</div>
</div>
</div>
<div class="order-12 order-lg-1 col-12 col-lg-2">
<div class="k-navpanel mb-4" id="navbar">
<div class="k-section">Kirsle</div>
<ul>
<div id="navbar" class="nav-panel order-12 order-lg-1 col-12 col-lg-2">
<div class="brand">
<a href="/">
<img src="/flare/cjk-48.png" width="48" height="48" alt="Kirsle.net logo">
Kirsle.net
</a>
</div>
<div class="mb-4 center d-lg-none">
<a href="#"><i class="fa fa-arrow-up"></i> Back to Top</a>
</div>
<div class="mb-4">
<ul class="list-unstyled">
<li>&#0187; <a href="/">Homepage</a> (<a href="/blog.rss">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="/wiki/Main-Page">Wiki</a></li>
<li>&#0187; <a href="/wiki/Main-Page">My Wiki</a></li>
<li>&#0187; <a href="/guestbook">Guestbook</a></li>
<li>&#0187; <a href="/contact">Contact Me</a></li>
<li>&#0187; <a href="/tagged">Blog Tags</a></li>
<li>&#0187; <a href="/archive">Archive</a></li>
</ul>
<div class="k-section">Blog Tags</div>
{{ RenderTags .Request false }}
<div class="k-section">Creativity</div>
<ul>
<h2>Creativity</h2>
<ul class="list-unstyled">
<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="/doc/">Tutorials</a></li>
<li>&#0187; <a href="/designs">Web Design</a></li>
<li>&#0187; <a href="/flash">Flash Animations</a></li>
<li>&#0187; <a href="/javascript">JavaScript Games</a></li>
<li>&#0187; <a href="/fonts">TrueType Fonts</a></li>
<li>&#0187; <a href="/designs">Past Web Designs</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>
<h2>Web Tools</h2>
<ul class="list-unstyled">
<li>&#0187; <a href="/wizards/ttf2eot.cgi">TTF to EOT Font Converter</a></li>
<li>&#0187; <a href="/wizards/ps1.html">Bash $PS1 Prompt Generator</a></li>
<li>&#0187; <a href="/wizards/fader.cgi">Text Color Fader</a></li>
<li>&#0187; <a href="/wizards/translator.html">Azulian Translater</a></li>
<li>&#0187; <a href="/wizards/flask-session.cgi">Flask Session Viewer</a></li>
</ul>
<h2>Software</h2>
<ul class="list-unstyled">
<li>&#0187; <a href="/tagged/rivescript">RiveScript</a></li>
<li>&#0187; <a href="/errorgen">Error Message Generator</a></li>
<li>&#0187; <a href="/tkcalc">Perl/Tk Calculator</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">Bash $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.cgi">Flask Session</a></li>
</ul>
<div class="k-section">Subdomains</div>
<ul>
<li>&#0187; <a href="https://rophako.kirsle.net/">Rophako CMS</a></li>
<li>&#0187; <a href="https://mc.kirsle.net/">Minecraft Server</a></li>
<li>&#0187; <a href="https://rpm.kirsle.net/">Linux RPMs</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">Social Links</div>
<ul>
<h2>Out of Network</h2>
<ul class="list-unstyled">
<li>&#0187; <a href="https://www.google.com/+NoahPetherbridge" rel="me">Google+</a></li>
<li>&#0187; <a href="https://www.facebook.com/noah.lee.petherbridge" rel="me">Facebook</a></li>
<li>&#0187; <a href="https://twitter.com/kirsle" rel="me">Twitter</a></li>
@ -150,36 +140,7 @@
<li>&#0187; <a href="https://www.npmjs.org/~kirsle" rel="me">npm</a></li>
</ul>
<div class="k-section">Fan Club</div>
<ul>
{{ if .LoggedIn }}
<li>&#0164; Hi, <big><a href="/account">{{ or .CurrentUser.Name .CurrentUser.Username }}</a></big></li>
{{ if .CurrentUser.Admin }}
<li>&#0187; <a href="/admin">Admin Center</a></li>
{{ end }}
<li>&#0187; <a href="/blog/edit">Update Blog</a></li>
<li>&#0187; <a href="/blog/drafts">Drafts</a>/<a href="/blog/private">Private</a></li>
<li>&#0187; <a href="/logout">Log Out</a>
{{ else }}
<li id="login-link">&#0187; <a href="/login" class="login-link">Log In</a></li>
{{ end }}
</ul>
<div id="login-inline" style="display: none">
<form action="/login" method="POST">
<input type="hidden" name="_csrf" value="{{ .CSRF }}">
<input type="hidden" name="next" value="{{ .Path }}">
<input type="text" class="form-control" size="4" name="username" style="display: inline; width: 45%">
<input type="password" class="form-control" size="4" name="password" style="display: inline; width: 45%">
<br>
<button type="submit" class="btn btn-primary" style="width: 100%">Log In</button>
</form>
</div>
<div class="center">
<a href="https://www.python.org/" target="_blank">
<img src="/static/images/python.png" width="80" height="15" alt="Python powered">
</a><br>
<a href="https://validator.w3.org/check?uri=referer">
<img src="/static/images/html5.png" width="80" height="15" alt="W3C Valid HTML5">
</a><br>
@ -193,6 +154,32 @@
</a>
</div>
<ul class="list-unstyled">
{{ if .LoggedIn }}
<li>&#0164; Hi, <big><a href="/account">{{ or .CurrentUser.Name .CurrentUser.Username }}</a></big></li>
{{ if .CurrentUser.Admin }}
<li>&#0187; <a href="/admin">Admin Center</a></li>
{{ end }}
<li>&#0187; <a href="/blog/edit">Update Blog</a></li>
<li>&#0187; <a href="/blog/drafts">Drafts</a>/<a href="/blog/private">Private</a></li>
<li>&#0187; <a href="/logout">Log Out</a>
{{ else }}
<li id="login-link">
<small><a href="/login" class="login-link text-muted">Log In</a></small>
</li>
{{ end }}
</ul>
<div id="login-inline" style="display: none">
<form action="/login" method="POST">
<input type="hidden" name="_csrf" value="{{ .CSRF }}">
<input type="hidden" name="next" value="{{ .Path }}">
<input type="text" class="form-control" size="4" name="username" style="display: inline; width: 46%">
<input type="password" class="form-control" size="4" name="password" style="display: inline; width: 46%">
<br>
<button type="submit" class="btn btn-primary" style="width: 100%">Log In</button>
</form>
</div>
</div>
</div>
@ -200,11 +187,11 @@
</div>
<script type="text/javascript" src="/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/js/offsite.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/vendor/FontAwesome/js/fontawesome-all.min.js"></script>
<script type="text/javascript">
<script src="/js/jquery-2.1.0.min.js"></script>
<script src="/js/offsite.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/vendor/FontAwesome/js/fontawesome-all.min.js"></script>
<script>
$(document).ready(function() {
$(".login-link").click(function() {
$("#login-link").hide();

114
www/about.gohtml
View File

@ -5,76 +5,80 @@
<div class="row">
<div class="col-2 markdown">
<img src="/static/photos/ff7ec4f5.jpg" class="img-responsive portrait" alt="Kirsle"><p>
<img src="https://www.kirsle.net/static/photos/ff7ec4f5.jpg" class="img-responsive portrait" alt="Kirsle"><p>
&#0164; <a href="/contact">Send me an e-mail</a>
</div>
<div class="col-10">
<h2>Hello world!</h2>
<h2 class="mt-0">Hello world!</h2>
My name is <strong>Noah</strong> and this is my website. I am a 30-year-old software
engineer who lives in Los Angeles. My areas of expertise are primarily in Perl and
Python back-end software development, however I believe I have a knack for the front
end as well.<p>
<p>My name is <strong>Noah</strong> and this is my website, where I primarily keep
my blog. I'm a 30 year-old software engineer living in Los Angeles.</p>
I built Kirsle.net from the ground up. Its back-end code has been rewritten a
dozen different times, in two different languages. I made the web design in Photoshop and
pieced it together using standards compliant HTML 5 (the spec, not the
buzzword), CSS and a little bit of JavaScript. The back end is entirely written
in Python. The previous version of Kirsle.net was written in Perl and ran on my
"PerlSiikir" CMS. I rewrote it in Python
<a href="/blog/entry/goodbye-perlsiikir">for various reasons</a>, and I like Python
more these days anyway. <img src="/static/smileys/tango/wink.png" alt=";)"><p>
<p>My interests include programming, creative writing, various forms of what could
be loosely defined as "art," including some dabbling with 3D modeling and
Flash animations. I'm a "high functioning introvert," and when I manage to
get out of the house, I like to go hiking with my dog and my partner. For
several years I could be found at Disneyland every couple of weekends.</p>
Besides being a rockstar at back end development and a pretty decent web designer,
I've dabbled in some 3D modeling, Flash animation and other artistic things.
You can find them under the "Creativity" section on the left navigation. :)<p>
<h3>Music Taste</h3>
Some of my personal projects are listed under the "Software" section to your
left. The rest you'll find on my
<a href="https://github.com/kirsle">GitHub page</a> and
<a href="http://search.cpan.org/~kirsle">CPAN profile</a>.
<p>I don't listen to music much, instead tending to work in silence, but when
I do, these are some artists I'm into recently (links open to a YouTube
video of a song of theirs that I like):</p>
<h2>Kirsle?</h2>
Where did I come up with the name Kirsle? Long-ish story, but here's the cliffnotes:
<ul>
<li>In 1997 when the Internet was still brand new, They didn't want us
using our real names online so I always went by one screen name or
another.</li>
<li>The game <em>NiGHTS: Into Dreams...</em> for the Sega Saturn had an
enemy on some levels named Kircle, and I liked the name but I read
it as though the "C" were pronounced like an "S". Nonetheless, it
became my screen name.</li>
<li>People often pronounced it with a hard "C". The last straw was when
I discovered that Text-to-Speech software also pronounced it this way.</li>
<li>I re-spelled it as Kirsle so it was spelled how I wanted it to be
pronounced.</li>
<li>In doing so, I created the most unique name ever. All of the Google
search results for Kirsle are about me!</li>
<ul class="list-inline">
<li class="list-inline-item">
<a href="https://www.youtube.com/watch?v=NAS5Z1GvxrQ" title="Tearing Me Up">Bos Moses</a>
</li>
<li class="list-inline-item">
<a href="https://www.youtube.com/watch?v=ExVtrghW5Y4" title="Sweatpants">Childish Gambino</a>
</li>
<li class="list-inline-item">
<a href="https://www.youtube.com/watch?v=IPfJnp1guPc" title="Young Dumb &amp; Broke">Khalid</a>
</li>
<li class="list-inline-item">
<a href="https://www.youtube.com/watch?v=eP4eqhWc7sI" title="Lust For Life">Lana Del Rey</a>
</li>
<li class="list-inline-item">
<a href="https://www.youtube.com/watch?v=S95INavMofc" title="Beacon">RY X</a>
</li>
<li class="list-inline-item">
<a href="https://www.youtube.com/watch?v=wycjnCCgUes" title="Feels Like We Only Go Backwards">Tame Impala</a>
</li>
</ul>
Later on I turned Kirsle into a full Internet alias/fake name of
Casey Kirsle, which I used as my name for several years online (some of
my older Perl modules on CPAN are signed by this name). <em>That</em> was
mostly because I like the name Casey, and Kirsle could plausibly sound like
a last name. <img src="/static/smileys/tango/wink.png" alt=";)"><p>
<p>I'll add more when I'm motivated.</p>
<h2>Kirsle.net is Open Source</h2>
<h2>Geeky Stuff</h2>
The Python code that powers Kirsle.net is an open source project of mine named
<a href="http://rophako.kirsle.net/">Rophako</a>. It means "Website" in
<a href="/wizards/translator.html">Azulian</a>. The Rophako CMS is open source
software that I released under the GNU General Public License and you can
<a href="https://github.com/kirsle/rophako">clone it on GitHub</a>. The HTML
files for Kirsle.net are <a href="https://github.com/kirsle/kirsle.net">also
on GitHub</a>, but those probably aren't very interesting to you.<p>
<p>This website is open source. I wrote the back-end in Go this time at
<a href="https://github.com/kirsle/blog">kirsle/blog</a>, and my front-end
template files are readable <a href="https://github.com/kirsle/kirsle.net">on GitHub</a>
too. But those aren't very interesting.</p>
The CMS supports a web blog, photo albums, comments, and subscriptions to comments
(so that your guests can watch a comment thread for future posts by others). I'm
always improving it and adding new features.
<p>Having learned to make websites in the early 2000's, I think we should
return to the days of <a href="http://dynamicdrive.com/">Dynamic HTML</a>
instead of these overly bloated web applications. My website speaks <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol">HTTP</a>,
serves <a href="https://en.wikipedia.org/wiki/HTML">HTML</a> pages, has <code>&lt;form&gt;</code>s that actually <code>POST</code>,
and the little bits of JavaScript I add are to enhance the experience slightly.
My website works fine with all scripts disabled.</p>
<p>I somewhat miss the earlier Internet days when websites had background
images rather than racing to the bottom with simplicity. My website has been described as
"hipster," but I like it this way, and it's
<a href="https://validator.w3.org/check?uri=referer">HTML5 standards compliant</a>.
Usually.</p>
<h3>Privacy</h3>
In this post-<a href="https://en.wikipedia.org/wiki/Edward_Snowden">Snowden</a>
era, maybe we should be more privacy conscious. Kirsle.net does not use any third-party
advertisements or analytics tools. I <a href="/do-you-need-to-store-that-ip-address">don't want to know</a>
your IP address, either. My website handles its own blog comments, rather than
using something like Disqus, which invades your privacy as you visit the websites
that use it.
</div>
</div>

4
www/blog/tags.partial.gohtml
View File

@ -1,13 +1,13 @@
{{ if .IndexView }}
Sorted by most frequently used:
<ul>
<ul class="list-unstyled">
{{ range .Tags }}
<li><a href="/tagged/{{ .Name }}">{{ .Name }}</a> ({{ .Count }})</li>
{{ end }}
</ul>
{{ else }}
<ul>
<ul class="list-unstyled">
<li>&#0187; <a href="/archive">Blog Archives</a></li>
{{ range .Tags }}
{{ if ge .Count 8 }}

BIN
www/flare/blue-dust.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
www/flare/cjk-128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
www/flare/cjk-16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 791 B

BIN
www/flare/cjk-256.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
www/flare/cjk-32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
www/flare/cjk-48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
www/flare/cjk-96.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
www/flare/purple-star.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 825 KiB

BIN
www/flare/starscape.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

354
www/flare/ui.css Normal file
View File

@ -0,0 +1,354 @@
body {
background-color: #000000;
background-image: url("/flare/starscape.png");
background-attachment: fixed;
line-height: 1.6rem;
color: #BEBEBE;
margin: 0;
padding: 0;
}
a:link, a:visited {
color: #99CCFF;
text-decoration: underline;
}
a:hover, a:active {
color: #FFCCFF;
}
a img {
border: 0;
}
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-shadow: 0 0 10px #0099FF;
}
h2, h3, h4 {
color: #BBDDFF;
}
pre, code {
font-family: "Lucida Console", "DejaVu LGC Sans Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Ubuntu Mono", monospace;
color: #FF9900;
}
pre {
display: block;
background-color: rgba(0, 0, 0, 0.5);
border: 1px dashed #CCCCCC;
padding: 10px;
margin: 10px 5px;
max-height: 550px;
overflow: auto;
}
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 {
background-color: rgba(0, 0, 0, .5) !important;
border: 1px solid #999 !important;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
margin: 2px 0;
}
input:focus, textarea:focus, select:focus {
border: 1px solid #069 !important;
color: #FFF !important;
}
/* Bootstrap CSS overrides */
p {
margin: 10px 0;
}
.text-muted {
color: #959595 !important;
}
ul, ul ul, ol ul, ul ol, ol ol {
margin: 10px 0;
}
li > ul, li > ol {
/* embedded list */
margin: 0;
}
blockquote {
margin: 20px 0;
}
.card {
background-color: transparent;
border: 1px dashed #006699;
}
/* Mobile responsiveness */
.mobile-nav {
display: none;
}
@media (max-width: 990px) {
body {
background-image: url("/flare/blue-dust.png");
background-attachment: scroll;
}
.mobile-nav {
display: block;
position: absolute;
z-index: 100;
top: 10px;
right: 10px;
}
.wallpaper {
display: none;
}
}
/*******************************************************************************
* 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;
}
.markdown table,
table.table,
table.table th,
table.table td {
border: 1px solid #999999;
}
.markdown table,
table.table {
border-collapse: collapse;
border-spacing: 0;
margin: 10px 0px;
padding: 0px;
}
table.table-wide {
width: 100%;
}
.markdown table th,
table.table th {
background-color: #003366;
color: #FFFFFF;
text-align: left;
padding: 4px;
}
.markdown table tr:nth-child(even),
table.table tr:nth-child(even) {
background-color: #000000;
}
.markdown table tr:nth-child(odd),
table.table tr:nth-child(odd) {
background-color: #202020;
}
.markdown table td,
table.table td {
padding: 4px;
vertical-align: top;
text-align: left;
}
/* Make a photo look nice. */
.portrait, .markdown img {
display: inline;
background-color: #CFCFCF;
padding: 4px;
border: 1px solid #000000;
box-shadow: 0px 0px 4px #0099FF;
}
/* Responsive images in markdown */
.markdown img {
max-width: 100%;
height: auto;
}
/*******************************************************************************
* 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-title {
display: block;
padding-bottom: 0;
}
/* Blog titles when shown on index view */
a.blog-title:link, a.blog-title:visited {
font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
font-size: 32pt;
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
}
a.blog-title:hover, a.blog-title:active {
text-decoration: underline;
text-shadow: 0px 0px 10px #FF99FF;
-moz-text-shadow: 0px 0px 10px #FF99FF;
-webkit-text-shadow: 0px 0px 10px #FF99FF
}
.blog-meta .blog-private,
.blog-meta .blog-unlisted,
.blog-meta .blog-draft,
.blog-meta .blog-sticky {
font-weight: bold;
font-style: normal;
}
.blog-meta .blog-private,
.blog-meta .blog-unlisted {
color: #FF9900;
}
.blog-meta .blog-draft {
color: #00FFFF;
}
.blog-meta .blog-sticky {
color: #FF99FF;
}
/* Timestamp and author line below blog titles */
.blog-meta, .comment-meta {
font-size: smaller;
font-style: italic;
margin-top: 1rem;
margin-bottom: 2rem;
}
.comment-meta {
margin-top: 0;
margin-bottom: 1rem;
}
/* TODO */
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: "";
}
/*******************************************************************************
* Kirsle.net Flare Design *
******************************************************************************/
.wallpaper {
position: fixed;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
background-image: url("/flare/purple-star.jpg");
background-repeat: no-repeat;
z-index: 0;
}
.brand, .brand a {
text-align: center;
margin: 20px auto;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 24pt;
line-height: 48px;
font-style: italic;
text-decoration: none;
color: #FFFFFF;
}
.nav-panel, .content-panel {
background-color: rgba(0, 0, 0, 0.6);
}
.nav-panel h2 {
font-size: 18pt;
text-align: center;
border-bottom: 2px ridge #0099FF;
}
.content-panel {
border: 2px ridge #0099FF;
border-radius: 10px;
margin-top: 100px;
margin-left: 40px;
padding: 16px;
}
.copyright {
text-align: center;
font-size: smaller;
font-style: italic;
}
.copyright code {
color: inherit;
}
@media (max-width: 990px) {
.content-panel {
margin-left: 0;
margin-top: 20px;
}
}

26
www/index.gohtml
View File

@ -1,10 +1,28 @@
{{ define "title" }}Welcome!{{ end }}
{{ define "content" }}
<h1>Welcome!</h1>
<h1>Welcome to <em>Kirsle.net!</em></h1>
Welcome to <a href="http://www.kirsle.net/">Kirsle.net</a>! This is the personal
website of Noah Petherbridge, and it's where my various software projects and
web blog lives.<p>
This is the personal homepage of <a href="/about">Noah Petherbridge</a>, and
it's where I keep my web blog and various creative projects.<p>
I blog about anything I find interesting, and since I have a lot of varied
interests, my blog entries are kind of <em>all over the place.</em> You can
browse <a href="/tagged">my tags</a> to sort them by topic and
see which ones I frequently write about, or the <a href="/archive">archive</a>
has a complete history of my posts, dating back to 2008!<p>
Besides my blog, I have pages for my creative projects, which are linked to on
the <a href="#navbar">navigation bar</a>.<p>
I write a lot about <a href="/tagged/Linux">Linux</a> and <a href="/tagged/Android">Android</a>,
<a href="/tagged/Minecraft">Minecraft</a>,
and I like to
<a href="/tagged/Rant">rant</a> about stuff. Generally anything that
makes me <a href="/tagged/Curiosity">curious</a>.<p>
For the geeks: this website respects your privacy and doesn't run any third
party ads or analytics. This site speaks HTTP and doesn't require any JavaScript
to work.
{{ RenderIndex .Request "" "" }}