diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6d7a0a55..848cee74 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -101,10 +101,10 @@ importers: version: 3.2.5 stylelint: specifier: ^16.3.1 - version: 16.5.0(typescript@5.4.5) + version: 16.6.0(typescript@5.4.5) stylelint-config-standard-scss: specifier: ^13.1.0 - version: 13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)) + version: 13.1.0(postcss@8.4.38)(stylelint@16.6.0(typescript@5.4.5)) tailwindcss: specifier: 3.4.3 version: 3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)) @@ -118,16 +118,16 @@ packages: resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==} engines: {node: '>=10'} - '@babel/code-frame@7.24.2': - resolution: {integrity: sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==} + '@babel/code-frame@7.24.6': + resolution: {integrity: sha512-ZJhac6FkEd1yhG2AHOmfcXG4ceoLltoCVJjN5XsWN9BifBQr+cHJbWi0h68HZuSORq+3WtJ2z0hwF2NG1b5kcA==} engines: {node: '>=6.9.0'} - '@babel/helper-validator-identifier@7.24.5': - resolution: {integrity: sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==} + '@babel/helper-validator-identifier@7.24.6': + resolution: {integrity: sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==} engines: {node: '>=6.9.0'} - '@babel/highlight@7.24.5': - resolution: {integrity: sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==} + '@babel/highlight@7.24.6': + resolution: {integrity: sha512-2YnuOp4HAk2BsBrJJvYCbItHx0zWscI1C3zgWkz+wDyD9I7GIVrfnLyrR4Y1VR+7p+chAEcrgRQYZAGIKMV7vQ==} engines: {node: '>=6.9.0'} '@cspotcode/source-map-support@0.8.1': @@ -151,8 +151,8 @@ packages: '@csstools/css-parser-algorithms': ^2.6.3 '@csstools/css-tokenizer': ^2.3.1 - '@csstools/selector-specificity@3.0.3': - resolution: {integrity: sha512-KEPNw4+WW5AVEIyzC80rTbWEUatTW2lXpN8+8ILC8PiPeWPjwUzrPZDIOZ2wwqDmeqOYTdSGyL3+vE5GC3FB3Q==} + '@csstools/selector-specificity@3.1.1': + resolution: {integrity: sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==} engines: {node: ^14 || ^16 || >=18} peerDependencies: postcss-selector-parser: ^6.0.13 @@ -590,6 +590,10 @@ packages: resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==} engines: {node: '>=8'} + braces@3.0.3: + resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==} + engines: {node: '>=8'} + browserslist@4.23.0: resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} @@ -981,6 +985,10 @@ packages: resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} engines: {node: '>=8'} + fill-range@7.1.1: + resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==} + engines: {node: '>=8'} + filter-iterator@0.0.1: resolution: {integrity: sha512-v4lhL7Qa8XpbW3LN46CEnmhGk3eHZwxfNl5at20aEkreesht4YKb/Ba3BUIbnPhAC/r3dmu7ABaGk6MAvh2alA==} @@ -1384,8 +1392,8 @@ packages: known-css-properties@0.29.0: resolution: {integrity: sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==} - known-css-properties@0.30.0: - resolution: {integrity: sha512-VSWXYUnsPu9+WYKkfmJyLKtIvaRJi1kXUqVmBACORXZQxT5oZDsoZ2vQP+bQFDnWtpI/4eq3MLoRMjI2fnLzTQ==} + known-css-properties@0.31.0: + resolution: {integrity: sha512-sBPIUGTNF0czz0mwGGUoKKJC8Q7On1GPbCSFPfyEsfHb2DyBG0Y4QtV+EVWpINSaiGKZblDNuF5AezxSgOhesQ==} levn@0.4.1: resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} @@ -1600,6 +1608,10 @@ packages: resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==} engines: {node: '>=8.6'} + micromatch@4.0.7: + resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==} + engines: {node: '>=8.6'} + minimatch@3.1.2: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} @@ -1839,6 +1851,10 @@ packages: resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==} engines: {node: '>=4'} + postcss-selector-parser@6.1.0: + resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==} + engines: {node: '>=4'} + postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} @@ -2145,8 +2161,8 @@ packages: peerDependencies: stylelint: ^16.0.2 - stylelint@16.5.0: - resolution: {integrity: sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw==} + stylelint@16.6.0: + resolution: {integrity: sha512-vjWYlDEgOS3Z/IcXagQwi8PFJyPro1DxBYOnTML1PAqnrYUHs8owleGStv20sgt0OhW8r9zZm6MK7IT2+l2B6A==} engines: {node: '>=18.12.0'} hasBin: true @@ -2396,16 +2412,16 @@ snapshots: '@alloc/quick-lru@5.2.0': {} - '@babel/code-frame@7.24.2': + '@babel/code-frame@7.24.6': dependencies: - '@babel/highlight': 7.24.5 + '@babel/highlight': 7.24.6 picocolors: 1.0.1 - '@babel/helper-validator-identifier@7.24.5': {} + '@babel/helper-validator-identifier@7.24.6': {} - '@babel/highlight@7.24.5': + '@babel/highlight@7.24.6': dependencies: - '@babel/helper-validator-identifier': 7.24.5 + '@babel/helper-validator-identifier': 7.24.6 chalk: 2.4.2 js-tokens: 4.0.0 picocolors: 1.0.1 @@ -2426,9 +2442,9 @@ snapshots: '@csstools/css-parser-algorithms': 2.6.3(@csstools/css-tokenizer@2.3.1) '@csstools/css-tokenizer': 2.3.1 - '@csstools/selector-specificity@3.0.3(postcss-selector-parser@6.0.16)': + '@csstools/selector-specificity@3.1.1(postcss-selector-parser@6.1.0)': dependencies: - postcss-selector-parser: 6.0.16 + postcss-selector-parser: 6.1.0 '@dual-bundle/import-meta-resolve@4.1.0': {} @@ -2908,6 +2924,10 @@ snapshots: dependencies: fill-range: 7.0.1 + braces@3.0.3: + dependencies: + fill-range: 7.1.1 + browserslist@4.23.0: dependencies: caniuse-lite: 1.0.30001610 @@ -3338,7 +3358,7 @@ snapshots: '@nodelib/fs.walk': 1.2.8 glob-parent: 5.1.2 merge2: 1.4.1 - micromatch: 4.0.5 + micromatch: 4.0.7 fast-json-stable-stringify@2.1.0: {} @@ -3358,6 +3378,10 @@ snapshots: dependencies: to-regex-range: 5.0.1 + fill-range@7.1.1: + dependencies: + to-regex-range: 5.0.1 + filter-iterator@0.0.1: {} filter-obj@1.1.0: {} @@ -3789,7 +3813,7 @@ snapshots: known-css-properties@0.29.0: {} - known-css-properties@0.30.0: {} + known-css-properties@0.31.0: {} levn@0.4.1: dependencies: @@ -4184,6 +4208,11 @@ snapshots: braces: 3.0.2 picomatch: 2.3.1 + micromatch@4.0.7: + dependencies: + braces: 3.0.3 + picomatch: 2.3.1 + minimatch@3.1.2: dependencies: brace-expansion: 1.1.11 @@ -4308,7 +4337,7 @@ snapshots: parse-json@5.2.0: dependencies: - '@babel/code-frame': 7.24.2 + '@babel/code-frame': 7.24.6 error-ex: 1.3.2 json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 @@ -4398,6 +4427,11 @@ snapshots: cssesc: 3.0.0 util-deprecate: 1.0.2 + postcss-selector-parser@6.1.0: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + postcss-value-parser@4.2.0: {} postcss@8.4.31: @@ -4707,47 +4741,47 @@ snapshots: client-only: 0.0.1 react: 18.3.1 - stylelint-config-recommended-scss@14.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)): + stylelint-config-recommended-scss@14.0.0(postcss@8.4.38)(stylelint@16.6.0(typescript@5.4.5)): dependencies: postcss-scss: 4.0.9(postcss@8.4.38) - stylelint: 16.5.0(typescript@5.4.5) - stylelint-config-recommended: 14.0.0(stylelint@16.5.0(typescript@5.4.5)) - stylelint-scss: 6.2.1(stylelint@16.5.0(typescript@5.4.5)) + stylelint: 16.6.0(typescript@5.4.5) + stylelint-config-recommended: 14.0.0(stylelint@16.6.0(typescript@5.4.5)) + stylelint-scss: 6.2.1(stylelint@16.6.0(typescript@5.4.5)) optionalDependencies: postcss: 8.4.38 - stylelint-config-recommended@14.0.0(stylelint@16.5.0(typescript@5.4.5)): + stylelint-config-recommended@14.0.0(stylelint@16.6.0(typescript@5.4.5)): dependencies: - stylelint: 16.5.0(typescript@5.4.5) + stylelint: 16.6.0(typescript@5.4.5) - stylelint-config-standard-scss@13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)): + stylelint-config-standard-scss@13.1.0(postcss@8.4.38)(stylelint@16.6.0(typescript@5.4.5)): dependencies: - stylelint: 16.5.0(typescript@5.4.5) - stylelint-config-recommended-scss: 14.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)) - stylelint-config-standard: 36.0.0(stylelint@16.5.0(typescript@5.4.5)) + stylelint: 16.6.0(typescript@5.4.5) + stylelint-config-recommended-scss: 14.0.0(postcss@8.4.38)(stylelint@16.6.0(typescript@5.4.5)) + stylelint-config-standard: 36.0.0(stylelint@16.6.0(typescript@5.4.5)) optionalDependencies: postcss: 8.4.38 - stylelint-config-standard@36.0.0(stylelint@16.5.0(typescript@5.4.5)): + stylelint-config-standard@36.0.0(stylelint@16.6.0(typescript@5.4.5)): dependencies: - stylelint: 16.5.0(typescript@5.4.5) - stylelint-config-recommended: 14.0.0(stylelint@16.5.0(typescript@5.4.5)) + stylelint: 16.6.0(typescript@5.4.5) + stylelint-config-recommended: 14.0.0(stylelint@16.6.0(typescript@5.4.5)) - stylelint-scss@6.2.1(stylelint@16.5.0(typescript@5.4.5)): + stylelint-scss@6.2.1(stylelint@16.6.0(typescript@5.4.5)): dependencies: known-css-properties: 0.29.0 postcss-media-query-parser: 0.2.3 postcss-resolve-nested-selector: 0.1.1 - postcss-selector-parser: 6.0.16 + postcss-selector-parser: 6.1.0 postcss-value-parser: 4.2.0 - stylelint: 16.5.0(typescript@5.4.5) + stylelint: 16.6.0(typescript@5.4.5) - stylelint@16.5.0(typescript@5.4.5): + stylelint@16.6.0(typescript@5.4.5): dependencies: '@csstools/css-parser-algorithms': 2.6.3(@csstools/css-tokenizer@2.3.1) '@csstools/css-tokenizer': 2.3.1 '@csstools/media-query-list-parser': 2.1.11(@csstools/css-parser-algorithms@2.6.3(@csstools/css-tokenizer@2.3.1))(@csstools/css-tokenizer@2.3.1) - '@csstools/selector-specificity': 3.0.3(postcss-selector-parser@6.0.16) + '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.0) '@dual-bundle/import-meta-resolve': 4.1.0 balanced-match: 2.0.0 colord: 2.9.3 @@ -4765,16 +4799,16 @@ snapshots: ignore: 5.3.1 imurmurhash: 0.1.4 is-plain-object: 5.0.0 - known-css-properties: 0.30.0 + known-css-properties: 0.31.0 mathml-tag-names: 2.1.3 meow: 13.2.0 - micromatch: 4.0.5 + micromatch: 4.0.7 normalize-path: 3.0.0 - picocolors: 1.0.0 + picocolors: 1.0.1 postcss: 8.4.38 postcss-resolve-nested-selector: 0.1.1 postcss-safe-parser: 7.0.0(postcss@8.4.38) - postcss-selector-parser: 6.0.16 + postcss-selector-parser: 6.1.0 postcss-value-parser: 4.2.0 resolve-from: 5.0.0 string-width: 4.2.3 @@ -5005,7 +5039,7 @@ snapshots: dependencies: browserslist: 4.23.0 escalade: 3.1.2 - picocolors: 1.0.1 + picocolors: 1.0.0 uri-js@4.4.1: dependencies: diff --git a/src/features/styles/ui/about/_activity.scss b/src/features/styles/ui/about/_activity.scss new file mode 100644 index 00000000..4f8d25f0 --- /dev/null +++ b/src/features/styles/ui/about/_activity.scss @@ -0,0 +1,67 @@ +@mixin activity { + @include container; + + padding-bottom: 50px; + + .label { + @include label; + } + + &-card { + display: flex; + margin-top: 1rem; + line-height: 1.72rem; + + @include mobile { + flex-direction: column; + } + + .year { + min-width: 5rem; + font-size: 1.3rem; + width: 11rem; + + &:hover { + filter: drop-shadow(2px 2px 4px lightgray) invert(2%); + } + + @include mobile { + margin: 1rem 0 0.2rem; + } + } + + .left-line { + border-left: 0.24rem solid $dark-color; + padding-left: 1rem; + + li { + display: flex; + + .category { + min-width: 120px; + color: $min-color; + + @media print { + color: #101010; + } + } + + .link-wrap { + width: 100%; + } + + .link { + color: #2dd0a8; + + @media print { + color: #101010; + } + + &:hover { + color: $highlight-color; + } + } + } + } + } +} diff --git a/src/features/styles/ui/about/_common.scss b/src/features/styles/ui/about/_common.scss new file mode 100644 index 00000000..27dd8254 --- /dev/null +++ b/src/features/styles/ui/about/_common.scss @@ -0,0 +1,18 @@ +@mixin container { + display: flex; + flex-direction: column; + padding-bottom: 30px; +} + +@mixin label { + user-select: none; + border-bottom: 1px solid $base-color; + color: $min-color; + font-weight: bold; + font-size: 1.5rem; + margin-bottom: 4px; + + @media print { + color: #101010; + } +} diff --git a/src/features/styles/ui/about/_education.scss b/src/features/styles/ui/about/_education.scss new file mode 100644 index 00000000..e0cbdf51 --- /dev/null +++ b/src/features/styles/ui/about/_education.scss @@ -0,0 +1,11 @@ +@mixin education { + @include container; + + .label { + @include label; + } + + &-position { + border-bottom: none; + } +} diff --git a/src/features/styles/ui/about/_introduction.scss b/src/features/styles/ui/about/_introduction.scss new file mode 100644 index 00000000..ceca344c --- /dev/null +++ b/src/features/styles/ui/about/_introduction.scss @@ -0,0 +1,24 @@ +@mixin introduction { + @include container; + + .description { + margin: 2rem 0 1rem; + line-height: 2rem; + + .p { + margin: 2rem 0; + + .underline-highlight-fade { + @media print { + color: $black; + text-decoration: underline 0.15em $black; + } + } + } + + li::before { + content: '❑'; + margin-right: 0.5rem; + } + } +} diff --git a/src/features/styles/ui/about/_profile.scss b/src/features/styles/ui/about/_profile.scss new file mode 100644 index 00000000..4b01ef79 --- /dev/null +++ b/src/features/styles/ui/about/_profile.scss @@ -0,0 +1,64 @@ +@mixin profile { + &-container { + display: flex; + justify-content: space-between; + align-items: flex-end; + + @include mobile { + flex-direction: column; + align-items: normal; + } + + .jumbotron { + display: flex; + justify-content: flex-start; + background: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #e73c7e); + background-clip: text; + color: transparent; + font-size: 8rem; + line-height: 8.5rem; + letter-spacing: 0.2rem; + font-weight: bold; + filter: drop-shadow(2px 4px 1px black); + + @include mobile { + font-size: 6rem; + letter-spacing: 1px; + } + + @media print { + color: #101010; + font-weight: normal; + background: none; + filter: none; + } + } + + .logo-container { + display: flex; + flex-direction: column; + + .about-profile-logo { + display: flex; + justify-content: flex-end; + padding-bottom: 1px; + height: 1.7rem; + + a { + display: flex; + align-items: center; + } + + img { + padding: 2px 0 2px 5px; + height: 1.7rem; + width: 1.7rem; + } + + .gmail { + height: 1.4rem; + } + } + } + } +} diff --git a/src/features/styles/ui/about/project.scss b/src/features/styles/ui/about/_project.scss similarity index 100% rename from src/features/styles/ui/about/project.scss rename to src/features/styles/ui/about/_project.scss diff --git a/src/features/styles/ui/about/_work.scss b/src/features/styles/ui/about/_work.scss new file mode 100644 index 00000000..3616e9bd --- /dev/null +++ b/src/features/styles/ui/about/_work.scss @@ -0,0 +1,107 @@ +@mixin work { + @include container; + + .skeleton { + height: $max-height; + } + + .label { + @include label; + + cursor: pointer; + + &:hover { + color: $sub-color; + } + } + + &-card { + display: flex; + margin-top: 1rem; + padding: 10px 0; + + @include mobile { + flex-direction: column; + } + + .left-side { + width: 12rem; + + .logo { + width: 4rem; + height: 4rem; + transition: filter 350ms ease-in-out; + + &:hover { + filter: drop-shadow(2px 2px 4px lightgray) invert(2%); + } + } + + .date { + margin-top: 0.3rem; + } + } + + .border { + border: 1px solid $background-color; + } + + .content { + width: 100%; + display: flex; + flex-direction: column; + margin-left: 22px; + + @include mobile { + margin-left: 0; + } + + .headline { + display: flex; + align-items: baseline; + + .title { + font-size: 1.5rem; + font-weight: bold; + user-select: none; + } + + .date { + padding-left: 4px; + font-style: italic; + } + + @include mobile { + flex-direction: column; + + .date { + padding-left: 0; + } + } + } + + .hover { + cursor: pointer; + transition: color 350ms; + + &:hover { + color: $highlight-color; + } + } + + .position { + border-bottom: 1px dotted $min-color; + margin-bottom: 15px; + user-select: none; + + @media print { + border-bottom: 1px dotted $black; + } + } + + .project { + @include project; + } + } + } +} diff --git a/src/features/styles/ui/about/index.scss b/src/features/styles/ui/about/index.scss index e550883f..a9a16d22 100644 --- a/src/features/styles/ui/about/index.scss +++ b/src/features/styles/ui/about/index.scss @@ -1,23 +1,10 @@ +@import './common'; @import './project'; - -@mixin container { - display: flex; - flex-direction: column; - padding-bottom: 30px; -} - -@mixin label { - user-select: none; - border-bottom: 1px solid $base-color; - color: $min-color; - font-weight: bold; - font-size: 1.5rem; - margin-bottom: 4px; - - @media print { - color: #101010; - } -} +@import './profile'; +@import './introduction'; +@import './work'; +@import './activity'; +@import './education'; .about { &-layout { @@ -33,284 +20,22 @@ } &-profile { - &-container { - display: flex; - justify-content: space-between; - align-items: flex-end; - - @include mobile { - flex-direction: column; - align-items: normal; - } - - .jumbotron { - display: flex; - justify-content: flex-start; - background: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #e73c7e); - background-clip: text; - color: transparent; - font-size: 8rem; - line-height: 8.5rem; - letter-spacing: 0.2rem; - font-weight: bold; - filter: drop-shadow(2px 4px 1px black); - - @include mobile { - font-size: 6rem; - letter-spacing: 1px; - } - - @media print { - color: #101010; - font-weight: normal; - background: none; - filter: none; - } - } - - .logo-container { - display: flex; - flex-direction: column; - - .about-profile-logo { - display: flex; - justify-content: flex-end; - padding-bottom: 1px; - height: 1.7rem; - - a { - display: flex; - align-items: center; - } - - img { - padding: 2px 0 2px 5px; - height: 1.7rem; - width: 1.7rem; - } - - .gmail { - height: 1.4rem; - } - } - } - } + @include profile; } &-introduction { - @include container; - - .description { - margin: 2rem 0 1rem; - line-height: 2rem; - - .p { - margin: 2rem 0; - - .underline-highlight-fade { - @media print { - color: $black; - text-decoration: underline 0.15em $black; - } - } - } - - li::before { - content: '❑'; - margin-right: 0.5rem; - } - } + @include introduction; } &-work { - @include container; - - .skeleton { - height: $max-height; - } - - .label { - @include label; - - cursor: pointer; - - &:hover { - color: $sub-color; - } - } - - &-card { - display: flex; - margin-top: 1rem; - padding: 10px 0; - - @include mobile { - flex-direction: column; - } - - .left-side { - width: 12rem; - - .logo { - width: 4rem; - height: 4rem; - transition: filter 350ms ease-in-out; - - &:hover { - filter: drop-shadow(2px 2px 4px lightgray) invert(2%); - } - } - - .date { - margin-top: 0.3rem; - } - } - - .border { - border: 1px solid $background-color; - } - - .content { - width: 100%; - display: flex; - flex-direction: column; - margin-left: 22px; - - @include mobile { - margin-left: 0; - } - - .headline { - display: flex; - align-items: baseline; - - .title { - font-size: 1.5rem; - font-weight: bold; - user-select: none; - } - - .date { - padding-left: 4px; - font-style: italic; - } - - @include mobile { - flex-direction: column; - - .date { - padding-left: 0; - } - } - } - - .hover { - cursor: pointer; - transition: color 350ms; - - &:hover { - color: $highlight-color; - } - } - - .position { - border-bottom: 1px dotted $min-color; - margin-bottom: 15px; - user-select: none; - - @media print { - border-bottom: 1px dotted $black; - } - } - - .project { - @include project; - } - } - } + @include work; } &-activity { - @include container; - - padding-bottom: 50px; - - /* stylelint-disable no-descending-specificity */ - .label { - @include label; - } - /* stylelint-enable no-descending-specificity */ - - &-card { - display: flex; - margin-top: 1rem; - line-height: 1.72rem; - - @include mobile { - flex-direction: column; - } - - .year { - min-width: 5rem; - font-size: 1.3rem; - width: 11rem; - - &:hover { - filter: drop-shadow(2px 2px 4px lightgray) invert(2%); - } - - @include mobile { - margin: 1rem 0 0.2rem; - } - } - - .left-line { - border-left: 0.24rem solid $dark-color; - padding-left: 1rem; - - li { - display: flex; - - .category { - min-width: 120px; - color: $min-color; - - @media print { - color: #101010; - } - } - - .link-wrap { - width: 100%; - } - - .link { - color: #2dd0a8; - - @media print { - color: #101010; - } - - &:hover { - color: $highlight-color; - } - } - } - } - } + @include activity; } &-education { - @include container; - - /* stylelint-disable no-descending-specificity */ - .label { - @include label; - } - /* stylelint-enable no-descending-specificity */ - - &-position { - border-bottom: none; - } + @include education; } } diff --git a/src/features/styles/ui/posts/posts.scss b/src/features/styles/ui/posts/posts.scss index 24989cd9..4fa5acf6 100644 --- a/src/features/styles/ui/posts/posts.scss +++ b/src/features/styles/ui/posts/posts.scss @@ -1,51 +1,4 @@ /* PC */ -.category-bar { - margin-bottom: 2rem; - display: flex; - flex-wrap: wrap; - justify-content: center; - border-bottom: 1px solid $sub-color; - - .x { - position: relative; - - &::after { - content: '𒅄'; - } - - &:hover { - @keyframes spin { - 100% { - transform: rotate(360deg); - } - } - - animation: spin 2s linear infinite; - transform-origin: 50% 50%; - } - } - - .selected { - color: $highlight-color; - } - - .item { - display: inline-block; - padding: 0.1rem 0.4rem; - margin: 0.3rem 1rem; - user-select: none; - cursor: pointer; - - &:hover { - text-shadow: - -0.5px 0 $highlight-color, - 0 0.5px $base-color, - 0.5px 0 $base-color, - 0 -0.5px $base-color; - } - } -} - .post-list { padding-bottom: 14rem; @@ -133,3 +86,50 @@ padding-bottom: 100px; } } + +.category-bar { + margin-bottom: 2rem; + display: flex; + flex-wrap: wrap; + justify-content: center; + border-bottom: 1px solid $sub-color; + + .x { + position: relative; + + &::after { + content: '𒅄'; + } + + &:hover { + @keyframes spin { + 100% { + transform: rotate(360deg); + } + } + + animation: spin 2s linear infinite; + transform-origin: 50% 50%; + } + } + + .selected { + color: $highlight-color; + } + + .item { + display: inline-block; + padding: 0.1rem 0.4rem; + margin: 0.3rem 1rem; + user-select: none; + cursor: pointer; + + &:hover { + text-shadow: + -0.5px 0 $highlight-color, + 0 0.5px $base-color, + 0.5px 0 $base-color, + 0 -0.5px $base-color; + } + } +}