Skip to content

Commit 999c77d

Browse files
codeyardcodeyard
committed
First version
1 parent 2642f9a commit 999c77d

30 files changed

+744
-0
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/.idea/
2+
/.vscode/
3+
.DS_Store
4+
.project
5+
.settings

‎assets/css/main.css‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
/* ---------------------------------------------------------------------
2+
Variables
3+
--------------------------------------------------------------------- */
4+
:root {
5+
--font-default: 18px;
6+
--font-tiny: 11px;
7+
--font-small: 14px;
8+
--font-large: 26px;
9+
--font-huge: 32px;
10+
--line-height: 26px;
11+
--spacing-default: 14px;
12+
}
13+
14+
@media (min-width: 1000px) {
15+
:root {
16+
--font-default: 22px;
17+
--font-tiny: 13px;
18+
--font-small: 18px;
19+
--font-large: 32px;
20+
--font-huge: 40px;
21+
--line-height: 32px;
22+
--spacing-default: 16px;
23+
}
24+
}
25+
26+
27+
/* ---------------------------------------------------------------------
28+
Colors
29+
--------------------------------------------------------------------- */
30+
html {
31+
--color-base: #313b44;
32+
--color-bg: #d3dade;
33+
--color-accent: #4c9ebf;
34+
--color-hover: #356e85;
35+
--color-social: #707c80;
36+
--color-grass: #2c6853;
37+
--color-rust: #804535;
38+
--color-sun: #fcbd5f;
39+
}
40+
41+
/* Dark Mode Colors */
42+
@media screen and (prefers-color-scheme: dark) {
43+
html {
44+
--color-base: #fcfcfc;
45+
--color-bg: #1d1e1f;
46+
}
47+
}
48+
49+
50+
/* ---------------------------------------------------------------------
51+
Layout
52+
--------------------------------------------------------------------- */
53+
* {
54+
box-sizing: border-box;
55+
}
56+
57+
html {
58+
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
59+
font-size: var(--font-default);
60+
line-height: var(--line-height);
61+
margin: 0;
62+
-webkit-font-smoothing: antialiased;
63+
}
64+
65+
body {
66+
background-color: var(--color-bg);
67+
color: var(--color-base);
68+
margin: 0 var(--line-height);
69+
}
70+
71+
header {
72+
display: grid;
73+
grid-gap: var(--line-height);
74+
grid-template-columns: repeat(2, 1fr);
75+
margin-bottom: var(--line-height);
76+
line-height: var(--line-height);
77+
padding-top: var(--line-height);
78+
}
79+
80+
nav a {
81+
color: var(--color-accent);
82+
font-size: var(--font-default);
83+
font-weight: bold;
84+
text-decoration: none;
85+
}
86+
87+
nav a:hover {
88+
color: var(--color-hover);
89+
border-bottom: 3px solid var(--color-hover);
90+
}
91+
92+
nav a:not(:last-child) {
93+
margin-right: var(--spacing-default);
94+
}
95+
96+
a.logo {
97+
box-shadow: none;
98+
}
99+
100+
a.logo svg {
101+
height: calc(4 * var(--line-height));
102+
width: calc(4 * var(--line-height));
103+
}
104+
105+
@media (min-width: 1000px) {
106+
a.logo svg {
107+
height: calc(5 * var(--line-height));
108+
width: calc(5 * var(--line-height));
109+
}
110+
}
111+
112+
a.logo svg * {
113+
fill: var(--color-accent);
114+
stroke: var(--color-accent);
115+
}
116+
117+
a.logo:hover svg * {
118+
fill: var(--color-hover);/* --color-bg */
119+
stroke: var(--color-hover);
120+
}
121+
122+
@media (min-width: 1000px) {
123+
article {
124+
margin-left: 50%;
125+
}
126+
}
127+
128+
129+
/* ---------------------------------------------------------------------
130+
Footer
131+
--------------------------------------------------------------------- */
132+
footer {
133+
display: grid;
134+
grid-gap: var(--line-height);
135+
grid-template-columns: repeat(2, 1fr);
136+
line-height: var(--line-height);
137+
padding-top: calc(2 * var(--line-height));
138+
padding-bottom: var(--line-height);
139+
}
140+
141+
footer>div:first-child, footer>div:last-child {
142+
grid-column: 1 / span 2;
143+
}
144+
145+
@media (min-width: 1000px) {
146+
footer { grid-template-columns: repeat(4, 1fr); }
147+
footer div:last-child { grid-column-start: 3; }
148+
}
149+
150+
a.back-to-top {
151+
color: var(--color-social);
152+
transition: opacity 0.3s ease;
153+
text-decoration: none;
154+
}
155+
156+
a.back-to-top:hover {
157+
opacity: 0.5;
158+
}
159+
160+
ul.social {
161+
list-style: none;
162+
margin: 0;
163+
padding: 0;
164+
}
165+
166+
ul.social li {
167+
float: left;
168+
}
169+
170+
ul.social li:not(:last-child) {
171+
margin-right: var(--line-height);
172+
}
173+
174+
ul.social li a {
175+
border: none;
176+
}
177+
178+
ul.social li a svg * {
179+
fill: var(--color-social);
180+
}
181+
182+
ul.social li a:hover svg * {
183+
fill: var(--color-hover);
184+
}
185+
186+
.copyright {
187+
font-size: var(--font-tiny);
188+
}
189+
190+
191+
/* ---------------------------------------------------------------------
192+
Typography
193+
--------------------------------------------------------------------- */
194+
h1, h2 {
195+
font-weight: 400;
196+
}
197+
198+
h1 {
199+
font-size: var(--font-huge);
200+
font-weight: 500;
201+
letter-spacing: 0;
202+
line-height: var(--font-huge);
203+
margin-bottom: calc(1.3 * var(--font-huge));
204+
}
205+
206+
h2 {
207+
font-size: var(--font-large);
208+
line-height: var(--font-large);
209+
margin-bottom: calc(1.3 * var(--font-huge));
210+
}
211+
212+
a {
213+
color: var(--color-accent);
214+
font-weight: bold;
215+
text-decoration: none;
216+
transition: opacity 0.3s ease;
217+
}
218+
219+
p a, li a {
220+
border-bottom: 1px solid var(--color-accent);
221+
}
222+
223+
a:hover {
224+
color: var(--color-hover);
225+
}
226+
227+
@media (min-width: 1000px) {
228+
ul.clients {
229+
display: grid;
230+
grid-template-columns: repeat(2, 1fr);
231+
}
232+
}

0 commit comments

Comments
 (0)