Layout restructuring
This commit is contained in:
Moritz Kröger
parent
209fffe53a
commit
6cab6a178a
|
|
@ -30,6 +30,7 @@
|
|||
"stylelint-processor-html": "^1.0.0",
|
||||
"stylelint-webpack-plugin": "^0.9.0",
|
||||
"vue": "^2.3.3",
|
||||
"vue-feather-icon": "^1.2.0",
|
||||
"vue-i18n": "^7.1.1",
|
||||
"vue-router": "^2.3.1",
|
||||
"vue-svgicon": "^1.2.4",
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<footer>
|
||||
<ul>
|
||||
<li v-for="item of subMenu">
|
||||
<router-link tag="a" class="btn btn-small btn-txt" :to="item.router">
|
||||
<router-link tag="a" class="btn btn-small btn-txt" :to="item.route">
|
||||
{{ item.label }}
|
||||
</router-link>
|
||||
</li>
|
||||
|
|
@ -27,8 +27,8 @@
|
|||
name="european-stars"
|
||||
width="10em"
|
||||
height="10em"
|
||||
scale="4"
|
||||
color="black" />
|
||||
scale="8"
|
||||
color="#fee872" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -77,8 +77,8 @@
|
|||
return {
|
||||
euromatLogo: require('@/assets/svg/euromat-logo.svg'),
|
||||
languages: [
|
||||
{ label: '🇩🇪', locale: 'de' },
|
||||
{ label: '🇬🇧', locale: 'en' }
|
||||
{ icon: require('@/assets/svg/flag-de.svg'), locale: 'de' },
|
||||
{ icon: require('@/assets/svg/flag-uk.svg'), locale: 'en' }
|
||||
],
|
||||
socialMedia: [
|
||||
{ label: 'Twitter' },
|
||||
|
|
@ -164,8 +164,14 @@
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-xlarge;
|
||||
line-height: 110%;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
text-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -189,9 +195,9 @@
|
|||
position: relative;
|
||||
|
||||
main {
|
||||
background: transparentize($background-primary, 0.5);
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
padding: 0 $small-gap;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -205,8 +211,8 @@
|
|||
.app-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $small-gap $small-gap 0 $small-gap;
|
||||
align-items: flex-start;
|
||||
padding: $base-gap $small-gap 0 $base-gap;
|
||||
}
|
||||
|
||||
.app-background {
|
||||
|
|
@ -219,7 +225,6 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
transform: translate(-65%, -53%);
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
11
src/assets/icons/flag-de.js
Normal file
11
src/assets/icons/flag-de.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* eslint-disable */
|
||||
|
||||
var icon = require('vue-svgicon')
|
||||
icon.register({
|
||||
'flag-de': {
|
||||
width: 16,
|
||||
height: 16,
|
||||
viewBox: '0 0 512 512',
|
||||
data: '<path pid="0" d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621v73.471h512v-73.471c0-21.178-17.167-38.345-38.345-38.345z"/><path pid="1" d="M0 385.379c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345v-73.471H0v73.471z"/><path pid="2" d="M0 200.09h512V311.9H0z"/>'
|
||||
}
|
||||
})
|
||||
11
src/assets/icons/flag-uk.js
Normal file
11
src/assets/icons/flag-uk.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* eslint-disable */
|
||||
|
||||
var icon = require('vue-svgicon')
|
||||
icon.register({
|
||||
'flag-uk': {
|
||||
width: 16,
|
||||
height: 16,
|
||||
viewBox: '0 0 512 512',
|
||||
data: '<path pid="0" d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621V385.38c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345V126.621c0-21.178-17.167-38.345-38.345-38.345z"/><path pid="1" d="M511.469 120.282c-3.022-18.159-18.797-32.007-37.814-32.007h-9.977l-163.54 107.147V88.276h-88.276v107.147L48.322 88.276h-9.977c-19.017 0-34.792 13.847-37.814 32.007l139.778 91.58H0v88.276h140.309L.531 391.717c3.022 18.159 18.797 32.007 37.814 32.007h9.977l163.54-107.147v107.147h88.276V316.577l163.54 107.147h9.977c19.017 0 34.792-13.847 37.814-32.007l-139.778-91.58H512v-88.276H371.691l139.778-91.579z"/><g><path pid="2" d="M282.483 88.276h-52.966v141.241H0v52.966h229.517v141.241h52.966V282.483H512v-52.966H282.483z"/><path pid="3" d="M24.793 421.252l186.583-121.114h-32.428L9.224 410.31a38.393 38.393 0 0 0 15.569 10.942zM346.388 300.138H313.96l180.716 117.305a38.515 38.515 0 0 0 12.287-13.075l-160.575-104.23zM4.049 109.475l157.73 102.387h32.428L15.475 95.842a38.499 38.499 0 0 0-11.426 13.633zM332.566 211.862l170.035-110.375a38.4 38.4 0 0 0-15.699-10.86L300.138 211.862h32.428z"/></g>'
|
||||
}
|
||||
})
|
||||
|
|
@ -4,6 +4,8 @@ require('./cdu-logo')
|
|||
require('./euromat-logo')
|
||||
require('./european-stars')
|
||||
require('./fdp-logo')
|
||||
require('./flag-de')
|
||||
require('./flag-uk')
|
||||
require('./grüne-logo')
|
||||
require('./linke-logo')
|
||||
require('./spd-logo')
|
||||
|
|
|
|||
10
src/assets/svg/flag-de.svg
Normal file
10
src/assets/svg/flag-de.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path style="fill:#464655;" d="M473.655,88.276H38.345C17.167,88.276,0,105.443,0,126.621v73.471h512v-73.471
|
||||
C512,105.443,494.833,88.276,473.655,88.276z"/>
|
||||
<path style="fill:#FFE15A;" d="M0,385.379c0,21.177,17.167,38.345,38.345,38.345h435.31c21.177,0,38.345-17.167,38.345-38.345
|
||||
v-73.471H0V385.379z"/>
|
||||
<rect y="200.09" style="fill:#FF4B55;" width="512" height="111.81"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 742 B |
23
src/assets/svg/flag-uk.svg
Normal file
23
src/assets/svg/flag-uk.svg
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path style="fill:#41479B;" d="M473.655,88.276H38.345C17.167,88.276,0,105.443,0,126.621V385.38
|
||||
c0,21.177,17.167,38.345,38.345,38.345h435.31c21.177,0,38.345-17.167,38.345-38.345V126.621
|
||||
C512,105.443,494.833,88.276,473.655,88.276z"/>
|
||||
<path style="fill:#F5F5F5;" d="M511.469,120.282c-3.022-18.159-18.797-32.007-37.814-32.007h-9.977l-163.54,107.147V88.276h-88.276
|
||||
v107.147L48.322,88.276h-9.977c-19.017,0-34.792,13.847-37.814,32.007l139.778,91.58H0v88.276h140.309L0.531,391.717
|
||||
c3.022,18.159,18.797,32.007,37.814,32.007h9.977l163.54-107.147v107.147h88.276V316.577l163.54,107.147h9.977
|
||||
c19.017,0,34.792-13.847,37.814-32.007l-139.778-91.58H512v-88.276H371.691L511.469,120.282z"/>
|
||||
<g>
|
||||
<polygon style="fill:#FF4B55;" points="282.483,88.276 229.517,88.276 229.517,229.517 0,229.517 0,282.483 229.517,282.483
|
||||
229.517,423.724 282.483,423.724 282.483,282.483 512,282.483 512,229.517 282.483,229.517 "/>
|
||||
<path style="fill:#FF4B55;" d="M24.793,421.252l186.583-121.114h-32.428L9.224,410.31
|
||||
C13.377,415.157,18.714,418.955,24.793,421.252z"/>
|
||||
<path style="fill:#FF4B55;" d="M346.388,300.138H313.96l180.716,117.305c5.057-3.321,9.277-7.807,12.287-13.075L346.388,300.138z"
|
||||
/>
|
||||
<path style="fill:#FF4B55;" d="M4.049,109.475l157.73,102.387h32.428L15.475,95.842C10.676,99.414,6.749,104.084,4.049,109.475z"/>
|
||||
<path style="fill:#FF4B55;" d="M332.566,211.862l170.035-110.375c-4.199-4.831-9.578-8.607-15.699-10.86L300.138,211.862H332.566z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -14,7 +14,7 @@
|
|||
v-for="lang of languages"
|
||||
type="button"
|
||||
@click="changeLanguage(lang.locale)">
|
||||
{{ lang.label }}
|
||||
<img :src="lang.icon" width="25" height="25" :alt="lang.locale" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,17 +57,14 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
li:not(:last-child) {
|
||||
margin-bottom: 3px;
|
||||
li {
|
||||
margin-right: $base-gap;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
border: 3px solid $button-background;
|
||||
border-radius: $border-radius;
|
||||
padding: 10px 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -77,6 +74,10 @@
|
|||
|
||||
button {
|
||||
font-size: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: $base-gap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
$blue: #1e35d5;
|
||||
$blue: #40a6ee;
|
||||
$dark-blue: #06069d;
|
||||
$yellow: #fadc2a;
|
||||
$yellow: #fee872;
|
||||
$orange: #fa742a;
|
||||
|
||||
$background-primary: $blue;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
$font-size-xlarge: 45px;
|
||||
$font-size-large: 35px;
|
||||
|
||||
$small-gap: 15px;
|
||||
$base-gap: 25px;
|
||||
$border-radius: 20px;
|
||||
|
|
|
|||
|
|
@ -6798,6 +6798,10 @@ void-elements@^2.0.0:
|
|||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
|
||||
|
||||
vue-feather-icon@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-feather-icon/-/vue-feather-icon-1.2.0.tgz#3801b8d25f99ea62978a2f0c4042976ede497573"
|
||||
|
||||
vue-hot-reload-api@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"
|
||||
|
|
|
|||
Loading…
Reference in a new issue