Skip to content

Commit 742a0f0

Browse files
soulaimaneyahyasoulaimaneyahya
authored
Merge pull request #5 from multividas/FEATURE1
fixing-header-main-footer-css
2 parents ea8546a + e46c397 commit 742a0f0

File tree

10 files changed

+126
-40
lines changed

10 files changed

+126
-40
lines changed

‎docs/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1+
header.css
2+
footer.css
13
main.css

‎docs/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727
<meta name="theme-color" content="#0f4c81" />
2828

2929
<!-- styles css -->
30+
<link rel="stylesheet" href="./[email protected]" />
31+
<link rel="stylesheet" href="./[email protected]" />
3032
<link rel="stylesheet" href="./[email protected]" />
3133
</head>
3234

@@ -143,9 +145,34 @@ <h3 class="footer__section-title">Support</h3>
143145
</ul>
144146
</div>
145147
</div>
148+
149+
<div class="footer__conditions_container">
150+
<ul class="footer__conditions_list">
151+
<li class="footer__copy_item">
152+
<a href="#">&copy; <span id="currentYear"></span> Multividas</a>
153+
</li>
154+
</ul>
155+
156+
<ul class="footer__conditions_list">
157+
<li class="footer__conditions_item">
158+
<a href="https://multividas.com/terms-of-use" target="_blank">Terms of use</a>
159+
</li>
160+
<li class="footer__conditions_item">
161+
<a href="https://multividas.com/privacy-policy" target="_blank">Privacy Policy</a>
162+
</li>
163+
<li class="footer__conditions_item">
164+
<a href="https://multividas.com/data-privacy-compliance" target="_blank">Data Privacy and Compliance</a>
165+
</li>
166+
<li class="footer__conditions_item">
167+
<a href="https://multividas.com/cookies" target="_blank">Cookies</a>
168+
</li>
169+
</ul>
170+
</div>
146171
</footer>
147172

148173
<script type="text/javascript" defer>
174+
document.getElementById("currentYear").textContent = new Date().getFullYear()
175+
149176
const toggleMenu = () => {
150177
document.querySelectorAll('.header-nav').forEach(list => {
151178
list.classList.toggle('show');

‎docs/[email protected]‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/[email protected]‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/[email protected]‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,38 @@ const headerComment = `/**
1717
*/\n`
1818

1919
const compileSass = async () => {
20-
try {
21-
const result = await sass.compileAsync(
22-
path.join(__dirname, 'src/scss/main.scss')
23-
)
20+
try {
21+
const sassFiles = [
22+
{ src: 'src/scss/_header.scss', dest: 'docs/header.css' },
23+
{ src: 'src/scss/_footer.scss', dest: 'docs/footer.css' },
24+
{ src: 'src/scss/main.scss', dest: 'docs/main.css' }
25+
]
2426

25-
fs.writeFileSync(path.join(__dirname, 'docs/main.css'), result.css)
26-
console.log('Sass compiled successfully.')
27-
} catch (error) {
28-
console.error('Sass compilation error:', error)
29-
}
27+
for (const file of sassFiles) {
28+
const result = await sass.compileAsync(path.join(__dirname, file.src))
29+
fs.writeFileSync(path.join(__dirname, file.dest), result.css)
30+
}
31+
32+
console.log('Sass compiled successfully.')
33+
} catch (error) {
34+
console.error('Sass compilation error:', error)
35+
}
3036
}
3137

3238
const buildComponentStyles = () => {
33-
return gulp.src('./docs/main.css')
34-
.pipe(cleanCSS({ compatibility: 'ie8' }))
35-
.pipe(rename('[email protected]'))
36-
.pipe(header(headerComment))
37-
.pipe(gulp.dest('./docs/'))
38-
}
39+
const cssFiles = [
40+
{ src: './docs/header.css', rename: '[email protected]' },
41+
{ src: './docs/footer.css', rename: '[email protected]' },
42+
{ src: './docs/main.css', rename: '[email protected]' }
43+
]
3944

40-
const watchSass = () => {
41-
gulp.watch('./src/scss/**/*.scss', compileSass)
45+
return cssFiles.map(file =>
46+
gulp.src(file.src)
47+
.pipe(cleanCSS({ compatibility: 'ie8' }))
48+
.pipe(rename(file.rename))
49+
.pipe(header(headerComment))
50+
.pipe(gulp.dest('./docs/'))
51+
)
4252
}
4353

4454
exports.build = gulp.series(compileSass, buildComponentStyles)
45-
exports.watch = gulp.series(watchSass)

src/scss/layout/_footer.scss renamed to src/scss/_footer.scss

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
@use "../abstracts/variables";
2-
@use "grid";
1+
@use "./abstracts/variables";
2+
@use "./layout/grid";
33

44
// Footer Styles
55
footer {
6-
background-color: #f1f1f1; // Consider using a variable if needed
7-
color: variables.$secondary-text-color;
8-
padding: 40px 0;
6+
color: variables.$text-color-5;
7+
background-color: variables.$footer-background-color;
98

109
.footer__container {
1110
@extend .container !optional;
11+
padding: 40px 20px;
1212
}
1313

1414
.footer__section {
@@ -19,7 +19,7 @@ footer {
1919
font-weight: bold;
2020
font-size: 1.2em;
2121
margin-bottom: 20px;
22-
color: variables.$secondary-text-color;
22+
color: #344854;
2323
}
2424

2525
.footer__list {
@@ -30,15 +30,43 @@ footer {
3030

3131
.footer__item {
3232
a {
33-
color: #222; // Consider using a variable if needed
33+
color: #222222;
3434
font-size: 14px;
3535
font-weight: 500;
3636
margin-bottom: 5px;
3737
cursor: pointer;
3838
transition: color 0.2s ease-in-out;
3939

4040
&:hover {
41-
color: variables.$secondary-text-color;
41+
color: #3f3f3f;
42+
}
43+
}
44+
}
45+
46+
.footer__conditions_container {
47+
max-width: variables.$container-max-width;
48+
margin: 0 auto;
49+
padding: variables.$base-padding variables.$base-padding;
50+
51+
ul.footer__conditions_list {
52+
display: flex;
53+
justify-content: flex-start;
54+
align-items: center;
55+
list-style: none;
56+
gap: 20px;
57+
padding: 0;
58+
margin: 0;
59+
60+
li.footer__copy_item a, li.footer__conditions_item a {
61+
color: #222222;
62+
font-size: 14px;
63+
font-weight: 500;
64+
cursor: pointer;
65+
transition: color 0.2s ease-in-out;
66+
67+
&:hover {
68+
color: #3f3f3f;
69+
}
4270
}
4371
}
4472
}
@@ -49,7 +77,7 @@ footer {
4977
.footer__container {
5078
margin: 0;
5179
padding: 0;
52-
max-width: 1000px; // Adjust as needed
80+
max-width: 1000px;
5381
}
5482

5583
.footer__section {

src/scss/layout/_header.scss renamed to src/scss/_header.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
@use "../abstracts/variables";
1+
@use "./abstracts/variables";
22

33
// Header Styles
44
.header {
5-
background-color: variables.$background-color;
5+
background-color: variables.$header-background-color;
66

77
&__container {
88
padding: 0 !important;
@@ -34,7 +34,7 @@
3434
transition: background-color 0.2s ease;
3535

3636
a {
37-
color: variables.$primary-text-color;
37+
color: variables.$text-color-2;
3838
font-weight: 600;
3939
font-size: 15px;
4040

‎src/scss/abstracts/_variables.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
// Colors
2-
$primary-text-color: #333;
3-
$secondary-text-color: #555;
2+
$text-color-2: #222;
3+
$text-color-5: #555;
44
$background-color: #f9f9f9;
55

6+
$header-background-color: #f6f8fb;
7+
$footer-background-color: #f1f4f8;
8+
69
// Fonts
710
$base-font-family: "Arial", sans-serif;
811
$heading-font-family: "Helvetica", sans-serif;

‎src/scss/main.scss‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,11 @@
22
@use "./base/reset";
33
@use "./abstracts/variables";
44
@use "./abstracts/mixins";
5-
6-
@use "./layout/header";
75
@use "./layout/grid";
8-
@use "./layout/footer";
96

107
// Main CSS
118
body {
12-
color: variables.$primary-text-color;
9+
color: variables.$text-color-2;
1310
background-color: variables.$background-color;
1411
padding: 0;
1512
margin: 0;
@@ -35,17 +32,17 @@ main {
3532
}
3633

3734
h1 {
38-
color: variables.$primary-text-color;
35+
color: variables.$text-color-2;
3936
font-size: 2em;
4037
}
4138

4239
h2 {
43-
color: variables.$primary-text-color;
40+
color: variables.$text-color-2;
4441
font-size: 1.5em;
4542
}
4643

4744
p {
48-
color: variables.$secondary-text-color;
45+
color: variables.$text-color-5;
4946
font-size: 1em;
5047
}
5148

0 commit comments

Comments
 (0)