Skip to content

Commit d2ebdb9

Browse files
kangashleykangashley
committed
Update showcase and featured project page structure, assets, styles
1 parent 337b852 commit d2ebdb9

27 files changed

+675
-435
lines changed

‎i18n-tracking.yml

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
es:
22
src/data/en.yml:
3+
line 516: ' showcase-intro3'
4+
line 517: ' showcase-featuring'
5+
line 518: ' project-tag-art'
6+
line 519: ' project-tag-design'
7+
line 520: ' project-tag-code'
8+
line 521: ' project-tag-curriculum'
9+
line 522: ' project-tag-documentation'
10+
line 523: ' project-tag-game'
11+
line 524: ' project-tag-library'
12+
line 525: ' project-tag-organizing'
13+
line 526: ' project-tag-tool'
14+
line 527: ' project-tag-tutorial'
15+
line 531: ' description-roni'
316
line 44: ' sketch_info_link'
417
line 358: ' p5.ble'
518
line 364: ' p5.createloop'
@@ -108,26 +121,35 @@ es:
108121
line 22: ' Showcase'
109122
line 23: ' test'
110123
line 515: ' showcase-title'
111-
line 516: ' showcase-intro1'
112-
line 517: ' showcase-intro2'
113-
line 518: ' showcase-intro3'
114-
line 519: ' project-roni'
115-
line 520: ' credit-roni'
116-
line 521: ' description-roni'
117-
line 522: ' project-phuong'
118-
line 523: ' credit-phuong'
119-
line 524: ' description-phuong'
120-
line 525: ' project-daein'
121-
line 526: ' credit-daein'
122-
line 527: ' description-daein'
123124
line 528: ' project-qianqian'
124125
line 529: ' credit-qianqian'
125126
line 530: ' description-qianqian'
126-
line 531: ' project-conchinha-lessel'
127127
line 532: ' credit-conchinha-lessel'
128128
line 533: ' description-conchinha-lessel'
129+
line 535: ' description-phuong'
130+
line 539: ' description-daein'
131+
line 546: ' description-qianqian'
132+
line 547: ' project-casey-louise'
133+
line 548: ' credit-casey-louise'
134+
line 549: ' description-casey-louise'
135+
line 550: ' project-moon-xin'
136+
line 551: ' credit-moon-xin'
137+
line 552: ' description-moon-xin'
129138
zh-Hans:
130139
src/data/en.yml:
140+
line 516: ' showcase-intro3'
141+
line 517: ' showcase-featuring'
142+
line 518: ' project-tag-art'
143+
line 519: ' project-tag-design'
144+
line 520: ' project-tag-code'
145+
line 521: ' project-tag-curriculum'
146+
line 522: ' project-tag-documentation'
147+
line 523: ' project-tag-game'
148+
line 524: ' project-tag-library'
149+
line 525: ' project-tag-organizing'
150+
line 526: ' project-tag-tool'
151+
line 527: ' project-tag-tutorial'
152+
line 531: ' description-roni'
131153
line 44: ' sketch_info_link'
132154
line 358: ' p5.ble'
133155
line 364: ' p5.createloop'
@@ -163,21 +185,17 @@ zh-Hans:
163185
line 22: ' Showcase'
164186
line 23: ' test'
165187
line 515: ' showcase-title'
166-
line 516: ' showcase-intro1'
167-
line 517: ' showcase-intro2'
168-
line 518: ' showcase-intro3'
169-
line 519: ' project-roni'
170-
line 520: ' credit-roni'
171-
line 521: ' description-roni'
172-
line 522: ' project-phuong'
173-
line 523: ' credit-phuong'
174-
line 524: ' description-phuong'
175-
line 525: ' project-daein'
176-
line 526: ' credit-daein'
177-
line 527: ' description-daein'
178188
line 528: ' project-qianqian'
179189
line 529: ' credit-qianqian'
180190
line 530: ' description-qianqian'
181-
line 531: ' project-conchinha-lessel'
182191
line 532: ' credit-conchinha-lessel'
183192
line 533: ' description-conchinha-lessel'
193+
line 535: ' description-phuong'
194+
line 539: ' description-daein'
195+
line 546: ' description-qianqian'
196+
line 547: ' project-casey-louise'
197+
line 548: ' credit-casey-louise'
198+
line 549: ' description-casey-louise'
199+
line 550: ' project-moon-xin'
200+
line 551: ' credit-moon-xin'
201+
line 552: ' description-moon-xin'

‎src/assets/css/main.css

Lines changed: 125 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1012,140 +1012,204 @@ ul.statement-list {
10121012
//////////////////////////////////////////////////
10131013
*/
10141014

1015-
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,900i|Fugaz+One:400&display=swap");
1015+
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,900i&display=swap');
10161016

1017-
#showcase-page section > h1 {
1018-
font: italic 900 5.5rem "Montserrat", sans-serif;
1019-
color: #ED225D;
1020-
text-transform: uppercase;
1021-
letter-spacing: 0.25rem;
1017+
#showcase-page .showcase-intro h1 {
1018+
font: italic 900 8vw "Montserrat", sans-serif;
1019+
color: #ED225D;
1020+
text-align: center;
1021+
text-transform: uppercase;
1022+
letter-spacing: 0.25rem;
1023+
}
1024+
1025+
#showcase-page .showcase-intro p {
1026+
font: 400 1.5rem "Montserrat", sans-serif;
1027+
line-height: 2;
10221028
}
10231029

1024-
#showcase-page section > h2 {
1025-
font: italic 900 2rem "Montserrat", sans-serif; /* 2.5rem */
1030+
#showcase-page .showcase-featured h2, #showcase-page .project-page h2{
1031+
font: italic 900 2rem "Montserrat", sans-serif;
10261032
color: #ED225D;
1033+
text-align: center;
10271034
letter-spacing: 0.05rem;
10281035
}
10291036

1030-
/*
1031-
#showcase-page img {
1032-
object-fit: cover;
1033-
object-position: center center;
1037+
#showcase-page ul.left-column, #showcase-page ul.right-column,
1038+
#showcase-page ul.project-tags, #showcase-page ul.links {
1039+
list-style: none;
10341040
}
1035-
*/
10361041

1037-
#showcase-page article.showcase-intro p {
1038-
font: 400 1.5rem "Montserrat", sans-serif;
1039-
line-height: 2.5rem;
1042+
#showcase-page img[alt] {
1043+
font-size: 0.9rem;
1044+
}
1045+
1046+
#showcase-page .showcase-featured {
1047+
margin-top: 15%;
10401048
}
10411049

1042-
#showcase-page article.featured h3 {
1050+
#showcase-page .showcase-featured h3.title {
10431051
font: italic 900 1rem "Montserrat", sans-serif;
10441052
}
10451053

1046-
#showcase-page article.featured a, a:visited {
1047-
font-size: 1.2rem;
1048-
color: #ED225D;
1049-
letter-spacing: 0.02rem;
1050-
line-height: 1.5;
1054+
#showcase-page .showcase-featured p.credit {
1055+
margin-top: 3%;
1056+
font: 500 1rem "Montserrat", sans-serif;
10511057
}
10521058

1053-
#showcase-page article.featured a::after {
1054-
content: " →";
1059+
#showcase-page .showcase-featured p.description {
1060+
margin-top: 9%;
1061+
font-size: 1rem;
10551062
}
10561063

1057-
#showcase-page article.link-decoration {
1064+
#showcase-page .link-decoration {
10581065
margin: 24px 0;
10591066
text-align: center;
10601067
}
10611068

1062-
#showcase-page article.link-decoration a, a:visited {
1069+
#showcase-page .link-decoration a, #showcase-page .link-decoration a:visited {
10631070
padding: 10px 10px;
10641071
border: solid #ED225D 2px;
1065-
box-shadow: 4px 4px 0 #ED225D;
1072+
box-shadow: 4px 4px 0 #ED225D;
1073+
10661074
font: 1.5rem "Montserrat", sans-serif;
10671075
color: #ED225D;
10681076
letter-spacing: 0.02rem;
10691077
}
10701078

1071-
/*
1072-
#showcase-page article.featured p {
1073-
font: ;
1079+
#showcase-page .showcase-featured a, #showcase-page .showcase-featured a:visited {
1080+
font-size: 1.2rem;
1081+
color: #ED225D;
1082+
letter-spacing: 0.02rem;
1083+
line-height: 1.5;
1084+
}
1085+
1086+
#showcase-page .showcase-featured a::after {
1087+
content: " →";
1088+
}
1089+
1090+
#showcase-page ul.project-tags {
1091+
display: -webkit-box;
1092+
display: -webkit-flex;
1093+
display: flex;
1094+
-webkit-flex-wrap: wrap;
1095+
flex-wrap: wrap;
1096+
margin-top: -3%;
1097+
}
1098+
1099+
#showcase-page ul.project-tags li {
1100+
margin: 5px;
1101+
}
1102+
1103+
#showcase-page .tag {
1104+
display: inline-block;
1105+
padding: 6px 14px;
1106+
border: dashed #7FDBCA;
1107+
border-radius: 27px;
1108+
1109+
font: 0.7rem "Montserrat", sans-serif;
1110+
color: #333;
10741111
}
1112+
1113+
/*
1114+
//////////////////////////////////////////////////
1115+
SHOWCASE - FEATURED PROJECT PAGE
1116+
//////////////////////////////////////////////////
10751117
*/
10761118

1119+
/* Link style for mobile and tablet screens (no :hover state) */
10771120
/*
1078-
@media only screen and (max-width: 991.98px){
1079-
#showcase-page article.featured a, a:visited {
1080-
text-decoration: underline dotted #ED225D;
1121+
@media (max-width: 991.98px){
1122+
#showcase-page .project-page a, #showcase-page .project-page a:visited {
1123+
color:#ED225D;
1124+
text-decoration: none;
1125+
padding-bottom: 0.11em;
1126+
border-bottom: 0.11em dashed;
1127+
border-bottom-color: #ED225D;
1128+
transition: border-bottom 30ms linear;
10811129
}
10821130
}
10831131
*/
10841132

1085-
#showcase-page section.project-showcased h2 {
1133+
#showcase-page .project-page h2 {
10861134
text-align: center;
10871135
line-height: 1.4;
10881136
}
10891137

1090-
#showcase-page section.project-showcased h3 {
1091-
font: 500 1rem "Montserrat", sans-serif; /* 1.2rem */
1092-
letter-spacing: 0.01rem; /* 0.02rem */
1093-
line-height: 1.5;
1138+
/* Visually hidden headings to delineate project page sections */
1139+
#showcase-page .project-resources h3#resources, #showcase-page .project-qa h3#qa {
1140+
position: absolute;
1141+
left: -10000px;
1142+
width: 1px;
1143+
height: 1px;
1144+
overflow: hidden;
10941145
}
10951146

1096-
#showcase-page article.project-info {
1147+
#showcase-page .project-info, #showcase-page .project-resources, #showcase-page .project-credit {
10971148
text-align: center;
10981149
}
10991150

1100-
#showcase-page article.project-info p {
1101-
font: 1rem "Montserrat", sans-serif;
1151+
#showcase-page article.project-resources {
1152+
display: flex;
1153+
margin-top: 3%;
1154+
}
1155+
1156+
#showcase-page .project-resources ul.links {
1157+
display: inline-grid;
1158+
grid-auto-flow: row;
1159+
grid-gap: 3vw;
1160+
justify-items: center;
1161+
margin: auto;
1162+
1163+
font: 500 .7rem "Montserrat", sans-serif;
11021164
letter-spacing: 0.01rem;
1103-
line-height: 1.7;
1165+
line-height: 1.5;
11041166
}
11051167

1106-
#showcase-page .tag-highlighted {
1107-
padding: 0.4rem 0.9rem; /* 0.5rem 0.8rem / 0.125rem 0.5rem; */
1108-
background-color: #7FDBCA;
1109-
border-radius: 0.9rem; /* 0.3rem */
1110-
color: #333;
1168+
@media (min-width: 480px){
1169+
#showcase-page .project-resources ul.links {
1170+
grid-auto-flow: column;
1171+
}
11111172
}
11121173

1113-
/*
1114-
#showcase-page .code-snippet {
1115-
1174+
#showcase ul.links li {
1175+
grid-column: 1 / 2;
1176+
grid-row: 1 / 2;
11161177
}
1117-
*/
11181178

1119-
#showcase-page article.project-credit {
1120-
text-align: center;
1179+
#showcase-page .project-credit h3, #showcase-page .project-qa h3 {
1180+
font: 500 1rem "Montserrat", sans-serif;
1181+
letter-spacing: 0.01rem;
1182+
line-height: 1.5;
1183+
}
1184+
1185+
#showcase-page .project-credit h3#creator {
1186+
font: italic 900 1.7rem "Montserrat", sans-serif;
1187+
letter-spacing: .05rem;
11211188
}
11221189

11231190
#showcase-page sup.note {
11241191
font-size: 0.7rem;
11251192
letter-spacing: 0.04rem;
11261193
}
11271194

1128-
#showcase-page article.project-credit h2 {
1129-
font: italic 900 2rem "Montserrat", sans-serif;
1130-
letter-spacing: .05rem;
1131-
/* color: #0042E6; */
1132-
}
1133-
1134-
#showcase-page article.project-qa {
1195+
#showcase-page .project-qa {
11351196
width: 90%;
11361197
float: right;
11371198
}
11381199

11391200
#showcase-page .project-qa h3 {
11401201
margin-left: 0%;
1141-
/* transform: rotate(-3deg); */
11421202
}
11431203

11441204
#showcase-page .project-qa p {
11451205
float: left;
11461206
margin-left: 20%;
11471207
}
11481208

1209+
#showcase-page .project-qa code {
1210+
font-size: 1.1rem;
1211+
}
1212+
11491213

11501214
/* ==========================================================================
11511215
Chrome Frame prompt

‎src/assets/img/showcase/casey-louise/casey-louise_p5js-shaders.png

228 KB
Loading

‎src/assets/img/showcase/conchinha-lessel/conchinha-lessel_p5js-shaders.png

-202 KB
Binary file not shown.

‎src/assets/img/showcase/daein-chung/daein-chung_chillin-demo.mp4

-21.1 MB
Binary file not shown.

‎src/assets/img/showcase/daein-chung/daein-chung_chillin.jpg

-223 KB
Binary file not shown.

‎src/assets/img/showcase/daein-chung/daein-chung_chillin.png

1.16 MB
Loading

‎src/assets/img/showcase/moon-xin/moon-xin_poster-carlee.png

46.4 KB
Loading

‎src/assets/img/showcase/phuong-ngo/phuong-ngo_airi-flies-1.png

-243 KB
Binary file not shown.

‎src/assets/img/showcase/phuong-ngo/phuong-ngo_airi-flies.png

267 KB
Loading

0 commit comments

Comments
 (0)