Commit 33cf9c29 authored by colmoneill's avatar colmoneill

lots of template and styles changes, site is now fully responsible in css-grid

parent f302370d
Pipeline #16529377 failed with stage
in 1 minute and 16 seconds
/* Plex Mono */
@font-face {
font-family: 'ibm_plex_monoregular';
src: url('../fonts/ibmplexmono-regular-webfont.woff2') format('woff2'),
url('../fonts/ibmplexmono-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ibm_plex_monoitalic';
src: url('../fonts/ibmplexmono-italic-webfont.woff2') format('woff2'),
url('../fonts/ibmplexmono-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ibm_plex_monoextralight';
src: url('../fonts/ibmplexmono-extralight-webfont.woff2') format('woff2'),
url('../fonts/ibmplexmono-extralight-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ibm_plex_monobold_italic';
src: url('../fonts/ibmplexmono-bolditalic-webfont.woff2') format('woff2'),
url('../fonts/ibmplexmono-bolditalic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ibm_plex_monobold';
src: url('../fonts/ibmplexmono-bold-webfont.woff2') format('woff2'),
url('../fonts/ibmplexmono-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
@font-face {
font-family: 'zarathustraregular';
src: url('../fonts/zarathustra-v01-webfont.woff2') format('woff2'),
......@@ -42,85 +55,195 @@
font-style: normal;
}
@custom-media --mobile only screen and (max-width: 767px);
@custom-media --tablet only screen and (min-width: 768px) and (max-width: 950px);
@custom-media --large-tablet only screen and (min-width: 950px) and (max-width: 1300px);
@custom-media --laptop only screen and (min-width: 1300px) and (max-width: 1770px);
@custom-media --desktop only screen and (min-width: 1770px) and (max-width: 3000px);
html{
color: grey;
font-family: 'LimousineMedium', monospace, 'ibm_plex_monoregular';
font-family: 'LimousineMedium';
font-size: 16px;
color: black;
font-weight: normal;
padding: 2em;
@media (--tablet){
padding: 1em;
}
@media (--mobile){
padding: 0.5em;
}
}
a{
color:black;
font-family: 'LimousineMedium', monospace, 'ibm_plex_monoitalic'
font-family: 'LimousineMedium';
text-decoration: underline;
}
h2, h3, h4, h5{
font-weight: bold;
}
h1.sitetitle{
font-family: 'zarathustraregular';
font-size: 4em;
font-size: 3em;
font-weight: bold;
margin-top: 16px;
margin-bottom: 32px;
}
h1 a{
text-decoration: none;
font-family: 'zarathustraregular';
}
h2.entry-title{
font-family: 'zarathustraregular';
font-size: 2em;
letter-spacing: 2px;
margin-bottom: 16px;
line-height: 32px;
}
h2.entry-title a{
text-decoration: none;
font-family: 'zarathustraregular';
}
div.container{
display: grid;
grid-template-columns:repeat(5, 330px);
grid-template-rows: 2;
grid-gap: 30px;
}
div.col1{
grid-column: 1;
grid-row: 1/2;
}
div.col2{
grid-column: 2/5;
grid-row: 2
}
div.col3{
grid-column: 5;
grid-row: 2;
}
div.footer{
grid-column:1;
grid-row:2/6;
}
@media screen and (max-width: 1080px){
}
@media screen and (max-width: 1440px){
}
@media screen and (max-width: 1770px){
}
@media screen and (max-width: 2800px){
p{
font-size: 16px;
line-height: 20px;
}
header, footer{
margin-top: 8px;
margin-bottom: 8px;
line-height: 20px;
}
@media (--tablet){
div.container{
display: grid;
grid-template-columns: 330px 330px minmax(1px, 330px));
grid-gap: 30px;
grid-template-rows: 250px min-content min-content;
}
div.col1{
grid-column: 1;
grid-row: 1/2;
}
div.col2{
grid-column: 2/4;
grid-row: 1
}
div.col3{
grid-column: 1;
grid-row: 2;
text-align: right;
}
div.footer{
grid-column:1;
grid-row:3;
}
}
@media (--large-tablet){
div.container{
display: grid;
grid-template-columns: 330px 330px minmax(1px, 330px) minmax(min-content, 330px);
grid-gap: 30px;
grid-template-rows: 250px min-content min-content;
}
div.col1{
grid-column: 1;
grid-row: 1;
}
div.col2{
grid-column: 2/4;
grid-row: 1
}
div.col3{
grid-column: 4;
grid-row: 2;
}
div.footer{
grid-column:1;
grid-row:2;
}
}
@media (--laptop){
div.container{
display: grid;
grid-template-columns: 330px, 330px, 330px, auto;
grid-template-rows: repeat(2, 250px);
grid-gap: 30px;
}
div.col1{
grid-column: 1;
grid-row: 1/2;
}
div.col2{
grid-column: 2/4;
grid-row: 2
}
div.col3{
grid-column: 4;
grid-row: 2;
}
div.footer{
grid-column:1;
grid-row:2/6;
}
}
@media (--desktop){
div.container{
display: grid;
grid-template-columns:repeat(5, 330px);
grid-template-rows: repeat(2, 250px);
grid-gap: 30px;
}
div.col1{
grid-column: 1;
grid-row: 1/2;
}
div.col2{
grid-column: 2/4;
grid-row: 2
}
div.col3{
grid-column: 5;
grid-row: 2;
}
div.footer{
grid-column:1;
grid-row:2/6;
}
}
div.entry-content p{
}
section#content{
padding-bottom: 2em;
}
img{
max-width: 100%;
}
nav#menu ul{
padding: 0;
margin-bottom: 16px;
}
nav#menu ul li{
display: inline-block;
line-height: 22px;
}
ul#post-list{
padding: 0;
}
ul#post-list li{
padding-bottom: 30px;
}
img.rss-icon{
width: 12px;
}
span.zarath{
font-family: 'zarathustraregular';
}
aside ul#footer-tag-list{
padding: 0;
}
......@@ -140,3 +263,6 @@ iframe{
width: 100%;
min-height: 400px;
}
footer.sidebar-post-info a{
line-height: 20px;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="59"
height="67"
id="svg5365"
sodipodi:version="0.32"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
version="1.0"
sodipodi:docname="OSP_new-frog.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape"
inkscape:export-filename="/home/ludi/wrk/osp/osp.web.themes/layouts/pict/OSP_new-frog.png"
inkscape:export-xdpi="72"
inkscape:export-ydpi="72">
<defs
id="defs5367" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
gridtolerance="10000"
guidetolerance="10"
objecttolerance="10"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="4.6090747"
inkscape:cx="-41.002838"
inkscape:cy="83.043198"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1869"
inkscape:window-height="1016"
inkscape:window-x="51"
inkscape:window-y="27"
borderlayer="true"
inkscape:showpageshadow="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-maximized="1"
width="59px" />
<metadata
id="metadata5370">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-358.19771)">
<path
style="fill:none;stroke:#000000;stroke-width:2.05;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline;enable-background:new"
d="M 51.00118,388.92502 36.963607,375.30444 6.2478517,402.96255 26.122769,414.08139 26.26175,405.18632 47.804487,412.9695 37.38057,402.54559 z"
id="path4397"
inkscape:connector-curvature="0"
inkscape:export-xdpi="72"
inkscape:export-ydpi="72" />
<path
style="fill:none;stroke:#000000;stroke-width:2.05;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline;enable-background:new"
d="m 44.885821,366.13139 -0.694946,14.73247 -14.315502,0 0,-15.01043 4.030576,9.45101 1.945792,-9.17305 4.308558,9.45102 z"
id="path4399"
inkscape:connector-curvature="0"
inkscape:export-xdpi="72"
inkscape:export-ydpi="72" />
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="400"
height="400"
id="svg5365"
sodipodi:version="0.32"
inkscape:version="0.91 r"
version="1.0"
sodipodi:docname="osp_frog-colm.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape"
inkscape:export-filename="/home/ludi/wrk/osp/osp.web.themes/layouts/pict/OSP_new-frog.png"
inkscape:export-xdpi="72"
inkscape:export-ydpi="72">
<defs
id="defs5367" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
gridtolerance="10000"
guidetolerance="10"
objecttolerance="10"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.852735"
inkscape:cx="149.84586"
inkscape:cy="14.324545"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1920"
inkscape:window-height="1027"
inkscape:window-x="0"
inkscape:window-y="22"
borderlayer="true"
inkscape:showpageshadow="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-maximized="1"
width="59px" />
<metadata
id="metadata5370">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-25.19771)">
<path
style="display:inline;fill:none;stroke:#ffaa00;stroke-width:5.86731625;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
d="M 366.91557,214.7224 257.0984,108.1674 16.806329,324.53924 l 155.483231,86.98367 1.08726,-69.58692 168.53074,60.8885 -81.54722,-81.54716 z"
id="path4397"
inkscape:connector-curvature="0" />
<path
style="display:inline;fill:none;stroke:#ffaa00;stroke-width:5.86731625;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
d="m 319.07458,36.40582 -5.43663,115.25342 -111.99143,0 0,-117.427926 31.53155,73.936086 15.2221,-71.76158 33.70623,73.93616 z"
id="path4399"
inkscape:connector-curvature="0" />
<rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#00aaff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.69999981;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect4144"
width="345.94568"
height="128.77176"
x="-21.363525"
y="-401.99051"
transform="scale(-1,-1)" />
<rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffaa00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.69999981;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect4144-9"
width="345.94568"
height="128.77176"
x="-21.363525"
y="-354.2478"
transform="scale(-1,-1)" />
<rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#00aa00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.69999981;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect4144-9-6"
width="345.94568"
height="128.77176"
x="-21.363525"
y="-306.50513"
transform="scale(-1,-1)" />
<rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff00aa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.69999981;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect4144-9-6-0"
width="345.94568"
height="128.77176"
x="-21.363525"
y="-258.76245"
transform="scale(-1,-1)" />
<rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#00aaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.69999981;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect4144-9-6-0-3"
width="345.94568"
height="128.77176"
x="-21.363525"
y="-211.01974"
transform="scale(-1,-1)" />
<rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.69999981;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect4144-9-6-0-3-0"
width="345.94568"
height="128.77176"
x="-21.363525"
y="-163.27707"
transform="scale(-1,-1)" />
</g>
</svg>
This diff is collapsed.
This diff is collapsed.
......@@ -24,11 +24,10 @@
</section>
{% endblock %}
{% block sidebar %}
<footer class="post-info">
Category: <a href="{{ SITEURL }}/{{article.category.url}}">{{article.category}}</a><br>
Tags: {% for tag in article.tags %}<a href="{{ SITEURL }}/{{tag.url}}">{{ tag }}</a>, {% endfor %}<br>
<footer class="sidebar-post-info">
<span class="zarath">Category:</span> <a href="{{ SITEURL }}/{{article.category.url}}">{{article.category}}</a><br>
<span class="zarath">Tags:</span> {% for tag in article.tags %}<a href="{{ SITEURL }}/{{tag.url}}">{{ tag }}</a>, {% endfor %}<br>
<time class="published" datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
</footer><!-- /.post-info -->
{% import 'translations.html' as translations with context %}
{{ translations.translations_for(article) }}
{% if article.authors %}
......@@ -41,7 +40,6 @@
{% for category in article.categories %}
<a href="{{ SITEURL }}/{{category.url}}">{{category}}</a>
{% endfor %}
</footer><!-- /.post-info -->
{% if article.prev_article_in_category %}
<a href="{{ SITEURL }}/{{ article.prev_article_in_category.url}}">
&larr; previous article in {{article.category}}: {{ article.prev_article_in_category.title }}
......@@ -52,4 +50,5 @@
&rarr; next article in {{article.category}}: {{ article.next_article_in_category.title }}
</a>
{% endif %}
</footer>
{% endblock %}
......@@ -44,7 +44,8 @@
<body id="index" class="home">
<div class="container">
<div class="col1">
<h1 class="sitetitle"><a href="{{ SITEURL }}/">{{ SITENAME }} <strong>{{ SITESUBTITLE }}</strong></a></h1>
<h1 class="sitetitle"><a href="{{ SITEURL }}/">{{ SITENAME }} <img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/imgs/OSP_new-frog.svg"
<strong>{{ SITESUBTITLE }}</strong></a></h1>
<nav id="menu"><ul>
{% for title, link in MENUITEMS %}
<li><a href="{{ link }}">{{ title }}</a></li>
......
......@@ -7,20 +7,20 @@
<ul id="post-list">
{% for article in articles_page.object_list %}
<li><article class="hentry">
<header> <h2 class="entry-title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2> </header>
<footer class="post-info">
<header> <h2 class="entry-title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2>
<time class="published" datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
<address class="vcard author">By
<div class="vcard author"><span class="zarath">By</span>
{% for author in article.authors %}
<a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
{% endfor %}
</address>
</footer><!-- /.post-info -->
</div>
</header>
<div class="entry-content"> {{ article.summary }} </div><!-- /.entry-content -->
Category: <a href="{{ SITEURL }}/{{article.category.url}}">{{article.category}}</a><br>
Tags: {% for tag in article.tags %}<a href="{{ SITEURL }}/{{tag.url}}">{{ tag }}</a>, {% endfor %}<br>
<footer>
<span class="zarath">Category</span>: <a href="{{ SITEURL }}/{{article.category.url}}">{{article.category}}</a><br>
<span class="zarath">Tags:</span> {% for tag in article.tags %}<a href="{{ SITEURL }}/{{tag.url}}">{{ tag }}</a>, {% endfor %}<br>
</footer>
</article></li>
<hr>
{% endfor %}
</ul><!-- /#posts-list -->
{% if articles_page.has_other_pages() %}
......
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