Skip to content

Commit e2d5c03

Browse files
toderashtoderash
authored
add fairpm planet theme (#12)
Signed-off-by: Brent Toderash <brent@toderash.net>
1 parent cb95021 commit e2d5c03

4 files changed

Lines changed: 368 additions & 2 deletions

File tree

‎config.ini‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ activity_threshold = 180
1616

1717
date_format = %B %d, %Y %I:%M %p %Z
1818
new_date_format = %B %d, %Y
19-
output_theme = classic_fancy
19+
output_theme = fairpm
2020

2121
[https://buddypress.org/feed/]
2222
name = BuddyPress
@@ -58,4 +58,4 @@ name = WordPress Project Blog
5858
name = The Repository
5959

6060
[https://fair.pm/feed/]
61-
name = FAIR Package Manager
61+
name = FAIR Package Manager

‎venus/themes/fairpm/config.ini‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# This theme is based on classic_fancy which is based on the one contained in Planet V2.0.
2+
# It demonstrates that one can mix the use of htmltmpl and xslt templates.
3+
4+
# edited to (somewhat) match fair.pm styles
5+
6+
[Planet]
7+
template_files:
8+
atom.xml.xslt
9+
foafroll.xml.xslt
10+
index.html.tmpl
11+
opml.xml.xslt
12+
rss10.xml.tmpl
13+
rss20.xml.tmpl
14+
15+
template_directories:
16+
../common
17+
18+
bill_of_materials:
19+
planet.css
20+
images/feed-icon-10x10.png
21+
images/logo.png
22+
images/planet.png

‎venus/themes/fairpm/index.html.tmpl‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2+
<html>
3+
4+
### fairpm Planet HTML template
5+
### (was) Fancy Planet HTML template.
6+
###
7+
### When combined with the stylesheet and images in the output/ directory
8+
### of the Planet source, this gives you a much prettier result than the
9+
### default examples template and demonstrates how to use the config file
10+
### to support things like faces
11+
###
12+
### For documentation on the more boring template elements, see
13+
### examples/config.ini and examples/index.html.tmpl in the Planet source.
14+
15+
<head>
16+
<title><TMPL_VAR name></title>
17+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
18+
<meta name="generator" content="<TMPL_VAR generator ESCAPE="HTML">">
19+
<link rel="stylesheet" href="planet.css" type="text/css">
20+
<TMPL_IF feedtype>
21+
<link rel="alternate" href="<TMPL_VAR feed ESCAPE="HTML">" title="<TMPL_VAR channel_title_plain ESCAPE="HTML">" type="application/<TMPL_VAR feedtype>+xml">
22+
</TMPL_IF>
23+
</head>
24+
25+
<body>
26+
27+
<div id="page" class="site">
28+
<header class="site-header">
29+
<div class="site-branding">
30+
<div class="site-title">
31+
<a href="https://fair.pm/" rel="home" aria-current="page">
32+
<svg width="32px" height="32px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1,.cls-2{fill:none;stroke:#fff;stroke-linecap:round;stroke-width:1.5px;}.cls-1{stroke-linejoin:bevel;}.cls-2{stroke-linejoin:round;}</style></defs><g id="ic-folder-download"><line class="cls-1" x1="17" y1="11.93" x2="17" y2="22.07"></line><path class="cls-1" d="M14,19.31l2.58,2.57a.62.62,0,0,0,.89,0L20,19.35"></path><path class="cls-2" d="M8,20.3H4a2,2,0,0,1-2-2V7.3H20a2,2,0,0,1,2,2"></path><path class="cls-2" d="M2,11.1v-6a1,1,0,0,1,.91-1h8.86a.89.89,0,0,1,.64.29L14,7.3"></path></g></svg> FAIR </a>
33+
</div>
34+
<p class="site-description">
35+
Federated and Independent Repositories </p>
36+
</div>
37+
<nav id="nav" class="nav-primary nav-menu" aria-label="Main">
38+
<div id="menu-items-wrapper" class="menu-items-wrapper" style="top: 0px; height: auto;">
39+
<ul id="main-menu" class="menu-items" itemscope="" itemtype="http://www.schema.org/SiteNavigationElement"><li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-11 current_page_item active menu-item-32"><a itemprop="url" href="https://fair.pm/" class="nav-link" aria-current="page"><span itemprop="name">fair.pm</span></a></li></ul>
40+
</div>
41+
</nav>
42+
</header>
43+
44+
<h1><TMPL_VAR name></h1>
45+
<TMPL_VAR admin>
46+
47+
<TMPL_LOOP Items>
48+
<TMPL_IF new_date>
49+
<TMPL_UNLESS __FIRST__>
50+
### End <div class="channelgroup">
51+
</div>
52+
### End <div class="daygroup">
53+
</div>
54+
</TMPL_UNLESS>
55+
<div class="daygroup">
56+
<h2><TMPL_VAR new_date></h2>
57+
</TMPL_IF>
58+
59+
<TMPL_IF new_channel>
60+
<TMPL_UNLESS new_date>
61+
### End <div class="channelgroup">
62+
</div>
63+
</TMPL_UNLESS>
64+
<div class="channelgroup">
65+
66+
### Planet provides template variables for *all* configuration options for
67+
### the channel (and defaults), even if it doesn't know about them. We
68+
### exploit this here to add hackergotchi faces to our channels. Planet
69+
### doesn't know about the "face", "facewidth" and "faceheight" configuration
70+
### variables, but makes them available to us anyway.
71+
72+
<h3><a href="<TMPL_VAR channel_link ESCAPE="HTML">" title="<TMPL_VAR channel_title_plain ESCAPE="HTML">"><TMPL_VAR channel_name></a></h3>
73+
<TMPL_IF channel_face>
74+
<img class="face" src="images/<TMPL_VAR channel_face ESCAPE="HTML">" width="<TMPL_VAR channel_facewidth ESCAPE="HTML">" height="<TMPL_VAR channel_faceheight ESCAPE="HTML">" alt="">
75+
</TMPL_IF>
76+
</TMPL_IF>
77+
78+
79+
<div class="entrygroup" id="<TMPL_VAR id>"<TMPL_IF channel_language> lang="<TMPL_VAR channel_language>"</TMPL_IF>>
80+
<TMPL_IF title>
81+
<h4<TMPL_IF title_language> lang="<TMPL_VAR title_language>"</TMPL_IF>><a href="<TMPL_VAR link ESCAPE="HTML">"><TMPL_VAR title></a></h4>
82+
</TMPL_IF>
83+
<div class="entry"><a class="overlay" href="<TEMPL_VAR link ESCAPE="HTML">"></a>
84+
<div class="content"<TMPL_IF content_language> lang="<TMPL_VAR content_language>"</TMPL_IF>>
85+
<TMPL_VAR content>
86+
<a class="button" href="<TEMPL_VAR link ESCAPE="HTML">">Read Post at <TEMPL_VAR channel_name></a>
87+
</div>
88+
89+
### Planet also makes available all of the information from the feed
90+
### that it can. Use the 'planet-cache' tool on the cache file for
91+
### a particular feed to find out what additional keys it supports.
92+
### Comment extra fields are 'author' and 'category' which we
93+
### demonstrate below.
94+
95+
<p class="date">
96+
<a href="<TMPL_VAR link ESCAPE="HTML">"><TMPL_IF author>by <TMPL_VAR author ESCAPE="HTML"> at </TMPL_IF><TMPL_VAR date><TMPL_IF category> under <TMPL_VAR category></TMPL_IF></a>
97+
</p>
98+
</div>
99+
</div>
100+
101+
<TMPL_IF __LAST__>
102+
### End <div class="channelgroup">
103+
</div>
104+
### End <div class="daygroup">
105+
</div>
106+
</TMPL_IF>
107+
</TMPL_LOOP>
108+
109+
110+
<div class="sidebar">
111+
112+
<h2>Subscriptions</h2>
113+
<ul>
114+
<TMPL_LOOP Channels>
115+
<li>
116+
[<a href="<TMPL_VAR url ESCAPE="HTML">" title="subscribe">RSS</a>] <a <TMPL_IF link>href="<TMPL_VAR link ESCAPE="HTML">" </TMPL_IF><TMPL_IF message>class="message" title="<TMPL_VAR message ESCAPE="HTML">"</TMPL_IF><TMPL_UNLESS message>title="<TMPL_VAR title_plain ESCAPE="HTML">"</TMPL_UNLESS>><TMPL_VAR name></a>
117+
</li>
118+
</TMPL_LOOP>
119+
</ul>
120+
121+
<p>
122+
<span>
123+
<strong>Last updated:</strong><br>
124+
<TMPL_VAR date><br>
125+
<em>All times are UTC.</em><br>
126+
<br>
127+
Powered by:<br>
128+
<a href="http://www.planetplanet.org/"><img src="images/planet.png" width="80" height="15" alt="Planet" border="0"></a>
129+
</span>
130+
</p>
131+
132+
</div>
133+
</div><!-- #page .site -->
134+
</body>
135+
136+
</html>

‎venus/themes/fairpm/planet.css‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
2+
body {
3+
margin-right: 300px;
4+
padding-left: 20px;
5+
padding-right: 20px;
6+
font-family: "Mona Sans", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
7+
font-size: 1.2rem;
8+
font-weight: 400;
9+
line-height: 1.7;
10+
text-rendering: geometricPrecision;
11+
}
12+
.site {
13+
margin-left: auto;
14+
margin-right: auto;
15+
max-width: 100%;
16+
overflow: hidden;
17+
position: relative;
18+
}
19+
#page .site-header {
20+
background: #0073aa;
21+
align-items: center;
22+
}
23+
.site-header .site-branding {
24+
display: flex;
25+
align-items: last baseline;
26+
gap: 1rem;
27+
flex-wrap: wrap;
28+
}
29+
.site-header ul {
30+
list-style: none;
31+
}
32+
.site-header a {
33+
color: #fff;
34+
}
35+
a {
36+
color: #0049d1;
37+
text-decoration: underline;
38+
text-underline-offset: 0.275rem;
39+
transition: all 150ms;
40+
text-decoration-thickness: 4px;
41+
}
42+
a:hover {
43+
text-decoration-thickness: 8px;
44+
}
45+
.daygroup {
46+
max-width: 960px;
47+
margin-left: auto;
48+
margin-right: auto;
49+
}
50+
.channelgroup {
51+
margin-left: 1.5rem;
52+
position: relative;
53+
}
54+
.channelgroup .entry {
55+
margin-left: 1.5rem;
56+
}
57+
.entrygroup {
58+
padding: 0 1.5rem;
59+
}
60+
.entry {
61+
margin-top: .5rem;
62+
height: calc( 1.2rem * 5 );
63+
overflow: hidden;
64+
position: relative;
65+
}
66+
.entry::before {
67+
display: block;
68+
content: "";
69+
position: absolute;
70+
z-index: 5;
71+
width: 100%;
72+
height: 100%;
73+
background: linear-gradient(180deg,rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .5) 80%, rgba(255, 255, 255, 1) 95%);
74+
}
75+
.entry * {
76+
font-weight: 300 !important;
77+
font-size: .95rem;
78+
line-height: 1.2em;
79+
margin: 0;
80+
padding: 0;
81+
}
82+
.entry a {
83+
color: inherit;
84+
text-decoration: none;
85+
}
86+
.entry img, .entry figure, .entry iframe, .entry embed {
87+
display: none !important; /* yes it's a poor hack */
88+
}
89+
.channelgroup a.button {
90+
display: inline-block;
91+
background-color: #0073aa;
92+
color: #fff;
93+
font-weight: 600;
94+
font-size: 1rem;
95+
padding: .7ch 1.2ch;
96+
position: absolute;
97+
z-index: 9;
98+
bottom: 1rem;
99+
right: 20%;
100+
border-radius: 6px;
101+
}
102+
103+
104+
h1 {
105+
margin-top: 0px;
106+
padding-top: 20px;
107+
font-weight: normal;
108+
text-align: right;
109+
color: grey;
110+
}
111+
112+
.admin {
113+
text-align: right;
114+
}
115+
116+
h2 {
117+
font-weight: normal;
118+
color: #200080;
119+
font-size: 1.2rem;
120+
}
121+
h3 {
122+
font-weight: normal;
123+
background-color: #0073aa;
124+
padding: 6px 1ch;
125+
border-radius: 6px;
126+
font-size: 1.3rem;
127+
}
128+
h3 a {
129+
color: #fff;
130+
}
131+
h4 {
132+
font-weight: 400;
133+
margin: .0;
134+
font-size: 1.1rem;
135+
}
136+
h4 a {
137+
color: inherit;
138+
}
139+
140+
img.face { display: none; }
141+
142+
.entry {
143+
margin-bottom: 2em;
144+
}
145+
.entry .date {
146+
color: grey;
147+
font-size: .9em;
148+
}
149+
.entry .date a {
150+
color: inherit;
151+
}
152+
153+
.sidebar {
154+
position: absolute;
155+
top: 0px;
156+
right: 0px;
157+
width: 300px;
158+
margin-left: 0px;
159+
margin-right: 0px;
160+
padding-right: 0px;
161+
padding-top: 20px;
162+
padding-left: 0px;
163+
font-size: 85%;
164+
}
165+
.sidebar h2 {
166+
font-size: 110%;
167+
font-weight: bold;
168+
padding-left: 5px;
169+
margin-left: 0px;
170+
}
171+
.sidebar ul {
172+
padding-left: 1em;
173+
margin-left: 0px;
174+
list-style-type: none;
175+
border-left: 2px solid #0049d1;
176+
}
177+
.sidebar ul li:hover {
178+
color: grey;
179+
}
180+
.sidebar ul li a {
181+
text-decoration: none;
182+
}
183+
.sidebar ul li a img {
184+
border: 0;
185+
}
186+
.sidebar p {
187+
border-top: 1px solid grey;
188+
margin-top: 30px;
189+
padding-top: 10px;
190+
padding-left: 5;
191+
}
192+
.sidebar > p > span {
193+
display: block;
194+
padding-left: 15px;
195+
margin-left: -5px;
196+
border-left: 2px solid #0049d1;
197+
}
198+
.sidebar .message {
199+
cursor: help;
200+
border-bottom: 1px dashed red;
201+
}
202+
.sidebar a.message:hover {
203+
cursor: help;
204+
background-color: #ff0000;
205+
color: #ffffff !important;
206+
text-decoration: none !important;
207+
}
208+

0 commit comments

Comments
 (0)