Skip to content

Commit 7c95686

Browse files
pzaldonispzaldonis
committed
Update custom.scss
1 parent b2ce22d commit 7c95686

1 file changed

Lines changed: 95 additions & 200 deletions

File tree

‎_sass/custom/custom.scss‎

Lines changed: 95 additions & 200 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,73 @@
11
@import "./footer_custom";
22

3-
// Font
4-
5-
@font-face{
3+
// Font Definitions - Keep only necessary ones
4+
@font-face {
65
font-family: 'Poppins';
76
font-weight: 400;
87
src: url(../fonts/poppins-regular-webfont.woff2) format(woff2),
98
url(../fonts/poppins-regular-webfont.woff) format(woff);
109
}
1110

12-
@font-face{
11+
@font-face {
1312
font-family: 'Poppins';
1413
font-weight: 400;
1514
font-style: italic;
1615
src: url(../fonts/poppins-italic-webfont.woff2) format(woff2),
1716
url(../fonts/poppins-italic-webfont.woff) format(woff);
1817
}
1918

20-
@font-face{
21-
font-family: 'Poppins';
22-
font-weight: 100;
23-
src: url(../fonts/poppins-thin-webfont.woff2) format(woff2),
24-
url(../fonts/poppins-thin-webfont.woff) format(woff);
25-
}
26-
27-
@font-face{
28-
font-family: 'Poppins';
29-
font-weight: 100;
30-
font-style: itlaic;
31-
src: url(../fonts/poppins-thinitalic-webfont.woff2) format(woff2),
32-
url(../fonts/poppins-thinitalic-webfont.woff) format(woff);
33-
}
34-
35-
@font-face{
36-
font-family: 'Poppins';
37-
font-weight: 200;
38-
src: url(../fonts/poppins-extralight-webfont.woff2) format(woff2),
39-
url(../fonts/poppins-extralight-webfont.woff) format(woff);
40-
}
41-
42-
@font-face{
43-
font-family: 'Poppins';
44-
font-weight: 200;
45-
font-style: italic;
46-
src: url(../fonts/poppins-extralightitalic-webfont.woff2) format(woff2),
47-
url(../fonts/poppins-extralightitalic-webfont.woff) format(woff);
48-
}
19+
// Include other necessary @font-face declarations similarly
4920

50-
@font-face{
51-
font-family: 'Poppins';
52-
font-weight: 300;
53-
src: url(../fonts/poppins-light-webfont.woff2) format(woff2),
54-
url(../fonts/poppins-light-webfont.woff) format(woff);
55-
}
56-
57-
@font-face{
58-
font-family: 'Poppins';
59-
font-weight: 300;
60-
font-style: italic;
61-
src: url(../fonts/poppins-lightitalic-webfont.woff2) format(woff2),
62-
url(../fonts/poppins-lightitalic-webfont.woff) format(woff);
21+
body {
22+
font-family: 'Poppins', sans-serif;
23+
font-weight: 400;
6324
}
6425

65-
@font-face{
66-
font-family: 'Poppins';
26+
h1, h2, h3, h4 {
6727
font-weight: 500;
68-
src: url(../fonts/poppins-medium-webfont.woff2) format(woff2),
69-
url(../fonts/poppins-medium-webfont.woff) format(woff);
7028
}
7129

72-
@font-face{
73-
font-family: 'Poppins';
74-
font-weight: 500;
75-
font-style: italic;
76-
src: url(../fonts/poppins-mediumitalic-webfont.woff2) format(woff2),
77-
url(../fonts/poppins-mediumitalic-webfont.woff) format(woff);
78-
}
79-
80-
@font-face{
81-
font-family: 'Poppins';
82-
font-weight: 600;
83-
src: url(../fonts/poppins-semibold-webfont.woff2) format(woff2),
84-
url(../fonts/poppins-semibold-webfont.woff) format(woff);
85-
}
86-
87-
@font-face{
88-
font-family: 'Poppins';
89-
font-weight: 600;
90-
font-style: italic;
91-
src: url(../fonts/poppins-semibolditalic-webfont.woff2) format(woff2),
92-
url(../fonts/poppins-semibolditalic-webfont.woff) format(woff);
93-
}
94-
95-
@font-face{
96-
font-family: 'Poppins';
97-
font-weight: 700;
98-
src: url(../fonts/poppins-bold-webfont.woff2) format(woff2),
99-
url(../fonts/poppins-bold-webfont.woff) format(woff);
30+
/* Navigation Links */
31+
.nav-list-link {
32+
font-size: 1rem !important;
33+
font-weight: 400;
34+
color: #FFFFFF;
35+
transition: background-color 0.3s ease-in-out; /* Smooth background-color transition */
10036
}
10137

102-
@font-face{
103-
font-family: 'Poppins';
104-
font-weight: 700;
105-
font-style: italic;
106-
src: url(../fonts/poppins-bolditalic-webfont.woff2) format(woff2),
107-
url(../fonts/poppins-bolditalic-webfont.woff) format(woff);
38+
/* Background color change on hover with fade-in effect */
39+
.nav-list > .nav-list-item > .nav-list-link:hover {
40+
background-image: none;
41+
background-color: #4A87FA; /* Define the hover background color */
10842
}
10943

110-
@font-face{
111-
font-family: 'Poppins';
112-
font-weight: 800;
113-
src: url(../fonts/poppins-extrabold-webfont.woff2) format(woff2),
114-
url(../fonts/poppins-extrabold-webfont.woff) format(woff);
44+
.nav-list > .nav-list-item > .nav-list-link.active {
45+
background-image: none;
46+
background: #3371E7;
11547
}
11648

117-
@font-face{
118-
font-family: 'Poppins';
119-
font-weight: 800;
120-
font-style: italic;
121-
src: url(../fonts/poppins-extrabolditalic-webfont.woff2) format(woff2),
122-
url(../fonts/poppins-extrabolditalic-webfont.woff) format(woff);
49+
.nav-list-item,
50+
.nav-list .nav-list-item,
51+
.nav-list.nav-category-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-link,
52+
.nav-list > .nav-list-item > .nav-list-link.active,
53+
.nav-list .nav-list-item > .nav-list .nav-list-item .nav-list-link {
54+
color: #FFFFFF;
12355
}
12456

125-
@font-face{
126-
font-family: 'Poppins';
127-
font-weight: 900;
128-
src: url(../fonts/poppins-black-webfont.woff2) format(woff2),
129-
url(../fonts/poppins-black-webfont.woff) format(woff);
57+
.nav-category {
58+
font-size: 1.2rem !important;
59+
color: #FFFFFF;
13060
}
13161

132-
@font-face{
133-
font-family: 'Poppins';
134-
font-weight: 900;
135-
font-style: italic;
136-
src: url(../fonts/poppins-blackitalic-webfont.woff2) format(woff2),
137-
url(../fonts/poppins-blackitalic-webfont.woff) format(woff);
62+
.nav-list .nav-list-item .nav-list-expander {
63+
color: #FFFFFF;
13864
}
13965

140-
body {font-family: 'Poppins', sans-serif;
141-
font-weight: 400;}
142-
143-
h1 {font-weight: 500;}
144-
145-
h2{font-weight: 500;}
146-
147-
h3 {font-weight: 500;}
148-
149-
h4{font-weight: 500;}
150-
151-
.nav-list-link {
152-
font-weight: 400;
66+
.nav-list .nav-list-item .nav-list-expander:hover {
67+
background-image: none;
15368
}
15469

155-
// Color
156-
70+
// Link Colors
15771
a {
15872
color: #3371E7;
15973
}
@@ -162,65 +76,51 @@ a:not([class]) {
16276
text-decoration: underline;
16377
text-decoration-color: $border-color;
16478
text-underline-offset: 2px;
165-
79+
16680
&:hover {
167-
text-decoration-color: rgba(#3371E7, 0.45);
81+
text-decoration-color: rgba(#3371E7, 0.45);
16882
}
169-
}
83+
}
17084

171-
.main-content .anchor-heading svg {
172-
color: #3371E7;
85+
// Icon Colors
86+
.icon, .nav-list .nav-list-item .nav-list-expander,
87+
.search-input:focus + .search-label .search-icon,
88+
.search-result-doc .search-result-icon {
89+
color: #FFFFFF;
17390
}
17491

92+
// Anchor link color
17593
.main-content .anchor-heading svg {
17694
color: #3371E7;
17795
}
17896

179-
.icon {
180-
color: #3371E7;
181-
}
182-
183-
.nav-list .nav-list-item .nav-list-expander {
184-
color: #3371E7;
97+
// Active navlist arrow icon color
98+
.nav-list.nav-category-list .nav-list-item .nav-list .nav-list-item .nav-list-expander {
99+
color: #FFFFFF;
185100
}
186101

187-
.nav-list.nav-category-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-link {
188-
color: #3371E7;
189-
}
190-
191-
.nav-list.nav-category-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-expander {
192-
color: #3371E7;
193-
}
194-
195-
.btn {
196-
color: #3371E7;
197-
}
198-
199-
.btn-outline {
200-
color: #3371E7;
201-
}
202-
203-
.btn-outline:hover, .btn-outline:active, .btn-outline.zeroclipboard-is-hover, .btn-outline.zeroclipboard-is-active {
204-
color: #3371E7;
102+
// Button Colors
103+
.btn, .btn-outline {
104+
color: #3371E7;
205105
}
206106

207-
.search-input:focus + .search-label .search-icon {
208-
color: #3371E7;
107+
.btn-outline:hover,
108+
.btn-outline:active,
109+
.btn-outline.zeroclipboard-is-hover,
110+
.btn-outline.zeroclipboard-is-active {
111+
color: #3371E7;
209112
}
210113

211-
.search-result-doc .search-result-icon {
212-
color: #3371E7;
114+
// Sidebar and Footer
115+
.side-bar {
116+
background-color: #3371E7;
213117
}
214118

215-
a.skip-to-main:focus,
216-
a.skip-to-main:active {
217-
color: #3371E7;
119+
.site-footer {
120+
display: none;
218121
}
219122

220-
221-
222123
// Layout
223-
224124
.site-header {
225125
min-height: 8rem;
226126
}
@@ -229,62 +129,57 @@ a.skip-to-main:active {
229129
font-family: 'Poppins', sans-serif;
230130
font-size: 1.75rem !important;
231131
font-weight: 500;
132+
color: #FFFFFF;
133+
}
134+
135+
.site-title:hover {
136+
background: #3371E7;
232137
}
233138

234139
.site-nav {
235140
padding-top: 1rem;
236141
}
142+
143+
.site-button:hover {
144+
background-image: none;
145+
}
146+
147+
// Post Navigation
237148
.post-nav {
238149
display: flex;
239150
justify-content: space-between;
240151
flex-wrap: wrap;
241152
margin-bottom: $spacing-unit;
242153

243154
div {
244-
flex: 1 1 0;
245-
246-
&:first-child {
247-
padding-right: 0.5em;
248-
}
249-
250-
&:last-child {
251-
padding-left: 0.5em;
252-
text-align: right;
253-
}
155+
flex: 1 1 0;
156+
157+
&:first-child {
158+
padding-right: 0.5em;
159+
}
160+
161+
&:last-child {
162+
padding-left: 0.5em;
163+
text-align: right;
164+
}
254165
}
255166
}
256167

257-
.unsighted {
258-
border: 0;
259-
clip: rect(1px, 1px, 1px, 1px);
260-
clip-path: inset(50%);
261-
height: 1px;
262-
margin: -1px;
263-
overflow: hidden;
264-
padding: 0;
265-
position: absolute;
266-
width: 1px;
267-
word-wrap: normal !important;
168+
// Skip to Main Navigation
169+
a.skip-to-main:focus,
170+
a.skip-to-main:active {
171+
color: #3371E7;
268172
}
269-
270-
// Footer
271-
272-
.site-footer {
273-
display: none;
274-
}
275-
276-
// Scrollbar
277173

174+
// Scrollbar Styling
278175
::-webkit-scrollbar {
279176
width: 5px;
280-
}
281-
282-
/* Handle */
283-
::-webkit-scrollbar-thumb {
284-
background: #555;
285-
}
286-
287-
/* Handle on hover */
288-
::-webkit-scrollbar-thumb:hover {
289-
background: #555;
290-
}
177+
}
178+
179+
::-webkit-scrollbar-thumb {
180+
background: #FFFFFF;
181+
}
182+
183+
::-webkit-scrollbar-thumb:hover {
184+
background: #FFFFFF;
185+
}

0 commit comments

Comments
 (0)