[READ-ONLY] Mirror of https://github.com/probablykasper/LaRSS. RSS Generator for iTunes
larss.kasper.space
rss
website
UI start
+319
-1
+79
docs/index.css
+79
docs/index.css
···
1
+
p, input, label, div, h1, textarea, select, option {
2
+
font-family: "Roboto", Arial, sans-serif;
3
+
outline: none;
4
+
border: none;
5
+
font-size: 14px;
6
+
}
7
+
8
+
h3 {
9
+
color: white;
10
+
font-weight: 400;
11
+
}
12
+
13
+
body {
14
+
margin: 0px;
15
+
background: linear-gradient(to bottom, #1E3850, #20255E);
16
+
}
17
+
18
+
body .container {
19
+
display: flex;
20
+
flex-direction: column;
21
+
align-items: center;
22
+
max-width: 600px;
23
+
margin-left: auto;
24
+
margin-right: auto;
25
+
margin-bottom: 50px;
26
+
padding: 0px 50px;
27
+
}
28
+
29
+
body .container img.logo {
30
+
width: 150px;
31
+
height: 150px;
32
+
margin-bottom: 20px;
33
+
}
34
+
35
+
body .container input, body .container select {
36
+
display: block;
37
+
background-color: rgba(0, 0, 0, 0.2);
38
+
color: white;
39
+
padding: 10px;
40
+
margin: 5px;
41
+
border-radius: 5px;
42
+
}
43
+
44
+
body .container input {
45
+
width: 100%;
46
+
}
47
+
48
+
body .container select {
49
+
border: 1px solid transparent;
50
+
}
51
+
52
+
body .container select:focus {
53
+
border: 1px solid rgba(255, 255, 255, 0.6);
54
+
}
55
+
56
+
body .container .general-info, body .container .item {
57
+
display: flex;
58
+
flex-direction: column;
59
+
width: 100%;
60
+
overflow: hidden;
61
+
margin: 50px 0px;
62
+
}
63
+
64
+
body .container .general-info.visible .item-container, body .container .item.visible .item-container {
65
+
transform: translateY(0px);
66
+
}
67
+
68
+
body .container .general-info .item-container, body .container .item .item-container {
69
+
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
70
+
}
71
+
72
+
body .container .general-info .item-container .row, body .container .item .item-container .row {
73
+
display: flex;
74
+
width: 100%;
75
+
}
76
+
77
+
body .container .item {
78
+
display: block;
79
+
}
+91
-1
docs/index.html
+91
-1
docs/index.html
···
1
1
2
2
<head>
3
+
<title>LaRSS</title>
4
+
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet"/>
5
+
<link rel="stylesheet" type="text/css" href="index.css"/>
6
+
<!-- favicon-->
3
7
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
4
8
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
5
9
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
···
9
13
<meta name="application-name" content="LaRSS"/>
10
14
<meta name="theme-color" content="#ffffff"/>
11
15
</head>
12
-
<body></body>
16
+
<body>
17
+
<div class="container"><img src="logo.png" class="logo"/>
18
+
<div class="general-info">
19
+
<div class="header">
20
+
<div class="collapse-icon"></div>
21
+
<h3 class="header">Item 1</h3>
22
+
</div>
23
+
<div class="item-container">
24
+
<div class="row">
25
+
<input type="text" placeholder="Title" class="title"/>
26
+
<input type="text" placeholder="Author" class="author"/>
27
+
</div>
28
+
<div class="row">
29
+
<input type="text" placeholder="Subtitle" class="subtitle"/>
30
+
</div>
31
+
<div class="row">
32
+
<input type="text" placeholder="Description" class="description"/>
33
+
</div>
34
+
<div class="row">
35
+
<input type="text" placeholder="Link" class="link"/>
36
+
</div>
37
+
<div class="row">
38
+
<input type="text" placeholder="Image Link" class="imageLink"/>
39
+
</div>
40
+
<div class="row">
41
+
<select class="language">
42
+
<option value="en-us">en-us</option>
43
+
</select>
44
+
<select class="category">
45
+
<option value="Music">Music</option>
46
+
</select>
47
+
<select class="explicit">
48
+
<option value="Music">Explicit</option>
49
+
<option value="Music">Not explicit</option>
50
+
</select>
51
+
<input type="text" placeholder="Copyright" class="copyright"/>
52
+
</div>
53
+
<div class="row">
54
+
<input type="text" placeholder="Owner Name" class="ownerName"/>
55
+
<input type="text" placeholder="Owner Email" class="ownerEmail"/>
56
+
</div>
57
+
</div>
58
+
</div>
59
+
<div class="item">
60
+
<div class="header">
61
+
<div class="collapse-icon"></div>
62
+
<h3 class="header">Item 1</h3>
63
+
</div>
64
+
<div class="item-container">
65
+
<div class="row">
66
+
<input type="text" placeholder="Title" class="title"/>
67
+
<input type="text" placeholder="Author" class="author"/>
68
+
</div>
69
+
<div class="row">
70
+
<input type="text" placeholder="Subtitle" class="subtitle"/>
71
+
</div>
72
+
<div class="row">
73
+
<input type="text" placeholder="Description" class="description"/>
74
+
</div>
75
+
<div class="row">
76
+
<input type="text" placeholder="Link" class="link"/>
77
+
</div>
78
+
<div class="row">
79
+
<input type="text" placeholder="Image Link" class="imageLink"/>
80
+
</div>
81
+
<div class="row">
82
+
<select class="language">
83
+
<option value="en-us">en-us</option>
84
+
</select>
85
+
<select class="category">
86
+
<option value="Music">Music</option>
87
+
</select>
88
+
<select class="explicit">
89
+
<option value="Music">Explicit</option>
90
+
<option value="Music">Not explicit</option>
91
+
</select>
92
+
<input type="text" placeholder="Copyright" class="copyright"/>
93
+
</div>
94
+
<div class="row">
95
+
<input type="text" placeholder="Owner Name" class="ownerName"/>
96
+
<input type="text" placeholder="Owner Email" class="ownerEmail"/>
97
+
</div>
98
+
</div>
99
+
</div>
100
+
</div>
101
+
<script src="index.js"></script>
102
+
</body>
+64
index.pug
+64
index.pug
···
1
1
// output:docs/index.html, pretty:true
2
2
head
3
+
title LaRSS
4
+
link(href="https://fonts.googleapis.com/css?family=Roboto:400,500", rel="stylesheet")
5
+
link(rel="stylesheet", type="text/css", href="index.css")
6
+
// favicon
3
7
link(rel='apple-touch-icon', sizes='180x180', href='/apple-touch-icon.png')
4
8
link(rel='icon', type='image/png', sizes='32x32', href='/favicon-32x32.png')
5
9
link(rel='icon', type='image/png', sizes='16x16', href='/favicon-16x16.png')
···
9
13
meta(name='application-name', content='LaRSS')
10
14
meta(name='theme-color', content='#ffffff')
11
15
body
16
+
.container
17
+
img.logo(src="logo.png")
18
+
.general-info
19
+
.header
20
+
.collapse-icon
21
+
h3.header Item 1
22
+
.item-container
23
+
.row
24
+
input(type="text" placeholder="Title").title
25
+
input(type="text" placeholder="Author").author
26
+
.row
27
+
input(type="text" placeholder="Subtitle").subtitle
28
+
.row
29
+
input(type="text" placeholder="Description").description
30
+
.row
31
+
input(type="text" placeholder="Link").link
32
+
.row
33
+
input(type="text" placeholder="Image Link").imageLink
34
+
.row
35
+
select.language
36
+
option(value="en-us") en-us
37
+
select.category
38
+
option(value="Music") Music
39
+
select.explicit
40
+
option(value="Music") Explicit
41
+
option(value="Music") Not explicit
42
+
input(type="text" placeholder="Copyright").copyright
43
+
.row
44
+
input(type="text" placeholder="Owner Name").ownerName
45
+
input(type="text" placeholder="Owner Email").ownerEmail
46
+
.item
47
+
.header
48
+
.collapse-icon
49
+
h3.header Item 1
50
+
.item-container
51
+
.row
52
+
input(type="text" placeholder="Title").title
53
+
input(type="text" placeholder="Author").author
54
+
.row
55
+
input(type="text" placeholder="Subtitle").subtitle
56
+
.row
57
+
input(type="text" placeholder="Description").description
58
+
.row
59
+
input(type="text" placeholder="Link").link
60
+
.row
61
+
input(type="text" placeholder="Image Link").imageLink
62
+
.row
63
+
select.language
64
+
option(value="en-us") en-us
65
+
select.category
66
+
option(value="Music") Music
67
+
select.explicit
68
+
option(value="Music") Explicit
69
+
option(value="Music") Not explicit
70
+
input(type="text" placeholder="Copyright").copyright
71
+
.row
72
+
input(type="text" placeholder="Owner Name").ownerName
73
+
input(type="text" placeholder="Owner Email").ownerEmail
74
+
script(src="index.js")
75
+
+57
index.sass
+57
index.sass
···
1
1
// compileExpanded:docs/index.css
2
+
@import "variables.sass"
3
+
p, input, label, div, h1, textarea, select, option
4
+
font-family: "Roboto", Arial, sans-serif
5
+
outline: none
6
+
border: none
7
+
font-size: 14px
8
+
h3
9
+
color: white
10
+
font-weight: 400
11
+
body
12
+
margin: 0px
13
+
background: linear-gradient(to bottom, #1E3850, #20255E)
14
+
.container
15
+
display: flex
16
+
flex-direction: column
17
+
align-items: center
18
+
max-width: 600px
19
+
margin-left: auto
20
+
margin-right: auto
21
+
margin-bottom: 50px
22
+
padding: 0px 50px
23
+
img.logo
24
+
width: 150px
25
+
height: 150px
26
+
margin-bottom: 20px
27
+
input, select
28
+
display: block
29
+
background-color: rgba(#000000, 0.2)
30
+
color: rgba(#FFFFFF, 1)
31
+
padding: 10px
32
+
margin: 5px
33
+
border-radius: 5px
34
+
input
35
+
width: 100%
36
+
select
37
+
border: 1px solid transparent
38
+
&:focus
39
+
border: 1px solid rgba(#FFFFFF, 0.6)
40
+
.general-info, .item
41
+
display: flex
42
+
flex-direction: column
43
+
width: 100%
44
+
overflow: hidden
45
+
margin: 50px 0px
46
+
.header
47
+
48
+
&.visible .item-container
49
+
transform: translateY(0px)
50
+
.item-container
51
+
transition: transform $transition
52
+
// transform: translateY(-100%)
53
+
.row
54
+
display: flex
55
+
width: 100%
56
+
.general-info
57
+
.item
58
+
display: block
logo.png
docs/logo.png
logo.png
docs/logo.png
+28
variables.sass
+28
variables.sass
···
1
+
// shadow elevation
2
+
$shadow-1: 0px 1px 2px 0px rgba(0,0,0,0.24)
3
+
$shadow-1-inset-top: inset 0px 21px 2px -20px rgba(0,0,0,0.24)
4
+
$shadow-1-inset-bottom: inset 0px -21px 2px -20px rgba(0,0,0,0.24)
5
+
$shadow-2: 0px 2px 4px 0px rgba(0,0,0,0.24)
6
+
$shadow-2-left: -20px 0px 4px -20px rgba(0,0,0,0.24)
7
+
$shadow-2-inset-top: inset 0px 22px 4px -20px rgba(0,0,0,0.24)
8
+
$shadow-2-inset-bottom: inset 0px -22px 4px -20px rgba(0,0,0,0.24)
9
+
$shadow-3: 0px 3px 6px 0px rgba(0,0,0,0.24)
10
+
$shadow-3-inset-top: inset 0px 23px 6px -20px rgba(0,0,0,0.24)
11
+
$shadow-4: 0px 4px 8px 0px rgba(0,0,0,0.24)
12
+
$shadow-4-inset-top: inset 0px 24px 8px -20px rgba(0,0,0,0.24)
13
+
$shadow-4-inset-bottom: inset 0px -24px 8px -20px rgba(0,0,0,0.24)
14
+
$shadow-5: 0px 6px 10px 0px rgba(0,0,0,0.24)
15
+
$shadow-5-inset-top: inset 0px 26px 10px -20px rgba(0,0,0,0.24)
16
+
// $shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
17
+
// $shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
18
+
// $shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
19
+
// $shadow-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
20
+
// $shadow-5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)
21
+
22
+
// transitions
23
+
$transition: .15s cubic-bezier(0.4, 0.0, 0.2, 1.0)
24
+
$transition-short: .10s cubic-bezier(0.4, 0.0, 0.2, 1.0)
25
+
$transition-long: .30s cubic-bezier(0.4, 0.0, 0.2, 1.0)
26
+
$transition-long-in: .30s cubic-bezier(0.0, 0.0, 0.2, 1.0)
27
+
$transition-long-out: .30s cubic-bezier(0.4, 0.0, 1.0, 1.0)
28
+
$transition-longest: 1s cubic-bezier(0.4, 0.0, 0.2, 1.0)