THW logo + responsivity
This commit is contained in:
parent
0473a2c438
commit
e5010d2a2f
4 changed files with 86 additions and 12 deletions
|
|
@ -25,7 +25,7 @@ export default class App extends Vue {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Lubalin Graph";
|
||||
src: url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.eot");
|
||||
|
|
@ -128,27 +128,25 @@ export default class App extends Vue {
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
// THW Logo font
|
||||
/* THW Logo font */
|
||||
.thw-logo-font {
|
||||
font-family: "Lubalin Graph", serif !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
// THW Heading font
|
||||
/* THW Heading font */
|
||||
.thw-heading-font {
|
||||
font-family: "Neue Praxis", "Roboto", sans-serif !important;
|
||||
}
|
||||
|
||||
// THW Text font
|
||||
/* THW Text font */
|
||||
.thw-text-font {
|
||||
font-family: "Neue Demos", serif !important;
|
||||
}
|
||||
|
||||
// THW Citation font
|
||||
/* THW Citation font */
|
||||
.thw-citation-font {
|
||||
font-family: "Neue Demos", serif !important;
|
||||
|
||||
* {
|
||||
font-style: italic !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
20
ui/src/assets/thw.svg
Normal file
20
ui/src/assets/thw.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<?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" version="1.1" width="800" height="800" id="svg2">
|
||||
<defs id="defs4"/>
|
||||
<g transform="translate(-109.88407,434.92474)" id="layer1">
|
||||
<path d="m 640.41889,184.96103 c -15.38166,25.59619 -30.76325,51.19237 -46.14492,76.78855 -9.50532,-15.7757 -19.01071,-31.55133 -28.51604,-47.32702 -36.42365,8.00838 -74.46423,8.02054 -110.88695,0 -9.5173,15.77569 -19.0346,31.55132 -28.5519,47.32702 -16.26691,-25.75742 -30.5453,-53.45406 -48.03891,-78.01524 C 299.24885,137.7956 250.23741,46.392684 255.10184,-45.04896 c 2.09259,-89.32909 55.97988,-174.14531 134.99126,-214.97922 0,-18.90439 0,-37.80886 0,-56.71325 80.13559,0 160.27126,0 240.40686,0 0,18.90439 0,37.80886 0,56.71325 79.74845,41.01148 133.28072,126.86918 135.29312,216.763971 3.16811,112.413742 -51.83307,183.454159 -125.37419,228.225239 z m 268.5471,-260.189372 c -16.91878,-2.776927 -50.54031,-5.781455 -82.49714,-11.593718 -3.29434,-20.81784 -9.09759,-41.20158 -16.35943,-60.96009 21.49698,-17.75033 42.99403,-35.50067 64.49101,-53.251 -10.2467,-23.25949 -23.44491,-45.0888 -37.93294,-65.91233 -26.13729,9.7485 -52.27465,19.49708 -78.41194,29.24558 -13.45855,-16.37731 -28.52766,-31.42514 -44.91133,-44.8509 9.75879,-26.10005 19.5175,-52.20009 29.27628,-78.30014 -20.74155,-14.65144 -42.795,-27.53554 -65.97562,-37.90481 -17.78186,21.47172 -35.56379,42.94343 -53.34565,64.41515 -19.7602,-7.37928 -40.21013,-12.89714 -61.01974,-16.33233 -4.63077,-27.50848 -9.26147,-55.01689 -13.89224,-82.52537 -25.33474,-2.30409 -50.83946,-2.29977 -76.17427,0 -4.63314,27.50848 -9.26628,55.01689 -13.89942,82.52537 -20.80365,3.47176 -41.25731,8.94823 -61.01973,16.33233 -17.7795,-21.47172 -35.55899,-42.94343 -53.33848,-64.41515 -23.22975,10.29354 -45.15468,23.35933 -65.97562,37.90481 9.75878,26.10005 19.51749,52.20009 29.27627,78.30014 -16.23901,13.48334 -31.55182,28.25456 -44.6603,44.8509 -26.21382,-9.7485 -52.42763,-19.49708 -78.64145,-29.24558 -14.54519,20.7933 -27.664,42.673 -37.96162,65.91233 21.49942,17.75033 42.99876,35.50067 64.49818,53.251 -7.39732,19.7321 -12.86916,40.17161 -16.3666,60.96009 -27.53828,4.621133 -55.07649,9.242266 -82.61476,13.863399 -2.1661,25.292643 -2.16825,50.761852 0,76.0543506 27.53827,4.6307065 55.07648,9.2614854 82.61476,13.8921914 3.48819,20.778688 8.935,41.221875 16.3666,60.931296 -21.49942,17.759907 -42.99876,35.519883 -64.49818,53.279793 10.37959,23.17527 23.30634,45.1782 37.96162,65.87634 26.21382,-9.73655 52.42763,-19.47304 78.64145,-29.20959 13.15775,16.54949 28.40272,31.38217 44.6603,44.84371 -9.75878,26.09284 -19.51749,52.18569 -29.27627,78.27854 20.82417,14.54059 42.7359,27.62933 65.97562,37.9048 17.77949,-21.47408 35.55898,-42.94825 53.33848,-64.42233 19.73502,7.45233 40.20596,12.98624 61.01973,16.36831 4.63314,27.49884 9.26628,54.99774 13.89942,82.49658 25.3366,2.32072 50.83766,2.31906 76.17427,0 4.63077,-27.49884 9.26147,-54.99774 13.89224,-82.49658 20.81585,-3.34392 41.28716,-8.92073 61.01974,-16.36831 17.78186,21.47408 35.56379,42.94825 53.34565,64.42233 23.19145,-10.35011 45.22934,-23.2602 65.97562,-37.9048 -9.75878,-26.09285 -19.51749,-52.1857 -29.27628,-78.27854 16.40117,-13.40482 31.40516,-28.51304 44.91133,-44.84371 26.13729,9.73655 52.27465,19.47304 78.41194,29.20959 14.60013,-20.72744 27.60333,-42.68149 37.93294,-65.87634 -21.49698,-17.75991 -42.99403,-35.519886 -64.49101,-53.279793 7.29849,-19.735549 13.07456,-40.127127 16.35943,-60.931296 27.54064,-4.630706 55.08129,-9.2614849 82.62193,-13.8921914 1.23617,-22.6678096 0.89736,-63.3635816 -0.12479,-78.3240316 z" id="path6152" style="fill:#FFFFFF;fill-opacity:1;fill-rule:nonzero;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10"/>
|
||||
<path d="m 619.09641,-305.35415 -217.32006,0 0,57.22431 53.31697,0 0,-11.63921 28.54473,0 0,106.78273 -11.42507,0 0,45.83703 76.17427,0 0,-45.83703 -11.40355,0 0,-106.5308 28.77423,0 0,11.38728 53.33848,0 0,-57.22431" id="path6156" style="fill:#FFFFFF;fill-opacity:1;fill-rule:evenodd;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10"/>
|
||||
<path d="m 392.08692,-217.65339 0,45.82983 11.65457,0 0,182.851475 -11.65457,-0.259129 0,45.837034 76.42529,0 0,-45.837034 -11.43224,0 0,-45.577905 106.68413,0 0,45.577905 -11.40354,0 0,45.837034 76.15274,0 0,-45.837034 -11.40354,0 0,-182.815486 11.40354,0.22314 0,-45.82983 -76.15274,0 0,45.82983 11.40354,0 0,91.184605 -106.68413,0 0,-91.184605 11.43224,0 0,-45.82983 -76.42529,0" id="path6160" style="fill:#FFFFFF;fill-opacity:1;fill-rule:evenodd;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10"/>
|
||||
<path d="m 510.42562,99.736396 83.84835,139.461764 109.90438,-182.822677 27.28962,0 0,-45.606697 -91.3001,0 0,45.606697 10.672,0 -56.5659,94.142987 -84.09937,-139.749684 -83.85552,139.749684 -56.3077,-94.142987 10.672,0 0,-45.606697 -91.5583,0 0,45.606697 27.54064,0 L 426.5701,239.19816 510.42562,99.736396" id="path6164" style="fill:#FFFFFF;fill-opacity:1;fill-rule:evenodd;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10"/>
|
||||
</g>
|
||||
<metadata id="metadata3029">
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:title/>
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
52
ui/src/components/THWLogo.vue
Normal file
52
ui/src/components/THWLogo.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div class="flex-column">
|
||||
<div class="d-flex">
|
||||
<div class="d-flex justify-end">
|
||||
<span class="d-none d-sm-flex text-right thw-logo-font above mr-2">
|
||||
<slot name="above">
|
||||
Technisches<br />
|
||||
Hilfswerk
|
||||
</slot>
|
||||
</span>
|
||||
<v-img
|
||||
class="d-flex"
|
||||
max-width="56"
|
||||
max-height="56"
|
||||
:src="require('../assets/thw.svg')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<v-divider class="d-none d-sm-block my-1" />
|
||||
<span class="d-none d-sm-flex text-wrap thw-logo-font below">
|
||||
<slot>OV Musterstadt</slot>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class THWLogo extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flex-column {
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.v-divider {
|
||||
border-width: 1px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.above {
|
||||
font-size: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.below {
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
<template>
|
||||
<v-toolbar color="primary" prominent dark>
|
||||
<v-toolbar color="primary" style="user-select: none" prominent dark>
|
||||
<v-container class="d-flex pa-0" fluid fill-height>
|
||||
<div class="d-flex justify-start slim text-left text-no-wrap">LOGO</div>
|
||||
<div class="d-flex justify-start slim text-left text-no-wrap">
|
||||
<THWLogo />
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-center text-center mx-auto thw-heading-font">
|
||||
<slot> <h1>TITLE</h1> </slot>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-end slim text-right text-no-wrap">
|
||||
<div class="d-none d-sm-flex justify-end slim text-right text-no-wrap">
|
||||
<div class="flex-column">
|
||||
<Clock
|
||||
class="d-flex justify-end font-weight-light text-h6 text-md-h5"
|
||||
|
|
@ -26,10 +28,12 @@
|
|||
<script lang="ts">
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import Clock from "./Clock.vue";
|
||||
import THWLogo from "./THWLogo.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
Clock,
|
||||
THWLogo,
|
||||
},
|
||||
})
|
||||
export default class TitleBar extends Vue {}
|
||||
|
|
|
|||
Loading…
Reference in a new issue