Skip to content

Commit 111113e

Browse files
robertoacharrobertoachar
committed
feature: add assets
1 parent 3b694df commit 111113e

15 files changed

+269
-0
lines changed

‎statik/fonts/open-sans-v15-latin-600.woff

17.9 KB
Binary file not shown.

‎statik/fonts/open-sans-v15-latin-600.woff2

14.2 KB
Binary file not shown.

‎statik/fonts/open-sans-v15-latin-700.woff

18 KB
Binary file not shown.

‎statik/fonts/open-sans-v15-latin-700.woff2

14.4 KB
Binary file not shown.

‎statik/fonts/open-sans-v15-latin-800.woff

18.2 KB
Binary file not shown.

‎statik/fonts/open-sans-v15-latin-800.woff2

14.4 KB
Binary file not shown.

‎statik/fonts/open-sans-v15-latin-regular.woff

17.3 KB
Binary file not shown.

‎statik/fonts/open-sans-v15-latin-regular.woff2

13.7 KB
Binary file not shown.

‎statik/images/favicon.ico

1.12 KB
Binary file not shown.

‎statik/images/logo.png

3.32 KB
Loading

‎statik/index.html

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
9+
<title>Statik Starter Kit</title>
10+
11+
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
12+
</head>
13+
14+
<body>
15+
<header class="header">
16+
<nav class="navbar">
17+
<a class="navbar__brand" href="/">
18+
<img src="images/logo.png" alt="Statik Logo">
19+
<span>Statik</span>
20+
</a>
21+
<ul class="navbar__social">
22+
<li>
23+
<a href="https://github.com/statikstack">
24+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 23.406" role="img">
25+
<title>GitHub</title>
26+
<description>GitHub Profile</description>
27+
<path d="M12,.3A12,12,0,0,0,8.2,23.682c.6.113.82-.258.82-.577,0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61A3.181,3.181,0,0,0,3.633,17.7c-1.087-.744.084-.729.084-.729a2.516,2.516,0,0,1,1.838,1.236,2.557,2.557,0,0,0,3.495,1,2.558,2.558,0,0,1,.76-1.6c-2.665-.3-5.466-1.332-5.466-5.93A4.63,4.63,0,0,1,5.579,8.45a4.267,4.267,0,0,1,.105-3.176s1.005-.322,3.3,1.23a11.314,11.314,0,0,1,6,0c2.28-1.552,3.285-1.23,3.285-1.23a4.385,4.385,0,0,1,.12,3.176,4.648,4.648,0,0,1,1.23,3.22c0,4.61-2.805,5.625-5.475,5.92a2.873,2.873,0,0,1,.81,2.22c0,1.606-.015,2.9-.015,3.286,0,.315.21.69.825.57A11.985,11.985,0,0,0,12,.3"
28+
transform="translate(0 -0.297)" />
29+
</svg>
30+
</a>
31+
</li>
32+
<li>
33+
<a href="https://statikstack.slack.com">
34+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24.001" role="img">
35+
<title>Slack</title>
36+
<description>Slack Channel</description>
37+
<g transform="translate(0 0)">
38+
<path d="M9.879,10.995l1.035,3.085,3.2-1.074L13.084,9.932l-3.2,1.08v-.017Z" />
39+
<path d="M18.824,14.055l-1.555.521.54,1.61a1.246,1.246,0,0,1-.786,1.574,1.337,1.337,0,0,1-.435.063,1.26,1.26,0,0,1-1.155-.849l-.54-1.607-3.21,1.073.539,1.608a1.249,1.249,0,0,1-.794,1.575,1.286,1.286,0,0,1-.435.064,1.266,1.266,0,0,1-1.156-.85L9.3,17.218l-1.561.524A1.451,1.451,0,0,1,7.3,17.8a1.269,1.269,0,0,1-1.155-.855,1.235,1.235,0,0,1,.78-1.575l1.56-.525L7.5,11.76l-1.551.525a1.264,1.264,0,0,1-.428.064,1.241,1.241,0,0,1-.345-2.422l1.56-.52L6.2,7.8a1.249,1.249,0,0,1,2.37-.792L9.1,8.618l3.2-1.074-.54-1.605a1.245,1.245,0,1,1,2.364-.783l.54,1.621,1.555-.51a1.242,1.242,0,1,1,.791,2.354l-1.557.524,1.035,3.086,1.551-.516a1.25,1.25,0,0,1,.8,2.369l-.011-.029ZM22.995,8.7C20.52.456,16.946-1.471,8.7,1S-1.471,7.051,1,15.3s6.046,10.17,14.3,7.694,10.17-6.046,7.694-14.3Z"
40+
/>
41+
</g>
42+
</svg>
43+
</a>
44+
</li>
45+
<li>
46+
<a href="https://twitter.com/statikstack">
47+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.001 19.507" role="img">
48+
<title>Twitter</title>
49+
<description>Twitter Profile</description>
50+
<path d="M23.954,4.569a10,10,0,0,1-2.825.775,4.958,4.958,0,0,0,2.163-2.723A10.163,10.163,0,0,1,20.165,3.8a4.919,4.919,0,0,0-8.511,3.358,5.035,5.035,0,0,0,.127,1.124A13.935,13.935,0,0,1,1.64,3.161,4.822,4.822,0,0,0,.974,5.636a4.921,4.921,0,0,0,2.188,4.1A4.9,4.9,0,0,1,.934,9.116v.061A4.923,4.923,0,0,0,4.88,14a4.965,4.965,0,0,1-2.212.085,4.937,4.937,0,0,0,4.6,3.417,9.868,9.868,0,0,1-6.1,2.1A10.444,10.444,0,0,1,0,19.544a14,14,0,0,0,7.557,2.209,13.9,13.9,0,0,0,14-13.986c0-.209,0-.42-.015-.63A9.936,9.936,0,0,0,24,4.589l-.047-.02Z"
51+
transform="translate(0 -2.246)" />
52+
</svg>
53+
</a>
54+
</li>
55+
</ul>
56+
</nav>
57+
58+
<div class="hero">
59+
<h1>Statik</h1>
60+
<h2>Many stacks. One place.</h2>
61+
</div>
62+
</header>
63+
64+
<main class="main">
65+
<section class="section">
66+
<h2>Welcome</h2>
67+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus nec ligula at vehicula. Cras dapibus pellentesque
68+
neque. Aliquam convallis nunc a purus sodales, ut maximus lectus scelerisque. Morbi a malesuada velit, ut tincidunt
69+
sapien. Fusce placerat tellus a ullamcorper faucibus.
70+
</p>
71+
</section>
72+
73+
<section class="section">
74+
<h2>Features</h2>
75+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus nec ligula at vehicula. Cras dapibus pellentesque
76+
neque. Aliquam convallis nunc a purus sodales, ut maximus lectus scelerisque. Morbi a malesuada velit, ut tincidunt
77+
sapien. Fusce placerat tellus a ullamcorper faucibus.
78+
</p>
79+
</section>
80+
</main>
81+
82+
<script src="scripts/vendor.js"></script>
83+
<script src="scripts/app.js"></script>
84+
</body>
85+
86+
</html>

‎statik/scripts/app.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import '../styles/app.css';
2+
3+
console.log('App is running...');

‎statik/scripts/vendor.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import 'normalize.css';
2+
import '../styles/fonts.css';
3+
4+
console.log('Vendor is running...');

‎statik/styles/app.css

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
:root {
2+
--electromagnetic: #2f3640;
3+
--hint-of-pensive: #dcdde1;
4+
--lynx-white: #f5f6fa;
5+
--pico-void: #192a56;
6+
--rise-n-shine: #fbc531;
7+
--text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
8+
}
9+
10+
*,
11+
*::before,
12+
*::after {
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
background-color: var(--lynx-white);
18+
border-top: 4px solid var(--rise-n-shine);
19+
color: var(--electromagnetic);
20+
font-family: 'Open Sans', sans-serif;
21+
font-size: 16px;
22+
line-height: 1.4;
23+
}
24+
25+
h1,
26+
h2,
27+
p {
28+
font-weight: 400;
29+
margin: 0;
30+
padding: 0;
31+
}
32+
33+
p {
34+
margin: 1rem 0;
35+
}
36+
37+
a {
38+
text-decoration: none;
39+
}
40+
41+
.header {
42+
background-color: var(--pico-void);
43+
}
44+
45+
.navbar {
46+
align-items: center;
47+
display: flex;
48+
justify-content: space-between;
49+
margin: 0 auto;
50+
max-width: 1200px;
51+
padding: 1rem;
52+
}
53+
54+
.navbar__brand {
55+
align-items: center;
56+
color: var(--lynx-white);
57+
display: flex;
58+
}
59+
60+
.navbar__brand img {
61+
margin-right: 1rem;
62+
}
63+
64+
.navbar__brand span {
65+
font-size: 1.5rem;
66+
}
67+
68+
.navbar__social {
69+
align-items: center;
70+
display: flex;
71+
list-style: none;
72+
margin: 0;
73+
padding: 0;
74+
}
75+
76+
.navbar__social li {
77+
margin-left: 1rem;
78+
}
79+
80+
.navbar__social a {
81+
display: block;
82+
}
83+
84+
.navbar__social svg {
85+
fill: var(--hint-of-pensive);
86+
transition: fill 200ms;
87+
width: 1.5rem;
88+
}
89+
90+
.navbar__social a:hover svg {
91+
fill: var(--lynx-white);
92+
}
93+
94+
.hero {
95+
padding: 1rem;
96+
text-align: center;
97+
}
98+
99+
.hero h1 {
100+
color: var(--lynx-white);
101+
font-size: 3rem;
102+
font-weight: 700;
103+
text-shadow: var(--text-shadow);
104+
}
105+
106+
.hero h2 {
107+
color: var(--lynx-white);
108+
font-size: 2rem;
109+
padding: 1rem;
110+
text-shadow: var(--text-shadow);
111+
}
112+
113+
.main {
114+
display: grid;
115+
grid-gap: 2rem;
116+
grid-template-columns: repeat(2, 1fr);
117+
margin: 0 auto;
118+
max-width: 1200px;
119+
padding: 2rem 1rem;
120+
}
121+
122+
.section h2 {
123+
font-size: 1.5rem;
124+
font-weight: 600;
125+
}
126+
127+
@media (max-width: 768px) {
128+
.main {
129+
grid-template-columns: repeat(1, 1fr);
130+
}
131+
}
132+
133+
@media (max-width: 576px) {
134+
.hero h1 {
135+
font-size: 2.5rem;
136+
}
137+
138+
.hero h2 {
139+
font-size: 1.5rem;
140+
}
141+
}

‎statik/styles/fonts.css

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/* open-sans-regular - latin */
2+
@font-face {
3+
font-family: 'Open Sans';
4+
font-style: normal;
5+
font-weight: 400;
6+
src: url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'),
7+
url('../fonts/open-sans-v15-latin-regular.woff') format('woff');
8+
}
9+
10+
/* open-sans-600 - latin */
11+
@font-face {
12+
font-family: 'Open Sans';
13+
font-style: normal;
14+
font-weight: 600;
15+
src: url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'),
16+
url('../fonts/open-sans-v15-latin-600.woff') format('woff');
17+
}
18+
19+
/* open-sans-700 - latin */
20+
@font-face {
21+
font-family: 'Open Sans';
22+
font-style: normal;
23+
font-weight: 700;
24+
src: url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'),
25+
url('../fonts/open-sans-v15-latin-700.woff') format('woff');
26+
}
27+
28+
/* open-sans-800 - latin */
29+
@font-face {
30+
font-family: 'Open Sans';
31+
font-style: normal;
32+
font-weight: 800;
33+
src: url('../fonts/open-sans-v15-latin-800.woff2') format('woff2'),
34+
url('../fonts/open-sans-v15-latin-800.woff') format('woff');
35+
}

0 commit comments

Comments
 (0)