From a114c9ff42529ff5402dde7b69d08293b11e2b5c Mon Sep 17 00:00:00 2001 From: ebokyung Date: Sun, 12 Nov 2023 18:52:24 +0900 Subject: [PATCH] remove --- .../ISSUE_TEMPLATE/github-issue-template.md | 21 -- .github/pull_request_template.md | 18 -- .gitignore | 1 - .vscode/settings.json | 15 - assets/.DS_Store | Bin 0 -> 8196 bytes css/404.css | 25 -- css/button.css | 76 ----- css/chat_list.css | 90 ------ css/chat_room.css | 252 --------------- css/comment.css | 37 --- css/footer.css | 103 ------ css/header.css | 142 --------- css/home_search.css | 108 ------- css/home_withoutfollowers.css | 113 ------- css/join_membership.css | 251 --------------- css/login.css | 109 ------- css/login_email.css | 160 ---------- css/modal.css | 137 -------- css/post.css | 152 --------- css/post_detail.css | 164 ---------- css/post_upload.css | 175 ----------- css/product.css | 192 ------------ css/profile_follow.css | 112 ------- css/profile_info.css | 295 ------------------ css/profile_modification.css | 144 --------- css/profile_productlist.css | 67 ---- css/profile_view.css | 87 ------ css/reset.css | 206 ------------ css/skip_nav.css | 32 -- css/splash.css | 12 - naver58620a79d9c9b9f251caee0753f0748c.html | 1 - scss/_mixin.scss | 71 ----- scss/_variables.scss | 126 -------- scss/components/button.scss | 46 --- scss/components/comment.scss | 17 - scss/components/footer.scss | 103 ------ scss/components/header.scss | 112 ------- scss/components/modal.scss | 101 ------ scss/components/post.scss | 116 ------- scss/components/skip_nav.scss | 30 -- scss/pages/404.scss | 29 -- scss/pages/chat_list.scss | 63 ---- scss/pages/chat_room.scss | 156 --------- scss/pages/home_search.scss | 65 ---- scss/pages/home_withoutfollowers.scss | 87 ------ scss/pages/join_membership.scss | 142 --------- scss/pages/login.scss | 83 ----- scss/pages/login_email.scss | 79 ----- scss/pages/post_detail.scss | 99 ------ scss/pages/post_upload.scss | 106 ------- scss/pages/product.scss | 106 ------- scss/pages/profile_follow.scss | 78 ----- scss/pages/profile_info.scss | 212 ------------- scss/pages/profile_modification.scss | 95 ------ scss/pages/profile_productlist.scss | 68 ---- scss/pages/profile_view.scss | 91 ------ sitemap.xml | 59 ---- 57 files changed, 5637 deletions(-) delete mode 100644 .github/ISSUE_TEMPLATE/github-issue-template.md delete mode 100644 .github/pull_request_template.md delete mode 100644 .gitignore delete mode 100644 .vscode/settings.json create mode 100644 assets/.DS_Store delete mode 100644 css/404.css delete mode 100644 css/button.css delete mode 100644 css/chat_list.css delete mode 100644 css/chat_room.css delete mode 100644 css/comment.css delete mode 100644 css/footer.css delete mode 100644 css/header.css delete mode 100644 css/home_search.css delete mode 100644 css/home_withoutfollowers.css delete mode 100644 css/join_membership.css delete mode 100644 css/login.css delete mode 100644 css/login_email.css delete mode 100644 css/modal.css delete mode 100644 css/post.css delete mode 100644 css/post_detail.css delete mode 100644 css/post_upload.css delete mode 100644 css/product.css delete mode 100644 css/profile_follow.css delete mode 100644 css/profile_info.css delete mode 100644 css/profile_modification.css delete mode 100644 css/profile_productlist.css delete mode 100644 css/profile_view.css delete mode 100644 css/reset.css delete mode 100644 css/skip_nav.css delete mode 100644 css/splash.css delete mode 100644 naver58620a79d9c9b9f251caee0753f0748c.html delete mode 100644 scss/_mixin.scss delete mode 100644 scss/_variables.scss delete mode 100644 scss/components/button.scss delete mode 100644 scss/components/comment.scss delete mode 100644 scss/components/footer.scss delete mode 100644 scss/components/header.scss delete mode 100644 scss/components/modal.scss delete mode 100644 scss/components/post.scss delete mode 100644 scss/components/skip_nav.scss delete mode 100644 scss/pages/404.scss delete mode 100644 scss/pages/chat_list.scss delete mode 100644 scss/pages/chat_room.scss delete mode 100644 scss/pages/home_search.scss delete mode 100644 scss/pages/home_withoutfollowers.scss delete mode 100644 scss/pages/join_membership.scss delete mode 100644 scss/pages/login.scss delete mode 100644 scss/pages/login_email.scss delete mode 100644 scss/pages/post_detail.scss delete mode 100644 scss/pages/post_upload.scss delete mode 100644 scss/pages/product.scss delete mode 100644 scss/pages/profile_follow.scss delete mode 100644 scss/pages/profile_info.scss delete mode 100644 scss/pages/profile_modification.scss delete mode 100644 scss/pages/profile_productlist.scss delete mode 100644 scss/pages/profile_view.scss delete mode 100644 sitemap.xml diff --git a/.github/ISSUE_TEMPLATE/github-issue-template.md b/.github/ISSUE_TEMPLATE/github-issue-template.md deleted file mode 100644 index 297b88c..0000000 --- a/.github/ISSUE_TEMPLATE/github-issue-template.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -name: github issue template -about: github issue 등록을 위한 공통 템플릿 -title: "[JS or HTML] 기능 - 세부기능" -labels: '' -assignees: '' - ---- - -## 설명 -> 로그인 기능. -- 아이디 입력시 중복검사 시행합니다. -- 비밀번호 입력시 유저에게는 안보이게 (*)으로 대체하여 보여줍니다. - -## TO DO -- [ ] 아이디 입력 기능 구현 -- [ ] 비밀번호 입력 기능 구현 -- [ ] 제출 버튼 활성화 - -## 참고사항 -@@ 사진첨부나 url, 이슈사항 혹은 주의사항 작성해주시면 좋을 것 같습니다 diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md deleted file mode 100644 index 2ca2060..0000000 --- a/.github/pull_request_template.md +++ /dev/null @@ -1,18 +0,0 @@ -### issue : #이슈번호 - -### 전달 사항 -- 클래스 네이밍 확인해주세요 -- 마크업 구조랑 태그 사용 적절한지 확인해주세요 -- - - -### 개발 내용 -- 전반적인 마크업 (.html) -- - - -### 추후 작업 -- - - -### 참고 이미지 diff --git a/.gitignore b/.gitignore deleted file mode 100644 index e43b0f9..0000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -.DS_Store diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 706bab4..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "liveSassCompile.settings.formats": [ - { - "format": "expanded", - "extensionName": ".css", - "savePath": "~/../../css" - } - ], - "liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"], - "liveSassCompile.settings.generateMap": false, - "liveSassCompile.settings.autoprefix": [ - "> 1%", - "last 2 versions" - ] -} diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5b6a187345f0e4f64735de97b3051e056acb25a0 GIT binary patch literal 8196 zcmeHMO>fgM7=FDKnrWaFG^B}BBrZc5YrBmKv`Z=FfHXJ|7zaQjX+sxCK{RP1i|i5-?#`_T$>`^V)vwHhos>9&vg#VQm_W0!9I&fKk9GU=;Wl6u>iEBx}lZU-g>OC}0%$ zFBK5q4>q#Ey2hbG`PG3!h5*0Z#CoL@`-a8U?v{Lle1vOjE{NTI=Hka*TFI7 zs;Z5%=xc7|DXcj4w)#oh6V~L=KJ-a3i!POE8}}O_^-=fHTBasOO_9s=1n+&^e~8uq zGv?F*(+5HUX~}7TdWaU6+R~0_`V1cG87#nZAL9v+A?{cNzk{q-h&dKUs~%r1Th6Vv zFyiLyK2Ea>J5{H}yD|Dl>BvWyH=FuYSU+0tE?nLGb_Yh8{`QIe@$Q80l3dv`RcV7N zc)g_>tpl%Pt;d|B8M!~1Gq9lfw=`RMnZ_0mkL)QdLT7P*70A6##x;^>_ETo8oV7Pd zVy(s(FAjqwtyI3Vnc2d*^F^y@&08;=T|RJ9H|-}4xA#oEd(3(0jq0wq9r%Nt(&Akn zrEU=UJxK`KK1`lJ4Wc$5Gv*XTZcN;$|={k6#3w?$?od{>xo6 I#aUP27Yw{*CjbBd literal 0 HcmV?d00001 diff --git a/css/404.css b/css/404.css deleted file mode 100644 index d8315bc..0000000 --- a/css/404.css +++ /dev/null @@ -1,25 +0,0 @@ -.error { - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} -.error > * { - display: block; - margin: auto; - text-align: center; -} -.error .desc { - margin-bottom: 1.25rem; - color: #767676; - padding-top: 15.625rem; - background: url(../assets/icon/icon-404.svg) no-repeat center/contain; -} -.error .btn-back { - padding: 0.8125rem 1.625rem; - background-color: #635CA5; - border: none; - border-radius: 2.75rem; - color: #ffffff; -} \ No newline at end of file diff --git a/css/button.css b/css/button.css deleted file mode 100644 index dd9d652..0000000 --- a/css/button.css +++ /dev/null @@ -1,76 +0,0 @@ -.size-l, .size-m, .size-ms, .size-s { - background-color: #635CA5; - color: #ffffff; -} -.theme-wrapper.highContrast .size-l, .theme-wrapper.highContrast .size-m, .theme-wrapper.highContrast .size-ms, .theme-wrapper.highContrast .size-s { - background-color: #E4D6FF; -} - -.theme-wrapper.highContrast .size-l, .theme-wrapper.highContrast .size-m, .theme-wrapper.highContrast .size-ms, .theme-wrapper.highContrast .size-s { - color: #000000; -} - -.size-l:disabled, .size-m:disabled, .size-ms:disabled, .size-s:disabled { - background-color: #BCADDC; - background-color: #BCADDC; - -webkit-box-shadow: none; - box-shadow: none; -} -.theme-wrapper.highContrast .size-l:disabled, .theme-wrapper.highContrast .size-m:disabled, .theme-wrapper.highContrast .size-ms:disabled, .theme-wrapper.highContrast .size-s:disabled { - background-color: transparent; -} - -.theme-wrapper.highContrast .size-l:disabled, .theme-wrapper.highContrast .size-m:disabled, .theme-wrapper.highContrast .size-ms:disabled, .theme-wrapper.highContrast .size-s:disabled { - background-color: transparent; -} - -.theme-wrapper.highContrast .size-l:disabled, .theme-wrapper.highContrast .size-m:disabled, .theme-wrapper.highContrast .size-ms:disabled, .theme-wrapper.highContrast .size-s:disabled { - -webkit-box-shadow: 0 0 0 2px #E4D6FF inset; - box-shadow: 0 0 0 2px #E4D6FF inset; -} - -.size-l { - font-weight: 500; - width: 20.125rem; - padding: 0.8125rem 0rem; - border-radius: 2.75rem; - font-size: 0.875rem; -} -.size-m { - font-weight: 500; - width: 7.5rem; - padding: 0.5rem 0rem; - border-radius: 1.875rem; - font-size: 0.875rem; -} -.size-ms { - font-weight: 500; - width: 5.625rem; - padding: 0.4375rem 0rem; - border-radius: 2rem; - font-size: 0.875rem; -} -.size-s { - font-weight: 400; - width: 3.5rem; - padding: 0.4375rem 0rem; - border-radius: 1.625rem; - font-size: 0.75rem; -} - -.cancle { - background-color: #ffffff; - color: #767676; - border: 0.0625rem solid #dbdbdb; -} -.theme-wrapper.highContrast .cancle { - background-color: #000000; -} - -.theme-wrapper.highContrast .cancle { - color: #E4D6FF; -} - -.theme-wrapper.highContrast .cancle { - border: 2px solid #E4D6FF; -} \ No newline at end of file diff --git a/css/chat_list.css b/css/chat_list.css deleted file mode 100644 index e6d92c5..0000000 --- a/css/chat_list.css +++ /dev/null @@ -1,90 +0,0 @@ -.chat-list { - padding: 1.5rem 1rem; -} - -.user-chat-content { - margin-bottom: 1.25rem; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} -.user-chat-content .user-img { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; - margin-right: 0.75rem; - -ms-flex-negative: 0; - flex-shrink: 0; -} -.user-chat-content .img-cover { - display: inline-block; - overflow: hidden; - border-radius: 50%; - width: 3.125rem; - height: 3.125rem; -} -.user-chat-content .img-cover img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} -.user-chat-content .user-info { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - width: calc(100% - 130px); - -ms-flex-negative: 1; - flex-shrink: 1; - margin-right: 0.8125rem; -} -.user-chat-content .user-info .user-name { - font-size: 0.875rem; - font-weight: 500; - line-height: 1.125rem; - margin-bottom: 0.25rem; - color: #000000; -} -.theme-wrapper.highContrast .user-chat-content .user-info .user-name { - color: #ffffff; -} - -.user-chat-content .user-info .chat-content { - display: block; - color: #767676; - font-size: 0.75rem; - font-weight: 400; - margin-top: 0.125rem; -} -.theme-wrapper.highContrast .user-chat-content .user-info .chat-content { - color: #f2f2f2; -} - -.user-chat-content .chat-date { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; - margin-left: auto; - font-size: 0.625rem; - color: #dbdbdb; -} - -.new-chat { - position: relative; -} -.new-chat .profile-dot { - position: absolute; - left: 0.125rem; - width: 0.75rem; - height: 0.75rem; - background-color: #635CA5; - border-radius: 50%; - z-index: 1; -} \ No newline at end of file diff --git a/css/chat_room.css b/css/chat_room.css deleted file mode 100644 index 400a6c1..0000000 --- a/css/chat_room.css +++ /dev/null @@ -1,252 +0,0 @@ -.top { - background-color: #ffffff; - position: fixed; - left: 0; - right: 0; - z-index: 1; -} -.theme-wrapper.highContrast .top { - background-color: #000000; -} - -body { - background-color: #f2f2f2; -} - -.title-chat { - color: #000000; -} -.theme-wrapper.highContrast .title-chat { - color: #ffffff; -} - -.img-cover { - display: inline-block; - overflow: hidden; - border-radius: 50%; - width: 2.625rem; - height: 2.625rem; -} -.img-cover img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} - -main { - position: fixed; - width: 100%; - bottom: 0; - padding: 100vh 0rem 4.5625rem; - background-color: #f2f2f2; -} -.theme-wrapper.highContrast main { - background-color: #000000; -} - -.chat-content { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - margin-top: 0.625rem; -} -.chat-content .user-img { - -ms-flex-negative: 0; - flex-shrink: 0; -} -.chat-content .content-text { - max-width: 100%; - padding: 0.75rem; - font-weight: 400; - font-size: 0.875rem; - line-height: 1.0956rem; - color: #000000; - border: 1px solid #c4c4c4; -} -.theme-wrapper.highContrast .chat-content .content-text { - color: #ffffff; -} - -.chat-content .chat-time { - font-size: 0.625rem; - color: #767676; - margin-right: 1rem; - padding-bottom: 0.3125rem; - -ms-flex-item-align: end; - align-self: flex-end; -} - -.follow-chat .user-img { - margin: 0 0.75rem 0 1rem; -} -.follow-chat .content-text { - border-radius: 0 0.75rem 0.75rem 0.75rem; - background-color: #ffffff; -} -.theme-wrapper.highContrast .follow-chat .content-text { - background-color: #000000; -} - -.follow-chat .chat-time { - margin-left: 0.375rem; -} - -.my-chat { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; -} -.my-chat .content-text { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - color: #ffffff; - margin: 0 1rem 0 0.75rem; - border-radius: 0.75rem 0rem 0.75rem 0.75rem; - border: none; - background-color: #635CA5; -} -.theme-wrapper.highContrast .my-chat .content-text { - color: #C5A8FF; -} - -.theme-wrapper.highContrast .my-chat .content-text { - border: 1px solid #C5A8FF; -} - -.theme-wrapper.highContrast .my-chat .content-text { - background-color: #000000; -} - -.my-chat .chat-time { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; - margin-right: 0.375rem; -} - -.my-chat-img { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; -} -.my-chat-img img { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - max-width: 15rem; - margin: 0 1rem 0 0.75rem; -} -.my-chat-img .content-text { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; -} - -.comment { - background-color: #ffffff; - position: fixed; - bottom: 0; - width: 100%; -} -.comment img { - width: 2.25rem; -} -.comment #commemt-input { - padding: 0.5rem; - margin-right: 0.625rem; - color: #000000; - background-color: #ffffff; -} -.theme-wrapper.highContrast .comment #commemt-input { - color: #ffffff; -} - -.theme-wrapper.highContrast .comment #commemt-input { - background-color: #000000; -} - -.comment .btn-comment:disabled { - color: #635CA5; -} -.theme-wrapper.highContrast .comment .btn-comment:disabled { - color: #E4D6FF; -} - -.comment .btn-comment:not(:disabled) { - color: #9747FF; -} -.theme-wrapper.highContrast .comment .btn-comment:not(:disabled) { - color: #FFEB32; -} - -#comment-input::-webkit-input-placeholder { - color: #767676; -} - -#comment-input::-moz-placeholder { - color: #767676; -} - -#comment-input:-ms-input-placeholder { - color: #767676; -} - -#comment-input::-ms-input-placeholder { - color: #767676; -} - -#comment-input::placeholder { - color: #767676; -} -.theme-wrapper.highContrast #comment-input::-webkit-input-placeholder { - color: #f2f2f2; -} -.theme-wrapper.highContrast #comment-input::-moz-placeholder { - color: #f2f2f2; -} -.theme-wrapper.highContrast #comment-input:-ms-input-placeholder { - color: #f2f2f2; -} -.theme-wrapper.highContrast #comment-input::-ms-input-placeholder { - color: #f2f2f2; -} -.theme-wrapper.highContrast #comment-input::placeholder { - color: #f2f2f2; -} - -.post-modal-background { - display: none; - position: fixed; - width: 100%; - height: 100%; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); -} -.post-modal-background .post-modal-content { - background-color: #ffffff; - padding-bottom: 0.625rem; - border-radius: 1.25rem 1.25rem 0 0; - position: absolute; - bottom: 0; - left: 0; - right: 0; -} -.post-modal-background .modal-content { - padding: 0.875rem 1.625rem 0.875rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; -} -.post-modal-background .post-modal-bar { - background-color: #dbdbdb; - width: 3.125rem; - height: 0.25rem; - margin: 1rem auto; -} -.post-modal-background .modal-description { - width: 100%; - text-align: left; -} \ No newline at end of file diff --git a/css/comment.css b/css/comment.css deleted file mode 100644 index bd1159b..0000000 --- a/css/comment.css +++ /dev/null @@ -1,37 +0,0 @@ -.comment { - background-color: #ffffff; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-top: 0.0625rem solid #dbdbdb; - border-bottom: 0.0625rem solid #dbdbdb; - padding: 0.1875rem 0.3125rem; -} -.theme-wrapper.highContrast .comment { - background-color: #000000; -} - -.comment button { - font-size: 0.875rem; -} -.comment input::-webkit-input-placeholder { - color: #c4c4c4; -} -.comment input::-moz-placeholder { - color: #c4c4c4; -} -.comment input:-ms-input-placeholder { - color: #c4c4c4; -} -.comment input::-ms-input-placeholder { - color: #c4c4c4; -} -.comment input::placeholder { - color: #c4c4c4; -} \ No newline at end of file diff --git a/css/footer.css b/css/footer.css deleted file mode 100644 index c015ebc..0000000 --- a/css/footer.css +++ /dev/null @@ -1,103 +0,0 @@ -footer { - width: 100%; - position: fixed; - bottom: 0; - background-color: #ffffff; -} - -.tab-item-list { - border-top: 0.0313rem solid #dbdbdb; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: distribute; - justify-content: space-around; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background-color: #ffffff; -} -.theme-wrapper.highContrast .tab-item-list { - background-color: #000000; -} - -.tab-item-list li { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} -.tab-item-list li a { - top: 0; - width: 100%; - display: inline-block; - font-size: 0.625rem; - color: #767676; - text-align: center; - position: relative; -} -.tab-item-list li a::before { - content: ""; - display: inline-block; - width: 1.5rem; - height: 1.5rem; - position: absolute; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - top: 35%; - left: 50%; - background-repeat: no-repeat; - background-size: 352px 44px; - background-image: url(../assets/sprites/footer-sprites.png); -} -.theme-wrapper.highContrast .tab-item-list li a::before { - background-image: url(../assets/sprites/footer-sprites-hc.png); -} - -.tab-item-list li a.here { - color: #000000; -} -.theme-wrapper.highContrast .tab-item-list li a.here { - color: #ffffff; -} - -.tab-item-list li a:hover { - background-color: #F1F1F1; - color: #000000; -} -.tab-item-list li p { - font-weight: 400; - padding-top: 2.5rem; - padding-bottom: 0.625rem; - text-align: center; - width: 25vw; -} -.tab-item-list li:first-child a::before { - background-position: -142px -10px; -} -.tab-item-list li:first-child a.here::before { - background-position: -98px -10px; -} -.tab-item-list li:nth-child(2) a::before { - background-position: -230px -10px; -} -.tab-item-list li:nth-child(2) a.here::before { - background-position: -186px -10px; -} -.tab-item-list li:nth-child(3) a::before { - background-position: -54px -10px; -} -.tab-item-list li:nth-child(3) a.here::before { - background-position: -54px -10px; -} -.tab-item-list li:nth-child(4) a::before { - background-position: -318px -10px; -} -.tab-item-list li:nth-child(4) a.here::before { - background-position: -274px -10px; -} \ No newline at end of file diff --git a/css/header.css b/css/header.css deleted file mode 100644 index a810a8b..0000000 --- a/css/header.css +++ /dev/null @@ -1,142 +0,0 @@ -.top { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-bottom: 0.0625rem solid #dbdbdb; -} - -.nav-main { - padding: 0.8125rem 1rem; -} -.nav-search { - padding: 0.5625rem 1rem; -} -.nav-basic, .nav-chat { - padding: 0.1875rem 0.3125rem; -} -.nav-upload { - padding: 0.1875rem 1rem 0.3125rem 0.1875rem; -} - -.btn-back { - width: 2.75rem; - height: 2.75rem; - background: url("../assets/icon/icon-arrow-left.svg") no-repeat center; -} - -.btn-option, .btn-more { - width: 2.75rem; - height: 2.75rem; - background: url("../assets/icon/icon-more-vertical.svg") no-repeat center; -} - -.highContrast .btn-back { - background-image: url("../assets/icon/icon-arrow-left-hc.svg"); -} -.highContrast .btn-option, .highContrast .btn-more { - background-image: url("../assets/icon/icon-more-vertical-hc.svg"); -} - -.nav-basic .btn-back, .nav-upload .btn-back { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; -} -.nav-basic .btn-option, .nav-basic .btn-save, .nav-basic #upload-btn, .nav-upload .btn-option, .nav-upload .btn-save, .nav-upload #upload-btn { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; -} - -.nav-chat .btn-back, .nav-chat .profile-img, .comment .btn-back, .comment .profile-img { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; - margin-right: 0.625rem; -} -.nav-chat .title-chat, .nav-chat #commemt-input, .comment .title-chat, .comment #commemt-input { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - margin-right: auto; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; -} -.nav-chat .btn-comment, .comment .btn-comment { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; - margin-left: auto; - -ms-flex-preferred-size: 8%; - flex-basis: 8%; -} - -.nav-search .btn-button { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; -} -.nav-search #inp-search { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - margin-left: 1.25rem; - border-radius: 2rem; - padding: 0.4375rem 0rem 0.4375rem 1rem; - background-color: #f2f2f2; - line-height: 1.125rem; -} -.nav-search input::-webkit-input-placeholder { - color: #c4c4c4; -} -.nav-search input::-moz-placeholder { - color: #c4c4c4; -} -.nav-search input:-ms-input-placeholder { - color: #c4c4c4; -} -.nav-search input::-ms-input-placeholder { - color: #c4c4c4; -} -.nav-search input::placeholder { - color: #c4c4c4; -} - -.nav-main .title-main { - font-size: 1.125rem; - font-weight: 500; -} - -.nav-chat .title-chat { - font-size: 0.875rem; - font-weight: 500; -} - -.nav-chat .btn-back, .nav-chat .profile-img, .comment .btn-back, .comment .profile-img { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; - margin-right: 0.625rem; -} -.nav-chat .title-chat, .nav-chat #commemt-input, .comment .title-chat, .comment #commemt-input { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - margin-right: auto; -} -.nav-chat .btn-option, .nav-chat .btn-comment, .comment .btn-option, .comment .btn-comment { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; - margin-left: auto; -} \ No newline at end of file diff --git a/css/home_search.css b/css/home_search.css deleted file mode 100644 index dc6d117..0000000 --- a/css/home_search.css +++ /dev/null @@ -1,108 +0,0 @@ -main { - padding-bottom: 4.0625rem; -} - -.user-follow { - height: 2.625rem; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} -.user-follow .img-cover { - display: inline-block; - overflow: hidden; - border-radius: 50%; - width: 2.25rem; - height: 2.25rem; - border: 0.0625rem solid #dbdbdb; -} -.user-follow .img-cover img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} -.user-follow .profile-img { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; - margin-right: 0.75rem; -} - -.user-info { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - margin-right: auto; -} -.user-info .user-name { - font-size: 0.875rem; - font-weight: 500; - line-height: 1.125rem; - color: #000000; -} -.theme-wrapper.highContrast .user-info .user-name { - color: #ffffff; -} - -.user-info .user-id { - color: #767676; - font-size: 0.75rem; - font-weight: 400; - margin-top: 0.125rem; -} -.theme-wrapper.highContrast .user-info .user-id { - color: #f2f2f2; -} - -.user-info .user-id:before { - content: "@ "; -} -.user-info .user-name strong, .user-info .user-id strong { - color: #9747FF; -} -.theme-wrapper.highContrast .user-info .user-name strong, .theme-wrapper.highContrast .user-info .user-id strong { - color: #FFEB32; -} - -.search-user-list { - margin-left: 1rem; - margin-top: 1.25rem; -} -.search-user-list li { - margin-bottom: 1rem; -} - -#inp-search { - background-color: #f2f2f2; -} -.theme-wrapper.highContrast #inp-search { - background-color: #bdbdbd; -} - -.theme-wrapper.highContrast #inp-search::-webkit-input-placeholder { - color: #000000; -} - -.theme-wrapper.highContrast #inp-search::-moz-placeholder { - color: #000000; -} - -.theme-wrapper.highContrast #inp-search:-ms-input-placeholder { - color: #000000; -} - -.theme-wrapper.highContrast #inp-search::-ms-input-placeholder { - color: #000000; -} - -.theme-wrapper.highContrast #inp-search::placeholder { - color: #000000; -} \ No newline at end of file diff --git a/css/home_withoutfollowers.css b/css/home_withoutfollowers.css deleted file mode 100644 index b2acd5e..0000000 --- a/css/home_withoutfollowers.css +++ /dev/null @@ -1,113 +0,0 @@ -.title-main { - color: #000000; -} -.home-wrapper.highContrast .title-main { - color: #ffffff; -} - -.main-container { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} -.main-container p, -.main-container div, -.main-container a { - margin-bottom: 1.25rem; - text-align: center; -} -.main-container p { - font-size: 0.875rem; - color: #767676; -} -.home-wrapper.highContrast .main-container p { - color: #f2f2f2; -} - -.home-post-list { - padding-left: 1rem; - padding-right: 1rem; - margin-bottom: 4.0625rem; -} - -.home-background { - background-image: url(../assets/symbol/light-gray.svg); - background-size: contain; - width: 4.5rem; - height: 6.25rem; -} -.home-wrapper.highContrast .home-background { - background-image: url(../assets/symbol/hc-basic.svg); -} - -.search-btn { - background-color: #635CA5; - color: #ffffff; - font-weight: 500; - text-align: center; - width: 7.5rem; - padding: 0.8125rem 0; - border-radius: 2.75rem; - font-size: 0.875rem; -} -.home-wrapper.highContrast .search-btn { - background-color: #E4D6FF; -} - -.home-wrapper.highContrast .search-btn { - color: #000000; -} - -.home-post .user-follow .user-info { - color: #000000; -} -.home-post .user-follow .user-info .user-id { - color: #767676; -} -.home-wrapper.highContrast .home-post .user-follow .user-info .user-id { - color: #f2f2f2; -} - -.home-wrapper.highContrast .home-post .user-follow .user-info { - color: #ffffff; -} - -.post-text { - color: #000000; -} -.home-wrapper.highContrast .post-text { - color: #ffffff; -} - -.cnt { - color: #767676; -} -.home-wrapper.highContrast .cnt { - color: #f2f2f2; -} - -.btn-comment { - color: #767676; -} -.home-wrapper.highContrast .btn-comment { - color: #f2f2f2; -} - -.post-date { - color: #767676; -} -.home-wrapper.highContrast .post-date { - color: #f2f2f2; -} \ No newline at end of file diff --git a/css/join_membership.css b/css/join_membership.css deleted file mode 100644 index 0e9f319..0000000 --- a/css/join_membership.css +++ /dev/null @@ -1,251 +0,0 @@ -.join { - padding: 2.125rem; -} - -h2, -p { - color: #767676; - text-align: center; - font-size: 0.875rem; -} -.theme-wrapper.highContrast h2, -.theme-wrapper.highContrast p { - color: #f2f2f2; -} - -.title { - font-size: 1.5rem; - color: #000000; -} -.theme-wrapper.highContrast .title { - color: #ffffff; -} - -.join-email form { - margin-top: 2.5rem; -} - -.profile-setting form { - margin-top: 1.875rem; -} -.profile-setting .title { - margin-bottom: 0.75rem; -} - -form { - min-width: 330px; - max-width: 40%; - margin: 0 auto; - color: #767676; - color: #767676; - font-size: 0.75rem; -} -.theme-wrapper.highContrast form { - color: #f2f2f2; -} - -form .profile-img { - position: relative; - width: 6.875rem; - margin: 0 auto 1.875rem; -} -form .profile-img .img-cover { - width: 6.875rem; - display: inline-block; - overflow: hidden; - border-radius: 50%; -} -form .profile-img .img-cover img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} -form .upload-img circle { - fill: #9C85C5; -} -.theme-wrapper.highContrast form .upload-img circle { - fill: #E4D6FF; -} - -form .upload-img path { - stroke: #ffffff; -} -.theme-wrapper.highContrast form .upload-img path { - stroke: #000000; -} - -form > fieldset { - margin-bottom: 1rem; -} -form label { - color: #767676; - margin-bottom: 0.125rem; - display: block; - text-align: start; -} -.theme-wrapper.highContrast form label { - color: #f2f2f2; -} - -form label.btn-upload { - position: absolute; - right: 0; - bottom: 0; - border: none; - background-color: transparent; - margin: 0; -} -form label.btn-upload svg > circle { - fill: #9C85C5; -} -form input { - display: block; - background-color: #ffffff; - color: #000000; - width: 100%; - border: none; - border-bottom: 0.0625rem solid #dbdbdb; - padding: 0.5rem 0; -} -.theme-wrapper.highContrast form input { - background-color: #000000; -} - -.theme-wrapper.highContrast form input { - color: #ffffff; -} - -form input::-webkit-input-placeholder { - color: #c4c4c4; -} - -form input::-moz-placeholder { - color: #c4c4c4; -} - -form input:-ms-input-placeholder { - color: #c4c4c4; -} - -form input::-ms-input-placeholder { - color: #c4c4c4; -} - -form input::placeholder { - color: #c4c4c4; -} -.theme-wrapper.highContrast form input::-webkit-input-placeholder { - color: #FFEB32; -} -.theme-wrapper.highContrast form input::-moz-placeholder { - color: #FFEB32; -} -.theme-wrapper.highContrast form input:-ms-input-placeholder { - color: #FFEB32; -} -.theme-wrapper.highContrast form input::-ms-input-placeholder { - color: #FFEB32; -} -.theme-wrapper.highContrast form input::placeholder { - color: #FFEB32; -} - -form input.btn-upload { - display: none; -} -form input::-webkit-input-placeholder { - font-size: 0.875rem; - color: #dbdbdb; -} -form input::-moz-placeholder { - font-size: 0.875rem; - color: #dbdbdb; -} -form input:-ms-input-placeholder { - font-size: 0.875rem; - color: #dbdbdb; -} -form input::-ms-input-placeholder { - font-size: 0.875rem; - color: #dbdbdb; -} -form input::placeholder { - font-size: 0.875rem; - color: #dbdbdb; -} -form input:focus { - border-bottom: 0.0625rem solid #9747FF; - outline: none; -} -form [class^=warning-msg] { - color: #EB5757; - font-size: 0.75rem; - display: none; - margin-top: 0.375rem; -} -.theme-wrapper.highContrast form [class^=warning-msg] { - color: #FFEB32; -} - -button { - display: block; - border: solid 0.0625rem; - border-radius: 2.75rem; - margin: 0 auto; -} - -.size-l { - margin-top: 1.875rem; - background-color: #635CA5; - color: #ffffff; - -webkit-box-shadow: none; - box-shadow: none; - font-weight: 500; - width: 100%; - padding: 0.8125rem 0rem; - border-radius: 2.75rem; - font-size: 0.875rem; -} -.theme-wrapper.highContrast .size-l { - background-color: #E4D6FF; -} - -.theme-wrapper.highContrast .size-l { - color: #000000; -} - -.theme-wrapper.highContrast .size-l { - -webkit-box-shadow: 0 0 0 2px #E4D6FF inset; - box-shadow: 0 0 0 2px #E4D6FF inset; -} - -.btn-next { - border: none; - margin-top: 1.875rem; - padding: 0.8125rem; -} - -.btn-next:disabled { - background-color: #BCADDC; - color: #000000; - -webkit-box-shadow: none; - box-shadow: none; -} -.theme-wrapper.highContrast .btn-next:disabled { - background-color: transparent; -} - -.theme-wrapper.highContrast .btn-next:disabled { - color: #ffffff; -} - -.theme-wrapper.highContrast .btn-next:disabled { - -webkit-box-shadow: 0 0 0 2px #E4D6FF inset; - box-shadow: 0 0 0 2px #E4D6FF inset; -} - -.btn-upload { - cursor: pointer; -} \ No newline at end of file diff --git a/css/login.css b/css/login.css deleted file mode 100644 index ded0023..0000000 --- a/css/login.css +++ /dev/null @@ -1,109 +0,0 @@ -body { - background-color: #635CA5; - position: relative; - text-align: center; -} - -.back { - height: calc(100vh - 19.375rem); - background-image: url(../assets/symbol/light-basic.svg); - background-repeat: no-repeat; - background-position: 98% 98%; -} -.theme-wrapper.highContrast .back { - background-image: url(../assets/symbol/hc-basic.svg); -} - -.login { - background-color: #ffffff; - border-radius: 1.25rem 1.25rem 0 0; - padding: 3.125rem 2.125rem 5.125rem; - min-width: 24.375rem; - width: 100%; - position: fixed; - bottom: 0; -} -.theme-wrapper.highContrast .login { - background-color: #000000; -} - -.domain { - display: block; - border: 0.0625rem solid #767676; - border-radius: 2.75rem; - font-size: 0.875rem; - padding: 0.8125rem; - position: relative; - color: #767676; -} -.theme-wrapper.highContrast .domain { - color: #f2f2f2; -} - -.domain + .domain { - margin-top: 0.625rem; -} -.domain::before { - content: ""; - display: inline-block; - width: 24px; - height: 24px; - position: absolute; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); - top: 50%; - left: 10px; - background-repeat: no-repeat; - background-size: 132px 44px; - background-image: url(../assets/sprites/sns-logo-sprites.png); -} -.domain.kakao { - border-color: #F2C94C; -} -.theme-wrapper.highContrast .domain.kakao { - border-color: #FFEB32; -} - -.domain.kakao::before { - background-position: -10px -10px; -} -.domain.google { - border-color: #767676; -} -.theme-wrapper.highContrast .domain.google { - border-color: #65FB76; -} - -.domain.google::before { - background-position: -54px -10px; -} -.domain.facebook { - border-color: #2D9CDB; -} -.theme-wrapper.highContrast .domain.facebook { - border-color: #B3E3FF; -} - -.domain.facebook::before { - background-position: -98px -10px; -} - -.email { - font-size: 0.75rem; - margin-top: 1.25rem; - color: #767676; -} -.theme-wrapper.highContrast .email { - color: #f2f2f2; -} - -.email a { - color: #767676; -} -.theme-wrapper.highContrast .email a { - color: #f2f2f2; -} - -.email span { - margin: 0 0.75rem; -} \ No newline at end of file diff --git a/css/login_email.css b/css/login_email.css deleted file mode 100644 index ce02192..0000000 --- a/css/login_email.css +++ /dev/null @@ -1,160 +0,0 @@ -.login { - padding: 1.875rem; -} - -.title { - text-align: center; - font-size: 1.5rem; - color: #000000; -} -.theme-wrapper.highContrast .title { - color: #ffffff; -} - -.join { - color: #767676; - font-size: 0.75rem; - display: inline-block; - margin: 1.25rem auto 0; -} - -form { - min-width: 330px; - max-width: 40%; - margin: 0 auto; - margin-top: 2.5rem; - color: #767676; - font-size: 0.75rem; -} -.theme-wrapper.highContrast form { - color: #f2f2f2; -} - -form > label { - color: #767676; - margin-bottom: 0.125rem; - display: block; - margin-top: 1rem; -} -.theme-wrapper.highContrast form > label { - color: #f2f2f2; -} - -form > input { - display: block; - width: 100%; - background-color: #ffffff; - color: #000000; - border: none; - border-bottom: 0.0625rem solid #dbdbdb; - padding: 0.5rem 0; - margin-bottom: 1rem; -} -.theme-wrapper.highContrast form > input { - background-color: #000000; -} - -.theme-wrapper.highContrast form > input { - color: #ffffff; -} - -form > input::-webkit-input-placeholder { - font-size: 0.875rem; - color: #dbdbdb; -} - -form > input::-moz-placeholder { - font-size: 0.875rem; - color: #dbdbdb; -} - -form > input:-ms-input-placeholder { - font-size: 0.875rem; - color: #dbdbdb; -} - -form > input::-ms-input-placeholder { - font-size: 0.875rem; - color: #dbdbdb; -} - -form > input::placeholder { - font-size: 0.875rem; - color: #dbdbdb; -} - -.size-l { - margin-top: 1.875rem; - background-color: #635CA5; - color: #ffffff; - -webkit-box-shadow: none; - box-shadow: none; - font-weight: 500; - width: 100%; - padding: 0.8125rem 0rem; - border-radius: 2.75rem; - font-size: 0.875rem; -} -.theme-wrapper.highContrast .size-l { - background-color: #E4D6FF; -} - -.theme-wrapper.highContrast .size-l { - color: #000000; -} - -.theme-wrapper.highContrast .size-l { - -webkit-box-shadow: 0 0 0 2px #E4D6FF inset; - box-shadow: 0 0 0 2px #E4D6FF inset; -} - -.size-l:disabled { - background-color: #BCADDC; - color: #000000; - -webkit-box-shadow: none; - box-shadow: none; -} -.theme-wrapper.highContrast .size-l:disabled { - background-color: transparent; -} - -.theme-wrapper.highContrast .size-l:disabled { - color: #ffffff; -} - -.theme-wrapper.highContrast .size-l:disabled { - -webkit-box-shadow: 0 0 0 2px #E4D6FF inset; - box-shadow: 0 0 0 2px #E4D6FF inset; -} - -[class^=warning-msg] { - color: #EB5757; - font-size: 0.75rem; - display: none; - margin-top: 0.375rem; -} -.theme-wrapper.highContrast [class^=warning-msg] { - color: #FFEB32; -} - -.email-join { - text-align: center; -} -.email-join a { - color: #767676; -} -.theme-wrapper.highContrast .email-join a { - color: #f2f2f2; -} - -input:focus { - border-bottom: 0.0625rem solid #9747FF; - outline: none; -} - -.color-wrapper { - background-color: #ffffff; -} -.theme-wrapper.highContrast .color-wrapper { - background-color: #000000; -} \ No newline at end of file diff --git a/css/modal.css b/css/modal.css deleted file mode 100644 index a3b01db..0000000 --- a/css/modal.css +++ /dev/null @@ -1,137 +0,0 @@ -.stop-scroll { - height: 100%; - overflow: hidden; -} - -.post-modal-background { - display: none; - position: fixed; - width: 100%; - height: 100%; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); -} -.theme-wrapper.highContrast .post-modal-background { - background-color: rgba(236, 236, 236, 0.34); -} - -.post-modal-background .post-modal-content { - background-color: #ffffff; - padding-bottom: 0.625rem; - border-radius: 1.25rem 1.25rem 0 0; - position: absolute; - bottom: 0; - left: 0; - right: 0; -} -.theme-wrapper.highContrast .post-modal-background .post-modal-content { - background-color: #000000; -} - -.post-modal-background .modal-content { - padding: 0rem 1.625rem; - font-weight: 400; - line-height: 1.125rem; -} -.post-modal-background .post-modal-bar { - background-color: #dbdbdb; - width: 3.125rem; - height: 0.25rem; - margin: 1rem auto; -} -.post-modal-background .modal-description { - width: 100%; - text-align: left; - padding: 0.875rem 0rem; - color: #000000; - font-size: 0.875rem; -} -.theme-wrapper.highContrast .post-modal-background .modal-description { - color: #ffffff; -} - -.modal-background { - visibility: hidden; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} -.theme-wrapper.highContrast .modal-background { - background-color: rgba(236, 236, 236, 0.34); -} - -.modal-background .modal-content { - width: 15.75rem; - background-color: #ffffff; - border-radius: 0.625rem; - text-align: center; - position: absolute; - bottom: 50%; - right: 50%; - -webkit-transform: translate(50%, 50%); - transform: translate(50%, 50%); -} -.theme-wrapper.highContrast .modal-background .modal-content { - background-color: #000000; -} - -.modal-background .modal-content .modal-description { - padding: 1.375rem 2.5rem; - font-size: 1rem; - border-bottom: 0.0313rem solid #dbdbdb; - color: #000000; - font-weight: 500; -} -.theme-wrapper.highContrast .modal-background .modal-content .modal-description { - color: #ffffff; -} - -.modal-actions { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - font-weight: 400; -} -.modal-actions .left-button { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; - width: 7.875rem; - padding: 0.875rem 3rem; - font-size: 0.875rem; - color: #000000; - border-right: 0.0313rem solid #dbdbdb; -} -.theme-wrapper.highContrast .modal-actions .left-button { - color: #ffffff; -} - -.modal-actions .right-button { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - width: 7.875rem; - padding: 0.875rem 2.1875rem; - color: #9747FF; - font-size: 0.875rem; -} -.theme-wrapper.highContrast .modal-actions .right-button { - color: #FFEB32; -} - -.mode_select label { - display: block; - padding: 0.875rem 0rem; -} -.mode_select label > input { - margin-right: 0.9375rem; -} \ No newline at end of file diff --git a/css/post.css b/css/post.css deleted file mode 100644 index f2efcfb..0000000 --- a/css/post.css +++ /dev/null @@ -1,152 +0,0 @@ -.home-post, .home-post-onlytext { - margin-top: 1.25rem; -} - -.user-follow { - height: 2.625rem; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} -.user-follow .img-cover { - display: inline-block; - overflow: hidden; - border-radius: 50%; - width: 2.25rem; - height: 2.25rem; - border: 0.0625rem solid #dbdbdb; -} -.user-follow .img-cover img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} -.user-follow .profile-img { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; - margin-right: 0.75rem; -} -.user-follow .user-info { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - margin-right: auto; -} - -.home-post { - position: relative; -} -.home-post .btn-option { - width: 1.5rem; - position: absolute; - top: 0; - right: -0.75rem; - -webkit-transform: translateX(-25%); - transform: translateX(-25%); -} -.home-post .btn-option img { - width: 100%; -} -.home-post .btn-like.like svg { - fill: #9747FF; -} -.home-post .btn-like.like svg path { - stroke: #9747FF; -} - -.user-info .user-name { - font-size: 0.875rem; - font-weight: 500; - line-height: 1.125rem; - color: #000000; -} -.theme-wrapper.highContrast .user-info .user-name { - color: #ffffff; -} - -.user-info .user-id { - color: #767676; - font-size: 0.75rem; - font-weight: 400; - margin-top: 0.125rem; -} -.theme-wrapper.highContrast .user-info .user-id { - color: #f2f2f2; -} - -.user-info .user-id:before { - content: "@ "; -} - -.post-edit { - margin: 1rem auto 1rem 3.375rem; - padding-bottom: 0.3125rem; -} -.post-edit a:first-child { - display: block; -} -.post-edit .post-text { - color: #000000; - margin-bottom: 1rem; - line-height: 1.125rem; - word-break: break-all; - white-space: pre-line; -} -.theme-wrapper.highContrast .post-edit .post-text { - color: #ffffff; -} - -.post-edit .img-cover { - width: 19rem; - height: 19rem; - margin-bottom: 0.75rem; - border-radius: 0.625rem; - overflow: hidden; - border: 0.0625rem solid #dbdbdb; -} -.post-edit .img-cover .post-img { - width: 100%; - height: 100%; - -o-object-fit: contain; - object-fit: contain; -} - -.post-icon { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - gap: 0.5rem; - margin-bottom: 1rem; - color: #767676; - font-size: 0.75rem; -} -.post-icon > * { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - gap: 0.25rem; - color: inherit; -} - -.post-date { - color: #767676; - font-size: 0.625rem; -} -.theme-wrapper.highContrast .post-date { - color: #f2f2f2; -} \ No newline at end of file diff --git a/css/post_detail.css b/css/post_detail.css deleted file mode 100644 index 9a2142d..0000000 --- a/css/post_detail.css +++ /dev/null @@ -1,164 +0,0 @@ -main { - margin: 0 0.9375rem; - margin-bottom: 3.8125rem; -} - -.home-post { - border-bottom: 0.0625rem solid #dbdbdb; -} - -.comment-list { - margin-top: 1.25rem; -} -.comment-list .comment-item { - margin-top: 1.25rem; - position: relative; -} -.comment-list .comment-item .comment-time { - display: inline-block; - font-size: 0.625rem; - color: #767676; - line-height: 1.125rem; - vertical-align: top; - margin-top: 0.375rem; - padding-left: 0.75rem; -} -.theme-wrapper.highContrast .comment-list .comment-item .comment-time { - color: #f2f2f2; -} - -.comment-list .comment-item .comment-text { - margin-left: 3.375rem; - margin-right: 1.5rem; - line-height: 1.5; - font-weight: 400; - font-size: 0.875rem; - color: #000000; -} -.theme-wrapper.highContrast .comment-list .comment-item .comment-text { - color: #ffffff; -} - -.comment-list .comment-item .btn-more { - position: absolute; - top: 0; - left: calc(100% - 44px); - -webkit-transform: translate(0, 25%); - transform: translate(0, 25%); -} - -.comment-user-info { - display: inline-block; -} -.comment-user-info .img-cover { - display: inline-block; - overflow: hidden; - border-radius: 50%; - width: 2.25rem; - height: 2.25rem; -} -.comment-user-info .img-cover img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} -.comment-user-info .user-name { - display: inline-block; - line-height: 1.1875rem; - vertical-align: top; - margin-top: 0.375rem; - margin-left: 0.75rem; - font-weight: 500; - font-size: 0.875rem; - color: #000000; -} -.theme-wrapper.highContrast .comment-user-info .user-name { - color: #ffffff; -} - -.comment .img-cover { - display: inline-block; - overflow: hidden; - border-radius: 50%; - width: 2.25rem; - height: 2.25rem; - margin-right: 0.625rem; -} -.comment .img-cover img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} -.comment #commemt-input { - padding: 0.5rem; - margin-right: 0.625rem; - color: #000000; - background-color: #ffffff; -} -.theme-wrapper.highContrast .comment #commemt-input { - color: #ffffff; -} - -.theme-wrapper.highContrast .comment #commemt-input { - background-color: #000000; -} - -.comment button:not(:disabled) { - color: #635CA5; -} -.theme-wrapper.highContrast .comment button:not(:disabled) { - color: #FFEB32; -} - -#comment-input::-webkit-input-placeholder { - color: #c4c4c4; -} - -#comment-input::-moz-placeholder { - color: #c4c4c4; -} - -#comment-input:-ms-input-placeholder { - color: #c4c4c4; -} - -#comment-input::-ms-input-placeholder { - color: #c4c4c4; -} - -#comment-input::placeholder { - color: #c4c4c4; -} -.theme-wrapper.highContrast #comment-input::-webkit-input-placeholder { - color: #bdbdbd; -} -.theme-wrapper.highContrast #comment-input::-moz-placeholder { - color: #bdbdbd; -} -.theme-wrapper.highContrast #comment-input:-ms-input-placeholder { - color: #bdbdbd; -} -.theme-wrapper.highContrast #comment-input::-ms-input-placeholder { - color: #bdbdbd; -} -.theme-wrapper.highContrast #comment-input::placeholder { - color: #bdbdbd; -} - -.post-icon path { - stroke: #767676; -} -.theme-wrapper.highContrast .post-icon path { - stroke: #f2f2f2; -} - -.post-icon span { - color: #767676; -} -.theme-wrapper.highContrast .post-icon span { - color: #f2f2f2; -} \ No newline at end of file diff --git a/css/post_upload.css b/css/post_upload.css deleted file mode 100644 index e391791..0000000 --- a/css/post_upload.css +++ /dev/null @@ -1,175 +0,0 @@ -main { - padding: 1.25rem 1rem; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - max-width: 50rem; - margin: auto; -} - -form { - width: 100%; - max-height: 31.25rem; - overflow: hidden; -} -form > * { - display: block; -} -form textarea { - background-color: #ffffff; - color: #000000; - width: calc(100% - 24px); - height: -webkit-fit-content; - height: -moz-fit-content; - height: fit-content; - min-height: 9.375rem; - margin: 0.75rem; - border: none; - resize: none; -} -.theme-wrapper.highContrast form textarea { - background-color: #000000; -} - -.theme-wrapper.highContrast form textarea { - color: #ffffff; -} - -form textarea::-webkit-scrollbar { - display: none; -} -form textarea::-webkit-input-placeholder { - color: #767676; -} -form textarea::-moz-placeholder { - color: #767676; -} -form textarea:-ms-input-placeholder { - color: #767676; -} -form textarea::-ms-input-placeholder { - color: #767676; -} -form textarea::placeholder { - color: #767676; -} -.theme-wrapper.highContrast form textarea::-webkit-input-placeholder { - color: #f2f2f2; -} -.theme-wrapper.highContrast form textarea::-moz-placeholder { - color: #f2f2f2; -} -.theme-wrapper.highContrast form textarea:-ms-input-placeholder { - color: #f2f2f2; -} -.theme-wrapper.highContrast form textarea::-ms-input-placeholder { - color: #f2f2f2; -} -.theme-wrapper.highContrast form textarea::placeholder { - color: #f2f2f2; -} - -form .img-cover { - width: 30vw; - max-width: 19rem; - min-width: 10.5rem; - aspect-ratio: 304/228; - border-radius: 0.625rem; - overflow: hidden; - position: relative; - -webkit-box-shadow: rgba(99, 99, 99, 0.2) 0 0.125rem 0.5rem 0; - box-shadow: rgba(99, 99, 99, 0.2) 0 0.125rem 0.5rem 0; -} -form .img-cover img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} -form .img-cover button { - position: absolute; - top: 0.625rem; - right: 0.625rem; -} - -.user-profile { - display: inline-block; - overflow: hidden; - border-radius: 50%; - width: 2.625rem; - height: 2.625rem; -} -.user-profile img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} - -.input-file-btn { - width: 3.125rem; - height: 3.125rem; - margin-left: auto; - cursor: pointer; -} -.input-file-btn img { - width: 3.125rem; - height: 3.125rem; -} - -.upload-imgs-list { - white-space: nowrap; - overflow-x: scroll; - margin-top: 1rem; - margin-left: 0.75rem; - margin-bottom: 0.625rem; -} -.upload-imgs-list > li { - display: inline-block; - margin-right: 0.5rem; -} -.upload-imgs-list::-webkit-scrollbar { - display: none; -} - -.btn-remove { - background-image: url("../assets/icon/x.svg"); - width: 1.375rem; - height: 1.375rem; -} - -.size-ms:disabled { - background-color: #BCADDC; - color: #767676; - -webkit-box-shadow: none; - box-shadow: none; -} -.theme-wrapper.highContrast .size-ms:disabled { - background-color: transparent; -} - -.theme-wrapper.highContrast .size-ms:disabled { - color: #f2f2f2; -} - -.theme-wrapper.highContrast .size-ms:disabled { - -webkit-box-shadow: 0 0 0 2px #E4D6FF inset; - box-shadow: 0 0 0 2px #E4D6FF inset; -} - -.size-ms { - background-color: #635CA5; - color: #ffffff; -} -.theme-wrapper.highContrast .size-ms { - background-color: #E4D6FF; -} - -.theme-wrapper.highContrast .size-ms { - color: #000000; -} \ No newline at end of file diff --git a/css/product.css b/css/product.css deleted file mode 100644 index 524a592..0000000 --- a/css/product.css +++ /dev/null @@ -1,192 +0,0 @@ -body { - min-width: 24.375rem; -} - -main { - width: inherit; - padding: 0 2.125rem; - margin-top: 1.875rem; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -form { - min-width: 322px; - max-width: 40%; - margin: 0 auto; - color: #767676; - font-size: 0.75rem; -} -form > label { - color: #767676; - margin-bottom: 0.125rem; - display: block; -} -.theme-wrapper.highContrast form > label { - color: #f2f2f2; -} - -form > input { - display: block; - width: 100%; - background-color: #ffffff; - color: #000000; - margin-bottom: 0.375rem; - border: none; - border-bottom: 0.0625rem solid #dbdbdb; - padding: 0.5rem 0; -} -.theme-wrapper.highContrast form > input { - background-color: #000000; -} - -.theme-wrapper.highContrast form > input { - color: #ffffff; -} - -form > input::-webkit-input-placeholder { - font-size: 0.875rem; - color: #c4c4c4; -} - -form > input::-moz-placeholder { - font-size: 0.875rem; - color: #c4c4c4; -} - -form > input:-ms-input-placeholder { - font-size: 0.875rem; - color: #c4c4c4; -} - -form > input::-ms-input-placeholder { - font-size: 0.875rem; - color: #c4c4c4; -} - -form > input::placeholder { - font-size: 0.875rem; - color: #c4c4c4; -} -.theme-wrapper.highContrast form > input::-webkit-input-placeholder { - color: #FFEB32; -} -.theme-wrapper.highContrast form > input::-moz-placeholder { - color: #FFEB32; -} -.theme-wrapper.highContrast form > input:-ms-input-placeholder { - color: #FFEB32; -} -.theme-wrapper.highContrast form > input::-ms-input-placeholder { - color: #FFEB32; -} -.theme-wrapper.highContrast form > input::placeholder { - color: #FFEB32; -} - -form label[for=product-price] { - margin-top: 1rem; -} -form label[for=purchase-link] { - margin-top: 1rem; -} - -.product-img { - border-radius: 1.25rem; - background: #f2f2f2; - position: relative; - aspect-ratio: 5/3; - margin-top: 1.125rem; - margin-bottom: 1.875rem; -} -.product-img .btn-upload { - position: absolute; - right: 0.75rem; - bottom: 0.75rem; -} - -#product-img-upload { - display: none; -} - -.upload-img { - cursor: pointer; -} -.upload-img circle { - fill: #c4c4c4; -} -.theme-wrapper.highContrast .upload-img circle { - fill: #000000; -} - -.btn-upload .upload-img circle:hover { - fill: #635CA5; -} -.theme-wrapper.highContrast .btn-upload .upload-img circle:hover { - fill: #E4D6FF; -} - -.warning-msg-productname { - color: #EB5757; - font-size: 0.75rem; - display: none; -} -.theme-wrapper.highContrast .warning-msg-productname { - color: #FFEB32; -} - -.warning-msg-productprice { - color: #EB5757; - font-size: 0.75rem; - display: none; -} -.theme-wrapper.highContrast .warning-msg-productprice { - color: #FFEB32; -} - -.warning-msg-purchaselink { - color: #EB5757; - font-size: 0.75rem; - display: none; -} -.theme-wrapper.highContrast .warning-msg-purchaselink { - color: #FFEB32; -} - -.size-ms:disabled { - background-color: #BCADDC; - color: #767676; - -webkit-box-shadow: none; - box-shadow: none; -} -.theme-wrapper.highContrast .size-ms:disabled { - background-color: transparent; -} - -.theme-wrapper.highContrast .size-ms:disabled { - color: #f2f2f2; -} - -.theme-wrapper.highContrast .size-ms:disabled { - -webkit-box-shadow: 0 0 0 2px #E4D6FF inset; - box-shadow: 0 0 0 2px #E4D6FF inset; -} - -.size-ms { - background-color: #635CA5; - color: #ffffff; -} -.theme-wrapper.highContrast .size-ms { - background-color: #E4D6FF; -} - -.theme-wrapper.highContrast .size-ms { - color: #000000; -} - -h2 { - color: #767676; -} -.theme-wrapper.highContrast h2 { - color: #f2f2f2; -} \ No newline at end of file diff --git a/css/profile_follow.css b/css/profile_follow.css deleted file mode 100644 index 6dd7ecf..0000000 --- a/css/profile_follow.css +++ /dev/null @@ -1,112 +0,0 @@ -.title-chat { - color: #000000; -} -.theme-wrapper.highContrast .title-chat { - color: #ffffff; -} - -.follow-list { - padding: 1.5rem 1rem; -} -.follow-list li:first-child { - margin-top: 0; -} -.follow-list .follow-item { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 3.125rem; - margin-top: 1rem; -} -.follow-list .follow-item .user-img { - -ms-flex-negative: 0; - flex-shrink: 0; - margin-right: 0.75rem; -} -.follow-list .follow-item .user-info { - width: calc(100% - 130px); - -ms-flex-negative: 1; - flex-shrink: 1; - margin-right: 0.75rem; -} -.follow-list .follow-item .user-info a { - color: #000000; -} -.theme-wrapper.highContrast .follow-list .follow-item .user-info a { - color: #ffffff; -} - -.follow-list .follow-item .user-info p { - color: #767676; -} -.theme-wrapper.highContrast .follow-list .follow-item .user-info p { - color: #f2f2f2; -} - -.follow-list .follow-item .user-info .user-name { - display: inline-block; - margin-bottom: 0.375rem; - font-weight: 500; - line-height: 1.125rem; - font-size: 0.875rem; -} -.follow-list .follow-item .user-info .user-intro { - font-weight: 400; - line-height: 0.9375rem; - font-size: 0.75rem; - color: #767676; -} - -.btn-follow { - -ms-flex-negative: 0; - flex-shrink: 0; - -ms-flex-preferred-size: 3.5rem; - flex-basis: 3.5rem; - height: 1.75rem; - margin-left: auto; - color: #ffffff; - background-color: #635CA5; - border-radius: 1.625rem; -} -.theme-wrapper.highContrast .btn-follow { - color: #000000; -} - -.theme-wrapper.highContrast .btn-follow { - background-color: #E4D6FF; -} - -.btn-follow.opposite { - color: #767676; - background-color: #ffffff; - border: 1px solid #f2f2f2; -} -.theme-wrapper.highContrast .btn-follow.opposite { - color: #E4D6FF; -} - -.theme-wrapper.highContrast .btn-follow.opposite { - background-color: transparent; -} - -.theme-wrapper.highContrast .btn-follow.opposite { - border: 2px solid #E4D6FF; -} - -.img-cover { - display: inline-block; - overflow: hidden; - border-radius: 50%; - width: 3.125rem; - height: 3.125rem; -} -.img-cover img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} \ No newline at end of file diff --git a/css/profile_info.css b/css/profile_info.css deleted file mode 100644 index 6010505..0000000 --- a/css/profile_info.css +++ /dev/null @@ -1,295 +0,0 @@ -.img-crop { - margin: 0 auto; - width: 6.875rem; - border-radius: 50%; - overflow: hidden; - border: 0.0625rem solid #dbdbdb; -} -.img-crop img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} - -body { - height: calc(100% + 61px); - background-color: #ffffff; -} - -main { - min-width: 24.375rem; - background-color: #f2f2f2; - margin-bottom: 3.8125rem; -} -main > section { - background-color: #ffffff; -} - -.profile-container { - border: 1px solid #f2f2f2; - border-top: 0; - background-color: #ffffff; - position: relative; - text-align: center; - padding-top: 1.875rem; - padding-bottom: 1.625rem; - padding-right: 3.125rem; - padding-left: 3.125rem; -} -.theme-wrapper.highContrast .profile-container { - border: none; -} - -.theme-wrapper.highContrast .profile-container { - background-color: #000000; -} - -.profile-container a { - text-decoration: none; -} -.profile-container .profile-header { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} -.profile-container .profile-header strong { - color: #000000; -} -.theme-wrapper.highContrast .profile-container .profile-header strong { - color: #ffffff; -} - -.profile-container .profile-header .profile-id { - color: #767676; -} -.theme-wrapper.highContrast .profile-container .profile-header .profile-id { - color: #f2f2f2; -} - -.profile-container .follow-wrap { - position: absolute; - top: 4.0625rem; - left: 50%; - -webkit-transform: translateX(calc(-50% + 1.5rem + 94px)); - transform: translateX(calc(-50% + 1.5rem + 94px)); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1; -} -.profile-container .follow-wrap p { - margin-top: 0.375rem; - font-size: 0.5rem; - color: #767676; -} -.theme-wrapper.highContrast .profile-container .follow-wrap p { - color: #f2f2f2; -} - -.profile-container .follow-wrap > strong { - font-size: 1.125rem; - font-weight: 700; - color: #767676; -} -.profile-container .follow-wrap:nth-of-type(1) { - -webkit-transform: translateX(calc(-50% - 1.5rem - 94px)); - transform: translateX(calc(-50% - 1.5rem - 94px)); -} -.profile-container .follow-wrap:nth-of-type(1) > strong { - color: #000000; -} -.profile-container .profile-name { - display: block; - font-size: 1rem; - font-weight: 700; - margin-top: 1rem; - margin-bottom: 0.625rem; -} -.profile-container .profile-id { - font-size: 0.75rem; -} -.profile-container .profile-id::before { - content: "@ "; -} -.profile-container .profile-intro { - color: #767676; - font-size: 0.875rem; - margin-top: 1rem; - margin-bottom: 1.5rem; -} -.theme-wrapper.highContrast .profile-container .profile-intro { - color: #f2f2f2; -} - -.profile-container .btn-wrap-my { - font-size: 0; - line-height: 0; -} -.profile-container .btn-wrap-my button { - background-color: #ffffff; - color: #767676; -} -.theme-wrapper.highContrast .profile-container .btn-wrap-my button { - background-color: #E4D6FF; -} - -.theme-wrapper.highContrast .profile-container .btn-wrap-my button { - color: #000000; -} - -.profile-container .btn-wrap-my :first-child { - margin-right: 0.75rem; -} -.profile-container .btn-wrap-my .btn-link { - background-color: #ffffff; - border: 0.0625rem solid #dbdbdb; - color: #767676; - border-radius: 1.875rem; - padding: 0.5rem 1.6875rem; - font-size: 0.875rem; - font-weight: 500; -} -.profile-container .btn-wrap-your { - font-size: 0; - line-height: 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} -.profile-container .btn-wrap-your .circle { - border: 1px solid #dbdbdb; - border-radius: 50%; - width: 2.125rem; - height: 2.125rem; - background-repeat: no-repeat; - background-size: 90px 30px; -} -.theme-wrapper.highContrast .profile-container .btn-wrap-your .circle { - border: 1px solid #dbdbdb; -} - -.profile-container .btn-wrap-your .btn-chat { - background-image: url(../assets/sprites/icon-sprites.png); - background-position: -29px 0; -} -.theme-wrapper.highContrast .profile-container .btn-wrap-your .btn-chat { - background-image: url(../assets/sprites/icon-sprites-hc.png); -} - -.profile-container .btn-wrap-your .btn-share { - background-image: url(../assets/sprites/icon-sprites.png); - background-position: -60px 0; -} -.theme-wrapper.highContrast .profile-container .btn-wrap-your .btn-share { - background-image: url(../assets/sprites/icon-sprites-hc.png); -} - -.profile-container .btn-wrap-your .size-m { - margin: 0 0.75rem; - height: 2.125rem; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -.profile-container .btn-wrap-your .size-m.hidden { - display: none; -} - -.product-container { - background-color: #ffffff; -} -.theme-wrapper.highContrast .product-container { - background-color: #000000; -} - -.product-container h2 { - color: #000000; -} -.theme-wrapper.highContrast .product-container h2 { - color: #ffffff; -} - -.product-container .product-name { - color: #000000; -} -.theme-wrapper.highContrast .product-container .product-name { - color: #ffffff; -} - -.product-container .product-price { - color: #BF8DFF; -} -.theme-wrapper.highContrast .product-container .product-price { - color: #C5A8FF; -} - -.post-container { - background-color: #ffffff; -} -.theme-wrapper.highContrast .post-container { - background-color: #000000; -} - -.user-follow .user-info { - color: #000000; -} -.user-follow .user-info .user-id { - color: #767676; -} -.theme-wrapper.highContrast .user-follow .user-info .user-id { - color: #f2f2f2; -} - -.theme-wrapper.highContrast .user-follow .user-info { - color: #ffffff; -} - -.post-text { - color: #000000; -} -.theme-wrapper.highContrast .post-text { - color: #ffffff; -} - -.cnt { - color: #767676; -} -.theme-wrapper.highContrast .cnt { - color: #f2f2f2; -} - -.btn-comment { - color: #767676; -} -.theme-wrapper.highContrast .btn-comment { - color: #f2f2f2; -} - -.post-date { - color: #767676; -} -.theme-wrapper.highContrast .post-date { - color: #f2f2f2; -} - -.content-wrap { - margin-top: 3px; -} - -:root { - background-color: #f2f2f2; -} \ No newline at end of file diff --git a/css/profile_modification.css b/css/profile_modification.css deleted file mode 100644 index e8cdec8..0000000 --- a/css/profile_modification.css +++ /dev/null @@ -1,144 +0,0 @@ -.profile-setting form { - margin-top: 1.875rem; -} -.profile-setting .title { - margin-bottom: 0.75rem; -} - -form { - min-width: 330px; - max-width: 40%; - margin: 0 auto; - color: #767676; - font-size: 0.75rem; -} -form .profile-img { - position: relative; - width: 6.875rem; - margin: 0 auto 1.875rem; -} -form .profile-img .img-cover { - width: 6.875rem; - display: inline-block; - overflow: hidden; - border-radius: 50%; -} -form .profile-img .img-cover img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} -form > fieldset { - margin-bottom: 1rem; -} -form label { - color: #767676; - margin-bottom: 0.125rem; - display: block; - text-align: start; -} -.theme-wrapper.highContrast form label { - color: #f2f2f2; -} - -form label.btn-upload { - position: absolute; - right: 0; - bottom: 0; - border: none; - background-color: transparent; - margin: 0; -} -form label.btn-upload svg > circle { - fill: #635CA5; -} -.theme-wrapper.highContrast form label.btn-upload svg > circle { - fill: #E4D6FF; -} - -form label.btn-upload svg path { - stroke: #ffffff; -} -.theme-wrapper.highContrast form label.btn-upload svg path { - stroke: #000000; -} - -form input { - display: block; - width: 100%; - border: none; - border-bottom: 0.0625rem solid #dbdbdb; - padding: 0.5rem 0; - background-color: #ffffff; - color: #000000; -} -.theme-wrapper.highContrast form input { - background-color: #000000; -} - -.theme-wrapper.highContrast form input { - color: #ffffff; -} - -form input.btn-upload { - display: none; -} -form input::-webkit-input-placeholder { - font-size: 0.875rem; - color: #767676; -} -form input::-moz-placeholder { - font-size: 0.875rem; - color: #767676; -} -form input:-ms-input-placeholder { - font-size: 0.875rem; - color: #767676; -} -form input::-ms-input-placeholder { - font-size: 0.875rem; - color: #767676; -} -form input::placeholder { - font-size: 0.875rem; - color: #767676; -} -.theme-wrapper.highContrast form input::-webkit-input-placeholder { - color: #f2f2f2; -} -.theme-wrapper.highContrast form input::-moz-placeholder { - color: #f2f2f2; -} -.theme-wrapper.highContrast form input:-ms-input-placeholder { - color: #f2f2f2; -} -.theme-wrapper.highContrast form input::-ms-input-placeholder { - color: #f2f2f2; -} -.theme-wrapper.highContrast form input::placeholder { - color: #f2f2f2; -} - -form input:focus { - border-bottom: 1px solid #9747FF; - outline: none; -} -.theme-wrapper.highContrast form input:focus { - border-bottom: 1px solid #FFEB32; -} - -form [class^=warning-msg] { - color: #EB5757; - font-size: 0.75rem; - display: none; - margin-top: 0.375rem; -} -.theme-wrapper.highContrast form [class^=warning-msg] { - color: #FFEB32; -} - -.btn-upload { - cursor: pointer; -} \ No newline at end of file diff --git a/css/profile_productlist.css b/css/profile_productlist.css deleted file mode 100644 index d7d2674..0000000 --- a/css/profile_productlist.css +++ /dev/null @@ -1,67 +0,0 @@ -main { - min-width: 24.375rem; -} - -.product { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - width: 24vw; - min-width: 8.75rem; - text-align: left; -} -.product-container { - overflow: hidden; - padding: 1.25rem 0; - position: relative; - border-top: 0.0625rem solid #dbdbdb; - border-bottom: 0.0625rem solid #dbdbdb; - background-color: #ffffff; -} -.product-container h2 { - margin-bottom: 1rem; - font-weight: 700; - margin-left: 1.125rem; -} -.product-list { - white-space: nowrap; - -webkit-transform: translate(0, 0); - transform: translate(0, 0); -} -.product-list > :first-child { - margin-left: 1.125rem; -} -.product-list > :last-child { - margin-right: 1.125rem; -} -.product-img { - width: 100%; - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1; - border-radius: 0.5rem; - aspect-ratio: 14/9; - -webkit-user-drag: none; -} -.product-name { - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - word-break: break-all; - margin: 0.4375rem 0; -} -.product-item { - display: inline-block; -} -.product-item + .product-item { - margin-left: 0.3125rem; -} -.product-price { - color: #BF8DFF; - font-weight: 700; -} \ No newline at end of file diff --git a/css/profile_view.css b/css/profile_view.css deleted file mode 100644 index 141db8b..0000000 --- a/css/profile_view.css +++ /dev/null @@ -1,87 +0,0 @@ -.post-tab { - height: 2.75rem; - padding: 0.5625rem 1.3125rem; - border-top: 0.0625rem solid #dbdbdb; - border-bottom: 0.0625rem solid #dbdbdb; -} - -.tab-btn-wrap { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; -} -.tab-btn-wrap button { - width: 1.625rem; - height: 1.625rem; - border: none; - background-color: inherit; - margin-left: 1rem; - background-repeat: no-repeat; - background-size: 124px 31px; - background-image: url("../assets/sprites/post-view-sprites.png"); -} -.theme-wrapper.highContrast .tab-btn-wrap button { - background-image: url("../assets/sprites/post-view-sprites-hc.png"); -} - -.tab-btn-wrap .btn-post-list { - background-position: -64.5px -2.5px; -} -.tab-btn-wrap .btn-post-list.on { - background-position: -95.5px -2.5px; -} -.tab-btn-wrap .btn-post-album { - background-position: -2.5px -2.5px; -} -.tab-btn-wrap .btn-post-album.on { - background-position: -33.5px -2.5px; -} - -.post-sec { - width: 100%; - padding: 1rem; -} -.post-sec .post-list li:first-child > section:first-child { - margin-top: 0; -} -.post-sec .post-album { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.5rem; -} -.post-sec .post-list.hidden, -.post-sec .post-album.hidden { - display: none; -} -.post-sec ul { - min-height: calc(100vh - 360px - 247px - 44px - 61px); -} - -.post-album-item { - width: 100%; - height: 100%; - overflow: hidden; -} -.post-album-item a { - display: inline-block; - width: 100%; - height: 100%; -} -.post-album-item a:focus { - border: 0.25rem solid currentColor; -} -.post-album-item img { - width: 100%; - height: 100%; - aspect-ratio: 1/1; - -o-object-fit: cover; - object-fit: cover; -} - -.post-container { - background-color: #ffffff; - margin-top: 0.1875rem; -} \ No newline at end of file diff --git a/css/reset.css b/css/reset.css deleted file mode 100644 index 1776e58..0000000 --- a/css/reset.css +++ /dev/null @@ -1,206 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -figure, -figcaption, -footer, -header, -hgroup, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block; -} -body { - line-height: 1; -} -ol, -ul { - list-style: none; -} -blockquote, -q { - quotes: none; -} -blockquote:before, -blockquote:after, -q:before, -q:after { - content: ""; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} - -/* ===== CUSTOM ===== */ -* { - box-sizing: border-box; -} -button { - cursor: pointer; - border: none; - background-color: initial; - padding: 0; -} -button:disabled { - cursor: default; -} -img { - vertical-align: top; -} -*:focus{ - outline: 2px solid #9747FF; -} - -/* font */ -@font-face { - font-family: Spoqa Han Sans Neo; - src: url("../font/SpoqaHanSansNeo-Thin.woff") format("woff"); - font-weight: 100; -} -@font-face { - font-family: Spoqa Han Sans Neo; - src: url("../font/SpoqaHanSansNeo-Light.woff") format("woff"); - font-weight: 300; -} -@font-face { - font-family: Spoqa Han Sans Neo; - src: url("../font/SpoqaHanSansNeo-Regular.woff") format("woff"); - font-weight: 400; -} -@font-face { - font-family: Spoqa Han Sans Neo; - src: url("../font/SpoqaHanSansNeo-Medium.woff") format("woff"); - font-weight: 500; -} -@font-face { - font-family: Spoqa Han Sans Neo; - src: url("../font/SpoqaHanSansNeo-Bold.woff") format("woff"); - font-weight: 700; -} - -body{ - font-family: 'Spoqa Han Sans Neo'; -} - -.a11y-hidden { - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - width: 1px; - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; -} - -.ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -input{ - border: none; -} - -a{ - color: initial; - text-decoration: initial; -} \ No newline at end of file diff --git a/css/skip_nav.css b/css/skip_nav.css deleted file mode 100644 index ce9c942..0000000 --- a/css/skip_nav.css +++ /dev/null @@ -1,32 +0,0 @@ -.skip-nav { - position: absolute; - width: 100%; - height: 0; - z-index: 10000; -} -.skip-nav a { - display: block; - width: 0.0625rem; - height: 0.0625rem; - margin-bottom: -0.0625rem; - font-weight: bold; - font-size: 0.875rem; - text-align: center; - white-space: nowrap; - background: #1c1c1c; - color: #ffffff; - overflow: hidden; -} -.skip-nav a:focus, .skip-nav a:active { - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; - height: auto; - padding: 0.9375rem; - font-size: 1rem; -} - -.highContrast .skip-nav a { - background: #ffffff; - color: #1c1c1c; -} \ No newline at end of file diff --git a/css/splash.css b/css/splash.css deleted file mode 100644 index 870cf76..0000000 --- a/css/splash.css +++ /dev/null @@ -1,12 +0,0 @@ -.splash { - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} - -.splash img { - display: block; - margin: 15px auto; -} \ No newline at end of file diff --git a/naver58620a79d9c9b9f251caee0753f0748c.html b/naver58620a79d9c9b9f251caee0753f0748c.html deleted file mode 100644 index ef2366e..0000000 --- a/naver58620a79d9c9b9f251caee0753f0748c.html +++ /dev/null @@ -1 +0,0 @@ -naver-site-verification: naver58620a79d9c9b9f251caee0753f0748c.html \ No newline at end of file diff --git a/scss/_mixin.scss b/scss/_mixin.scss deleted file mode 100644 index 7944b2e..0000000 --- a/scss/_mixin.scss +++ /dev/null @@ -1,71 +0,0 @@ -// 믹스인 -@import 'variables'; - -@function get-color($key, $type: 'light') { - @each $name, $color in map-get($theme, $type) { - @if ($key == $name) { - @return $color; - } - } - @return null; // 기본값으로 null 반환 -} - -@mixin get-color($property, $color) { - #{$property}: get-color($color); - - @at-root .theme-wrapper.highContrast & { - #{$property}: get-color($color, highContrast); - } -} - -@mixin image-cover{ - display: inline-block; - overflow: hidden; - border-radius: 50%; -} - -@mixin width-height($width, $height){ - width: $width; - height: $height; -} - -// img 태그 사용 시 공통 부분 -@mixin profile-img-tag{ - img{ - @include width-height(100%, 100%); - aspect-ratio: 1/1; - object-fit: cover; - } -} - -@mixin warning-message($property, $color){ - @include get-color($property, $color); - font-size: map-get($font-sizes, "size12"); - display: none; -} - -@mixin join-btn-size-l{ - .size-l { - margin-top: 1.875rem; - @include get-color(background-color, enabled-btn-color); - @include get-color(color, btn-font-color); - @include get-color(box-shadow, box-shadow); - font-weight: 500; - width: 100%; - padding: 0.8125rem 0rem; - border-radius: 2.75rem; - font-size: map-get($font-sizes, "size14"); - } -} - -@mixin btn-disabled($property, $color) { - @include get-color(background-color, disabled-btn-color); - @include get-color($property, $color); - @include get-color(box-shadow, box-shadow); -} - -@mixin label-tag{ - @include get-color(color, gray-color); - margin-bottom: 0.125rem; - display: block; -} \ No newline at end of file diff --git a/scss/_variables.scss b/scss/_variables.scss deleted file mode 100644 index e4b2b74..0000000 --- a/scss/_variables.scss +++ /dev/null @@ -1,126 +0,0 @@ -// 변수 -$font-sizes: ( - "size24": 1.5rem, - "size18": 1.125rem, - "size16": 1rem, - "size14": .875rem, - "size12": .75rem, - "size10": .625rem, - "size8": .5rem -); - -// 색상 -$enabled-color: #635CA5; -$disabled-color: #BCADDC; -$highlight-color: #9747FF; -$active-color: #9C85C5; -$price-color: #BF8DFF; -$warning-color-text: #EB5757; -$white-color : #ffffff; -$gray50-color : #f2f2f2; -$gray100-color: #dbdbdb; -$gray200-color: #c4c4c4; -$gray250-color: #bdbdbd; -$gray300-color: #767676; -$black-color: #000000; -$purple100-color: #E4D6FF; -$purple200-color: #C5A8FF; -$highContrast-point-color: #FFEB32; - -// border-line -$border-gray100-1px: 0.0625rem solid $gray100-color; - -// 테마 -$theme: ( - light: (bg-color:$white-color, - root-color: $gray50-color, - btn-color: $enabled-color, - btn-back-color: $white-color, - btn-font:$gray300-color, - enabled-btn-color: $enabled-color, - disabled-btn-color: $disabled-color, - font-color: $black-color, - btn-font-color: $white-color, - gray-color: $gray300-color, - box-shadow : none, - border: none, - profile-border : 1px solid $gray50-color, - icon-border : 1px solid $gray100-color, - price-color: $price-color, - placeholder-color:$gray200-color, - warning-color: $warning-color-text, - bg-logo:url(../assets/symbol/light-basic.svg), - footer-icon-sprites : url(../assets/sprites/footer-sprites.png), - btn-post-view: url('../assets/sprites/post-view-sprites.png'), - input-color: $gray50-color, - icon-sprites : url(../assets/sprites/icon-sprites.png), - image-btn: $gray200-color, - border-bottom: 1px solid $warning-color-text, - background-color: rgba(0, 0, 0, 0.5), - send-color:$highlight-color, - mychat-color: $enabled-color, - mychat-border: none, - mychat-font:$white-color, - point-color: $highlight-color, - bg-image: url(../assets/symbol/light-gray.svg), - kakao-color : #F2C94C, - google-color : $gray300-color, - facebook-color : #2D9CDB, - following-btn-bg:$white-color, - following-btn-color:$gray300-color, - following-btn-border:1px solid $gray50-color, - profile-image-btn: $active-color, - comment-placeholder :$gray200-color, - comment-btn:$enabled-color, - img-icon: $enabled-color, - profile-border-bottom:1px solid $highlight-color, - cancle-btn-color: $gray300-color, - cancle-btn-border: $border-gray100-1px, - ), - highContrast: (bg-color:$black-color, - root-color: $black-color, - btn-color: $purple100-color, - btn-back-color: $purple100-color, - btn-font: $black-color, - enabled-btn-color: $purple100-color, - disabled-btn-color: transparent, - font-color: $white-color, - btn-font-color: $black-color, - gray-color: $gray50-color, - box-shadow: 0 0 0 2px $purple100-color inset, - border: 2px solid $purple100-color, - profile-border : none, - icon-border : 1px solid $gray100-color, - price-color: $purple200-color, - placeholder-color:$highContrast-point-color, - search-placeholder-color:$black-color, - warning-color: $highContrast-point-color, - bg-logo:url(../assets/symbol/hc-basic.svg), - footer-icon-sprites : url(../assets/sprites/footer-sprites-hc.png), - btn-post-view: url('../assets/sprites/post-view-sprites-hc.png'), - input-color: $gray250-color, - icon-sprites : url(../assets/sprites/icon-sprites-hc.png), - image-btn: $black-color, - border-bottom: 1px solid $highContrast-point-color, - background-color: rgb(236 236 236 / 34%), - send-color:$highContrast-point-color, - mychat-color: $black-color, - mychat-border: 1px solid $purple200-color, - mychat-font:$purple200-color, - point-color: $highContrast-point-color, - bg-image: url(../assets/symbol/hc-basic.svg), - kakao-color : $highContrast-point-color, - google-color : #65FB76, - facebook-color : #B3E3FF, - following-btn-bg:transparent, - following-btn-color:$purple100-color, - following-btn-border:2px solid $purple100-color, - profile-image-btn: $purple100-color, - comment-placeholder :$gray250-color, - comment-btn:$highContrast-point-color, - img-icon: $purple100-color, - profile-border-bottom:1px solid $highContrast-point-color, - cancle-btn-color: $purple100-color, - cancle-btn-border: 2px solid $purple100-color, - ) -); \ No newline at end of file diff --git a/scss/components/button.scss b/scss/components/button.scss deleted file mode 100644 index 41f4b77..0000000 --- a/scss/components/button.scss +++ /dev/null @@ -1,46 +0,0 @@ -@import '../mixin'; - -.size-l, .size-m, .size-ms, .size-s { - @include get-color(background-color, enabled-btn-color); - @include get-color(color, btn-font-color); -} -.size-l:disabled, .size-m:disabled, .size-ms:disabled, .size-s:disabled { - @include btn-disabled(background-color, disabled-btn-color); -} - -.size{ - &-l{ - font-weight: 500; - width: 20.125rem; - padding: .8125rem 0rem; - border-radius: 2.75rem; - font-size: map-get( $font-sizes, "size14" ); - } - &-m{ - font-weight: 500; - width: 7.5rem; - padding: .5rem 0rem; - border-radius: 1.875rem; - font-size: map-get( $font-sizes, "size14" ); - } - &-ms{ - font-weight: 500; - width: 5.625rem; - padding: .4375rem 0rem; - border-radius: 2rem; - font-size: map-get( $font-sizes, "size14" ); - } - &-s{ - font-weight: 400; - width: 3.5rem; - padding: .4375rem 0rem; - border-radius: 1.625rem; - font-size: map-get( $font-sizes, "size12" ); - } -} - -.cancle{ - @include get-color(background-color, bg-color); - @include get-color(color, cancle-btn-color); - @include get-color(border, cancle-btn-border); -} diff --git a/scss/components/comment.scss b/scss/components/comment.scss deleted file mode 100644 index 54e8957..0000000 --- a/scss/components/comment.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import '../mixin'; - -.comment{ - @include get-color(background-color, bg-color); - display: flex; - justify-content: space-between; - align-items: center; - border-top: $border-gray100-1px; - border-bottom: $border-gray100-1px; - padding: 0.1875rem 0.3125rem; - button{ - font-size: map-get($font-sizes, "size14"); - } - input::placeholder{ - color: $gray200-color; - } -} \ No newline at end of file diff --git a/scss/components/footer.scss b/scss/components/footer.scss deleted file mode 100644 index f4556d5..0000000 --- a/scss/components/footer.scss +++ /dev/null @@ -1,103 +0,0 @@ -@import '../mixin'; - -footer{ - width: 100%; - position: fixed; - bottom: 0; - background-color: $white-color; -} - -.tab-item-list { - border-top: .0313rem solid $gray100-color; - display: flex; - justify-content: space-around; - align-items: center; - @include get-color(background-color, bg-color); - - li { - flex-grow: 1; - display: flex; - justify-content: center; - - a { - top: 0; - width: 100%; - display: inline-block; - font-size: map-get($font-sizes, "size10"); - color: $gray300-color; - text-align: center; - position: relative; - - &::before { - content: ""; - display: inline-block; - width: 1.5rem; - height: 1.5rem; - position: absolute; - transform: translate(-50%, -50%); - top: 35%; - left: 50%; - background-repeat: no-repeat; - background-size: 352px 44px; - @include get-color(background-image, footer-icon-sprites); - } - - &.here { - @include get-color(color, font-color); - } - - &:hover { - background-color: #F1F1F1; - color: $black-color; - } - } - - p { - font-weight: 400; - padding-top: 2.5rem; - padding-bottom: .625rem; - text-align: center; - width: calc(100vw / 4); - } - } - - li:first-child { - a::before { - background-position: -142px -10px; - } - - a.here::before { - background-position: -98px -10px; - } - } - - li:nth-child(2) { - a::before { - background-position: -230px -10px; - } - - a.here::before { - background-position: -186px -10px; - } - } - - li:nth-child(3) { - a::before { - background-position: -54px -10px; - } - - a.here::before { - background-position: -54px -10px; - } - } - - li:nth-child(4) { - a::before { - background-position: -318px -10px; - } - - a.here::before { - background-position: -274px -10px; - } - } -} \ No newline at end of file diff --git a/scss/components/header.scss b/scss/components/header.scss deleted file mode 100644 index 1aa0d17..0000000 --- a/scss/components/header.scss +++ /dev/null @@ -1,112 +0,0 @@ -@import '../mixin'; - -.top{ - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: $border-gray100-1px; -} -.nav{ - &-main { - padding: 0.8125rem 1rem; - } - &-search{ - padding: .5625rem 1rem; - } - &-basic, - &-chat { - padding: 0.1875rem 0.3125rem; - } - &-upload { - padding: 0.1875rem 1rem 0.3125rem 0.1875rem; - } -} - -.btn-back{ - @include width-height(2.75rem, 2.75rem); - background: url('../assets/icon/icon-arrow-left.svg') no-repeat center; -} -.btn-option, .btn-more{ - @include width-height(2.75rem, 2.75rem); - background: url('../assets/icon/icon-more-vertical.svg') no-repeat center; -} - -.highContrast{ - .btn-back{ - background-image: url("../assets/icon/icon-arrow-left-hc.svg"); - } - .btn-option, .btn-more{ - background-image: url('../assets/icon/icon-more-vertical-hc.svg'); - } -} - -.nav-basic, .nav-upload{ - .btn-back{ - order: 0; - } - .btn-option, .btn-save, #upload-btn{ - order: 1; - } -} - -.nav-chat, .comment{ - .btn-back, .profile-img{ - order: 0; - margin-right: .625rem; - } - .title-chat, #commemt-input{ - order: 1; - margin-right: auto; - flex-grow: 1; - } - .btn-comment{ - order: 2; - margin-left: auto; - flex-basis: 8%; - } -} -.nav-search{ - .btn-button{ - order: 0; - } - #inp-search{ - order: 1; - flex-grow: 1; - margin-left: 1.25rem; - border-radius: 2rem; - padding: .4375rem 0rem .4375rem 1rem; - background-color: $gray50-color; - line-height: 1.125rem; - } - input::placeholder{ - color: $gray200-color; - } -} -.nav-main{ - .title-main{ - font-size: map-get($font-sizes,"size18"); - font-weight: 500; - } -} - -.nav-chat{ - .title-chat{ - font-size: map-get($font-sizes,"size14"); - font-weight: 500; - } -} - -.nav-chat, .comment{ - .btn-back, .profile-img{ - order: 0; - margin-right: .625rem; - } - .title-chat, #commemt-input{ - order: 1; - margin-right: auto; - } - .btn-option, .btn-comment{ - order: 2; - margin-left: auto; - } -} \ No newline at end of file diff --git a/scss/components/modal.scss b/scss/components/modal.scss deleted file mode 100644 index 758d559..0000000 --- a/scss/components/modal.scss +++ /dev/null @@ -1,101 +0,0 @@ -@import '../mixin'; - -.stop-scroll{ - height: 100%; - overflow: hidden; -} - -// 하단 모달창 -.post-modal-background{ - display: none; - position: fixed; - @include width-height(100%, 100%); - bottom: 0; - @include get-color(background-color, background-color); - - .post-modal-content{ - @include get-color(background-color, bg-color); - padding-bottom: .625rem; - border-radius: 1.25rem 1.25rem 0 0; - position: absolute; - bottom: 0; - left: 0; - right: 0; - } - .modal-content{ - padding: 0rem 1.625rem; - font-weight: 400; - line-height: 1.125rem; - } - .post-modal-bar{ - background-color: $gray100-color; - @include width-height(3.125rem, 0.25rem); - margin: 1rem auto; - } - .modal-description{ - width: 100%; - text-align: left; - padding: .875rem 0rem; - @include get-color(color, font-color); - font-size: map-get($font-sizes, size14); - } -} - -// 삭제 모달창 -.modal-background{ - visibility: hidden; - position: fixed; - top: 0; - left: 0; - @include width-height(100%, 100%); - @include get-color(background-color, background-color); - display: flex; - .modal-content{ - width: 15.75rem; - @include get-color(background-color, bg-color); - border-radius: .625rem; - text-align: center; - position: absolute; - bottom: 50%; - right: 50%; - transform: translate(50%, 50%); - .modal-description { - padding: 1.375rem 2.5rem; - font-size: map-get($font-sizes, "size16"); - border-bottom: .0313rem solid $gray100-color; - @include get-color(color, font-color); - font-weight: 500; - } - } -} - -.modal-actions { - display: flex; - justify-content: center; - font-weight: 400; - .left-button { - order: 0; - width: 7.875rem; - padding: .875rem 3rem; - font-size: map-get($font-sizes, "size14"); - @include get-color(color, font-color); - border-right: .0313rem solid $gray100-color; - } - .right-button { - order: 1; - width: 7.875rem; - padding: .875rem 2.1875rem; - @include get-color(color, point-color); - font-size: map-get($font-sizes, "size14"); - } -} - -.mode_select{ - label{ - display: block; - padding: .875rem 0rem; - } - label > input{ - margin-right: 0.9375rem; - } -} \ No newline at end of file diff --git a/scss/components/post.scss b/scss/components/post.scss deleted file mode 100644 index af5f690..0000000 --- a/scss/components/post.scss +++ /dev/null @@ -1,116 +0,0 @@ - -@import '../mixin'; - -.home-post, .home-post-onlytext{ - margin-top: 1.25rem; -} - -.user-follow{ - height: 2.625rem; - display: flex; - justify-content: space-between; - align-items: center; - - .img-cover { - @include image-cover; - @include width-height(2.25rem, 2.25rem); - @include profile-img-tag; - border: $border-gray100-1px; - } - .profile-img{ - order: 0; - margin-right: .75rem; - } - .user-info{ - order: 1; - margin-right: auto; - } -} - -.home-post{ - position: relative; - .btn-option { - width: 1.5rem; - position: absolute; - top: 0; - right: -0.75rem; - transform: translateX(-25%); - img{ - width: 100%; - } - } - .btn-like.like{ - svg { - fill : $highlight-color; - path { - stroke :$highlight-color; - } - } - } -} - -.user-info{ - .user-name{ - font-size: map-get($font-sizes, "size14" ); - font-weight: 500; - line-height: 1.125rem; - @include get-color(color, font-color); - } - .user-id{ - @include get-color(color, gray-color); - font-size: map-get($font-sizes, "size12" ); - font-weight: 400; - margin-top: .125rem; - &:before{ - content : '@ ' - } - } -} - -.post-edit{ - margin: 1rem auto 1rem 3.375rem; - padding-bottom: .3125rem; - a:first-child { - display: block; - } - - .post-text{ - @include get-color(color, font-color); - margin-bottom: 1rem; - line-height: 1.125rem; - word-break: break-all; - white-space: pre-line; - } - - .img-cover { - width: 19rem; - height: 19rem; - margin-bottom: .75rem; - border-radius: 0.625rem; - overflow: hidden; - border: $border-gray100-1px; - - .post-img { - @include width-height(100%, 100%); - object-fit: contain; - } - } -} -.post-icon{ - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 1rem; - color: $gray300-color; - font-size: map-get( $font-sizes, "size12" ); - &>*{ - display: flex; - align-items: center; - gap: 0.25rem; - color: inherit; - } -} -.post-date{ - @include get-color(color, gray-color); - font-size: map-get( $font-sizes, "size10" ); -} diff --git a/scss/components/skip_nav.scss b/scss/components/skip_nav.scss deleted file mode 100644 index 5fb7b04..0000000 --- a/scss/components/skip_nav.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import '../mixin'; - -.skip-nav{ - position:absolute; - @include width-height(100%, 0); - z-index:10000; - a { - display:block; - @include width-height(0.0625rem, 0.0625rem); - margin-bottom:-0.0625rem; - font-weight:bold; - font-size: map-get($font-sizes, "size14" ); - text-align:center; - white-space:nowrap; - background:#1c1c1c; - color:$white-color; - overflow:hidden; - - &:focus, &:active{ - @include width-height(fit-content, auto); - padding:0.9375rem; - font-size: map-get($font-sizes, "size16" ); - } - } -} - -.highContrast .skip-nav a{ - background: $white-color; - color: #1c1c1c; -} \ No newline at end of file diff --git a/scss/pages/404.scss b/scss/pages/404.scss deleted file mode 100644 index 77dd260..0000000 --- a/scss/pages/404.scss +++ /dev/null @@ -1,29 +0,0 @@ -@import '../variables'; - -.error { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - &>* { - display: block; - margin: auto; - text-align: center; - } - - .desc { - margin-bottom: 1.25rem; - color: $gray300-color; - padding-top: 15.625rem; - background: url(../assets/icon/icon-404.svg) no-repeat center/contain; - } - - .btn-back { - padding: 0.8125rem 1.625rem; - background-color: $enabled-color; - border: none; - border-radius: 2.75rem; - color: $white-color; - } -} \ No newline at end of file diff --git a/scss/pages/chat_list.scss b/scss/pages/chat_list.scss deleted file mode 100644 index 8647508..0000000 --- a/scss/pages/chat_list.scss +++ /dev/null @@ -1,63 +0,0 @@ -@import '../mixin'; - -.chat-list{ - padding: 1.5rem 1rem; -} - -.user-chat-content{ - margin-bottom: 1.25rem; - display: flex; - justify-content: space-between; - align-items: center; - - .user-img{ - order: 0; - margin-right: 0.75rem; - flex-shrink: 0; - } - .img-cover { - @include image-cover; - @include width-height(3.125rem, 3.125rem); - @include profile-img-tag; - } - - .user-info{ - order: 1; - width: calc(100% - 130px); - flex-shrink: 1; - margin-right: 0.8125rem; - .user-name{ - font-size: map-get($font-sizes, "size14" ); - font-weight: 500; - line-height: 1.125rem; - margin-bottom: 0.25rem; - @include get-color(color, font-color); - } - .chat-content{ - display: block; - @include get-color(color, gray-color); - font-size: map-get($font-sizes, "size12" ); - font-weight: 400; - margin-top: 0.125rem; - } - } - - .chat-date{ - order: 2; - margin-left: auto; - font-size: map-get($font-sizes, "size10" ); - color: $gray100-color; - } -} - -.new-chat { - position: relative; - .profile-dot { - position: absolute; - left: 0.125rem; - @include width-height(0.75rem, 0.75rem); - background-color: $enabled-color; - border-radius: 50%; - z-index: 1; - } -} \ No newline at end of file diff --git a/scss/pages/chat_room.scss b/scss/pages/chat_room.scss deleted file mode 100644 index 4b354de..0000000 --- a/scss/pages/chat_room.scss +++ /dev/null @@ -1,156 +0,0 @@ -@import '../mixin'; - -.top{ - @include get-color(background-color, bg-color); - position: fixed; - left: 0; - right: 0; - z-index: 1; -} - -body{ - background-color: $gray50-color; -} - -.title-chat { - @include get-color(color, font-color); -} - -.img-cover { - @include image-cover; - @include width-height(2.625rem, 2.625rem); - @include profile-img-tag; -} - -main{ - position: fixed; - width: 100%; - bottom: 0; - padding: 100vh 0rem 4.5625rem; - @include get-color(background-color, root-color); -} - -.chat-content{ - display: flex; - margin-top: 0.625rem; - .user-img { - flex-shrink: 0; - } - .content-text{ - max-width: 100%; - padding: 0.75rem; - font-weight: 400; - font-size: map-get($font-sizes, size14 ); - line-height: - 1.0956rem; - @include get-color(color, font-color); - border: 1px solid $gray200-color; - } - .chat-time{ - font-size: map-get($font-sizes, size10 ); - color: $gray300-color; - margin-right: 1rem; - padding-bottom: 0.3125rem; - align-self: flex-end; - } -} - -.follow-chat{ - .user-img{ - margin: 0 0.75rem 0 1rem; - } - .content-text{ - border-radius: 0 0.75rem 0.75rem 0.75rem; - @include get-color(background-color, bg-color); - } - .chat-time{ - margin-left: 0.375rem; - } -} - -.my-chat{ - justify-content:flex-end; - .content-text{ - order: 1; - @include get-color(color, mychat-font); - margin: 0 1rem 0 0.75rem; - border-radius: 0.75rem 0rem 0.75rem 0.75rem; - @include get-color(border, mychat-border); - @include get-color(background-color, mychat-color); - } - .chat-time{ - order: 0; - margin-right: 0.375rem; - } -} - -.my-chat-img{ - justify-content:flex-end; - img{ - order: 1; - max-width: 15rem; - margin: 0 1rem 0 0.75rem; - } - .content-text{ - order: 0; - } -} - -.comment{ - background-color: $white-color; - position: fixed; - bottom: 0; - width: 100%; - img{ - width: 2.25rem; - } - #commemt-input{ - padding: 0.5rem; - margin-right: 0.625rem; - @include get-color(color, font-color); - @include get-color(background-color, bg-color); - } - .btn-comment:disabled{ - @include get-color(color, btn-color); - } - .btn-comment:not(:disabled){ - @include get-color(color, send-color); - } -} - -#comment-input::placeholder { - @include get-color(color, gray-color); -} - -// 하단 모달창 부분 -.post-modal-background{ - display: none; - position: fixed; - @include width-height(100%, 100%); - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - .post-modal-content{ - background-color: $white-color; - padding-bottom: 0.625rem; - border-radius: 1.25rem 1.25rem 0 0; - position: absolute; - bottom: 0; - left: 0; - right: 0; - } - .modal-content{ - padding: 0.875rem 1.625rem 0.875rem; - font-size: map-get($font-sizes, size14); - font-weight: 400; - line-height: 1.125rem; - } - .post-modal-bar{ - background-color: $gray100-color; - @include width-height(3.125rem, 0.25rem); - margin: 1rem auto; - } - .modal-description{ - width: 100%; - text-align: left; - } -} diff --git a/scss/pages/home_search.scss b/scss/pages/home_search.scss deleted file mode 100644 index d420314..0000000 --- a/scss/pages/home_search.scss +++ /dev/null @@ -1,65 +0,0 @@ -@import '../mixin'; - -main{ - padding-bottom: 4.0625rem; -} - -.user-follow{ - height: 2.625rem; - display: flex; - justify-content: space-between; - align-items: center; - - .img-cover { - @include image-cover; - @include width-height(2.25rem, 2.25rem); - @include profile-img-tag; - border: $border-gray100-1px; - } - .profile-img{ - order: 0; - margin-right: .75rem; - } -} - -.user-info{ - order: 1; - margin-right: auto; - - .user-name{ - font-size: map-get($font-sizes, "size14" ); - font-weight: 500; - line-height: 1.125rem; - @include get-color(color, font-color); - } - .user-id{ - @include get-color(color, gray-color); - font-size: map-get($font-sizes, "size12" ); - font-weight: 400; - margin-top: .125rem; - &:before{ - content : '@ ' - } - } - .user-name, .user-id { - strong { - @include get-color(color, point-color); - } - } -} - -.search-user-list { - li { - margin-bottom: 1rem; - } - margin-left: 1rem; - margin-top: 1.25rem; -} - -#inp-search{ - @include get-color(background-color, input-color); -} - -#inp-search::placeholder { - @include get-color(color, search-placeholder-color); -} \ No newline at end of file diff --git a/scss/pages/home_withoutfollowers.scss b/scss/pages/home_withoutfollowers.scss deleted file mode 100644 index 2834f6c..0000000 --- a/scss/pages/home_withoutfollowers.scss +++ /dev/null @@ -1,87 +0,0 @@ -@import "../mixin"; - -@mixin get-color($property, $color) { - - #{$property}: get-color($color); - - @at-root .home-wrapper.highContrast & { - #{$property}: get-color($color, highContrast); - } -} - -.title-main { - @include get-color(color, font-color); -} - -.main-container { - p, - div, - a { - margin-bottom: 1.25rem; - text-align: center; - } - - p { - font-size: map-get($font-sizes, "size14" ); - @include get-color(color, gray-color); - } - - display: flex; - flex-direction: column; - align-items: center; - position : absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - -} - -.home-post-list { - padding : { - left: 1rem; - right : 1rem; - } - - margin-bottom: 4.0625rem; -} - -.home-background { - @include get-color(background-image, bg-image); - background-size: contain; - @include width-height(4.5rem, 6.25rem); -} - -.search-btn { - @include get-color(background-color, enabled-btn-color); - @include get-color(color, btn-font-color); - font-weight: 500; - text-align: center; - width: 7.5rem; - padding: 0.8125rem 0; - border-radius: 2.75rem; - font-size: map-get($font-sizes, "size14" ); -} - -.home-post .user-follow .user-info { - .user-id { - @include get-color(color, gray-color); - } - - @include get-color(color, font-color); -} - -.post-text { - @include get-color(color, font-color); -} - -.cnt { - @include get-color(color, gray-color); -} - -.btn-comment { - @include get-color(color, gray-color); -} - -.post-date { - @include get-color(color, gray-color); -} \ No newline at end of file diff --git a/scss/pages/join_membership.scss b/scss/pages/join_membership.scss deleted file mode 100644 index be6a453..0000000 --- a/scss/pages/join_membership.scss +++ /dev/null @@ -1,142 +0,0 @@ -@import '../mixin'; - -.join { - padding: 2.125rem; -} - -h2, -p { - @include get-color(color, gray-color); - text-align: center; - font-size: map-get($font-sizes, "size14" ); -} - -.title { - font-size: map-get($font-sizes, "size24"); - @include get-color(color, font-color); -} - -.join-email form { - margin-top: 2.5rem; -} - -.profile-setting { - form { - margin-top: 1.875rem; - } - - .title { - margin-bottom: 0.75rem; - } -} - -// form -form { - min-width: calc(390px - 30px * 2); - max-width: 40%; - margin: 0 auto; - @include get-color(color, gray-color); - color: $gray300-color; - font-size: map-get($font-sizes, "size12"); - - .profile-img { - position: relative; - width: 6.875rem; - margin: 0 auto 1.875rem; - - .img-cover { - width: 6.875rem; - @include image-cover; - @include profile-img-tag; - } - } - - .upload-img{ - circle { - @include get-color(fill, profile-image-btn); - } - path { - @include get-color(stroke, btn-font-color); - } - } - - - &>fieldset { - margin-bottom: 1rem; - } - - label { - @include label-tag; - text-align: start; - } - - label.btn-upload { - position: absolute; - right: 0; - bottom: 0; - border: none; - background-color: transparent; - margin: 0; - - svg>circle { - fill: $active-color; - } - } - - input { - display: block; - @include get-color(background-color, bg-color); - @include get-color(color, font-color); - width: 100%; - border: none; - border-bottom: $border-gray100-1px; - padding: 0.5rem 0; - } - - input::placeholder{ - @include get-color(color, placeholder-color); - } - - input.btn-upload { - display: none; - } - - input::placeholder { - font-size: map-get($font-sizes, "size14"); - color: $gray100-color; - } - - input:focus { - border-bottom: 0.0625rem solid $highlight-color; - outline: none; - } - - [class^=warning-msg] { - @include warning-message(color, warning-color); - margin-top: 0.375rem; - } -} - -// button -button { - display: block; - border: solid 0.0625rem; - border-radius: 2.75rem; - margin: 0 auto; -} - -@include join-btn-size-l; //size-l button - -.btn-next { - border: none; - margin-top: 1.875rem; - padding: 0.8125rem; -} - -.btn-next:disabled { - @include btn-disabled(color, font-color); -} - -.btn-upload { - cursor: pointer; -} \ No newline at end of file diff --git a/scss/pages/login.scss b/scss/pages/login.scss deleted file mode 100644 index 3504beb..0000000 --- a/scss/pages/login.scss +++ /dev/null @@ -1,83 +0,0 @@ -@import "../mixin"; - -body{ - background-color: $enabled-color; - position: relative; - text-align: center; -} - -.back{ - height: calc(100vh - 19.375rem); - @include get-color(background-image, bg-logo); - background-repeat: no-repeat; - background-position: 98% 98%; -} - -.login{ - @include get-color(background-color, bg-color); - border-radius: 1.25rem 1.25rem 0 0 ; - padding : 3.125rem 2.125rem 5.125rem; - min-width: 24.375rem; - width: 100%; - position: fixed; - bottom: 0; -} - -.domain{ - display: block; - border: 0.0625rem solid $gray300-color; - border-radius: 2.75rem; - font-size: map-get($font-sizes, "size14"); - padding: 0.8125rem; - position: relative; - @include get-color(color, gray-color); - - + .domain { - margin-top: 0.625rem; - } - &::before { - content: ""; - display: inline-block; - width: 24px; - height: 24px; - position: absolute; - transform: translateY(-50%); - top: 50%; - left: 10px; - background-repeat: no-repeat; - background-size: 132px 44px; - background-image: url(../assets/sprites/sns-logo-sprites.png); - } - - &.kakao{ - @include get-color(border-color, kakao-color); - &::before { - background-position: -10px -10px; - } - } - &.google{ - @include get-color(border-color, google-color); - &::before { - background-position: -54px -10px; - } - } - &.facebook{ - @include get-color(border-color, facebook-color); - &::before { - background-position: -98px -10px; - } - } -} - -.email { - font-size: map-get($font-sizes, "size12"); - margin-top: 1.25rem; - @include get-color(color, gray-color); - a { - @include get-color(color, gray-color); - } - - span{ - margin: 0 0.75rem; - } -} \ No newline at end of file diff --git a/scss/pages/login_email.scss b/scss/pages/login_email.scss deleted file mode 100644 index 14cdb50..0000000 --- a/scss/pages/login_email.scss +++ /dev/null @@ -1,79 +0,0 @@ -@import '../mixin'; - -.login { - padding: 1.875rem; -} -.title { - text-align: center; - font-size: map-get($font-sizes, "size24"); - @include get-color(color, font-color); -} - -.join { - color: $gray300-color; - font-size: map-get($font-sizes, "size12"); - display: inline-block; - margin: 1.25rem auto 0; -} - -form { - min-width: calc(390px - 30px * 2); - max-width: 40%; - margin: 0 auto; - margin-top: 2.5rem; - - @include get-color(color, gray-color); - font-size: map-get($font-sizes, "size12"); - - &>label { - @include label-tag; - margin-top: 1rem - } - - &>input { - display: block; - width: 100%; - @include get-color(background-color, bg-color); - @include get-color(color, font-color); - border: none; - border-bottom: $border-gray100-1px; - padding: 0.5rem 0; - margin-bottom: 1rem; - } - - - &>input::placeholder { - font-size: map-get($font-sizes, "size14"); - color: $gray100-color; - } -} - -// button -@include join-btn-size-l; //size-l button - -.size-l:disabled { - @include btn-disabled(color, font-color); -} - -[class^="warning-msg"] { - @include warning-message(color, warning-color); - margin-top: 0.375rem; -} - -.email-join { - text-align: center; - a { - @include get-color(color, gray-color); - } - -} - -input:focus { - border-bottom: 0.0625rem solid $highlight-color; - outline: none; -} - -.color-wrapper { - @include get-color(background-color, bg-color); -} - diff --git a/scss/pages/post_detail.scss b/scss/pages/post_detail.scss deleted file mode 100644 index cfc0e29..0000000 --- a/scss/pages/post_detail.scss +++ /dev/null @@ -1,99 +0,0 @@ -@import "../mixin"; - -main { - margin: 0 .9375rem; - margin-bottom: 3.8125rem; -} - -// 게시글 내용 영역 -.home-post { - border-bottom: $border-gray100-1px; -} -// 게시글 댓글 영역 -.comment-list { - margin-top: 1.25rem; - - .comment-item { - margin-top: 1.25rem; - position: relative; - - .comment-time { - display: inline-block; - font-size: map-get($font-sizes, "size10"); - @include get-color(color, gray-color); - line-height: 1.125rem; - vertical-align: top; - margin-top: 0.375rem; - padding-left: 0.75rem; - } - - .comment-text { - margin-left: 3.375rem; - margin-right: 1.5rem; - line-height: 1.5; - font-weight: 400; - font-size: map-get($font-sizes, "size14"); - @include get-color(color, font-color); - } - - .btn-more { - position: absolute; - top: 0; - left: calc(100% - 44px); - transform: translate(0, 25%); - } - } -} - -.comment-user-info { - display: inline-block; - - .img-cover { - @include image-cover; - @include width-height(2.25rem, 2.25rem); - @include profile-img-tag; - } - - .user-name { - display: inline-block; - line-height: 1.1875rem; - vertical-align: top; - margin-top: 0.375rem; - margin-left: 0.75rem; - font-weight: 500; - font-size: map-get($font-sizes, "size14"); - @include get-color(color, font-color); - } -} -.comment { - .img-cover { - @include image-cover; - @include width-height(2.25rem, 2.25rem); - @include profile-img-tag; - margin-right: 0.625rem; - } - - #commemt-input { - padding: 0.5rem; - margin-right: 0.625rem; - @include get-color(color, font-color); - @include get-color(background-color, bg-color); - } - - button:not(:disabled) { - @include get-color(color, comment-btn); -} -} - -#comment-input::placeholder { - @include get-color(color, comment-placeholder); - } - -.post-icon { - path { - @include get-color(stroke, gray-color); - } - span { - @include get-color(color, gray-color); - } -} \ No newline at end of file diff --git a/scss/pages/post_upload.scss b/scss/pages/post_upload.scss deleted file mode 100644 index a95eac0..0000000 --- a/scss/pages/post_upload.scss +++ /dev/null @@ -1,106 +0,0 @@ -@import '../mixin'; - -main { - padding: 1.25rem 1rem; - display: flex; - justify-content: center; - max-width: 50rem; - margin: auto; -} - -form { - width: 100%; - max-height: 31.25rem; - overflow: hidden; - - &>* { - display: block; - } - - textarea { - @include get-color(background-color, bg-color); - @include get-color(color, font-color); - @include width-height(calc(100% - 24px), fit-content); - min-height: 9.375rem; - margin: 0.75rem; - border: none; - resize: none; - - &::-webkit-scrollbar { - display: none; - } - } - textarea::placeholder { - @include get-color(color, gray-color); - } - - .img-cover { - width: 30vw; - max-width: 19rem; - min-width: 10.5rem; - aspect-ratio: 304/228; - border-radius: 0.625rem; - overflow: hidden; - - position: relative; - box-shadow: rgba(99, 99, 99, 0.2) 0 0.125rem 0.5rem 0; - - @include profile-img-tag; - - button { - position: absolute; - top: 0.625rem; - right: 0.625rem; - } - } -} - -.user-profile { - @include image-cover; - @include width-height(2.625rem, 2.625rem); - @include profile-img-tag; -} - - -.input-file-btn { - img { - @include width-height(3.125rem, 3.125rem); - } - @include width-height(3.125rem, 3.125rem); - margin-left: auto; - cursor: pointer; -} - -.upload-imgs-list { - white-space: nowrap; - overflow-x: scroll; - - margin: { - top: 1rem; - left: 0.75rem; - bottom: 0.625rem; - } - - &>li { - display: inline-block; - margin-right: 0.5rem; - } - - &::-webkit-scrollbar { - display: none; - } -} - -.btn-remove { - background-image: url('../assets/icon/x.svg'); - @include width-height(1.375rem, 1.375rem); -} - -.size-ms:disabled{ - @include btn-disabled(color, gray-color); -} - -.size-ms{ - @include get-color(background-color, btn-color); - @include get-color(color, btn-font-color); -} \ No newline at end of file diff --git a/scss/pages/product.scss b/scss/pages/product.scss deleted file mode 100644 index 16e0070..0000000 --- a/scss/pages/product.scss +++ /dev/null @@ -1,106 +0,0 @@ -@import "../mixin"; - -body{ - min-width: 24.375rem; -} -main{ - width: inherit; - padding: 0 2.125rem; - margin-top: 1.875rem; - box-sizing: border-box; -} - -form{ - min-width: calc(390px - 34px * 2); - max-width: 40%; - margin: 0 auto; - - color: $gray300-color; - font-size: map-get($font-sizes, "size12"); - - & > label{ - @include label-tag; - } - - & > input { - display: block; - width: 100%; - @include get-color(background-color, bg-color); - @include get-color(color, font-color); - margin-bottom: 0.375rem; - border: none; - border-bottom: $border-gray100-1px; - padding: 0.5rem 0 - } - & > input::placeholder{ - font-size: map-get($font-sizes, "size14"); - @include get-color(color, placeholder-color); - } - - label[for="product-price"]{ - margin-top: 1rem; - } - - label[for="purchase-link"]{ - margin-top: 1rem; - } -} - - -.product-img { - border-radius: 1.25rem; - background: $gray50-color; - position: relative; - aspect-ratio: 5/3; - .btn-upload { - position: absolute; - right: 0.75rem; - bottom: 0.75rem; - } - margin: { - top: 1.125rem; - bottom: 1.875rem - }; -} - -#product-img-upload { - display: none; -} - -.upload-img{ - cursor: pointer; - circle { - @include get-color(fill, image-btn); - } -} - -.btn-upload .upload-img{ - circle:hover { - @include get-color(fill, enabled-btn-color); - } -} - -.warning-msg-productname { - @include warning-message(color, warning-color); -} - -.warning-msg-productprice{ - @include warning-message(color, warning-color); -} - -.warning-msg-purchaselink { - @include warning-message(color, warning-color); -} - -.size-ms:disabled{ - @include btn-disabled(color, gray-color); -} - -.size-ms{ - @include get-color(background-color, btn-color); - @include get-color(color, btn-font-color); -} - -h2 { - @include get-color(color, gray-color); -} diff --git a/scss/pages/profile_follow.scss b/scss/pages/profile_follow.scss deleted file mode 100644 index b2a7550..0000000 --- a/scss/pages/profile_follow.scss +++ /dev/null @@ -1,78 +0,0 @@ -@import '../mixin'; - -.title-chat { - @include get-color(color, font-color); -} - -.follow-list { - padding: 1.5rem 1rem; - - li:first-child { - margin-top: 0; - } - - .follow-item { - display: flex; - align-items: center; - height: 3.125rem; - margin-top: 1rem; - - .user-img { - flex-shrink: 0; - margin-right: 0.75rem; - } - - .user-info { - a { - @include get-color(color, font-color); - } - - p { - @include get-color(color, gray-color); - } - - width: calc(100% - 130px); - flex-shrink: 1; - margin-right: 0.75rem; - - .user-name { - display: inline-block; - margin-bottom: 0.375rem; - font-weight: 500; - line-height: 1.125rem; - font-size: map-get($font-sizes, "size14"); - } - - .user-intro { - font-weight: 400; - line-height: 0.9375rem; - font-size: map-get($font-sizes, "size12"); - color: $gray300-color; - } - } - } -} - -.btn-follow { - flex-shrink: 0; - flex-basis: 3.5rem; - height: 1.75rem; - margin-left: auto; - - @include get-color(color, btn-font-color); - @include get-color(background-color, btn-color); - border-radius: 1.625rem; -} - -.btn-follow.opposite { - @include get-color(color, following-btn-color); - @include get-color(background-color, following-btn-bg); - @include get-color(border, following-btn-border); -} - -// 재사용되는 코드 -.img-cover { - @include image-cover; - @include width-height(3.125rem, 3.125rem); - @include profile-img-tag; -} \ No newline at end of file diff --git a/scss/pages/profile_info.scss b/scss/pages/profile_info.scss deleted file mode 100644 index e01c6bf..0000000 --- a/scss/pages/profile_info.scss +++ /dev/null @@ -1,212 +0,0 @@ -@import "../mixin"; - -.img-crop { - margin: 0 auto; - width: 6.875rem; - border-radius: 50%; - overflow: hidden; - border: $border-gray100-1px; - @include profile-img-tag; -} -body{ - height: calc(100% + 61px); - background-color: $white-color; -} - -main { - min-width: 24.375rem; - & > section { - background-color: $white-color; - } - background-color: $gray50-color; - margin-bottom: 3.8125rem; -} - -.profile-container { - @include get-color(border, profile-border); - border-top: 0; - @include get-color(background-color, bg-color); - position: relative; - text-align: center; - padding: { - top : 1.875rem; - bottom : 1.625rem; - right: 3.125rem; - left: 3.125rem; - } - - a { - text-decoration: none; - } - .profile-header{ - strong { - @include get-color(color, font-color); - } - .profile-id { - @include get-color(color, gray-color); - } - display: flex; - flex-direction: column; - } - - .follow-wrap{ - position: absolute; - top: 4.0625rem; - left: 50%; - transform: translateX(calc(-50% + 1.5rem + 94px)); - display: flex; - flex-direction: column-reverse; - order: -1; - p { - margin-top: 0.375rem; - font-size: map-get($font-sizes, "size8"); - @include get-color(color, gray-color); - } - & > strong { - font-size: map-get($font-sizes, "size18"); - font-weight: 700; - color: $gray300-color; - } - } - - .follow-wrap:nth-of-type(1){ - transform: translateX(calc(-50% - 1.5rem - 94px)); - & > strong { - color: $black-color; - } - } - - .profile-name { - display: block; - font-size: map-get($font-sizes, "size16"); - font-weight: 700; - margin : { - top: 1rem; - bottom: 0.625rem; - } - } - - .profile-id { - font-size: map-get($font-sizes, "size12"); - } - .profile-id::before { - content: "@ "; - } - - .profile-intro { - @include get-color(color, gray-color); - font-size: map-get($font-sizes, "size14"); - margin: { - top: 1rem; - bottom: 1.5rem; - } - } - - .btn-wrap-my { - font-size: 0; - line-height: 0; - button { - @include get-color(background-color, btn-back-color); - @include get-color(color, btn-font); - - } - & :first-child { - - margin-right: 0.75rem; - } - - .btn-link { - // 버튼 초기화 - background-color: $white-color; - - // 스타일 - border: $border-gray100-1px; - color: $gray300-color; - border-radius: 1.875rem; - padding: 0.5rem 1.6875rem; - - font-size: map-get($font-sizes, "size14"); - font-weight: 500; - } - } - - .btn-wrap-your { - font-size: 0; - line-height: 0; - .circle{ - @include get-color(border, icon-border); - border-radius: 50%; - @include width-height(2.125rem, 2.125rem); - background-repeat: no-repeat; - background-size: 90px 30px; - } - - display: flex; - justify-content: center; - - .btn-chat{ - @include get-color(background-image, icon-sprites); - background-position: -29px 0; - } - .btn-share{ - @include get-color(background-image, icon-sprites); - background-position: -60px 0; - } - .size-m { - margin: 0 0.75rem; - height: 2.125rem; - box-sizing: border-box; - &.hidden{ - display: none; - } - } - } -} - -.product-container{ - @include get-color(background-color, bg-color); - h2 { - @include get-color(color, font-color); - } - .product-name { - @include get-color(color, font-color); - } - .product-price { - @include get-color(color, price-color); - } -} - -.post-container { - @include get-color(background-color, bg-color); -} - -.user-follow .user-info { - .user-id { - @include get-color(color, gray-color); - } - @include get-color(color, font-color); -} - -.post-text { - @include get-color(color, font-color); -} - -.cnt{ - @include get-color(color, gray-color); -} - -.btn-comment { - @include get-color(color, gray-color); -} - -.post-date { - @include get-color(color, gray-color); -} - -.content-wrap { - margin-top: 3px; -} - -:root{ - background-color: $gray50-color; -} \ No newline at end of file diff --git a/scss/pages/profile_modification.scss b/scss/pages/profile_modification.scss deleted file mode 100644 index da60f2f..0000000 --- a/scss/pages/profile_modification.scss +++ /dev/null @@ -1,95 +0,0 @@ -@import '../mixin'; - - -.profile-setting { - form { - margin-top: 1.875rem; - } - - .title { - margin-bottom: 0.75rem; - } -} - -// form -form { - min-width: calc(390px - 30px * 2); - max-width: 40%; - margin: 0 auto; - - color: $gray300-color; - font-size: map-get($font-sizes, "size12"); - - .profile-img { - position: relative; - width: 6.875rem; - margin: 0 auto 1.875rem; - - .img-cover { - width: 6.875rem; - @include image-cover; - @include profile-img-tag; - } - } - - &>fieldset { - margin-bottom: 1rem; - } - - label { - @include label-tag; - text-align: start; - } - - label.btn-upload { - position: absolute; - right: 0; - bottom: 0; - border: none; - background-color: transparent; - margin: 0; - - svg>circle { - @include get-color(fill, img-icon); - } - svg{ - path { - @include get-color(stroke, bg-color); - } - } - } - - input { - display: block; - width: 100%; - border: none; - border-bottom: $border-gray100-1px; - padding: 0.5rem 0; - @include get-color(background-color, bg-color); - @include get-color(color, font-color); - } - - input.btn-upload { - display: none; - } - - input::placeholder { - font-size: map-get($font-sizes, "size14"); - @include get-color(color, gray-color); - } - - input:focus { - @include get-color(border-bottom, profile-border-bottom); - outline: none; - } - -[class^=warning-msg] { - @include warning-message(color, warning-color); - margin-top: 0.375rem; - } -} - -// button -.btn-upload { - cursor: pointer; -} \ No newline at end of file diff --git a/scss/pages/profile_productlist.scss b/scss/pages/profile_productlist.scss deleted file mode 100644 index 0fed05a..0000000 --- a/scss/pages/profile_productlist.scss +++ /dev/null @@ -1,68 +0,0 @@ -@import "../variables"; - -main { - min-width: 24.375rem; -} - -.product{ - display: flex; - flex-direction: column; - width: 24vw; - min-width: 8.75rem; - text-align: left; - - &-container{ - overflow: hidden; - padding: 1.25rem 0; - h2{ - margin-bottom: 1rem; - font-weight: 700; - margin-left: 1.125rem; - } - position:relative; - border-top: $border-gray100-1px; - border-bottom: $border-gray100-1px; - background-color: $white-color; - } - - &-list{ - white-space: nowrap; - >:first-child{ - margin-left: 1.125rem; - } - >:last-child{ - margin-right: 1.125rem; - } - transform: translate(0,0); - } - - &-img{ - width: 100%; - order: -1; - border-radius: 0.5rem; - aspect-ratio: 14/9; - -webkit-user-drag: none; - } - - // 길면? - &-name{ - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - word-break:break-all; - margin:0.4375rem 0; - } - &-item{ - display: inline-block; - } - &-item + &-item{ - margin-left: 0.3125rem; - } - - &-price{ - color: $price-color; - font-weight: 700; - } -} - diff --git a/scss/pages/profile_view.scss b/scss/pages/profile_view.scss deleted file mode 100644 index 67b64b6..0000000 --- a/scss/pages/profile_view.scss +++ /dev/null @@ -1,91 +0,0 @@ -@import '../mixin'; - -// 게시글 보기 탭 -.post-tab { - height: 2.75rem; - padding: 0.5625rem 1.3125rem; - border-top: $border-gray100-1px; - border-bottom: $border-gray100-1px; -} - -.tab-btn-wrap { - display: flex; - justify-content: flex-end; - - button { - @include width-height(1.625rem, 1.625rem); - border: none; - background-color: inherit; - margin-left: 1rem; - background-repeat: no-repeat; - background-size: 124px 31px; - @include get-color(background-image, btn-post-view); - } - - .btn-post-list { - background-position: -64.5px -2.5px; - } - - .btn-post-list.on { - background-position: -95.5px -2.5px; - } - - .btn-post-album { - background-position: -2.5px -2.5px; - } - - .btn-post-album.on { - background-position: -33.5px -2.5px; - } -} - -// 게시글 목록 섹션 -.post-sec { - width: 100%; - padding: 1rem; - - .post-list { - - // 목록형 최상단 게시글 마진 삭제 - li:first-child>section:first-child { - margin-top: 0; - } - } - - .post-album { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.5rem; - } - - .post-list.hidden, - .post-album.hidden { - display: none; - } - - ul { - min-height: calc(100vh - 360px - 247px - 44px - 61px); - } -} - -// 재사용 코드 -.post-album-item { - @include width-height(100%, 100%); - overflow: hidden; - - a { - display: inline-block; - @include width-height(100%, 100%); - } - - a:focus { - border: 0.25rem solid currentColor; - } - - @include profile-img-tag; -} - -.post-container { - background-color: $white-color; - margin-top: 0.1875rem; -} \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml deleted file mode 100644 index ec9ca4a..0000000 --- a/sitemap.xml +++ /dev/null @@ -1,59 +0,0 @@ - - - - https://eggplant-market.netlify.app/ - 1.0 - - - https://eggplant-market.netlify.app/html/login.html - 1.0 - - - https://eggplant-market.netlify.app/html/login_email - 1.0 - - - https://eggplant-market.netlify.app/html/join_membership - 1.0 - - - https://eggplant-market.netlify.app/html/home.html - 1.0 - - - https://eggplant-market.netlify.app/html/home_search - 0.9 - - - https://eggplant-market.netlify.app/html/post_detail.html?postId=게시물ID - 1.0 - - - https://eggplant-market.netlify.app/html/chat_list.html - 0.9 - - - https://eggplant-market.netlify.app/html/chat_room - 0.9 - - - https://eggplant-market.netlify.app/html/post_upload.html - 1.0 - - - https://eggplant-market.netlify.app/html/profile_info.html?accountName=계정ID - 1.0 - - - https://eggplant-market.netlify.app/html/profile_follower.html?accountName=계정ID - 0.8 - - - https://eggplant-market.netlify.app/html/profile_following.html?accountName=계정ID - 0.8 - - - https://eggplant-market.netlify.app/html/product_upload.html - 1.0 - - \ No newline at end of file