diff --git a/www/themes/jason-williamsca/assets/css/theme.css b/www/themes/jason-williamsca/assets/css/theme.css index a225392..bc9f02c 100644 --- a/www/themes/jason-williamsca/assets/css/theme.css +++ b/www/themes/jason-williamsca/assets/css/theme.css @@ -1,265 +1,267 @@ -/* Variables */ -:root { - --main-bg-color: #F2EDEA; - --main-accent-color: #302B44; - --light-accent-color: #686283; - --xlight-accent-color: #88839C; - --xxlight-accent-color: #FFFFFF; - --alt-accent-color: #B05C71; - --dark-alt-accent-color: #913A50; - --title-font: 'Cinzel', serif; - --body-font: 'Raleway', sans-serif; -} - -/* Structural elements (including style for them) */ -html, body { height: 100%; } - -body { - background-color: var(--main-bg-color); - font-family: var(--body-font); - color: var(--main-accent-color); -} - -#page-content { - flex: 1 0 auto; -} - -#main-nav .navbar-brand { - height: 4.5rem; - padding-left: 100px; - font-family: var(--title-font); - font-size: 2.5rem; - background-image: url('../images/jwlogo.svg'); - background-repeat: no-repeat; - background-size: 4.5rem; - color: var(--main-accent-color); - word-spacing: -0.15em; -} - -footer { - flex-shrink: 0; - background-color: var(--main-accent-color); - padding-top: 1rem; -} - -footer p, footer ul li { - color: var(--light-accent-color); - font-size: 0.8rem; -} - -footer ul { - margin-top: -1rem; - padding-left: 1.25rem; -} - -/* Responsive element spacing */ -.container-fluid, #main-nav { - padding-left: 1rem; - padding-right: 1rem; -} - -#main-nav { - padding-top: 1rem; -} - -footer, h1, h2 { - margin-top: 2rem; -} - -footer { - margin-top: 2rem; -} - -/* Responsive element spacing - lg breakpoint */ -@media (min-width: 992px) { - .container-fluid, #main-nav { - padding-left: 3rem; - padding-right: 3rem; - } - - #main-nav { - padding-top: 3rem; - } - - footer, h1, h2 { - margin-top: 3rem; - } -} - -/* Standard element styles */ -h1.master { - margin: 0; - font-family: var(--title-font); - font-size: 3.5rem; - word-spacing: -0.15em; -} - -h2 { - font-size: 1.5rem; -} - -h3 { - font-size: 1rem; - color: var(--dark-alt-accent-color); -} - -a { - color: var(--alt-accent-color); - text-decoration: underline; -} - -a.icon-link { - display: inline-block; - height: 1em; - color: var(--accent-color); -} - -a.btn { - text-decoration: none; -} - -a:hover { - color: var(--dark-alt-accent-color); - text-decoration: none; -} - -/* Custom styles */ -html { overflow-x: hidden; overflow-y: scroll; } - -html::-webkit-scrollbar-track { - background-color: rgba(48, 43, 68, 0.2); -} - -html::-webkit-scrollbar { - width: 0.5rem; - background-color: rgba(48, 43, 68, 0.2); -} - -html::-webkit-scrollbar-thumb { - border-radius: 0.5rem; - background-color: rgba(48, 43, 68, 0.5); -} - -#main-nav .nav-item .nav-link { - color: rgba(48, 43, 68, 0.5); - text-decoration: none; -} - -#main-nav .nav-item.active .nav-link { - color: var(--main-accent-color); -} - -#main-nav .nav-item .nav-link:hover { - color: var(--alt-accent-color); -} - -#side-nav .nav-link, footer a { - text-decoration: none; - color: var(--xlight-accent-color); -} - -#side-nav .nav-link:hover, #side-nav .nav-link.active, footer a:hover, footer a.active { - color: var(--xxlight-accent-color); -} - -.main, .card p.main, .card ul.main { - font-size: 1.2rem; -} - -.col-container { - margin: 0 -15px; -} - -.card { - margin-bottom: 2rem; -} - -.social-icons { - font-size: 0; -} - -.social-icons a { - display: inline-block; - height: 3.5rem; - width: 3.5rem; - background-color: var(--main-accent-color); - color: var(--main-bg-color); - text-align: center; - font-size: 1.5rem; - line-height: 3.5rem; - margin-right: 0.25rem; - margin-bottom: 0.25rem; -} - -.social-icons a:hover { - background-color: var(--dark-alt-accent-color); - color: white; -} - -.card { - color: rgba(0, 0, 0, 0.75); -} - -.card h1, .card h2, .card h3 { - color: var(--main-accent-color); - margin-top: 0; -} - -.card p, .card ul { - font-size: 0.9rem; -} - -.card .feedcard-footer p, .card .feedcard-footer a { - margin-bottom: 0; - font-size: 0.75rem; - color: rgba(0, 0, 0, 0.5); - text-decoration: none; -} - -.card .feedcard-footer img { - height: 0.75rem; -} - -.card .feedcard-footer .feedcard-itemtype { - width: 33%; - text-align: right; -} - -.card .feedcard-footer .feedcard-attribution { - width: 67%; -} - -.altaccent { - color: var(--alt-accent-color); -} - -/* Tag cloud styles */ -div.jqcloud { - font-size: 0.5rem; - line-height: normal; -} - -div.jqcloud a { - color: inherit; - font-size: inherit; - text-decoration: none -} - -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.w7 {font-size:400%; color: rgba(176, 92, 113, 0.85);} -div.jqcloud span.w6 {font-size:350%; color: rgba(176, 92, 113, 0.8);} -div.jqcloud span.w5 {font-size:300%; color: rgba(176, 92, 113, 0.75);} -div.jqcloud span.w4 {font-size:250%; color: rgba(176, 92, 113, 0.7);} -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 span.w1 {font-size:100%; color: rgba(176, 92, 113, 0.55);} - -div.jqcloud{overflow:hidden;position:relative} - +/* Variables */ +:root { + --main-bg-color: #F2EDEA; + --main-accent-color: #302B44; + --light-accent-color: #686283; + --xlight-accent-color: #88839C; + --xxlight-accent-color: #FFFFFF; + --alt-accent-color: #B05C71; + --dark-alt-accent-color: #913A50; + --title-font: 'Cinzel', serif; + --body-font: 'Raleway', sans-serif; +} + +/* Structural elements (including style for them) */ +html, body { height: 100%; } + +body { + background-color: var(--main-bg-color); + font-family: var(--body-font); + color: var(--main-accent-color); +} + +#page-content { + flex: 1 0 auto; +} + +#main-nav .navbar-brand { + height: 4.5rem; + padding-left: 100px; + font-family: var(--title-font); + font-size: 2.5rem; + background-image: url('../images/jwlogo.svg'); + background-repeat: no-repeat; + background-size: 4.5rem; + color: var(--main-accent-color); + word-spacing: -0.15em; +} + +footer { + flex-shrink: 0; + background-color: var(--main-accent-color); + padding-top: 1rem; +} + +footer p, footer ul li { + color: var(--light-accent-color); + font-size: 0.8rem; +} + +footer ul { + margin-top: -1rem; + padding-left: 1.25rem; +} + +/* Responsive element spacing */ +.container-fluid, #main-nav { + padding-left: 1rem; + padding-right: 1rem; +} + +#main-nav { + padding-top: 1rem; +} + +footer, h1, h2 { + margin-top: 2rem; +} + +footer { + margin-top: 2rem; +} + +/* Responsive element spacing - lg breakpoint */ +@media (min-width: 992px) { + .container-fluid, #main-nav { + padding-left: 3rem; + padding-right: 3rem; + } + + #main-nav { + padding-top: 3rem; + } + + footer, h1, h2 { + margin-top: 3rem; + } +} + +/* Standard element styles */ +h1.master { + margin: 0; + font-family: var(--title-font); + font-size: 3.5rem; + word-spacing: -0.15em; +} + +h2 { + font-size: 1.5rem; +} + +h3 { + font-size: 1rem; + color: var(--dark-alt-accent-color); +} + +a { + color: var(--alt-accent-color); + text-decoration: underline; +} + +a.icon-link { + display: inline-block; + height: 1em; + color: var(--accent-color); +} + +a.btn { + text-decoration: none; +} + +a:hover { + color: var(--dark-alt-accent-color); + text-decoration: none; +} + +/* Custom styles */ +html { overflow-x: hidden; overflow-y: scroll; } + +html::-webkit-scrollbar-track { + background-color: rgba(48, 43, 68, 0.2); +} + +html::-webkit-scrollbar { + width: 0.5rem; + background-color: rgba(48, 43, 68, 0.2); +} + +html::-webkit-scrollbar-thumb { + border-radius: 0.5rem; + background-color: rgba(48, 43, 68, 0.5); +} + +#main-nav .nav-item .nav-link { + color: rgba(48, 43, 68, 0.5); + text-decoration: none; +} + +#main-nav .nav-item.active .nav-link { + color: var(--main-accent-color); +} + +#main-nav .nav-item .nav-link:hover { + color: var(--alt-accent-color); +} + +#side-nav .nav-link, footer a { + text-decoration: none; + color: var(--xlight-accent-color); +} + +#side-nav .nav-link:hover, #side-nav .nav-link.active, footer a:hover, footer a.active { + color: var(--xxlight-accent-color); +} + +.main, .card p.main, .card ul.main { + font-size: 1.2rem; +} + +.col-container { + margin: 0 -15px; +} + +.card { + margin-bottom: 2rem; +} + +.social-icons { + font-size: 0; +} + +.social-icons a { + display: inline-block; + height: 3.5rem; + width: 3.5rem; + background-color: var(--main-accent-color); + color: var(--main-bg-color); + text-align: center; + font-size: 1.5rem; + line-height: 3.5rem; + margin-right: 0.25rem; + margin-bottom: 0.25rem; +} + +.social-icons a:hover { + background-color: var(--dark-alt-accent-color); + color: white; +} + +.card { + color: rgba(0, 0, 0, 0.75); +} + +.card h1, .card h2, .card h3 { + color: var(--main-accent-color); + margin-top: 0; +} + +.card p, .card ul { + font-size: 0.9rem; +} + +.card .feedcard-footer p, .card .feedcard-footer a { + margin-bottom: 0; + font-size: 0.75rem; + color: rgba(0, 0, 0, 0.5); + text-decoration: none; +} + +.card .feedcard-footer img { + height: 0.75rem; +} + +.card .feedcard-footer .feedcard-itemtype { + width: 33%; + text-align: right; +} + +.card .feedcard-footer .feedcard-attribution { + width: 67%; +} + +.altaccent { + color: var(--alt-accent-color); +} + +a.feed-showonly { font-size: 0.75rem; color: var(--xlight-accent-color); } + +/* Tag cloud styles */ +div.jqcloud { + font-size: 0.5rem; + line-height: normal; +} + +div.jqcloud a { + color: inherit; + font-size: inherit; + text-decoration: none +} + +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.w7 {font-size:400%; color: rgba(176, 92, 113, 0.85);} +div.jqcloud span.w6 {font-size:350%; color: rgba(176, 92, 113, 0.8);} +div.jqcloud span.w5 {font-size:300%; color: rgba(176, 92, 113, 0.75);} +div.jqcloud span.w4 {font-size:250%; color: rgba(176, 92, 113, 0.7);} +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 span.w1 {font-size:100%; color: rgba(176, 92, 113, 0.55);} + +div.jqcloud{overflow:hidden;position:relative} + div.jqcloud span{padding:0} \ No newline at end of file diff --git a/www/themes/jason-williamsca/pages/feed.htm b/www/themes/jason-williamsca/pages/feed.htm index 28879d3..6f60546 100644 --- a/www/themes/jason-williamsca/pages/feed.htm +++ b/www/themes/jason-williamsca/pages/feed.htm @@ -16,9 +16,12 @@ includeEmpty = 0 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('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()

Channels

- {% component 'ChannelList' %} + {% partial 'feed/channels' %}

Tags

diff --git a/www/themes/jason-williamsca/partials/feed/channels.htm b/www/themes/jason-williamsca/partials/feed/channels.htm new file mode 100644 index 0000000..0579647 --- /dev/null +++ b/www/themes/jason-williamsca/partials/feed/channels.htm @@ -0,0 +1,35 @@ +== +{% for channel in channels %} + + +
+ + {{ channel.title }} + +
+{% endfor %} \ No newline at end of file