jeff/jeffs-pelican-theme
1
0
Fork 0
Code Issues Pull requests Releases 2 Packages Activity

It is close now

Browse source
This commit is contained in:
Jeff MacKinnon 2022-07-07 10:39:09 -03:00
parent c582ca4b1f
commit b9663c2e07
4 changed files with 180 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
README.rst
View file

@ -7,30 +7,38 @@ The base pelican theme for my site, `jeffmackinnon.com <https://jeffmackinnon.co
There are some variables that you can add to the ``pelicanconf.py`` file that make things look good. There are some variables that you can add to the ``pelicanconf.py`` file that make things look good.
.. code:: python .. code:: python
# #
# JeffTheme variables # Theme variables
# #
#THEME_COLOUR = 'css-blue' # Leave commented except for the blue option like jmkengineering.com
## The search things ## The search things
DUCKDUCKGOSEARCHURL = '' # The URL of your site DUCKDUCKGOSEARCHURL = 'Your URL'
## Sidebar things BIO_IMAGE = 'image' # Make sure that this is in the "images" folder
BIO_IMAGE = '' # Make sure that this is in the "images" folder
## The Social Things ## The Social Things
SOCIAL_SHARE = True
SOCIAL_TWITTER = 'jeffmackinnon' SOCIAL_TWITTER = 'jeffmackinnon'
SOCIAL_GITHUB = 'Jeffmackinnon' SOCIAL_GITHUB = 'jeffmackinnon'
SOCIAL_LINKEDIN = 'jeffmackinnon' SOCIAL_LINKEDIN = 'jeffmackinnon'
SOCIAL_FLICKR = 'jeffmackinnon' SOCIAL_MASTODON = 'https://bluenoser.me/@Jeff'
SOCIAL_MASTODON = 'https://mastodon.social/@jeffmackinnon'
MICROBLOG = 'microblog' # This isn't used for anything .... yet but I'm thinking of adding a mini-posts for JUST the category here to the sidebar
#Contact Things #SOCIAL_FLICKR = ''
CONTACT_PHONE_NUM = '' #MICROBLOG = ''
CONTACT_EMAIL = '' CONTACT_PHONE_NUM = '+# (###) ###-####'
CONTACT_HOME_ADDR = '' CONTACT_EMAIL = 'name@url.tld'
CONTACT_BUSINESS_ADDR ='' #CONTACT_HOME_ADDR = ''
#CONTACT_BUSINESS_ADDR =''
THEME_COLOUR = 'css-blue' # There are only 2 colours right now, pink and blue. Pink is Default
SITELICENSE = '<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.' # Change to what you want.
#
#Frontpage customization
#
TAGLINEHEAD = 'This is a header'
TAGLINE = 'This is the tagline'
CORNERSTONE_CONTENT = True # If true add the html you want in include/cornerstone.html
NEWSLETTER = '' # Put the HTML or JS from your provider here.
INCLUDECATEGORY = True # This includes the Category in the article list
MOREBUTTON = True #This adds the "MORE" to the article list
# That's all folks
You can copy the entire thing into your ``pelicanconf.py`` file and make the changes for your site. You can copy the entire thing into your ``pelicanconf.py`` file and make the changes for your site.

159
static/css-blue/main.css
View file

@ -3,10 +3,35 @@
@import url(../css-include/pygment.css); @import url(../css-include/pygment.css);
@import url(../css-include/pelican.css); @import url(../css-include/pelican.css);
/* setting up colours */
/* Colors */
:root {
--body-colour: #000000;
--body-background: #fff;
--style-colour: #004360;
--header-colour: #3d4449;
--placeholder-colour: #9fa3a6;
--input-colour: #7f888f;
--white: #fff;
--light-blue: #cee4ff;
--light-pink: #ef9eff;
--base-pink: #e45dff;
--base-green: #93e836;
--base-yellow: #fffc7a;
--midlight-blue: #93d9eb;
--base-blue: #33c6ee;
--base-dark: #041417;
}
/* /*
Editorial by HTML5 UP Editorial by HTML5 UP
html5up.net | @ajlkn html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) Free for personal anghhhhhvbd commercial use under the CCA 3.0 license (html5up.net/license)
*/ */
html, body, div, span, applet, object, html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
@ -82,7 +107,7 @@ html {
box-sizing: inherit; } box-sizing: inherit; }
body { body {
background: #ffffff; } background: var(--body-background); }
body.is-preload *, body.is-preload *:before, body.is-preload *:after, body.is-resizing *, body.is-resizing *:before, body.is-resizing *:after { body.is-preload *, body.is-preload *:before, body.is-preload *:after, body.is-resizing *, body.is-resizing *:before, body.is-resizing *:after {
-moz-animation: none !important; -moz-animation: none !important;
-webkit-animation: none !important; -webkit-animation: none !important;
@ -95,7 +120,7 @@ body {
/* Type */ /* Type */
body, input, select, textarea { body, input, select, textarea {
color: #000000; color: var(--body-colour);
font-family: Georgia, 'Times New Roman', Times, sans-serif; font-family: Georgia, 'Times New Roman', Times, sans-serif;
font-size: 13pt; font-size: 13pt;
font-weight: 500; font-weight: 500;
@ -116,26 +141,26 @@ a {
-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
border-bottom: dotted 1px; border-bottom: dotted 1px;
color: #004360; color: var(--style-colour);
text-decoration: none; } text-decoration: none; }
a:hover { a:hover {
border-bottom-color: #004360; border-bottom-color: var(--style-colour);
color: #004360 !important; } color: var(--style-colour) !important; }
a:hover strong { a:hover strong {
color: inherit; } color: inherit; }
strong, b { strong, b {
color: #3d4449; color: var(--header-colour);
font-weight: 600; } font-weight: 600; }
em, i { em, i {
font-style: italic; } font-style: italic; }
p { p {
margin: 0 0 2em 0; } margin: 1em 0 1em 0; }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: #3d4449; color: var(--header-colour);
font-family: "Roboto Slab", serif; font-family: "Roboto Slab", serif;
font-weight: 700; font-weight: 700;
line-height: 1.5; line-height: 1.5;
@ -1002,7 +1027,7 @@ header p {
text-transform: uppercase; } text-transform: uppercase; }
header.major > :last-child { header.major > :last-child {
border-bottom: solid 3px #004360; border-bottom: solid 3px var(--style-colour);
display: inline-block; display: inline-block;
margin: 0 0 2em 0; margin: 0 0 2em 0;
padding: 0 0.75em 0.5em 0; } padding: 0 0.75em 0.5em 0; }
@ -1015,7 +1040,7 @@ form {
margin: 0 0 2em 0; } margin: 0 0 2em 0; }
label { label {
color: #3d4449; color: var(--header-colour);
display: block; display: block;
font-size: 0.9em; font-size: 0.9em;
font-weight: 600; font-weight: 600;
@ -1033,7 +1058,7 @@ textarea {
-webkit-appearance: none; -webkit-appearance: none;
-ms-appearance: none; -ms-appearance: none;
appearance: none; appearance: none;
background: #ffffff; background: var(--white);
border-radius: 0.375em; border-radius: 0.375em;
border: none; border: none;
border: solid 1px rgba(210, 215, 217, 0.75); border: solid 1px rgba(210, 215, 217, 0.75);
@ -1060,8 +1085,8 @@ textarea {
input[type="url"]:focus, input[type="url"]:focus,
select:focus, select:focus,
textarea:focus { textarea:focus {
border-color: #004360; border-color: var(--style-colour);
box-shadow: 0 0 0 1px #004360; } box-shadow: 0 0 0 1px var(--style-colour); }
select { select {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(210, 215, 217, 0.75)' /%3E%3C/svg%3E"); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(210, 215, 217, 0.75)' /%3E%3C/svg%3E");
@ -1072,8 +1097,8 @@ select {
padding-right: 2.75em; padding-right: 2.75em;
text-overflow: ellipsis; } text-overflow: ellipsis; }
select option { select option {
color: #3d4449; color: var(--header-colour);
background: #ffffff; } background: var(--white); }
select:focus::-ms-value { select:focus::-ms-value {
background-color: transparent; } background-color: transparent; }
select::-ms-expand { select::-ms-expand {
@ -1106,7 +1131,7 @@ input[type="radio"] {
input[type="checkbox"] + label, input[type="checkbox"] + label,
input[type="radio"] + label { input[type="radio"] + label {
text-decoration: none; text-decoration: none;
color: #7f888f; color: var(--input-colour);
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-size: 1em; font-size: 1em;
@ -1128,7 +1153,7 @@ input[type="radio"] {
font-weight: 900; } font-weight: 900; }
input[type="checkbox"] + label:before, input[type="checkbox"] + label:before,
input[type="radio"] + label:before { input[type="radio"] + label:before {
background: #ffffff; background: var(--white);
border-radius: 0.375em; border-radius: 0.375em;
border: solid 1px rgba(210, 215, 217, 0.75); border: solid 1px rgba(210, 215, 217, 0.75);
content: ''; content: '';
@ -1143,14 +1168,14 @@ input[type="radio"] {
width: 2.0625em; } width: 2.0625em; }
input[type="checkbox"]:checked + label:before, input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before { input[type="radio"]:checked + label:before {
background: #3d4449; background: var(--header-colour);
border-color: #3d4449; border-color: var(--header-colour);
color: #ffffff; color: var(--white);
content: '\f00c'; } content: '\f00c'; }
input[type="checkbox"]:focus + label:before, input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before { input[type="radio"]:focus + label:before {
border-color: #004360; border-color: var(--style-colour);
box-shadow: 0 0 0 1px #004360; } box-shadow: 0 0 0 1px var(--style-colour); }
input[type="checkbox"] + label:before { input[type="checkbox"] + label:before {
border-radius: 0.375em; } border-radius: 0.375em; }
@ -1159,19 +1184,19 @@ input[type="radio"] + label:before {
border-radius: 100%; } border-radius: 100%; }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: #9fa3a6 !important; color: var(--placeholder-colour) !important;
opacity: 1.0; } opacity: 1.0; }
:-moz-placeholder { :-moz-placeholder {
color: #9fa3a6 !important; color: var(--placeholder-colour) !important;
opacity: 1.0; } opacity: 1.0; }
::-moz-placeholder { ::-moz-placeholder {
color: #9fa3a6 !important; color: var(--placeholder-colour) !important;
opacity: 1.0; } opacity: 1.0; }
:-ms-input-placeholder { :-ms-input-placeholder {
color: #9fa3a6 !important; color: var(--placeholder-colour) !important;
opacity: 1.0; } opacity: 1.0; }
/* Box */ /* Box */
@ -1219,10 +1244,12 @@ input[type="radio"] + label:before {
border-radius: 0.375em; border-radius: 0.375em;
border: 0; border: 0;
display: inline-block; display: inline-block;
position: relative; } position: relative;
}
.image img { .image img {
border-radius: 0.375em; border-radius: 0.375em;
display: block; } display: block;
max-width: 100%; }
.image.left, .image.right { .image.left, .image.right {
max-width: 40%; } max-width: 40%; }
.image.left img, .image.right img { .image.left img, .image.right img {
@ -1380,7 +1407,7 @@ ul.contact {
font-family: 'Font Awesome 5 Free'; font-family: 'Font Awesome 5 Free';
font-weight: 400; } font-weight: 400; }
ul.contact li:before { ul.contact li:before {
color: #004360; color: var(--style-colour);
display: inline-block; display: inline-block;
font-size: 1.5em; font-size: 1.5em;
height: 1.125em; height: 1.125em;
@ -1425,8 +1452,8 @@ ul.pagination {
padding: 0 0.5em; padding: 0 0.5em;
text-align: center; } text-align: center; }
ul.pagination li > .page.active { ul.pagination li > .page.active {
background-color: #004360; background-color: var(--style-colour);
color: #ffffff !important; } color: var(--white) !important; }
ul.pagination li > .page.active:hover { ul.pagination li > .page.active:hover {
background-color: #f67878; } background-color: #f67878; }
ul.pagination li > .page.active:active { ul.pagination li > .page.active:active {
@ -1458,7 +1485,7 @@ table {
table td { table td {
padding: 0.75em 0.75em; } padding: 0.75em 0.75em; }
table th { table th {
color: #3d4449; color: var(--header-colour);
font-size: 0.9em; font-size: 0.9em;
font-weight: 600; font-weight: 600;
padding: 0 0.75em 0.75em 0.75em; padding: 0 0.75em 0.75em 0.75em;
@ -1499,8 +1526,8 @@ button,
background-color: transparent; background-color: transparent;
border-radius: 0.375em; border-radius: 0.375em;
border: 0; border: 0;
box-shadow: inset 0 0 0 2px #004360; box-shadow: inset 0 0 0 2px var(--style-colour);
color: #004360 !important; color: var(--style-colour) !important;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-family: "Roboto Slab", serif; font-family: "Roboto Slab", serif;
@ -1519,13 +1546,13 @@ button,
input[type="button"]:hover, input[type="button"]:hover,
button:hover, button:hover,
.button:hover { .button:hover {
background-color: rgba(0, 67, 96, 0.05); } background-color: rgba(245, 106, 106, 0.05); }
input[type="submit"]:active, input[type="submit"]:active,
input[type="reset"]:active, input[type="reset"]:active,
input[type="button"]:active, input[type="button"]:active,
button:active, button:active,
.button:active { .button:active {
background-color: rgba(0, 67, 96, 0.15); } background-color: rgba(245, 106, 106, 0.15); }
input[type="submit"].icon:before, input[type="submit"].icon:before,
input[type="reset"].icon:before, input[type="reset"].icon:before,
input[type="button"].icon:before, input[type="button"].icon:before,
@ -1557,9 +1584,9 @@ button,
input[type="button"].primary, input[type="button"].primary,
button.primary, button.primary,
.button.primary { .button.primary {
background-color: #004360; background-color: var(--style-colour);
box-shadow: none; box-shadow: none;
color: #ffffff !important; } color: var(--white) !important; }
input[type="submit"].primary:hover, input[type="submit"].primary:hover,
input[type="reset"].primary:hover, input[type="reset"].primary:hover,
input[type="button"].primary:hover, input[type="button"].primary:hover,
@ -1611,7 +1638,7 @@ button,
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 0 2em -3em; margin: 0 0 2em -3em;
width: calc(100% + 3em); } width: calc(80% + 3em); }
.features article { .features article {
-moz-align-items: center; -moz-align-items: center;
-webkit-align-items: center; -webkit-align-items: center;
@ -1646,7 +1673,7 @@ button,
text-align: center; text-align: center;
width: 10em; } width: 10em; }
.features article .icon:before { .features article .icon:before {
color: #004360; color: var(--style-colour);
font-size: 2.75rem; font-size: 2.75rem;
position: relative; position: relative;
top: 0.05em; } top: 0.05em; }
@ -1737,8 +1764,8 @@ button,
-webkit-flex-wrap: wrap; -webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 0 2em -6em; margin: 0 0 0em -1em;
width: calc(100% + 6em); } width: calc(100% + 4em); }
.posts article { .posts article {
-moz-flex-grow: 0; -moz-flex-grow: 0;
-webkit-flex-grow: 0; -webkit-flex-grow: 0;
@ -1748,21 +1775,21 @@ button,
-webkit-flex-shrink: 1; -webkit-flex-shrink: 1;
-ms-flex-shrink: 1; -ms-flex-shrink: 1;
flex-shrink: 1; flex-shrink: 1;
margin: 0 0 6em 6em; margin: 0 2em 2em 2em;
position: relative; position: relative;
width: calc(33.33333% - 6em); } width: calc(33.33333% - 4em); }
.posts article:before { .posts article:before {
background: rgba(210, 215, 217, 0.75); background: rgba(210, 215, 217, 0.75);
content: ''; content: '';
display: block; display: block;
height: calc(100% + 6em); height: calc(100% + 2em);
left: -3em; left: -2em;
position: absolute; position: absolute;
top: 0; top: 0;
width: 1px; } width: 1px; }
.posts article:after { .posts article:after {
background: rgba(210, 215, 217, 0.75); background: rgba(210, 215, 217, 0.75);
bottom: -3em; bottom: 0em;
content: ''; content: '';
display: block; display: block;
height: 1px; height: 1px;
@ -1776,7 +1803,8 @@ button,
margin: 0 0 2em 0; } margin: 0 0 2em 0; }
.posts article .image img { .posts article .image img {
display: block; display: block;
width: 100%; } width: 100%;
max-width:100%;}
@media screen and (min-width: 1681px) { @media screen and (min-width: 1681px) {
.posts article:nth-child(3n + 1):before { .posts article:nth-child(3n + 1):before {
display: none; } display: none; }
@ -1863,7 +1891,7 @@ button,
margin: 0 auto; margin: 0 auto;
max-width: 110em; } max-width: 110em; }
#main > .inner > section { #main > .inner > section {
padding: 6em 0 4em 0 ; padding: 2em 0 4em 0 ;
border-top: solid 2px rgba(210, 215, 217, 0.75); } border-top: solid 2px rgba(210, 215, 217, 0.75); }
#main > .inner > section:first-of-type { #main > .inner > section:first-of-type {
border-top: 0 !important; } border-top: 0 !important; }
@ -1871,17 +1899,17 @@ button,
#main > .inner { #main > .inner {
padding: 0 5em 0.1em 5em ; } padding: 0 5em 0.1em 5em ; }
#main > .inner > section { #main > .inner > section {
padding: 5em 0 3em 0 ; } } padding: 2em 0 3em 0 ; } }
@media screen and (max-width: 1280px) { @media screen and (max-width: 1280px) {
#main > .inner { #main > .inner {
padding: 0 4em 0.1em 4em ; } padding: 0 4em 0.1em 4em ; }
#main > .inner > section { #main > .inner > section {
padding: 4em 0 2em 0 ; } } padding: 1em 0 2em 0 ; } }
@media screen and (max-width: 736px) { @media screen and (max-width: 736px) {
#main > .inner { #main > .inner {
padding: 0 2em 0.1em 2em ; } padding: 0 2em 0.1em 2em ; }
#main > .inner > section { #main > .inner > section {
padding: 3em 0 1em 0 ; } } padding: 1em 0 1em 0 ; } }
/* Sidebar */ /* Sidebar */
#search form { #search form {
@ -1903,7 +1931,7 @@ button,
-webkit-transform: scaleX(-1); -webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1); -ms-transform: scaleX(-1);
transform: scaleX(-1); transform: scaleX(-1);
color: #7f888f; color: var(--input-colour);
content: '\f002'; content: '\f002';
cursor: default; cursor: default;
display: block; display: block;
@ -2058,7 +2086,7 @@ button,
text-indent: 7.25em; text-indent: 7.25em;
width: 7.25em; } width: 7.25em; }
#sidebar .toggle:before { #sidebar .toggle:before {
color: #7f888f; color: var(--input-colour);
margin-left: -0.0625em; margin-left: -0.0625em;
margin-top: -0.25em; margin-top: -0.25em;
font-size: 1.1rem; font-size: 1.1rem;
@ -2079,7 +2107,7 @@ button,
display: -webkit-flex; display: -webkit-flex;
display: -ms-flex; display: -ms-flex;
display: flex; display: flex;
border-bottom: solid 5px #004360; border-bottom: solid 5px var(--style-colour);
padding: 6em 0 1em 0; padding: 6em 0 1em 0;
position: relative; } position: relative; }
#header > * { #header > * {
@ -2191,7 +2219,7 @@ button,
/* Footer */ /* Footer */
#footer .copyright { #footer .copyright {
color: #9fa3a6; color: var(--placeholder-colour);
font-size: 0.9em; } font-size: 0.9em; }
#footer .copyright a { #footer .copyright a {
color: inherit; } color: inherit; }
@ -2202,7 +2230,7 @@ button,
-webkit-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
color: #3d4449; color: var(--header-colour);
font-family: "Roboto Slab", serif; font-family: "Roboto Slab", serif;
font-weight: 400; font-weight: 400;
letter-spacing: 0.075em; letter-spacing: 0.075em;
@ -2218,7 +2246,7 @@ button,
font-size: 0.9em; font-size: 0.9em;
padding: 0.625em 0; } padding: 0.625em 0; }
#menu ul a:hover, #menu ul span:hover { #menu ul a:hover, #menu ul span:hover {
color: #004360; } color: var(--style-colour); }
#menu ul a.opener, #menu ul span.opener { #menu ul a.opener, #menu ul span.opener {
-moz-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out;
@ -2243,12 +2271,12 @@ button,
-webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
color: #9fa3a6; color: var(--placeholder-colour);
content: '\f078'; content: '\f078';
position: absolute; position: absolute;
right: 0; } right: 0; }
#menu ul a.opener:hover:before, #menu ul span.opener:hover:before { #menu ul a.opener:hover:before, #menu ul span.opener:hover:before {
color: #004360; } color: var(--style-colour); }
#menu ul a.opener.active + ul, #menu ul span.opener.active + ul { #menu ul a.opener.active + ul, #menu ul span.opener.active + ul {
display: block; } display: block; }
#menu ul a.opener.active:before, #menu ul span.opener.active:before { #menu ul a.opener.active:before, #menu ul span.opener.active:before {
@ -2262,7 +2290,7 @@ button,
margin: 0.5em 0 0 0; margin: 0.5em 0 0 0;
padding: 0.5em 0 0 0; } padding: 0.5em 0 0 0; }
#menu > ul > li > ul { #menu > ul > li > ul {
color: #9fa3a6; color: var(--placeholder-colour);
display: none; display: none;
margin: 0.5em 0 1.5em 0; margin: 0.5em 0 1.5em 0;
padding-left: 1em; } padding-left: 1em; }
@ -2275,3 +2303,10 @@ button,
border-top: 0; border-top: 0;
margin-top: 0; margin-top: 0;
padding-top: 0; } padding-top: 0; }
/* index header size */
#indexheader {
min-height: 80px;
vertical-align:bottom;
}

23
templates/include/cornerstone.html Normal file
View file

@ -0,0 +1,23 @@
<div class="posts">
<article>
<header>
<h2 id="indexheader"><a href="https://jmkengineering.com" rel="bookmark" title="Link to homepage">TEST 1</a></h2>
</header>
<a href="https://jmkengineering.com" class="image"><img src="https://jmkengineering.com/photos/stock/213892-orga.jpg" style="max-width: 100%; display: inline; float: center;" /></a>
<div class="entry-content"> Some TEXT TO GET CLICKS</div>
</article>
<article>
<header>
<h2 id="indexheader"><a href="https://jmkengineering.com" rel="bookmark" title="Link to homepage">TEST 1</a></h2>
</header>
<a href="https://jmkengineering.com" class="image"><img src="https://jmkengineering.com/photos/stock/213892-orga.jpg" style="max-width: 100%; display: inline; float: center;" /></a>
<div class="entry-content"> Some TEXT TO GET CLICKS</div>
</article>
<article>
<header>
<h2 id="indexheader"><a href="https://jmkengineering.com" rel="bookmark" title="Link to homepage">TEST 1</a></h2>
</header>
<a href="https://jmkengineering.com" class="image"><img src="https://jmkengineering.com/photos/stock/213892-orga.jpg" style="max-width: 100%; display: inline; float: center;" /></a>
<div class="entry-content"> Some TEXT TO GET CLICKS</div>
</article>
</div>

37
templates/index.html
View file

@ -1,5 +1,32 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
{% if TAGLINE or TAGLINEHEAD %}
<!-- Banner -->
<section id="banner">
<h1>{{ TAGLINEHEAD }}</h1>
<p>{{ TAGLINE }}</p>
</section>
{% endif %}
{% if CORNERSTONE_CONTENT == True %}
<!-- Cornerstone Pages -->
<section id="cornerstone_pages">
{% include 'include/cornerstone.html' %}
<br />
<br />
</section>
{% endif %}
{% if NEWSLETTER %}
<!-- Newsletter CTA -->
<section id="home-newsletter">
<h2>Our Newsletter</h2>
{{ NEWSLETTER }}
<br />
</section>
{% endif %}
<section> <section>
{% block content_title %} {% block content_title %}
<h2>All articles</h2> <h2>All articles</h2>
@ -19,14 +46,20 @@
<!-- /.post-info --> <!-- /.post-info -->
<div class="entry-content"> {{ article.summary }} </div> <div class="entry-content"> {{ article.summary }} </div>
{% if INCLUDECATEGORY == True %}
{% if article.category %} {% if article.category %}
<div class="category"> <div class="category">
Posted in: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a> Posted in: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
</div> </div>
{% endif %} <!-- {% endif %}
{% endif %}
{% if MOREBUTTON == True %}
<br />
<ul class="actions"> <ul class="actions">
<li><a href="{{ SITEURL }}/{{ article.url }}" class="button">More</a></li> <li><a href="{{ SITEURL }}/{{ article.url }}" class="button">More</a></li>
</ul> --> </ul>
<br />
{% endif %}
<!-- /.entry-content --> <!-- /.entry-content -->
{% endif %} {% endif %}
</article> </article>