Commit 9701f5a5 authored by colm's avatar colm

Postcss integration:

* a package.json for npm intalling of postcss
* a new definition in our pelican-balsa pelican plugin
→ runs postcss on pelican.signals.finalised routine
* generates a post- appended version of the css file
* use this postcss processed file in the base template
parent 99c84dcd
{
"name": "work.balsamine.www",
"version": "1.0.0",
"description": "Balsamine rebuild 2017 ![logo-balsa](content/images/logo-balsa-16-17-large.svg)",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git@gitlab.constantvzw.org:osp/work.balsamine.www.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"caniuse-db": "^1.0.30000670",
"postcss": "^6.0.1",
"postcss-cli": "^4.0.0",
"postcss-cssnext": "^2.11.0"
}
}
......@@ -2,6 +2,7 @@ import os
from pelican import signals
from pelican.readers import METADATA_PROCESSORS
from pelican.utils import get_date
import subprocess, shlex
def add_metadata_processors(arg):
......@@ -19,7 +20,13 @@ def test(pelican):
# call("yuicompressor {} --charset utf-8 {} -o {}".format(
# verbose, filepath, filepath), shell=True)
def process_css(pelican):
cssfile = str(pelican.settings['OUTPUT_PATH'] + '/theme/css/' + pelican.settings['CSS_FILE'])
cssout = str(pelican.settings['OUTPUT_PATH'] + '/theme/css/post-' + pelican.settings['CSS_FILE'])
cmd = str("postcss " + cssfile + " -m --output " + cssout)
call_params = shlex.split(cmd)
subprocess.call(call_params)
def register():
signals.initialized.connect(add_metadata_processors)
# signals.finalized.connect(test)
signals.finalized.connect(process_css)
/* ==========================================================================
Fonts
========================================================================== */
@font-face {
font-family: 'Ume Vertical Wide Bridge';
font-weight: normal;
font-style: normal;
src: url('../fonts/ume-vertical-wide-bridge-webfont.woff2') format('woff2'), url('../fonts/ume-vertical-wide-bridge-webfont.woff') format('woff');
}
@font-face {
font-family: 'Ume Vertical Wide Oblique';
font-weight: normal;
font-style: normal;
src: url('../fonts/ume-vertical-wide-oblique-webfont.woff2') format('woff2'), url('../fonts/ume-vertical-wide-oblique-webfont.woff') format('woff');
}
@font-face {
font-family: 'Ume P Gothic Balsa';
font-weight: normal;
font-style: normal;
src: url('../fonts/ume-p-gothic_balsa-webfont.woff2') format('woff2'), url('../fonts/ume-p-gothic_balsa-webfont.woff') format('woff');
}
/* ==========================================================================
Reset
========================================================================== */
html {
font-size: 16px;
line-height: 1.375em;
}
body {
font-family: 'Ume Vertical Wide Bridge';
font-size: 1em;
line-height: 1.375em;
}
a {
text-decoration: inherit;
color: inherit;
}
em { font-family: 'Ume Vertical Wide Oblique'; }
strong { font-weight: bold; }
/* ==========================================================================
General structure
========================================================================== */
/* Main Header
========================================================================== */
.main-header {
position: fixed;
top: 100vh;
left: 0;
box-sizing: border-box;
width: 100vh;
height: 40px;
padding-left: 40px;
transform: rotate(-90deg);
transform-origin: top left;
text-align: right;
outline: 2px solid blue;
font-size: 14px;
line-height: 40px;
direction: rtl;
}
.logo {
max-height: 34px;
padding-left: 10px;
vertical-align: middle;
}
/* mainmenu */
.main-nav,
.main-menu,
.main-menu li { display: inline; }
.main-menu li + li:before { content: '\00B7\00A0'; }
/* Main Footer
========================================================================== */
.main-footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
height: 40px;
outline: 2px solid blue;
line-height: 40px;
}
.address {
display: inline-block;
box-sizing: border-box;
width: 100vw;
padding-right: 5px;
text-align: right;
vertical-align: middle;
font-size: 10px;
line-height: 1;
}
.address > span { display: block; }
.address > span > span + span::before { content: '\00B7\00A0'; }
/* Main area
========================================================================== */
/**
* The main area of the page is everything but the main header and footer. In
* other words, this is everything inside the "box".
*/
.main-area {
position: fixed;
top: 0;
right: 0;
bottom: 40px;
left: 40px;
overflow: auto;
}
@media only screen and (max-width: 479px) {
.main-area {
font-size: .75em;
line-height: 1.375em;
}
}
/* Main content
========================================================================== */
@media only screen and (min-width: 480px) {
.main-content {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 70%;
}
}
/* ==========================================================================
Schedule
========================================================================== */
/**
* The schedule module is made out has two parts:
*
* 1. the list of events;
* 2. a timeline widget onto which is plotted the dates of the events.
*
* Below is the toplevel structure of the module
*
* <section class="schedule">
* <div class="schedule__list">...</div>
* <div class="schedule__timeline timeline"></div>
* </section>
*/
.schedule { position: relative; }
.schedule__list { padding-right: 30px; }
.schedule__item {
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 2em;
color: blue;
font-size: 10px;
line-height: 1.3;
}
.schedule__item + .schedule__item { border-top: 2px solid blue; }
.schedule__subhead {
margin-bottom: .4em;
line-height: 1;
}
.schedule__dates {
float: right;
font-family: 'Ume P Gothic Balsa';
font-size: 2em;
line-height: 1;
}
.schedule__title {
font-size: 2em;
line-height: 1;
}
.schedule__authors {
margin-top: .4em;
margin-bottom: .4em;
line-height: 1;
}
.schedule__main-image { text-align: right; }
.schedule__main-image img {
max-width: 75%;
margin-top: 1em;
margin-bottom: 1em;
}
.schedule__body { display: none; }
.schedule__body:target { display: block; }
.schedule__body p + p,
.schedule__body blockquote + p,
.schedule__body p + blockquote { margin-top: 1em; }
.schedule__body blockquote { padding-left: 2em; }
.schedule__body blockquote footer:before { content: "– "; }
.schedule__body dl {
margin-top: 1.3em;
margin-bottom: 1.3em;
padding-left: 25%;
}
.schedule__body dd { padding-left: 1em; }
.schedule__timeline {
/* position: fixed; */
top: 0;
right: 0;
width: 30px;
height: calc(100vh - 40px);
background: linear-gradient(to bottom, #1e5799 0%, #ff3232 25%, #ff328e 50%, #32c5ff 75%, #2989d8 100%, #207cca 100%, #7db9e8 100%);
}
@media only screen and (min-width: 480px) {
.schedule {
position: fixed;
top: 0;
right: 0;
bottom: 40px;
overflow: hidden;
box-sizing: border-box;
width: 30%;
border-left: 2px solid blue;
}
.schedule__list { position: absolute; }
}
/* timeline */
.timeline__year {
position: absolute;
top: 0px;
right: 30px;
height: 30px;
padding-right: .5em;
transform: rotate(-90deg);
transform-origin: top right;
text-align: right;
font-size: 10px;
line-height: 30px;
}
.timeline__month {
position: absolute;
top: 30px;
right: 30px;
height: 30px;
padding-top: 10px;
padding-right: .5em;
transform: rotate(-90deg);
transform-origin: top right;
text-align: right;
border-right: 1px solid black;
font-size: 10px;
line-height: 20px;
}
.timeline__point {
position: absolute;
right: 15px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: white;
}
/* ==========================================================================
Show detail
========================================================================== */
.show-detail__header {
box-sizing: border-box;
height: 100vh;
padding: 2rem;
color: blue;
border-right: 2px solid blue;
}
.show-detail__image img { max-width: 75%; }
.show-detail__body {
box-sizing: border-box;
padding: 2rem;
color: blue;
}
.show-detail__body p + p,
.show-detail__body blockquote + p,
.show-detail__body p + blockquote { margin-top: 1em; }
.show-detail__body blockquote { padding-left: 2em; }
.show-detail__body blockquote footer:before { content: "– "; }
.show-detail__body dl {
margin-top: 1.3em;
margin-bottom: 1.3em;
padding-left: 25%;
}
.show-detail__body dd { padding-left: 1em; }
@media only screen and (min-width: 480px) {
.show-detail__header {
float: left;
width: 40%;
}
.show-detail__body {
float: left;
width: 60%;
}
}
/* ==========================================================================
General pages
========================================================================== */
.page-detail { padding: 1em; }
.page-detail { color: blue; }
.page-detail dl { column-width: 15em; }
.page-detail dt { break-after: avoid-column; }
.page-detail dd { break-before: avoid-column; }
.page-detail dd { break-inside: avoid-column; }
.page-detail img {
max-width: 100%;
margin-top: 1em;
margin-bottom: 1em;
}
.page-detail p + p img { margin-left: -3em; }
/* ==========================================================================
???
========================================================================== */
.content h1 {
margin-top: 0em;
margin-bottom: 0.40740741em;
font-size: 3.375em;
line-height: 0.81481482em;
}
.content h2 {
margin-top: 0.91666667em;
margin-bottom: 0em;
font-size: 1.5em;
line-height: 1.83333334em;
}
.content h3 {
margin-top: 0.91666667em;
margin-bottom: 0em;
font-size: 1.5em;
line-height: 1.83333333em;
}
.content h4 {
margin-top: 1.375em;
margin-bottom: 0em;
font-size: 1em;
line-height: 1.375em;
}
.content h5 {
margin-top: 1.375em;
margin-bottom: 0em;
font-size: 1em;
line-height: 1.375em;
}
.content p,
.content ul,
.content ol,
.content pre,
.content table,
.content blockquote {
margin-top: 0em;
margin-bottom: 0em;
}
.content p + p { text-indent: 3em; }
.content ul ul,
.content ol ol,
.content ul ol,
.content ol ul {
margin-top: 0em;
margin-bottom: 0em;
}
/* Let's make sure all's aligned */
.content hr {
margin: -1px 0;
border: 1px solid;
}
.content a,
.content b,
.content i,
.content strong,
.content em,
.content small,
.content code { line-height: 0; }
.content sub,
.content sup {
position: relative;
vertical-align: baseline;
line-height: 0;
}
.content sup { top: -0.5em; }
.content sub { bottom: -0.25em; }
.content dd { padding-left: 3em; }
.content li:before { content: "- "; }
.content pre {
margin-top: 1em;
padding: 1em;
color: black;
border: 1px solid blue;
font-family: monospace;
}
/* ==========================================================================
Slideshow
========================================================================== */
.jcarousel {
position: relative;
overflow: hidden;
width: 100%;
}
.jcarousel-inner {
position: relative;
width: 10000%;
}
.jcarousel-item {
float: left;
width: 1%;
}
.jcarousel-item img { width: 100%; }
.jcarousel-item figcaption {
}
.jcarousel-controls {
position: absolute;
top: 50%;
width: 100%;
background-color: yellow;
}
.jcarousel-control-prev,
.jcarousel-control-next {
position: absolute;
top: -15px;
display: block;
width: 30px;
height: 30px;
text-align: center;
text-decoration: none;
color: white;
background-color: @color;
font-weight: bold;
}
.jcarousel-control-prev:hover,
.jcarousel-control-next:hover {
color: black;
background-color: aliceblue;
}
.jcarousel-control-prev { left: 10px; }
.jcarousel-control-next { right: 10px; }
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
cursor: default;
opacity: .5;
}
.nojcarousel-item {
opacity: 0.5;
border-bottom: 1px dotted red;
}
.nojcarousel-item.active { opacity: 1; }
.jcarousel-inner a { border: none !important; }
/*# sourceMappingURL=post-balsa.css.map */
\ No newline at end of file
......@@ -9,7 +9,7 @@
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/reset.css">
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}">
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/post-{{ CSS_FILE }}">
<!-- <link rel="stylesheet" href="http://sorgalla.com/jcarousel/examples/basic/jcarousel.basic.css"> -->
{% endblock head %}
</head>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment