Skip to content

Commit ba9f363

Browse files
thomasthaddeusthomasthaddeus
authored
Merge pull request #4 from Visionary-Code-Works/test
Test
2 parents 26ea55a + ab84124 commit ba9f363

14 files changed

Lines changed: 565 additions & 219 deletions

‎_sass/_base.scss‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,52 +2,54 @@
22

33
// Body
44
body {
5-
font-family: 'Helvetica Neue', Arial, sans-serif;
6-
font-size: 16px;
7-
line-height: 1.6;
8-
color: #333;
9-
background-color: #fff;
5+
font-family: $fontFamily; // Using variable from _variables.scss
6+
font-size: $baseFontSize; // Using variable from _variables.scss
7+
line-height: 1.5;
8+
color: $textColor; // Using variable from _variables.scss
9+
background-color: $backgroundColor; // Using variable from _variables.scss
10+
}
11+
12+
// Links
13+
a {
14+
color: $linkColor; // Updated to use $linkColor from _variables.scss
15+
text-decoration: none;
16+
17+
&:hover {
18+
color: $linkHoverColor; // Updated to use $linkHoverColor from _variables.scss
19+
text-decoration: underline;
1020
}
11-
12-
// Headings
13-
h1, h2, h3, h4, h5, h6 {
14-
color: #333;
15-
margin-top: 1.5rem;
16-
margin-bottom: 1rem;
17-
}
18-
19-
h1 { font-size: 2.5rem; }
20-
h2 { font-size: 2rem; }
21-
h3 { font-size: 1.75rem; }
22-
h4 { font-size: 1.5rem; }
23-
h5 { font-size: 1.25rem; }
24-
h6 { font-size: 1rem; }
25-
26-
// Paragraphs
27-
p {
28-
margin-top: 0;
29-
margin-bottom: 1rem;
30-
}
31-
32-
// Links
33-
a {
34-
color: #007bff;
35-
text-decoration: none;
36-
37-
&:hover {
38-
text-decoration: underline;
39-
}
40-
}
41-
42-
// Lists
43-
ul, ol {
44-
padding-left: 2rem;
45-
margin-top: 0;
46-
margin-bottom: 1rem;
47-
}
48-
49-
li {
50-
margin-bottom: 0.5rem;
51-
}
52-
53-
// Additional base styles as needed...
21+
}
22+
23+
// Headings
24+
h1, h2, h3, h4, h5, h6 {
25+
color: $darkColor; // Using variable from _variables.scss
26+
margin-top: 1.5rem;
27+
margin-bottom: 1rem;
28+
font-family: $headingFontFamily; // Using variable from _variables.scss
29+
}
30+
31+
h1 { font-size: 2.5rem; }
32+
h2 { font-size: 2rem; }
33+
h3 { font-size: 1.75rem; }
34+
h4 { font-size: 1.5rem; }
35+
h5 { font-size: 1.25rem; }
36+
h6 { font-size: 1rem; }
37+
38+
// Paragraphs
39+
p {
40+
margin-top: 0;
41+
margin-bottom: 1rem;
42+
}
43+
44+
// Lists
45+
ul, ol {
46+
padding-left: 2rem;
47+
margin-top: 0;
48+
margin-bottom: 1rem;
49+
}
50+
51+
li {
52+
margin-bottom: 0.5rem;
53+
}
54+
55+
// Additional base styles as needed...

‎_sass/_footer.scss‎

Lines changed: 52 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,64 @@
11
// _footer.scss
22

33
.footer {
4-
background-color: $footerBgColor; // Variable from _variables.scss
5-
color: $footerTextColor;
6-
padding: 2rem 0;
7-
8-
.footer-links {
9-
a {
10-
color: $footerLinkColor;
11-
&:hover {
12-
color: darken($footerLinkColor, 15%);
13-
}
4+
background-color: $footerBgColor; // Variable from _variables.scss
5+
color: $footerTextColor;
6+
padding: 2rem;
7+
font-size: 0.9rem;
8+
9+
.footer-container {
10+
display: flex;
11+
justify-content: space-between;
12+
align-items: center;
13+
flex-wrap: wrap;
14+
15+
@media (max-width: $breakpoint-md) {
16+
flex-direction: column;
17+
align-items: flex-start;
1418
}
19+
}
20+
21+
.footer-links {
22+
list-style: none;
23+
padding: 0;
1524

16-
// List styles, if footer links are in list format
1725
li {
18-
margin-bottom: 0.5rem;
26+
margin-bottom: 0.5rem;
27+
28+
a {
29+
color: $footerLinkColor;
30+
text-decoration: none;
31+
32+
&:hover {
33+
color: darken($footerLinkColor, 10%);
34+
text-decoration: underline;
35+
}
36+
}
1937
}
20-
}
38+
}
39+
40+
.social-links {
41+
display: flex;
42+
align-items: center;
2143

22-
// Additional styling for other footer elements
23-
.social-links {
2444
i {
25-
color: #fff;
26-
margin-right: 10px;
45+
color: $footerTextColor;
46+
margin-right: 15px;
47+
font-size: 1.2rem;
48+
49+
&:hover {
50+
color: $primaryColor; // From _variables.scss
51+
}
52+
}
53+
}
54+
55+
.footer-credits {
56+
margin-top: 1rem;
57+
text-align: center;
58+
width: 100%;
2759

28-
&:hover {
29-
color: $primaryColor; // From _variables.scss
30-
}
60+
p {
61+
margin-bottom: 0;
3162
}
32-
}
3363
}
64+
}

‎_sass/_header.scss‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,42 @@
11
// _header.scss
22

33
.header {
4-
background-color: $headerBgColor; // Variable from _variables.scss
5-
padding: 1rem 0;
4+
background-color: $headerBgColor; // Variable from _variables.scss
5+
padding: 1rem 0;
6+
border-bottom: 1px solid $lightGray; // Adds a bottom border to the header
67

7-
.branding {
8+
.branding {
89
a {
9-
color: $headerTextColor;
10-
font-size: 1.5rem;
11-
font-weight: bold;
12-
text-decoration: none;
10+
color: $headerTextColor;
11+
font-size: 1.5rem;
12+
font-weight: bold;
13+
text-decoration: none;
14+
15+
&:hover {
16+
color: darken($headerTextColor, 10%);
17+
}
1318
}
14-
}
19+
}
20+
21+
.navigation {
22+
display: flex;
23+
justify-content: flex-end; // Aligns navigation items to the right
24+
list-style: none; // Removes list styling
25+
margin: 0; // Removes default margin
1526

16-
.navigation {
17-
// Navigation styles...
18-
}
27+
li {
28+
margin-left: 20px; // Spacing between navigation items
29+
30+
a {
31+
color: $textColor;
32+
text-decoration: none;
33+
font-weight: normal;
34+
35+
&:hover {
36+
color: $primaryColor;
37+
text-decoration: underline;
38+
}
39+
}
40+
}
1941
}
42+
}

‎_sass/_mixins.scss‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// _mixins.scss
22

3-
// _mixins.scss
4-
53
// Mixin for Flexbox Centering
64
@mixin flex-center {
75
display: flex;
@@ -30,17 +28,38 @@
3028
}
3129
}
3230

31+
// Mixin for Box Shadow
3332
@mixin box-shadow($shadow) {
3433
-webkit-box-shadow: $shadow;
3534
-moz-box-shadow: $shadow;
3635
box-shadow: $shadow;
3736
}
3837

39-
@mixin transition($property, $duration, $timing-function) {
40-
-webkit-transition: $property $duration $timing-function;
41-
-moz-transition: $property $duration $timing-function;
42-
-o-transition: $property $duration $timing-function;
43-
transition: $property $duration $timing-function;
44-
}
38+
// Mixin for CSS Transitions
39+
@mixin transition($property, $duration, $timing-function) {
40+
-webkit-transition: $property $duration $timing-function;
41+
-moz-transition: $property $duration $timing-function;
42+
-o-transition: $property $duration $timing-function;
43+
transition: $property $duration $timing-function;
44+
}
45+
46+
// Mixin for Border Radius
47+
@mixin border-radius($radius) {
48+
-webkit-border-radius: $radius;
49+
-moz-border-radius: $radius;
50+
border-radius: $radius;
51+
}
52+
53+
// Mixin for Text Truncate
54+
@mixin text-truncate {
55+
overflow: hidden;
56+
white-space: nowrap;
57+
text-overflow: ellipsis;
58+
}
59+
60+
// Mixin for Background Gradient
61+
@mixin background-gradient($startColor, $endColor) {
62+
background: linear-gradient(to right, $startColor, $endColor);
63+
}
4564

46-
// More mixins as needed...
65+
// More mixins as needed...

‎_sass/_responsive.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// _responsive.scss
2+
3+
// Small devices (landscape phones, less than 768px)
4+
@media (max-width: $breakpoint-sm) {
5+
.navbar {
6+
// Custom styles for mobile nav
7+
}
8+
9+
.hero-section {
10+
padding: 2rem 1rem;
11+
}
12+
}
13+
14+
// Medium devices (tablets, 768px and up)
15+
@media (min-width: $breakpoint-md) {
16+
.sidebar {
17+
// Styles for sidebar on tablet
18+
}
19+
}
20+
21+
// Large devices (desktops, 992px and up)
22+
@media (min-width: $breakpoint-lg) {
23+
.gallery-item {
24+
// Styles for gallery items on desktop
25+
}
26+
}
27+
28+
// Extra large devices (large desktops, 1200px and up)
29+
@media (min-width: $breakpoint-xl) {
30+
.container {
31+
max-width: 1140px;
32+
}
33+
}

0 commit comments

Comments
 (0)