From 4eebbc6b4a3f285882751023b5bd0c217c27c24a Mon Sep 17 00:00:00 2001 From: Abrumz <160103made@apps.ipb.ac.id> Date: Sun, 10 Sep 2023 17:50:41 +0700 Subject: [PATCH 1/5] added achievements-pages.scss --- src/styles/achivements-pages.scss | 224 ++++++++++++++++++++++++++++++ 1 file changed, 224 insertions(+) create mode 100644 src/styles/achivements-pages.scss diff --git a/src/styles/achivements-pages.scss b/src/styles/achivements-pages.scss new file mode 100644 index 0000000..ad47373 --- /dev/null +++ b/src/styles/achivements-pages.scss @@ -0,0 +1,224 @@ +.card-achievements-container { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin: 0 auto; +} + +.card-achievements-before { + z-index: 1; +} + +.card-achievements-before, .card-achievements-after { + width: 293.998px; + height: 321.077px; + margin: 10px; + padding-bottom: 0px; + flex-direction: column; + border-radius: 120px 24px 24px 8px; + border: 10px solid var(--Grad-C, #BED4FF); + background: #FFF; + margin: 10px; + position: absolute; + backface-visibility: hidden; +} + +.card-achievements-after{ + background: #FFF; + transform: rotateY(180deg); + display: flex; + flex-direction: column; +} + +.card-achievements-title { + color: var(--cool-gray-90, #21272A); + text-align: center; + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; + margin-bottom: 15px; +} + +.card-achievements-text-2 { + text-align: center; + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; + background: var(--Grad-A, linear-gradient(90deg, #0F18ED 0%, #E70FEB 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-bottom: 15px; + transition: background-color 0.3s ease; + cursor: pointer; +} + +.card-achievements-text-3 { + align-self: stretch; + color: var(--cool-gray-90, #21272A); + text-align: center; + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-bottom: 15px; +} + +.cover-member { + justify-content: space-between; + align-items: center; + overflow: scroll; +} + +.member { + display: flex; + justify-content: space-between; + align-items: center; + margin-left: 20px; + margin-bottom: 20px; + margin-right: 20px; +} + +.card-achievements-member { + color: #000; + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: normal; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 18ch; +} + +.button { + display: flex; + width: 53.924px; + height: 15.717px; + padding: 3.317px 6.634px; + justify-content: center; + align-items: center; + border-radius: 13.268px; + background: var(--primary-p-200, #383FF0); + gap: 6.634px; + color: #fff; + text-decoration: none; + font-family: Plus Jakarta Sans; + font-size: 8px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.card-achievements-image { + display: flex; + height: 170.21px; + justify-content: center; + align-items: center; + gap: 7.737px; + flex-shrink: 0; + align-self: stretch; + border-radius: 110px 12px 0px 0px; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + margin-bottom: 20px; +} + +.container-achievements { + width: 350px; + height: 400px; + perspective: 800px; +} + +.container-achievements:hover > .card-achievements { + cursor: pointer; + transform: rotateY(180deg); +} + +.card-achievements { + height: 100%; + width: 100%; + position: relative; + transition: transform 1500ms; + + transform-style: preserve-3d; +} + +@media screen and (max-width: 768px) { + .card-container-achievements { + justify-content: center; + } +} + +@media screen and (max-width: 480px) { + .card-container-achievements { + justify-content: center; + } + .card-achievements { + width: 100%; + } +} + +/* ---------------- */ + +.filter-container { + display: flex; + gap: 10px; + padding-left: 37px; + padding-top: 80px; + padding-bottom: 80px; + height: auto; + align-items: center; + flex-wrap: wrap; + } + + +.filter-label { + color: #000; + font-family: Plus Jakarta Sans; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: normal; + +} + +#filter-year, #filter-community{ + display: flex; + margin: 0 auto; + width: 160px; + height: auto; + gap: 10px; + flex-shrink: 0; + border-radius: 10px; + background: #FFF; + padding-top: 10px; + padding-bottom: 10px; + box-shadow: 0 0 10px rgba(0, 168, 255, 0.7); + font-family: Plus Jakarta Sans; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; + text-align: center; +} + +.filter-label { + margin-right: 10px; +} + +.filter-select { + display: flex; + align-items: center; + gap: 10px; + text-align: center; + flex-wrap: wrap; +} From feccfd61f6df11053707ba998d3edd8583b2c3bf Mon Sep 17 00:00:00 2001 From: Abrumz <160103made@apps.ipb.ac.id> Date: Sun, 10 Sep 2023 17:52:15 +0700 Subject: [PATCH 2/5] add achievements page --- src/pages/achievements.astro | 334 +++++++++++++++++++++++++++++++++++ 1 file changed, 334 insertions(+) diff --git a/src/pages/achievements.astro b/src/pages/achievements.astro index e69de29..ac0fefb 100644 --- a/src/pages/achievements.astro +++ b/src/pages/achievements.astro @@ -0,0 +1,334 @@ +--- +import dropdown_icon from '../assets/icons/achievement-drop-down.svg'; +import '../styles/achivements-pages.scss'; +import Layout from '../layouts/Layout.astro'; +--- + + +
+
Filter by:
+
+ + + +
+
+ + + +
+
+
+
+
+
2nd winner
+
Nama Tim/Solo
+
Kategori Lomba
+
+
+
+
+
+
Made Althaaf Naufal Gusendra
+ LinkedIn +
+ +
+
Aljay
+ LinkedIn +
+ +
+
Amm diketu
+ LinkedIn +
+ +
+
Kotop
+ LinkedIn +
+ +
+
Kotop
+ LinkedIn +
+ +
+
Made Althaaf Naufal Gusendra
+ LinkedIn +
+ +
+
+
+
+ +
+
+
+
+
2nd winner
+
Nama Tim/Solo
+
Kategori Lomba
+
+
+
+
+
+
Made Althaaf Naufal Gusendra
+ LinkedIn +
+ +
+
Aljay
+ LinkedIn +
+ +
+
Amm diketu
+ LinkedIn +
+ +
+
Kotop
+ LinkedIn +
+ +
+
Kotop
+ LinkedIn +
+ +
+
Made Althaaf Naufal Gusendra
+ LinkedIn +
+ +
+
+
+
+ +
+
+
+
+
2nd winner
+
Nama Tim/Solo
+
Kategori Lomba
+
+
+
+
+
+
Made Althaaf Naufal Gusendra
+ LinkedIn +
+ +
+
Aljay
+ LinkedIn +
+ +
+
Amm diketu
+ LinkedIn +
+ +
+
Kotop
+ LinkedIn +
+ +
+
Kotop
+ LinkedIn +
+ +
+
Made Althaaf Naufal Gusendra
+ LinkedIn +
+ +
+
+
+
+ +
+
+
+
+
2nd winner
+
Nama Tim/Solo
+
Kategori Lomba
+
+
+
+
+
+
Made Althaaf Naufal Gusendra
+ LinkedIn +
+ +
+
Aljay
+ LinkedIn +
+ +
+
Amm diketu
+ LinkedIn +
+ +
+
Kotop
+ LinkedIn +
+ +
+
Kotop
+ LinkedIn +
+ +
+
Made Althaaf Naufal Gusendra
+ LinkedIn +
+ +
+
+
+
+ +
+
+
+
+
2nd winner
+
Nama Tim/Solo
+
Kategori Lomba
+
+
+
+
+
+
Made Althaaf Naufal Gusendra
+ LinkedIn +
+ +
+
Aljay
+ LinkedIn +
+ +
+
Amm diketu
+ LinkedIn +
+ +
+
Kotop
+ LinkedIn +
+ +
+
Kotop
+ LinkedIn +
+ +
+
Made Althaaf Naufal Gusendra
+ LinkedIn +
+ +
+
+
+
+ + + +
+ + + + From be33a994f066d3aef1f48b16d02119be52ac4dbc Mon Sep 17 00:00:00 2001 From: Abrumz <160103made@apps.ipb.ac.id> Date: Sun, 10 Sep 2023 17:59:48 +0700 Subject: [PATCH 3/5] remove dropdown icon --- src/pages/achievements.astro | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/pages/achievements.astro b/src/pages/achievements.astro index ac0fefb..1312c6f 100644 --- a/src/pages/achievements.astro +++ b/src/pages/achievements.astro @@ -1,5 +1,4 @@ --- -import dropdown_icon from '../assets/icons/achievement-drop-down.svg'; import '../styles/achivements-pages.scss'; import Layout from '../layouts/Layout.astro'; --- @@ -40,7 +39,7 @@ import Layout from '../layouts/Layout.astro';
2nd winner
-
Nama Tim/Solo
+
Nama Tim/Solo
Kategori Lomba
@@ -86,7 +85,7 @@ import Layout from '../layouts/Layout.astro';
2nd winner
-
Nama Tim/Solo
+
Nama Tim/Solo
Kategori Lomba
@@ -132,7 +131,7 @@ import Layout from '../layouts/Layout.astro';
2nd winner
-
Nama Tim/Solo
+
Nama Tim/Solo
Kategori Lomba
@@ -178,7 +177,7 @@ import Layout from '../layouts/Layout.astro';
2nd winner
-
Nama Tim/Solo
+
Nama Tim/Solo
Kategori Lomba
@@ -224,7 +223,7 @@ import Layout from '../layouts/Layout.astro';
2nd winner
-
Nama Tim/Solo
+
Nama Tim/Solo
Kategori Lomba
From f229632eef4079d9e4a0f079e0431778f4883f4e Mon Sep 17 00:00:00 2001 From: Abrumz <160103made@apps.ipb.ac.id> Date: Tue, 12 Sep 2023 23:31:59 +0700 Subject: [PATCH 4/5] Fixed the Firefox flip card issue. --- src/pages/achievements.astro | 28 +++++++++++------------ src/styles/achivements-pages.scss | 37 ++++++++++++++++++++++++------- 2 files changed, 43 insertions(+), 22 deletions(-) diff --git a/src/pages/achievements.astro b/src/pages/achievements.astro index 1312c6f..29d608d 100644 --- a/src/pages/achievements.astro +++ b/src/pages/achievements.astro @@ -9,24 +9,24 @@ import Layout from '../layouts/Layout.astro';
diff --git a/src/styles/achivements-pages.scss b/src/styles/achivements-pages.scss index ad47373..4f47d51 100644 --- a/src/styles/achivements-pages.scss +++ b/src/styles/achivements-pages.scss @@ -5,11 +5,9 @@ margin: 0 auto; } -.card-achievements-before { - z-index: 1; -} -.card-achievements-before, .card-achievements-after { + +.card-achievements-before { width: 293.998px; height: 321.077px; margin: 10px; @@ -21,15 +19,29 @@ margin: 10px; position: absolute; backface-visibility: hidden; + -moz-backface-visibility: hidden; } -.card-achievements-after{ +.card-achievements-after { + width: 293.998px; + height: 321.077px; + margin: 10px; + padding-bottom: 0px; + flex-direction: column; + border-radius: 120px 24px 24px 8px; + border: 10px solid var(--Grad-C, #BED4FF); background: #FFF; - transform: rotateY(180deg); - display: flex; - flex-direction: column; + margin: 10px; + position: absolute; + backface-visibility: hidden; + transform: rotateY(180deg); + display: flex; + flex-direction: column; + } + + .card-achievements-title { color: var(--cool-gray-90, #21272A); text-align: center; @@ -130,6 +142,8 @@ background-repeat: no-repeat; background-position: center; margin-bottom: 20px; + -webkit-backface-visibility: hidden; /* Safari */ + backface-visibility: hidden; } .container-achievements { @@ -222,3 +236,10 @@ text-align: center; flex-wrap: wrap; } + +.filter-text { + font-weight: 500; + text-align: center; + align-items: center; + align-content: center; +} \ No newline at end of file From 27d4cc507749be3a57c401353d63f5000f830ed2 Mon Sep 17 00:00:00 2001 From: Abrumz <160103made@apps.ipb.ac.id> Date: Tue, 24 Oct 2023 21:51:04 +0700 Subject: [PATCH 5/5] update card hover --- src/pages/achievements.astro | 4 --- src/styles/achivements-pages.scss | 41 ++++++++++++------------------- 2 files changed, 16 insertions(+), 29 deletions(-) diff --git a/src/pages/achievements.astro b/src/pages/achievements.astro index 29d608d..0abfb18 100644 --- a/src/pages/achievements.astro +++ b/src/pages/achievements.astro @@ -263,9 +263,6 @@ import Layout from '../layouts/Layout.astro';
- - -
@@ -285,7 +282,6 @@ function centerOptionText(selectElement) { for (let i = 0; i < options.length; i++) { const option = options[i]; option.style.textAlign = 'center'; - option.style.padding = '5px 0'; option.style.lineHeight = '1.5'; } } diff --git a/src/styles/achivements-pages.scss b/src/styles/achivements-pages.scss index 4f47d51..dcc5b38 100644 --- a/src/styles/achivements-pages.scss +++ b/src/styles/achivements-pages.scss @@ -3,6 +3,7 @@ justify-content: center; flex-wrap: wrap; margin: 0 auto; + align-items: center; } @@ -11,7 +12,6 @@ width: 293.998px; height: 321.077px; margin: 10px; - padding-bottom: 0px; flex-direction: column; border-radius: 120px 24px 24px 8px; border: 10px solid var(--Grad-C, #BED4FF); @@ -26,7 +26,6 @@ width: 293.998px; height: 321.077px; margin: 10px; - padding-bottom: 0px; flex-direction: column; border-radius: 120px 24px 24px 8px; border: 10px solid var(--Grad-C, #BED4FF); @@ -37,7 +36,6 @@ transform: rotateY(180deg); display: flex; flex-direction: column; - } @@ -150,6 +148,8 @@ width: 350px; height: 400px; perspective: 800px; + display: contents; + justify-content: center; } .container-achievements:hover > .card-achievements { @@ -159,30 +159,12 @@ .card-achievements { height: 100%; - width: 100%; - position: relative; transition: transform 1500ms; - + display: flex; + justify-content: center; transform-style: preserve-3d; } -@media screen and (max-width: 768px) { - .card-container-achievements { - justify-content: center; - } -} - -@media screen and (max-width: 480px) { - .card-container-achievements { - justify-content: center; - } - .card-achievements { - width: 100%; - } -} - -/* ---------------- */ - .filter-container { display: flex; gap: 10px; @@ -192,7 +174,7 @@ height: auto; align-items: center; flex-wrap: wrap; - } +} .filter-label { @@ -235,6 +217,7 @@ gap: 10px; text-align: center; flex-wrap: wrap; + text-align-last: center; } .filter-text { @@ -242,4 +225,12 @@ text-align: center; align-items: center; align-content: center; -} \ No newline at end of file +} + +.filter-select select { + text-align-last: center; + -webkit-text-align-last: center; + -moz-text-align-last: center; + -ms-text-align-last: center; + } + \ No newline at end of file