fix asset exclusion and add language switcher w. flags

This commit is contained in:
Jeppe Ernst 2018-01-23 19:45:28 +01:00
parent 305eaf4a8b
commit f61106dff8
10 changed files with 88 additions and 43 deletions

View file

@ -24,11 +24,12 @@ url: "https://ulovliglogning.dk" # the base hostname & protocol f
# multilanguage support # multilanguage support
languages: ["da", "en"] languages: ["da", "en"]
default_lang: "da" default_lang: "da"
exclude_from_localizations: ["assets", "_scss", "style", "fonts", "img", "js", "vendor"] exclude_from_localization: ["assets"]
parallel_localization: false parallel_localization: false
# Build settings # Build settings
markdown: kramdown markdown: kramdown
exclude: ["README.md", 'Gemfile.lock', 'Gemfile']
plugins: plugins:
- jekyll-feed - jekyll-feed

View file

@ -17,34 +17,4 @@
<path style="fill:#D1D4D1;" d="M29.5,33h-20v-2.074C9.5,29.31,10.81,28,12.426,28h14.149c1.616,0,2.926,1.31,2.926,2.926V33z"/> <path style="fill:#D1D4D1;" d="M29.5,33h-20v-2.074C9.5,29.31,10.81,28,12.426,28h14.149c1.616,0,2.926,1.31,2.926,2.926V33z"/>
<path class="glare" style="fill:#D0E8F9;" d="M15.5,15c-0.552,0-1-0.448-1-1c0-2.757,2.243-5,5-5c0.552,0,1,0.448,1,1s-0.448,1-1,1 <path class="glare" style="fill:#D0E8F9;" d="M15.5,15c-0.552,0-1-0.448-1-1c0-2.757,2.243-5,5-5c0.552,0,1,0.448,1,1s-0.448,1-1,1
c-1.654,0-3,1.346-3,3C16.5,14.552,16.052,15,15.5,15z"/> c-1.654,0-3,1.346-3,3C16.5,14.552,16.052,15,15.5,15z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -6,7 +6,7 @@
<body> <body>
<div class="langSwitcher"> <div class="langSwitcher">
{% for tongue in site.languages %} {% for tongue in site.languages %}
<a {% if tongue == site.active_lang %}class="activeLang"{% endif %} href="{% if tongue == site.default_lang %} {{site.baseurl}}{{page.url}} {% else %} {{site.baseurl}}/{{ tongue }}{{page.url}} {% endif %}">{{ tongue }}</a> <a class="flag-icon flag-icon-{{ tongue }} {% if tongue == site.active_lang %}activeLang{% endif %}" href="{% if tongue == site.default_lang %} {{site.baseurl}}{{page.url}} {% else %} {{site.baseurl}}/{{ tongue }}{{page.url}} {% endif %}">{{ tongue }}</a>
{% endfor %} {% endfor %}
</div> </div>
{% include security-camera-svgrepo-com.svg %} {% include security-camera-svgrepo-com.svg %}

View file

@ -19,24 +19,32 @@ footer {
display: inline-block; display: inline-block;
margin: 2rem 0 0 2rem; margin: 2rem 0 0 2rem;
font-size: 0; font-size: 0;
background: #444;
border: 5px solid #444;
border-radius: 5px;
} }
.langSwitcher a { .langSwitcher a {
font-size: 1rem; font-size: 2rem;
color: #FFF; //color: #FFF;
display: inline-block; color: transparent;
background: $color-international-orange; //display: inline-block;
padding: 5px; //background: $color-international-orange;
//padding: 5px;
box-shadow: none; box-shadow: none;
text-transform: capitalize; //text-transform: capitalize;
border-right: 1px solid rgba(0,0,0,.4); //border-right: 3px solid #444;
border-radius: 3px;
margin-right: 5px;
} }
.langSwitcher a.activeLang { .langSwitcher a.activeLang {
background: darken($color-international-orange, 15); //background: darken($color-international-orange, 15);
box-shadow: inset 0 50px 0 rgba(0, 0, 0, 0.35);
} }
.langSwitcher a:first-child{ .langSwitcher a:first-child{
border-radius: 3px 0 0 3px; //border-radius: 3px 0 0 3px;
} }
.langSwitcher a:last-child{ .langSwitcher a:last-child{
border-radius: 0 3px 3px 0; //border-radius: 0 3px 3px 0;
border-right: none; //border-right: none;
margin-right: 0;
} }

33
_scss/module/_flags.scss Normal file
View file

@ -0,0 +1,33 @@
$flag-icon-css-path: '../img' !default;
$flag-icon-rect-path: '/flags' !default;
.flag-icon-background {
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
}
.flag-icon {
@extend .flag-icon-background;
position: relative;
display: inline-block;
width: (4 / 3) * 30px;
line-height: 30px;
&:before {
content: '\00a0';
}
&.flag-icon-squared {
width: 1em;
}
}
@mixin flag-icon($country) {
.flag-icon-#{$country} {
background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg);
}
}
@include flag-icon(da);
@include flag-icon(en);
@include flag-icon(de);
@include flag-icon(fr);

5
assets/img/flags/da.svg Executable file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" id="flag-icon-css-dk">
<path fill="#c60c30" d="M0 0h640.1v480H0z"/>
<path fill="#fff" d="M205.714 0h68.57v480h-68.57z"/>
<path fill="#fff" d="M0 205.714h640.1v68.57H0z"/>
</svg>

After

Width:  |  Height:  |  Size: 249 B

5
assets/img/flags/de.svg Executable file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" id="flag-icon-css-de">
<path fill="#ffce00" d="M0 320h640v160.002H0z"/>
<path d="M0 0h640v160H0z"/>
<path fill="#d00" d="M0 160h640v160H0z"/>
</svg>

After

Width:  |  Height:  |  Size: 220 B

15
assets/img/flags/en.svg Executable file
View file

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" id="flag-icon-css-gb">
<defs>
<clipPath id="a">
<path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
</clipPath>
</defs>
<g clip-path="url(#a)" transform="translate(80) scale(.94)">
<g stroke-width="1pt">
<path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
<path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"/>
<path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"/>
<path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 956 B

7
assets/img/flags/fr.svg Executable file
View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" id="flag-icon-css-fr">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="#fff" d="M0 0h640v480H0z"/>
<path fill="#00267f" d="M0 0h213.337v480H0z"/>
<path fill="#f31830" d="M426.662 0H640v480H426.662z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 301 B

View file

@ -9,4 +9,5 @@
// Import module styles // Import module styles
@import "module/fonts.scss"; @import "module/fonts.scss";
@import "module/camera.scss"; @import "module/camera.scss";
@import "module/flags.scss";
@import "module/indexpage.scss"; @import "module/indexpage.scss";