Skip to content

Commit 611b40e

Browse files
ctwhomectwhome
authored
Merge pull request #360 from citation-file-format/landing
Add landing page styles and design
2 parents 0d4bed7 + 120406e commit 611b40e

8 files changed

Lines changed: 406 additions & 115 deletions

File tree

‎src/assets/cff-logo.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/assets/landing-image.svg‎

Lines changed: 233 additions & 0 deletions
Loading

‎src/assets/landing-image.webp‎

110 KB
Loading

‎src/components/Landing.vue‎

Lines changed: 0 additions & 91 deletions
This file was deleted.

‎src/components/LayoutLanding.vue‎

Lines changed: 162 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,67 @@
11
<template>
2-
<q-layout
3-
class="bg-white"
4-
view="hhh lpr fff"
5-
>
6-
<Header />
7-
<q-page-container>
8-
<q-page>
9-
<router-view />
10-
</q-page>
11-
</q-page-container>
2+
<div class="layout bg-white">
3+
<div class="header">
4+
<div class="header-image">
5+
<img src="~assets/cff-logo.svg">
6+
</div>
7+
</div>
8+
<div class="container">
9+
<div class="row">
10+
<div class="col-sm-6 col-xs-12 q-pa-lg slide-in-from-left-animation">
11+
<div
12+
align="left"
13+
class="q-gutter-md q-mb-xl"
14+
style="font-size: 1.3rem"
15+
>
16+
<h3>Generate your citation metadata files with ease</h3>
17+
<p>
18+
<code class="decoration">CITATION.cff</code>
19+
files are plain text files with human- and machine-readable citation information for software and datasets.
20+
</p>
21+
<p>Code developers can include such files in their source code repositories to let others know how to correctly cite their software.</p>
22+
</div>
23+
</div>
24+
<img
25+
class="col-sm-6 col-xs-12 q-pa-lg illustration slide-from-right-animation"
26+
src="~assets/landing-image.svg"
27+
>
28+
</div>
29+
<div class="row justify-center items-center q-pt-md q-mb-xl">
30+
<div class="column items-center slide-up-animation">
31+
<div style="font-size: 1.2rem">
32+
Generate your
33+
<a
34+
class="document"
35+
href="https://citation-file-format.github.io"
36+
target="_blank"
37+
>
38+
Citation File Format</a> file
39+
</div>
40+
<q-btn
41+
class="start-button"
42+
label="Create"
43+
icon="add"
44+
no-caps
45+
size="xl"
46+
to="/start"
47+
/>
48+
</div>
49+
</div>
50+
</div>
1251
<Footer />
13-
</q-layout>
52+
</div>
1453
</template>
1554

1655
<script lang="ts">
1756
import Footer from 'components/Footer.vue'
18-
import Header from 'components/Header.vue'
1957
2058
import { defineComponent } from 'vue'
2159
2260
export default defineComponent({
23-
name: 'MainLayout',
61+
name: 'LayoutLanding',
2462
2563
components: {
26-
Footer,
27-
Header
64+
Footer
2865
},
2966
3067
setup () {
@@ -35,7 +72,115 @@ export default defineComponent({
3572
</script>
3673

3774
<style scoped>
38-
.bg-white {
39-
background-color: white;
75+
.layout{
76+
display: flex;
77+
flex-direction:column;
78+
align-items: center;
79+
width: 100vw;
80+
min-height: 100vh;
81+
overflow: hidden;
4082
}
83+
84+
.header{
85+
max-width: 1919px;
86+
width: 100%;
87+
max-width: 1919px;
88+
}
89+
90+
.container{
91+
display: flex;
92+
flex-direction: column;
93+
justify-content: center;
94+
max-width: 1439px;
95+
flex: 1;
96+
}
97+
98+
.header-image{
99+
display: flex;
100+
margin-top: 40px;
101+
padding: 10px 20px;
102+
width: 500px;
103+
border-radius: 5px 30px 30px 5px;
104+
background: #F7F7FA;
105+
box-shadow: 87.041px 34.8164px 58.0273px rgba(53, 104, 212, 0.08);
106+
}
107+
108+
.decoration{
109+
background: linear-gradient(100deg, rgba(62, 123, 250, 0.234) 32.63%, rgba(62, 123, 250, 0.0936) 93.01%);
110+
border-radius: 4px;
111+
padding: 6px;
112+
}
113+
114+
.illustration{
115+
object-fit: contain;
116+
transform: translate(0px,0px);
117+
118+
}
119+
@media (min-width:768px) {
120+
.illustration {
121+
transform: translate(110px, -50px);
122+
}
123+
.slide-from-right-animation{
124+
animation: 1500ms ease 0s 1 slideInFromRight;
125+
}
126+
.slide-in-from-left-animation{
127+
animation: 500ms ease 0s 1 slideInFromLeft;
128+
}
129+
.slide-up-animation{
130+
animation: 1500ms ease 0s 1 slideUpAnimation;
131+
}
132+
}
133+
134+
a.document{
135+
color: var(--primary);
136+
text-decoration: none
137+
138+
}
139+
a.document:hover{
140+
text-decoration: underline
141+
}
142+
.start-button{
143+
margin-top: 15px;
144+
padding: 0px 40px;
145+
background: var(--primary);
146+
color: white;
147+
/*width:100%;*/
148+
149+
border-radius:10px
150+
}
151+
152+
/* Entry animations */
153+
154+
@keyframes slideInFromRight {
155+
0% {
156+
transform: translate(130px, -50px);
157+
opacity:0
158+
}
159+
100% {
160+
transform: translate(110px,-50px);
161+
opacity:1
162+
}
163+
}
164+
@keyframes slideInFromLeft {
165+
0% {
166+
transform: translateX(-20px);
167+
opacity:0
168+
}
169+
100% {
170+
transform: translateX(0);
171+
opacity:1
172+
}
173+
}
174+
175+
@keyframes slideUpAnimation {
176+
0% {
177+
transform: translateY(20px);
178+
opacity:0
179+
}
180+
100% {
181+
transform: translateY(0);
182+
opacity:1
183+
}
184+
}
185+
41186
</style>

‎src/css/app.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
:root {
1313
--fgcolor: #efefef;
1414
--bgcolor: #ddd;
15+
--primary: #3E7BFA;
1516
}
1617

1718
body {

‎src/router/routes.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@ import { RouteRecordRaw } from 'vue-router'
33
const routes: RouteRecordRaw[] = [
44
{
55
path: '/',
6-
component: () => import('src/components/LayoutLanding.vue'),
7-
children: [{ path: '', component: () => import('src/components/Landing.vue') }]
6+
component: () => import('src/components/LayoutLanding.vue')
87
},
98
{
109
path: '/landing',
11-
component: () => import('src/components/LayoutLanding.vue'),
12-
children: [{ path: '', component: () => import('src/components/Landing.vue') }]
10+
component: () => import('src/components/LayoutLanding.vue')
1311
},
1412
{
1513
path: '/start',

‎test/jest/__tests__/pages/Start.jest.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import { beforeEach, describe, expect, it } from '@jest/globals'
22
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest'
33
import { shallowMount, VueWrapper } from '@vue/test-utils'
44

5-
import Start from '../../../../src/components/Landing.vue'
5+
import LayoutLanding from '../../../../src/components/LayoutLanding.vue'
66

77
// Specify here Quasar config you'll need to test your component
88
installQuasarPlugin()
99

10-
describe('Start', () => {
10+
describe('LayoutLanding', () => {
1111
// eslint-disable-next-line @typescript-eslint/no-explicit-any
1212
let wrapper: VueWrapper<any>
1313

1414
beforeEach(() => {
15-
wrapper = shallowMount(Start)
15+
wrapper = shallowMount(LayoutLanding)
1616
})
1717

1818
it('should mount without errors', () => {

0 commit comments

Comments
 (0)