Skip to content

Commit 08cde5f

Browse files
aburnimaburnim
committed
fix: remove masthead border-bottom, modernize nav styling
1 parent 064b72a commit 08cde5f

1 file changed

Lines changed: 83 additions & 86 deletions

File tree

‎assets/css/main.scss‎

Lines changed: 83 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
---
22
---
33

4-
@import "minimal-mistakes"; // theme — leave at the very top
4+
@import "minimal-mistakes";
55

6-
/* ==== your overrides go BELOW ==== */
6+
/* ==== OVERRIDES ==== */
77
html, body {
8-
background:#ffffff; // canvas = white
8+
background: #ffffff;
9+
}
10+
11+
/* ── Navigation Bar ── */
12+
.masthead {
13+
position: sticky;
14+
top: 0;
15+
z-index: 1000;
16+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
17+
background: linear-gradient(to bottom, #e35821 0%, #c94a1a 100%) !important;
918
}
10-
//.page,
11-
//.post,
12-
//.archive,
13-
//.page__inner-wrap {
14-
// background:transparent !important; // inherit white from <body>
15-
// box-shadow:none !important; // remove drop-shadow edge
16-
//}
1719

18-
.masthead,
1920
.greedy-nav,
2021
.hidden-links {
21-
background:#e35821 !important; /* orange nav the theme used */
22+
background: transparent !important;
2223
}
2324

24-
/* ─── Masthead text colour override ───────────────────────────── */
2525
.masthead,
2626
.greedy-nav,
2727
.masthead a,
@@ -32,114 +32,111 @@ html, body {
3232
.greedy-nav .navicon,
3333
.masthead svg,
3434
.greedy-nav svg {
35-
color:#ffffff !important; /* text & icons */
36-
fill:#ffffff !important; /* SVG paths */
35+
color: #ffffff !important;
36+
fill: #ffffff !important;
37+
}
38+
39+
.site-title {
40+
font-size: 1.25rem !important;
41+
font-weight: 700 !important;
42+
letter-spacing: 0.02em;
43+
}
44+
45+
.greedy-nav a {
46+
transition: transform 0.2s ease, font-weight 0.2s ease, color 0.2s ease;
3747
}
3848

39-
/* optional: keep hover still white (otherwise it reverts to grey on hover) */
40-
.masthead a:hover,
4149
.greedy-nav a:hover {
42-
color:#ffffff !important;
50+
text-decoration: none !important;
51+
border-bottom: none !important;
52+
font-weight: 700 !important;
53+
transform: scale(1.05);
54+
color: #1e3a5f !important;
4355
}
4456

45-
/* ── Members page: two-column card layout ──────────────────────── */
57+
.greedy-nav a::after,
58+
.greedy-nav a::before {
59+
display: none !important;
60+
}
61+
62+
/* ── Hero ── */
63+
.page__hero--overlay {
64+
margin-top: 0;
65+
}
4666

67+
/* ── Members Page ── */
4768
.members-layout {
48-
display:flex; flex-wrap:wrap; gap:3rem;
69+
display: grid;
70+
grid-template-columns: repeat(2, 1fr);
71+
gap: 2rem;
72+
align-items: stretch;
4973
}
5074

51-
.left-col, .right-col { /* each column */
52-
flex:1 1 320px;
53-
display:flex; flex-direction:column; gap:2rem;
75+
.members-layout h2 {
76+
margin-bottom: 0.5rem;
5477
}
5578

56-
/* keep existing card & avatar rules … */
57-
.card-column { display:flex; flex-direction:column; gap:1rem; }
79+
.left-col,
80+
.right-col,
81+
.card-column {
82+
display: contents;
83+
}
5884

5985
.member-card {
6086
display: flex;
6187
align-items: center;
6288
gap: 1rem;
6389
padding: 1.25rem 1.5rem;
64-
border-radius: .75rem;
65-
66-
/* new pale-blue fill + matching border */
67-
background: #e6f7ff;
68-
border: 1px solid #b3dbff;
69-
70-
/* optional: soft shadow under the blue card */
71-
box-shadow: 0 2px 4px rgba(0, 95, 184, 0.08);
90+
border-radius: 0.75rem;
91+
background: #f6faff;
92+
border: 1px solid #e6e4dd;
93+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
94+
height: 100%;
7295
}
7396

74-
.avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; }
75-
.info { line-height:1.3; } .name { font-weight:600; }
76-
.title { font-size:.875rem; color:#605f5b; }
77-
7897
img.avatar {
7998
width: 90px !important;
8099
height: 90px !important;
81100
border-radius: 50% !important;
82101
object-fit: cover !important;
83-
display: block; /* eliminate inline‐img quirks */
84-
flex-shrink: 0; /* avoid flexbox resizing */
102+
display: block;
103+
flex-shrink: 0;
85104
}
86105

87-
/* Mobile: stack columns */
88-
@media (max-width: 768px) {
89-
.members-layout { flex-direction:column; }
90-
}
106+
.info { line-height: 1.3; }
107+
.name { font-weight: 600; }
108+
.title { font-size: 0.875rem; color: #605f5b; }
109+
.group-heading { margin: 0 0 0.5rem; }
91110

92-
/* ── snug up group headings & cards ── */
93-
.members-layout h2 {
94-
margin-bottom: 0.5rem; /* shrink space below the h2 */
95-
}
96-
.card-column {
97-
margin-top: 0; /* eliminate any extra top-margin */
98-
}
99-
/* existing card styling */
100-
.member-card { /* unchanged */
101-
display: flex; align-items: center; gap: 1rem;
102-
padding: 1rem 1.25rem;
103-
border: 1px solid #e6e4dd;
104-
border-radius: .5rem;
105-
background: #fff;
111+
@media (max-width: 768px) {
112+
.members-layout {
113+
grid-template-columns: 1fr;
114+
}
106115
}
107-
.avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; }
108-
.info { line-height:1.3; }
109-
.name { font-weight:600; }
110-
.title { font-size:.875rem; color:#605f5b; }
111116

112-
/* Bigger avatars & roomier cards */
113-
.member-card { padding: 1.25rem 1.5rem; border-radius: .75rem; }
114117

115-
.avatar { width: 90px; height: 90px; }
116-
117-
/* Give each card a subtle fill & shadow (optional) */
118-
.member-card { background:#f6faff; box-shadow:0 1px 3px rgba(0,0,0,.06); }
118+
/* ── Remove white gap between nav and hero ── */
119+
.initial-content {
120+
margin-top: 0;
121+
padding-top: 0;
122+
}
119123

120-
/* Make group headings line up nicely with cards */
121-
.group-heading { margin: 0 0 .5rem; }
124+
.page__hero--overlay {
125+
margin-top: 0;
126+
padding-top: 3rem;
127+
}
122128

123-
/* ── Equal height cards (CSS-only fix) ── */
124-
.left-col,
125-
.right-col,
126-
.card-column {
127-
display: contents;
129+
/* ── Force gradient on masthead (higher specificity) ── */
130+
body .masthead {
131+
background: linear-gradient(to bottom, #e35821 0%, #c94a1a 100%) !important;
128132
}
129133

130-
.members-layout {
131-
display: grid;
132-
grid-template-columns: repeat(2, 1fr);
133-
gap: 2rem;
134-
align-items: stretch;
134+
body .masthead .greedy-nav,
135+
body .masthead .hidden-links {
136+
background: transparent !important;
135137
}
136138

137-
.member-card {
138-
height: 100%;
139+
.masthead {
140+
border-bottom: none !important;
139141
}
140142

141-
@media (max-width: 768px) {
142-
.members-layout {
143-
grid-template-columns: 1fr;
144-
}
145-
}

0 commit comments

Comments
 (0)