From e84141e9608b2f07d03171ffbf5caf870be23843 Mon Sep 17 00:00:00 2001 From: padosum Date: Sun, 1 Jan 2023 11:10:34 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20card=20=ED=91=9C=EC=8B=9C=20transit?= =?UTF-8?q?ion=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 뷰포트에서 보여질 때 transition 추가 (opacity, transform) - intersectionObserver API 사용 --- src/client/App.js | 22 +- src/client/index.html | 756 +++++++++++++++++++++++++++++++++-- src/client/styles/global.css | 46 ++- 3 files changed, 788 insertions(+), 36 deletions(-) diff --git a/src/client/App.js b/src/client/App.js index 52ec5e9..b05efff 100644 --- a/src/client/App.js +++ b/src/client/App.js @@ -62,8 +62,28 @@ function App() { window.addEventListener('resize', resizeAllGridItems); resizeAllGridItems(); -} + const achievements = [...document.querySelectorAll('.achievement-wrapper')]; + achievements.forEach(item => { + let options = { + root: null, + rootMargin: '0px', + threshold: 0.3, + }; + + let observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + const title = entry.target.querySelector('.achievement-title').innerHTML; + if (entry.isIntersecting) { + entry.target.classList.remove('tilt'); + } else { + entry.target.classList.add('tilt'); + } + }); + }, options); + observer.observe(item); + }); +} App(); if (module.hot) { diff --git a/src/client/index.html b/src/client/index.html index 98c4070..ea41707 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -184,7 +184,7 @@ -
+
통계 @@ -260,7 +260,7 @@

여행

교통 수단: 철도
-
다음의 철도 교통 수단 타기.
+
다음의 철도 교통 수단 타기.
  • 지하철여행
    교통 수단: 철도
    -
    다음의 철도 교통 수단 타기.
    +
    다음의 철도 교통 수단 타기.
    • 지하철여행
      교통 수단: 철도
      -
      다음의 철도 교통 수단 타기.
      +
      다음의 철도 교통 수단 타기.
      • 지하철여행
        교통 수단: 철도
        -
        다음의 철도 교통 수단 타기.
        +
        다음의 철도 교통 수단 타기.
        • 지하철음식
          교통 수단: 철도
          -
          다음의 철도 교통 수단 타기.
          +
          다음의 철도 교통 수단 타기.
          • 지하철기타
            교통 수단: 철도
            -
            다음의 철도 교통 수단 타기.
            +
            다음의 철도 교통 수단 타기.
            • 지하철기타
              교통 수단: 철도
              -
              다음의 철도 교통 수단 타기.
              +
              다음의 철도 교통 수단 타기.
              • 지하철기타
                줘봐 따줄게.
                -
                병따개 없이 병뚜껑 따기.
                +
                병따개 없이 병뚜껑 따기.
                연습만이 살 길이다.
                @@ -494,11 +494,51 @@

                기타

                취미

                제작

                +
                +
                +
                +
                시계공
                +
                시계 수리하기.
                +
                +
                +
                +
                +
                +
                +
                Do It Yourself!
                +
                가구 만들기.
                +
                +
                +
                +
                +
                +
                +
                손목 위의 우주
                +
                시계 만들기.
                +
                +
                +
                +
                +
                +
                +
                1%의 영감
                +
                발명하기 / 특허갖기.
                +
                +
                +
                +
                +
                +
                +
                Le Corbusier
                +
                집 짓기.
                +
                +
                +
                교통 수단: 철도
                -
                다음의 철도 교통 수단 타기.
                +
                다음의 철도 교통 수단 타기.
                • 지하철제작
                  교통 수단: 철도
                  -
                  다음의 철도 교통 수단 타기.
                  +
                  다음의 철도 교통 수단 타기.
                  • 지하철제작
                    줘봐 따줄게.
                    -
                    병따개 없이 병뚜껑 따기.
                    +
                    병따개 없이 병뚜껑 따기.
                    Dance whole day~
                    @@ -567,7 +607,7 @@

                    제작

                    줘봐 따줄게.
                    -
                    병따개 없이 병뚜껑 따기.1
                    +
                    병따개 없이 병뚜껑 따기.1
                    Dance whole day~
                    @@ -576,7 +616,7 @@

                    제작

                    줘봐 따줄게.
                    -
                    병따개 없이 병뚜껑 따기.2
                    +
                    병따개 없이 병뚜껑 따기.2
                  @@ -584,7 +624,7 @@

                  제작

                  교통 수단: 철도
                  -
                  다음의 철도 교통 수단 타기.3
                  +
                  다음의 철도 교통 수단 타기.3
                  • 지하철제작
                    줘봐 따줄게.
                    -
                    병따개 없이 병뚜껑 따기.4
                    +
                    병따개 없이 병뚜껑 따기.4
                    어떻게?!!!!
                    @@ -624,7 +664,7 @@

                    제작

                    줘봐 따줄게.
                    -
                    병따개 없이 병뚜껑 따기.5
                    +
                    병따개 없이 병뚜껑 따기.5
                    @@ -633,21 +673,685 @@

                    제작

                  컴퓨터

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +

                  예술

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +

                  커뮤니티

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +

                  기타

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +

                  건강

                  +

                  생존

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +

                  야외운동

                  -

                  실내운동

                  -

                  기타

                  -

                  배움

                  -

                  고등교육

                  -

                  자격

                  -

                  언어

                  -

                  돈

                  -

                  직업

                  -

                  소유

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +

                  실내운동

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +

                  기타

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +

                  배움

                  +

                  고등교육

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +

                  자격

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +

                  언어

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +

                  돈

                  +

                  직업

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +

                  소유

                  +
                  +
                  +
                  +
                  +
                  가상 부동산
                  +
                  도메인 주소 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  해피해킹
                  +
                  해피해킹 키보드 갖기.
                  +
                  +
                  +
                  + 그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다.그냥한다. +
                  +
                  +
                  +
                  +
                  +
                  앱등이
                  +
                  애플 제품을 수집하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  게임 깎는 개발자
                  +
                  게임 개발하기.
                  +
                  +
                  +
                  ...
                  +
                  +
                  +
                  +
                  +
                  생태계 기여자
                  +
                  개발자 컨퍼런스에서 발표하기.
                  +
                  +
                  +
                  ...
                  +
                  +
diff --git a/src/client/styles/global.css b/src/client/styles/global.css index 3fc843b..b2bf06a 100644 --- a/src/client/styles/global.css +++ b/src/client/styles/global.css @@ -33,6 +33,7 @@ header { grid-area: header; position: fixed; top: 0; + z-index: 1; display: flex; align-items: center; flex-wrap: wrap; @@ -214,6 +215,7 @@ header nav ul > li { transition: 0.5s; top: var(--header-height); left: 0; + z-index: 1; background-color: rgba(241, 245, 248, 1); width: 100%; font-size: 1.5rem; @@ -323,6 +325,17 @@ h2.category-title { width: 100%; } +.achievement-wrapper.tilt { + transform: perspective(12rem) rotateX(30deg); + opacity: 0; +} + +.achievement-wrapper { + transition-duration: 0.7s, 0.7s; + transition-property: transform, opacity; + transform: rotateX(0); + opacity: 1; +} .achievement-wrapper dd { margin-top: 0.5rem; margin-left: 1rem; @@ -331,20 +344,25 @@ h2.category-title { .achievement-wrapper ul { margin-top: 1rem; margin-left: 1.2rem; + font-size: 1.25rem; } .achievement-title { font-weight: 700; - font-size: 1.3rem; + font-size: 2rem; +} + +.achievement-description { + font-size: 1.25rem; } .achievements-list { display: grid; - grid-gap: 1.25rem; - grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); + grid-gap: 3rem 3rem; + grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); grid-auto-rows: 30px; - margin-top: 1rem; - margin-bottom: 3rem; + margin-top: 2rem; + margin-bottom: 5rem; } .achievements-list ul { @@ -360,7 +378,7 @@ h2.category-title { .front, .back { - padding: 1rem; + padding: 2rem 1rem; border: 1px solid rgba(4, 13, 44, 0.8); background-color: #fff; backface-visibility: hidden; @@ -431,9 +449,18 @@ h2.category-title { box-shadow: 0.6rem 0.6rem 0 var(--shadow-color-6); } -/* .achievements-dashboard:has(.dashboard-contents:hover) { - box-shadow: 0.6rem 0.6rem 0 var(--shadow-color-6); -} */ +@keyframes rotate { + from { + transform: rotateX(0deg); + } + to { + transform: rotateX(360deg); + } +} + +.achievements-dashboard:hover .year-status-item-type { + animation: rotate 1s; +} .achievements-dashboard-header { margin-bottom: 1.2rem; @@ -442,6 +469,7 @@ h2.category-title { .dashboard-title { font-size: 2rem; font-style: italic; + font-weight: 700; } .total-status {