forked from nutomic/joinpeertube
Fix missing translations
This commit is contained in:
Chocobozzz
parent
6dbe2c1e87
commit
507ce501af
16 changed files with 739 additions and 696 deletions
|
|
@ -19,10 +19,6 @@
|
||||||
</b-card>
|
</b-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { BCollapse, BCard, BCardHeader, BCardBody, BCardText, VBToggle } from 'bootstrap-vue'
|
import { BCollapse, BCard, BCardHeader, BCardBody, BCardText, VBToggle } from 'bootstrap-vue'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="root">
|
<div id="content-selection">
|
||||||
|
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<img :src="thumbnailUrl" alt="thumbnail"/>
|
<img :src="thumbnailUrl" alt="thumbnail"/>
|
||||||
|
|
@ -51,10 +51,10 @@
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
@import '../scss/_variables';
|
@import '../scss/_variables';
|
||||||
|
|
||||||
.root {
|
#content-selection {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@media screen and (max-width: $small-screen) {
|
@media screen and (max-width: $small-screen) {
|
||||||
|
|
@ -67,68 +67,68 @@
|
||||||
margin-bottom: 20px !important;
|
margin-bottom: 20px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 137px;
|
height: 137px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row !important;
|
flex-direction: row !important;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
vertical-align: sub;
|
vertical-align: sub;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
.title {
|
.title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: $font-semibold;
|
font-weight: $font-semibold;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-family: 'Proza Libre', sans-serif;
|
font-family: 'Proza Libre', sans-serif;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
font-size: 16px;
|
|
||||||
min-height: 170px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: $responsive-screen) {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag {
|
.description {
|
||||||
margin-top: 10px;
|
font-size: 16px;
|
||||||
|
min-height: 170px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: $responsive-screen) {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="root">
|
<div id="content-selections">
|
||||||
<div class="content-selection" v-for="contentSelection in getContentSelections()">
|
<div class="content-selection" v-for="contentSelection in getContentSelections()">
|
||||||
<content-selection :type="contentSelection.type" :title="contentSelection.title"
|
<content-selection :type="contentSelection.type" :title="contentSelection.title"
|
||||||
:thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags"
|
:thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags"
|
||||||
|
|
@ -10,16 +10,18 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
@import '../scss/_variables';
|
@import '../scss/_variables';
|
||||||
|
|
||||||
.content-selection {
|
#content-selections {
|
||||||
margin-bottom: 80px;
|
.content-selection {
|
||||||
}
|
margin-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
.discover-instances {
|
.discover-instances {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<footer>
|
<footer id="main-footer">
|
||||||
<div>
|
<div>
|
||||||
<a target="_blank" rel="noopener noreferrer" href="https://framasoft.org/en/legals/" v-translate>Legal notices</a>
|
<a target="_blank" rel="noopener noreferrer" href="https://framasoft.org/en/legals/" v-translate>Legal notices</a>
|
||||||
|
|
||||||
|
|
@ -18,11 +18,11 @@
|
||||||
</footer>
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
@import '../scss/_variables.scss';
|
@import '../scss/_variables.scss';
|
||||||
@import '../scss/_mixins.scss';
|
@import '../scss/_mixins.scss';
|
||||||
|
|
||||||
footer {
|
#main-footer {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 30px 200px;
|
padding: 30px 200px;
|
||||||
|
|
@ -37,10 +37,8 @@
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $responsive-screen) {
|
@media screen and (max-width: $responsive-screen) {
|
||||||
footer {
|
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<img alt="PeerTube" :src="buildImgUrl('brand-small.png')">
|
<img alt="PeerTube" :src="buildImgUrl('brand-small.png')">
|
||||||
|
|
||||||
<div class="support">
|
<div class="support">
|
||||||
developed by
|
<translate>developed by</translate>
|
||||||
|
|
||||||
<img alt="Framasoft text logo" :src="buildImgUrl('framasoft-logo-text-small.png')">
|
<img alt="Framasoft text logo" :src="buildImgUrl('framasoft-logo-text-small.png')">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -47,65 +47,68 @@
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
@import '../scss/_variables.scss';
|
@import '../scss/_variables.scss';
|
||||||
@import '../scss/_mixins.scss';
|
@import '../scss/_mixins.scss';
|
||||||
|
|
||||||
header {
|
#main-header {
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-collapse {
|
header {
|
||||||
&.collapsing,
|
margin-bottom: 30px;
|
||||||
&.show {
|
}
|
||||||
padding-top: 20px;
|
|
||||||
|
|
||||||
.nav-item {
|
.navbar-collapse {
|
||||||
margin-right: 0;
|
&.collapsing,
|
||||||
margin-top: 5px;
|
&.show {
|
||||||
|
padding-top: 20px;
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
@include disable-default-a-behaviour;
|
@include disable-default-a-behaviour;
|
||||||
|
|
||||||
color: #000;
|
color: #000;
|
||||||
font-family: 'Proza Libre', sans-serif;
|
font-family: 'Proza Libre', sans-serif;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
|
|
||||||
.support img {
|
.support img {
|
||||||
vertical-align: initial;
|
vertical-align: initial;
|
||||||
margin-left: 1px;
|
margin-left: 3px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item {
|
.nav-item {
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
color: #000 !important;
|
color: #000 !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
font-family: 'Proza Libre', sans-serif;
|
font-family: 'Proza Libre', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-account {
|
.create-account {
|
||||||
font-weight: $font-semibold;
|
font-weight: $font-semibold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.router-link-active:not(.navbar-brand) {
|
.router-link-active:not(.navbar-brand) {
|
||||||
border-bottom: 3px solid $orange;
|
border-bottom: 3px solid $orange;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="i18n">
|
<div id="i18n">
|
||||||
<b-dropdown>
|
<b-dropdown>
|
||||||
<template slot="button-content">
|
<template slot="button-content">
|
||||||
<img :src="buildImgUrl('language.png')" alt="Change languages logo"/>
|
<img :src="buildImgUrl('language.png')" alt="Change languages logo"/>
|
||||||
|
|
@ -27,29 +27,29 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.i18n .dropdown {
|
#i18n {
|
||||||
button {
|
.text {
|
||||||
height: 60px;
|
font-size: 11px;
|
||||||
color: #000;
|
|
||||||
background-color: #fff;
|
|
||||||
border: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-toggle::after {
|
.dropdown {
|
||||||
display: none;
|
button {
|
||||||
}
|
height: 60px;
|
||||||
|
color: #000;
|
||||||
|
background-color: #fff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
.translate svg {
|
.dropdown-toggle::after {
|
||||||
width: 20px;
|
display: none;
|
||||||
margin-right: 5px;
|
}
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style scoped>
|
.translate svg {
|
||||||
.text {
|
width: 20px;
|
||||||
font-size: 11px;
|
margin-right: 5px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="root">
|
<div id="instance-card">
|
||||||
|
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="name-host">
|
<div class="name-host">
|
||||||
|
|
@ -92,10 +92,10 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss">
|
||||||
@import '../scss/_variables.scss';
|
@import '../scss/_variables.scss';
|
||||||
|
|
||||||
.root {
|
#instance-card {
|
||||||
min-height: 185px;
|
min-height: 185px;
|
||||||
width: 770px;
|
width: 770px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
@ -103,104 +103,114 @@
|
||||||
border: solid 1px #d9d9d9;
|
border: solid 1px #d9d9d9;
|
||||||
padding: 20px 25px 15px 25px;
|
padding: 20px 25px 15px 25px;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
|
||||||
|
|
||||||
.left,
|
.left,
|
||||||
.right {
|
.right {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon,
|
|
||||||
.label {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
color: $grey;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
margin-right: 40px;
|
|
||||||
width: 480px;
|
|
||||||
|
|
||||||
.name-host {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 3px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
font-family: "Proza Libre", sans-serif;
|
|
||||||
font-weight: $font-semibold;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.host {
|
|
||||||
color: $grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-limits {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.quota {
|
|
||||||
display: flex;
|
|
||||||
margin-right: 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags {
|
|
||||||
display: flex;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
.follow,
|
|
||||||
.languages {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nsfw {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
margin-top: auto;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
align-self: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $responsive-screen) {
|
|
||||||
.root {
|
|
||||||
width: auto;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 15px 10px;
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.left {
|
.icon,
|
||||||
width: auto;
|
.label {
|
||||||
margin-right: 0;
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: $grey;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 500px;
|
||||||
|
|
||||||
|
.name-host {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.name {
|
||||||
margin-top: 20px;
|
font-family: "Proza Libre", sans-serif;
|
||||||
|
font-weight: $font-semibold;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.follow,
|
.host {
|
||||||
.languages {
|
color: $grey;
|
||||||
margin-bottom: 5px;
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-limits {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.quota {
|
||||||
|
display: flex;
|
||||||
|
margin-right: 80px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: relative;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.auto-blacklist {
|
||||||
|
display: flex;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
display: flex;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
.follow,
|
||||||
|
.languages {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nsfw {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
margin-top: auto;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $responsive-screen) {
|
||||||
|
.root {
|
||||||
|
width: auto;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 15px 10px;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: auto;
|
||||||
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.right {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
|
||||||
|
.follow,
|
||||||
|
.languages {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -248,7 +258,7 @@
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
bytes (value) {
|
bytes (value) {
|
||||||
if (value === -1) return this.$gettext('Unlimited space for users')
|
if (value === -1) return this.$gettext('Unlimited space')
|
||||||
|
|
||||||
// https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
|
// https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
|
||||||
const dictionaryBytes = [
|
const dictionaryBytes = [
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="instances-list" class="root">
|
<div id="instances-list">
|
||||||
<div class="filters">
|
<div class="filters">
|
||||||
<div v-translate class="title">Filter according to your preferences</div>
|
<div v-translate class="title">Filter according to your preferences</div>
|
||||||
|
|
||||||
|
|
@ -102,7 +102,7 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="instances-list">
|
<div class="list">
|
||||||
<div v-translate class="title">Instances list</div>
|
<div v-translate class="title">Instances list</div>
|
||||||
|
|
||||||
<div class="list" v-bind:class="{ unloaded: instances.length === 0 && noResults === false }">
|
<div class="list" v-bind:class="{ unloaded: instances.length === 0 && noResults === false }">
|
||||||
|
|
@ -126,85 +126,87 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss">
|
||||||
@import '../scss/_variables.scss';
|
@import '../scss/_variables.scss';
|
||||||
|
|
||||||
.title {
|
#instances-list {
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters {
|
|
||||||
margin-bottom: 100px;
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin-bottom: 25px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
|
||||||
border-left: 6px solid $orange;
|
|
||||||
padding-left: 24px;
|
|
||||||
|
|
||||||
.group {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
& > label {
|
|
||||||
min-width: 140px;
|
|
||||||
margin: 0 10px 0 0;
|
|
||||||
|
|
||||||
&.label-checkbox {
|
|
||||||
align-self: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
width: 280px;
|
|
||||||
height: 35px;
|
|
||||||
line-height: 21px;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group-toggle {
|
|
||||||
.btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #000;
|
|
||||||
background-color: #fff;
|
|
||||||
border-color: $orange;
|
|
||||||
min-height: 30px;
|
|
||||||
padding: 0 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: #fff;
|
|
||||||
font-weight: $font-semibold;
|
|
||||||
background-color: $orange;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.instances-list {
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $responsive-screen) {
|
|
||||||
.filters {
|
.filters {
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
padding-left: 15px;
|
border-left: 6px solid $orange;
|
||||||
|
padding-left: 24px;
|
||||||
|
|
||||||
.group {
|
.group {
|
||||||
flex-direction: column;
|
margin-bottom: 30px;
|
||||||
align-items: flex-start;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
label {
|
& > label {
|
||||||
margin-bottom: 5px;
|
min-width: 140px;
|
||||||
font-size: 15px;
|
margin: 0 10px 0 0;
|
||||||
|
|
||||||
|
&.label-checkbox {
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
width: 280px;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 21px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group-toggle {
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #000;
|
||||||
|
background-color: #fff;
|
||||||
|
border-color: $orange;
|
||||||
|
min-height: 30px;
|
||||||
|
padding: 0 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: $font-semibold;
|
||||||
|
background-color: $orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $responsive-screen) {
|
||||||
|
.filters {
|
||||||
|
margin-bottom: 100px;
|
||||||
|
|
||||||
|
form {
|
||||||
|
padding-left: 15px;
|
||||||
|
|
||||||
|
.group {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -246,7 +248,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.instances-list {
|
.list {
|
||||||
.title {
|
.title {
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@ Vue.use(GetTextPlugin, {
|
||||||
translations,
|
translations,
|
||||||
availableLanguages,
|
availableLanguages,
|
||||||
defaultLanguage: 'en_US',
|
defaultLanguage: 'en_US',
|
||||||
silent: true
|
silent: false
|
||||||
})
|
})
|
||||||
|
|
||||||
const localePath = window.location.pathname
|
const localePath = window.location.pathname
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main id="all-content-selections">
|
||||||
<div class="blocks">
|
<div class="blocks">
|
||||||
|
|
||||||
<div class="title-block">
|
<div class="title-block">
|
||||||
|
|
@ -13,13 +13,14 @@
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss">
|
||||||
@import '../scss/_variables.scss';
|
@import '../scss/_variables.scss';
|
||||||
|
|
||||||
.blocks {
|
#all-content-selections {
|
||||||
margin: 60px auto;
|
.blocks {
|
||||||
|
margin: 60px auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main id="faq">
|
||||||
<div class="blocks">
|
<div class="blocks">
|
||||||
|
|
||||||
<div class="title-block">
|
<div class="title-block">
|
||||||
|
|
@ -495,33 +495,33 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
header a {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
@import '../scss/_variables.scss';
|
@import '../scss/_variables.scss';
|
||||||
|
|
||||||
.block .title {
|
#faq {
|
||||||
font-size: 22px;
|
header a {
|
||||||
margin-top: 30px;
|
color: #000;
|
||||||
margin-bottom: 15px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
.block .title {
|
||||||
margin: 5px 0;
|
font-size: 22px;
|
||||||
}
|
margin-top: 30px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.blocks {
|
.card {
|
||||||
margin: 60px auto;
|
margin: 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
.blocks {
|
||||||
padding: 10px 20px;
|
margin: 60px auto;
|
||||||
margin: 0 0 20px;
|
}
|
||||||
font-size: 17.5px;
|
|
||||||
border-left: 5px solid #eee;
|
blockquote {
|
||||||
|
padding: 10px 20px;
|
||||||
|
margin: 0 0 20px;
|
||||||
|
font-size: 17.5px;
|
||||||
|
border-left: 5px solid #eee;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main id="hall-of-fame">
|
||||||
<div class="blocks">
|
<div class="blocks">
|
||||||
|
|
||||||
<div class="title-block">
|
<div class="title-block">
|
||||||
|
|
@ -555,58 +555,60 @@
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss">
|
||||||
@import '../scss/_variables.scss';
|
@import '../scss/_variables.scss';
|
||||||
@import '../scss/_mixins.scss';
|
@import '../scss/_mixins.scss';
|
||||||
|
|
||||||
.blocks {
|
#hall-of-fame {
|
||||||
margin: 60px auto;
|
.blocks {
|
||||||
}
|
margin: 60px auto;
|
||||||
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sponsors {
|
.sponsors {
|
||||||
a {
|
a {
|
||||||
@include disable-default-a-behaviour;
|
@include disable-default-a-behaviour;
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 270px;
|
width: 270px;
|
||||||
height: 135px;
|
height: 135px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
content: "\25B6";
|
content: "\25B6";
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(3n):before {
|
&:nth-of-type(3n):before {
|
||||||
color: #f1680d
|
color: #f1680d
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(3n+1):before {
|
&:nth-of-type(3n+1):before {
|
||||||
color: #211f20
|
color: #211f20
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(3n+2):before {
|
&:nth-of-type(3n+2):before {
|
||||||
color: #737373
|
color: #737373
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #000;
|
color: #000;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main id="help">
|
||||||
<div class="blocks">
|
<div class="blocks">
|
||||||
|
|
||||||
<div class="title-block">
|
<div class="title-block">
|
||||||
<div class="title" v-translate>Help</div>
|
<div class="title" v-translate>Help</div>
|
||||||
|
|
||||||
<p>Questions on PeerTube? Need help? You've come to the right place!</p>
|
<p v-translate>Questions on PeerTube? Need help? You've come to the right place!</p>
|
||||||
|
|
||||||
<div class="separator"></div>
|
<div class="separator"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>Need a detailed guide?</p>
|
<p v-translate>Need a detailed guide?</p>
|
||||||
<div class="bottom-link-wrapper">
|
<div class="bottom-link-wrapper">
|
||||||
<a class="bottom-link" href="https://docs.joinpeertube.org" target="_blank" rel="noopener noreferrer">
|
<a class="bottom-link" href="https://docs.joinpeertube.org" target="_blank" rel="noopener noreferrer">
|
||||||
<span class="text" v-translate>Read the documentation</span>
|
<span class="text" v-translate>Read the documentation</span>
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
|
|
||||||
<div class="block-with-image community">
|
<div class="block-with-image community">
|
||||||
<div class="text-block">
|
<div class="text-block">
|
||||||
<div class="title">Ask questions to the community</div>
|
<div class="title" v-translate>Ask questions to the community</div>
|
||||||
|
|
||||||
<div class="bottom-link-wrapper">
|
<div class="bottom-link-wrapper">
|
||||||
<a href="https://framacolibri.org/c/peertube" class="bottom-link" target="_blank" rel="noopener noreferrer">
|
<a href="https://framacolibri.org/c/peertube" class="bottom-link" target="_blank" rel="noopener noreferrer">
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-block">
|
<div class="text-block">
|
||||||
<div class="title">For PeerTube admins</div>
|
<div class="title" v-translate>For PeerTube admins</div>
|
||||||
|
|
||||||
<div class="bottom-link-wrapper">
|
<div class="bottom-link-wrapper">
|
||||||
<a class="bottom-link" href="https://docs.joinpeertube.org/#/install-any-os" target="_blank" rel="noopener noreferrer">
|
<a class="bottom-link" href="https://docs.joinpeertube.org/#/install-any-os" target="_blank" rel="noopener noreferrer">
|
||||||
|
|
@ -86,7 +86,7 @@
|
||||||
|
|
||||||
<div class="block-with-image contribute">
|
<div class="block-with-image contribute">
|
||||||
<div class="text-block">
|
<div class="text-block">
|
||||||
<div class="title">Contribute to PeerTube</div>
|
<div class="title" v-translate>Contribute to PeerTube</div>
|
||||||
|
|
||||||
<div class="bottom-link-wrapper">
|
<div class="bottom-link-wrapper">
|
||||||
<a class="bottom-link" href="https://docs.joinpeertube.org/#/contribute-getting-started" target="_blank" rel="noopener noreferrer">
|
<a class="bottom-link" href="https://docs.joinpeertube.org/#/contribute-getting-started" target="_blank" rel="noopener noreferrer">
|
||||||
|
|
@ -105,74 +105,75 @@
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss">
|
||||||
@import '../scss/_variables.scss';
|
@import '../scss/_variables.scss';
|
||||||
|
|
||||||
.blocks {
|
#help {
|
||||||
margin: 60px auto;
|
|
||||||
width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-with-image {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 100px;
|
|
||||||
|
|
||||||
.image-block + .text-block,
|
|
||||||
.text-block + .image-block {
|
|
||||||
margin-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-block {
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-link-wrapper {
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-link-wrapper + * {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-block + .text-block {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $small-screen) {
|
|
||||||
.blocks {
|
.blocks {
|
||||||
width: auto;
|
margin: 60px auto;
|
||||||
|
width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block-with-image {
|
.block-with-image {
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
|
||||||
.text-block {
|
.image-block + .text-block,
|
||||||
margin-left: 0 !important;
|
.text-block + .image-block {
|
||||||
|
margin-left: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-block {
|
.text-block {
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-link-wrapper {
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-link-wrapper + * {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-block + .text-block {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.image-block {
|
@media screen and (max-width: $small-screen) {
|
||||||
margin: 40px 0;
|
.blocks {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-with-image {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.text-block {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-block {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-block {
|
||||||
|
margin: 40px 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main id="home">
|
||||||
|
|
||||||
<section class="presentation">
|
<section class="presentation">
|
||||||
<div class="first-row">
|
<div class="first-row">
|
||||||
|
|
@ -46,10 +46,11 @@
|
||||||
|
|
||||||
<section id="what-is-peertube">
|
<section id="what-is-peertube">
|
||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<div v-translate>
|
<div>
|
||||||
What is
|
<!-- FIXME: add v-translate to the div, but it does not work with vue-gettext because of the bind src attribute -->
|
||||||
|
<translate>What is</translate>
|
||||||
<img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
|
<img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
|
||||||
?
|
<translate>?</translate>
|
||||||
</div>
|
</div>
|
||||||
<div class="border-title"></div>
|
<div class="border-title"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -114,7 +115,7 @@
|
||||||
<div class="citation">
|
<div class="citation">
|
||||||
<div class="left-bar"></div>
|
<div class="left-bar"></div>
|
||||||
|
|
||||||
<div class="text v-translate">This is just how a <strong>federation</strong> works!</div>
|
<div class="text" v-translate>This is just how a <strong>federation</strong> works!</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p v-translate>
|
<p v-translate>
|
||||||
|
|
@ -138,8 +139,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="free-software">
|
<div class="free-software">
|
||||||
<div class="subtitle" v-translate>
|
<div class="subtitle">
|
||||||
An open-source, free/libre licence code
|
<translate>An open-source, free/libre licence code</translate>
|
||||||
<div class="border-title"></div>
|
<div class="border-title"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -186,8 +187,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="you-are-a-video-maker">
|
<div id="you-are-a-video-maker">
|
||||||
<div class="subtitle" v-translate>
|
<div class="subtitle">
|
||||||
Are you a video maker?
|
<translate>Are you a video maker?</translate>
|
||||||
<div class="border-title"></div>
|
<div class="border-title"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -231,8 +232,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p2p">
|
<div class="p2p">
|
||||||
<div class="subtitle" v-translate>
|
<div class="subtitle">
|
||||||
About peer-to-peer broadcasting and watching
|
<translate>About peer-to-peer broadcasting and watching</translate>
|
||||||
<div class="border-title"></div>
|
<div class="border-title"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -266,8 +267,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="your-move">
|
<div id="your-move">
|
||||||
<div class="subtitle" v-translate>
|
<div class="subtitle">
|
||||||
Your move!
|
<translate>Your move!</translate>
|
||||||
<div class="border-title"></div>
|
<div class="border-title"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -295,10 +296,11 @@
|
||||||
|
|
||||||
<section id="behind-peertube">
|
<section id="behind-peertube">
|
||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<div v-translate>
|
<div>
|
||||||
Who is behind
|
<!-- FIXME: add v-translate to the div, but it does not work with vue-gettext because of the bind src attribute -->
|
||||||
|
<translate>Who is behind</translate>
|
||||||
<img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
|
<img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
|
||||||
?
|
<translate>?</translate>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="border-title"></div>
|
<div class="border-title"></div>
|
||||||
|
|
@ -342,137 +344,139 @@
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss">
|
||||||
@import '../scss/_variables.scss';
|
@import '../scss/_variables.scss';
|
||||||
@import '../scss/_mixins.scss';
|
@import '../scss/_mixins.scss';
|
||||||
|
|
||||||
.buttons-row {
|
#home {
|
||||||
display: flex;
|
.buttons-row {
|
||||||
justify-content: space-between;
|
display: flex;
|
||||||
padding: 0 20px;
|
justify-content: space-between;
|
||||||
|
padding: 0 20px;
|
||||||
.jpt-button {
|
|
||||||
width: 330px;
|
|
||||||
min-height: 50px;
|
|
||||||
height: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $responsive-screen) {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.jpt-button {
|
.jpt-button {
|
||||||
margin: 0 3px 0 0;
|
width: 330px;
|
||||||
|
min-height: 50px;
|
||||||
|
height: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.explore-create-account {
|
@media screen and (max-width: $responsive-screen) {
|
||||||
flex-direction: column;
|
padding: 0;
|
||||||
|
|
||||||
.create-account-block {
|
.jpt-button {
|
||||||
margin-top: 50px;
|
margin: 0 3px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.explore-create-account {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.create-account-block {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $small-screen) {
|
||||||
|
.jpt-button {
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $small-screen) {
|
.jpt-button-legend {
|
||||||
.jpt-button {
|
margin-top: 5px;
|
||||||
width: 100%;
|
max-width: 330px;
|
||||||
}
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.jpt-button-legend {
|
.presentation {
|
||||||
margin-top: 5px;
|
.first-row {
|
||||||
max-width: 330px;
|
display: flex;
|
||||||
font-size: 13px;
|
flex-direction: column;
|
||||||
text-align: center;
|
align-items: center;
|
||||||
}
|
padding-top: 70px;
|
||||||
|
margin: auto;
|
||||||
.presentation {
|
|
||||||
.first-row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 70px;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
.brand {
|
|
||||||
height: 47px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
margin-left: -30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
flex-basis: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $small-screen) {
|
|
||||||
padding: 15px 0;
|
|
||||||
|
|
||||||
.brand {
|
.brand {
|
||||||
height: 25px !important
|
height: 47px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-left: -30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
flex-basis: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-size: 20px;
|
font-size: 24px;
|
||||||
margin-left: 20px;
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $small-screen) {
|
||||||
|
padding: 15px 0;
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
height: 25px !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 50px auto;
|
||||||
|
width: 500px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
@media screen and (max-width: $small-screen) {
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.marketing {
|
#you-are-a-video-maker {
|
||||||
font-size: 16px;
|
.discover-instances {
|
||||||
margin: 50px auto;
|
min-width: 420px;
|
||||||
width: 500px;
|
width: fit-content;
|
||||||
text-align: center;
|
height: 50px;
|
||||||
|
margin: 50px auto;
|
||||||
@media screen and (max-width: $small-screen) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#you-are-a-video-maker {
|
|
||||||
.discover-instances {
|
|
||||||
min-width: 420px;
|
|
||||||
width: fit-content;
|
|
||||||
height: 50px;
|
|
||||||
margin: 50px auto;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#your-move {
|
|
||||||
.one-column {
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons-row {
|
|
||||||
margin-top: 60px;
|
|
||||||
|
|
||||||
.jpt-button {
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#behind-peertube {
|
#your-move {
|
||||||
.framasoft-logo {
|
.one-column {
|
||||||
flex-basis: auto;
|
margin-top: 50px;
|
||||||
width: 264px;
|
}
|
||||||
height: 241px;
|
|
||||||
|
.buttons-row {
|
||||||
|
margin-top: 60px;
|
||||||
|
|
||||||
|
.jpt-button {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.jpt-button {
|
#behind-peertube {
|
||||||
height: 50px;
|
.framasoft-logo {
|
||||||
min-width: 420px;
|
flex-basis: auto;
|
||||||
width: fit-content;
|
width: 264px;
|
||||||
margin: 60px auto;
|
height: 241px;
|
||||||
font-size: 20px;
|
}
|
||||||
|
|
||||||
|
.jpt-button {
|
||||||
|
height: 50px;
|
||||||
|
min-width: 420px;
|
||||||
|
width: fit-content;
|
||||||
|
margin: 60px auto;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main id="instances">
|
||||||
<div class="blocks">
|
<div class="blocks">
|
||||||
|
|
||||||
<div class="title-block">
|
<div class="title-block">
|
||||||
|
|
@ -49,60 +49,62 @@
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss">
|
||||||
@import '../scss/_variables.scss';
|
@import '../scss/_variables.scss';
|
||||||
|
|
||||||
.blocks {
|
#instances {
|
||||||
margin: 60px auto;
|
.blocks {
|
||||||
width: 770px;
|
margin: 60px auto;
|
||||||
}
|
width: 770px;
|
||||||
|
|
||||||
.title-block {
|
|
||||||
.jpt-button {
|
|
||||||
margin-top: 25px;
|
|
||||||
border: 2px solid $orange;
|
|
||||||
min-width: 225px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.block-with-image {
|
.title-block {
|
||||||
display: flex;
|
.jpt-button {
|
||||||
justify-content: center;
|
margin-top: 25px;
|
||||||
align-items: center;
|
border: 2px solid $orange;
|
||||||
margin-bottom: 100px;
|
min-width: 225px;
|
||||||
|
height: 35px;
|
||||||
& > div {
|
|
||||||
flex-basis: 100%;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 370px;
|
|
||||||
height: 210px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > * {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $small-screen) {
|
|
||||||
.blocks {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-with-image {
|
.block-with-image {
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
|
||||||
img {
|
& > div {
|
||||||
|
flex-basis: 100%;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 370px;
|
||||||
|
height: 210px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $small-screen) {
|
||||||
|
.blocks {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-with-image {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main id="news">
|
||||||
<div class="blocks">
|
<div class="blocks">
|
||||||
<div class="title-block">
|
<div class="title-block">
|
||||||
<div class="title" v-translate>PeerTube news!</div>
|
<div class="title" v-translate>PeerTube news!</div>
|
||||||
|
|
||||||
<p>Discover the latest PeerTube improvements</p>
|
<p v-translate>Discover the latest PeerTube improvements</p>
|
||||||
|
|
||||||
<div class="separator"></div>
|
<div class="separator"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -111,7 +111,11 @@
|
||||||
</a>.
|
</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p v-translate>Thanks to all PeerTube contributors!<br />Framasoft</p>
|
<p>
|
||||||
|
<translate>Thanks to all PeerTube contributors!</translate>
|
||||||
|
<br />
|
||||||
|
Framasoft
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -171,9 +175,11 @@
|
||||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0">https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0</a>.
|
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0">https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p v-translate>Thanks to all PeerTube contributors!</p>
|
<p>
|
||||||
|
<translate>Thanks to all PeerTube contributors!</translate>
|
||||||
<p v-translate>Framasoft.</p>
|
<br />
|
||||||
|
Framasoft
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -191,9 +197,10 @@
|
||||||
|
|
||||||
<p v-translate>Here is a small retrospective of the end of 2018/beginning of 2019:</p>
|
<p v-translate>Here is a small retrospective of the end of 2018/beginning of 2019:</p>
|
||||||
|
|
||||||
<p v-translate>
|
<p>
|
||||||
In December 2018, we released version 1.1 which contained some moderation tools requested by instance administrators.<br /> We
|
<translate>In December 2018, we released version 1.1 which contained some moderation tools requested by instance administrators.</translate>
|
||||||
also took the opportunity to add a watched videos history feature and the automatic resuming of video playback.
|
<br />
|
||||||
|
<translate>We also took the opportunity to add a watched videos history feature and the automatic resuming of video playback.</translate>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p v-translate>
|
<p v-translate>
|
||||||
|
|
@ -214,9 +221,12 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p v-translate>
|
<p v-translate>
|
||||||
As you can see, we have gone far beyond what the crowdfunding has funded. And we will continue!<br />
|
<translate>As you can see, we have gone far beyond what the crowdfunding has funded. And we will continue!</translate>
|
||||||
For 2019, we plan to add a plugin and theme management system (even though basic at first), playlist management,
|
<br />
|
||||||
support for audio files upload and many other features.
|
<translate>
|
||||||
|
For 2019, we plan to add a plugin and theme management system (even though basic at first), playlist management,
|
||||||
|
support for audio files upload and many other features.
|
||||||
|
</translate>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p v-translate>
|
<p v-translate>
|
||||||
|
|
@ -229,8 +239,9 @@
|
||||||
<a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/peertube">https://framacolibri.org/c/peertube</a>
|
<a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/peertube">https://framacolibri.org/c/peertube</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p v-translate>
|
<p>
|
||||||
Thank you and with our best regards,<br />
|
<translate>Thanks to all PeerTube contributors!</translate>
|
||||||
|
<br />
|
||||||
Framasoft
|
Framasoft
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -303,8 +314,9 @@
|
||||||
can also contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org"> https://contact.framasoft.org</a>.
|
can also contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org"> https://contact.framasoft.org</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p v-translate>
|
<p>
|
||||||
Cheers,<br />
|
<translate>Cheers,</translate>
|
||||||
|
<br />
|
||||||
Framasoft
|
Framasoft
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -359,8 +371,9 @@
|
||||||
contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
|
contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p v-translate>
|
<p>
|
||||||
Cheers,<br />
|
<translate>Cheers,</translate>
|
||||||
|
<br />
|
||||||
Framasoft
|
Framasoft
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -402,8 +415,9 @@
|
||||||
contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
|
contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p v-translate>
|
<p>
|
||||||
Cheers,<br />
|
<translate>Cheers,</translate>
|
||||||
|
<br />
|
||||||
Framasoft
|
Framasoft
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -441,11 +455,13 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p v-translate>
|
<p v-translate>
|
||||||
Moreover, you can ask questions on the PeerTube forum. You can also contact us directly on https://contact.framasoft.org.
|
Moreover, you can ask questions on <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You can also
|
||||||
|
contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p v-translate>
|
<p>
|
||||||
Cheers,<br />
|
<translate>Cheers,</translate>
|
||||||
|
<br />
|
||||||
Framasoft
|
Framasoft
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -461,118 +477,124 @@
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss">
|
||||||
@import '../scss/_variables.scss';
|
@import '../scss/_variables.scss';
|
||||||
|
|
||||||
p {
|
#news {
|
||||||
margin-bottom: 10px;
|
p {
|
||||||
}
|
margin-bottom: 10px;
|
||||||
|
|
||||||
p + *:not(ul) {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blocks {
|
|
||||||
margin: 60px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-block {
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news {
|
|
||||||
max-width: 800px;
|
|
||||||
padding: 40px 50px;
|
|
||||||
border: solid 1px #d9d9d9;
|
|
||||||
border-left: 6px solid $orange;
|
|
||||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35);
|
|
||||||
margin-bottom: 60px;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
p + *:not(ul) {
|
||||||
font-size: 16px;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
.blocks {
|
||||||
margin-top: 40px;
|
margin: 60px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.title-block {
|
||||||
word-break: break-word;
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
figure {
|
.news {
|
||||||
margin: 30px 0;
|
max-width: 800px;
|
||||||
border: 10px solid #fff3ea;
|
padding: 40px 50px;
|
||||||
border-bottom: 0;
|
border: solid 1px #d9d9d9;
|
||||||
|
border-left: 6px solid $orange;
|
||||||
|
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35);
|
||||||
|
margin-bottom: 60px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 30px 0;
|
||||||
|
border: 10px solid #fff3ea;
|
||||||
|
border-bottom: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
cursor: pointer;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
font-size: 14px;
|
||||||
|
background: #fff3ea;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $small-screen) {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#modal {
|
||||||
|
&.hide-modal {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
padding-top: 5vh;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: rgb(0, 0, 0);
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
|
||||||
img {
|
img {
|
||||||
cursor: pointer;
|
margin: auto;
|
||||||
max-width: 100%;
|
display: block;
|
||||||
height: auto;
|
height: 90%;
|
||||||
margin-bottom: 5px;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
figcaption {
|
.caption {
|
||||||
font-size: 14px;
|
margin: auto;
|
||||||
background: #fff3ea;
|
display: block;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 700px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px 0;
|
color: #ccc;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
|
.caption {
|
||||||
|
animation-name: zoom;
|
||||||
|
animation-duration: 0.6s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $small-screen) {
|
@keyframes zoom {
|
||||||
padding: 10px;
|
from {
|
||||||
|
transform: scale(0)
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(1)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#modal {
|
|
||||||
&.hide-modal {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1;
|
|
||||||
padding-top: 5vh;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
background-color: rgb(0, 0, 0);
|
|
||||||
background-color: rgba(0, 0, 0, 0.9);
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin: auto;
|
|
||||||
display: block;
|
|
||||||
height: 90%;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.caption {
|
|
||||||
margin: auto;
|
|
||||||
display: block;
|
|
||||||
width: 80%;
|
|
||||||
max-width: 700px;
|
|
||||||
text-align: center;
|
|
||||||
color: #ccc;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
.caption {
|
|
||||||
animation-name: zoom;
|
|
||||||
animation-duration: 0.6s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes zoom {
|
|
||||||
from { transform:scale(0) }
|
|
||||||
to { transform:scale(1) }
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue