87 lines
1.7 KiB
Vue
87 lines
1.7 KiB
Vue
<template>
|
|
<div>
|
|
<header>
|
|
<interface-language-dropdown class="interface-language-dropdown"></interface-language-dropdown>
|
|
|
|
<h1>{{indexName}}</h1>
|
|
|
|
<h4 v-translate>A search engine of <a href="https://joinpeertube.org" target="_blank">PeerTube</a> videos and channels, developed by <a href="https://framasoft.org" target="_blank">Framasoft</a></h4>
|
|
|
|
<img class="search-home" src="/img/search-home.png" alt="">
|
|
</header>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import '../scss/_variables';
|
|
|
|
header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 30px;
|
|
font-family: monospace;
|
|
|
|
.interface-language-dropdown {
|
|
width: 20px;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
}
|
|
|
|
.search-home {
|
|
width: 300px;
|
|
height: 250px;
|
|
margin: 30px 0 0 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 50px;
|
|
// Because it's loaded dynamically
|
|
min-height: 70px;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
h4 {
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
margin: 0;
|
|
text-align: center;
|
|
|
|
a {
|
|
color: #000;
|
|
font-weight: $font-semibold;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: $small-screen) {
|
|
h1 {
|
|
font-size: 30px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue'
|
|
import InterfaceLanguageDropdown from './InterfaceLanguageDropdown.vue'
|
|
|
|
export default Vue.extend({
|
|
components: {
|
|
'interface-language-dropdown': InterfaceLanguageDropdown
|
|
},
|
|
props: {
|
|
indexName: String
|
|
}
|
|
})
|
|
</script>
|