Skip to content

Commit 382a652

Browse files
hugosolarhugosolar
committed
hub-page styles & refactoring hub-page
1 parent 24c2091 commit 382a652

File tree

5 files changed

+237
-229
lines changed

5 files changed

+237
-229
lines changed

‎frontend-build/scss/modules.scss

+91
Original file line numberDiff line numberDiff line change
@@ -107,4 +107,95 @@
107107
text-decoration: none;
108108
}
109109
}
110+
}
111+
112+
.hub-grid {
113+
.hub-grid-block {
114+
position: relative;
115+
padding: 20px 32px 55px 140px;
116+
color: #111;
117+
h3 {
118+
margin-bottom: 15px;
119+
font-size: 2.2rem;
120+
letter-spacing: -1px;
121+
text-transform: uppercase;
122+
font-family: $font-alt;
123+
}
124+
p {
125+
font-size: 0.9rem;
126+
margin-bottom: 15px;
127+
a {
128+
color: $black;
129+
}
130+
}
131+
.hub-grid-block-svg {
132+
width: 100px;
133+
min-height: 100px;
134+
position: absolute;
135+
top: 20px;
136+
left: 20px;
137+
}
138+
&:hover {
139+
color: $white;
140+
svg {
141+
.icon-path {
142+
fill: #ffffff;
143+
}
144+
}
145+
a {
146+
color: $white;
147+
}
148+
}
149+
150+
&:first-child {
151+
&:hover {
152+
background: $success-color;
153+
}
154+
}
155+
&:nth-child(2) {
156+
&:hover {
157+
background: $alert-color;
158+
}
159+
}
160+
&:nth-child(3) {
161+
&:hover {
162+
background: $secondary-color;
163+
}
164+
}
165+
&:nth-child(4) {
166+
&:hover {
167+
background: $alert-color;
168+
}
169+
}
170+
&:nth-child(5) {
171+
&:hover {
172+
background: $secondary-color;
173+
}
174+
}
175+
&:nth-child(6) {
176+
&:hover {
177+
background: $success-color;
178+
}
179+
}
180+
}
181+
}
182+
.hub-quote-block {
183+
width: 100%;
184+
padding: 30px;
185+
clear: both;
186+
background: $primary-color;
187+
color: $black;
188+
.hub-quote-content {
189+
max-width: 700px;
190+
margin: 0 auto;
191+
h2 {
192+
font-size: 1.8em;
193+
margin-bottom: 13px;
194+
font-weight: bold;
195+
}
196+
p {
197+
font-size: 0.8em;
198+
font-style: italic;
199+
}
200+
}
110201
}

‎frontend-build/scss/style.scss

+9-1
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,16 @@
4141

4242
.item-acordion {
4343
h2 {
44-
padding: .8rem 0;
44+
padding: .8rem .5rem;
4545
border-bottom: 1px solid $light-gray;
46+
font-size: 1.3rem;
47+
cursor: pointer;
48+
&:hover {
49+
background-color: lighten($light-gray,6);
50+
}
51+
}
52+
.item-content {
53+
font-size: .9rem;
4654
}
4755
}
4856
}

‎themes/cc-commoners/assets/css/style.css

+65-2
Original file line numberDiff line numberDiff line change
@@ -3774,8 +3774,14 @@ a.thumbnail {
37743774
font-size: 1.3rem;
37753775
font-weight: bold; }
37763776
.page-body .entry-content .post-content .item-acordion h2 {
3777-
padding: .8rem 0;
3778-
border-bottom: 1px solid #e6e6e6; }
3777+
padding: .8rem .5rem;
3778+
border-bottom: 1px solid #e6e6e6;
3779+
font-size: 1.3rem;
3780+
cursor: pointer; }
3781+
.page-body .entry-content .post-content .item-acordion h2:hover {
3782+
background-color: whitesmoke; }
3783+
.page-body .entry-content .post-content .item-acordion .item-content {
3784+
font-size: .9rem; }
37793785

37803786
.home .page-body {
37813787
padding-top: 8.9rem; }
@@ -3938,3 +3944,60 @@ a.thumbnail {
39383944
color: #35bbd8; }
39393945
.members-meta a:hover {
39403946
text-decoration: none; }
3947+
3948+
.hub-grid .hub-grid-block {
3949+
position: relative;
3950+
padding: 20px 32px 55px 140px;
3951+
color: #111; }
3952+
.hub-grid .hub-grid-block h3 {
3953+
margin-bottom: 15px;
3954+
font-size: 2.2rem;
3955+
letter-spacing: -1px;
3956+
text-transform: uppercase;
3957+
font-family: "Roboto Condensed", sans-serif; }
3958+
.hub-grid .hub-grid-block p {
3959+
font-size: 0.9rem;
3960+
margin-bottom: 15px; }
3961+
.hub-grid .hub-grid-block p a {
3962+
color: #0a0a0a; }
3963+
.hub-grid .hub-grid-block .hub-grid-block-svg {
3964+
width: 100px;
3965+
min-height: 100px;
3966+
position: absolute;
3967+
top: 20px;
3968+
left: 20px; }
3969+
.hub-grid .hub-grid-block:hover {
3970+
color: #fefefe; }
3971+
.hub-grid .hub-grid-block:hover svg .icon-path {
3972+
fill: #ffffff; }
3973+
.hub-grid .hub-grid-block:hover a {
3974+
color: #fefefe; }
3975+
.hub-grid .hub-grid-block:first-child:hover {
3976+
background: #27a635; }
3977+
.hub-grid .hub-grid-block:nth-child(2):hover {
3978+
background: #f46b2c; }
3979+
.hub-grid .hub-grid-block:nth-child(3):hover {
3980+
background: #35bbd8; }
3981+
.hub-grid .hub-grid-block:nth-child(4):hover {
3982+
background: #f46b2c; }
3983+
.hub-grid .hub-grid-block:nth-child(5):hover {
3984+
background: #35bbd8; }
3985+
.hub-grid .hub-grid-block:nth-child(6):hover {
3986+
background: #27a635; }
3987+
3988+
.hub-quote-block {
3989+
width: 100%;
3990+
padding: 30px;
3991+
clear: both;
3992+
background: #efbe01;
3993+
color: #0a0a0a; }
3994+
.hub-quote-block .hub-quote-content {
3995+
max-width: 700px;
3996+
margin: 0 auto; }
3997+
.hub-quote-block .hub-quote-content h2 {
3998+
font-size: 1.8em;
3999+
margin-bottom: 13px;
4000+
font-weight: bold; }
4001+
.hub-quote-block .hub-quote-content p {
4002+
font-size: 0.8em;
4003+
font-style: italic; }

0 commit comments

Comments
 (0)