apps/rophako
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add better default theme

Browse Source
This commit is contained in:
Noah 2014-04-09 21:58:21 -07:00
parent c9b9799589
commit d4f3a00837
8 changed files with 429 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
rophako/www/css/style.css
View File

@ -1,88 +0,0 @@
/******************************************************************************
* "Resets" - styles on HTML tags *
******************************************************************************/
body {
background-color: #FFFFFF;
font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #000000;
width: 850px;
margin: 20px auto;
}
h1, h2, h3, h4 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
margin: 12px 0px;
}
h1 {
font-size: 32pt;
margin-top: 0px;
}
h2 {
font-size: 28pt;
}
h3 {
font-size: 24pt;
}
h4 {
font-size: 18pt;
}
a:link, a:visited {
color: #006699;
text-decoration: underline;
}
header {
display: block;
padding: 12px;
border: 1px solid #000000;
margin-bottom: 40px;
box-shadow: 1px 1px 5px #000000;
border-radius: 12px;
}
header h1 {
font-size: 46pt;
text-align: center;
color: #0099FF;
text-shadow: 2px 2px 2px #000099;
}
nav {
float: left;
width: 200px;
border: 1px solid #000000;
border-radius: 12px;
}
nav ul {
list-style-type: none;
padding: 8px;
margin: 0px;
}
nav ul li {
padding: 2px 0px;
}
nav ul li.header {
font-weight: bold;
}
div#content {
float: right;
width: 620px;
}
div.clear {
clear: both;
}
footer {
clear: both;
margin-top: 40px;
padding: 12px;
text-align: center;
color: #707070;
border: 1px solid #000000;
border-radius: 12px;
}

72
rophako/www/index.html
View File

@ -4,7 +4,77 @@
<h1>Welcome!</h1>
This is the Rophako CMS!<p>
This is the Rophako CMS! It's a simple web app framework written in Python that
supports a web blog, photo albums, and a commenting system. It's open source
software released under the GNU General Public License version 2. It was
designed by Noah Petherbridge to power his personal website and blog,
<a href="http://www.kirsle.net/" target="_blank">Kirsle.net</a>, but it's
also designed to be easily reusable for getting any website up and running
quickly.<p>
<a href="https://github.com/kirsle/rophako" target="_blank">Clone it at
Github!</a><p>
<h2>Features</h2>
<ul>
<li><strong>Web Blog</strong>
<ul>
<li>Rophako's primary feature, apart from being a general content
management system, is to be a web blog. The blog supports having
multiple authors and having multiple avatars (you can upload an
avatar for each topic your blog covers, and select the avatar when
you post an entry).</li>
<li>There's a built-in RSS feed for the blog so your readers can
follow it in their RSS readers.</li>
<li>Tag your blog posts with a list of categories and enable your
readers to use them to read just the posts they're interested in.</li>
<li>Blog posts can be commented on by guests on the Internet.</li>
<li>Include graphical emoticons in your blog posts!</li>
</ul></li>
<li><strong>Photo Albums</strong>
<ul>
<li>Upload as many pictures as you want to photo albums on your site.
The default settings allow for having relatively high-resolution
photos (800 pixels wide), and thumbnailing is done automatically.</li>
<li>The staff user accounts on your site can pick a photo from the
albums to be "their" profile photo, which will be used on their
blog posts and comments (if they don't select one of the blog
avatars instead).</li>
<li>Photos, like blog posts, can be commented on.</li>
<li>Drag-and-drop user interface to rearrange your photos and photo
albums.</li>
</ul></li>
<li><strong>Comments</strong>
<ul>
<li>Comments can be left by anyone on the Internet. A reverse CAPTCHA
is used that stops random spam bots from posting comments.</li>
<li>Comments can include graphical emoticons, like blog posts.</li>
<li>Commenters can subscribe to a comment thread when they post, so that
they'll receive e-mail notifications when somebody else replies to
that thread. Unsubscribing is easy, too.</li>
<li>If a commenter leaves their e-mail address,
<a href="http://www.gravatar.com/" target="_blank">Gravatar</a>
avatars are used. If they don't have a Gravatar, you can specify
the default fall-back avatar to use.</li>
</ul></li>
<li><strong>Dual Template System</strong>
<ul>
<li>When Rophako wants to show the user a page, it first looks in your
custom site's template folder before defaulting to its built-in
templates.</li>
<li>All of Rophako's core features (including this page!) have templates
built in. So, you don't need to write any HTML code to get blogs,
photo albums and everything else working!</li>
<li>If you want to customize Rophako's built-in pages (for example, the
blog templates), you can just add files to your custom site's folder
with the same file names. Rophako will use your templates instead
of its own!</li>
</ul></li>
</ul>
{{ include_page("blog.partial_index") | safe }}

19
rophako/www/layout.html
View File

@ -3,20 +3,24 @@
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/smoke/style.css">
</head>
<body>
<header>
<h1>Rophako</h1>
<a href="/">
<img src="/smoke/firemarble.png" width="161" height="169" alt="Logo">
</a>
<span>Rophako</span>
</header>
<nav>
<ul>
<li class="header">:: Navigation</li>
<li><a href="/">Home</a></li>
<li><a href="#">About Rophako</a></li>
<li><a href="#">Download</a></li>
<li><a href="/photos/albums">Photo Albums</a></li>
<li><a href="https://github.com/kirsle/rophako" target="_blank">View on Github</a></li>
<li><a href="https://github.com/kirsle/rophako/archive/master.zip">Download</a></li>
<li class="header">:: Site Admin</li>
{% if session["login"] %}
@ -29,18 +33,17 @@
<div id="content">
{% block content %}{% endblock %}
</div>
<div class="clear"></div>
<footer>
<div>
&copy; 2014 Noah Petherbridge. Web design released along with the Rophako CMS
under the GNU General Public License v2.0.<br>
<a href="https://github.com/kirsle/rophako" target="_blank">
{{ app["name"] }} v{{ app["version"] }}
</a>
</div>
</footer>
</div>
<script type="text/javascript" src="/js/jquery-2.1.0.min.js"></script>
{% block scripts %}{% endblock %}

BIN
rophako/www/smoke/firemarble.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
rophako/www/smoke/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
rophako/www/smoke/navbg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
rophako/www/smoke/navhead.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

340
rophako/www/smoke/style.css Normal file
View File

@ -0,0 +1,340 @@
/******************************************************************************
* Rophako CMS - Smoke Theme *
******************************************************************************/
/*********************
* HTML Resets
*********************/
body {
background-image: url("navbg.png");
background-position: 0 0;
background-repeat: repeat-y;
background-color: #CFCFCF;
font-family: Ubuntu,Verdana,Arial,Helvetica,sans-serif;
font-size: small;
color: #000000;
margin: 0;
padding: 0;
}
a:link, a:visited {
color: #FF4400;
text-decoration: underline;
}
a img {
border: 0;
}
h1,
h2,
h3,
h4 {
font-weight: bold;
color: #000000;
text-shadow: 2px 2px 4px #FF4444;
padding: 0;
margin: 15px 0;
}
h1 {
font-size: 34pt;
}
h1:first-of-type {
margin-top: 0;
}
h2 {
font-size: 28pt;
}
h3 {
font-size: 24pt;
}
h4 {
font-size: 18pt;
}
fieldset {
display: block;
border: 1px solid #666666;
}
fieldset legend {
font-weight: bold;
}
/*********************
* Classes used by core Rophako pages. You'll want to
* implement these in your custom layout.
*********************/
.right {
text-align: right;
}
.center {
text-align: center;
}
.clear {
clear: both;
}
table.table,
table.table th,
table.table td {
border: 1px solid #999999;
}
table.table {
border-collapse: collapse;
border-spacing: 0;
margin: 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;
}
/* 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;
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;
}
/* Make a photo look nice. */
.portrait {
display: inline;
background-color: #CFCFCF;
padding: 4px;
border: 1px solid #000000;
box-shadow: 0px 0px 4px #FF4444;
}
/* Blog titles when shown on index view */
a.blog-title-index:link, a.blog-title-index:visited {
font-size: 32pt;
font-weight: bold;
color: #000000;
text-decoration: none;
text-shadow: 2px 2px 4px #FF4444;
}
a.blog-title-index:hover, a.blog-title-index:active {
text-decoration: underline;
text-shadow: 2px 2px 4px #FF4444;
}
/* Poster's avatar box */
.blog-author, .comment-author {
float: right;
background-color: #999999;
border: 1px solid #000000;
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-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
}
/*********************
* Smoke Theme UI
*********************/
header {
display: block;
background-image: url("header.png");
background-position: left bottom;
background-repeat: repeat-x;
margin: 0;
height: 174px;
}
header img {
position: absolute;
top: 0px;
left: 16px;
width: 161px;
height: 169px;
}
header span {
font-size: 72pt;
font-weight: bold;
font-style: italic;
line-height: 169px;
color: #CFCFCF;
margin-left: 220px;
}
nav {
position: absolute;
top: 180px;
left: 0px;
width: 200px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: block;
line-height: 1.5em;
padding-left: 10px;
color: #FFFFFF;
}
nav ul li.header {
background-image: url("navhead.png");
background-repeat: no-repeat;
height: 34px;
line-height: 34px;
font-weight: bold;
color: #000000;
margin: 8px 0px;
}
nav a:link, nav a:visited {
color: #FFFFFF;
text-decoration: none;
}
nav a:hover, nav a:active {
text-decoration: underline;
}
#content {
position: absolute;
top: 180px;
left: 220px;
right: 20px;
}
footer {
display: block;
text-align: center;
font-weight: bold;
color: #666666;
margin: 40px 0px;
}
footer div {
display: block;
width: 400px;
margin: auto;
}
footer a:link, footer a:visited {
color: #666666;
}