changes
This commit is contained in:
Moritz Ruth
parent
e55d5feced
commit
7ae14cc4be
18 changed files with 589 additions and 24 deletions
|
|
@ -14,7 +14,8 @@ module.exports = {
|
||||||
"@moritzruth/eslint-config/vue"
|
"@moritzruth/eslint-config/vue"
|
||||||
],
|
],
|
||||||
rules: {
|
rules: {
|
||||||
"no-unused-vars": "warn"
|
"no-unused-vars": "warn",
|
||||||
|
"vue/no-unused-components": "warn"
|
||||||
},
|
},
|
||||||
"settings": {
|
"settings": {
|
||||||
"import/resolver": {
|
"import/resolver": {
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 189 B After Width: | Height: | Size: 209 B |
|
|
@ -1 +1 @@
|
||||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 144 B After Width: | Height: | Size: 144 B |
|
|
@ -1 +1 @@
|
||||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 720 B After Width: | Height: | Size: 740 B |
|
|
@ -1 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="76.75 182.661 358.5 146.679" width="358.5pt" height="146.679pt"><g><g><path d=" M 121.75 182.749 L 166.75 329.339 L 76.75 329.339 L 121.75 182.749 Z " fill-rule="evenodd" fill="currentColor"/><path d=" M 206.75 182.749 L 251.75 329.339 L 161.75 329.339 L 206.75 182.749 Z " fill-rule="evenodd" fill="currentColor"/></g><g><path d=" M 327.25 182.705 L 372.25 329.295 L 282.25 329.295 L 327.25 182.705 Z " fill-rule="evenodd" fill="currentColor"/><path d=" M 390.537 329.339 L 345.25 182.837 L 435.25 182.661 L 390.537 329.339 Z " fill-rule="evenodd" fill="currentColor"/></g></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 714 B |
|
|
@ -4,3 +4,5 @@ $pink: #BB2081;
|
||||||
$pink-c: white;
|
$pink-c: white;
|
||||||
$blue: #14AAD8;
|
$blue: #14AAD8;
|
||||||
$blue-c: white;
|
$blue-c: white;
|
||||||
|
$green: #00ff64;
|
||||||
|
$green-c: black;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
@mixin content($padding: 20px) {
|
@mixin content($padding: 20px) {
|
||||||
$width: 800px;
|
$width: 1000px;
|
||||||
|
|
||||||
max-width: calc(100vw - #{$padding} * 2);
|
max-width: calc(100vw - #{$padding} * 2);
|
||||||
width: $width;
|
width: $width;
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
|
@use "../colors";
|
||||||
|
|
||||||
%link {
|
%link {
|
||||||
color: var(--colors-link);
|
color: colors.$blue;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
transition: 100ms linear opacity;
|
transition: 100ms linear opacity;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 0.8;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@ html, body {
|
||||||
@include content.content();
|
@include content.content();
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.underlined-link {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
||||||
|
|
@ -33,28 +33,34 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@use "~@/assets/styles/colors";
|
||||||
|
|
||||||
$scale-up-duration: 800ms;
|
$scale-up-duration: 800ms;
|
||||||
$slide-duration: 1000ms;
|
$slide-duration: 1000ms;
|
||||||
$slide-delay: $scale-up-duration / 2;
|
$slide-delay: $scale-up-duration / 2;
|
||||||
$fade-duration: 400ms;
|
$fade-duration: 400ms;
|
||||||
$fade-delay: $slide-delay + 300ms;
|
$fade-delay: $slide-delay + 300ms;
|
||||||
$slide-length: 37.5%;
|
$slide-length: 37.5%;
|
||||||
|
$border-show-delay: $fade-delay + $fade-duration;
|
||||||
|
|
||||||
.animated-logo {
|
.animated-logo {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
max-width: 60vw;
|
max-width: 60vw;
|
||||||
|
padding: 40px 40px 30px;
|
||||||
|
|
||||||
animation: scaleUp $scale-up-duration ease-out both;
|
background: transparentize(colors.$background, 0.5);
|
||||||
|
color: colors.$background-c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animated-logo__svg {
|
.animated-logo__svg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
margin-bottom: 40px;
|
margin-bottom: 20px;
|
||||||
|
animation: scaleUp $scale-up-duration ease-out both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animated-logo__name {
|
.animated-logo__name {
|
||||||
font-size: 2.3rem;
|
font-size: 2rem;
|
||||||
animation: fadeIn $slide-duration $scale-up-duration ease both;
|
animation: fadeIn $slide-duration $scale-up-duration ease both;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.external-link {
|
.external-link {
|
||||||
padding-right: 2px;
|
padding-right: 2px;
|
||||||
overflow-wrap: break-word;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.external-link__icon {
|
.external-link__icon {
|
||||||
|
|
|
||||||
234
components/MyButton.vue
Normal file
234
components/MyButton.vue
Normal file
|
|
@ -0,0 +1,234 @@
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@use "~@/assets/styles/colors";
|
||||||
|
|
||||||
|
.my-button {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 8px 15px;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
height: 30px;
|
||||||
|
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
text-decoration: none;
|
||||||
|
font: inherit;
|
||||||
|
color: inherit;
|
||||||
|
cursor: default;
|
||||||
|
|
||||||
|
transition: 140ms ease background-color;
|
||||||
|
&:hover, &:focus {
|
||||||
|
&:not(.my-button--disabled) {
|
||||||
|
background: transparentize(colors.$blue, 0.85);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.my-button--disabled, &.my-button--loading {
|
||||||
|
&::before {
|
||||||
|
pointer-events: auto;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.my-button--loading {
|
||||||
|
&::after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.my-button--center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-button::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
background-color: colors.$background;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
transition: 100ms linear opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-button::after {
|
||||||
|
$size: 20px;
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transition: 100ms linear opacity;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% - #{$size} / 2 + 2px);
|
||||||
|
left: calc(50% - #{$size} / 2);
|
||||||
|
width: $size;
|
||||||
|
height: $size;
|
||||||
|
|
||||||
|
border: 2px solid var(--colors-background-c);
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-button__text {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-button__prefix {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-left: -5px;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-button__suffix {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "MyButton",
|
||||||
|
props: {
|
||||||
|
to: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
},
|
||||||
|
href: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
isSubmit: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
center: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isExternalLink: vm => Boolean(vm.href),
|
||||||
|
isInternalLink: vm => Boolean(vm.to)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick(event) {
|
||||||
|
if (!this.disabled && !this.loading) {
|
||||||
|
this.$emit("click", event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render(h) {
|
||||||
|
const children = [];
|
||||||
|
|
||||||
|
if (this.$slots.prefix) {
|
||||||
|
children.push(h("div", {
|
||||||
|
class: "my-button__prefix"
|
||||||
|
}, this.$slots.prefix));
|
||||||
|
}
|
||||||
|
|
||||||
|
children.push(h("div", {
|
||||||
|
class: "my-button__text"
|
||||||
|
}, this.$slots.default));
|
||||||
|
|
||||||
|
if (this.$slots.suffix) {
|
||||||
|
h("div", {
|
||||||
|
class: "my-button__suffix"
|
||||||
|
}, this.$slots.suffix);
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseOptions = {
|
||||||
|
class: ["my-button", {
|
||||||
|
"my-button--loading": this.loading,
|
||||||
|
"my-button--disabled": this.disabled,
|
||||||
|
"my-button--center": this.center
|
||||||
|
}],
|
||||||
|
on: {
|
||||||
|
click: this.onClick
|
||||||
|
},
|
||||||
|
directives: [
|
||||||
|
{
|
||||||
|
name: "ripple",
|
||||||
|
modifiers: {
|
||||||
|
click: true,
|
||||||
|
400: true
|
||||||
|
},
|
||||||
|
value: "rgba(255, 255, 255, 0.2)"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
attrs: {
|
||||||
|
tabindex: this.disabled || this.loading ? "-1" : "0"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.isInternalLink) {
|
||||||
|
return h("nuxt-link", {
|
||||||
|
...baseOptions,
|
||||||
|
props: {
|
||||||
|
to: this.to
|
||||||
|
}
|
||||||
|
}, children);
|
||||||
|
} else if (this.isExternalLink) {
|
||||||
|
return h("a", {
|
||||||
|
...baseOptions,
|
||||||
|
attrs: {
|
||||||
|
...baseOptions.attrs,
|
||||||
|
href: this.href,
|
||||||
|
rel: "noopener"
|
||||||
|
}
|
||||||
|
}, children);
|
||||||
|
}
|
||||||
|
|
||||||
|
return h("button", {
|
||||||
|
...baseOptions,
|
||||||
|
attrs: {
|
||||||
|
...baseOptions.attrs,
|
||||||
|
disabled: this.disabled,
|
||||||
|
type: this.isSubmit ? "submit" : "button"
|
||||||
|
}
|
||||||
|
}, children);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<footer class="my-footer">
|
<footer class="my-footer">
|
||||||
<nuxt-link
|
<nuxt-link
|
||||||
v-for="item in $options.items"
|
v-for="item in $options.items"
|
||||||
class="my-footer__link link"
|
class="my-footer__link underlined-link"
|
||||||
:key="item.label"
|
:key="item.label"
|
||||||
:to="item.to"
|
:to="item.to"
|
||||||
@click.native.passive="open = false"
|
@click.native.passive="open = false"
|
||||||
|
|
@ -30,9 +30,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@include screenSize.mobile {
|
@include screenSize.mobile {
|
||||||
|
|
||||||
|
.my-footer {
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.my-footer__link:not(:last-child) {
|
.my-footer__link:not(:last-child) {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -110,7 +110,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation-bar__title {
|
.navigation-bar__title {
|
||||||
font-size: 1.4rem;
|
font-size: 2rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: bold;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -190,7 +192,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
color: colors.$background-c;
|
color: colors.$background-c;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 1.4rem;
|
font-size: 2rem;
|
||||||
|
|
||||||
background: black;
|
background: black;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
@ -254,12 +256,18 @@
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation-bar__link-container:not(:last-child) {
|
.navigation-bar__link-container:not(:last-child) {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navigation-bar__link {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
146
components/pages/projects/MyProject.vue
Normal file
146
components/pages/projects/MyProject.vue
Normal file
|
|
@ -0,0 +1,146 @@
|
||||||
|
<template>
|
||||||
|
<div class="my-project">
|
||||||
|
<h2 class="my-project__title">
|
||||||
|
{{ title }}
|
||||||
|
</h2>
|
||||||
|
<span class="my-project__kind">{{ kind }}</span>
|
||||||
|
<div class="my-project__description">
|
||||||
|
<slot/>
|
||||||
|
</div>
|
||||||
|
<div class="my-project__links" v-if="github || npm || url">
|
||||||
|
<MyButton
|
||||||
|
v-if="url !== ''"
|
||||||
|
class="my-project__link"
|
||||||
|
:href="url"
|
||||||
|
>
|
||||||
|
<template v-slot:prefix>
|
||||||
|
<PointerRightIcon class="my-project__link-icon"/>
|
||||||
|
</template>
|
||||||
|
Open
|
||||||
|
</MyButton>
|
||||||
|
<MyButton
|
||||||
|
v-if="github !== ''"
|
||||||
|
class="my-project__link"
|
||||||
|
:href="`https://github.com/${github}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prefix>
|
||||||
|
<GitHubIcon class="my-project__link-icon"/>
|
||||||
|
</template>
|
||||||
|
GitHub
|
||||||
|
</MyButton>
|
||||||
|
<MyButton
|
||||||
|
v-if="npm !== ''"
|
||||||
|
class="my-project__link"
|
||||||
|
:href="`https://npmjs.com/${npm}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prefix>
|
||||||
|
<NPMIcon class="my-project__link-icon"/>
|
||||||
|
</template>
|
||||||
|
NPM
|
||||||
|
</MyButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use "~@/assets/styles/colors";
|
||||||
|
@use "~@/assets/styles/screenSize";
|
||||||
|
|
||||||
|
.my-project {
|
||||||
|
background: #090909;
|
||||||
|
border: 1px solid colors.$green;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 10px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
width: 400px;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
&:nth-child(3n+1) {
|
||||||
|
border-color: colors.$blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3n+2) {
|
||||||
|
border-color: colors.$pink;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-project__title {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-project__kind {
|
||||||
|
display: block;
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-project__links {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-project__link {
|
||||||
|
height: 30px;
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-project__link-icon {
|
||||||
|
height: 25px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include screenSize.mobile {
|
||||||
|
.my-project__links {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: stretch;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import MyButton from "@/components/MyButton";
|
||||||
|
import GitHubIcon from "@/assets/icons/github.svg";
|
||||||
|
import NPMIcon from "@/assets/icons/npm.svg";
|
||||||
|
import PointerRightIcon from "@/assets/icons/pointer-right.svg";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "MyProject",
|
||||||
|
components: { MyButton, GitHubIcon, NPMIcon, PointerRightIcon },
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
kind: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
npm: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
},
|
||||||
|
github: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
},
|
||||||
|
url: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -2,9 +2,35 @@
|
||||||
<div class="index-page">
|
<div class="index-page">
|
||||||
<NavigationBar background-after-scroll title="Start"/>
|
<NavigationBar background-after-scroll title="Start"/>
|
||||||
<canvas class="index-page__background" ref="canvas"/>
|
<canvas class="index-page__background" ref="canvas"/>
|
||||||
<div class="index-page__content">
|
<main class="index-page__content">
|
||||||
<AnimatedLogo/>
|
<AnimatedLogo/>
|
||||||
|
<div class="index-page__socials">
|
||||||
|
<a
|
||||||
|
class="index-page__social"
|
||||||
|
href="https://instagram.com/moritzruth_dev"
|
||||||
|
title="Instagram"
|
||||||
|
><InstagramIcon class="index-page__social-icon"/></a>
|
||||||
|
<a
|
||||||
|
class="index-page__social"
|
||||||
|
href="https://twitter.com/moritzruth_dev"
|
||||||
|
title="Twitter"
|
||||||
|
><TwitterIcon class="index-page__social-icon"/></a>
|
||||||
|
<a
|
||||||
|
class="index-page__social"
|
||||||
|
href="https://npmjs.org/~moritzruth"
|
||||||
|
title="NPM"
|
||||||
|
><NPMIcon class="index-page__social-icon"/></a>
|
||||||
|
<a
|
||||||
|
class="index-page__social"
|
||||||
|
href="https://github.com/moritzruth"
|
||||||
|
title="GitHub"
|
||||||
|
><GitHubIcon class="index-page__social-icon"/></a>
|
||||||
|
<a
|
||||||
|
class="index-page__social"
|
||||||
|
href="mailto:dev@moritz-ruth.de"
|
||||||
|
><EmailIcon class="index-page__social-icon"/></a>
|
||||||
</div>
|
</div>
|
||||||
|
</main>
|
||||||
<footer class="index-page__footer">
|
<footer class="index-page__footer">
|
||||||
<nuxt-link
|
<nuxt-link
|
||||||
v-for="item in $options.footerItems"
|
v-for="item in $options.footerItems"
|
||||||
|
|
@ -24,7 +50,8 @@
|
||||||
@use "~@/assets/styles/colors";
|
@use "~@/assets/styles/colors";
|
||||||
|
|
||||||
.index-page {
|
.index-page {
|
||||||
background: black;
|
background: colors.$background;
|
||||||
|
color: colors.$background-c;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -40,8 +67,59 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
height: calc(100vh - var(--navigation-bar-height));
|
height: calc(90vh - var(--navigation-bar-height));
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page__socials {
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
padding: 20px;
|
||||||
|
background: transparentize(colors.$background, 0.5);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page__social {
|
||||||
|
text-decoration: none;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover, &:focus-within {
|
||||||
|
&::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
background: linear-gradient(-135deg, colors.$blue, colors.$pink 80%);
|
||||||
|
pointer-events: none;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
transition: 200ms opacity ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page__social-icon {
|
||||||
|
color: colors.$background-c;
|
||||||
|
height: 40px;
|
||||||
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-page__footer {
|
.index-page__footer {
|
||||||
|
|
@ -52,7 +130,7 @@
|
||||||
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
||||||
opacity: 0.5;
|
opacity: 0.8;
|
||||||
transition: 200ms linear opacity;
|
transition: 200ms linear opacity;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -70,7 +148,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@include screenSize.mobile {
|
@include screenSize.mobile {
|
||||||
|
.index-page__social-icon {
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
@ -79,6 +159,11 @@
|
||||||
import AnimatedLogo from "@/components/AnimatedLogo";
|
import AnimatedLogo from "@/components/AnimatedLogo";
|
||||||
import NavigationBar from "@/components/NavigationBar";
|
import NavigationBar from "@/components/NavigationBar";
|
||||||
import { footerItems } from "@/assets/js/footerItems";
|
import { footerItems } from "@/assets/js/footerItems";
|
||||||
|
import InstagramIcon from "@/assets/icons/instagram.svg";
|
||||||
|
import TwitterIcon from "@/assets/icons/twitter.svg";
|
||||||
|
import NPMIcon from "@/assets/icons/npm.svg";
|
||||||
|
import GitHubIcon from "@/assets/icons/github.svg";
|
||||||
|
import EmailIcon from "@/assets/icons/email.svg";
|
||||||
|
|
||||||
const COLORS = [
|
const COLORS = [
|
||||||
"#BB2081",
|
"#BB2081",
|
||||||
|
|
@ -114,7 +199,7 @@
|
||||||
export default {
|
export default {
|
||||||
name: "IndexPage",
|
name: "IndexPage",
|
||||||
layout: "empty",
|
layout: "empty",
|
||||||
components: { NavigationBar, AnimatedLogo },
|
components: { NavigationBar, AnimatedLogo, InstagramIcon, TwitterIcon, NPMIcon, GitHubIcon, EmailIcon },
|
||||||
mounted() {
|
mounted() {
|
||||||
let configIndex = 0;
|
let configIndex = 0;
|
||||||
|
|
||||||
|
|
|
||||||
76
pages/projects.vue
Normal file
76
pages/projects.vue
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
<template>
|
||||||
|
<div class="projects-page">
|
||||||
|
<NavigationBar title="Projects"/>
|
||||||
|
<main class="content">
|
||||||
|
<h1 class="heading--1 projects-page__heading">
|
||||||
|
Projects
|
||||||
|
</h1>
|
||||||
|
<div class="projects-page__projects">
|
||||||
|
<MyProject
|
||||||
|
title="shaped.js"
|
||||||
|
kind="JavaScript Library"
|
||||||
|
github="moritzruth/shaped.js"
|
||||||
|
npm="shaped.js"
|
||||||
|
>
|
||||||
|
Generate amazing animated backgrounds using only a canvas element.
|
||||||
|
<nuxt-link to="/" class="link">See it in action on the home page.</nuxt-link>
|
||||||
|
</MyProject>
|
||||||
|
<MyProject
|
||||||
|
title="Schweredruck-Simulation"
|
||||||
|
kind="Web App (german)"
|
||||||
|
github="moritzruth/schweredruck-simulation"
|
||||||
|
url="https://app.moritz-ruth.de/schweredruck-simulation/"
|
||||||
|
>
|
||||||
|
Calculate and visualize the hydrostatic pressure in different liquids.
|
||||||
|
</MyProject>
|
||||||
|
<MyProject
|
||||||
|
title="log-groups"
|
||||||
|
kind="Node.js Package"
|
||||||
|
github="moritzruth/log-groups"
|
||||||
|
npm="log-groups"
|
||||||
|
>
|
||||||
|
Print console log messages in groups.
|
||||||
|
</MyProject>
|
||||||
|
<MyProject
|
||||||
|
title="node-enttec-open-dmx-usb"
|
||||||
|
kind="Node.js Package"
|
||||||
|
github="moritzruth/node-enttec-open-dmx-usb"
|
||||||
|
npm="enttec-open-dmx-usb"
|
||||||
|
>
|
||||||
|
Use the Enttec Open DMX USB Interface with Node.js.
|
||||||
|
</MyProject>
|
||||||
|
<MyProject
|
||||||
|
title="eslint-config"
|
||||||
|
kind="ESLint Configuration"
|
||||||
|
github="moritzruth/eslint-config"
|
||||||
|
npm="@moritzruth/eslint-config"
|
||||||
|
>
|
||||||
|
My personal ESLint configuration.
|
||||||
|
</MyProject>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use "~@/assets/styles/colors";
|
||||||
|
|
||||||
|
.projects-page__heading {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects-page__projects {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import NavigationBar from "@/components/NavigationBar";
|
||||||
|
import MyProject from "@/components/pages/projects/MyProject";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "ProjectsPage",
|
||||||
|
components: { MyProject, NavigationBar }
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue