Skip to content

Commit f779404

Browse files
kirilknyshkirilknysh
authored
Add login page; (#7)
* Add login page; * Landing cleanup;
1 parent 575c12d commit f779404

File tree

8 files changed

+106
-122
lines changed

8 files changed

+106
-122
lines changed

‎app/common/fonts/FontAwesome.otf‎

132 KB
Binary file not shown.

‎app/common/fonts/families.styl‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,7 @@
77
font-family Montserrat
88
src url('./Montserrat-Light.ttf')
99
font-weight 300
10+
11+
@font-face
12+
font-family AwesomeIcon
13+
src url('./FontAwesome.otf')

‎app/index/index-styles.styl‎

Lines changed: 11 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '~common/fonts/families.styl'
2+
13
dark = #331832
24
darkest = #272932
35
bright = #F7B267
@@ -19,19 +21,18 @@ header
1921
text-align center
2022
background dark
2123
padding 5rem 0 6.15rem
24+
font-family 'Montserrat'
2225

2326
.logo
2427
color bright
2528
font-size 7rem
2629
font-weight lighter
27-
font-family 'Yeseva One', cursive
2830

2931
.tagline
3032
font-size 1.15rem
3133
margin-top 1.15rem
3234
padding 0 1.15rem
3335
font-weight lighter
34-
font-family sans-serif
3536
color #F5F1ED
3637

3738
section
@@ -73,7 +74,6 @@ a
7374
width 20vw
7475
min-width 240px
7576
padding 1rem
76-
border-radius 1.5rem
7777
color dark
7878
text-align center
7979

@@ -90,70 +90,21 @@ a
9090
text-align center
9191

9292
& + a
93-
margin-top 2rem
94-
95-
.event
96-
display flex
97-
width 25vw
98-
min-width 260px
99-
font-family sans-serif
100-
margin-bottom 2rem
101-
102-
.description
103-
104-
h1
105-
padding 0
106-
font-size 1.5rem
107-
108-
a
109-
text-decoration none
110-
111-
.name
112-
color darkest
113-
border-bottom 1px solid #D7D0C8
114-
115-
.game
116-
display inline-block
117-
padding .3rem .6rem
118-
border-radius .5rem
119-
color #f5f1ed
120-
font-size 1rem
121-
vertical-align top
122-
123-
h2
124-
font-weight normal
125-
font-size 1rem
126-
127-
time
128-
display block
129-
font-size .8rem
130-
margin .5rem 0
131-
132-
&.cssqd
133-
.game
134-
background cssqd-bg
135-
136-
&.jsqd
137-
.game
138-
background jsqd-bg
139-
140-
&._qd
141-
.game
142-
background _qd-bg
93+
margin 2rem 0
14394

14495
.github
145-
background-color bright
14696
a
14797
display flex
14898
align-items center
14999
justify-content center
150100
text-decoration none
151-
color darkest
101+
color #f5f1ed
152102

153103
.logo
154-
width 120px
155-
height 120px
104+
width 42px
105+
height 42px
156106
background-image url(GitHub-Mark-120px-plus.png)
107+
background-size contain
157108
margin 2rem 1rem
158109

159110
.on-github
@@ -165,6 +116,9 @@ footer
165116
padding 2rem
166117
color #f5f1ed
167118
font-family sans-serif
119+
display flex
120+
justify-content space-evenly
121+
align-items center
168122

169123
a
170124
color #f5f1ed

‎app/index/index.html‎

Lines changed: 12 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<meta name="description" content="21/23 - Educational Gaming">
77
<meta name="keywords" content="Games,CSS,JS,WS,Cascading Style Sheets,JavaScript,Java Script,WebSocket,Web Socket,Learn,Education,Gamification"/>
8-
<link href="https://fonts.googleapis.com/css?family=Yeseva+One" rel="stylesheet">
98
<title>21/23 - Educational Gaming</title>
109
</head>
1110
<body>
@@ -33,9 +32,8 @@ <h1>CSS QuickDraw</h1>
3332
</div>
3433
</section>
3534

36-
<section class="events flex-column-center"> <!-- events -->
37-
38-
<h1>Upcoming</h1>
35+
<section class="events flex-column-center">
36+
<h1>Play</h1>
3937

4038
<div class="description">
4139
<p>Our schedule is free!</p>
@@ -47,70 +45,19 @@ <h1>Upcoming</h1>
4745
📨 Contact Us!
4846
</div>
4947
</a>
50-
51-
<h1>Past events</h1>
52-
53-
<div class="event cssqd">
54-
<div class="description">
55-
<h1>
56-
<a href="https://dachfest.com" target="_blank">
57-
<span class="name">DACHFest</span>
58-
</a>
59-
<span title="CSS QuickDraw" class="game">cssqd</span>
60-
</h1>
61-
62-
<time datetime="">11 November 2018</time>
63-
<h2>🇩🇪 Munich, Germany</h2>
64-
</div>
65-
</div>
66-
67-
<div class="event jsqd">
68-
<span class="description">
69-
<h1>
70-
<span class="name">RS&nbsp;School&nbsp;2018&nbsp;Q3</span>
71-
<span title="JavaScript QuickDraw" class="game">jsqd</span>
72-
</h1>
73-
<time datetime="">10 October 2018</time>
74-
<h2>&#x1f310; Webinar</h2>
75-
</span>
76-
</div>
77-
78-
<div class="event cssqd">
79-
<span class="description">
80-
<h1>
81-
<a href="https://www.meetup.com/Web-Zurich/" target="_blank">
82-
<span class="name">WebZürich</span>
83-
<a>
84-
<span title="CSS QuickDraw" class="game">cssqd</span>
85-
</h1>
86-
<time datetime="">29 August 2018</time>
87-
<h2>🇨🇭 Zürich, Switzerland</h2>
88-
</span>
89-
</div>
90-
91-
<div class="event _qd">
92-
<span class="description">
93-
<h1>
94-
<span class="name">LvivJS</span>
95-
<span title="Lodash QuickDraw" class="game">_qd</span>
96-
</h1>
97-
<time datetime="">10 August 2017</time>
98-
<h2>🇺🇦 Lviv, Ukraine</h2>
99-
</span>
100-
</div>
101-
102-
</section>
103-
104-
<section class="github">
105-
<a href="https://github.com/21-23">
106-
<div class="logo"></div>
107-
<h1>21/23<div class="on-github">on github</div></h1>
108-
</a>
10948
</section>
11049

11150
<footer>
112-
<h1>✉️ <a href="#">info@2123.io</a></h1>
113-
<h2>© 2018</h2>
51+
<div>
52+
<h1>✉️ <a href="#">info@2123.io</a></h1>
53+
<h2>© 2021</h2>
54+
</div>
55+
<div class="github">
56+
<a href="https://github.com/21-23">
57+
<div class="logo"></div>
58+
<h1>21/23<div class="on-github">on github</div></h1>
59+
</a>
60+
</div>
11461
</footer>
11562

11663
<script>

‎app/login/login-styles.styl‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@import '~common/fonts/families.styl'
2+
3+
html
4+
min-height 100%
5+
background linear-gradient(to top, #331832, #260a25 100%)
6+
overflow hidden
7+
8+
.login-view
9+
position absolute
10+
top 0
11+
left 0
12+
width 100%
13+
height 100%
14+
font-family Helvetica, 'Helvetica Neue', Arial
15+
16+
17+
.login-panel
18+
position absolute
19+
width 100%
20+
height 15vh
21+
top 60vh
22+
background rgba(0, 0, 0, .3)
23+
display flex
24+
flex-flow row nowrap
25+
justify-content space-around
26+
align-items center
27+
28+
.login-button
29+
height 13vh
30+
width 13vh
31+
line-height 13vh
32+
font-size 9vh
33+
text-align center
34+
text-decoration none
35+
font-family AwesomeIcon
36+
color #fff
37+
transition color 300ms
38+
39+
&:hover
40+
color #753372
41+
42+
@media all and (orientation: landscape)
43+
// TODO: where to make this override?
44+
.login-view
45+
.login-panel
46+
top 40vh
47+
height 20vh
48+
justify-content center
49+
50+
.login-button
51+
height 18vh
52+
width 18vh
53+
line-height 18vh
54+
font-size 13vh
55+
margin 0 2vh

‎app/login/login-view.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import 'common/styles/reset.styl';
2+
import './login-styles.styl';

‎app/login/login.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Login</title>
6+
</head>
7+
<body>
8+
<div class="login-view">
9+
<div class="login-panel">
10+
<a href="/auth/github" class="login-button">&#xf09b;</a>
11+
<a href="/auth/twitter" class="login-button">&#xf099;</a>
12+
<a href="/auth/google" class="login-button">&#xf0d5;</a>
13+
</div>
14+
</div>
15+
</body>
16+
</html>

‎webpack.config.base.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
77
module.exports = {
88
entry: {
99
'index': './app/index/index-view.js',
10+
'login': './app/login/login-view.js',
1011
},
1112
output: {
1213
path: path.resolve(__dirname, 'dist'),
@@ -105,5 +106,10 @@ module.exports = {
105106
template: 'app/index/index.html',
106107
chunks: ['index']
107108
}),
109+
new HtmlWebpackPlugin({
110+
filename: 'login.html',
111+
template: 'app/login/login.html',
112+
chunks: ['login']
113+
}),
108114
],
109115
};

0 commit comments

Comments
 (0)