Skip to content

Commit a06aebc

Browse files
achen178achen178
authored
Fix bugs and general css improvements (#2833)
* Increase specificity on testimonial logo styles * Fix alt text for avatar photo * Update opengraph preview logo * Update footer responsiveness * Responsive header and navigation menu
1 parent 5a73c54 commit a06aebc

10 files changed

Lines changed: 220 additions & 66 deletions

File tree

‎app/assets/images/marketing_redesign/menu.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎app/assets/images/thoughtbot_horizontal_default_red_on_light.png‎

27.6 KB
Loading

‎app/assets/stylesheets/marketing_redesign/base/_layout.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,13 @@ main {
1111
.grid-full {
1212
grid-column: 1 / -1;
1313
}
14+
15+
@media screen and (max-width: 988px) {
16+
main {
17+
transition: transform var(--transition-timing--base)
18+
var(--transition-duration--base);
19+
}
20+
header:has(input.menu-toggle:checked) + main {
21+
transform: translateX(22rem);
22+
}
23+
}

‎app/assets/stylesheets/marketing_redesign/components/_footer.css‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ footer {
22
border-top: var(--border--footer);
33
display: flex;
44
font-size: var(--font-size--small);
5-
gap: var(--space--x-large);
6-
padding: var(--space--large) Max(var(--space--base), (100% - var(--container--large)) / 2);
5+
gap: var(--space--medium) var(--space--x-large);
6+
padding: var(--space--large) 0;
7+
flex-direction: column;
78

89
.logo {
910
font-family: var(--font-family--body);
@@ -22,8 +23,9 @@ footer {
2223

2324
nav {
2425
display: flex;
26+
justify-content: space-between;
2527
gap: var(--space--large);
26-
margin-left: auto;
28+
flex: 1;
2729

2830
ul {
2931
--color--link: var(--color--footer-link);
@@ -43,3 +45,15 @@ footer {
4345
}
4446
}
4547
}
48+
49+
@media screen and (min-width: 600px) {
50+
footer {
51+
flex-direction: row-reverse;
52+
padding: var(--space--large)
53+
Max(var(--space--base), (100% - var(--container--large)) / 2);
54+
55+
nav {
56+
justify-content: flex-end;
57+
}
58+
}
59+
}

‎app/assets/stylesheets/marketing_redesign/components/_header.css‎

Lines changed: 123 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,49 @@
11
header {
2+
height: 6rem;
3+
}
4+
5+
.header-container {
26
align-items: baseline;
7+
background-color: var(--color--background-base);
38
display: flex;
49
font-family: var(--font-family--heading);
510
font-size: var(--font-size--ui);
6-
gap: var(--space--x-large);
7-
padding: var(--space--base) Max(var(--space--base), (100% - var(--container--large)) / 2);
11+
justify-content: space-between;
12+
left: 0;
13+
padding: 0 var(--space--base) var(--space--base) var(--space--base);
14+
position: fixed;
15+
top: 0;
16+
width: 100%;
17+
z-index: var(--z-index--ceiling);
18+
19+
label.menu-toggle,
20+
.spacer {
21+
display: inline-block;
22+
height: var(--space--x-large);
23+
padding: var(--space--small);
24+
width: var(--space--x-large);
25+
}
26+
27+
.spacer {
28+
caret-color: transparent;
29+
pointer-events: none;
30+
}
31+
32+
input.menu-toggle {
33+
display: none;
34+
}
835

936
.logo {
37+
color: var(--color--text-base);
38+
display: inline-block;
1039
font-family: var(--font-family--body);
1140
font-size: var(--font-size--body);
41+
text-decoration: none;
42+
width: auto;
43+
44+
.subtitle {
45+
display: none;
46+
}
1247

1348
svg {
1449
height: var(--font-size--300);
@@ -18,16 +53,25 @@ header {
1853
}
1954

2055
nav {
56+
background-color: var(--color--background-dark);
57+
bottom: 0;
58+
box-shadow: -8px 8px 37.6px -12px var(--color--gray-400) inset;
2159
flex-grow: 1;
2260
font-weight: var(--font-weight--extrabold);
61+
height: calc(100vh - 60px);
62+
left: -100%;
63+
padding: var(--space--base);
64+
position: fixed;
65+
transition: left var(--transition-timing--base)
66+
var(--transition-duration--base);
2367

2468
ul {
2569
--color--link: var(--color--header-link);
2670
--color--link-hover: var(--color--header-link-hover);
27-
28-
align-items: center;
71+
align-items: flex-start;
2972
display: flex;
30-
gap: var(--space--medium);
73+
flex-direction: column;
74+
gap: var(--space--small);
3175
margin: 0;
3276
padding: 0;
3377

@@ -40,6 +84,15 @@ header {
4084
gap: var(--space--x-small);
4185
text-decoration: none;
4286

87+
&:not(.button) {
88+
padding: var(--space--small);
89+
}
90+
91+
&.button--secondary {
92+
background-color: transparent;
93+
margin-block-start: var(--space--medium);
94+
}
95+
4396
.icon--new-window {
4497
height: calc(var(--font-size--ui) * (17 / 16));
4598
position: relative;
@@ -51,3 +104,68 @@ header {
51104
}
52105
}
53106
}
107+
108+
@media screen and (min-width: 988px) {
109+
.header-container {
110+
gap: var(--space--x-large);
111+
padding: var(--space--base)
112+
Max(var(--space--base), (100% - var(--container--large)) / 2);
113+
input[type="checkbox"],
114+
label.menu-toggle,
115+
.spacer {
116+
display: none;
117+
}
118+
119+
.logo .subtitle {
120+
display: inline;
121+
}
122+
123+
nav {
124+
background-color: transparent;
125+
box-shadow: none;
126+
flex-grow: 1;
127+
font-weight: var(--font-weight--extrabold);
128+
height: auto;
129+
padding: 0;
130+
position: static;
131+
132+
ul {
133+
align-items: center;
134+
flex-direction: row;
135+
gap: var(--space--medium);
136+
margin: 0;
137+
padding: 0;
138+
139+
li {
140+
list-style-type: none;
141+
142+
a {
143+
align-items: center;
144+
display: flex;
145+
gap: var(--space--x-small);
146+
text-decoration: none;
147+
148+
&.button--secondary {
149+
margin-block-start: 0;
150+
151+
.icon--new-window {
152+
height: calc(var(--font-size--ui) * (17 / 16));
153+
position: relative;
154+
top: calc((var(--font-size--ui) * (-1 / 16)) / 2);
155+
width: auto;
156+
}
157+
}
158+
}
159+
}
160+
}
161+
}
162+
}
163+
}
164+
165+
@media screen and (max-width: 988px) {
166+
.header-container {
167+
input[type="checkbox"]:checked ~ nav {
168+
left: 0;
169+
}
170+
}
171+
}

‎app/assets/stylesheets/marketing_redesign/components/_testimonial.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,12 @@
4747
flex-wrap: wrap;
4848
gap: var(--space--base);
4949
justify-content: center;
50-
}
5150

52-
.logo {
53-
opacity: 0.8;
54-
scale: 0.7;
55-
width: min-content;
51+
.logo {
52+
opacity: 0.8;
53+
scale: 0.7;
54+
width: min-content;
55+
}
5656
}
5757

5858
@media (min-width: 998px) {
@@ -75,9 +75,9 @@
7575
.logo-container {
7676
justify-content: space-between;
7777
padding: var(--space--x-large);
78-
}
7978

80-
.logo {
81-
scale: 1;
79+
.logo {
80+
scale: 1;
81+
}
8282
}
8383
}

‎app/helpers/open_graph_helper.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
module OpenGraphHelper
22
def open_graph_tags
33
raw [
4-
tag("meta", property: "og:image", content: image_url("ralph-gradient.png")),
4+
tag("meta", property: "og:image", content: image_url("thoughtbot_horizontal_default_red_on_light.png")),
55
tag("meta", property: "og:url", content: url_for(only_path: false)),
66
tag("meta", property: "og:title", content: page_title)
77
].join("\n")

‎app/views/layouts/marketing_redesign/_footer.html.erb‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
11
<footer>
2-
<div>
3-
<span class="logo">
4-
<%= inline_svg_tag("marketing/upcase-logo--small.svg") %>
5-
<%= t("layouts.app_name_subtitle") %>
6-
</span>
7-
8-
<p class="copyright"><%= t("layouts.copyright", current_year: Date.current.year) %></p>
9-
</div>
10-
112
<nav>
123
<div>
13-
<%= t(".links_heading") %>
4+
<strong><%= t(".links_heading") %></strong>
145
<ul>
156
<li>
167
<%= link_to(
@@ -22,7 +13,7 @@
2213
</div>
2314

2415
<div>
25-
<%= t(".resources_heading") %>
16+
<strong><%= t(".resources_heading") %></strong>
2617
<ul>
2718
<li>
2819
<%= link_to(
@@ -39,4 +30,12 @@
3930
</ul>
4031
</div>
4132
</nav>
33+
<div>
34+
<span class="logo">
35+
<%= inline_svg_tag("marketing/upcase-logo--small.svg") %>
36+
<%= t("layouts.app_name_subtitle") %>
37+
</span>
38+
39+
<p class="copyright"><%= t("layouts.copyright", current_year: Date.current.year) %></p>
40+
</div>
4241
</footer>

‎app/views/layouts/marketing_redesign/_header.html.erb‎

Lines changed: 47 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,50 @@
11
<header>
2-
<span class="logo">
3-
<%= inline_svg_tag("marketing/upcase-logo--small.svg") %>
4-
<%= t("layouts.app_name_subtitle") %>
5-
</span>
2+
<div class="header-container">
3+
<input type="checkbox" name="menu-toggle" id="menu-toggle" class="menu-toggle" aria-label="hamburger" aria-controls="menu" aria-expanded="false" >
4+
<label class="menu-toggle" for="menu-toggle" id="hamburger" aria-hidden="true">
5+
<%= inline_svg_tag("marketing_redesign/menu.svg") %>
6+
</label>
7+
<%= link_to(
8+
{controller: "/marketing_redesign/home", action: :show},
9+
class: "logo"
10+
) do %>
11+
<%= inline_svg_tag("marketing/upcase-logo--small.svg") %>
12+
<span class="subtitle"><%= t("layouts.app_name_subtitle") %></span>
13+
<% end %>
14+
<span class="spacer"></span>
615

7-
<nav>
8-
<ul>
9-
<li>
10-
<%= link_to(
11-
t(".nav.links.root"),
12-
{controller: "/marketing_redesign/home", action: :show}
13-
) %>
14-
</li>
15-
<li>
16-
<%= link_to(
17-
t(".nav.links.about_show"),
18-
{controller: "/marketing_redesign/about", action: :show}
19-
) %>
20-
</li>
21-
<li>
22-
<%= link_to(
23-
{controller: "/marketing", action: :show},
24-
target: "_blank",
25-
rel: "noopener"
26-
) do %>
27-
<%= t(".nav.links.root_marketing_show") %>
28-
<%= inline_svg_tag("marketing_redesign/new_window.svg", class: "icon--new-window") %>
29-
<% end %>
30-
</li>
31-
<li style="margin-left: auto;">
32-
<%= link_to(
33-
t(".nav.links.contacts_new"),
34-
{controller: "/marketing_redesign/opportunities", action: :new},
35-
class: "button button--secondary"
36-
) %>
37-
</li>
38-
</ul>
39-
</nav>
16+
<nav>
17+
<ul>
18+
<li>
19+
<%= link_to(
20+
t(".nav.links.root"),
21+
{controller: "/marketing_redesign/home", action: :show}
22+
) %>
23+
</li>
24+
<li>
25+
<%= link_to(
26+
t(".nav.links.about_show"),
27+
{controller: "/marketing_redesign/about", action: :show}
28+
) %>
29+
</li>
30+
<li>
31+
<%= link_to(
32+
{controller: "/marketing", action: :show},
33+
target: "_blank",
34+
rel: "noopener"
35+
) do %>
36+
<%= t(".nav.links.root_marketing_show") %>
37+
<%= inline_svg_tag("marketing_redesign/new_window.svg", class: "icon--new-window") %>
38+
<% end %>
39+
</li>
40+
<li style="margin-left: auto;">
41+
<%= link_to(
42+
t(".nav.links.contacts_new"),
43+
{controller: "/marketing_redesign/opportunities", action: :new},
44+
class: "button button--secondary"
45+
) %>
46+
</li>
47+
</ul>
48+
</nav>
49+
</div>
4050
</header>

‎app/views/marketing_redesign/home/show.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<q class="quote text-xl"><%= t("marketing_redesign.home.show.testimonials.quotes.patrick_cushing_quote_html") %></q>
2727
<div class="author">
2828
<div class="author-avatar">
29-
<%= image_tag "marketing_redesign/patrick.png", alt: "Vimeo logo", class: "avatar" %>
29+
<%= image_tag "marketing_redesign/patrick.png", alt: "Patrick Cushing wearing a green polo shirt and smiling", class: "avatar" %>
3030
</div>
3131
<div class="author-info">
3232
<p class="author-name"><strong>Patrick Cushing</strong></p>

0 commit comments

Comments
 (0)