typemill/themes/cyanine/layout.twig
2022-05-29 13:59:55 +02:00

255 lines
No EOL
9.1 KiB
Twig

<!DOCTYPE html>
<html lang="{{ settings.langattr | default('en') }}">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="{{ metatabs.meta.description }}" />
<meta name="author" content="{{ metatabs.meta.author }}" />
<meta name="generator" content="TYPEMILL" />
<link rel="canonical" href="{{ item.urlAbs }}" />
{{ assets.renderMeta() }}
{% block stylesheets %}
{{ assets.activateTachyons() }}
<link rel="stylesheet" href="{{ base_url }}/themes/cyanine/css/style.css?20220527" />
<style>
/*******************
** LAYOUT SIZES **
*******************/
{% if settings.themes.cyanine.layoutsize == 'large' %}
@media screen and (min-width: 50em){
.grid-container{
max-width: 82rem;
grid-template-columns: 25% 75%;
}
.grid-main{
max-width: 48rem;
margin: 0 auto;
}
}
{% elseif settings.themes.cyanine.layoutsize == 'full' %}
@media screen and (min-width: 70em){
.grid-container{
max-width: 100%;
grid-template-columns: 20% 80%;
}
.grid-main{
padding-left: 4rem;
padding-right: 4rem;
margin: 0 auto;
}
}
{% else %}
@media screen and (min-width: 50em){
.grid-container{
max-width: 64rem;
grid-template-columns: 30% 70%;
}
}
{% endif %}
/*******************
** FONT FAMILIES **
*******************/
body,.landingpagecontrast{
font-family: {{ settings.themes.cyanine.font|default('-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif') }};
}
h1,h2,h3,h4,h5,h6,.logo{
font-family: {{ settings.themes.cyanine.fontheadline|default('-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif') }};
}
.navigation, button, .button, .mainnavigation{
font-family: {{ settings.themes.cyanine.fontnavi|default('-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif') }};
}
/*******************
** COLORS **
*******************/
body,.landingpagecontrast,.account,form input[type="submit"],from button,form .button{
background: {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
}
main, footer, .landingpageintro, .landingpageinfo, .landingpageteaser, .landingpagenavi, .landingpagecontrast, .landingpagenews,form input[type="submit"],from button,form .button{
border-color: {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
}
.landingpagecontrast a, .landingpagecontrast a:link, .landingpagecontrast a:visited{
background: {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
}
body,.landingpagecontrast, a,
.landingpagecontrast a, .landingpagecontrast a:link, .landingpagecontrast a:visited,
.account, .account a, .account a:link, .account a:hover, .account a:focus, .account a:visited,
form input[type="submit"],from button,form .button{
color: {{ settings.themes.cyanine.fontcolorprimary|default('#F7F7F7') }};
}
.landingpagecontrast a, .landingpagecontrast a:link, .landingpagecontrast a:visited{
border-color: {{ settings.themes.cyanine.fontcolorprimary|default('#F7F7F7') }};
}
main, footer, .landingpageintro, .landingpageinfo, .landingpageteaser, .landingpagenavi, .landingpagenews,button.expander, .notice4{
background: {{ settings.themes.cyanine.brandcolorsecondary|default('#f7f7f7') }};
}
.notice4{
box-shadow: 0 -100px 80px 0px {{ settings.themes.cyanine.brandcolorsecondary|default('#f7f7f7') }};
}
main, footer, .landingpageintro, .landingpageinfo, .landingpageteaser, .landingpagenavi, .landingpagenews, .logo a, button.expander{
color: {{ settings.themes.cyanine.fontcolorsecondary|default('#333') }};
}
button.expander{
border-color: {{ settings.themes.cyanine.fontcolorsecondary|default('#333') }};
}
main a, main a:before, footer a, .landingpageintro p a, .landingpageinfo p a, .landingpageteaser p a, .landingpagenavi p a{
color: {{ settings.themes.cyanine.fontcolorlink|default('#007474') }};
}
.TOC li a, .TOC li a:hover,.TOC li a:focus,.TOC li a:active{
border-color: {{ settings.themes.cyanine.fontcolorlink|default('#007474') }};
}
.navigation, button, .button,thead{
background: {{ settings.themes.cyanine.brandcolortertiary|default('lightseagreen') }};
}
.navigation, button, .button{
border-color: {{ settings.themes.cyanine.bordercolortertiary|default('lightseagreen') }};
}
.navigation, button, .button,thead,
.navigation a,.navigation a:hover,.navigation a:focus, .navigation a:active{
color: {{ settings.themes.cyanine.fontcolortertiary|default('#F7F7F7') }};
}
article pre{
border-left: 4px solid {{ settings.themes.cyanine.brandcolortertiary|default('lightseagreen') }};
}
article pre, article code{
background: {{ settings.themes.cyanine.codebackground|default('#ddd') }};
color: {{ settings.themes.cyanine.codecolor|default('#333') }};
}
.mainnavigation a:hover,.mainnavigation a:focus,.mainnavigation a:active, .mainnavigation .active > a:first-child{
background: {{ settings.themes.cyanine.contentnavihoverbackground|default('lightseagreen') }};
color: {{ settings.themes.cyanine.contentnavihovercolor|default('white') }};
}
.landingpagenews li, .newsbox{
background: {{ settings.themes.cyanine.newsbackground|default('white') }};
}
.landingpagenews li a{
color: {{ settings.themes.cyanine.newscolor|default('#333') }};
}
.mainnavigation li, tr, hr, .notice4{
border-color: {{ settings.themes.cyanine.thinbordercolor|default('lightgray') }};
}
.notice1{
background-color: #ffded4;
border-left: 4px solid #f65a3c;
}
.notice2{
background-color: #fff3d4;
border-left: 4px solid #f6b73c;
}
.notice3{
background-color: #d4e0ff;
border-left: 4px solid #3c7bf6;
}
{% if settings.themes.cyanine.noticecolors %}
.notice1 {
background-color: #fafafa;
border-left: 10px solid #000;
color: #333;
}
.notice2 {
background-color: #eee;
border-left: 10px solid #999;
color: #333;
}
.notice3{
background-color: #444;
border-left: 10px solid #ccc;
color: #fff;
}
{% endif %}
</style>
{{ assets.renderCSS() }}
{% endblock %}
</head>
<body class="optimize-text pa2">
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-user" viewBox="0 0 20 28">
<path d="M20 21.859c0 2.281-1.5 4.141-3.328 4.141h-13.344c-1.828 0-3.328-1.859-3.328-4.141 0-4.109 1.016-8.859 5.109-8.859 1.266 1.234 2.984 2 4.891 2s3.625-0.766 4.891-2c4.094 0 5.109 4.75 5.109 8.859zM16 8c0 3.313-2.688 6-6 6s-6-2.688-6-6 2.688-6 6-6 6 2.688 6 6z"></path>
</symbol>
<symbol id="icon-pencil" viewBox="0 0 32 32">
<path d="M27 0c2.761 0 5 2.239 5 5 0 1.126-0.372 2.164-1 3l-2 2-7-7 2-2c0.836-0.628 1.874-1 3-1zM2 23l-2 9 9-2 18.5-18.5-7-7-18.5 18.5zM22.362 11.362l-14 14-1.724-1.724 14-14 1.724 1.724z"></path>
</symbol>
<symbol id="icon-printer" viewBox="0 0 32 32">
<path d="M8 2h16v4h-16v-4z"></path>
<path d="M30 8h-28c-1.1 0-2 0.9-2 2v10c0 1.1 0.9 2 2 2h6v8h16v-8h6c1.1 0 2-0.9 2-2v-10c0-1.1-0.9-2-2-2zM4 14c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM22 28h-12v-10h12v10z"></path>
</symbol>
</defs>
</svg>
{% if is_loggedin() %}
<div class="account fixed pb2 top-0 right-0 left-0">
<div class="account fixed h1 w2 w2 right-2">
<a href="{{base_url}}/tm/account"><div class="account fixed h2 w2 top-0 br-100 tc">
<svg class="icon baseline icon-user w1 h1 mt2"><use xlink:href="#icon-user"></use></svg>
</div></a>
</div>
</div>
{% endif %}
{% block content %}{% endblock %}
{% include 'partials/footer.twig' %}
{% block javascripts %}
<script src="{{ base_url }}/system/author/js/typemillutils.js?20220108"></script>
<script>typemillUtilities.start();</script>
{% if settings.themes.cyanine.collapseNav %}
<script>
var expandButton = document.getElementById("expander");
if(expandButton !== null)
{
var expandLabel = expandButton.dataset.expandlabel;
var collapseLabel = expandButton.dataset.collapselabel;
expandButton.addEventListener('click', function(e)
{
var contentnav = document.getElementById("contentnav");
contentnav.classList.toggle("collapse");
if(contentnav.classList.contains("collapse"))
{
expandButton.innerHTML = expandLabel;
}
else
{
expandButton.innerHTML = collapseLabel;
}
});
}
</script>
{% endif %}
{{ assets.renderJS() }}
{% endblock %}
</body>
</html>