Skip to content

Commit 76616d5

Browse files
molefrogmolefrog
committed
Brand new website design.
0 parents  commit 76616d5

14 files changed

+3674
-0
lines changed

Diff for: ‎.gitignore

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Numerous always-ignore extensions
2+
*.diff
3+
*.err
4+
*.orig
5+
*.log
6+
*.rej
7+
*.swo
8+
*.swp
9+
*.vi
10+
*~
11+
*.sass-cache
12+
13+
# OS or Editor folders
14+
.DS_Store
15+
.cache
16+
.project
17+
.settings
18+
.tmproj
19+
nbproject
20+
Thumbs.db
21+
22+
# NPM packages folder.
23+
node_modules/
24+
25+
# Brunch folder for temporary files.
26+
tmp/
27+
28+
# Brunch output folder.
29+
public/
30+
31+
# Bower stuff.
32+
bower_components/

Diff for: ‎app/assets/images/birth-venus.jpg

334 KB
Loading

Diff for: ‎app/assets/images/ch-horiz-white.svg

+32
Loading

Diff for: ‎app/assets/images/rails-club-sticker.png

93.1 KB
Loading

Diff for: ‎app/assets/index.html

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
5+
6+
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
7+
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
8+
9+
<link rel="stylesheet" href="./app.css"></link>
10+
<!-- <link href="https://fonts.googleapis.com/css?family=Rubik:400,500,700,900&amp;subset=cyrillic" rel="stylesheet"> -->
11+
12+
<title>Code Hipsters</title>
13+
<script src="/app.js"></script>
14+
15+
<script>
16+
require('initialize');
17+
</script>
18+
</head>
19+
<body class="site">
20+
21+
<div class="banner">
22+
<div class="banner__image banner__image--first"></div>
23+
<div class="banner__image banner__image--second"></div>
24+
25+
<div class="banner__content">
26+
<div class="banner__logo-wrap">
27+
<img class="banner__logo" src="./images/ch-horiz-white.svg" />
28+
</div>
29+
30+
<div class="banner__slogan">
31+
Постмодерн умер, а веб — еще нет
32+
</div>
33+
</div>
34+
35+
</div>
36+
37+
<div class="site__content">
38+
39+
<div class="site__about-and-team">
40+
41+
<div class="site__about">
42+
<div class="about__header">Кто такие Code Hipsters?</div>
43+
<div class="about__text">
44+
<p>
45+
Код хипстеры — сообщество программистов и цифровых дизайнеров из Ростова-на-Дону. Мы исследуем зарождающиеся паттерны и стили эпохи ИТ-ренессанса и веб-модерна, а результаты изысканий публикуем в
46+
<a class="about__link" href="http://vk.com/codehipsters">социальных</a> <a class="about__link" href="http://twitter.com/codehipsters">сетях</a> и
47+
<a class="about__link" href="http://telegram.me/codehipsters">Телеграме</a>. Ищем новые идеи повсюду, от последних исследований в сфере искусственного интеллекта до Чинквеченто, ревущих двадцатых, комикс-культуры и рейв-движения.
48+
</p>
49+
50+
<p>
51+
С радостью делимся опытом и новостями на конференциях и митапах. Чтобы делать запоминающиеся презентации и общаться с публикой, разработали <a class="about__link" href="http://ficus.io">ficus.io</a>.
52+
</p>
53+
</div>
54+
</div>
55+
56+
<div class="site__team">
57+
<img class="site__postmark" src="/images/rails-club-sticker.png" />
58+
59+
<div class="site__postmark-label">
60+
свои крестовые походы отмечаем
61+
выпуском тематических стикеров-марок.
62+
</div>
63+
64+
</div>
65+
66+
67+
68+
</div>
69+
70+
71+
72+
73+
</div>
74+
</body>
75+
</html>

Diff for: ‎app/initialize.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const images = [
2+
'./images/birth-venus.jpg',
3+
'https://media.giphy.com/media/l41lSeYuUleD8vG2Q/giphy.gif',
4+
'http://i.giphy.com/3o6EhOYMhOTANYgHMk.gif'
5+
]
6+
7+
document.addEventListener('DOMContentLoaded', function () {
8+
const banner = document.querySelector('.banner')
9+
10+
let slides = [
11+
banner.querySelector('.banner__image--first'),
12+
banner.querySelector('.banner__image--second')
13+
]
14+
15+
let imageIdx = 0
16+
17+
const swapImages = () => {
18+
const [previous, current] = slides
19+
previous.classList.remove('banner__image--active')
20+
21+
setTimeout(() => previous.classList.remove('banner__image--zoom'), 2000)
22+
23+
current.style = `background-image: url(${images[imageIdx]});`
24+
current.classList.add('banner__image--zoom')
25+
current.classList.add('banner__image--active')
26+
27+
imageIdx = (imageIdx + 1) % images.length
28+
29+
slides = [slides[1], slides[0]]
30+
}
31+
32+
setTimeout(() => {
33+
swapImages()
34+
setInterval(swapImages, 5000)
35+
}, 1000)
36+
})

Diff for: ‎app/styles/_colors.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
$textGray: #373737;
2+
$pink: #FD789C;
3+
4+
$gray-10: #FEFEFE;
5+
$gray-50: #FAFAFA;
6+
$gray-100: #F5F5F5;
7+
$gray-200: #EEEEEE;
8+
$gray-300: #E0E0E0;
9+
$gray-400: #BDBDBD;
10+
$gray-500: #9E9E9E;
11+
$gray-600: #757575;
12+
$gray-700: #616161;
13+
$gray-800: #424242;
14+
$gray-900: #212121;

Diff for: ‎app/styles/banner.scss

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
2+
.banner {
3+
height: 240px;
4+
margin: 0 auto;
5+
position: relative;
6+
overflow: hidden;
7+
background: black;
8+
9+
background-size: cover;
10+
background-position: center center;
11+
}
12+
13+
.banner__image,
14+
.banner__content {
15+
position: absolute;
16+
top: 0;
17+
left: 0;
18+
right: 0;
19+
bottom: 0;
20+
}
21+
22+
// ---
23+
// Image layer
24+
// ---
25+
.banner__image {
26+
background-color: black;
27+
z-index: 13;
28+
29+
background-size: cover;
30+
background-position: center center;
31+
opacity: 0;
32+
33+
// Little bit more than the height of container
34+
height: 350px;
35+
transition: transform 12s linear,
36+
opacity 1s ease;
37+
}
38+
39+
.banner__image--active {
40+
opacity: 1.0;
41+
}
42+
43+
.banner__image--zoom {
44+
transform: scale(1.1, 1.1) translateY(-50px);
45+
}
46+
47+
.banner__content {
48+
background-color: rgba(0,0,0,0.5);
49+
z-index: 1337;
50+
}
51+
52+
// ---
53+
// Logo and slogan
54+
// ---
55+
.banner__slogan {
56+
text-align: center;
57+
font-size: 22px;
58+
font-weight: 500;
59+
color: white;
60+
61+
max-width: 640px;
62+
margin: 0 auto;
63+
}
64+
65+
.banner__logo-wrap {
66+
text-align: center;
67+
padding-top: 64px;
68+
margin-bottom: 14px;
69+
}

Diff for: ‎app/styles/project-card.scss

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@import './colors';
2+
3+
.projects {
4+
margin-bottom: 48px;
5+
}
6+
7+
.projects__grid {
8+
display: flex;
9+
flex-flow: row nowrap;
10+
}
11+
12+
.project-card {
13+
margin-right: 48px;
14+
}
15+
16+
.project-card__thumb {
17+
width: 200px;
18+
height: 120px;
19+
20+
border-radius: 4px;
21+
margin-bottom: 8px;
22+
23+
background-size: cover;
24+
}
25+
26+
.project-card__name {
27+
font-size: 18px;
28+
text-decoration: underline;
29+
display: inline-block;
30+
margin-bottom: 6px;
31+
max-width: 240px;
32+
}
33+
34+
.project-card__description {
35+
color: $textGray;
36+
font-size: 15px;
37+
max-width: 300px;
38+
}

Diff for: ‎app/styles/sections.scss

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@import './colors';
2+
3+
.site__about-and-team {
4+
display: flex;
5+
flex-flow: row nowrap;
6+
}
7+
8+
.site__about {
9+
width: 75%;
10+
padding-right: 32px;
11+
}
12+
13+
.site__team {
14+
width: 25%;
15+
align-self: center;
16+
}
17+
18+
.site__postmark {
19+
width: 220px;
20+
}
21+
22+
.team__header {
23+
font-weight: bold;
24+
font-size: 20px;
25+
padding-top: 40px;
26+
margin-bottom: 8px;
27+
}
28+
29+
.site__postmark-label {
30+
font-size: 13px;
31+
margin-top: 6px;
32+
color: $gray-600;
33+
}
34+
35+
.team__member {
36+
margin-bottom: 4px;
37+
font-size: 17px;
38+
}
39+
40+
.about__header {
41+
font-weight: bold;
42+
font-size: 24px;
43+
margin-bottom: 20px;
44+
}
45+
46+
.about__text {
47+
color: $textGray;
48+
font-size: 17px;
49+
}
50+
51+
.about__link {
52+
font-weight: 500;
53+
54+
color: $textGray;
55+
border-bottom: 2px solid $textGray;
56+
text-decoration: none;
57+
}

0 commit comments

Comments
 (0)