Commit 0a426dad authored by Robert Zenz's avatar Robert Zenz

#6 The stylesheets are now SCSS.

parent e8b84dbe
......@@ -23,16 +23,19 @@ if [ ! -d "$OUT" ]; then
mkdir "$OUT"
fi
# Create the needed style file.
styleFile="$OUT/index.css"
# Create the CSS file to be included in the header.
$TOOLCHAIN/sassc-linux-x64 \
--style compressed \
"$TEMPLATES/index.scss" \
"$OUT/index.css"
# Create the css file to be included in the header.
echo -n "<style>" > "$OUT/index.css"
cat "$TEMPLATES/index.css" \
| tr --delete "\n\t" \
| sed --regexp-extended "s/ ?([:,>{]) ?/\1/g" \
>> "$OUT/index.css"
echo -n "</style>" >> "$OUT/index.css"
# Create the header include file.
headerIncludes="$OUT/header-includes"
echo -n "<style>" > "$headerIncludes"
cat "$OUT/index.css" >> "$headerIncludes"
echo -n "</style>" >> "$headerIncludes"
# Run Pandoc.
$TOOLCHAIN/pandoc-linux-x64 \
......@@ -42,13 +45,14 @@ $TOOLCHAIN/pandoc-linux-x64 \
--eol=lf \
--template="$TEMPLATES/index.html" \
--lua-filter="$TOOLCHAIN/filter.lua" \
--include-in-header="$OUT/index.css" \
--include-in-header="$headerIncludes" \
--variable="DATE:$(date +%Y-%m-%d\ %H:%M:%S\ %::z)" \
--variable="GIT_REPO:https://gitlab.com/RobertZenz/bonsaimind.org" \
--variable="GIT_COMMIT:$(git rev-parse HEAD 2> /dev/null)" \
"$CONTENT/index.markdown"
# Cleanup
rm "$OUT/header-includes"
rm "$OUT/index.css"
# Copy the resource files.
......
/*
* Licensed under Public Domain or Creative Commons Zero.
*
* Copyright 2019 Robert'Bobby' Zenz
*/
$font: "DejaVu Sans", "Liberation Sans", "OpenSans", sans-serif;
$font-size-screen: 11pt;
$font-size-print: 10pt;
$title-color: $ALUMINIUM_5;
$title-font-size: 433%;
$title-height: 96px;
$section-color: $ALUMINIUM_4;
$card-primary-color: $ALUMINIUM_6;
$card-secondary-color: $ALUMINIUM_1;
$card-tertiary-color: $ALUMINIUM_4;
$card-links-primary-color: $WHITE;
$card-links-secondary-color: $ORANGE_3;
$card-links-tertiary-color: $ORANGE_3;
$card-links-primary-hover-color: $WHITE;
$card-links-secondary-hover-color: $ORANGE_2;
$card-links-tertiary-hover-color: $ORANGE_2;
$technologies-primary-color: $WHITE;
$technologies-secondary-color: $ALUMINIUM_5;
$technologies-tertiary-color: $ALUMINIUM_5;
$technologies-font-size: 66%;
$avatar-size: 192px;
$avatar-border-color: $ALUMINIUM_3;
/*
* Licensed under Public Domain or Creative Commons Zero.
*
* Copyright 2019 Robert'Bobby' Zenz
*/
/* Color definitions. */
$BLACK: #000000;
$WHITE: #ffffff;
/* Tango color definitions. */
$ALUMINIUM_1: #eeeeec;
$ALUMINIUM_2: #d3d7cf;
$ALUMINIUM_3: #babdb6;
$ALUMINIUM_4: #888a85;
$ALUMINIUM_5: #555753;
$ALUMINIUM_6: #2e3436;
$BUTTER_1: #fce94f;
$BUTTER_2: #edd400;
$BUTTER_3: #c4a000;
$CHAMELEON_1: #8ae234;
$CHAMELEON_2: #73d216;
$CHAMELEON_3: #4e9a06;
$CHOCOLATE_1: #e9b96e;
$CHOCOLATE_2: #c17d11;
$CHOCOLATE_3: #8f5902;
$ORANGE_1: #fcaf3e;
$ORANGE_2: #f57900;
$ORANGE_3: #ce5c00;
$PLUM_1: #ad7fa8;
$PLUM_2: #75507b;
$PLUM_3: #5c3566;
$SCARLET_RED_1: #ef2929;
$SCARLET_RED_2: #cc0000;
$SCARLET_RED_2: #a40000;
$SKY_BLUE_1: #729fcf;
$SKY_BLUE_2: #3465a4;
$SKY_BLUE_3: #204a87;
body {
background-color: #ffffff;
color: #2e3436;
font-family: "DejaVu Sans", "Liberation Sans", sans-serif;
padding: 0em;
}
a, a:hover, a:visited {
color: #2e3436;
text-decoration: underline #babdb6;
}
h1 {
color: #888a85;
display: flex;
font-size: 166%;
font-weight: normal;
margin: 0px;
padding-bottom: 0.16em;
padding-top: 0.66em;
width: 100%;
}
h1:after,
h1:before {
content: "";
border-bottom: 1px solid #888a85;
display: inline-block;
height: 0.66em;
vertical-align: middle;
}
h1:after {
margin-left: 0.33em;
width: 100%;
}
h1:before {
margin-right: 0.33em;
width: 3em;
}
h2 {
font-size: 133%;
font-weight: normal;
margin-bottom: 0em;
margin-top: 0px;
}
.card p {
flex: 1 0 auto;
font-size: 84%;
margin-bottom: 0.3em;
}
.header {
margin-left: auto;
margin-right: auto;
max-width: 48em;
}
.icon {
display: inline-block;
fill: currentColor;
height: 1em;
padding-bottom: 0.2em;
padding-right: 0.2em;
vertical-align: middle;
width: 1em;
}
.links > ul > li > a,
.links > ul > li > a:visited {
margin-top: 0.2em;
text-decoration: none;
padding: 0.28em 0.33em 0.16em 0.33em;
white-space: nowrap;
}
.links > ul > li > a:hover {
border: 1px solid #f57900;
text-decoration: none;
}
.links,
.links > ul {
margin: 0;
padding: 0;
}
.links > ul > li {
list-style: none;
padding-top: 0.7em;
}
.technologies,
.technologies > ul {
padding: 0;
margin: 0;
}
.technologies > ul > li {
color: #ffffff;
display: inline;
font-size: 66%;
list-style: none;
padding: 0.28em 0.66em 0.16em 0.66em;
white-space: nowrap;
}
#banner {
height: 96px;
padding: 0.0em 0.5em 0.5em 0.5em;
}
#logo {
float: left;
padding-left: 3em;
}
#section-about .card {
display: block;
height: auto;
width: 100%;
}
#section-about figure {
float: right;
height: 192px;
margin: 0;
padding: 0;
width: 192px;
}
#section-about figcaption {
display: none;
visibility: hidden;
}
#section-about img {
border: 1px solid #babdb6;
border-radius: 3px;
}
#section-about h2 {
margin-bottom: 0.2em;
}
#title {
color: #555753;
font-size: 433%;
line-height: 96px;
padding: 0.0em 0.5em;
text-align: center;
}
@media screen {
body {
font-size: 11pt;
}
.card {
background-color: #eeeeec;
border: 1px solid #888a85;
border-radius: 3px;
display: flex;
flex-direction: column;
margin: 0.5em;
padding: 0.5em;
text-align: left;
width: 21.33em;
}
.links > ul > li {
display: inline-block;
}
.links > ul > li > a,
.links > ul > li > a:visited {
border: 1px solid #ce5c00;
border-radius: 3px;
background-color: #ce5c00;
color: #ffffff;
}
.links > ul > li > a:hover {
background-color: #f57900;
border: 1px solid #f57900;
}
.section {
margin-left: auto;
margin-right: auto;
max-width: 72em;
text-align: center;
}
.section-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.technologies > ul > li {
background-color: #555753;
border: 1px solid #555753;
border-radius: 3px;
}
#section-about {
max-width: 48em;
width: auto;
}
#section-about .content {
display: flex;
flex-direction: column;
height: 192px;
}
}
@media print {
body {
font-size: 10pt;
}
a:after {
content: " (" attr(href) ") ";
font-size: 66%;
}
.card {
border-left: 0.2em solid #babdb6;
margin: 0.5em 1em;
padding: 1em;
page-break-inside: avoid;
width: 100%;
}
.links > ul > li > a,
.links > ul > li > a:visited {
border-left: 1px solid #ce5c00;
color: #2e3436;
}
.links > ul > li > a:hover {
background-color: #ffffff;
}
.section {
page-break-before: always;
width: 100%;
}
.technologies > ul > li {
border-left: 1px solid #555753;
}
#section-about {
page-break-before: avoid;
}
}
/*
* Licensed under Public Domain or Creative Commons Zero.
*
* Copyright 2019 Robert'Bobby' Zenz
*/
@import "constants.scss";
@import "configuration.scss";
body {
background-color: $WHITE;
color: $ALUMINIUM_6;
font-family: $font;
padding: 0em;
@media screen {
font-size: $font-size-screen;
}
@media print {
font-size: $font-size-print;
}
}
a,
a:hover,
a:visited {
color: $ALUMINIUM_6;
text-decoration: underline $ALUMINIUM_3;
@media print {
/* Add the link as additional text to the link. */
&:after {
content: " (" attr(href) ") ";
font-size: 66%;
}
}
}
h1 {
color: $section-color;
display: flex;
font-size: 166%;
font-weight: normal;
margin: 0px;
padding-bottom: 0.16em;
padding-top: 0.66em;
width: 100%;
/* The following rules add the left and right lines to the section
headers. */
&:after,
&:before {
content: "";
border-bottom: 1px solid $ALUMINIUM_4;
display: inline-block;
height: 0.66em;
vertical-align: middle;
}
&:after {
margin-left: 0.33em;
width: 100%;
}
&:before {
margin-right: 0.33em;
width: 3em;
}
}
h2 {
font-size: 133%;
font-weight: normal;
margin-bottom: 0em;
margin-top: 0px;
}
.card {
p {
flex: 1 0 auto;
font-size: 84%;
margin-bottom: 0.3em;
}
@media screen {
background-color: $card-secondary-color;
border: 1px solid $card-tertiary-color;
border-radius: 3px;
color: $card-primary-color;
display: flex;
flex-direction: column;
margin: 0.5em;
padding: 0.5em;
text-align: left;
width: 21.33em;
}
@media print {
border-left: 0.2em solid $card-tertiary-color;
margin: 0.5em 1em;
padding: 1em;
page-break-inside: avoid;
width: 100%
}
}
.header {
margin-left: auto;
margin-right: auto;
max-width: 48em;
}
.icon {
display: inline-block;
fill: currentColor;
height: 1em;
padding-bottom: 0.2em;
padding-right: 0.2em;
vertical-align: middle;
width: 1em;
}
.links {
margin: 0;
padding: 0;
ul {
margin: 0;
padding: 0;
li {
list-style: none;
padding-top: 0.7em;
a,
a:visited {
margin-top: 0.2em;
text-decoration: none;
padding: 0.28em 0.33em 0.16em 0.33em;
white-space: nowrap;
@media screen {
border: 1px solid $card-links-tertiary-color;
border-radius: 3px;
background-color: $card-links-secondary-color;
color: $card-links-primary-color;
}
@media print {
border-left: 1px solid $card-links-tertiary-color;
color: $ALUMINIUM_6;
}
}
a:hover {
background-color: $card-links-secondary-hover-color;
border: 1px solid $card-links-tertiary-hover-color;
text-decoration: none;
}
@media screen {
display: inline-block;
}
@media print {
}
}
}
}
.section {
@media screen {
margin-left: auto;
margin-right: auto;
max-width: 72em;
text-align: center;
}
@media print {
page-break-before: always;
width: 100%;
}
}
.section-wrapper {
@media screen {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
.technologies {
padding: 0;
margin: 0;
ul {
padding: 0;
margin: 0;
li {
display: inline;
font-size: $technologies-font-size;
list-style: none;
padding: 0.28em 0.66em 0.16em 0.66em;
white-space: nowrap;
@media screen {
background-color: $technologies-secondary-color;
border: 1px solid $technologies-tertiary-color;
border-radius: 3px;
color: $technologies-primary-color;
}
@media print {
background-color: $technologies-primary-color;
border-left: 1px solid $technologies-tertiary-color;
color: $technologies-secondary-color;
}
}
}
}
#banner {
height: $title-height;
padding: 0.0em 0.5em 0.5em 0.5em;
}
#logo {
float: left;
padding-left: 3em;
}
/* "Special" rules for the about section. */
#section-about {
figcaption {
display: none;
visibility: hidden;
}
figure {
float: right;
height: $avatar-size;
margin: 0;
padding: 0;
width: $avatar-size;
}
h2 {
margin-bottom: 0.2em;
}
img {
border: 1px solid $avatar-border-color;
border-radius: 3px;
}
.card {
display: block;
height: auto;
width: 100%;
}
@media screen {
max-width: 48em;
width: auto;
.content {
display: flex;
flex-direction: column;
height: $avatar-size;
}
}
@media print {
page-break-before: avoid;
}
}
#title {
color: $title-color;
font-size: $title-font-size;
line-height: $title-height;
padding: 0.0em 0.5em;
text-align: center;
}
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