Skip to content

Commit 6330210

Browse files
rsmithlalrsmithlal
committed
Greatly simplify compiled css to reduce filesize of sent email
1 parent db06131 commit 6330210

File tree

2 files changed

+210
-45
lines changed

2 files changed

+210
-45
lines changed

‎app/assets/stylesheets/better_together/mailer.scss‎

Lines changed: 208 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,29 @@
1-
21
// New to NL colour palette
32
$blue-1: #004BA8;
43
$blue-2: #3E78B2;
54
$beige: #EAF0CE;
65
$teal: #5a8f9b;
76
$beige-light: lighten($beige, 10%);
87
$green-2: #70A288;
9-
// $green-2: #538068; // variant
10-
// $green-1: #214E34;
11-
// $green-1: #30734C; // variant
128
$green-1: #406350; // variant
139

14-
// Assign the gradient to a variable
10+
// Gradient variables
1511
$nl-gradient: linear-gradient(to right, $blue-1, $blue-2, $green-2, $green-1);
1612
$nl-gradient-reversed: linear-gradient(to right, $green-1, $green-2, $blue-2, $blue-1);
1713
$nl-gradient-blue: linear-gradient(to right, $blue-1, $blue-2);
1814
$nl-gradient-vertical: linear-gradient(to bottom, $blue-1, $blue-2, $green-2, $green-1);
1915
$nl-gradient-blue-vertical: linear-gradient(to bottom, $blue-1, $blue-2);
2016
$nl-gradient-green-vertical: linear-gradient(to bottom, $green-2, $green-1);
2117

22-
// Override the color variables in the host application
23-
$primary: $blue-1; /* Change to a different blue */
24-
$secondary: $blue-2; /* Change to a different green */
18+
// Override host color variables
19+
$primary: $blue-1;
20+
$secondary: $blue-2;
2521
$success: $green-2;
2622
$info: $green-1;
2723
$warning: #C9B947;
2824
$danger: #BF4A47;
29-
$text-opposite-theme-color: #222; /* Darker text */
30-
$background-opposite-theme-color: #f0f0f0; /* Lighter background */
25+
$text-opposite-theme-color: #222;
26+
$background-opposite-theme-color: #f0f0f0;
3127
$light-background-text-color: #222;
3228
$dark-background-text-color: #f0f0f0;
3329

@@ -40,39 +36,10 @@ $colors: (
4036
danger: $danger,
4137
);
4238

43-
/* Define SCSS variables for common color properties */
44-
$slider-track-color: lighten($secondary, 10%);
45-
$slider-thumb-border-color: $primary;
46-
$slider-thumb-color: $beige;
47-
$slider-track-height: 6px;
48-
$slider-thumb-size: 15px;
49-
$slider-thumb-border-size: 2px;
50-
5139
// Import the gem's SCSS styles after overriding the variables
5240
@import 'theme';
5341

54-
55-
@import "bootstrap-utilities";
56-
@import "bootstrap/buttons";
57-
58-
@import 'bootstrap';
59-
@import 'devise';
60-
@import 'font-awesome';
61-
@import 'actiontext';
62-
@import 'contact_details';
63-
@import 'content_blocks';
64-
@import 'conversations';
65-
@import 'forms';
66-
@import 'metrics';
67-
@import 'navigation';
68-
@import 'notifications';
69-
@import 'profiles';
70-
@import 'share';
71-
@import 'sidebar_nav';
72-
@import 'trix-extensions/richtext';
73-
74-
75-
42+
/* ---------- Navigation Containers ---------- */
7643
#main-nav.mailer,
7744
#footer-pages-nav {
7845
.navbar-brand {
@@ -91,3 +58,204 @@ $slider-thumb-border-size: 2px;
9158
width: 100%;
9259
}
9360
}
61+
62+
/* ---------- Base Styles ---------- */
63+
body {
64+
margin: 0;
65+
font-family: "Roboto", sans-serif;
66+
background: linear-gradient(135deg, rgb(250,252,245), #ffffff);
67+
color: #212529;
68+
}
69+
70+
#main-nav {
71+
flex-direction: column;
72+
row-gap: 1.25rem !important;
73+
}
74+
75+
/* ---------- Navbar Header ---------- */
76+
.navbar {
77+
display: flex;
78+
align-items: center;
79+
justify-content: space-between;
80+
padding: 1.5rem 0;
81+
background: $nl-gradient;
82+
color: $dark-background-text-color;
83+
position: sticky;
84+
top: 0;
85+
z-index: 1000;
86+
}
87+
88+
.navbar .navbar-brand {
89+
text-decoration: none;
90+
color: $dark-background-text-color;
91+
}
92+
93+
.host_community_logo {
94+
display: block;
95+
max-width: 40vw;
96+
max-height: 5vh;
97+
margin: auto;
98+
}
99+
100+
/* Utility spacing */
101+
.pt-4 { padding-top: 1.5rem; }
102+
.mt-4 { margin-top: 1.5rem; }
103+
.row-gap-1 { row-gap: 1rem; }
104+
105+
/* ---------- Navigation List ---------- */
106+
.navbar-nav {
107+
list-style: none;
108+
margin: 0;
109+
padding: 0;
110+
display: flex;
111+
gap: 2rem;
112+
align-items: center;
113+
}
114+
115+
.nav-item { position: relative; }
116+
117+
.nav-link {
118+
text-decoration: none;
119+
color: $dark-background-text-color;
120+
padding: 5px 10px;
121+
border-bottom: 4px solid transparent;
122+
transition: border-color 0.3s ease;
123+
white-space: nowrap;
124+
}
125+
126+
.nav-link:hover,
127+
.nav-link:focus {
128+
border-bottom-color: $blue-1;
129+
}
130+
131+
/* ---------- Dropdown Menu ---------- */
132+
.dropdown-menu {
133+
display: none;
134+
position: absolute;
135+
background: $nl-gradient-blue-vertical;
136+
padding: 0.5rem 1rem;
137+
list-style: none;
138+
margin: 0;
139+
border-radius: 0.375rem;
140+
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
141+
}
142+
143+
.nav-item.dropdown:hover .dropdown-menu {
144+
display: block;
145+
}
146+
147+
.dropdown-item {
148+
text-decoration: none;
149+
color: $dark-background-text-color;
150+
padding: 0.25rem 1rem;
151+
display: block;
152+
transition: color 0.3s ease;
153+
}
154+
155+
.dropdown-item:hover {
156+
color: #fff;
157+
background-color: $blue-1;
158+
}
159+
160+
/* ---------- Main Content Card ---------- */
161+
.container.card {
162+
max-width: 600px;
163+
margin: 1.5rem auto 0;
164+
padding: 20px;
165+
border: 1px solid #adb5bd;
166+
border-radius: 0.375rem;
167+
background: #fff;
168+
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
169+
}
170+
171+
.card-body {
172+
padding: 1.5rem;
173+
color: #212529;
174+
}
175+
176+
.card-body p {
177+
margin: 0 0 20px;
178+
line-height: 1.7;
179+
}
180+
181+
/* ---------- Footer ---------- */
182+
footer.footer {
183+
position: fixed;
184+
bottom: 0;
185+
left: 0;
186+
right: 0;
187+
z-index: 1030;
188+
background: $nl-gradient;
189+
color: $dark-background-text-color;
190+
padding: 10px;
191+
text-align: center;
192+
font-size: 12px;
193+
margin-top: 1.5rem;
194+
}
195+
196+
#footer-pages-nav .navbar-nav {
197+
display: flex;
198+
gap: 2rem;
199+
justify-content: center;
200+
list-style: none;
201+
margin: 0;
202+
padding: 0;
203+
}
204+
205+
#footer-pages-nav .nav-link {
206+
text-decoration: none;
207+
color: $dark-background-text-color;
208+
padding: 5px 10px;
209+
border-bottom: 4px solid transparent;
210+
transition: border-color 0.3s ease;
211+
white-space: nowrap;
212+
}
213+
214+
#footer-pages-nav .nav-link:hover,
215+
#footer-pages-nav .nav-link:focus {
216+
border-bottom-color: $blue-1;
217+
}
218+
219+
.navbar-text.text-center.my-0 {
220+
margin: 0;
221+
}
222+
223+
/* ---------- Extra Footer Content (Disclaimer) ---------- */
224+
#extra-footer-content.container {
225+
max-width: 600px;
226+
margin: 0 auto;
227+
padding: 20px;
228+
}
229+
230+
.fst-italic {
231+
font-style: italic;
232+
font-size: 0.6em;
233+
}
234+
235+
.trix-content h5 {
236+
font-weight: 500;
237+
line-height: 1.2;
238+
color: #212529;
239+
font-size: 14px;
240+
font-family: "Raleway", sans-serif;
241+
letter-spacing: 1.25px;
242+
text-transform: uppercase;
243+
margin: 0 0 15px;
244+
}
245+
246+
.trix-content div {
247+
margin: 1em 0;
248+
}
249+
250+
/* ---------- Custom Navigation Items (if needed) ---------- */
251+
.home_navigation_item {}
252+
.about_navigation_item {}
253+
.header-community_navigation_item {}
254+
.partner-organizations_navigation_item {}
255+
.contact_navigation_item {}
256+
.journey_navigation_item {}
257+
.faq_navigation_item {}
258+
.privacy-policy_navigation_item {}
259+
.terms-of-service_navigation_item {}
260+
.code-of-conduct_navigation_item {}
261+
.accessibility_navigation_item {}

‎app/views/layouts/better_together/mailers/_footer.html.erb‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11

22
<!-- Footer -->
3-
<footer id="app-footer" class="footer mt-4 fixed-bottom">
3+
<footer id="app-footer" class="footer mt-4">
44
<%= render partial: 'layouts/better_together/extra_footer_info_top' %>
55

66
<nav id="footer-pages-nav" class="navbar">
7-
<div class="container-fluid">
8-
9-
<%= render_platform_footer_nav_items %>
10-
</div>
7+
<%= render_platform_footer_nav_items %>
118
</nav>
129
<p class="navbar-text text-center my-0">
1310
<%= host_community.name %> &copy; <%= Time.zone.now.year %>. All rights reserved.

0 commit comments

Comments
 (0)