Skip to content

Commit 7616cbc

Browse files
author
Frymaster Speck
committed
Some progress
1 parent 48985bd commit 7616cbc

5 files changed

Lines changed: 264 additions & 28 deletions

File tree

‎_includes/header.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<header id="header" class="site-width">
22
<nav>
3-
<a href="/" class="home">Code Island</a>
3+
<a href="/" class="home"><img src="/images/code-island-logo3b.svg" /></a>
44
<a href="/about/" class="about">About</a>
55
<a href="/projects/" class="projects">Projects</a>
66
<a href="/members/" class="members">Members</a>

‎_layouts/home.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@
77
<body id="page" class="{{ page.body-class }} no-js">
88

99
{% include header.html %}
10-
10+
<div class="superhero"><br>
11+
<h1>Welcome to<br>Code Island</h1>
12+
</div>
13+
1114
<div class="hero">
1215
<div class="site-width">
13-
<h1>Welcome to Code Island</h1>
1416
<p>
1517
Code Island is the official <a href="http://codeforamerica.org/">Code for America</a> brigade in Rhode Island. We are an all-volunteer organization of people looking to improve our community through technology.
1618
</p>

‎images/hero-bg-ill.jpg‎

59.4 KB
Loading

‎stylesheets/styles.css‎

Lines changed: 73 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@
44

55
body {
66
margin: 0;
7-
padding: 1em 0;
7+
padding: 0;
88
font:18px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
9-
color:#777;
109
}
1110

1211
div.site-width{
12+
color: #444;
1313
width: 90%;
1414
max-width: 40rem;
1515
margin: 0 auto;
1616
}
1717

1818
h1, h2, h3, h4, h5, h6 {
19-
color:#222;
19+
color:#444;
2020
margin:0 0 20px;
2121
}
2222

@@ -33,15 +33,15 @@ h1 {
3333
}
3434

3535
h2 {
36-
color:#393939;
36+
color:#444;
3737
}
3838

3939
h3, h4, h5, h6 {
40-
color:#494949;
40+
color:#444;
4141
}
4242

4343
a {
44-
color:#39c;
44+
color:#399fd3;
4545
font-weight:400;
4646
text-decoration:none;
4747
}
@@ -108,24 +108,35 @@ img {
108108
}
109109

110110
header {
111-
background: #2f3d4a;
112-
margin: -1em 0 1em;
113-
padding: 1em;
111+
background:#fff;
112+
margin: 0 0 1em;
113+
padding: 0 0 0;
114+
border-bottom: 3px solid #cf1b14;
114115
}
116+
115117
header nav {
116-
background: rgba(0,0,0,.5);
117-
margin: -1em;
118-
padding: 1em;
118+
padding: 0 0 2em 0;
119119
}
120120
header h1 {
121121
float: left;
122122
}
123123

124+
header img {
125+
margin: 0 3em -2em 1em;
126+
}
127+
124128
header a {
125-
color: #fff;
126-
margin: -1em 0;
127-
padding: 7px 10px 7px 10px;
129+
color: #000;
130+
font-weight:bold;
131+
padding: 0 10px 0 10px;
132+
text-transform: uppercase;
133+
}
134+
135+
header a:hover {
136+
color:#cf1b14;
137+
text-decoration:none;
128138
}
139+
129140
header a:first-child {
130141
font-weight: bold;
131142
margin-right: 1em;
@@ -137,27 +148,64 @@ header a:first-child {
137148
.projects nav .projects,
138149
.members nav .members,
139150
.post nav .blog,
140-
.resources nav .resources {
141-
background: #399fd3;
151+
.resources nav .resources,
152+
.faq nav .faq {
153+
text-decoration: underline;
142154
}
143155

156+
/* HERO */
144157
.hero {
145-
background: #2f3d4a;
158+
background: #e5e5e5;
146159
margin-top: -1em;
147160
padding: 1em 0;
161+
border-bottom: 3px solid #cf1b14;
162+
}
163+
164+
.hero p, ul, ol {
165+
color: #444;
166+
}
167+
168+
.hero a {
169+
color:#399fd3;
170+
}
171+
172+
.hero img {
173+
float: right;
174+
padding: 10px;
175+
margin-top: -3px;
176+
margin-right: -50px;
177+
}
178+
179+
.hero h1, h2, h3 {
180+
color: #444;
181+
}
182+
183+
/* SUPERHERO */
184+
.superhero {
185+
background-image:url(/images/hero-bg-ill.jpg);
186+
background-size: 100%;
187+
background-repeat:no-repeat;
188+
margin-top: -1em;
148189
}
149-
.hero h1 {
150-
color: #fff;
190+
191+
.superhero h1, h2, h3, h4 {
192+
color:#fff;
193+
text-align:center;
194+
font-weight:800;
195+
margin-bottom: 0;
196+
padding-top: 0.5em;
197+
padding-bottom:1.5em;
151198
}
152-
.hero .site-width {
153-
color: #fff;
199+
200+
.superhero h1 {
201+
font-size: 36px;
154202
}
155203

156204
.blog-container {
157205
padding: 1em 0 2em;
158206
}
159207
strong {
160-
color:#222;
208+
color:#444;
161209
font-weight:700;
162210
}
163211

@@ -173,8 +221,8 @@ small {
173221

174222
hr {
175223
border:0;
176-
background:#e5e5e5;
177-
height:1px;
224+
background:#cf1b14;
225+
height:3px;
178226
margin:0 0 20px;
179227
}
180228

‎stylesheets/styles1.css‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
/* @override http://localhost:4000/stylesheets/styles.css */
2+
3+
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
4+
5+
body {
6+
margin: 0;
7+
padding: 1em 0;
8+
font:18px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
9+
color:#777;
10+
}
11+
12+
div.site-width{
13+
width: 90%;
14+
max-width: 40rem;
15+
margin: 0 auto;
16+
}
17+
18+
h1, h2, h3, h4, h5, h6 {
19+
color:#222;
20+
margin:0 0 20px;
21+
}
22+
23+
p, ul, ol, table, pre, dl {
24+
margin:0 0 20px;
25+
}
26+
27+
h1, h2, h3 {
28+
line-height:1.1;
29+
}
30+
31+
h1 {
32+
font-size:28px;
33+
}
34+
35+
h2 {
36+
color:#393939;
37+
}
38+
39+
h3, h4, h5, h6 {
40+
color:#494949;
41+
}
42+
43+
a {
44+
color:#39c;
45+
font-weight:400;
46+
text-decoration:none;
47+
}
48+
49+
a:hover{
50+
text-decoration: underline;
51+
}
52+
53+
a small {
54+
font-size:11px;
55+
color:#777;
56+
margin-top:-0.6em;
57+
display:block;
58+
}
59+
60+
.wrapper {
61+
width:860px;
62+
margin:0 auto;
63+
}
64+
65+
blockquote {
66+
border-left:1px solid #e5e5e5;
67+
margin:0;
68+
padding:0 0 0 20px;
69+
font-style:italic;
70+
}
71+
72+
code, pre {
73+
font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
74+
color:#333;
75+
font-size:12px;
76+
}
77+
78+
pre {
79+
padding:8px 15px;
80+
background: #f8f8f8;
81+
border-radius:5px;
82+
border:1px solid #e5e5e5;
83+
overflow-x: auto;
84+
}
85+
86+
table {
87+
width:100%;
88+
border-collapse:collapse;
89+
}
90+
91+
th, td {
92+
text-align:left;
93+
padding:5px 10px;
94+
border-bottom:1px solid #e5e5e5;
95+
}
96+
97+
dt {
98+
color:#444;
99+
font-weight:700;
100+
}
101+
102+
th {
103+
color:#444;
104+
}
105+
106+
img {
107+
max-width:100%;
108+
}
109+
110+
header {
111+
background: #2f3d4a;
112+
margin: -1em 0 1em;
113+
padding: 1em;
114+
}
115+
header nav {
116+
background: rgba(0,0,0,.5);
117+
margin: -1em;
118+
padding: 1em;
119+
}
120+
header h1 {
121+
float: left;
122+
}
123+
124+
header a {
125+
color: #fff;
126+
margin: -1em 0;
127+
padding: 7px 10px 7px 10px;
128+
}
129+
header a:first-child {
130+
font-weight: bold;
131+
margin-right: 1em;
132+
}
133+
134+
/* YOU ARE HERE */
135+
.home nav .home,
136+
.about nav .about,
137+
.projects nav .projects,
138+
.members nav .members,
139+
.post nav .blog,
140+
.resources nav .resources {
141+
background: #399fd3;
142+
}
143+
144+
.hero {
145+
background: #2f3d4a;
146+
margin-top: -1em;
147+
padding: 1em 0;
148+
}
149+
.hero h1 {
150+
color: #fff;
151+
}
152+
.hero .site-width {
153+
color: #fff;
154+
}
155+
156+
.blog-container {
157+
padding: 1em 0 2em;
158+
}
159+
strong {
160+
color:#222;
161+
font-weight:700;
162+
}
163+
164+
section {
165+
width:500px;
166+
float:right;
167+
padding-bottom:50px;
168+
}
169+
170+
small {
171+
font-size:11px;
172+
}
173+
174+
hr {
175+
border:0;
176+
background:#e5e5e5;
177+
height:1px;
178+
margin:0 0 20px;
179+
}
180+
181+
footer {
182+
margin-top: 30px;
183+
}
184+
footer img {
185+
margin-left: -20px;
186+
}

0 commit comments

Comments
 (0)