Skip to content

Commit 13fddfe

Browse files
Zeeshan-2k1Zeeshan-2k1
committed
Splited Sass into smaller files
1 parent b027754 commit 13fddfe

13 files changed

+605
-595
lines changed

‎webpack/sass/authorPost-page.scss

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Author Post page
2+
.author-posts {
3+
.header {
4+
.container {
5+
.image {
6+
width: 9.5rem;
7+
height: 9.5rem;
8+
}
9+
10+
.about {
11+
@extend .body-big;
12+
@extend .padding-top-big;
13+
14+
line-height: 1.8125;
15+
}
16+
17+
.button {
18+
@extend .margin-top-bigger;
19+
}
20+
}
21+
}
22+
23+
.posts {
24+
@extend .padding-top-xl;
25+
@extend .padding-bottom-xxl;
26+
}
27+
}
28+

‎webpack/sass/authors-page.scss

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// All Authors page
2+
.all-authors {
3+
.authors-list {
4+
@extend .padding-bottom-xxl;
5+
6+
background-color: $color-lighter-gray;
7+
.container {
8+
@extend .padding-horizontal-big;
9+
}
10+
}
11+
12+
.author {
13+
@extend .padding-big;
14+
15+
.image {
16+
height: 3.75rem;
17+
width: 3.75rem;
18+
}
19+
20+
.mobile {
21+
display: none;
22+
}
23+
24+
.desktop {
25+
display: inline;
26+
}
27+
28+
@media only screen and (max-width: 768px) {
29+
.mobile {
30+
display: inline;
31+
}
32+
.desktop {
33+
display: none;
34+
}
35+
}
36+
37+
.author-name {
38+
@extend .padding-top-small;
39+
40+
.link {
41+
@extend .has-color-dark-slate-gray;
42+
}
43+
}
44+
}
45+
}
46+

‎webpack/sass/blog-page.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Blog page
2+
.blog-page {
3+
.blog-page-posts {
4+
@extend .padding-top-normal;
5+
6+
.pagination-wrapper {
7+
@extend .padding-top-normal;
8+
@extend .padding-bottom-xxl;
9+
}
10+
}
11+
}

‎webpack/sass/categories-page.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Categories page
2+
.all-categories {
3+
.categories-list {
4+
@extend .padding-horizontal-big;
5+
@extend .padding-top-xl;
6+
@extend .padding-bottom-xxl;
7+
}
8+
}
9+

‎webpack/sass/ccSearch.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// CC Search Roadmap
2+
.cc-search-roadmap {
3+
.body {
4+
@extend .padding-horizontal-big;
5+
@extend .padding-top-xl;
6+
@extend .padding-bottom-xxl;
7+
}
8+
}

‎webpack/sass/guidelines.scss

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Guidelines page
2+
.code-guidelines {
3+
.code-guidelines-body {
4+
@extend .padding-horizontal-big;
5+
6+
.link {
7+
@extend .has-color-forest-green;
8+
}
9+
.is-active {
10+
@extend .has-color-dark-slate-gray;
11+
}
12+
13+
.row {
14+
@extend .padding-top-larger;
15+
}
16+
17+
.content {
18+
@extend .padding-bottom-xxl;
19+
@extend .padding-top-xl;
20+
}
21+
}
22+
}
23+

‎webpack/sass/home-page.scss

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
// Hero section - Home page
2+
.hero {
3+
@extend .margin-top-large;
4+
5+
.hero-title {
6+
@extend .padding-horizontal-big;
7+
}
8+
9+
.hero-description {
10+
@extend .body-bigger;
11+
@extend .padding-top-big;
12+
@extend .padding-horizontal-big;
13+
}
14+
15+
.hero-links {
16+
@extend .margin-vertical-normal;
17+
@extend .padding-horizontal-big;
18+
19+
.button {
20+
@extend .margin-top-normal;
21+
text-decoration: none;
22+
23+
.icon {
24+
@extend .margin-right-small;
25+
@extend .padding-vertical-smaller;
26+
}
27+
}
28+
}
29+
30+
.hero-image {
31+
@include from($fullhd) {
32+
margin-top: -20rem;
33+
.image {
34+
width: 50%;
35+
}
36+
}
37+
@include until($fullhd) {
38+
.image {
39+
width: 100%;
40+
}
41+
}
42+
}
43+
}
44+
45+
// Get-involved section - Home page
46+
.get-involved {
47+
background-color: $color-lighter-gray;
48+
@extend .has-color-dark-slate-gray;
49+
border-bottom: solid 0.1875rem $color-white;
50+
51+
.container {
52+
@extend .padding-horizontal-big;
53+
@extend .padding-vertical-xxl;
54+
}
55+
56+
.get-involved-description {
57+
@extend .body-bigger;
58+
@extend .padding-top-normal;
59+
}
60+
61+
.get-involved-links {
62+
@extend .padding-top-xl;
63+
64+
.heading {
65+
@extend .b-header;
66+
@extend .padding-top-bigger;
67+
}
68+
69+
.list {
70+
@extend .padding-top-normal;
71+
72+
.link-heading {
73+
@extend .b-header;
74+
@extend .padding-top-big;
75+
76+
:hover {
77+
@extend .has-color-forest-green;
78+
}
79+
}
80+
81+
.link-caption {
82+
@extend .body-normal;
83+
@extend .padding-top-smaller;
84+
}
85+
86+
}
87+
}
88+
}
89+
90+
// Recent-posts section - Home page
91+
.recent-posts {
92+
background-color: rgba(4, 166, 53, 0.1);
93+
94+
.container {
95+
@extend .padding-vertical-xl;
96+
@extend .padding-horizontal-big;
97+
98+
.columns {
99+
@extend .padding-top-bigger;
100+
@extend .padding-bottom-xl;
101+
}
102+
}
103+
104+
.blog-title {
105+
@extend .has-color-dark-slate-gray;
106+
}
107+
108+
.posts-link {
109+
@extend .has-color-forest-green;
110+
@extend .body-normal;
111+
112+
font-weight: bold;
113+
line-height: 1.5;
114+
text-decoration: none;
115+
116+
.icon {
117+
@extend .has-color-forest-green;
118+
@extend .padding-left-small;
119+
}
120+
}
121+
}
122+
123+
// Featured-projects section - Home page
124+
.featured-projects {
125+
@extend .padding-vertical-xxl;
126+
127+
.container {
128+
@extend .padding-horizontal-big;
129+
}
130+
131+
.project-page-link {
132+
@extend .has-color-forest-green;
133+
@extend .body-normal;
134+
135+
line-height: 1.5rem;
136+
font-weight: bold;
137+
text-decoration: none;
138+
139+
.icon {
140+
@extend .padding-left-small;
141+
@extend .padding-top-smaller;
142+
}
143+
}
144+
145+
.project-list {
146+
@extend .padding-top-bigger;
147+
@extend .padding-bottom-larger;
148+
149+
.column {
150+
@extend .padding-right-larger;
151+
@extend .padding-bottom-larger;
152+
153+
height: 100%;
154+
}
155+
}
156+
}
157+
158+
.blog-entries {
159+
.column {
160+
border-bottom: 0.1875rem solid $color-light-gray;
161+
}
162+
/* last row, irrespective of the number of elements */
163+
.column:nth-last-child(-n + 3):nth-child(3n + 1), /* first element of the last row */
164+
.column:nth-last-child(-n + 3):nth-child(3n + 1) ~ .column /* all its following elements */
165+
{
166+
border-bottom: none;
167+
}
168+
169+
.blog-entry {
170+
@extend .padding-vertical-larger;
171+
@extend .padding-horizontal-big;
172+
173+
.blog-title {
174+
@extend .has-color-dark-slate-gray;
175+
}
176+
}
177+
}

0 commit comments

Comments
 (0)