jason/ja.son-williams.ca
jason
/
ja.son-williams.ca
1
0
Fork 0
Code Issues 23 Pull Requests Projects 1 Wiki Activity

Updating channel list to use icons instead of a simple bulleted list. Also added toggles in preparation for #42 and #47. Closes #51.

This commit is contained in:
Jason Williams 2020-10-31 17:07:23 -06:00
parent 8b56ebf55e e576e8f566
commit a9b8c095c8
3 changed files with 306 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

530
www/themes/jason-williamsca/assets/css/theme.css
View File

@ -1,265 +1,267 @@
/* Variables */ /* Variables */
:root { :root {
--main-bg-color: #F2EDEA; --main-bg-color: #F2EDEA;
--main-accent-color: #302B44; --main-accent-color: #302B44;
--light-accent-color: #686283; --light-accent-color: #686283;
--xlight-accent-color: #88839C; --xlight-accent-color: #88839C;
--xxlight-accent-color: #FFFFFF; --xxlight-accent-color: #FFFFFF;
--alt-accent-color: #B05C71; --alt-accent-color: #B05C71;
--dark-alt-accent-color: #913A50; --dark-alt-accent-color: #913A50;
--title-font: 'Cinzel', serif; --title-font: 'Cinzel', serif;
--body-font: 'Raleway', sans-serif; --body-font: 'Raleway', sans-serif;
} }
/* Structural elements (including style for them) */ /* Structural elements (including style for them) */
html, body { height: 100%; } html, body { height: 100%; }
body { body {
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
font-family: var(--body-font); font-family: var(--body-font);
color: var(--main-accent-color); color: var(--main-accent-color);
} }
#page-content { #page-content {
flex: 1 0 auto; flex: 1 0 auto;
} }
#main-nav .navbar-brand { #main-nav .navbar-brand {
height: 4.5rem; height: 4.5rem;
padding-left: 100px; padding-left: 100px;
font-family: var(--title-font); font-family: var(--title-font);
font-size: 2.5rem; font-size: 2.5rem;
background-image: url('../images/jwlogo.svg'); background-image: url('../images/jwlogo.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 4.5rem; background-size: 4.5rem;
color: var(--main-accent-color); color: var(--main-accent-color);
word-spacing: -0.15em; word-spacing: -0.15em;
} }
footer { footer {
flex-shrink: 0; flex-shrink: 0;
background-color: var(--main-accent-color); background-color: var(--main-accent-color);
padding-top: 1rem; padding-top: 1rem;
} }
footer p, footer ul li { footer p, footer ul li {
color: var(--light-accent-color); color: var(--light-accent-color);
font-size: 0.8rem; font-size: 0.8rem;
} }
footer ul { footer ul {
margin-top: -1rem; margin-top: -1rem;
padding-left: 1.25rem; padding-left: 1.25rem;
} }
/* Responsive element spacing */ /* Responsive element spacing */
.container-fluid, #main-nav { .container-fluid, #main-nav {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
#main-nav { #main-nav {
padding-top: 1rem; padding-top: 1rem;
} }
footer, h1, h2 { footer, h1, h2 {
margin-top: 2rem; margin-top: 2rem;
} }
footer { footer {
margin-top: 2rem; margin-top: 2rem;
} }
/* Responsive element spacing - lg breakpoint */ /* Responsive element spacing - lg breakpoint */
@media (min-width: 992px) { @media (min-width: 992px) {
.container-fluid, #main-nav { .container-fluid, #main-nav {
padding-left: 3rem; padding-left: 3rem;
padding-right: 3rem; padding-right: 3rem;
} }
#main-nav { #main-nav {
padding-top: 3rem; padding-top: 3rem;
} }
footer, h1, h2 { footer, h1, h2 {
margin-top: 3rem; margin-top: 3rem;
} }
} }
/* Standard element styles */ /* Standard element styles */
h1.master { h1.master {
margin: 0; margin: 0;
font-family: var(--title-font); font-family: var(--title-font);
font-size: 3.5rem; font-size: 3.5rem;
word-spacing: -0.15em; word-spacing: -0.15em;
} }
h2 { h2 {
font-size: 1.5rem; font-size: 1.5rem;
} }
h3 { h3 {
font-size: 1rem; font-size: 1rem;
color: var(--dark-alt-accent-color); color: var(--dark-alt-accent-color);
} }
a { a {
color: var(--alt-accent-color); color: var(--alt-accent-color);
text-decoration: underline; text-decoration: underline;
} }
a.icon-link { a.icon-link {
display: inline-block; display: inline-block;
height: 1em; height: 1em;
color: var(--accent-color); color: var(--accent-color);
} }
a.btn { a.btn {
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: var(--dark-alt-accent-color); color: var(--dark-alt-accent-color);
text-decoration: none; text-decoration: none;
} }
/* Custom styles */ /* Custom styles */
html { overflow-x: hidden; overflow-y: scroll; } html { overflow-x: hidden; overflow-y: scroll; }
html::-webkit-scrollbar-track { html::-webkit-scrollbar-track {
background-color: rgba(48, 43, 68, 0.2); background-color: rgba(48, 43, 68, 0.2);
} }
html::-webkit-scrollbar { html::-webkit-scrollbar {
width: 0.5rem; width: 0.5rem;
background-color: rgba(48, 43, 68, 0.2); background-color: rgba(48, 43, 68, 0.2);
} }
html::-webkit-scrollbar-thumb { html::-webkit-scrollbar-thumb {
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgba(48, 43, 68, 0.5); background-color: rgba(48, 43, 68, 0.5);
} }
#main-nav .nav-item .nav-link { #main-nav .nav-item .nav-link {
color: rgba(48, 43, 68, 0.5); color: rgba(48, 43, 68, 0.5);
text-decoration: none; text-decoration: none;
} }
#main-nav .nav-item.active .nav-link { #main-nav .nav-item.active .nav-link {
color: var(--main-accent-color); color: var(--main-accent-color);
} }
#main-nav .nav-item .nav-link:hover { #main-nav .nav-item .nav-link:hover {
color: var(--alt-accent-color); color: var(--alt-accent-color);
} }
#side-nav .nav-link, footer a { #side-nav .nav-link, footer a {
text-decoration: none; text-decoration: none;
color: var(--xlight-accent-color); color: var(--xlight-accent-color);
} }
#side-nav .nav-link:hover, #side-nav .nav-link.active, footer a:hover, footer a.active { #side-nav .nav-link:hover, #side-nav .nav-link.active, footer a:hover, footer a.active {
color: var(--xxlight-accent-color); color: var(--xxlight-accent-color);
} }
.main, .card p.main, .card ul.main { .main, .card p.main, .card ul.main {
font-size: 1.2rem; font-size: 1.2rem;
} }
.col-container { .col-container {
margin: 0 -15px; margin: 0 -15px;
} }
.card { .card {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.social-icons { .social-icons {
font-size: 0; font-size: 0;
} }
.social-icons a { .social-icons a {
display: inline-block; display: inline-block;
height: 3.5rem; height: 3.5rem;
width: 3.5rem; width: 3.5rem;
background-color: var(--main-accent-color); background-color: var(--main-accent-color);
color: var(--main-bg-color); color: var(--main-bg-color);
text-align: center; text-align: center;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 3.5rem; line-height: 3.5rem;
margin-right: 0.25rem; margin-right: 0.25rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.social-icons a:hover { .social-icons a:hover {
background-color: var(--dark-alt-accent-color); background-color: var(--dark-alt-accent-color);
color: white; color: white;
} }
.card { .card {
color: rgba(0, 0, 0, 0.75); color: rgba(0, 0, 0, 0.75);
} }
.card h1, .card h2, .card h3 { .card h1, .card h2, .card h3 {
color: var(--main-accent-color); color: var(--main-accent-color);
margin-top: 0; margin-top: 0;
} }
.card p, .card ul { .card p, .card ul {
font-size: 0.9rem; font-size: 0.9rem;
} }
.card .feedcard-footer p, .card .feedcard-footer a { .card .feedcard-footer p, .card .feedcard-footer a {
margin-bottom: 0; margin-bottom: 0;
font-size: 0.75rem; font-size: 0.75rem;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
text-decoration: none; text-decoration: none;
} }
.card .feedcard-footer img { .card .feedcard-footer img {
height: 0.75rem; height: 0.75rem;
} }
.card .feedcard-footer .feedcard-itemtype { .card .feedcard-footer .feedcard-itemtype {
width: 33%; width: 33%;
text-align: right; text-align: right;
} }
.card .feedcard-footer .feedcard-attribution { .card .feedcard-footer .feedcard-attribution {
width: 67%; width: 67%;
} }
.altaccent { .altaccent {
color: var(--alt-accent-color); color: var(--alt-accent-color);
} }
/* Tag cloud styles */ a.feed-showonly { font-size: 0.75rem; color: var(--xlight-accent-color); }
div.jqcloud {
font-size: 0.5rem; /* Tag cloud styles */
line-height: normal; div.jqcloud {
} font-size: 0.5rem;
line-height: normal;
div.jqcloud a { }
color: inherit;
font-size: inherit; div.jqcloud a {
text-decoration: none color: inherit;
} font-size: inherit;
text-decoration: none
div.jqcloud a:hover { }
color: var(--dark-alt-accent-color);
} div.jqcloud a:hover {
color: var(--dark-alt-accent-color);
div.jqcloud span.w10 {font-size:550%; color: rgba(176, 92, 113, 1);} }
div.jqcloud span.w9 {font-size:500%; color: rgba(176, 92, 113, 0.95);}
div.jqcloud span.w8 {font-size:450%; color: rgba(176, 92, 113, 0.9);} div.jqcloud span.w10 {font-size:550%; color: rgba(176, 92, 113, 1);}
div.jqcloud span.w7 {font-size:400%; color: rgba(176, 92, 113, 0.85);} div.jqcloud span.w9 {font-size:500%; color: rgba(176, 92, 113, 0.95);}
div.jqcloud span.w6 {font-size:350%; color: rgba(176, 92, 113, 0.8);} div.jqcloud span.w8 {font-size:450%; color: rgba(176, 92, 113, 0.9);}
div.jqcloud span.w5 {font-size:300%; color: rgba(176, 92, 113, 0.75);} div.jqcloud span.w7 {font-size:400%; color: rgba(176, 92, 113, 0.85);}
div.jqcloud span.w4 {font-size:250%; color: rgba(176, 92, 113, 0.7);} div.jqcloud span.w6 {font-size:350%; color: rgba(176, 92, 113, 0.8);}
div.jqcloud span.w3 {font-size:200%; color: rgba(176, 92, 113, 0.65);} div.jqcloud span.w5 {font-size:300%; color: rgba(176, 92, 113, 0.75);}
div.jqcloud span.w2 {font-size:150%; color: rgba(176, 92, 113, 0.6);} div.jqcloud span.w4 {font-size:250%; color: rgba(176, 92, 113, 0.7);}
div.jqcloud span.w1 {font-size:100%; color: rgba(176, 92, 113, 0.55);} div.jqcloud span.w3 {font-size:200%; color: rgba(176, 92, 113, 0.65);}
div.jqcloud span.w2 {font-size:150%; color: rgba(176, 92, 113, 0.6);}
div.jqcloud{overflow:hidden;position:relative} div.jqcloud span.w1 {font-size:100%; color: rgba(176, 92, 113, 0.55);}
div.jqcloud{overflow:hidden;position:relative}
div.jqcloud span{padding:0} div.jqcloud span{padding:0}

7
www/themes/jason-williamsca/pages/feed.htm
View File

@ -16,9 +16,12 @@ includeEmpty = 0
<?php <?php
function onStart() function onStart()
{ {
if (empty($this->param('channel'))) $this['channelfilter'] = 'all';
else $this['channelfilter'] = explode(',', $this->param('channel'));
$this->addJs('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.js'); $this->addJs('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.js');
$this->addJs('assets/javascript/feedlayout.js'); $this->addJs('assets/javascript/feedlayout.js');
//$this->addCss('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.css'); //$this->addCss('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.css');
} }
?> ?>
== ==
@ -31,7 +34,7 @@ function onStart()
</div> </div>
<div class="col-lg-3"> <div class="col-lg-3">
<h2>Channels</h2> <h2>Channels</h2>
{% component 'ChannelList' %} {% partial 'feed/channels' %}
<h2>Tags</h2> <h2>Tags</h2>
<div id="tagcloud"><img src="{{ 'assets/images/loading.svg' | theme }}"></div> <div id="tagcloud"><img src="{{ 'assets/images/loading.svg' | theme }}"></div>

35
www/themes/jason-williamsca/partials/feed/channels.htm Normal file
View File

@ -0,0 +1,35 @@
==
{% for channel in channels %}
<!--<div class="custom-control custom-switch">
<input
type="checkbox"
class="custom-control-input channelswitch"
id="channel-{{ channel.slug }}"
data-channel="{{ channel.slug }}"
{% if channelfilter == 'all' or channel.slug in channelfilter %}checked{% endif %}
>
<label class="custom-control-label" for="channel-{{ channel.slug }}">
<i class="{{ channel.icon }} fa-fw" style="color: {{ channel.colour }};"></i>
{{ channel.title }}
</label>
<a
href="/feed/{{ channel.slug }}"
title="Show only {{ channel.title }} posts"
class="feed-showonly"
data-toggle="tooltip"
data-channel="{{ channel.slug }}"
><i class="far fa-eye"></i></a>
</div>-->
<div>
<i class="{{ channel.icon }} fa-fw" style="color: {{ channel.colour }};"></i>
{{ channel.title }}
<a
href="/feed/{{ channel.slug }}"
title="Show only {{ channel.title }} posts"
class="feed-showonly"
data-toggle="tooltip"
data-channel="{{ channel.slug }}"
><i class="far fa-eye"></i></a>
</div>
{% endfor %}