Skip to content

Commit 3023bbb

Browse files
RuilliFengRuilliFeng
committed
a major update for team page
1 parent e56876f commit 3023bbb

27 files changed

Lines changed: 2593 additions & 946 deletions

‎assets/css/matrix-polish.css‎

Lines changed: 1337 additions & 0 deletions
Large diffs are not rendered by default.

‎assets/css/style.css‎

Lines changed: 158 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,40 @@ transition: all 0.35s ease 0s;
143143
.header-text p {
144144
margin-bottom:30px;
145145
}
146+
.featured-project-panel {
147+
float: none;
148+
margin-left: auto;
149+
margin-right: auto;
150+
max-width: 1120px;
151+
width: 100%;
152+
}
153+
.featured-project-media {
154+
align-items: center;
155+
background: rgba(7, 18, 27, 0.78);
156+
border: 1px solid rgba(181, 224, 238, 0.28);
157+
border-radius: 8px;
158+
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
159+
display: flex;
160+
justify-content: center;
161+
margin: -6px auto 26px;
162+
max-width: 760px;
163+
overflow: hidden;
164+
width: min(74%, 820px);
165+
}
166+
.featured-project-media picture,
167+
.featured-project-media img {
168+
background: #f8fafc;
169+
display: block;
170+
height: auto;
171+
width: 100%;
172+
}
173+
.featured-project-media img {
174+
height: auto;
175+
width: 100%;
176+
}
177+
.featured-project-media img[data-src] {
178+
opacity: 0.72;
179+
}
146180
.header-text h2 span {
147181
color: darkblue;
148182
}
@@ -920,22 +954,28 @@ blockquote {
920954
}
921955
/*----------- project index ------------*/
922956
.project-index-section {
923-
background: #f7fbff;
957+
background: #f5f7f9;
958+
border-top: 1px solid #e1e7ec;
924959
color: #18232f;
925960
overflow: hidden;
926-
padding: 100px 0;
961+
padding: 92px 0 108px;
927962
}
928963
.project-index-section .title {
929-
padding-bottom: 40px;
964+
padding-bottom: 42px;
930965
}
931966
.project-index-section .title h2 {
932-
color: #111;
967+
color: #101820;
968+
font-size: 33px;
969+
font-weight: 700;
970+
line-height: 1.15;
971+
margin-bottom: 12px;
933972
}
934973
.project-index-section .title p {
935-
color: #4b5968;
974+
color: #4d5b67;
936975
font-size: 16px;
937-
margin: 0 auto;
938-
max-width: 760px;
976+
line-height: 1.65;
977+
margin: 0 auto 8px;
978+
max-width: 620px;
939979
}
940980
.project-index-section code {
941981
background: rgba(0, 161, 255, 0.1);
@@ -944,16 +984,21 @@ blockquote {
944984
padding: 2px 5px;
945985
}
946986
.project-index-updated {
947-
color: #6d7b89;
987+
background: #ffffff;
988+
border: 1px solid #dce4ea;
989+
border-radius: 3px;
990+
color: #5e6b76;
948991
display: inline-block;
949992
font-size: 12px;
950-
letter-spacing: 0.04em;
951-
margin-top: 12px;
993+
font-weight: 600;
994+
letter-spacing: 0;
995+
margin-top: 10px;
996+
padding: 4px 9px;
952997
text-transform: uppercase;
953998
}
954999
.project-index-grid {
9551000
display: grid;
956-
gap: 24px;
1001+
gap: 26px;
9571002
grid-template-columns: repeat(3, minmax(0, 1fr));
9581003
padding: 0 15px;
9591004
}
@@ -970,101 +1015,152 @@ blockquote {
9701015
}
9711016
.project-card {
9721017
background: #fff;
973-
border: 1px solid #dbe6ef;
1018+
border: 1px solid #d8e0e6;
9741019
border-radius: 8px;
975-
box-shadow: 0 18px 45px rgba(15, 42, 67, 0.08);
1020+
box-shadow: 0 10px 28px rgba(20, 38, 52, 0.07);
9761021
min-height: 100%;
9771022
overflow: hidden;
978-
transition: all 0.25s ease;
1023+
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
9791024
}
9801025
.project-card:hover {
981-
border-color: #7bbfe7;
982-
box-shadow: 0 22px 55px rgba(0, 91, 143, 0.16);
1026+
border-color: #9ab4c4;
1027+
box-shadow: 0 16px 36px rgba(20, 38, 52, 0.12);
9831028
transform: translateY(-3px);
9841029
}
9851030
.project-card a,
9861031
.project-card a:hover,
9871032
.project-card a:focus {
9881033
color: inherit;
989-
display: block;
1034+
display: flex;
1035+
flex-direction: column;
9901036
min-height: 100%;
9911037
text-decoration: none;
9921038
}
9931039
.project-card-media {
9941040
align-items: center;
995-
background: #dce8f1;
1041+
background: #eef3f6;
1042+
border-bottom: 1px solid #e4ebf0;
9961043
display: flex;
997-
height: 170px;
1044+
height: 180px;
9981045
justify-content: center;
9991046
overflow: hidden;
10001047
}
1048+
.project-card-media picture,
10011049
.project-card-media img {
1002-
background: #f7faf8;
1050+
background: #f8fafc;
10031051
height: 100%;
10041052
object-fit: contain;
10051053
width: 100%;
10061054
}
1055+
.project-card-media picture {
1056+
display: block;
1057+
}
1058+
.project-card-media picture img {
1059+
display: block;
1060+
}
10071061
.project-card-fallback {
10081062
background: linear-gradient(135deg, #10364b 0%, #277a6f 55%, #e1a241 100%);
10091063
}
10101064
.project-card-fallback span {
10111065
color: #fff;
10121066
font-size: 44px;
10131067
font-weight: 700;
1014-
letter-spacing: 0.08em;
1068+
letter-spacing: 0;
10151069
}
10161070
.project-card-body {
1017-
padding: 24px;
1071+
display: flex;
1072+
flex: 1;
1073+
flex-direction: column;
1074+
padding: 23px 23px 21px;
10181075
}
10191076
.project-card-meta {
1020-
align-items: center;
1021-
color: #6b7a88;
1077+
align-items: flex-start;
1078+
color: #667481;
10221079
display: flex;
10231080
font-size: 12px;
1081+
gap: 10px;
10241082
justify-content: space-between;
1025-
letter-spacing: 0.04em;
1026-
margin-bottom: 12px;
1083+
letter-spacing: 0;
1084+
line-height: 1.45;
1085+
margin-bottom: 14px;
10271086
text-transform: uppercase;
10281087
}
1088+
.project-slug {
1089+
font-weight: 700;
1090+
min-width: 0;
1091+
overflow-wrap: anywhere;
1092+
}
1093+
.project-card-badges {
1094+
display: flex;
1095+
flex-wrap: wrap;
1096+
gap: 6px;
1097+
justify-content: flex-end;
1098+
}
10291099
.project-status {
1030-
background: #eef7f3;
1031-
border: 1px solid #cfe9de;
1100+
background: #eef7f2;
1101+
border: 1px solid #d2e6da;
10321102
border-radius: 3px;
1033-
color: #277a5d;
1103+
color: #2a6b55;
1104+
font-weight: 700;
10341105
padding: 2px 7px;
1106+
white-space: nowrap;
1107+
}
1108+
.project-date {
1109+
background: #f7f9fb;
1110+
border: 1px solid #dce4ea;
1111+
border-radius: 3px;
1112+
color: #596673;
1113+
font-weight: 700;
1114+
padding: 2px 7px;
1115+
white-space: nowrap;
10351116
}
10361117
.project-card h3 {
10371118
color: #101820;
1038-
font-size: 20px;
1119+
font-size: 19px;
10391120
font-weight: 700;
1040-
line-height: 1.35;
1121+
line-height: 1.38;
10411122
margin: 0 0 12px;
1123+
overflow-wrap: anywhere;
10421124
}
10431125
.project-card p {
1044-
color: #4a5866;
1126+
color: #46535f;
10451127
font-size: 14px;
10461128
line-height: 1.7;
1047-
margin: 0 0 18px;
1129+
margin: 0 0 20px;
1130+
}
1131+
.project-card-footer {
1132+
border-top: 1px solid #edf1f4;
1133+
margin-top: auto;
1134+
padding-top: 16px;
10481135
}
10491136
.project-tags {
10501137
display: flex;
10511138
flex-wrap: wrap;
10521139
gap: 8px;
1053-
margin-bottom: 18px;
1140+
margin-bottom: 16px;
10541141
}
10551142
.project-tags span {
1056-
background: #f5f0e6;
1057-
border: 1px solid #e4d8c4;
1143+
background: #f7f4ed;
1144+
border: 1px solid #e3dac8;
10581145
border-radius: 3px;
1059-
color: #7b5a20;
1146+
color: #65512d;
10601147
font-size: 12px;
1148+
line-height: 1.4;
10611149
padding: 3px 8px;
10621150
}
10631151
.project-card-link {
1064-
color: #0076b6;
1065-
display: inline-block;
1152+
align-items: center;
1153+
color: #1f6687;
1154+
display: inline-flex;
10661155
font-size: 14px;
10671156
font-weight: 700;
1157+
gap: 5px;
1158+
}
1159+
.project-card-link i {
1160+
transition: transform 0.2s ease;
1161+
}
1162+
.project-card:hover .project-card-link i {
1163+
transform: translateX(3px);
10681164
}
10691165
/*----------- contact ------------*/
10701166
#contact
@@ -1230,6 +1326,7 @@ width:50%;
12301326
{
12311327
.project-index-grid {
12321328
grid-template-columns: repeat(2, minmax(0, 1fr));
1329+
gap: 24px;
12331330
}
12341331
#about img {
12351332
left: 0;
@@ -1273,13 +1370,33 @@ width:50%;
12731370
@media (max-width:640px)
12741371
{
12751372
.project-index-section {
1276-
padding: 70px 0;
1373+
padding: 72px 0 84px;
1374+
}
1375+
.project-index-section .title {
1376+
padding-bottom: 32px;
1377+
}
1378+
.project-index-section .title h2 {
1379+
font-size: 28px;
1380+
}
1381+
.project-index-section .title p {
1382+
font-size: 15px;
12771383
}
12781384
.project-index-grid {
12791385
grid-template-columns: 1fr;
1386+
padding: 0 10px;
12801387
}
12811388
.project-card-media {
1282-
height: 150px;
1389+
height: 168px;
1390+
}
1391+
.project-card-body {
1392+
padding: 21px 20px 20px;
1393+
}
1394+
.project-card-meta {
1395+
align-items: flex-start;
1396+
gap: 8px;
1397+
}
1398+
.project-card h3 {
1399+
font-size: 18px;
12831400
}
12841401
.for-box-crecl {
12851402
left: 43%;

0 commit comments

Comments
 (0)