├── .editorconfig ├── .env ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ └── bug-report.md └── workflows │ └── tidory.yml ├── .gitignore ├── .pug-lintrc.js ├── README.md ├── app.pug ├── assets ├── css │ ├── app.css │ └── shortcutLayer.css ├── js │ ├── app.js │ └── vendor.js └── pug │ ├── Mixins.pug │ └── Mixins │ ├── Cover.pug │ ├── Group.pug │ ├── Index.pug │ ├── Permalink.pug │ ├── Permalink │ ├── Content.pug │ ├── Content │ │ ├── Article.pug │ │ ├── PostBtn │ │ │ ├── Subscription.pug │ │ │ └── Support.pug │ │ ├── Scrollspy.pug │ │ └── TOC.pug │ ├── Footer.pug │ ├── Footer │ │ ├── Author.pug │ │ ├── RelatedArticle.pug │ │ └── Tag.pug │ ├── Header.pug │ └── Header │ │ └── Admin.pug │ └── Popup.pug ├── docs ├── index.xml ├── preview1600.jpg ├── preview256.jpg └── preview560.jpg ├── eslint.config.js ├── images └── bootstrap.js ├── index.pug ├── package-lock.json ├── package.json ├── postcss.config.js ├── tailwind.config.js ├── tidory.config.example.js └── views ├── Bottom.pug ├── Indicator.pug ├── Loader.pug ├── Main.pug ├── Main ├── Cover.pug ├── Cover │ ├── Basic.pug │ ├── EmptyLine.pug │ ├── Portfolio.pug │ └── Typography.pug ├── Entry.pug ├── Entry │ ├── Popup.pug │ ├── Replies.pug │ └── Replies │ │ └── Supporters.pug ├── Guestbook.pug ├── Header.pug ├── List.pug ├── List │ └── Empty.pug ├── Notice.pug ├── Page.pug ├── Paging.pug ├── Protected.pug └── Tag.pug ├── Sidebar.pug ├── Sidebar ├── BlogMenu.pug ├── Category.pug ├── Copyright.pug ├── Counter.pug ├── MyLinks.pug ├── Notice.pug ├── PopularPosts.pug ├── Profile.pug ├── RandomTags.pug ├── RecentComments.pug ├── RecentPosts.pug └── Search.pug └── Top.pug /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = space 8 | indent_size = 2 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | LOGIN=true 2 | IS_OWNER=true 3 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: pronist 4 | 5 | # github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 6 | # patreon: # Replace with a single Patreon username 7 | # open_collective: # Replace with a single Open Collective username 8 | # ko_fi: # Replace with a single Ko-fi username 9 | # tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 10 | # community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 11 | # liberapay: # Replace with a single Liberapay username 12 | # issuehunt: # Replace with a single IssueHunt username 13 | # otechie: # Replace with a single Otechie username 14 | # lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 15 | # custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: 스킨에 발생한 버그를 신고하기 위한 템플릿 4 | title: '' 5 | labels: bug 6 | assignees: pronist 7 | 8 | --- 9 | 10 | **환경 (버그가 발생한 환경을 적어주세요.):** 11 | 12 | - 운영체제: [e.g. windows] 13 | - 브라우저: [e.g. chrome, safari] 14 | - 버전: [e.g. 22] 15 | - 스킨 버전 (스킨 버전은 index.xml 에서 확인): [e.g 3.4.0] 16 | 17 | **설명** 18 | 버그가 어떻게 발생하는지 알려주세요. 대략적인 버그의 설명을 적어주시면 됩니다. 19 | [e.g. 코드 하이라이팅이 동작하지 않습니다.] 20 | 21 | **발생 과정** 22 | 버그가 어떤 과정을 통해 발생하는지 구체적으로 적어주세요. 23 | [e.g. 테마 변경 버튼을 통해 화이트 모드로 변경시 코드 하이라이팅의 색상이 변하지 않습니다. ...] 24 | 25 | **스크린샷 및 링크** 26 | 버그가 발생한 상황을 가능하다면 스크린샷을 첨부해주세요. 또한 버그가 발생한 모습이 있는 포스트의 주소를 첨부해주시는 것도 아주 좋습니다! 27 | -------------------------------------------------------------------------------- /.github/workflows/tidory.yml: -------------------------------------------------------------------------------- 1 | name: Tidory 2 | 3 | on: 4 | push: 5 | branches: [ master ] 6 | pull_request: 7 | branches: [ master ] 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v4 14 | - uses: actions/setup-node@v4 15 | with: 16 | node-version: 20 17 | cache: npm 18 | - uses: actions/cache@v4 19 | with: 20 | path: ~/.npm 21 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 22 | - run: npm ci 23 | - run: npm run lint 24 | - run: npm run production 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | dist 4 | tidory.config.js 5 | 6 | # Private Submodules 7 | packages/portfolio 8 | 9 | -------------------------------------------------------------------------------- /.pug-lintrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * https://github.com/pugjs/pug-lint 3 | */ 4 | module.exports = { 5 | 'disallowClassLiteralsBeforeIdLiterals': true, 6 | 'disallowDuplicateAttributes': true, 7 | 'disallowLegacyMixinCall': true, 8 | 'disallowMultipleLineBreaks': true, 9 | 'disallowSpaceAfterCodeOperator': true, 10 | 'disallowSpacesInsideAttributeBrackets': true, 11 | 'disallowTrailingSpaces': true, 12 | 'requireClassLiteralsBeforeAttributes': true, 13 | 'requireIdLiteralsBeforeAttributes': true, 14 | 'requireLineFeedAtFileEnd': true, 15 | 'requireStrictEqualityOperators': true, 16 | 'validateAttributeQuoteMarks': "'", 17 | 'validateAttributeSeparator': {"separator": " ", "multiLineSeparator": "\n "}, 18 | 'validateDivTags': true, 19 | 'validateIndentation': 2 20 | } 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # hELLO 2 | 3 | [hELLO](https://pronist.tistory.com/5) 는 [티도리 프레임워크](https://github.com/pronist/tidory/wiki)로 작성된 티스토리 스킨입니다. 따라서 별도의 개발 방식이 요구됩니다. 먼저, 프로젝트를 복사합니다. 4 | 5 | ```bash 6 | git clone https://github.com/pronist/hello 7 | ``` 8 | 9 | 프로젝트 폴더로 이동하여 `node_modules` 를 설치해줄 필요가 있습니다. 티도리 프레임워크는 **Node.js, Webpack** 을 기반으로 합니다. 따라서 **NPM(Node Package Manager)** 이 요구됩니다. 10 | 11 | ```bash 12 | cd hello && npm install 13 | ``` 14 | 15 | 티스토리 치환자가 적용된 모습을 보려면 **프리뷰 서버** 를 사용할 필요가 있는데, **tidory.config.example.js** 의 이름을 **tidory.config.js** 로 변경하고, 티도리 프레임워크의 [환경설정](https://github.com/pronist/tidory/wiki/Configuration)를 참고하여 `ts_session`, `url` 를 설정해줄 필요가 있습니다. 이는 직접 티스토리 서버와 소통하여 치환자가 해석된 상태의 스킨을 먼저보기 위한 값입니다. 16 | 17 | 설정이 완료되었다면 프리뷰 서버를 실행할 수 있습니다. 18 | 19 | ```bash 20 | npm run preview 21 | ``` 22 | 23 | ## 배포 24 | 25 | **tidory.config.js** 에 `ts_session`, `url` 이 설정되었다면 배포를 진행할 수 있습니다. 티도리 프레임워크의 [빌드 및 배포](https://github.com/pronist/tidory/wiki/Deployment)를 참고하십시오. 26 | 27 | ```bash 28 | npm run production && npm run deploy 29 | ``` 30 | 31 | ## 저작권 32 | 33 | Copyright 2020-2024. [SangWoo Jeong](https://github.com/pronist). All rights reserved. 34 | -------------------------------------------------------------------------------- /app.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | 3 | html#hELLO( 4 | x-data='app' 5 | lang='ko' 6 | class='scroll-smooth') 7 | head 8 | meta(charset='utf-8') 9 | meta(name='viewport' content='width=device-width') 10 | 11 | title [##_page_title_##] — [##_title_##] 12 | 13 | link(rel='alternate' type='application/rss+xml' title='[##_title_##]' href='[##_rss_url_##]') 14 | 15 | link(rel='preconnect' href='//fonts.googleapis.com') 16 | link(rel='preconnect' href='//fonts.gstatic.com' crossorigin) 17 | 18 | link(rel='stylesheet' :href='"//cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css"') 19 | link(rel='stylesheet' :href='"//fonts.googleapis.com/css2?family=Source+Code+Pro:ital@0;1&display=swap"') 20 | link(rel='stylesheet' :href='"//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"') 21 | link(rel='stylesheet' :href='`//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/${dark ? skinOptions.hljsDark : skinOptions.hljs}.min.css`') 22 | 23 | script(src='./images/bootstrap.js') 24 | 25 | style(fixed). 26 | :root { 27 | --h-idx: 1100px; /* index */ 28 | --h-pem: [##_var_width_##]px; /* permalink */ 29 | --h-s: 256px; /* sidebar */ 30 | --h-c: calc(100% - var(--h-s)); /* content */ 31 | --h-h: 256px; /* header */ 32 | } 33 | 34 | style 35 | include:postcss @/css/app.css 36 | include:postcss @/css/shortcutLayer.css 37 | 38 | script(fixed). 39 | /** 40 | * Set skin options 41 | * 42 | * @see https://tistory.github.io/document-tistory-skin/common/variable.html 43 | * @see docs/index.xml 44 | */ 45 | window.skinOptions = { 46 | sidebar: '[##_var_sidebar_##]', 47 | foldableCategory: '[##_var_foldable-category_##]', 48 | width: '[##_var_width_##]', 49 | toc: '[##_var_toc_##]', 50 | scrollspy: '[##_var_scrollspy_##]', 51 | hljs: '[##_var_hljs_##]', 52 | hljsDark: '[##_var_hljs-dark_##]', 53 | headerStyle: '[##_var_header-style_##]' 54 | } 55 | 56 | body( 57 | id='[##_body_id_##]' 58 | class='overflow-x-hidden bg-h-100 dark:bg-h-800') 59 | block TIDORY 60 | 61 | script. 62 | document.addEventListener('alpine:init', () => Alpine.data('app', () => ({ 63 | /** 64 | * @type {boolean} 65 | */ 66 | dark: darkMode.on, 67 | 68 | /** 69 | * @type {boolean} 70 | */ 71 | loading: true, 72 | 73 | /** 74 | * Init 75 | */ 76 | init () { 77 | this.loaded() 78 | }, 79 | 80 | /** 81 | * Loaded 82 | */ 83 | loaded () { 84 | setTimeout(() => this.loading = false, 100) 85 | } 86 | }))) 87 | 88 | script. 89 | window.addEventListener('DOMContentLoaded', () => Alpine.start()) 90 | -------------------------------------------------------------------------------- /assets/css/app.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | a, 7 | button { 8 | @apply pointer-events-auto; 9 | } 10 | } 11 | 12 | @layer components { 13 | .index-container { 14 | @apply w-full px-4 lg:px-0 lg:mx-auto lg:w-idx; 15 | } 16 | 17 | .permalink-container { 18 | @apply w-full px-4 lg:px-0 lg:max-w-screen-lg lg:w-pem lg:mx-auto; 19 | } 20 | 21 | .cover-cols-1 { 22 | @apply grid grid-cols-1; 23 | } 24 | 25 | .cover-cols-2 { 26 | @apply cover-cols-1 sm:grid-cols-2; 27 | } 28 | 29 | .cover-cols-3 { 30 | @apply cover-cols-2 md:grid-cols-2 lg:grid-cols-3; 31 | } 32 | 33 | .cover-button { 34 | @apply flex; 35 | } 36 | 37 | .cover-fullscreen { 38 | @apply w-full h-screen; 39 | } 40 | 41 | /* https://fontawesome.com/ */ 42 | .font-awesome { 43 | @apply font-['Font_Awesome_6_Free'] leading-none not-italic inline-block; 44 | } 45 | 46 | .fa-chevron-right { 47 | @apply font-awesome font-bold content-['\f105']; 48 | } 49 | 50 | .fa-circle-arrow-right { 51 | @apply font-awesome font-bold content-['\f0a9']; 52 | } 53 | 54 | .fa-circle-arrow-down { 55 | @apply font-awesome font-bold content-['\f0ab']; 56 | } 57 | 58 | .fa-heart { 59 | @apply font-awesome font-bold content-['\f004']; 60 | } 61 | 62 | .fa-share-nodes { 63 | @apply font-awesome font-bold content-['\f1e0']; 64 | } 65 | 66 | .fa-chart-pie { 67 | @apply font-awesome font-bold content-['\f200']; 68 | } 69 | 70 | .fa-wrench { 71 | @apply font-awesome font-bold content-['\f0ad']; 72 | } 73 | 74 | .fa-ellipsis { 75 | @apply font-awesome font-bold content-['\f141']; 76 | } 77 | 78 | .fa-tag { 79 | @apply font-awesome font-bold content-['\f02b']; 80 | } 81 | 82 | .fa-star { 83 | @apply font-awesome content-['\f005']; 84 | } 85 | 86 | .fa-paper-plane { 87 | @apply font-awesome font-bold content-['\f1d8']; 88 | } 89 | 90 | .fa-lock { 91 | @apply font-awesome font-bold content-['\f023']; 92 | } 93 | 94 | .fa-lock-open { 95 | @apply font-awesome font-bold content-['\f3c1']; 96 | } 97 | 98 | .fa-mug-saucer { 99 | @apply font-awesome font-bold content-['\f0f4']; 100 | } 101 | 102 | .fa-triangle-exclamation { 103 | @apply font-awesome font-bold content-['\f071']; 104 | } 105 | 106 | .fa-xmark { 107 | @apply font-awesome font-bold content-['\f00d']; 108 | } 109 | 110 | .fa-ellipsis-vertical { 111 | @apply font-awesome font-bold content-['\f142']; 112 | } 113 | 114 | .fa-thumbtack { 115 | @apply font-awesome font-bold content-['\f08d']; 116 | } 117 | } 118 | 119 | @layer utilities { 120 | .text-hidden { 121 | @apply absolute w-px h-px -m-px overflow-hidden !important; 122 | } 123 | 124 | .text-overflow-hidden { 125 | @apply overflow-hidden whitespace-nowrap text-ellipsis; 126 | } 127 | 128 | /* https://github.com/aFarkas/lazysizes#css-api */ 129 | .lazyload, 130 | .lazyloading { 131 | @apply animate-pulse bg-h-300 dark:bg-h-700; 132 | } 133 | 134 | .lazyload:not([src]) { 135 | @apply invisible; 136 | } 137 | 138 | .lazyloaded { 139 | @apply animate-none bg-h-100; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /assets/css/shortcutLayer.css: -------------------------------------------------------------------------------- 1 | #shortcutLayer { 2 | @apply shadow-none bg-h-200 dark:bg-h-700; 3 | 4 | .btn_doc_close { 5 | @apply border-0 bg-h-700 text-h-200 dark:bg-h-600; 6 | } 7 | 8 | h2, 9 | h3 { 10 | @apply font-bold; 11 | } 12 | 13 | h2, 14 | h3, 15 | th, 16 | td, 17 | p { 18 | @apply text-h-600 dark:text-h-200 border-h-300 dark:border-h-600; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | /** app.css 2 | * 3 | * Entry for bundling by webpack. 4 | * for example, if you have your own script, or plguin, 5 | * you can import that. 6 | * ex) import "./bower_components/animate.css/animate.min.css" 7 | * 8 | * you are able to include css, css 9 | * if you want to contain other scripts like .ts, .less, .sass, 10 | * set the loaders in tidory.config.css 11 | * 12 | * after import assets it will be contained in app.css 13 | */ 14 | 15 | /** @see https://alpinejs.dev */ 16 | import Alpine from 'alpinejs' 17 | 18 | /** @see https://alpinejs.dev/plugins/intersect */ 19 | import intersect from '@alpinejs/intersect' 20 | 21 | Alpine.plugin(intersect) 22 | 23 | /** @see https://alpinejs.dev/plugins/collapse */ 24 | import collapse from '@alpinejs/collapse' 25 | 26 | Alpine.plugin(collapse) 27 | 28 | window.Alpine = Alpine 29 | -------------------------------------------------------------------------------- /assets/js/vendor.js: -------------------------------------------------------------------------------- 1 | /** @see https://github.com/aFarkas/lazysizes */ 2 | import lazySizes from 'lazysizes' 3 | 4 | lazySizes.cfg.preloadAfterLoad = true 5 | 6 | /** @see https://highlightjs.org */ 7 | import hljs from 'highlight.js' 8 | 9 | window.hljs = hljs 10 | 11 | /** @see https://swiperjs.com */ 12 | import Swiper from 'swiper' 13 | import { Autoplay, Navigation } from 'swiper/modules' 14 | 15 | import 'swiper/css' 16 | import 'swiper/css/navigation' 17 | 18 | const swiper = new Swiper('.swiper', { 19 | modules: [Autoplay, Navigation], 20 | autoplay: { 21 | delay: 3000, 22 | disableOnInteraction: false 23 | }, 24 | navigation: { 25 | nextEl: '.swiper-button-next', 26 | prevEl: '.swiper-button-prev' 27 | } 28 | }) 29 | 30 | window.swiper = swiper 31 | -------------------------------------------------------------------------------- /assets/pug/Mixins.pug: -------------------------------------------------------------------------------- 1 | include Mixins/Permalink 2 | include Mixins/Cover 3 | include Mixins/Index 4 | include Mixins/Group 5 | include Mixins/Popup 6 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Cover.pug: -------------------------------------------------------------------------------- 1 | mixin cover(name) 2 | s_cover(name=name) 3 | section.cover(class='flex flex-col items-center' data-cover-name=name)&attributes(attributes) 4 | block 5 | 6 | mixin coverTitle() 7 | header.header&attributes(attributes) 8 | h1.tit(class='h-h min-h-[theme(spacing.h)] flex items-center font-bold text-3xl text-h-800 dark:text-h-200 empty:hidden') 9 | | [##_cover_title_##] 10 | 11 | mixin coverPost(options={}) 12 | s_cover_item 13 | +index('cover_item', true, options)&attributes(attributes) 14 | 15 | mixin coverPosts(style) 16 | .posts(data-list-style=style)&attributes(attributes) 17 | block 18 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Group.pug: -------------------------------------------------------------------------------- 1 | mixin group(type) 2 | #group 3 | | #{`[##_${type}_group_##]`} 4 | 5 | style 6 | :postcss 7 | [data-tistory-react-app=Comment] { 8 | .tt-comment-cont { 9 | * { 10 | @apply font-sans !important; 11 | } 12 | 13 | .tt-box-total { 14 | @apply hidden; 15 | } 16 | 17 | .tt_cheers_msg { 18 | @apply hidden; 19 | } 20 | 21 | .tt-txt-mention { 22 | @apply before:hidden bg-transparent text-sm rounded mr-1 p-0 text-h-orange dark:text-h-blue; 23 | } 24 | 25 | .tt_ico_profile, 26 | .tt_ico_fixed, 27 | .tt-xe-input-helper, 28 | .tt_ico_lock, 29 | .tt-button-modify { 30 | @apply m-0 overflow-visible w-max h-max bg-none text-h-400 !important; 31 | } 32 | } 33 | } 34 | 35 | //- Form 36 | style 37 | :postcss 38 | [data-tistory-react-app=Comment] { 39 | .tt-comment-cont { 40 | form { 41 | .tt-area-write { 42 | .tt_wrap_write { 43 | .tt-box-account { 44 | @apply flex gap-x-2; 45 | 46 | input { 47 | @apply outline-none text-sm border-0 p-5 rounded-lg box-border text-h-800 bg-h-200 dark:text-h-200 dark:bg-h-700; 48 | } 49 | } 50 | 51 | .tt-box-textarea { 52 | .tt-inner-g { 53 | @apply w-full overflow-hidden border-0 p-5 rounded-lg box-border bg-h-200 dark:bg-h-700; 54 | 55 | .tt_txt_user { 56 | @apply font-bold mb-3 text-h-800 dark:text-h-200 bg-h-200 dark:bg-h-700; 57 | } 58 | 59 | textarea, 60 | div { 61 | @apply leading-7 text-sm h-min border-0 outline-none resize-none text-h-800 dark:text-h-200 bg-h-200 dark:bg-h-700; 62 | } 63 | } 64 | } 65 | 66 | .tt-box-write { 67 | @apply flex justify-end gap-x-2; 68 | 69 | > div { 70 | @apply flex gap-x-2; 71 | } 72 | 73 | .tt-xe-label, 74 | .tt-btn-cancel, 75 | .tt-btn_register, 76 | .tt-btn_register:disabled { 77 | @apply bg-h-200 hover:bg-h-300 dark:bg-h-700 dark:hover:bg-h-600; 78 | } 79 | 80 | .tt-xe-label, 81 | .tt-btn-cancel, 82 | .tt-btn_register { 83 | @apply m-0 p-0 w-10 h-10 min-w-max rounded-lg flex justify-center items-center text-[0] outline-0 border-0; 84 | } 85 | 86 | .tt-xe-input-helper, 87 | .tt-btn-cancel, 88 | .tt-btn_register { 89 | @apply before:text-h-500 before:dark:text-h-200; 90 | } 91 | 92 | .tt-xe-label { 93 | input[type="checkbox"]:checked + .tt-xe-input-helper { 94 | @apply before:fa-lock; 95 | } 96 | 97 | .tt-xe-input-helper { 98 | @apply before:fa-lock-open before:text-sm; 99 | } 100 | } 101 | 102 | .tt-btn-cancel { 103 | @apply before:fa-xmark before:text-base; 104 | } 105 | 106 | .tt-btn_register { 107 | @apply before:fa-paper-plane before:text-sm; 108 | } 109 | } 110 | } 111 | } 112 | } 113 | 114 | .tt-item-reply { 115 | form { 116 | .tt-area-write { 117 | .tt_wrap_write { 118 | .tt-box-account { 119 | input { 120 | @apply bg-h-300 dark:bg-h-600; 121 | } 122 | } 123 | 124 | .tt-box-textarea { 125 | .tt-inner-g { 126 | @apply bg-h-300 dark:bg-h-600; 127 | 128 | .tt_txt_user { 129 | @apply bg-h-300 dark:bg-h-600; 130 | } 131 | 132 | textarea, 133 | div { 134 | @apply bg-h-300 dark:bg-h-600; 135 | } 136 | } 137 | } 138 | 139 | .tt-box-write { 140 | .tt-xe-label, 141 | .tt-btn-cancel, 142 | .tt-btn_register, 143 | .tt-btn_register:disabled { 144 | @apply bg-h-300 dark:bg-h-600; 145 | } 146 | } 147 | } 148 | } 149 | } 150 | } 151 | } 152 | } 153 | 154 | //- List 155 | style 156 | :postcss 157 | [data-tistory-react-app=Comment] { 158 | .tt-comment-cont { 159 | .tt-area-reply { 160 | .tt-list-reply { 161 | @apply mt-9 flex flex-col gap-y-8 border-0; 162 | 163 | .tt_btn_prev_more { 164 | @apply border-0 my-4 text-sm bg-h-700 text-h-200 rounded-xl py-3 px-4 duration-200; 165 | 166 | &:hover { 167 | @apply bg-h-600; 168 | } 169 | 170 | &::after { 171 | @apply font-awesome font-bold content-['\f0ab'] ml-2; 172 | } 173 | } 174 | 175 | .tt-item-reply { 176 | @apply before:hidden rounded-md p-8 bg-h-200 dark:bg-h-700; 177 | 178 | &.rp_general { 179 | @apply rounded-none px-0 pt-8 pb-0 bg-transparent border-h-300 dark:border-h-600 last-of-type:pb-8 last-of-type:border-b; 180 | } 181 | 182 | .tt_cmt_info { 183 | @apply flex gap-x-1.5; 184 | 185 | .tt_ico_fixed { 186 | @apply relative top-px before:fa-thumbtack before:text-xs; 187 | } 188 | 189 | .tt_txt_g { 190 | @apply text-h-400; 191 | } 192 | } 193 | 194 | .tt-wrap-cmt { 195 | @apply relative; 196 | 197 | .tt-box-content { 198 | .tt-box-meta { 199 | @apply flex gap-x-1.5; 200 | 201 | .tt-link-user { 202 | @apply text-sm font-bold text-h-600 dark:text-h-200; 203 | } 204 | 205 | .tt_cmt_profile { 206 | @apply hidden; 207 | } 208 | 209 | .tt_ico_lock { 210 | @apply text-xs; 211 | } 212 | 213 | .tt_ico_fixed { 214 | @apply hidden; 215 | } 216 | } 217 | 218 | .tt-wrap-desc { 219 | @apply pr-7; 220 | 221 | .tt_desc { 222 | @apply leading-7 text-sm text-h-500 dark:text-h-300; 223 | } 224 | } 225 | 226 | .tt-wrap-info { 227 | @apply pt-4 flex gap-x-1; 228 | 229 | .tt_date { 230 | @apply pt-0 text-h-400 text-xs; 231 | } 232 | 233 | .tt-wrap-link-comment { 234 | @apply pl-0; 235 | 236 | &::before { 237 | @apply hidden; 238 | } 239 | 240 | .tt-link-comment { 241 | .tt_txt_g { 242 | @apply pt-0 text-h-400 text-xs; 243 | } 244 | 245 | .tt_num_g { 246 | @apply text-h-400 text-xs; 247 | } 248 | } 249 | } 250 | 251 | .more { 252 | @apply text-h-400 text-xs; 253 | } 254 | } 255 | 256 | .tt-box-modify { 257 | @apply absolute top-0 right-0; 258 | 259 | .tt-button-modify { 260 | @apply before:text-h-800 before:dark:text-h-200 bg-transparent hover:bg-transparent before:fa-ellipsis-vertical before:text-xs; 261 | } 262 | 263 | .tt-list-modify { 264 | @apply top-5 rounded-md shadow-none bg-h-700 dark:bg-h-600; 265 | 266 | li { 267 | a { 268 | @apply bg-h-700 text-h-200 hover:bg-h-600 dark:bg-h-600 dark:text-h-400 hover:dark:text-h-200; 269 | } 270 | } 271 | } 272 | } 273 | 274 | .tt_box_pwd { 275 | @apply shadow-none bg-h-200 dark:bg-h-700; 276 | 277 | .tt_form_pwd { 278 | .tt_inp_g { 279 | @apply border-0 outline-none text-h-500 bg-h-300 dark:text-h-200 dark:bg-h-600; 280 | } 281 | 282 | .tt_btn_submit { 283 | @apply bg-h-700 disabled:bg-h-200 dark:bg-h-500 disabled:dark:bg-h-500; 284 | 285 | .tt_ico_check { 286 | @apply invert; 287 | } 288 | } 289 | } 290 | } 291 | } 292 | } 293 | 294 | .tt-list-reply-comment { 295 | @apply rounded-md mt-6 border-0 flex flex-col gap-y-8 p-8 bg-h-200 dark:bg-h-700; 296 | 297 | .tt-item-reply { 298 | @apply border-0 p-0; 299 | } 300 | } 301 | } 302 | } 303 | } 304 | } 305 | } 306 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Index.pug: -------------------------------------------------------------------------------- 1 | mixin index(type, hasCategory=true, options={}) 2 | - 3 | const defaultOptions = { 4 | link: true, 5 | picture: true, 6 | thumbnail: true, 7 | fallback: true, 8 | header: true, 9 | title: true, 10 | description: true, 11 | summary: true 12 | } 13 | -options = { ...defaultOptions, ...options } 14 | 15 | .post&attributes(attributes) 16 | if options.link 17 | a.link( 18 | href=`[##_${type}_${type === 'list_rep' || type === 'notice_rep' ? 'link' : 'url'}_##]`) 19 | .content 20 | if options.picture 21 | .picture 22 | if options.thumbnail 23 | #{`s_${type}_thumbnail`} 24 | .img 25 | img.thumb( 26 | data-src=`[##_${type}_thumbnail${type === 'notice_rep' ? '_url' : '' }_##]` 27 | data-sizes='auto' 28 | alt='' 29 | class='lazyload') 30 | if options.fallback 31 | .fallback 32 | .info 33 | if options.header 34 | .header 35 | if options.title 36 | .tit #{`[##_${type}_title_##]`} 37 | if options.description 38 | case type 39 | when 'notice_rep' 40 | when 'list_rep' 41 | +description(type, hasCategory) 42 | when 'cover_item' 43 | s_cover_item_article_info 44 | +description(type, hasCategory) 45 | if options.summary 46 | .summary #{`[##_${type}_summary_##]`} 47 | 48 | mixin description(type, hasCategory) 49 | .desc 50 | time.date #{`[##_${type}_${type === 'list_rep' ? 'regdate' : 'simple_date'}_##]`} 51 | span.delimiter · 52 | unless hasCategory 53 | case type 54 | when 'notice_rep' 55 | .category 공지사항 56 | else 57 | .category #{`[##_${type}_category_##]`} 58 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink.pug: -------------------------------------------------------------------------------- 1 | mixin permalink(type, hasCategory=true) 2 | section#post(x-init='$store.header.show = false') 3 | include Permalink/Header 4 | include Permalink/Content 5 | include Permalink/Footer 6 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink/Content.pug: -------------------------------------------------------------------------------- 1 | #content( 2 | x-data='content' 3 | class='permalink-container relative') 4 | s_if_var_toc 5 | include Content/TOC 6 | include Content/Article 7 | s_if_var_scrollspy 8 | include Content/Scrollspy 9 | 10 | script(once='alpine-article-component'). 11 | document.addEventListener('alpine:init', () => Alpine.data('content', () => ({ 12 | /** 13 | * Support Headings 14 | * 15 | * @property {array} headings 16 | */ 17 | supportHeadings: '.contents_style > h2, .contents_style > h3', 18 | 19 | /** 20 | * Headings 21 | * 22 | * @property {array} headings 23 | */ 24 | headings: [], 25 | 26 | /** 27 | * Init 'content' Component 28 | */ 29 | init () { 30 | this.setAnchorToHeadings() 31 | this.collectHeading() 32 | this.highlightCodeBlocks() 33 | this.addBlankHashToMoreLesses() 34 | this.setPositionToImages() 35 | }, 36 | 37 | /** 38 | * Add blank hash To morelesses 39 | */ 40 | addBlankHashToMoreLesses () { 41 | this.$article.querySelectorAll('a.btn-toggle-moreless').forEach($moreless => { 42 | $moreless.setAttribute('href', '#') 43 | }) 44 | }, 45 | 46 | /** 47 | * Syntax highlighting code blocks in template 48 | */ 49 | highlightCodeBlocks () { 50 | this.$article.querySelectorAll('pre code').forEach(hljs.highlightElement) 51 | }, 52 | 53 | /** 54 | * Collect heading in template 55 | */ 56 | collectHeading () { 57 | this.$headings.forEach($heading => { 58 | const heading = this.heading($heading) 59 | 60 | this.headings.push(heading) 61 | }) 62 | }, 63 | 64 | /** 65 | * Get new Scrollspy item 66 | * 67 | * @param {HTMLElement} $heading 68 | * 69 | * @return {object} 70 | */ 71 | heading ($heading) { 72 | return { 73 | tagName: $heading.tagName, 74 | id: $heading.id, 75 | href: `#${$heading.id}`, 76 | text: $heading.textContent, 77 | active: false 78 | } 79 | }, 80 | 81 | /** 82 | * Set position to images 83 | */ 84 | setPositionToImages () { 85 | this.$article.querySelectorAll('figure.imageblock').forEach(this.setImageBlockPosition.bind(this)) 86 | this.$article.querySelectorAll('figure.imagegridblock').forEach(this.setImageGridBlockPosition.bind(this)) 87 | }, 88 | 89 | /** 90 | * Set image block position 91 | * 92 | * @param {HTMLElement} $imageBlock 93 | */ 94 | setImageBlockPosition ($imageBlock) { 95 | const width = this.imageBlockWidth($imageBlock) 96 | 97 | if ($imageBlock.classList.contains('alignCenter')) { 98 | this.setImageBlockToCenter($imageBlock) 99 | } 100 | 101 | if ($imageBlock.classList.contains('widthContent')) { 102 | return 103 | } 104 | 105 | this.setImageBlockWidth($imageBlock, width) 106 | }, 107 | 108 | /** 109 | * Set image grid block position 110 | * 111 | * @param {HTMLElement} $imageBlock 112 | */ 113 | setImageGridBlockPosition ($imageBlock) { 114 | const width = this.imageGridBlockWidth() 115 | 116 | this.setImageBlockToCenter($imageBlock) 117 | this.setImageBlockWidth($imageBlock, width) 118 | }, 119 | 120 | /** 121 | * Center image block 122 | * 123 | * @param {HTMLElement} $imageBlock 124 | */ 125 | imageBlockWidth ($imageBlock) { 126 | const $imageWrap = $imageBlock.querySelector('span, a') 127 | const $image = $imageWrap.querySelector('img') 128 | const width = $image.getAttribute('width') || $imageBlock.dataset.originWidth 129 | 130 | return width > 1100 ? 1100 : width 131 | }, 132 | 133 | /** 134 | * Center image grid block 135 | */ 136 | imageGridBlockWidth () { 137 | return 1100 138 | }, 139 | 140 | /** 141 | * set Image Width 142 | * 143 | * @param {HTMLElement} $imageBlock 144 | * @param {String|Number} width 145 | */ 146 | setImageBlockWidth ($imageBlock, width) { 147 | $imageBlock.style.width = `${width}px` 148 | $imageBlock.style.maxWidth = `${width}px` 149 | }, 150 | 151 | /** 152 | * set Image block to center 153 | * 154 | * @param {HTMLElement} $imageBlock 155 | */ 156 | setImageBlockToCenter ($imageBlock) { 157 | $imageBlock.style.marginLeft = '50%' 158 | $imageBlock.style.transform = 'translateX(-50%)' 159 | }, 160 | 161 | /** 162 | * Set anchor to headings in template 163 | */ 164 | setAnchorToHeadings () { 165 | this.$headings.forEach(this.setAnchorToHeading.bind(this)) 166 | }, 167 | 168 | /** 169 | * Set anchor to heading 170 | * 171 | * @param {HTMLElement} $heading 172 | * @param {number} index 173 | */ 174 | setAnchorToHeading ($heading, index) { 175 | const link = this.link($heading, index) 176 | const $anchor = this.$anchor($heading, `#${link}`) 177 | 178 | $heading.setAttribute('id', link) 179 | $heading.innerHTML = $anchor.outerHTML 180 | }, 181 | 182 | /** 183 | * Get link for heading 184 | * 185 | * @param {HTMLElement} $heading 186 | * @param {number} index 187 | * 188 | * @return {string} 189 | */ 190 | link ($heading, index) { 191 | return this.$id(encodeURIComponent($heading.textContent), index) 192 | }, 193 | 194 | /** 195 | * Get new anchor 196 | * 197 | * @param {HTMLElement} $heading 198 | * @param {string} link 199 | * 200 | * @return {HTMLElement} 201 | */ 202 | $anchor ($heading, link) { 203 | const $anchor = document.createElement('a') 204 | 205 | $anchor.setAttribute('href', link) 206 | $anchor.textContent = $heading.textContent 207 | 208 | return $anchor 209 | }, 210 | 211 | /** 212 | * Get article template content 213 | * 214 | * @return {HTMLElement} 215 | */ 216 | get $article () { 217 | return this.$refs.article 218 | }, 219 | 220 | /** 221 | * Get headings in content 222 | * 223 | * @return {NodeListOf} 224 | */ 225 | get $headings () { 226 | return this.$article.querySelectorAll(this.supportHeadings) 227 | } 228 | }))) 229 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink/Content/Article.pug: -------------------------------------------------------------------------------- 1 | article#article(x-ref='article') 2 | | #{`[##_${type}_rep_desc_##]`} 3 | include PostBtn/Subscription 4 | include PostBtn/Support 5 | 6 | style(once='article') 7 | :postcss 8 | #article { 9 | .contents_style { 10 | @apply text-left p-0 leading-loose text-h-600 dark:text-h-200; 11 | 12 | a { 13 | @apply text-h-orange dark:text-h-blue decoration-0; 14 | } 15 | 16 | h2, 17 | h3, 18 | h4 { 19 | @apply my-5 font-medium scroll-mt-20; 20 | 21 | a { 22 | @apply text-h-600 dark:text-h-200; 23 | } 24 | } 25 | 26 | h2 { 27 | @apply text-xl lg:text-2xl; 28 | } 29 | 30 | h3 { 31 | @apply text-lg lg:text-xl; 32 | } 33 | 34 | h4 { 35 | @apply text-base lg:text-lg; 36 | } 37 | 38 | ol[data-ke-list-type], 39 | ul[data-ke-list-type] { 40 | @apply flex flex-col gap-y-1 list-inside my-5; 41 | 42 | ol[data-ke-list-type], 43 | ul[data-ke-list-type] { 44 | @apply my-0 ml-6; 45 | } 46 | } 47 | 48 | p, 49 | ol[data-ke-list-type], 50 | ul[data-ke-list-type], 51 | table[data-ke-align], 52 | blockquote[data-ke-style=style2], 53 | blockquote[data-ke-style=style3] { 54 | @apply text-h-600 dark:text-h-300; 55 | 56 | b, 57 | strong { 58 | @apply font-bold; 59 | } 60 | 61 | a { 62 | @apply inline-block text-h-orange dark:text-h-blue; 63 | } 64 | 65 | code { 66 | @apply rounded-md relative -top-[1px] px-1.5 py-0.5 whitespace-normal text-sm font-sans text-h-orange bg-h-200; 67 | @apply dark:text-h-blue dark:bg-h-700; 68 | } 69 | } 70 | 71 | figure, 72 | pre, 73 | table[data-ke-align], 74 | [data-ke-type=moreLess] { 75 | @apply my-5; 76 | } 77 | 78 | hr[data-ke-style] { 79 | @apply dark:invert dark:brightness-0; 80 | } 81 | 82 | table[data-ke-align] { 83 | td, 84 | th { 85 | @apply bg-transparent border-0 border-b border-solid border-h-300 px-3 py-4 box-border text-sm leading-loose text-h-600; 86 | @apply dark:text-h-200 dark:border-h-600; 87 | } 88 | } 89 | 90 | figure { 91 | figcaption { 92 | @apply text-h-400 text-center text-sm leading-loose; 93 | } 94 | 95 | &.imageblock.alignCenter, 96 | &.imagegridblock { 97 | @apply max-lg:w-full !important; 98 | } 99 | 100 | &[data-ke-type=opengraph] { 101 | a { 102 | @apply border-0; 103 | 104 | .og-image { 105 | @apply border-r-0 rounded-l-md overflow-hidden; 106 | } 107 | } 108 | 109 | .og-text { 110 | @apply bg-h-200 dark:bg-h-700 rounded-r-md; 111 | 112 | .og-title, 113 | .og-desc, 114 | .og-host { 115 | @apply text-h-500 dark:text-h-200 font-sans; 116 | } 117 | 118 | .og-title { 119 | @apply text-h-600 font-bold; 120 | } 121 | } 122 | } 123 | 124 | &.fileblock { 125 | @apply border-0 bg-h-200 dark:bg-h-700; 126 | 127 | .filename { 128 | @apply mt-3; 129 | 130 | .name { 131 | @apply h-auto; 132 | } 133 | } 134 | 135 | .filename, 136 | .size { 137 | @apply dark:text-h-200; 138 | } 139 | 140 | .image, 141 | a::after { 142 | @apply dark:invert dark:brightness-0; 143 | } 144 | } 145 | } 146 | 147 | [data-ke-type=moreLess] { 148 | @apply relative; 149 | 150 | &::before { 151 | @apply content-[''] absolute top-4 right-0 w-full h-0 w-full -z-[1] border-b border-dashed border-h-300 dark:border-h-600; 152 | } 153 | 154 | &.open { 155 | .btn-toggle-moreless::before { 156 | @apply fa-circle-arrow-down; 157 | } 158 | } 159 | 160 | .btn-toggle-moreless { 161 | @apply bg-h-700 text-h-200 text-xs font-bold rounded-md px-3 py-2 inline-block; 162 | 163 | &::before { 164 | @apply mr-1.5 fa-circle-arrow-right; 165 | } 166 | } 167 | 168 | .moreless-content { 169 | @apply mt-6; 170 | } 171 | } 172 | 173 | blockquote[data-ke-style] { 174 | @apply font-[initial] my-4 text-h-600 dark:text-h-200 font-sans; 175 | 176 | &[data-ke-style=style1] { 177 | @apply font-medium text-xl pt-7 leading-loose text-h-600 dark:text-h-200; 178 | } 179 | 180 | &[data-ke-style=style2] { 181 | @apply border-l-2 border-solid border-h-300 dark:border-h-600 pl-3 pr-1 text-h-400 text-left text-sm leading-loose; 182 | } 183 | 184 | &[data-ke-style=style3] { 185 | @apply p-5 rounded-md border-0 text-h-400 bg-h-200 dark:bg-h-700 dark:text-h-400 leading-loose; 186 | } 187 | } 188 | 189 | pre { 190 | code { 191 | @apply rounded-md p-4 text-sm leading-relaxed; 192 | 193 | &.hljs { 194 | @apply bg-h-200 dark:bg-h-700; 195 | } 196 | } 197 | } 198 | } 199 | } 200 | 201 | style(once='article-postbtn') 202 | :postcss 203 | #article { 204 | .container_postbtn { 205 | @apply flex gap-x-2 p-0 pt-9 text-h-600 dark:text-h-200; 206 | 207 | .postbtn_like > .wrap_btn:not([id^=reaction-]) > button, 208 | .btn_subscription, 209 | .tt-btn-support { 210 | @apply w-9 h-9 inline-block shadow-none outline-0 rounded-md cursor-pointer duration-200 leading-none text-[0] p-0 m-0 bg-h-200 border-0 hover:bg-h-300 before:text-h-500; 211 | @apply dark:bg-h-700 dark:before:text-h-200 dark:hover:bg-h-600; 212 | } 213 | 214 | .postbtn_like { 215 | @apply border-0 p-0 flex gap-x-2; 216 | 217 | .wrap_btn { 218 | @apply inline-block border-0; 219 | 220 | button, 221 | button[data-entry-id], 222 | .uoc-count { 223 | &::before { 224 | @apply font-bold text-sm; 225 | } 226 | } 227 | 228 | .ico_like, 229 | .ico_share, 230 | .ico_statistics, 231 | .ico_etc { 232 | @apply text-hidden bg-none; 233 | } 234 | 235 | &[id^=reaction-] button { 236 | @apply px-3 h-9 rounded-md bg-h-700 hover:bg-h-600; 237 | 238 | .uoc-icon { 239 | @apply text-h-200; 240 | } 241 | 242 | .uoc-count { 243 | @apply font-bold leading-none; 244 | 245 | &::before { 246 | @apply text-sm mr-1.5 fa-heart; 247 | } 248 | } 249 | } 250 | 251 | &.wrap_btn_share .btn_share::before { 252 | @apply fa-share-nodes; 253 | } 254 | 255 | button[data-entry-id] { 256 | &::before { 257 | @apply fa-chart-pie; 258 | } 259 | } 260 | 261 | &.wrap_btn_etc { 262 | .btn_etc1::before { 263 | @apply fa-wrench; 264 | } 265 | 266 | .btn_etc2::before { 267 | @apply fa-ellipsis; 268 | } 269 | } 270 | } 271 | } 272 | } 273 | } 274 | 275 | style(once='article-tistory-ccl-layer') 276 | :postcss 277 | #tistoryCclLayer { 278 | @apply shadow-none border-0 bg-h-200 text-h-400 rounded-md; 279 | @apply dark:bg-h-700 dark:text-h-300; 280 | 281 | span { 282 | @apply text-h-400; 283 | } 284 | 285 | .ico_arrbt { 286 | @apply hidden; 287 | } 288 | } 289 | 290 | style(once='article-tistory-layer') 291 | :postcss 292 | #tistorySnsLayer, 293 | #tistoryEtcLayer { 294 | @apply rounded-md shadow-none bg-h-200; 295 | @apply dark:bg-h-700; 296 | 297 | .btn_mark { 298 | @apply text-h-400 dark:text-h-300; 299 | 300 | &:hover { 301 | @apply bg-h-300 dark:bg-h-600 dark:text-h-200; 302 | } 303 | } 304 | 305 | .ico_arrbt { 306 | @apply hidden; 307 | } 308 | 309 | .bundle_post a { 310 | @apply text-h-400 dark:text-h-300 no-underline; 311 | } 312 | } 313 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink/Content/PostBtn/Subscription.pug: -------------------------------------------------------------------------------- 1 | if process.env.NODE_ENV === 'development' 2 | template(x-teleport='#article .container_postbtn') 3 | button.btn_menu_toolbar.btn_subscription( 4 | type='button' 5 | class='#subscribe' 6 | data-blog-id='3751118' 7 | data-url='https://pronist.tistory.com/5' 8 | data-device='web_pc') 9 | em.txt_state 구독하기 10 | strong.txt_tool_id hELLO. 11 | span.img_common_tistory.ico_check_type1 12 | 13 | style(once='content-subscription-button') 14 | :postcss 15 | #article { 16 | .container_postbtn { 17 | .btn_subscription { 18 | @apply before:fa-star before:font-bold before:text-sm; 19 | 20 | .txt_state { 21 | @apply text-hidden; 22 | } 23 | 24 | .txt_tool_id, 25 | .ico_check_type1 { 26 | @apply hidden; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink/Content/PostBtn/Support.pug: -------------------------------------------------------------------------------- 1 | if process.env.NODE_ENV === 'development' 2 | template(x-teleport='#article .container_postbtn') 3 | //div(data-tistory-react-app='SupportButton') 4 | div 5 | button.tt-btn-support(type='button') 응원하기 6 | 7 | if process.env.NODE_ENV === 'development' 8 | style(once='supportButton') 9 | :postcss 10 | div[data-tistory-react-app='SupportButton'] { 11 | @apply hidden; 12 | } 13 | 14 | style(once='content-support-button') 15 | :postcss 16 | #article { 17 | .container_postbtn { 18 | .tt-btn-support { 19 | @apply before:fa-mug-saucer before:text-sm; 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink/Content/Scrollspy.pug: -------------------------------------------------------------------------------- 1 | template(x-if='$data.headings.length > 0') 2 | aside#scrollspy( 3 | x-data='scrollspy' 4 | @scroll.window='scrollspy' 5 | x-transition:enter='transition ease-linear duration-200' 6 | x-transition:enter-start='opacity-0' 7 | x-transition:enter-end='opacity-100' 8 | x-transition:leave='transition ease-linear duration-200' 9 | x-transition:leave-start='opacity-100' 10 | x-transition:leave-end='opacity-0' 11 | x-show='show' 12 | class='2xl:absolute 2xl:top-0 2xl:h-full 2xl:ml-[calc(((1100px+theme(spacing.pem))/2)+theme(spacing.5))]') 13 | .area(class='2xl:sticky 2xl:top-20') 14 | button.open( 15 | x-show='! open' 16 | @click='toggle' 17 | class='fixed top-20 right-0 w-8 h-8 z-[200] rounded-md bg-h-200 text-h-500 dark:bg-h-700 dark:text-h-200 2xl:hidden') 18 | span.txt(class='text-hidden') 목차 19 | i.ico(class='fa-solid fa-list-check') 20 | //- max-height: 100vh - (offset-top) - (bottom-button-height) - (extra-margin) 21 | .wrap( 22 | :class='open ? "max-2xl:right-4" : "max-2xl:-right-60"' 23 | class='max-h-[calc(100vh-theme(spacing.20)-theme(spacing.10)-theme(spacing.3)-2rem)] overflow-hidden w-56 text-sm box-border max-2xl:transition-[right] max-2xl:duration-200 max-2xl:rounded-xl max-2xl:fixed max-2xl:top-20 max-2xl:z-[201] max-2xl:bg-h-200 max-2xl:dark:bg-h-700 2xl:block') 24 | .spy(class='overflow-x-hidden overflow-y-scroll max-h-[inherit] w-[calc(theme(spacing.56)+theme(spacing.5))]') 25 | button.close( 26 | @click='toggle' 27 | class='absolute text-base top-3 right-4 text-h-500 dark:text-h-200 2xl:hidden') 28 | span.txt(class='text-hidden') 목차 닫기 29 | i.ico(class='fa-solid fa-xmark') 30 | ol.tits(class='flex flex-col gap-y-3 max-2xl:p-6 max-2xl:pt-8 max-2xl:pr-14 2xl:px-8') 31 | template(x-for='heading in $data.headings' :key='heading.id') 32 | li.tit( 33 | :class='{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3" }') 34 | a.link( 35 | :href='heading.href' 36 | x-text='heading.text' 37 | :class='heading.active ? "text-h-600 dark:text-h-200" : "text-h-400 hover:text-h-600 dark:hover:text-h-200"' 38 | class='duration-200') 39 | 40 | script(once='alpine-scrollspy-component'). 41 | document.addEventListener('alpine:init', () => Alpine.data('scrollspy', () => ({ 42 | /** 43 | * Show 44 | * 45 | * @type {boolean} 46 | */ 47 | show: false, 48 | 49 | /** 50 | * On active Class 51 | * 52 | * @type {string} 53 | */ 54 | activeClass: 'active', 55 | 56 | /** 57 | * Open 58 | * 59 | * @type {boolean} 60 | */ 61 | open: false, 62 | 63 | /** 64 | * Scroll in offset 65 | * 66 | * @type {number} 67 | */ 68 | offset: 81, // Scroll margin top + 1 69 | 70 | /** 71 | * Scollspy 72 | */ 73 | scrollspy () { 74 | this.track() 75 | this.on() 76 | }, 77 | 78 | /** 79 | * Toggle 80 | */ 81 | toggle () { 82 | this.open = ! this.open 83 | }, 84 | 85 | /** 86 | * Track 87 | */ 88 | track () { 89 | const $headings = this.$headings 90 | 91 | $headings.forEach(($heading, index) => { 92 | if (this.in($heading)) { 93 | this.reset() 94 | this.hit(index) 95 | } 96 | }) 97 | 98 | const $heading = $headings.item(0) 99 | 100 | if (this.out($heading)) { 101 | this.reset() 102 | } 103 | }, 104 | 105 | /** 106 | * On 107 | */ 108 | on () { 109 | this.show = this.$article.getBoundingClientRect().top < 0 110 | }, 111 | 112 | /** 113 | * Active 114 | * 115 | * @param {number} index 116 | */ 117 | hit (index) { 118 | this.$data.headings[index].active = true 119 | }, 120 | 121 | /** 122 | * inactive All 123 | */ 124 | reset () { 125 | this.$data.headings.forEach(spy => spy.active = false) 126 | }, 127 | 128 | /** 129 | * Scroll in heading 130 | * 131 | * @param {HTMLElement} $heading 132 | * 133 | * @returns {boolean} 134 | */ 135 | in ($heading) { 136 | return $heading.getBoundingClientRect().top < this.offset 137 | }, 138 | 139 | /** 140 | * Scroll out heading 141 | * 142 | * @param {HTMLElement} $heading 143 | * 144 | * @returns {boolean} 145 | */ 146 | out ($heading) { 147 | return $heading.getBoundingClientRect().top > 0 148 | }, 149 | 150 | /** 151 | * Article 152 | * 153 | * @returns {HTMLElement} 154 | */ 155 | get $article () { 156 | return this.$refs.article 157 | }, 158 | 159 | /** 160 | * Get headings in content 161 | * 162 | * @return {NodeListOf} 163 | */ 164 | get $headings () { 165 | return this.$article.querySelectorAll(this.$data.supportHeadings) 166 | } 167 | }))) 168 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink/Content/TOC.pug: -------------------------------------------------------------------------------- 1 | template(x-if='$data.headings.length > 0') 2 | aside#toc(class='rounded-md p-5 mb-8 box-border bg-h-200 text-h-500 dark:bg-h-700 dark:text-h-200') 3 | .tit(class='flex items-center justify-between text-overflow-hidden text-sm pb-2 mb-4 border-b border-solid border-h-300 dark:border-h-600') 4 | span.txt(class='text-base') 목차 5 | i.ico(class='fas fa-bars') 6 | ol.tits(class='flex flex-col gap-y-3') 7 | template(x-for='heading in $data.headings' :key='heading.id') 8 | li.tit(:class='{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3" }') 9 | a.link( 10 | :href='heading.href' 11 | class='flex items-center justify-between text-sm duration-200 text-h-400 hover:text-h-600 dark:hover:text-h-200') 12 | .txt( 13 | x-text='heading.text' 14 | class='text-overflow-hidden') 15 | i.ico(class='fas fa-arrow-right scale-75') 16 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink/Footer.pug: -------------------------------------------------------------------------------- 1 | footer#footer(class='permalink-container mb-9') 2 | if hasCategory 3 | include Footer/RelatedArticle 4 | include Footer/Tag 5 | include Footer/Author 6 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink/Footer/Author.pug: -------------------------------------------------------------------------------- 1 | #author(class='border-t border-b border-h-300 dark:border-h-600 mt-6 py-8 flex gap-x-5 items-center') 2 | img.thumb( 3 | data-src='[##_image_##]' 4 | data-sizes='auto' 5 | width='80' 6 | height='80' 7 | alt='[##_blogger_##]' 8 | class='lazyload rounded-full object-cover w-20 h-20') 9 | .profile(class='flex flex-col gap-y-1') 10 | .blogger(class='text-h-800 dark:text-h-200 font-bold') [##_blogger_##] 11 | .desc(class='leading-7 text-sm text-h-400') [##_desc_##] 12 | 13 | style(once='namecard') 14 | :postcss 15 | div[data-tistory-react-app=Namecard] { 16 | @apply hidden; 17 | } 18 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink/Footer/RelatedArticle.pug: -------------------------------------------------------------------------------- 1 | s_article_related 2 | #related(class='rounded-md p-5 mt-4 mb-2 box-border bg-h-200 text-h-500 dark:bg-h-700 dark:text-h-200') 3 | .tit(class='font-bold flex items-center justify-between text-overflow-hidden text-sm pb-2 mb-4 border-b border-solid border-h-300 dark:border-h-600') 4 | span.txt '[##_article_rep_category_##]' 카테고리의 다른 글 5 | i.ico(class='fas fa-bars') 6 | ul.posts(class='flex flex-col gap-y-2') 7 | s_article_related_rep 8 | li.post 9 | a.tit( 10 | href='[##_article_related_rep_link_##]' 11 | class='flex items-center justify-between text-sm') 12 | .txt(class='text-overflow-hidden') [##_article_related_rep_title_##] 13 | i.ico(class='fas fa-arrow-right scale-75') 14 | 15 | style(once='another-category') 16 | :postcss 17 | .another_category { 18 | @apply hidden; 19 | } 20 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink/Footer/Tag.pug: -------------------------------------------------------------------------------- 1 | s_tag_label 2 | #tags( 3 | x-data='tag' 4 | class='flex flex-wrap mt-1 gap-x-2 text-[0]') 5 | | [##_tag_label_rep_##] 6 | 7 | script. 8 | document.addEventListener('alpine:init', () => Alpine.data('tag', () => ({ 9 | /** 10 | * Init 11 | */ 12 | init () { 13 | this.removeAllCommas() 14 | }, 15 | 16 | /** 17 | * Remove all commas 18 | */ 19 | removeAllCommas () { 20 | for (const node of this.$el.childNodes) { 21 | if (node.nodeType === 3) { 22 | node.remove() 23 | } 24 | } 25 | } 26 | }))) 27 | 28 | style(once='tags') 29 | :postcss 30 | #tags { 31 | a { 32 | @apply text-sm rounded-md py-2 px-4 mt-2 bg-h-200 text-h-500; 33 | @apply dark:text-h-200 dark:bg-h-700; 34 | 35 | &:hover { 36 | @apply bg-h-600 text-h-200; 37 | } 38 | 39 | &:first-of-type::before { 40 | @apply mr-2 fa-tag; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink/Header.pug: -------------------------------------------------------------------------------- 1 | header#header( 2 | x-ref='header' 3 | data-header-style='[##_var_header-style_##]' 4 | class='px-4 mb-10 lg:px-0 lg:mb-16') 5 | #{`s_${type}_rep_thumbnail`} 6 | .img(class='absolute right-0 top-0 w-full before:content-[""] before:absolute before:right-0 before:top-0 before:w-full before:bg-h-900/20 before:z-10') 7 | img.thumb( 8 | src=`[##_${type}_rep_thumbnail_raw_url_##]` 9 | alt='' 10 | class='absolute right-0 top-0 w-full h-full z-0 object-cover') 11 | .info(class='border-b border-solid border-b-h-300 dark:border-b-h-600 min-h-[theme(spacing.h)] flex flex-col justify-center items-center gap-y-1 relative z-20 text-h-800 dark:text-h-200') 12 | h1.tit(class='text-center font-bold text-3xl max-w-screen-lg') #{`[##_${type}_rep_title_##]`} 13 | .desc(class='flex gap-x-1 text-sm') 14 | time.date #{`[##_${type}_rep_date_##]`} 15 | span.delimiter · 16 | unless hasCategory 17 | case type 18 | when 'notice' 19 | a.category(class='/notice') 공지사항 20 | else 21 | a.category(href='[##_article_rep_category_link_##]') [##_article_rep_category_##] 22 | if hasCategory 23 | include Header/Admin 24 | 25 | style(once='header-style-simple') 26 | :postcss 27 | #header[data-header-style=simple] { 28 | .img { 29 | @apply hidden; 30 | } 31 | 32 | .info { 33 | @apply h-h; 34 | } 35 | } 36 | 37 | style(once='header-style-thumbnail') 38 | :postcss 39 | #header[data-header-style=thumbnail] { 40 | @apply relative; 41 | 42 | .img { 43 | @apply h-h before:h-h; 44 | 45 | & + .info { 46 | @apply h-h text-h-200 border-0; 47 | } 48 | } 49 | } 50 | 51 | style(once='header-style-screen') 52 | :postcss 53 | #header[data-header-style=screen] { 54 | @apply relative; 55 | 56 | .img { 57 | @apply h-screen before:h-screen; 58 | 59 | & + .info { 60 | @apply h-screen text-h-200 border-0; 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Permalink/Header/Admin.pug: -------------------------------------------------------------------------------- 1 | mixin admin() 2 | a.modify(href='[##_s_ad_m_link_##]') 수정 3 | button.delete(onclick='[##_s_ad_d_onclick_##]') 삭제 4 | button.visibility(onclick='[##_s_ad_s2_onclick_##]') [##_s_ad_s1_label_##] 5 | 6 | span#admin(class='flex gap-x-1') 7 | if process.env.NODE_ENV === 'development' 8 | if process.env.IS_OWNER === 'true' && process.env.LOGIN === 'true' 9 | +admin() 10 | else 11 | s_ad_div 12 | +admin() 13 | -------------------------------------------------------------------------------- /assets/pug/Mixins/Popup.pug: -------------------------------------------------------------------------------- 1 | mixin popup(type) 2 | #{`s_article_${type}`} 3 | .popup( 4 | x-data='{ open: true }' 5 | x-transition:enter='transition ease-linear duration-200' 6 | x-transition:enter-start='opacity-0' 7 | x-transition:enter-end='opacity-100' 8 | x-transition:leave='transition ease-linear duration-200' 9 | x-transition:leave-start='opacity-100' 10 | x-transition:leave-end='opacity-0' 11 | x-show='open && $store.indicator.scrolled > 50' 12 | id=type 13 | class='fixed bottom-3 flex z-[100] h-[calc(theme(spacing.24))] max-lg:hidden')&attributes(attributes) 14 | a.link( 15 | href=`[##_article_${type}_link_##]` 16 | class='absolute top-0 left-0 w-full h-full z-10') 17 | #{`s_article_${type}_thumbnail`} 18 | .img 19 | img.thumb( 20 | src=`[##_article_${type}_thumbnail_link_##]` 21 | alt='' 22 | width='96' 23 | height='96' 24 | class='w-24 h-24 object-cover') 25 | .content(class='relative w-64 p-4 border-box flex flex-col gap-y-2 bg-h-200 dark:text-h-200 dark:bg-h-700') 26 | button.close( 27 | @click='open = ! open' 28 | class='absolute text-base top-3 right-4 text-h-400 dark:hover:text-h-200 z-20') 29 | span.txt(class='text-hidden') 닫기 30 | i.ico(class='fa-solid fa-xmark') 31 | .tit(class='text-xs text-h-400') 32 | case type 33 | when 'prev' 34 | | 이전 글 35 | when 'next' 36 | | 다음 글 37 | .info(class='text-h-500 dark:text-h-200') 38 | .tit(class='text-sm font-semibold text-overflow-hidden max-w-[calc(theme(spacing.56))]') #{`[##_article_${type}_title_##]`} 39 | .desc(class='text-2xs') 40 | time.date #{`[##_article_${type}_date_##]`} 41 | -------------------------------------------------------------------------------- /docs/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | hELLO 5 | 4.10.3 6 | 7 | 8 | 9 | 10 | 11 | SangWoo Jeong 12 | http://pronist.tistory.com 13 | pronist@naver.com 14 | 15 | 16 | 17 | list 18 | 19 | 20 | 21 | grid 22 | 23 | 24 | 25 | gallery 26 | 27 | 28 | 29 | Z 30 | 31 | 32 | 33 | 34 | 35 | list 36 | 37 | 리스트 (1단) 38 | 39 | 40 | grid 41 | 42 | 그리드 (3단) 43 | 44 | 45 | Z 46 | 47 | Z 48 | 49 | 50 | slider 51 | 52 | 슬라이더 53 | 54 | 55 | gallery 56 | 57 | 갤러리 58 | 59 | 60 | empty-line-1 61 | 62 | [빈 줄] 빈 줄 (1) 63 | 64 | 65 | empty-line-2 66 | 67 | [빈 줄] 빈 줄 (2) 68 | 69 | 70 | empty-line-3 71 | 72 | [빈 줄] 빈 줄 (3) 73 | 74 | 75 | empty-line-4 76 | 77 | [빈 줄] 빈 줄 (4) 78 | 79 | 80 | empty-line-5 81 | 82 | [빈 줄] 빈 줄 (5) 83 | 84 | 85 | profile 86 | 87 | [포트폴리오] 프로필 88 | 89 | 90 | poster 91 | 92 | [포트폴리오] 포스터 93 | 94 | 95 | square 96 | 97 | [포트폴리오] 스퀘어 98 | 99 | 100 | picture-1-1-l 101 | 102 | [포트폴리오] 사진 (1:1)/왼쪽 103 | 104 | 105 | picture-1-1-c 106 | 107 | [포트폴리오] 사진 (1:1)/중앙 108 | 109 | 110 | picture-1-1-r 111 | 112 | [포트폴리오] 사진 (1:1)/오른쪽 113 | 114 | 115 | picture-2-3-l 116 | 117 | [포트폴리오] 사진 (2:3)/왼쪽 118 | 119 | 120 | picture-2-3-c 121 | 122 | [포트폴리오] 사진 (2:3)/중앙 123 | 124 | 125 | picture-2-3-r 126 | 127 | [포트폴리오] 사진 (2:3)/오른쪽 128 | 129 | 130 | list-2 131 | 132 | [포트폴리오] 리스트 (2단) 133 | 134 | 135 | grid-2 136 | 137 | [포트폴리오] 그리드 (2단) 138 | 139 | 140 | N 141 | 142 | [포트폴리오] N 143 | 144 | 145 | Z- 146 | 147 | [포트폴리오] Z- 148 | 149 | 150 | grid-5 151 | 152 | [포트폴리오] (5단) 153 | 154 | 155 | title-summary-1/2 156 | 157 | [타이포그래피] 제목과 설명 (1/2) 158 | 159 | 160 | title-summary-2 161 | 162 | [타이포그래피] 제목과 설명 (2단) 163 | 164 | 165 | title-l-3xl 166 | 167 | [타이포그래피] 제목 (3X-Large)/왼쪽 168 | 169 | 170 | title-c-3xl 171 | 172 | [타이포그래피] 제목 (3X-Large)/중앙 173 | 174 | 175 | title-r-3xl 176 | 177 | [타이포그래피] 제목 (3X-Large)/오른쪽 178 | 179 | 180 | title-l-2xl 181 | 182 | [타이포그래피] 제목 (2X-Large)/왼쪽 183 | 184 | 185 | title-c-2xl 186 | 187 | [타이포그래피] 제목 (2X-Large)/중앙 188 | 189 | 190 | title-r-2xl 191 | 192 | [타이포그래피] 제목 (2X-Large)/오른쪽 193 | 194 | 195 | title-l-xl 196 | 197 | [타이포그래피] 제목 (X-Large)/왼쪽 198 | 199 | 200 | title-c-xl 201 | 202 | [타이포그래피] 제목 (X-Large)/중앙 203 | 204 | 205 | title-r-xl 206 | 207 | [타이포그래피] 제목 (X-Large)/오른쪽 208 | 209 | 210 | title-l-lg 211 | 212 | [타이포그래피] 제목 (Large)/왼쪽 213 | 214 | 215 | title-c-lg 216 | 217 | [타이포그래피] 제목 (Large)/중앙 218 | 219 | 220 | title-r-lg 221 | 222 | [타이포그래피] 제목 (Large)/오른쪽 223 | 224 | 225 | title-l 226 | 227 | [타이포그래피] 제목/왼쪽 228 | 229 | 230 | title-c 231 | 232 | [타이포그래피] 제목/중앙 233 | 234 | 235 | title-r 236 | 237 | [타이포그래피] 제목/오른쪽 238 | 239 | 240 | summary-title-1/2 241 | 242 | [타이포그래피] 설명과 제목 (1/2) 243 | 244 | 245 | summary-l 246 | 247 | [타이포그래피] 설명/왼쪽 248 | 249 | 250 | summary-c 251 | 252 | [타이포그래피] 설명/중앙 253 | 254 | 255 | summary-r 256 | 257 | [타이포그래피] 설명/오른쪽 258 | 259 | 260 | button-l 261 | 262 | [타이포그래피] 버튼/왼쪽 263 | 264 | 265 | button-c 266 | 267 | [타이포그래피] 버튼/중앙 268 | 269 | 270 | button-r 271 | 272 | [타이포그래피] 버튼/오른쪽 273 | 274 | 275 | link-l 276 | 277 | [타이포그래피] 링크/왼쪽 278 | 279 | 280 | link-c 281 | 282 | [타이포그래피] 링크/중앙 283 | 284 | 285 | link-r 286 | 287 | [타이포그래피] 링크/오른쪽 288 | 289 | 290 | keyword-l 291 | 292 | [타이포그래피] 키워드/왼족 293 | 294 | 295 | keyword-c 296 | 297 | [타이포그래피] 키워드/중앙 298 | 299 | 300 | keyword-r 301 | 302 | [타이포그래피] 키워드/오른쪽 303 | 304 | 305 | 306 | 307 | 308 | sidebar 309 | 310 | 311 | BOOL 312 | true 313 | 314 | 315 | foldable-category 316 | 317 | 318 | BOOL 319 | true 320 | 321 | 322 | 323 | 324 | header-style 325 | 326 | 327 | SELECT 328 | 335 | thumbnail 336 | 337 | 338 | width 339 | 340 | 341 | STRING 342 | 720 343 | 344 | 345 | toc 346 | 347 | 348 | BOOL 349 | true 350 | 351 | 352 | scrollspy 353 | 354 | 355 | BOOL 356 | true 357 | 358 | 359 | hljs 360 | 361 | 362 | STRING 363 | xcode 364 | 365 | 366 | hljs-dark 367 | 368 | 369 | STRING 370 | vs2015 371 | 372 | 373 | 374 | 375 | list 376 | 5 377 | 5 378 | 32 379 | 32 380 | 32 381 | 382 | 383 | -------------------------------------------------------------------------------- /docs/preview1600.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pronist/hello/5a83ce36f92a10087f200173e520747c17acbb14/docs/preview1600.jpg -------------------------------------------------------------------------------- /docs/preview256.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pronist/hello/5a83ce36f92a10087f200173e520747c17acbb14/docs/preview256.jpg -------------------------------------------------------------------------------- /docs/preview560.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pronist/hello/5a83ce36f92a10087f200173e520747c17acbb14/docs/preview560.jpg -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | const js = require('@eslint/js') 2 | const globals = require('globals') 3 | 4 | module.exports = [ 5 | { 6 | ignores: ['**/dist/*'], 7 | }, 8 | js.configs.recommended, 9 | { 10 | languageOptions: { 11 | sourceType: 'module', 12 | globals: { 13 | ...globals.browser, 14 | ...globals.node 15 | } 16 | } 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /images/bootstrap.js: -------------------------------------------------------------------------------- 1 | class DarkMode { 2 | /** 3 | * Create DarkMode Instance 4 | */ 5 | constructor () { 6 | /** 7 | * Class name 8 | * 9 | * @see https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually 10 | * @type {string} 11 | */ 12 | this.class = 'dark' 13 | 14 | /** 15 | * Key name in LocalStorage 16 | * 17 | * @type {string} 18 | */ 19 | this.key = 'theme' 20 | } 21 | 22 | /** 23 | * Toggle 24 | */ 25 | toggle () { 26 | localStorage.setItem(this.key, this.on ? 'light' : 'dark') 27 | document.documentElement.classList.toggle(this.class) 28 | } 29 | 30 | /** 31 | * On? 32 | * 33 | * @return {boolean} 34 | */ 35 | get on () { 36 | return document.documentElement.classList.contains(this.class) 37 | } 38 | 39 | /** 40 | * Preferred 41 | * 42 | * @return {boolean} 43 | */ 44 | get preferred () { 45 | const os = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' 46 | const theme = localStorage.getItem(this.key) || os 47 | 48 | return theme === 'dark' 49 | } 50 | } 51 | 52 | /** 53 | * Set dark Mode 54 | */ 55 | const darkMode = new DarkMode() 56 | 57 | darkMode.preferred && darkMode.toggle() 58 | 59 | /** 60 | * Console Issues 61 | * 62 | * Uncaught TypeError: Cannot read properties of null (reading 'click') 63 | * Uncaught TypeError: a is not a function 64 | * jQuery.Deferred exception: lightbox is not defined ReferenceError: lightbox is not defined 65 | * Uncaught ReferenceError: lightbox is not defined 66 | */ 67 | // eslint-disable-next-line no-unused-vars 68 | /* global tjQuery: readonly, $: writable */ 69 | if (Object.hasOwn(window, 'tjQuery')) { 70 | window.jQuery = $ = tjQuery 71 | } 72 | -------------------------------------------------------------------------------- /index.pug: -------------------------------------------------------------------------------- 1 | extends app 2 | 3 | block TIDORY 4 | include views/Loader 5 | s_t3 6 | #index( 7 | x-data='{ sidebar: false }' 8 | class='pl-0 break-all xl:pl-s') 9 | include views/Main 10 | include views/Sidebar 11 | include views/Indicator 12 | include views/Top 13 | include views/Bottom 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello", 3 | "author": { 4 | "name": "Sangwoo Jeong", 5 | "email": "pronist@naver.com", 6 | "url": "https://github.com/pronist" 7 | }, 8 | "private": true, 9 | "workspaces": [ 10 | "packages/*" 11 | ], 12 | "scripts": { 13 | "start": "cross-env NODE_ENV=development tidory start", 14 | "preview": "cross-env NODE_ENV=development tidory preview", 15 | "preview:old": "cross-env NODE_ENV=development tidory preview --old", 16 | "production": "cross-env NODE_ENV=production tidory production", 17 | "deploy": "tidory deploy", 18 | "store": "tidory store", 19 | "lint": "eslint && pug-lint .", 20 | "build:portfolio": "postcss packages/portfolio/src/css -d packages/portfolio/dist" 21 | }, 22 | "devDependencies": { 23 | "@eslint/js": "^9.15.0", 24 | "autoprefixer": "^10.4.20", 25 | "cross-env": "^7.0.2", 26 | "eslint": "^9.15.0", 27 | "eslint-webpack-plugin": "^4.2.0", 28 | "globals": "^15.12.0", 29 | "pug-lint": "^2.7.0" 30 | }, 31 | "dependencies": { 32 | "@alpinejs/collapse": "^3.14.5", 33 | "@alpinejs/intersect": "^3.14.5", 34 | "alpinejs": "^3.14.5", 35 | "highlight.js": "^11.10.0", 36 | "lazysizes": "^5.3.2", 37 | "swiper": "^11.1.15", 38 | "tailwindcss": "3.2.7", 39 | "tidory": "8.4.3" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('tailwindcss/nesting'), 4 | require('tailwindcss'), 5 | require('autoprefixer') 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const defaultTheme = require('tailwindcss/defaultTheme') 2 | 3 | /** @type {import('tailwindcss').Config} */ 4 | module.exports = { 5 | content: ['./app.pug', './index.pug', './views/**/*.pug', './assets/**/*.pug'], 6 | darkMode: 'class', 7 | theme: { 8 | screens: { 9 | sm: '640px', 10 | md: '768px', 11 | lg: '1100px', 12 | xl: '1400px', 13 | '2xl': '1820px' 14 | }, 15 | colors: { 16 | transparent: 'transparent', 17 | current: 'currentColor', 18 | h: { 19 | 100: '#ffffff', 20 | 200: '#f4f4f6', 21 | 300: '#e6e6e9', 22 | 400: '#9999a1', 23 | 500: '#66666e', 24 | 600: '#353638', 25 | 700: '#292a2d', 26 | 800: '#1e1f21', 27 | 900: '#000000', 28 | blue: '#5db0d7', 29 | orange: '#ff5544' 30 | } 31 | }, 32 | extend: { 33 | spacing: { 34 | idx: 'var(--h-idx)', 35 | pem: 'var(--h-pem)', 36 | s: 'var(--h-s)', 37 | c: 'var(--h-c)', 38 | h: 'var(--h-h)' 39 | }, 40 | fontSize: { 41 | '2xs': '0.625rem' 42 | }, 43 | keyframes: { 44 | loading: { 45 | '0%': { transform: 'rotate(0deg)' }, 46 | '100%': { transform: 'rotate(360deg)' } 47 | } 48 | }, 49 | animation: { 50 | loading: 'loading 1s linear infinite' 51 | }, 52 | fontFamily: { 53 | sans: [ 54 | 'SUIT', 55 | 'ui-sans-serif', 'system-ui', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"' 56 | ], 57 | mono: [ 58 | '"Source Code Pro"', 59 | ...defaultTheme.fontFamily.mono 60 | ] 61 | } 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /tidory.config.example.js: -------------------------------------------------------------------------------- 1 | const ESLintPlugin = require('eslint-webpack-plugin') 2 | 3 | /** 4 | * Tidory Configuration 5 | * @see https://tidory.github.io/docs/configuration/ 6 | */ 7 | module.exports = { 8 | ts_session: '', 9 | url: '', 10 | 11 | preview: { 12 | /** 13 | * homeType 14 | * 15 | * NONE 16 | * COVER 17 | */ 18 | homeType: 'NONE', 19 | 20 | /** 21 | * Preview Mode 22 | * 23 | * index 24 | * entry 25 | * category 26 | * tag 27 | * guestbook 28 | */ 29 | mode: 'index', 30 | 31 | /** 32 | * Skin Settings 33 | * 34 | * @see https://tistory.github.io/document-tistory-skin/common/index.xml.html 35 | */ 36 | skinSettings: { 37 | liststyle: 'list', 38 | recentEntries: 5, 39 | recentComments: 5, 40 | lengthOfRecentNotice: 32, 41 | lengthOfRecentEntry: 32, 42 | lengthOfRecentComment: 32 43 | }, 44 | 45 | /** 46 | * Variables 47 | */ 48 | variableSettings: { 49 | sidebar: false, 50 | 'foldable-category': true, 51 | width: '720', 52 | toc: true, 53 | scrollspy: true, 54 | hljs: 'xcode', 55 | 'hljs-dark': 'vs2015', 56 | 'header-style': 'simple' 57 | }, 58 | 59 | /** 60 | * Cover Settings 61 | */ 62 | coverSettings: [ 63 | { 64 | description: '슬라이더', 65 | index: 0, 66 | name: 'slider', 67 | title: '슬라이더', 68 | dataType: 'RECENT', 69 | data: { 70 | category: 'ALL', 71 | size: '5' 72 | } 73 | }, 74 | { 75 | description: '리스트', 76 | index: 0, 77 | name: 'list', 78 | title: '리스트', 79 | dataType: 'RECENT', 80 | data: { 81 | category: 'ALL', 82 | size: '5' 83 | } 84 | }, 85 | { 86 | description: '그리드', 87 | index: 0, 88 | name: 'grid', 89 | title: '그리드', 90 | dataType: 'RECENT', 91 | data: { 92 | category: 'ALL', 93 | size: '5' 94 | } 95 | }, 96 | { 97 | description: 'Z', 98 | index: 0, 99 | name: 'Z', 100 | title: 'Z', 101 | dataType: 'RECENT', 102 | data: { 103 | category: 'ALL', 104 | size: '5' 105 | } 106 | } 107 | ] 108 | }, 109 | 110 | alias: { 111 | '@': 'assets', 112 | '~views': 'views' 113 | }, 114 | 115 | /** 116 | * Webpack Configuration 117 | * 118 | * @param {object} webpackConfig 119 | */ 120 | extends (webpackConfig) { 121 | webpackConfig.plugins = [ 122 | new ESLintPlugin({ configType: 'flat' }), 123 | ...webpackConfig.plugins 124 | ] 125 | 126 | webpackConfig.entry = Object.assign(webpackConfig.entry, { 127 | app: './assets/js/app.js', 128 | vendor: './assets/js/vendor.js' 129 | }) 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /views/Bottom.pug: -------------------------------------------------------------------------------- 1 | aside#bottom( 2 | x-data='bottom' 3 | class='flex justify-end px-4 w-full box-border fixed text-sm z-[90] bottom-3 xl:w-c') 4 | .wrap(class='flex gap-x-2.5') 5 | button.theme.btn(@click='toggleTheme') 6 | span.txt 테마 7 | i.ico(class='fa-solid fa-moon') 8 | a.top.btn(href='#hELLO') 9 | span.txt 상단으로 10 | i.ico(class='fa-solid fa-chevron-up') 11 | 12 | script. 13 | document.addEventListener('alpine:init', () => Alpine.data('bottom', () => ({ 14 | /** 15 | * Toggle Theme 16 | */ 17 | toggleTheme () { 18 | darkMode.toggle() 19 | 20 | this.$data.dark = ! this.$data.dark 21 | } 22 | }))) 23 | 24 | style 25 | :postcss 26 | #bottom { 27 | .btn { 28 | @apply flex justify-center items-center w-10 h-10 p-0 rounded-full outline-0 bg-h-200 text-h-500 shadow-none hover:bg-h-300; 29 | @apply dark:text-h-200 dark:bg-h-700 dark:hover:bg-h-600; 30 | 31 | .txt { 32 | @apply text-hidden; 33 | } 34 | 35 | .ico { 36 | @apply text-base; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /views/Indicator.pug: -------------------------------------------------------------------------------- 1 | aside#indicator( 2 | @scroll.window='$store.indicator.indicate' 3 | class='fixed top-0 w-full z-[100]') 4 | .bar( 5 | :style='{ width: $store.indicator.scrolled + "%" }' 6 | class='w-0 h-0.5 rounded bg-h-800 dark:bg-h-200') 7 | 8 | script. 9 | document.addEventListener('alpine:init', () => Alpine.store('indicator', { 10 | /** 11 | * Scrolled 12 | */ 13 | scrolled: 0, 14 | 15 | /** 16 | * Scroll indicate 17 | */ 18 | indicate () { 19 | const winScroll = document.body.scrollTop || document.documentElement.scrollTop 20 | const height = document.documentElement.scrollHeight - document.documentElement.clientHeight 21 | 22 | this.$store.indicator.scrolled = (winScroll / height) * 100 23 | } 24 | })) 25 | -------------------------------------------------------------------------------- /views/Loader.pug: -------------------------------------------------------------------------------- 1 | #loader( 2 | x-show='loading' 3 | x-transition:enter='transition ease-out duration-300' 4 | x-transition:enter-start='opacity-0' 5 | x-transition:enter-end='opacity-100' 6 | x-transition:leave='transition ease-in duration-300' 7 | x-transition:leave-start='opacity-100' 8 | x-transition:leave-end='opacity-0' 9 | class='w-screen h-screen fixed top-0 left-0 z-[10000] flex items-center justify-center bg-h-100 dark:bg-h-800') 10 | .loading(class='rounded-full w-14 h-14 my-14 mx-auto text-base relative border-2 border-solid border-h-500/20 border-l-h-500 dark:border-h-100/20 dark:border-l-h-100 animate-loading') 11 | -------------------------------------------------------------------------------- /views/Main.pug: -------------------------------------------------------------------------------- 1 | include @/pug/Mixins 2 | 3 | main#main(class='pb-12 lg:pb-16') 4 | include Main/Header 5 | include Main/Tag 6 | include Main/Notice 7 | include Main/Guestbook 8 | include Main/List 9 | include Main/Cover 10 | include Main/Entry 11 | include Main/Protected 12 | include Main/Page 13 | include Main/Paging 14 | -------------------------------------------------------------------------------- /views/Main/Cover.pug: -------------------------------------------------------------------------------- 1 | s_cover_group 2 | section#cover( 3 | x-init='$store.header.show = false' 4 | class='flex flex-col gap-y-12 lg:gap-y-16') 5 | s_cover_rep 6 | include Cover/Basic 7 | include Cover/EmptyLine 8 | include Cover/Portfolio 9 | include Cover/Typography 10 | -------------------------------------------------------------------------------- /views/Main/Cover/Basic.pug: -------------------------------------------------------------------------------- 1 | //----------- LIST -----------// 2 | 3 | +cover('list') 4 | +coverTitle() 5 | +coverPosts('list') 6 | +coverPost({ fallback: false }) 7 | +cover('grid') 8 | +coverTitle() 9 | +coverPosts('grid') 10 | +coverPost() 11 | +cover('Z') 12 | +coverTitle() 13 | +coverPosts('Z') 14 | +coverPost() 15 | 16 | //----------- GALLERY -----------// 17 | 18 | +cover('gallery') 19 | +coverTitle() 20 | +coverPosts('gallery') 21 | +coverPost({ summary: false }) 22 | 23 | //----------- SLIDER -----------// 24 | 25 | +cover('slider') 26 | +coverTitle() 27 | +coverPosts('slider')(class='swiper') 28 | .wrap(class='swiper-wrapper') 29 | +coverPost({ summary: false })(class='swiper-slide') 30 | .next(class='swiper-button-next') 31 | .prev(class='swiper-button-prev') 32 | 33 | style 34 | :postcss 35 | #global-header ~ .post, 36 | [data-list-style] .post { 37 | @apply relative; 38 | 39 | .link { 40 | @apply z-50 absolute top-0 left-0 w-full h-full; 41 | } 42 | 43 | .content { 44 | .picture { 45 | .img { 46 | & + .fallback { 47 | @apply hidden; 48 | } 49 | } 50 | 51 | .fallback { 52 | @apply animate-pulse bg-h-200 dark:bg-h-700; 53 | } 54 | } 55 | 56 | .info { 57 | .header { 58 | .tit { 59 | img { 60 | @apply hidden; 61 | } 62 | } 63 | } 64 | 65 | .summary { 66 | @apply empty:m-0; 67 | } 68 | } 69 | } 70 | } 71 | 72 | style 73 | :postcss 74 | #global-header ~ .post, 75 | [data-list-style=list] .post, 76 | [data-list-style=grid], 77 | [data-list-style=Z], 78 | [data-list-style=gallery] { 79 | @apply index-container; 80 | } 81 | 82 | [data-list-style=grid], 83 | [data-list-style=gallery] { 84 | @apply cover-cols-3; 85 | } 86 | 87 | [data-list-style=Z] { 88 | @apply cover-cols-1; 89 | } 90 | 91 | [data-list-style=slider] { 92 | @apply cover-fullscreen; 93 | } 94 | 95 | [data-list-style=list] { 96 | @apply max-sm:flex max-sm:flex-col max-sm:gap-y-6; 97 | } 98 | 99 | [data-list-style=gallery] { 100 | @apply gap-2; 101 | } 102 | 103 | [data-list-style=grid] { 104 | @apply gap-y-6 gap-x-4 lg:gap-y-8 lg:gap-x-6; 105 | } 106 | 107 | [data-list-style=Z] { 108 | @apply gap-y-6 sm:gap-y-0; 109 | } 110 | 111 | //- cover-content-left 112 | style 113 | :postcss 114 | .cover-content-left { 115 | .content { 116 | @apply items-start; 117 | 118 | .info { 119 | @apply flex flex-col items-start; 120 | 121 | .header { 122 | @apply items-start; 123 | } 124 | } 125 | } 126 | } 127 | 128 | //- cover-content-center 129 | style 130 | :postcss 131 | .cover-content-center { 132 | .content { 133 | @apply items-center; 134 | 135 | .info { 136 | @apply flex flex-col items-center; 137 | 138 | .header { 139 | @apply items-center; 140 | } 141 | } 142 | } 143 | } 144 | 145 | //- cover-content-right 146 | style 147 | :postcss 148 | .cover-content-right { 149 | .content { 150 | @apply items-end; 151 | 152 | .info { 153 | @apply flex flex-col items-end; 154 | 155 | .header { 156 | @apply items-end; 157 | } 158 | } 159 | } 160 | } 161 | 162 | //- list 163 | style 164 | :postcss 165 | #global-header ~ .post, 166 | [data-list-style=list] .post { 167 | @apply relative sm:border-t sm:border-solid sm:border-h-300 sm:dark:border-h-600 sm:first-of-type:border-t-0; 168 | 169 | .content { 170 | @apply flex flex-col gap-y-4; 171 | @apply sm:flex-row-reverse sm:items-center sm:justify-end sm:h-72; 172 | 173 | .picture { 174 | .img { 175 | @apply w-full sm:w-64 sm:h-64 sm:shrink-0 sm:ml-8; 176 | 177 | .thumb { 178 | @apply w-full sm:w-64 sm:h-64 max-w-none object-cover bg-h-100; 179 | } 180 | } 181 | 182 | .fallback { 183 | @apply hidden; 184 | } 185 | } 186 | 187 | .info { 188 | @apply sm:grow; 189 | 190 | .header { 191 | @apply flex flex-col gap-y-1; 192 | 193 | .tit { 194 | @apply text-xl lg:text-2xl font-bold text-h-800 dark:text-h-200; 195 | } 196 | 197 | .desc { 198 | @apply flex gap-x-1 text-sm; 199 | 200 | * { 201 | @apply text-h-400; 202 | } 203 | } 204 | } 205 | 206 | .summary { 207 | @apply mt-2 max-h-20 overflow-hidden leading-loose text-sm text-h-400; 208 | } 209 | } 210 | } 211 | } 212 | 213 | //- grid 214 | style 215 | :postcss 216 | [data-list-style=grid] { 217 | .post { 218 | .content { 219 | @apply flex flex-col gap-y-6; 220 | 221 | .picture { 222 | .img, 223 | .fallback { 224 | @apply pt-[66.66%] relative; 225 | } 226 | 227 | .img { 228 | .thumb { 229 | @apply absolute top-0 left-0 w-full h-full object-cover bg-h-100; 230 | } 231 | } 232 | } 233 | 234 | .info { 235 | .header { 236 | @apply flex flex-col gap-y-1; 237 | 238 | .tit { 239 | @apply text-xl font-bold text-h-800 dark:text-h-200; 240 | } 241 | 242 | .desc { 243 | @apply flex gap-x-1 text-sm max-md:hidden; 244 | 245 | * { 246 | @apply text-h-400; 247 | } 248 | } 249 | } 250 | 251 | .summary { 252 | @apply mt-2 max-h-14 overflow-hidden leading-loose text-sm text-h-400; 253 | } 254 | } 255 | } 256 | } 257 | } 258 | 259 | //- Z 260 | style 261 | :postcss 262 | [data-list-style=Z] { 263 | .post { 264 | .content { 265 | @apply flex flex-col gap-y-4 sm:flex-row; 266 | 267 | .picture { 268 | @apply sm:w-1/2; 269 | 270 | .img { 271 | .thumb { 272 | @apply relative z-10 object-cover w-full bg-h-100 sm:max-w-none; 273 | } 274 | } 275 | 276 | .fallback { 277 | @apply pt-[66.66%]; 278 | } 279 | } 280 | 281 | .info { 282 | @apply sm:w-1/2; 283 | @apply flex flex-col justify-center; 284 | 285 | .header { 286 | @apply flex flex-col gap-y-1; 287 | 288 | .tit { 289 | @apply text-xl lg:text-2xl font-bold text-h-800 dark:text-h-200; 290 | } 291 | 292 | .desc { 293 | @apply flex gap-x-1 text-sm; 294 | 295 | * { 296 | @apply text-h-400; 297 | } 298 | } 299 | } 300 | 301 | .summary { 302 | @apply mt-2 max-h-20 overflow-hidden leading-loose text-sm text-h-400; 303 | } 304 | } 305 | } 306 | 307 | &:nth-child(2n) { 308 | .content { 309 | @apply sm:flex-row-reverse; 310 | 311 | .info { 312 | @apply sm:pr-10 lg:pr-20; 313 | } 314 | } 315 | } 316 | 317 | &:nth-child(2n+1) { 318 | .content { 319 | .info { 320 | @apply sm:pl-10 lg:pl-20; 321 | } 322 | } 323 | } 324 | } 325 | } 326 | 327 | //- gallery 328 | style 329 | :postcss 330 | [data-list-style=gallery] { 331 | .post { 332 | .link { 333 | &:hover + .content { 334 | @apply before:opacity-100 before:duration-300; 335 | 336 | .info { 337 | @apply opacity-100 duration-300; 338 | } 339 | } 340 | } 341 | 342 | .content { 343 | @apply before:opacity-0 before:absolute before:right-0 before:top-0 before:w-full before:h-full; 344 | @apply before:z-10 before:bg-gradient-to-b before:from-transparent before:to-h-700/50; 345 | @apply relative flex items-end z-20; 346 | 347 | .picture { 348 | @apply w-full h-full; 349 | 350 | .img, 351 | .fallback { 352 | @apply pt-[100%] relative w-full h-full; 353 | } 354 | 355 | .img { 356 | .thumb { 357 | @apply absolute top-0 left-0 w-full h-full object-cover bg-h-100; 358 | } 359 | } 360 | } 361 | 362 | .info { 363 | @apply opacity-0 absolute w-full z-20; 364 | @apply pb-6 max-md:pb-8; 365 | 366 | .header { 367 | @apply flex flex-col justify-end items-center w-full text-center; 368 | 369 | .tit { 370 | @apply px-6 text-h-200 text-xl sm:text-lg md:text-2xl font-semibold; 371 | @apply mb-7 sm:mb-5 md:mb-9; 372 | } 373 | 374 | .desc { 375 | @apply flex gap-x-1 text-sm max-md:hidden; 376 | 377 | * { 378 | @apply text-h-200; 379 | } 380 | } 381 | } 382 | 383 | .summary { 384 | @apply hidden; 385 | } 386 | } 387 | } 388 | } 389 | } 390 | 391 | //- slider 392 | style 393 | :postcss 394 | [data-list-style=slider] { 395 | .swiper-wrapper { 396 | .post { 397 | .content { 398 | @apply before:absolute before:left-0 before:top-0 before:w-full before:h-screen before:bg-h-900/20 before:z-10; 399 | @apply w-full h-full flex justify-center items-center; 400 | 401 | .picture { 402 | @apply w-full h-full; 403 | 404 | .img, 405 | .fallback { 406 | @apply w-full h-full; 407 | } 408 | 409 | .img { 410 | .thumb { 411 | @apply w-full h-full object-cover bg-h-100; 412 | } 413 | } 414 | } 415 | 416 | .info { 417 | @apply absolute z-20; 418 | 419 | .header { 420 | @apply flex flex-col gap-y-1 justify-center items-center text-center; 421 | 422 | .tit { 423 | @apply px-4 text-h-200 font-bold text-2xl md:text-3xl; 424 | } 425 | 426 | .desc { 427 | @apply flex gap-x-1 text-sm; 428 | 429 | * { 430 | @apply text-h-200; 431 | } 432 | } 433 | } 434 | } 435 | } 436 | } 437 | } 438 | 439 | /* https://swiperjs.com/demos#navigation */ 440 | .swiper-button-next, 441 | .swiper-button-prev { 442 | --swiper-navigation-size: 2rem; 443 | --swiper-navigation-color: rgba(255, 255, 255, .6); 444 | @apply max-lg:hidden; 445 | 446 | &::before, 447 | &::after { 448 | @apply text-sm font-bold; 449 | } 450 | } 451 | } 452 | -------------------------------------------------------------------------------- /views/Main/Cover/EmptyLine.pug: -------------------------------------------------------------------------------- 1 | //----------- EMPTY LINE -----------// 2 | 3 | +cover('empty-line-1') 4 | +coverTitle() 5 | +coverPosts('empty-line') 6 | +cover('empty-line-2') 7 | +coverTitle() 8 | +coverPosts('empty-line')(class='py-2') 9 | +cover('empty-line-3') 10 | +coverTitle() 11 | +coverPosts('empty-line')(class='py-4') 12 | +cover('empty-line-4') 13 | +coverTitle() 14 | +coverPosts('empty-line')(class='py-6') 15 | +cover('empty-line-5') 16 | +coverTitle() 17 | +coverPosts('empty-line')(class='py-8') 18 | -------------------------------------------------------------------------------- /views/Main/Cover/Portfolio.pug: -------------------------------------------------------------------------------- 1 | //----------- PROFILE -----------// 2 | 3 | +cover('profile') 4 | +coverTitle() 5 | +coverPosts('profile') 6 | +coverPost({ 7 | link: false, 8 | fallback: false 9 | }) 10 | 11 | //----------- GALLERY -----------// 12 | 13 | +cover('poster') 14 | +coverTitle() 15 | +coverPosts('poster') 16 | +coverPost({ summary: false }) 17 | +cover('square') 18 | +coverTitle() 19 | +coverPosts('square') 20 | +coverPost({ summary: false }) 21 | 22 | //----------- PICTURE -----------// 23 | 24 | +cover('picture-1-1-l') 25 | +coverTitle() 26 | +coverPosts('picture-1-1') 27 | +coverPost()(class='mr-auto cover-content-left') 28 | +cover('picture-1-1-c') 29 | +coverTitle() 30 | +coverPosts('picture-1-1') 31 | +coverPost()(class='mx-auto cover-content-center') 32 | +cover('picture-1-1-r') 33 | +coverTitle() 34 | +coverPosts('picture-1-1') 35 | +coverPost()(class='ml-auto cover-content-right') 36 | +cover('picture-2-3-l') 37 | +coverTitle() 38 | +coverPosts('picture-2-3') 39 | +coverPost()(class='mr-auto cover-content-left') 40 | +cover('picture-2-3-c') 41 | +coverTitle() 42 | +coverPosts('picture-2-3') 43 | +coverPost()(class='mx-auto cover-content-center') 44 | +cover('picture-2-3-r') 45 | +coverTitle() 46 | +coverPosts('picture-2-3') 47 | +coverPost()(class='ml-auto cover-content-right') 48 | 49 | //----------- LIST -----------// 50 | 51 | +cover('list-2') 52 | +coverTitle() 53 | +coverPosts('list-2') 54 | +coverPost({ 55 | fallback: false, 56 | description: false 57 | }) 58 | +cover('grid-2') 59 | +coverTitle() 60 | +coverPosts('grid-2') 61 | +coverPost() 62 | +cover('N') 63 | +coverTitle() 64 | +coverPosts('N') 65 | +coverPost() 66 | +cover('Z-') 67 | +coverTitle() 68 | +coverPosts('Z-') 69 | +coverPost() 70 | +cover('grid-5') 71 | +coverTitle() 72 | +coverPosts('grid-5') 73 | +coverPost({ 74 | description: false, 75 | summary: false 76 | }) 77 | -------------------------------------------------------------------------------- /views/Main/Cover/Typography.pug: -------------------------------------------------------------------------------- 1 | //----------- TITLE -----------// 2 | 3 | +cover('title-l-3xl') 4 | +coverTitle() 5 | +coverPosts('title-3xl') 6 | +coverPost({ 7 | link: false, 8 | picture: false, 9 | description: false, 10 | summary: false 11 | })(class='text-left') 12 | +cover('title-c-3xl') 13 | +coverTitle() 14 | +coverPosts('title-3xl') 15 | +coverPost({ 16 | link: false, 17 | picture: false, 18 | description: false, 19 | summary: false 20 | })(class='text-center') 21 | +cover('title-r-3xl') 22 | +coverTitle() 23 | +coverPosts('title-3xl') 24 | +coverPost({ 25 | link: false, 26 | picture: false, 27 | description: false, 28 | summary: false 29 | })(class='text-right') 30 | +cover('title-l-2xl') 31 | +coverTitle() 32 | +coverPosts('title-2xl') 33 | +coverPost({ 34 | link: false, 35 | picture: false, 36 | description: false 37 | })(class='text-left') 38 | +cover('title-c-2xl') 39 | +coverTitle() 40 | +coverPosts('title-2xl') 41 | +coverPost({ 42 | link: false, 43 | picture: false, 44 | description: false 45 | })(class='text-center') 46 | +cover('title-r-2xl') 47 | +coverTitle() 48 | +coverPosts('title-2xl') 49 | +coverPost({ 50 | link: false, 51 | picture: false, 52 | description: false 53 | })(class='text-right') 54 | +cover('title-l-xl') 55 | +coverTitle() 56 | +coverPosts('title-xl') 57 | +coverPost({ 58 | link: false, 59 | picture: false, 60 | description: false 61 | })(class='text-left') 62 | +cover('title-c-xl') 63 | +coverTitle() 64 | +coverPosts('title-xl') 65 | +coverPost({ 66 | link: false, 67 | picture: false, 68 | description: false 69 | })(class='text-center') 70 | +cover('title-r-xl') 71 | +coverTitle() 72 | +coverPosts('title-xl') 73 | +coverPost({ 74 | link: false, 75 | picture: false, 76 | description: false 77 | })(class='text-right') 78 | +cover('title-l-lg') 79 | +coverTitle() 80 | +coverPosts('title-lg') 81 | +coverPost({ 82 | link: false, 83 | picture: false, 84 | description: false 85 | })(class='text-left') 86 | +cover('title-c-lg') 87 | +coverTitle() 88 | +coverPosts('title-lg') 89 | +coverPost({ 90 | link: false, 91 | picture: false, 92 | description: false 93 | })(class='text-center') 94 | +cover('title-r-lg') 95 | +coverTitle() 96 | +coverPosts('title-lg') 97 | +coverPost({ 98 | link: false, 99 | picture: false, 100 | description: false 101 | })(class='text-right') 102 | +cover('title-l') 103 | +coverTitle() 104 | +coverPosts('title') 105 | +coverPost({ 106 | link: false, 107 | picture: false, 108 | description: false 109 | })(class='text-left') 110 | +cover('title-c') 111 | +coverTitle() 112 | +coverPosts('title') 113 | +coverPost({ 114 | link: false, 115 | picture: false, 116 | description: false 117 | })(class='text-center') 118 | +cover('title-r') 119 | +coverTitle() 120 | +coverPosts('title') 121 | +coverPost({ 122 | link: false, 123 | picture: false, 124 | description: false 125 | })(class='text-right') 126 | +cover('title-summary-1/2') 127 | +coverTitle() 128 | +coverPosts('title-summary-1/2') 129 | +coverPost({ 130 | link: false, 131 | picture: false, 132 | description: false 133 | }) 134 | +cover('title-summary-2') 135 | +coverTitle() 136 | +coverPosts('title-summary-2') 137 | +coverPost({ 138 | link: false, 139 | picture: false, 140 | description: false 141 | }) 142 | 143 | //----------- SUMMARY -----------// 144 | 145 | +cover('summary-l') 146 | +coverTitle() 147 | +coverPosts('summary') 148 | +coverPost({ 149 | link: false, 150 | picture: false, 151 | header: false 152 | })(class='text-left') 153 | +cover('summary-c') 154 | +coverTitle() 155 | +coverPosts('summary') 156 | +coverPost({ 157 | link: false, 158 | picture: false, 159 | header: false 160 | })(class='text-center') 161 | +cover('summary-r') 162 | +coverTitle() 163 | +coverPosts('summary') 164 | +coverPost({ 165 | link: false, 166 | picture: false, 167 | header: false 168 | })(class='text-right') 169 | +cover('summary-title-1/2') 170 | +coverTitle() 171 | +coverPosts('summary-title-1/2') 172 | +coverPost({ 173 | link: false, 174 | picture: false, 175 | description: false 176 | }) 177 | 178 | //----------- BUTTON -----------// 179 | 180 | +cover('button-l') 181 | +coverTitle() 182 | +coverPosts('button')(class='justify-start') 183 | +coverPost({ 184 | picture: false, 185 | description: false, 186 | summary: false 187 | }) 188 | +cover('button-c') 189 | +coverTitle() 190 | +coverPosts('button')(class='justify-center') 191 | +coverPost({ 192 | picture: false, 193 | description: false, 194 | summary: false 195 | }) 196 | +cover('button-r') 197 | +coverTitle() 198 | +coverPosts('button')(class='justify-end') 199 | +coverPost({ 200 | picture: false, 201 | description: false, 202 | summary: false 203 | }) 204 | +cover('link-l') 205 | +coverTitle() 206 | +coverPosts('link')(class='justify-start') 207 | +coverPost({ 208 | picture: false, 209 | description: false, 210 | summary: false 211 | }) 212 | +cover('link-c') 213 | +coverTitle() 214 | +coverPosts('link')(class='justify-center') 215 | +coverPost({ 216 | picture: false, 217 | description: false, 218 | summary: false 219 | }) 220 | +cover('link-r') 221 | +coverTitle() 222 | +coverPosts('link')(class='justify-end') 223 | +coverPost({ 224 | picture: false, 225 | description: false, 226 | summary: false 227 | }) 228 | +cover('keyword-l') 229 | +coverTitle() 230 | +coverPosts('keyword')(class='justify-start') 231 | +coverPost({ 232 | picture: false, 233 | description: false, 234 | summary: false 235 | }) 236 | +cover('keyword-c') 237 | +coverTitle() 238 | +coverPosts('keyword')(class='justify-center') 239 | +coverPost({ 240 | picture: false, 241 | description: false, 242 | summary: false 243 | }) 244 | +cover('keyword-r') 245 | +coverTitle() 246 | +coverPosts('keyword')(class='justify-end') 247 | +coverPost({ 248 | picture: false, 249 | description: false, 250 | summary: false 251 | }) 252 | -------------------------------------------------------------------------------- /views/Main/Entry.pug: -------------------------------------------------------------------------------- 1 | s_article_rep 2 | s_permalink_article_rep 3 | section#entry 4 | +permalink('article') 5 | include Entry/Popup 6 | include Entry/Replies 7 | -------------------------------------------------------------------------------- /views/Main/Entry/Popup.pug: -------------------------------------------------------------------------------- 1 | aside#popup 2 | +popup('prev')(class='ml-4') 3 | +popup('next')(class='right-0 mr-4') 4 | -------------------------------------------------------------------------------- /views/Main/Entry/Replies.pug: -------------------------------------------------------------------------------- 1 | section#replies(class='permalink-container') 2 | include Replies/Supporters 3 | s_rp 4 | +group('comment') 5 | -------------------------------------------------------------------------------- /views/Main/Entry/Replies/Supporters.pug: -------------------------------------------------------------------------------- 1 | if process.env.NODE_ENV === 'development' 2 | // div(data-tistory-react-app='Supporters') 3 | div 4 | .tt_box_cheers 5 | p.tt_desc_cheers 6 | span.tt_ico_smile 정상우님의 7 | br 8 | | 글이 좋았다면 9 | span.tt_bg_emph_cheers 응원 10 | | 을 보내주세요! 11 | button.tt_btn_cheers(type='button') 12 | span.tt_ico_cheers 13 | svg(width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg') 14 | g(clip-path='url(#clip0_113_170)') 15 | path(fill-rule='evenodd' clip-rule='evenodd' d='M3.13834 1.08131C2.69738 1.24795 2.57217 1.45132 2.53822 1.65981L2.53816 1.66021C2.51848 1.78026 2.56633 1.92335 2.81664 2.09277C3.06019 2.2576 3.41748 2.3849 3.78438 2.45708L3.91098 1.93206C3.96003 1.72866 4.15753 1.59742 4.36405 1.63101C4.82876 1.70659 5.18456 1.80466 5.42043 1.95588C5.54587 2.03631 5.66193 2.14716 5.72827 2.30089C5.79619 2.45831 5.79196 2.61408 5.75937 2.74514C5.69358 3.01304 5.4801 3.15122 5.31783 3.21819C5.15081 3.28712 4.95749 3.31695 4.77752 3.32892C4.41254 3.35321 3.98942 3.3105 3.6587 3.24759M3.65864 3.24758C3.22343 3.16486 2.73985 3.0068 2.36824 2.75529C1.99817 2.50483 1.65627 2.09545 1.74865 1.53104C1.84095 0.964633 2.22749 0.570303 2.85554 0.33296C3.45994 0.10456 4.33267 0 5.52246 0H17C17.2209 0 17.4 0.179086 17.4 0.4V10.6953C17.4 10.9162 17.2209 11.0953 17 11.0953H3.48101C3.2601 11.0953 3.08101 10.9162 3.08101 10.6953C3.08101 10.4743 3.2601 10.2953 3.48101 10.2953H16.6V0.8H5.52246C4.35673 0.8 3.60304 0.905697 3.13834 1.08131M2.14342 1.59553L1.74862 1.53125C1.74863 1.53118 1.74864 1.53111 1.74865 1.53104C1.74866 1.53098 1.74867 1.53092 1.74868 1.53085L2.14342 1.59553ZM2.14342 1.59553L2.14348 1.59554L2.14342 1.59553ZM4.58835 2.53571C4.63518 2.53523 4.68071 2.5336 4.7244 2.53069C4.73027 2.5303 4.73607 2.52989 4.74179 2.52946C4.69976 2.51709 4.65234 2.50447 4.59895 2.49175L4.58835 2.53571ZM5.0351 2.46779C5.03515 2.4678 5.03451 2.46826 5.03302 2.46911C5.03431 2.4682 5.03505 2.46777 5.0351 2.46779ZM5.37102 2.64926L5.37103 2.64926L5.37102 2.64926Z' fill='#F1F1F1') 16 | path(fill-rule='evenodd' clip-rule='evenodd' d='M2.23903 1.16684C2.45463 1.21499 2.59038 1.42881 2.54223 1.64441L0.851312 9.2161C0.783014 9.51999 0.782767 9.83487 0.851319 10.142L0.851543 10.143L1.40295 12.6432L3.01096 10.4776C3.20912 10.21 3.34448 9.91635 3.41309 9.60914C3.4131 9.60909 3.41307 9.6092 3.41309 9.60914L4.98343 2.56065C5.03147 2.34502 5.24521 2.20916 5.46084 2.2572C5.67647 2.30524 5.81232 2.51899 5.76428 2.73461L4.19394 9.78311C4.09989 10.2044 3.91555 10.6003 3.65386 10.9537L1.52238 13.8243C1.42898 13.9501 1.27074 14.0098 1.11753 13.977C0.964323 13.9442 0.844362 13.825 0.810619 13.672L0.0705378 10.3163C0.0704961 10.3161 0.0705794 10.3164 0.0705378 10.3163C-0.0234025 9.89506 -0.0236393 9.46104 0.0705877 9.04155C0.0706129 9.04144 0.0705625 9.04166 0.0705877 9.04155L1.76147 1.47005C1.80962 1.25444 2.02343 1.1187 2.23903 1.16684Z' fill='#F1F1F1') 17 | path(fill-rule='evenodd' clip-rule='evenodd' d='M7.74361 3.22393C7.95169 3.14972 8.18052 3.25825 8.25473 3.46632L9.33054 6.48298L10.4063 3.46633C10.4631 3.30704 10.614 3.20069 10.7831 3.20069C10.9522 3.20069 11.1031 3.30704 11.1599 3.46633L12.2357 6.48298L13.3115 3.46633C13.3857 3.25825 13.6145 3.14972 13.8226 3.22393C14.0307 3.29813 14.1392 3.52697 14.065 3.73505L12.6124 7.80816C12.5556 7.96745 12.4048 8.0738 12.2357 8.0738C12.0666 8.0738 11.9157 7.96745 11.8589 7.80816L10.7831 4.79151L9.70729 7.80816C9.65049 7.96745 9.49965 8.0738 9.33054 8.0738C9.16142 8.0738 9.01058 7.96745 8.95378 7.80816L7.50121 3.73505C7.427 3.52697 7.53553 3.29813 7.74361 3.22393Z' fill='#F1F1F1') 18 | path(fill-rule='evenodd' clip-rule='evenodd' d='M7.11322 5.26865C7.11322 5.04774 7.29231 4.86865 7.51322 4.86865H14.0526C14.2735 4.86865 14.4526 5.04774 14.4526 5.26865C14.4526 5.48957 14.2735 5.66865 14.0526 5.66865H7.51322C7.29231 5.66865 7.11322 5.48957 7.11322 5.26865Z' fill='#F1F1F1') 19 | defs 20 | clipPath#clip0_113_170 21 | rect(width='18' height='14' fill='white') 22 | span.tt_txt_cheers 응원하기 23 | .tt_guide_cheers 24 | button.tt_btn_guide_cheers(type='button') 25 | span.tt_txt_guide_cheers 응원하기 26 | span.tt_img_area_reply.tt_ico_question 란? 27 | .tt_cheers_layer(style='display: none;') 28 | .tt_inner_cheers_layer 29 | .tt_cheers_layer_head 30 | strong.tt_tit_cheers_layer 응원하기 31 | .tt_cheers_layer_body 32 | .tt_wrap_guide 33 | .tt_inner_wrap_guide 34 | .tt_box_guide 35 | .tt_inner_box_guide 36 | span.tt_img_area_reply.tt_ico_guide1 37 | .tt_cont_guide 38 | strong.tt_tit_guide 응원은 창작의 힘 39 | p.tt_desc_guide 이 글이 도움이 됐다면, 응원 댓글을 써보세요. 블로거에게 지급되는 응원금은 새로운 창작의 큰 힘이 됩니다. 40 | .tt_box_guide 41 | .tt_inner_box_guide 42 | span.tt_img_area_reply.tt_ico_guide2 43 | .tt_cont_guide 44 | strong.tt_tit_guide 카카오 계정으로 누구나 45 | p.tt_desc_guide 응원 댓글은 만 14세 이상 카카오계정 이용자라면 누구나 편하게 작성, 결제할 수 있습니다. 46 | .tt_box_guide 47 | .tt_inner_box_guide 48 | span.tt_img_area_reply.tt_ico_guide3 49 | .tt_cont_guide 50 | strong.tt_tit_guide 응원 댓글 강조 51 | p.tt_desc_guide 글 본문, 댓글 목록 등을 통해 응원한 팬과 응원 댓글, 응원금을 강조해 보여줍니다. 52 | .tt_box_guide 53 | .tt_inner_box_guide 54 | span.tt_img_area_reply.tt_ico_guide4 55 | .tt_cont_guide 56 | strong.tt_tit_guide 쉬운 결제 57 | p.tt_desc_guide 응원금은 앱에서는 인앱결제, 웹에서는 카카오페이 및 신용카드로 결제할 수 있습니다. 58 | .tt_cheers_layer_foot 59 | .wrap_btn 60 | button.btn_confirm(type='button' style='cursor: pointer;') 확인 61 | .tt_cheers_layer(style='display: none;') 62 | form 63 | .tt_inner_cheers_layer.tt_inner_cheers_layer1 64 | .tt_cheers_layer_head 65 | strong.tt_tit_cheers_layer 응원 수익은 66 | strong.tt_tit_cheers_layer 창작자에게 큰 힘이 됩니다. 67 | .tt_cheers_layer_body 68 | .tt_inner_cheers_layer_scroll 69 | strong.tt_tit_cheers_layer 응원 금액 70 | .tt_list_cheers_select 71 | label.tt-xe-label 72 | input#1000(type='radio' name='Expense') 73 | .tt_card_cheers.tt_card_cheers_level(style='min-width: inherit;') 74 | span.tt_cheers_amount 75 | span.tt_ico_won 76 | span.ir_pm ￦ 77 | span.tt_select 78 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 79 | g(clip-path='url(#clip0_150_87)') 80 | path(d='M1.88281 6.68457C1.70703 6.68457 1.57031 6.54297 1.57031 6.3623C1.57031 6.17676 1.70703 6.04492 1.88281 6.04492H2.96191L2.25879 2.64648C2.24414 2.55859 2.23438 2.47559 2.23438 2.39258C2.23438 2.12891 2.43945 1.96777 2.70312 1.96777C2.94727 1.96777 3.12793 2.11914 3.17188 2.35352L3.86035 6.04492H5.51074L6.49219 2.41211C6.56055 2.1582 6.7168 1.9873 7 1.9873C7.27832 1.9873 7.42969 2.14355 7.49316 2.39258L8.47949 6.04492H10.1299L10.8184 2.35352C10.8623 2.11426 11.043 1.96777 11.2822 1.96777C11.5459 1.96777 11.7559 2.12891 11.7559 2.39258C11.7559 2.48047 11.7412 2.56348 11.7266 2.65137L11.0234 6.04492H12.1074C12.2881 6.04492 12.4248 6.17676 12.4248 6.3623C12.4248 6.54297 12.2881 6.68457 12.1074 6.68457H10.8916L10.1396 10.3369C10.0762 10.6543 9.82227 10.8545 9.49512 10.8545C9.18262 10.8545 8.94336 10.6592 8.87012 10.3564L7.86914 6.68457H6.12109L5.12012 10.3564C5.04199 10.6592 4.80762 10.8545 4.49023 10.8545C4.16309 10.8545 3.91406 10.6543 3.85059 10.3369L3.09375 6.68457H1.88281ZM6.9707 3.57422L6.29688 6.04492H7.69336L7.01953 3.57422H6.9707ZM4.51953 9.57031H4.55859L5.33984 6.68457H3.97754L4.51953 9.57031ZM9.43164 9.57031H9.4707L10.0078 6.68457H8.65039L9.43164 9.57031Z' fill='#555555') 81 | defs 82 | clipPath#clip0_150_87 83 | rect(width='14' height='12' fill='white') 84 | span.tt_selected 85 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 86 | g(clip-path='url(#clip0_113_177)') 87 | path(d='M4.6416 10.9375C4.30632 10.9375 4.01823 10.8366 3.77734 10.6348C3.53646 10.4362 3.38184 10.1514 3.31348 9.78027L2.10254 3.29102C2.08626 3.19987 2.07812 3.10384 2.07812 3.00293C2.07812 2.70671 2.16927 2.46582 2.35156 2.28027C2.53385 2.09473 2.78776 2.00195 3.11328 2.00195C3.38021 2.00195 3.60807 2.08659 3.79688 2.25586C3.98568 2.42188 4.09635 2.63672 4.12891 2.90039L4.81738 8.34473H4.86133L5.90137 2.99316C5.96322 2.66439 6.08691 2.41699 6.27246 2.25098C6.45801 2.08171 6.69727 1.99707 6.99023 1.99707C7.28646 1.99707 7.52897 2.08008 7.71777 2.24609C7.90658 2.41211 8.0319 2.65951 8.09375 2.98828L9.13379 8.34473H9.17773L9.86621 2.90039C9.89876 2.63672 10.0094 2.42188 10.1982 2.25586C10.387 2.08659 10.6165 2.00195 10.8867 2.00195C11.209 2.00195 11.4613 2.09473 11.6436 2.28027C11.8258 2.46582 11.917 2.70671 11.917 3.00293C11.917 3.10384 11.9089 3.19987 11.8926 3.29102L10.6816 9.78027C10.6133 10.1514 10.4587 10.4362 10.2178 10.6348C9.97689 10.8366 9.69043 10.9375 9.3584 10.9375C9.02311 10.9375 8.7334 10.8382 8.48926 10.6396C8.24837 10.4411 8.09375 10.1562 8.02539 9.78516L7.02441 4.58496H6.9707L5.96973 9.78516C5.90137 10.1562 5.74512 10.4411 5.50098 10.6396C5.26009 10.8382 4.97363 10.9375 4.6416 10.9375ZM1.54102 6.63086C1.46615 6.63086 1.40267 6.60645 1.35059 6.55762C1.30176 6.50879 1.27734 6.44694 1.27734 6.37207C1.27734 6.2972 1.30176 6.23535 1.35059 6.18652C1.40267 6.1377 1.46615 6.11328 1.54102 6.11328H12.459C12.5339 6.11328 12.5957 6.1377 12.6445 6.18652C12.6966 6.23535 12.7227 6.2972 12.7227 6.37207C12.7227 6.44694 12.6966 6.50879 12.6445 6.55762C12.5957 6.60645 12.5339 6.63086 12.459 6.63086H1.54102Z' fill='#2F7262') 88 | defs 89 | clipPath#clip0_113_177 90 | rect(width='14' height='12' fill='white') 91 | span.tt_txt_won 1,000 92 | label.tt-xe-label 93 | input#3000(type='radio' name='Expense' checked) 94 | .tt_card_cheers.tt_card_cheers_level(style='min-width: inherit;') 95 | span.tt_cheers_amount 96 | span.tt_ico_won 97 | span.ir_pm ￦ 98 | span.tt_select 99 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 100 | g(clip-path='url(#clip0_150_87)') 101 | path(d='M1.88281 6.68457C1.70703 6.68457 1.57031 6.54297 1.57031 6.3623C1.57031 6.17676 1.70703 6.04492 1.88281 6.04492H2.96191L2.25879 2.64648C2.24414 2.55859 2.23438 2.47559 2.23438 2.39258C2.23438 2.12891 2.43945 1.96777 2.70312 1.96777C2.94727 1.96777 3.12793 2.11914 3.17188 2.35352L3.86035 6.04492H5.51074L6.49219 2.41211C6.56055 2.1582 6.7168 1.9873 7 1.9873C7.27832 1.9873 7.42969 2.14355 7.49316 2.39258L8.47949 6.04492H10.1299L10.8184 2.35352C10.8623 2.11426 11.043 1.96777 11.2822 1.96777C11.5459 1.96777 11.7559 2.12891 11.7559 2.39258C11.7559 2.48047 11.7412 2.56348 11.7266 2.65137L11.0234 6.04492H12.1074C12.2881 6.04492 12.4248 6.17676 12.4248 6.3623C12.4248 6.54297 12.2881 6.68457 12.1074 6.68457H10.8916L10.1396 10.3369C10.0762 10.6543 9.82227 10.8545 9.49512 10.8545C9.18262 10.8545 8.94336 10.6592 8.87012 10.3564L7.86914 6.68457H6.12109L5.12012 10.3564C5.04199 10.6592 4.80762 10.8545 4.49023 10.8545C4.16309 10.8545 3.91406 10.6543 3.85059 10.3369L3.09375 6.68457H1.88281ZM6.9707 3.57422L6.29688 6.04492H7.69336L7.01953 3.57422H6.9707ZM4.51953 9.57031H4.55859L5.33984 6.68457H3.97754L4.51953 9.57031ZM9.43164 9.57031H9.4707L10.0078 6.68457H8.65039L9.43164 9.57031Z' fill='#555555') 102 | defs 103 | clipPath#clip0_150_87 104 | rect(width='14' height='12' fill='white') 105 | span.tt_selected 106 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 107 | g(clip-path='url(#clip0_113_177)') 108 | path(d='M4.6416 10.9375C4.30632 10.9375 4.01823 10.8366 3.77734 10.6348C3.53646 10.4362 3.38184 10.1514 3.31348 9.78027L2.10254 3.29102C2.08626 3.19987 2.07812 3.10384 2.07812 3.00293C2.07812 2.70671 2.16927 2.46582 2.35156 2.28027C2.53385 2.09473 2.78776 2.00195 3.11328 2.00195C3.38021 2.00195 3.60807 2.08659 3.79688 2.25586C3.98568 2.42188 4.09635 2.63672 4.12891 2.90039L4.81738 8.34473H4.86133L5.90137 2.99316C5.96322 2.66439 6.08691 2.41699 6.27246 2.25098C6.45801 2.08171 6.69727 1.99707 6.99023 1.99707C7.28646 1.99707 7.52897 2.08008 7.71777 2.24609C7.90658 2.41211 8.0319 2.65951 8.09375 2.98828L9.13379 8.34473H9.17773L9.86621 2.90039C9.89876 2.63672 10.0094 2.42188 10.1982 2.25586C10.387 2.08659 10.6165 2.00195 10.8867 2.00195C11.209 2.00195 11.4613 2.09473 11.6436 2.28027C11.8258 2.46582 11.917 2.70671 11.917 3.00293C11.917 3.10384 11.9089 3.19987 11.8926 3.29102L10.6816 9.78027C10.6133 10.1514 10.4587 10.4362 10.2178 10.6348C9.97689 10.8366 9.69043 10.9375 9.3584 10.9375C9.02311 10.9375 8.7334 10.8382 8.48926 10.6396C8.24837 10.4411 8.09375 10.1562 8.02539 9.78516L7.02441 4.58496H6.9707L5.96973 9.78516C5.90137 10.1562 5.74512 10.4411 5.50098 10.6396C5.26009 10.8382 4.97363 10.9375 4.6416 10.9375ZM1.54102 6.63086C1.46615 6.63086 1.40267 6.60645 1.35059 6.55762C1.30176 6.50879 1.27734 6.44694 1.27734 6.37207C1.27734 6.2972 1.30176 6.23535 1.35059 6.18652C1.40267 6.1377 1.46615 6.11328 1.54102 6.11328H12.459C12.5339 6.11328 12.5957 6.1377 12.6445 6.18652C12.6966 6.23535 12.7227 6.2972 12.7227 6.37207C12.7227 6.44694 12.6966 6.50879 12.6445 6.55762C12.5957 6.60645 12.5339 6.63086 12.459 6.63086H1.54102Z' fill='#2F7262') 109 | defs 110 | clipPath#clip0_113_177 111 | rect(width='14' height='12' fill='white') 112 | span.tt_txt_won 3,000 113 | label.tt-xe-label 114 | input#5000(type='radio' name='Expense') 115 | .tt_card_cheers.tt_card_cheers_level2(style='min-width: inherit;') 116 | span.tt_cheers_amount 117 | span.tt_ico_won 118 | span.ir_pm ￦ 119 | span.tt_select 120 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 121 | g(clip-path='url(#clip0_150_87)') 122 | path(d='M1.88281 6.68457C1.70703 6.68457 1.57031 6.54297 1.57031 6.3623C1.57031 6.17676 1.70703 6.04492 1.88281 6.04492H2.96191L2.25879 2.64648C2.24414 2.55859 2.23438 2.47559 2.23438 2.39258C2.23438 2.12891 2.43945 1.96777 2.70312 1.96777C2.94727 1.96777 3.12793 2.11914 3.17188 2.35352L3.86035 6.04492H5.51074L6.49219 2.41211C6.56055 2.1582 6.7168 1.9873 7 1.9873C7.27832 1.9873 7.42969 2.14355 7.49316 2.39258L8.47949 6.04492H10.1299L10.8184 2.35352C10.8623 2.11426 11.043 1.96777 11.2822 1.96777C11.5459 1.96777 11.7559 2.12891 11.7559 2.39258C11.7559 2.48047 11.7412 2.56348 11.7266 2.65137L11.0234 6.04492H12.1074C12.2881 6.04492 12.4248 6.17676 12.4248 6.3623C12.4248 6.54297 12.2881 6.68457 12.1074 6.68457H10.8916L10.1396 10.3369C10.0762 10.6543 9.82227 10.8545 9.49512 10.8545C9.18262 10.8545 8.94336 10.6592 8.87012 10.3564L7.86914 6.68457H6.12109L5.12012 10.3564C5.04199 10.6592 4.80762 10.8545 4.49023 10.8545C4.16309 10.8545 3.91406 10.6543 3.85059 10.3369L3.09375 6.68457H1.88281ZM6.9707 3.57422L6.29688 6.04492H7.69336L7.01953 3.57422H6.9707ZM4.51953 9.57031H4.55859L5.33984 6.68457H3.97754L4.51953 9.57031ZM9.43164 9.57031H9.4707L10.0078 6.68457H8.65039L9.43164 9.57031Z' fill='#555555') 123 | defs 124 | clipPath#clip0_150_87 125 | rect(width='14' height='12' fill='white') 126 | span.tt_selected 127 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 128 | g(clip-path='url(#clip0_113_177)') 129 | path(d='M4.6416 10.9375C4.30632 10.9375 4.01823 10.8366 3.77734 10.6348C3.53646 10.4362 3.38184 10.1514 3.31348 9.78027L2.10254 3.29102C2.08626 3.19987 2.07812 3.10384 2.07812 3.00293C2.07812 2.70671 2.16927 2.46582 2.35156 2.28027C2.53385 2.09473 2.78776 2.00195 3.11328 2.00195C3.38021 2.00195 3.60807 2.08659 3.79688 2.25586C3.98568 2.42188 4.09635 2.63672 4.12891 2.90039L4.81738 8.34473H4.86133L5.90137 2.99316C5.96322 2.66439 6.08691 2.41699 6.27246 2.25098C6.45801 2.08171 6.69727 1.99707 6.99023 1.99707C7.28646 1.99707 7.52897 2.08008 7.71777 2.24609C7.90658 2.41211 8.0319 2.65951 8.09375 2.98828L9.13379 8.34473H9.17773L9.86621 2.90039C9.89876 2.63672 10.0094 2.42188 10.1982 2.25586C10.387 2.08659 10.6165 2.00195 10.8867 2.00195C11.209 2.00195 11.4613 2.09473 11.6436 2.28027C11.8258 2.46582 11.917 2.70671 11.917 3.00293C11.917 3.10384 11.9089 3.19987 11.8926 3.29102L10.6816 9.78027C10.6133 10.1514 10.4587 10.4362 10.2178 10.6348C9.97689 10.8366 9.69043 10.9375 9.3584 10.9375C9.02311 10.9375 8.7334 10.8382 8.48926 10.6396C8.24837 10.4411 8.09375 10.1562 8.02539 9.78516L7.02441 4.58496H6.9707L5.96973 9.78516C5.90137 10.1562 5.74512 10.4411 5.50098 10.6396C5.26009 10.8382 4.97363 10.9375 4.6416 10.9375ZM1.54102 6.63086C1.46615 6.63086 1.40267 6.60645 1.35059 6.55762C1.30176 6.50879 1.27734 6.44694 1.27734 6.37207C1.27734 6.2972 1.30176 6.23535 1.35059 6.18652C1.40267 6.1377 1.46615 6.11328 1.54102 6.11328H12.459C12.5339 6.11328 12.5957 6.1377 12.6445 6.18652C12.6966 6.23535 12.7227 6.2972 12.7227 6.37207C12.7227 6.44694 12.6966 6.50879 12.6445 6.55762C12.5957 6.60645 12.5339 6.63086 12.459 6.63086H1.54102Z' fill='#2F7262') 130 | defs 131 | clipPath#clip0_113_177 132 | rect(width='14' height='12' fill='white') 133 | span.tt_txt_won 5,000 134 | label.tt-xe-label 135 | input#10000(type='radio' name='Expense') 136 | .tt_card_cheers.tt_card_cheers_level3(style='min-width: inherit;') 137 | span.tt_cheers_amount 138 | span.tt_ico_won 139 | span.ir_pm ￦ 140 | span.tt_select 141 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 142 | g(clip-path='url(#clip0_150_87)') 143 | path(d='M1.88281 6.68457C1.70703 6.68457 1.57031 6.54297 1.57031 6.3623C1.57031 6.17676 1.70703 6.04492 1.88281 6.04492H2.96191L2.25879 2.64648C2.24414 2.55859 2.23438 2.47559 2.23438 2.39258C2.23438 2.12891 2.43945 1.96777 2.70312 1.96777C2.94727 1.96777 3.12793 2.11914 3.17188 2.35352L3.86035 6.04492H5.51074L6.49219 2.41211C6.56055 2.1582 6.7168 1.9873 7 1.9873C7.27832 1.9873 7.42969 2.14355 7.49316 2.39258L8.47949 6.04492H10.1299L10.8184 2.35352C10.8623 2.11426 11.043 1.96777 11.2822 1.96777C11.5459 1.96777 11.7559 2.12891 11.7559 2.39258C11.7559 2.48047 11.7412 2.56348 11.7266 2.65137L11.0234 6.04492H12.1074C12.2881 6.04492 12.4248 6.17676 12.4248 6.3623C12.4248 6.54297 12.2881 6.68457 12.1074 6.68457H10.8916L10.1396 10.3369C10.0762 10.6543 9.82227 10.8545 9.49512 10.8545C9.18262 10.8545 8.94336 10.6592 8.87012 10.3564L7.86914 6.68457H6.12109L5.12012 10.3564C5.04199 10.6592 4.80762 10.8545 4.49023 10.8545C4.16309 10.8545 3.91406 10.6543 3.85059 10.3369L3.09375 6.68457H1.88281ZM6.9707 3.57422L6.29688 6.04492H7.69336L7.01953 3.57422H6.9707ZM4.51953 9.57031H4.55859L5.33984 6.68457H3.97754L4.51953 9.57031ZM9.43164 9.57031H9.4707L10.0078 6.68457H8.65039L9.43164 9.57031Z' fill='#555555') 144 | defs 145 | clipPath#clip0_150_87 146 | rect(width='14' height='12' fill='white') 147 | span.tt_selected 148 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 149 | g(clip-path='url(#clip0_113_177)') 150 | path(d='M4.6416 10.9375C4.30632 10.9375 4.01823 10.8366 3.77734 10.6348C3.53646 10.4362 3.38184 10.1514 3.31348 9.78027L2.10254 3.29102C2.08626 3.19987 2.07812 3.10384 2.07812 3.00293C2.07812 2.70671 2.16927 2.46582 2.35156 2.28027C2.53385 2.09473 2.78776 2.00195 3.11328 2.00195C3.38021 2.00195 3.60807 2.08659 3.79688 2.25586C3.98568 2.42188 4.09635 2.63672 4.12891 2.90039L4.81738 8.34473H4.86133L5.90137 2.99316C5.96322 2.66439 6.08691 2.41699 6.27246 2.25098C6.45801 2.08171 6.69727 1.99707 6.99023 1.99707C7.28646 1.99707 7.52897 2.08008 7.71777 2.24609C7.90658 2.41211 8.0319 2.65951 8.09375 2.98828L9.13379 8.34473H9.17773L9.86621 2.90039C9.89876 2.63672 10.0094 2.42188 10.1982 2.25586C10.387 2.08659 10.6165 2.00195 10.8867 2.00195C11.209 2.00195 11.4613 2.09473 11.6436 2.28027C11.8258 2.46582 11.917 2.70671 11.917 3.00293C11.917 3.10384 11.9089 3.19987 11.8926 3.29102L10.6816 9.78027C10.6133 10.1514 10.4587 10.4362 10.2178 10.6348C9.97689 10.8366 9.69043 10.9375 9.3584 10.9375C9.02311 10.9375 8.7334 10.8382 8.48926 10.6396C8.24837 10.4411 8.09375 10.1562 8.02539 9.78516L7.02441 4.58496H6.9707L5.96973 9.78516C5.90137 10.1562 5.74512 10.4411 5.50098 10.6396C5.26009 10.8382 4.97363 10.9375 4.6416 10.9375ZM1.54102 6.63086C1.46615 6.63086 1.40267 6.60645 1.35059 6.55762C1.30176 6.50879 1.27734 6.44694 1.27734 6.37207C1.27734 6.2972 1.30176 6.23535 1.35059 6.18652C1.40267 6.1377 1.46615 6.11328 1.54102 6.11328H12.459C12.5339 6.11328 12.5957 6.1377 12.6445 6.18652C12.6966 6.23535 12.7227 6.2972 12.7227 6.37207C12.7227 6.44694 12.6966 6.50879 12.6445 6.55762C12.5957 6.60645 12.5339 6.63086 12.459 6.63086H1.54102Z' fill='#2F7262') 151 | defs 152 | clipPath#clip0_113_177 153 | rect(width='14' height='12' fill='white') 154 | span.tt_txt_won 10,000 155 | label.tt-xe-label 156 | input#15000(type='radio' name='Expense') 157 | .tt_card_cheers.tt_card_cheers_level3(style='min-width: inherit;') 158 | span.tt_cheers_amount 159 | span.tt_ico_won 160 | span.ir_pm ￦ 161 | span.tt_select 162 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 163 | g(clip-path='url(#clip0_150_87)') 164 | path(d='M1.88281 6.68457C1.70703 6.68457 1.57031 6.54297 1.57031 6.3623C1.57031 6.17676 1.70703 6.04492 1.88281 6.04492H2.96191L2.25879 2.64648C2.24414 2.55859 2.23438 2.47559 2.23438 2.39258C2.23438 2.12891 2.43945 1.96777 2.70312 1.96777C2.94727 1.96777 3.12793 2.11914 3.17188 2.35352L3.86035 6.04492H5.51074L6.49219 2.41211C6.56055 2.1582 6.7168 1.9873 7 1.9873C7.27832 1.9873 7.42969 2.14355 7.49316 2.39258L8.47949 6.04492H10.1299L10.8184 2.35352C10.8623 2.11426 11.043 1.96777 11.2822 1.96777C11.5459 1.96777 11.7559 2.12891 11.7559 2.39258C11.7559 2.48047 11.7412 2.56348 11.7266 2.65137L11.0234 6.04492H12.1074C12.2881 6.04492 12.4248 6.17676 12.4248 6.3623C12.4248 6.54297 12.2881 6.68457 12.1074 6.68457H10.8916L10.1396 10.3369C10.0762 10.6543 9.82227 10.8545 9.49512 10.8545C9.18262 10.8545 8.94336 10.6592 8.87012 10.3564L7.86914 6.68457H6.12109L5.12012 10.3564C5.04199 10.6592 4.80762 10.8545 4.49023 10.8545C4.16309 10.8545 3.91406 10.6543 3.85059 10.3369L3.09375 6.68457H1.88281ZM6.9707 3.57422L6.29688 6.04492H7.69336L7.01953 3.57422H6.9707ZM4.51953 9.57031H4.55859L5.33984 6.68457H3.97754L4.51953 9.57031ZM9.43164 9.57031H9.4707L10.0078 6.68457H8.65039L9.43164 9.57031Z' fill='#555555') 165 | defs 166 | clipPath#clip0_150_87 167 | rect(width='14' height='12' fill='white') 168 | span.tt_selected 169 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 170 | g(clip-path='url(#clip0_113_177)') 171 | path(d='M4.6416 10.9375C4.30632 10.9375 4.01823 10.8366 3.77734 10.6348C3.53646 10.4362 3.38184 10.1514 3.31348 9.78027L2.10254 3.29102C2.08626 3.19987 2.07812 3.10384 2.07812 3.00293C2.07812 2.70671 2.16927 2.46582 2.35156 2.28027C2.53385 2.09473 2.78776 2.00195 3.11328 2.00195C3.38021 2.00195 3.60807 2.08659 3.79688 2.25586C3.98568 2.42188 4.09635 2.63672 4.12891 2.90039L4.81738 8.34473H4.86133L5.90137 2.99316C5.96322 2.66439 6.08691 2.41699 6.27246 2.25098C6.45801 2.08171 6.69727 1.99707 6.99023 1.99707C7.28646 1.99707 7.52897 2.08008 7.71777 2.24609C7.90658 2.41211 8.0319 2.65951 8.09375 2.98828L9.13379 8.34473H9.17773L9.86621 2.90039C9.89876 2.63672 10.0094 2.42188 10.1982 2.25586C10.387 2.08659 10.6165 2.00195 10.8867 2.00195C11.209 2.00195 11.4613 2.09473 11.6436 2.28027C11.8258 2.46582 11.917 2.70671 11.917 3.00293C11.917 3.10384 11.9089 3.19987 11.8926 3.29102L10.6816 9.78027C10.6133 10.1514 10.4587 10.4362 10.2178 10.6348C9.97689 10.8366 9.69043 10.9375 9.3584 10.9375C9.02311 10.9375 8.7334 10.8382 8.48926 10.6396C8.24837 10.4411 8.09375 10.1562 8.02539 9.78516L7.02441 4.58496H6.9707L5.96973 9.78516C5.90137 10.1562 5.74512 10.4411 5.50098 10.6396C5.26009 10.8382 4.97363 10.9375 4.6416 10.9375ZM1.54102 6.63086C1.46615 6.63086 1.40267 6.60645 1.35059 6.55762C1.30176 6.50879 1.27734 6.44694 1.27734 6.37207C1.27734 6.2972 1.30176 6.23535 1.35059 6.18652C1.40267 6.1377 1.46615 6.11328 1.54102 6.11328H12.459C12.5339 6.11328 12.5957 6.1377 12.6445 6.18652C12.6966 6.23535 12.7227 6.2972 12.7227 6.37207C12.7227 6.44694 12.6966 6.50879 12.6445 6.55762C12.5957 6.60645 12.5339 6.63086 12.459 6.63086H1.54102Z' fill='#2F7262') 172 | defs 173 | clipPath#clip0_113_177 174 | rect(width='14' height='12' fill='white') 175 | span.tt_txt_won 15,000 176 | label.tt-xe-label 177 | input#20000(type='radio' name='Expense') 178 | .tt_card_cheers.tt_card_cheers_level3(style='min-width: inherit;') 179 | span.tt_cheers_amount 180 | span.tt_ico_won 181 | span.ir_pm ￦ 182 | span.tt_select 183 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 184 | g(clip-path='url(#clip0_150_87)') 185 | path(d='M1.88281 6.68457C1.70703 6.68457 1.57031 6.54297 1.57031 6.3623C1.57031 6.17676 1.70703 6.04492 1.88281 6.04492H2.96191L2.25879 2.64648C2.24414 2.55859 2.23438 2.47559 2.23438 2.39258C2.23438 2.12891 2.43945 1.96777 2.70312 1.96777C2.94727 1.96777 3.12793 2.11914 3.17188 2.35352L3.86035 6.04492H5.51074L6.49219 2.41211C6.56055 2.1582 6.7168 1.9873 7 1.9873C7.27832 1.9873 7.42969 2.14355 7.49316 2.39258L8.47949 6.04492H10.1299L10.8184 2.35352C10.8623 2.11426 11.043 1.96777 11.2822 1.96777C11.5459 1.96777 11.7559 2.12891 11.7559 2.39258C11.7559 2.48047 11.7412 2.56348 11.7266 2.65137L11.0234 6.04492H12.1074C12.2881 6.04492 12.4248 6.17676 12.4248 6.3623C12.4248 6.54297 12.2881 6.68457 12.1074 6.68457H10.8916L10.1396 10.3369C10.0762 10.6543 9.82227 10.8545 9.49512 10.8545C9.18262 10.8545 8.94336 10.6592 8.87012 10.3564L7.86914 6.68457H6.12109L5.12012 10.3564C5.04199 10.6592 4.80762 10.8545 4.49023 10.8545C4.16309 10.8545 3.91406 10.6543 3.85059 10.3369L3.09375 6.68457H1.88281ZM6.9707 3.57422L6.29688 6.04492H7.69336L7.01953 3.57422H6.9707ZM4.51953 9.57031H4.55859L5.33984 6.68457H3.97754L4.51953 9.57031ZM9.43164 9.57031H9.4707L10.0078 6.68457H8.65039L9.43164 9.57031Z' fill='#555555') 186 | defs 187 | clipPath#clip0_150_87 188 | rect(width='14' height='12' fill='white') 189 | span.tt_selected 190 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 191 | g(clip-path='url(#clip0_113_177)') 192 | path(d='M4.6416 10.9375C4.30632 10.9375 4.01823 10.8366 3.77734 10.6348C3.53646 10.4362 3.38184 10.1514 3.31348 9.78027L2.10254 3.29102C2.08626 3.19987 2.07812 3.10384 2.07812 3.00293C2.07812 2.70671 2.16927 2.46582 2.35156 2.28027C2.53385 2.09473 2.78776 2.00195 3.11328 2.00195C3.38021 2.00195 3.60807 2.08659 3.79688 2.25586C3.98568 2.42188 4.09635 2.63672 4.12891 2.90039L4.81738 8.34473H4.86133L5.90137 2.99316C5.96322 2.66439 6.08691 2.41699 6.27246 2.25098C6.45801 2.08171 6.69727 1.99707 6.99023 1.99707C7.28646 1.99707 7.52897 2.08008 7.71777 2.24609C7.90658 2.41211 8.0319 2.65951 8.09375 2.98828L9.13379 8.34473H9.17773L9.86621 2.90039C9.89876 2.63672 10.0094 2.42188 10.1982 2.25586C10.387 2.08659 10.6165 2.00195 10.8867 2.00195C11.209 2.00195 11.4613 2.09473 11.6436 2.28027C11.8258 2.46582 11.917 2.70671 11.917 3.00293C11.917 3.10384 11.9089 3.19987 11.8926 3.29102L10.6816 9.78027C10.6133 10.1514 10.4587 10.4362 10.2178 10.6348C9.97689 10.8366 9.69043 10.9375 9.3584 10.9375C9.02311 10.9375 8.7334 10.8382 8.48926 10.6396C8.24837 10.4411 8.09375 10.1562 8.02539 9.78516L7.02441 4.58496H6.9707L5.96973 9.78516C5.90137 10.1562 5.74512 10.4411 5.50098 10.6396C5.26009 10.8382 4.97363 10.9375 4.6416 10.9375ZM1.54102 6.63086C1.46615 6.63086 1.40267 6.60645 1.35059 6.55762C1.30176 6.50879 1.27734 6.44694 1.27734 6.37207C1.27734 6.2972 1.30176 6.23535 1.35059 6.18652C1.40267 6.1377 1.46615 6.11328 1.54102 6.11328H12.459C12.5339 6.11328 12.5957 6.1377 12.6445 6.18652C12.6966 6.23535 12.7227 6.2972 12.7227 6.37207C12.7227 6.44694 12.6966 6.50879 12.6445 6.55762C12.5957 6.60645 12.5339 6.63086 12.459 6.63086H1.54102Z' fill='#2F7262') 193 | defs 194 | clipPath#clip0_113_177 195 | rect(width='14' height='12' fill='white') 196 | span.tt_txt_won 20,000 197 | label.tt-xe-label 198 | input#50000(type='radio' name='Expense') 199 | .tt_card_cheers.tt_card_cheers_level4(style='min-width: inherit;') 200 | span.tt_cheers_amount 201 | span.tt_ico_won 202 | span.ir_pm ￦ 203 | span.tt_select 204 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 205 | g(clip-path='url(#clip0_150_87)') 206 | path(d='M1.88281 6.68457C1.70703 6.68457 1.57031 6.54297 1.57031 6.3623C1.57031 6.17676 1.70703 6.04492 1.88281 6.04492H2.96191L2.25879 2.64648C2.24414 2.55859 2.23438 2.47559 2.23438 2.39258C2.23438 2.12891 2.43945 1.96777 2.70312 1.96777C2.94727 1.96777 3.12793 2.11914 3.17188 2.35352L3.86035 6.04492H5.51074L6.49219 2.41211C6.56055 2.1582 6.7168 1.9873 7 1.9873C7.27832 1.9873 7.42969 2.14355 7.49316 2.39258L8.47949 6.04492H10.1299L10.8184 2.35352C10.8623 2.11426 11.043 1.96777 11.2822 1.96777C11.5459 1.96777 11.7559 2.12891 11.7559 2.39258C11.7559 2.48047 11.7412 2.56348 11.7266 2.65137L11.0234 6.04492H12.1074C12.2881 6.04492 12.4248 6.17676 12.4248 6.3623C12.4248 6.54297 12.2881 6.68457 12.1074 6.68457H10.8916L10.1396 10.3369C10.0762 10.6543 9.82227 10.8545 9.49512 10.8545C9.18262 10.8545 8.94336 10.6592 8.87012 10.3564L7.86914 6.68457H6.12109L5.12012 10.3564C5.04199 10.6592 4.80762 10.8545 4.49023 10.8545C4.16309 10.8545 3.91406 10.6543 3.85059 10.3369L3.09375 6.68457H1.88281ZM6.9707 3.57422L6.29688 6.04492H7.69336L7.01953 3.57422H6.9707ZM4.51953 9.57031H4.55859L5.33984 6.68457H3.97754L4.51953 9.57031ZM9.43164 9.57031H9.4707L10.0078 6.68457H8.65039L9.43164 9.57031Z' fill='#555555') 207 | defs 208 | clipPath#clip0_150_87 209 | rect(width='14' height='12' fill='white') 210 | span.tt_selected 211 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 212 | g(clip-path='url(#clip0_113_177)') 213 | path(d='M4.6416 10.9375C4.30632 10.9375 4.01823 10.8366 3.77734 10.6348C3.53646 10.4362 3.38184 10.1514 3.31348 9.78027L2.10254 3.29102C2.08626 3.19987 2.07812 3.10384 2.07812 3.00293C2.07812 2.70671 2.16927 2.46582 2.35156 2.28027C2.53385 2.09473 2.78776 2.00195 3.11328 2.00195C3.38021 2.00195 3.60807 2.08659 3.79688 2.25586C3.98568 2.42188 4.09635 2.63672 4.12891 2.90039L4.81738 8.34473H4.86133L5.90137 2.99316C5.96322 2.66439 6.08691 2.41699 6.27246 2.25098C6.45801 2.08171 6.69727 1.99707 6.99023 1.99707C7.28646 1.99707 7.52897 2.08008 7.71777 2.24609C7.90658 2.41211 8.0319 2.65951 8.09375 2.98828L9.13379 8.34473H9.17773L9.86621 2.90039C9.89876 2.63672 10.0094 2.42188 10.1982 2.25586C10.387 2.08659 10.6165 2.00195 10.8867 2.00195C11.209 2.00195 11.4613 2.09473 11.6436 2.28027C11.8258 2.46582 11.917 2.70671 11.917 3.00293C11.917 3.10384 11.9089 3.19987 11.8926 3.29102L10.6816 9.78027C10.6133 10.1514 10.4587 10.4362 10.2178 10.6348C9.97689 10.8366 9.69043 10.9375 9.3584 10.9375C9.02311 10.9375 8.7334 10.8382 8.48926 10.6396C8.24837 10.4411 8.09375 10.1562 8.02539 9.78516L7.02441 4.58496H6.9707L5.96973 9.78516C5.90137 10.1562 5.74512 10.4411 5.50098 10.6396C5.26009 10.8382 4.97363 10.9375 4.6416 10.9375ZM1.54102 6.63086C1.46615 6.63086 1.40267 6.60645 1.35059 6.55762C1.30176 6.50879 1.27734 6.44694 1.27734 6.37207C1.27734 6.2972 1.30176 6.23535 1.35059 6.18652C1.40267 6.1377 1.46615 6.11328 1.54102 6.11328H12.459C12.5339 6.11328 12.5957 6.1377 12.6445 6.18652C12.6966 6.23535 12.7227 6.2972 12.7227 6.37207C12.7227 6.44694 12.6966 6.50879 12.6445 6.55762C12.5957 6.60645 12.5339 6.63086 12.459 6.63086H1.54102Z' fill='#2F7262') 214 | defs 215 | clipPath#clip0_113_177 216 | rect(width='14' height='12' fill='white') 217 | span.tt_txt_won 50,000 218 | label.tt-xe-label 219 | input#75000(type='radio' name='Expense') 220 | .tt_card_cheers.tt_card_cheers_level4(style='min-width: inherit;') 221 | span.tt_cheers_amount 222 | span.tt_ico_won 223 | span.ir_pm ￦ 224 | span.tt_select 225 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 226 | g(clip-path='url(#clip0_150_87)') 227 | path(d='M1.88281 6.68457C1.70703 6.68457 1.57031 6.54297 1.57031 6.3623C1.57031 6.17676 1.70703 6.04492 1.88281 6.04492H2.96191L2.25879 2.64648C2.24414 2.55859 2.23438 2.47559 2.23438 2.39258C2.23438 2.12891 2.43945 1.96777 2.70312 1.96777C2.94727 1.96777 3.12793 2.11914 3.17188 2.35352L3.86035 6.04492H5.51074L6.49219 2.41211C6.56055 2.1582 6.7168 1.9873 7 1.9873C7.27832 1.9873 7.42969 2.14355 7.49316 2.39258L8.47949 6.04492H10.1299L10.8184 2.35352C10.8623 2.11426 11.043 1.96777 11.2822 1.96777C11.5459 1.96777 11.7559 2.12891 11.7559 2.39258C11.7559 2.48047 11.7412 2.56348 11.7266 2.65137L11.0234 6.04492H12.1074C12.2881 6.04492 12.4248 6.17676 12.4248 6.3623C12.4248 6.54297 12.2881 6.68457 12.1074 6.68457H10.8916L10.1396 10.3369C10.0762 10.6543 9.82227 10.8545 9.49512 10.8545C9.18262 10.8545 8.94336 10.6592 8.87012 10.3564L7.86914 6.68457H6.12109L5.12012 10.3564C5.04199 10.6592 4.80762 10.8545 4.49023 10.8545C4.16309 10.8545 3.91406 10.6543 3.85059 10.3369L3.09375 6.68457H1.88281ZM6.9707 3.57422L6.29688 6.04492H7.69336L7.01953 3.57422H6.9707ZM4.51953 9.57031H4.55859L5.33984 6.68457H3.97754L4.51953 9.57031ZM9.43164 9.57031H9.4707L10.0078 6.68457H8.65039L9.43164 9.57031Z' fill='#555555') 228 | defs 229 | clipPath#clip0_150_87 230 | rect(width='14' height='12' fill='white') 231 | span.tt_selected 232 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 233 | g(clip-path='url(#clip0_113_177)') 234 | path(d='M4.6416 10.9375C4.30632 10.9375 4.01823 10.8366 3.77734 10.6348C3.53646 10.4362 3.38184 10.1514 3.31348 9.78027L2.10254 3.29102C2.08626 3.19987 2.07812 3.10384 2.07812 3.00293C2.07812 2.70671 2.16927 2.46582 2.35156 2.28027C2.53385 2.09473 2.78776 2.00195 3.11328 2.00195C3.38021 2.00195 3.60807 2.08659 3.79688 2.25586C3.98568 2.42188 4.09635 2.63672 4.12891 2.90039L4.81738 8.34473H4.86133L5.90137 2.99316C5.96322 2.66439 6.08691 2.41699 6.27246 2.25098C6.45801 2.08171 6.69727 1.99707 6.99023 1.99707C7.28646 1.99707 7.52897 2.08008 7.71777 2.24609C7.90658 2.41211 8.0319 2.65951 8.09375 2.98828L9.13379 8.34473H9.17773L9.86621 2.90039C9.89876 2.63672 10.0094 2.42188 10.1982 2.25586C10.387 2.08659 10.6165 2.00195 10.8867 2.00195C11.209 2.00195 11.4613 2.09473 11.6436 2.28027C11.8258 2.46582 11.917 2.70671 11.917 3.00293C11.917 3.10384 11.9089 3.19987 11.8926 3.29102L10.6816 9.78027C10.6133 10.1514 10.4587 10.4362 10.2178 10.6348C9.97689 10.8366 9.69043 10.9375 9.3584 10.9375C9.02311 10.9375 8.7334 10.8382 8.48926 10.6396C8.24837 10.4411 8.09375 10.1562 8.02539 9.78516L7.02441 4.58496H6.9707L5.96973 9.78516C5.90137 10.1562 5.74512 10.4411 5.50098 10.6396C5.26009 10.8382 4.97363 10.9375 4.6416 10.9375ZM1.54102 6.63086C1.46615 6.63086 1.40267 6.60645 1.35059 6.55762C1.30176 6.50879 1.27734 6.44694 1.27734 6.37207C1.27734 6.2972 1.30176 6.23535 1.35059 6.18652C1.40267 6.1377 1.46615 6.11328 1.54102 6.11328H12.459C12.5339 6.11328 12.5957 6.1377 12.6445 6.18652C12.6966 6.23535 12.7227 6.2972 12.7227 6.37207C12.7227 6.44694 12.6966 6.50879 12.6445 6.55762C12.5957 6.60645 12.5339 6.63086 12.459 6.63086H1.54102Z' fill='#2F7262') 235 | defs 236 | clipPath#clip0_113_177 237 | rect(width='14' height='12' fill='white') 238 | span.tt_txt_won 75,000 239 | label.tt-xe-label 240 | input#100000(type='radio' name='Expense') 241 | .tt_card_cheers.tt_card_cheers_level5(style='min-width: inherit;') 242 | span.tt_cheers_amount 243 | span.tt_ico_won 244 | span.ir_pm ￦ 245 | span.tt_select 246 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 247 | g(clip-path='url(#clip0_150_87)') 248 | path(d='M1.88281 6.68457C1.70703 6.68457 1.57031 6.54297 1.57031 6.3623C1.57031 6.17676 1.70703 6.04492 1.88281 6.04492H2.96191L2.25879 2.64648C2.24414 2.55859 2.23438 2.47559 2.23438 2.39258C2.23438 2.12891 2.43945 1.96777 2.70312 1.96777C2.94727 1.96777 3.12793 2.11914 3.17188 2.35352L3.86035 6.04492H5.51074L6.49219 2.41211C6.56055 2.1582 6.7168 1.9873 7 1.9873C7.27832 1.9873 7.42969 2.14355 7.49316 2.39258L8.47949 6.04492H10.1299L10.8184 2.35352C10.8623 2.11426 11.043 1.96777 11.2822 1.96777C11.5459 1.96777 11.7559 2.12891 11.7559 2.39258C11.7559 2.48047 11.7412 2.56348 11.7266 2.65137L11.0234 6.04492H12.1074C12.2881 6.04492 12.4248 6.17676 12.4248 6.3623C12.4248 6.54297 12.2881 6.68457 12.1074 6.68457H10.8916L10.1396 10.3369C10.0762 10.6543 9.82227 10.8545 9.49512 10.8545C9.18262 10.8545 8.94336 10.6592 8.87012 10.3564L7.86914 6.68457H6.12109L5.12012 10.3564C5.04199 10.6592 4.80762 10.8545 4.49023 10.8545C4.16309 10.8545 3.91406 10.6543 3.85059 10.3369L3.09375 6.68457H1.88281ZM6.9707 3.57422L6.29688 6.04492H7.69336L7.01953 3.57422H6.9707ZM4.51953 9.57031H4.55859L5.33984 6.68457H3.97754L4.51953 9.57031ZM9.43164 9.57031H9.4707L10.0078 6.68457H8.65039L9.43164 9.57031Z' fill='#555555') 249 | defs 250 | clipPath#clip0_150_87 251 | rect(width='14' height='12' fill='white') 252 | span.tt_selected 253 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 254 | g(clip-path='url(#clip0_113_177)') 255 | path(d='M4.6416 10.9375C4.30632 10.9375 4.01823 10.8366 3.77734 10.6348C3.53646 10.4362 3.38184 10.1514 3.31348 9.78027L2.10254 3.29102C2.08626 3.19987 2.07812 3.10384 2.07812 3.00293C2.07812 2.70671 2.16927 2.46582 2.35156 2.28027C2.53385 2.09473 2.78776 2.00195 3.11328 2.00195C3.38021 2.00195 3.60807 2.08659 3.79688 2.25586C3.98568 2.42188 4.09635 2.63672 4.12891 2.90039L4.81738 8.34473H4.86133L5.90137 2.99316C5.96322 2.66439 6.08691 2.41699 6.27246 2.25098C6.45801 2.08171 6.69727 1.99707 6.99023 1.99707C7.28646 1.99707 7.52897 2.08008 7.71777 2.24609C7.90658 2.41211 8.0319 2.65951 8.09375 2.98828L9.13379 8.34473H9.17773L9.86621 2.90039C9.89876 2.63672 10.0094 2.42188 10.1982 2.25586C10.387 2.08659 10.6165 2.00195 10.8867 2.00195C11.209 2.00195 11.4613 2.09473 11.6436 2.28027C11.8258 2.46582 11.917 2.70671 11.917 3.00293C11.917 3.10384 11.9089 3.19987 11.8926 3.29102L10.6816 9.78027C10.6133 10.1514 10.4587 10.4362 10.2178 10.6348C9.97689 10.8366 9.69043 10.9375 9.3584 10.9375C9.02311 10.9375 8.7334 10.8382 8.48926 10.6396C8.24837 10.4411 8.09375 10.1562 8.02539 9.78516L7.02441 4.58496H6.9707L5.96973 9.78516C5.90137 10.1562 5.74512 10.4411 5.50098 10.6396C5.26009 10.8382 4.97363 10.9375 4.6416 10.9375ZM1.54102 6.63086C1.46615 6.63086 1.40267 6.60645 1.35059 6.55762C1.30176 6.50879 1.27734 6.44694 1.27734 6.37207C1.27734 6.2972 1.30176 6.23535 1.35059 6.18652C1.40267 6.1377 1.46615 6.11328 1.54102 6.11328H12.459C12.5339 6.11328 12.5957 6.1377 12.6445 6.18652C12.6966 6.23535 12.7227 6.2972 12.7227 6.37207C12.7227 6.44694 12.6966 6.50879 12.6445 6.55762C12.5957 6.60645 12.5339 6.63086 12.459 6.63086H1.54102Z' fill='#2F7262') 256 | defs 257 | clipPath#clip0_113_177 258 | rect(width='14' height='12' fill='white') 259 | span.tt_txt_won 100,000 260 | label.tt-xe-label 261 | input#200000(type='radio' name='Expense') 262 | .tt_card_cheers.tt_card_cheers_level5(style='min-width: inherit;') 263 | span.tt_cheers_amount 264 | span.tt_ico_won 265 | span.ir_pm ￦ 266 | span.tt_select 267 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 268 | g(clip-path='url(#clip0_150_87)') 269 | path(d='M1.88281 6.68457C1.70703 6.68457 1.57031 6.54297 1.57031 6.3623C1.57031 6.17676 1.70703 6.04492 1.88281 6.04492H2.96191L2.25879 2.64648C2.24414 2.55859 2.23438 2.47559 2.23438 2.39258C2.23438 2.12891 2.43945 1.96777 2.70312 1.96777C2.94727 1.96777 3.12793 2.11914 3.17188 2.35352L3.86035 6.04492H5.51074L6.49219 2.41211C6.56055 2.1582 6.7168 1.9873 7 1.9873C7.27832 1.9873 7.42969 2.14355 7.49316 2.39258L8.47949 6.04492H10.1299L10.8184 2.35352C10.8623 2.11426 11.043 1.96777 11.2822 1.96777C11.5459 1.96777 11.7559 2.12891 11.7559 2.39258C11.7559 2.48047 11.7412 2.56348 11.7266 2.65137L11.0234 6.04492H12.1074C12.2881 6.04492 12.4248 6.17676 12.4248 6.3623C12.4248 6.54297 12.2881 6.68457 12.1074 6.68457H10.8916L10.1396 10.3369C10.0762 10.6543 9.82227 10.8545 9.49512 10.8545C9.18262 10.8545 8.94336 10.6592 8.87012 10.3564L7.86914 6.68457H6.12109L5.12012 10.3564C5.04199 10.6592 4.80762 10.8545 4.49023 10.8545C4.16309 10.8545 3.91406 10.6543 3.85059 10.3369L3.09375 6.68457H1.88281ZM6.9707 3.57422L6.29688 6.04492H7.69336L7.01953 3.57422H6.9707ZM4.51953 9.57031H4.55859L5.33984 6.68457H3.97754L4.51953 9.57031ZM9.43164 9.57031H9.4707L10.0078 6.68457H8.65039L9.43164 9.57031Z' fill='#555555') 270 | defs 271 | clipPath#clip0_150_87 272 | rect(width='14' height='12' fill='white') 273 | span.tt_selected 274 | svg(width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg') 275 | g(clip-path='url(#clip0_113_177)') 276 | path(d='M4.6416 10.9375C4.30632 10.9375 4.01823 10.8366 3.77734 10.6348C3.53646 10.4362 3.38184 10.1514 3.31348 9.78027L2.10254 3.29102C2.08626 3.19987 2.07812 3.10384 2.07812 3.00293C2.07812 2.70671 2.16927 2.46582 2.35156 2.28027C2.53385 2.09473 2.78776 2.00195 3.11328 2.00195C3.38021 2.00195 3.60807 2.08659 3.79688 2.25586C3.98568 2.42188 4.09635 2.63672 4.12891 2.90039L4.81738 8.34473H4.86133L5.90137 2.99316C5.96322 2.66439 6.08691 2.41699 6.27246 2.25098C6.45801 2.08171 6.69727 1.99707 6.99023 1.99707C7.28646 1.99707 7.52897 2.08008 7.71777 2.24609C7.90658 2.41211 8.0319 2.65951 8.09375 2.98828L9.13379 8.34473H9.17773L9.86621 2.90039C9.89876 2.63672 10.0094 2.42188 10.1982 2.25586C10.387 2.08659 10.6165 2.00195 10.8867 2.00195C11.209 2.00195 11.4613 2.09473 11.6436 2.28027C11.8258 2.46582 11.917 2.70671 11.917 3.00293C11.917 3.10384 11.9089 3.19987 11.8926 3.29102L10.6816 9.78027C10.6133 10.1514 10.4587 10.4362 10.2178 10.6348C9.97689 10.8366 9.69043 10.9375 9.3584 10.9375C9.02311 10.9375 8.7334 10.8382 8.48926 10.6396C8.24837 10.4411 8.09375 10.1562 8.02539 9.78516L7.02441 4.58496H6.9707L5.96973 9.78516C5.90137 10.1562 5.74512 10.4411 5.50098 10.6396C5.26009 10.8382 4.97363 10.9375 4.6416 10.9375ZM1.54102 6.63086C1.46615 6.63086 1.40267 6.60645 1.35059 6.55762C1.30176 6.50879 1.27734 6.44694 1.27734 6.37207C1.27734 6.2972 1.30176 6.23535 1.35059 6.18652C1.40267 6.1377 1.46615 6.11328 1.54102 6.11328H12.459C12.5339 6.11328 12.5957 6.1377 12.6445 6.18652C12.6966 6.23535 12.7227 6.2972 12.7227 6.37207C12.7227 6.44694 12.6966 6.50879 12.6445 6.55762C12.5957 6.60645 12.5339 6.63086 12.459 6.63086H1.54102Z' fill='#2F7262') 277 | defs 278 | clipPath#clip0_113_177 279 | rect(width='14' height='12' fill='white') 280 | span.tt_txt_won 200,000 281 | .tt_cheers_tf 282 | strong.tt_tit_cheers_layer 응원 댓글 283 | .tt-box-textarea 284 | .tt-inner-g 285 | label.screen_out(for='cheersComment') 응원글 286 | textarea#cheersComment(placeholder='좋은 글 감사합니다 :)') 287 | .tt_cheers_info 288 | strong.tt_tit_cheers_layer 289 | button.btn_tit_cheers(type='button') 290 | | 상품 및 환불 안내 291 | span.tt_img_area_reply.tt_ico_arrow1(style='transform: rotate(0deg);') 내용보기 292 | .tt_box_cheers_info 293 | ul.tt_list_cheers_info 294 | li 창작 활동에 대한 감사와 격려의 의미로 창작자를 응원합니다. 295 | li '응원하기'는 자발적 결제이므로 청약철회(환불) 불가능합니다. 296 | li '응원하기'는 만 14세 이상 인증 사용자만 이용할 수 있습니다. 만 19세 미만 미성년 회원의 경우, 법정대리인이 응원하기 결제 이용에 동의하지 않으면 미성년자 본인 또는 법정대리인이 그 결제 내용을 취소할 수 있습니다. 297 | li 298 | | '응원하기' 이용을 위한 자세한 내용은 299 | a(href='https://www.tistory.com/info/contract' target='_blank' rel='noreferrer') 티스토리 이용약관 300 | | 및 301 | a(href='https://billing-web.kakao.com/kbill/terms/service' target='_blank' rel='noreferrer') 카카오 유료서비스 이용약관 302 | | 을 따릅니다. 303 | .tt_desc_cheers_info 304 | | (주) 카카오 대표이사 정신아 305 | br 306 | | 사업자 등록 번호 120-81-47521 307 | br 308 | | 통신판매업신고번호 309 | a(href='https://www.ftc.go.kr/bizCommPop.do?wrkr_no=1208147521' target='_blank' rel='noreferrer' style='color: rgb(119, 119, 119); text-decoration: underline;') 제2015-제주아라-0032호 310 | br 311 | | 주소 제주특별자치도 제주시 첨단로 242(영평동) 312 | br 313 | | 호스팅사업자 (주)카카오 314 | br 315 | | 고객센터 1577-3754 316 | br 317 | | 이메일 help.notice@kakaocorp.com 318 | 319 | .tt_cheers_layer_foot 320 | .wrap_btn 321 | button.tt_btn_cheers(type='submit') 322 | span.tt_ico_cheers 323 | svg(width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg') 324 | g(clip-path='url(#clip0_113_170)') 325 | path(fill-rule='evenodd' clip-rule='evenodd' d='M3.13834 1.08131C2.69738 1.24795 2.57217 1.45132 2.53822 1.65981L2.53816 1.66021C2.51848 1.78026 2.56633 1.92335 2.81664 2.09277C3.06019 2.2576 3.41748 2.3849 3.78438 2.45708L3.91098 1.93206C3.96003 1.72866 4.15753 1.59742 4.36405 1.63101C4.82876 1.70659 5.18456 1.80466 5.42043 1.95588C5.54587 2.03631 5.66193 2.14716 5.72827 2.30089C5.79619 2.45831 5.79196 2.61408 5.75937 2.74514C5.69358 3.01304 5.4801 3.15122 5.31783 3.21819C5.15081 3.28712 4.95749 3.31695 4.77752 3.32892C4.41254 3.35321 3.98942 3.3105 3.6587 3.24759M3.65864 3.24758C3.22343 3.16486 2.73985 3.0068 2.36824 2.75529C1.99817 2.50483 1.65627 2.09545 1.74865 1.53104C1.84095 0.964633 2.22749 0.570303 2.85554 0.33296C3.45994 0.10456 4.33267 0 5.52246 0H17C17.2209 0 17.4 0.179086 17.4 0.4V10.6953C17.4 10.9162 17.2209 11.0953 17 11.0953H3.48101C3.2601 11.0953 3.08101 10.9162 3.08101 10.6953C3.08101 10.4743 3.2601 10.2953 3.48101 10.2953H16.6V0.8H5.52246C4.35673 0.8 3.60304 0.905697 3.13834 1.08131M2.14342 1.59553L1.74862 1.53125C1.74863 1.53118 1.74864 1.53111 1.74865 1.53104C1.74866 1.53098 1.74867 1.53092 1.74868 1.53085L2.14342 1.59553ZM2.14342 1.59553L2.14348 1.59554L2.14342 1.59553ZM4.58835 2.53571C4.63518 2.53523 4.68071 2.5336 4.7244 2.53069C4.73027 2.5303 4.73607 2.52989 4.74179 2.52946C4.69976 2.51709 4.65234 2.50447 4.59895 2.49175L4.58835 2.53571ZM5.0351 2.46779C5.03515 2.4678 5.03451 2.46826 5.03302 2.46911C5.03431 2.4682 5.03505 2.46777 5.0351 2.46779ZM5.37102 2.64926L5.37103 2.64926L5.37102 2.64926Z' fill='#F1F1F1') 326 | path(fill-rule='evenodd' clip-rule='evenodd' d='M2.23903 1.16684C2.45463 1.21499 2.59038 1.42881 2.54223 1.64441L0.851312 9.2161C0.783014 9.51999 0.782767 9.83487 0.851319 10.142L0.851543 10.143L1.40295 12.6432L3.01096 10.4776C3.20912 10.21 3.34448 9.91635 3.41309 9.60914C3.4131 9.60909 3.41307 9.6092 3.41309 9.60914L4.98343 2.56065C5.03147 2.34502 5.24521 2.20916 5.46084 2.2572C5.67647 2.30524 5.81232 2.51899 5.76428 2.73461L4.19394 9.78311C4.09989 10.2044 3.91555 10.6003 3.65386 10.9537L1.52238 13.8243C1.42898 13.9501 1.27074 14.0098 1.11753 13.977C0.964323 13.9442 0.844362 13.825 0.810619 13.672L0.0705378 10.3163C0.0704961 10.3161 0.0705794 10.3164 0.0705378 10.3163C-0.0234025 9.89506 -0.0236393 9.46104 0.0705877 9.04155C0.0706129 9.04144 0.0705625 9.04166 0.0705877 9.04155L1.76147 1.47005C1.80962 1.25444 2.02343 1.1187 2.23903 1.16684Z' fill='#F1F1F1') 327 | path(fill-rule='evenodd' clip-rule='evenodd' d='M7.74361 3.22393C7.95169 3.14972 8.18052 3.25825 8.25473 3.46632L9.33054 6.48298L10.4063 3.46633C10.4631 3.30704 10.614 3.20069 10.7831 3.20069C10.9522 3.20069 11.1031 3.30704 11.1599 3.46633L12.2357 6.48298L13.3115 3.46633C13.3857 3.25825 13.6145 3.14972 13.8226 3.22393C14.0307 3.29813 14.1392 3.52697 14.065 3.73505L12.6124 7.80816C12.5556 7.96745 12.4048 8.0738 12.2357 8.0738C12.0666 8.0738 11.9157 7.96745 11.8589 7.80816L10.7831 4.79151L9.70729 7.80816C9.65049 7.96745 9.49965 8.0738 9.33054 8.0738C9.16142 8.0738 9.01058 7.96745 8.95378 7.80816L7.50121 3.73505C7.427 3.52697 7.53553 3.29813 7.74361 3.22393Z' fill='#F1F1F1') 328 | path(fill-rule='evenodd' clip-rule='evenodd' d='M7.11322 5.26865C7.11322 5.04774 7.29231 4.86865 7.51322 4.86865H14.0526C14.2735 4.86865 14.4526 5.04774 14.4526 5.26865C14.4526 5.48957 14.2735 5.66865 14.0526 5.66865H7.51322C7.29231 5.66865 7.11322 5.48957 7.11322 5.26865Z' fill='#F1F1F1') 329 | defs 330 | clipPath#clip0_113_170 331 | rect(width='18' height='14' fill='white') 332 | span.tt_txt_cheers 응원하기 333 | button.tt_cheers_layer_close(type='button') 334 | span.tt_img_area_reply.tt_ico_close 닫기 335 | 336 | style 337 | :postcss 338 | #replies { 339 | .tt_box_cheers { 340 | @apply border-0 m-0 p-0; 341 | 342 | svg { 343 | @apply inline align-baseline; 344 | } 345 | 346 | .tt_btn_guide_cheers, 347 | .tt_btn_cheers, 348 | .tt_desc_cheers { 349 | @apply hidden; 350 | } 351 | 352 | .tt_cheers_layer { 353 | @apply backdrop-blur dark:bg-h-900/50; 354 | } 355 | } 356 | } 357 | -------------------------------------------------------------------------------- /views/Main/Guestbook.pug: -------------------------------------------------------------------------------- 1 | s_guest 2 | section#guestbook( 3 | x-init='$store.header.title = "방명록"' 4 | class='permalink-container') 5 | +group('guestbook') 6 | -------------------------------------------------------------------------------- /views/Main/Header.pug: -------------------------------------------------------------------------------- 1 | template(x-if='$store.header.show') 2 | header#global-header( 3 | x-ref='globalHeader' 4 | class='mb-10 lg:mb-16') 5 | .info(class='border-b border-solid border-b-h-300 dark:border-b-h-600 h-h min-h-[theme(spacing.h)] flex flex-col justify-center items-center text-center gap-y-1 text-h-800 dark:text-h-200') 6 | h1.tit( 7 | data-empty='검색어가 없어요 :(' 8 | x-init='$store.header.title = `[##_page_title_##]`' 9 | x-text='$store.header.title' 10 | class='font-bold text-3xl') 11 | span.desc(class='font-bold text-sm') [##_title_##] 12 | 13 | script. 14 | document.addEventListener('alpine:init', () => Alpine.store('header', { 15 | /** 16 | * @type {string} 17 | */ 18 | title: '', 19 | 20 | /** 21 | * @type {boolean} 22 | */ 23 | show: true 24 | })) 25 | 26 | style 27 | :postcss 28 | #global-header { 29 | .tit { 30 | @apply empty:before:content-[attr(data-empty)]; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /views/Main/List.pug: -------------------------------------------------------------------------------- 1 | s_list 2 | section#list( 3 | x-data='{ listStyle: "[##_list_style_##]" }' 4 | x-init='$store.header.title = "[##_list_conform_##]"' 5 | :data-list-style='listStyle') 6 | s_list_rep 7 | +index('list_rep') 8 | s_list_empty 9 | include List/Empty 10 | -------------------------------------------------------------------------------- /views/Main/List/Empty.pug: -------------------------------------------------------------------------------- 1 | #empty( 2 | x-init='listStyle = "empty"' 3 | class='rounded-sm text-center p-6 text-h-800 dark:text-h-200 bg-h-200 dark:bg-h-700') 4 | .txt(class='font-bold') 게시글을 찾을 수 없습니다. 5 | .desc 검색어를 다시 입력하거나 다른 카테고리로 이동해보세요. 6 | 7 | style 8 | :postcss 9 | [data-list-style=empty] { 10 | @apply index-container; 11 | } 12 | -------------------------------------------------------------------------------- /views/Main/Notice.pug: -------------------------------------------------------------------------------- 1 | s_notice_rep 2 | s_index_article_rep 3 | +index('notice_rep', false) 4 | s_permalink_article_rep 5 | +permalink('notice', false) 6 | -------------------------------------------------------------------------------- /views/Main/Page.pug: -------------------------------------------------------------------------------- 1 | s_page_rep 2 | section#page 3 | +permalink('article', false) 4 | -------------------------------------------------------------------------------- /views/Main/Paging.pug: -------------------------------------------------------------------------------- 1 | s_paging 2 | ul#paging(class='flex justify-center items-center mt-12 lg:mt-20') 3 | li.prev 4 | a.link([##_prev_page_##] class='[##_no_more_prev_##]') 5 | span.txt 이전 6 | i.ico(class='fa fa-angle-left') 7 | s_paging_rep 8 | li.num 9 | a.link([##_paging_rep_link_##]) [##_paging_rep_link_num_##] 10 | li.next 11 | a.link([##_next_page_##] class='[##_no_more_next_##]') 12 | i.ico(class='fa fa-angle-right') 13 | span.txt 다음 14 | 15 | style 16 | :postcss 17 | #paging { 18 | .prev, 19 | .next { 20 | .txt { 21 | @apply text-hidden; 22 | } 23 | } 24 | 25 | a { 26 | @apply inline-block; 27 | } 28 | 29 | span { 30 | @apply text-sm; 31 | } 32 | 33 | i, 34 | span { 35 | @apply w-8 h-8 leading-8 text-center mx-1 text-base text-h-800 dark:text-h-300; 36 | } 37 | 38 | span:not(.selected) { 39 | @apply hidden lg:inline-block; 40 | } 41 | 42 | .selected { 43 | @apply rounded-full bg-h-600 inline-block text-h-200; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /views/Main/Protected.pug: -------------------------------------------------------------------------------- 1 | s_article_protected 2 | s_permalink_article_rep 3 | section#protected(x-init='$store.header.title = "[##_article_rep_title_##]"') 4 | .wrap(class='permalink-container flex flex-col items-center gap-y-4') 5 | p.tit(class='text-center leading-7 text-h-800 dark:text-h-200') 6 | | 보호되어 있는 글입니다. 7 | br 8 | | 내용을 보시려면 비밀번호를 입력하세요. 9 | input.input( 10 | type='password' 11 | autocomplete='off' 12 | maxlength='16' 13 | id='[##_article_password_##]' 14 | name='[##_article_password_##]' 15 | onkeydown='if (event.keyCode == 13)[##_article_dissolve_##]' 16 | placeholder='비밀번호' 17 | class='rounded-md inline-block h-10 border-0 text-sm px-3 w-48 outline-none bg-h-200 text-h-500 dark:bg-h-700 dark:text-h-200') 18 | -------------------------------------------------------------------------------- /views/Main/Tag.pug: -------------------------------------------------------------------------------- 1 | s_tag 2 | section#tag( 3 | x-init='$store.header.title = "태그 클라우드"' 4 | class='index-container') 5 | ul.tags(class='grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6') 6 | s_tag_rep 7 | li.tag 8 | a.link( 9 | href='[##_tag_link_##]' 10 | class='flex items-center justify-center text-sm p-4 text-overflow-hidden text-center rounded-md duration-200 w-full bg-h-200 text-h-500 hover:bg-h-600 hover:text-h-200 dark:text-h-400 dark:bg-h-700 dark:hover:bg-h-600 [##_tag_class_##]') [##_tag_name_##] 11 | -------------------------------------------------------------------------------- /views/Sidebar.pug: -------------------------------------------------------------------------------- 1 | aside#sidebar( 2 | :class='sidebar ? "left-0" : "-left-[calc(theme(spacing.s))]"' 3 | class='h-full fixed top-0 w-s overflow-hidden z-[9000] transition-[left] duration-200 p-0 bg-h-200 dark:bg-h-700 xl:left-0') 4 | ul.wrap(class='flex flex-col gap-y-6 overflow-x-hidden overflow-y-scroll h-full w-[calc(theme(spacing.s)+theme(spacing.8))] absolute py-6 border-box') 5 | s_sidebar 6 | s_sidebar_element 7 | // 프로필 8 | include Sidebar/Profile 9 | s_sidebar_element 10 | // 방문자 수 11 | include Sidebar/Counter 12 | s_sidebar_element 13 | // 검색 14 | include Sidebar/Search 15 | s_sidebar_element 16 | // 카테고리 17 | include Sidebar/Category 18 | s_sidebar_element 19 | // 블로그 메뉴 20 | include Sidebar/BlogMenu 21 | s_sidebar_element 22 | // 링크 23 | include Sidebar/MyLinks 24 | s_sidebar_element 25 | // 공지사항 26 | include Sidebar/Notice 27 | s_sidebar_element 28 | // 인기 글 29 | include Sidebar/PopularPosts 30 | s_sidebar_element 31 | // 태그 32 | include Sidebar/RandomTags 33 | s_sidebar_element 34 | // 최근 댓글 35 | include Sidebar/RecentComments 36 | s_sidebar_element 37 | // 최근 글 38 | include Sidebar/RecentPosts 39 | include Sidebar/Copyright 40 | template(x-teleport='body') 41 | #mask( 42 | x-show='sidebar' 43 | x-transition:enter='transition ease-linear duration-300' 44 | x-transition:enter-start='opacity-0' 45 | x-transition:enter-end='opacity-100' 46 | x-transition:leave='transition ease-linear duration-300' 47 | x-transition:leave-start='opacity-100' 48 | x-transition:leave-end='opacity-0' 49 | @click='sidebar = false' 50 | class='fixed top-0 left-0 w-screen h-screen bg-h-900/50 backdrop-blur z-[8000] duration-200') 51 | 52 | style 53 | :postcss 54 | #sidebar { 55 | .el { 56 | @apply w-s px-5; 57 | 58 | h2 { 59 | @apply text-h-800 mb-5 font-bold text-sm dark:text-h-200; 60 | } 61 | 62 | i { 63 | @apply text-h-400; 64 | } 65 | 66 | a:not(.link_tit) { 67 | @apply text-h-400 hover:text-h-800 dark:hover:text-h-200; 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /views/Sidebar/BlogMenu.pug: -------------------------------------------------------------------------------- 1 | li#blog-menu.el 2 | h2.tit 블로그 메뉴 3 | | [##_blog_menu_##] 4 | 5 | style 6 | :postcss 7 | #blog-menu { 8 | ul { 9 | @apply flex flex-col gap-y-4 text-sm; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /views/Sidebar/Category.pug: -------------------------------------------------------------------------------- 1 | li#category.el(x-data='category') 2 | | [##_category_list_##] 3 | 4 | script. 5 | document.addEventListener('alpine:init', () => Alpine.data('category', () => ({ 6 | /** 7 | * @var {Boolean} foldableCategory 8 | */ 9 | foldableCategory: skinOptions.foldableCategory, 10 | 11 | /** 12 | * Init 13 | */ 14 | init () { 15 | if (this.foldableCategory) { 16 | this.$subCategories.forEach(this.foldable.bind(this)) 17 | } 18 | }, 19 | 20 | /** 21 | * Foldable 22 | * 23 | * @param {HTMLElement} $subCategory 24 | */ 25 | foldable ($subCategory) { 26 | $subCategory.parentNode.setAttribute('x-data', '{ open: false }') 27 | $subCategory.setAttribute('x-show', 'open') 28 | $subCategory.setAttribute('x-collapse', '') 29 | 30 | const $icon = this.$icon 31 | 32 | $icon.setAttribute('x-on:click', 'open = ! open') 33 | $icon.setAttribute(':class', '{ "rotate-90 duration-200": open }') 34 | 35 | $subCategory.parentNode.prepend($icon) 36 | }, 37 | 38 | /** 39 | * Get subcategories 40 | * 41 | * @var {NodeListOf} $subCategories 42 | */ 43 | get $subCategories () { 44 | return this.$el.querySelectorAll('.sub_category_list') 45 | }, 46 | 47 | /** 48 | * Get a new icon 49 | * 50 | * @var {HTMLElement} $icon 51 | */ 52 | get $icon () { 53 | const icon = document.createElement('i') 54 | 55 | icon.classList.add('fa-solid', 'fa-chevron-right') 56 | 57 | return icon 58 | } 59 | }))) 60 | 61 | style 62 | :postcss 63 | #category { 64 | .tt_category { 65 | .link_tit, 66 | .link_item, 67 | .link_sub_item { 68 | img { 69 | @apply hidden; 70 | } 71 | 72 | .c_cnt { 73 | @apply text-xs; 74 | } 75 | } 76 | 77 | .link_tit { 78 | @apply text-sm font-bold mb-6 inline-block text-h-900 dark:text-h-200; 79 | } 80 | 81 | ul { 82 | @apply flex flex-col gap-y-4 text-sm; 83 | 84 | li { 85 | @apply relative pr-5; 86 | 87 | i { 88 | @apply absolute right-0 text-2xs cursor-pointer leading-5; 89 | } 90 | } 91 | } 92 | 93 | .sub_category_list { 94 | li { 95 | @apply first:mt-4; 96 | 97 | .link_sub_item::before { 98 | @apply relative -top-0.5 mr-1 fa-chevron-right text-2xs font-bold text-h-400; 99 | } 100 | } 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /views/Sidebar/Copyright.pug: -------------------------------------------------------------------------------- 1 | li#copyright.el(class='text-h-400 flex justify-between') 2 | // 3 | 이 부분은 스킨 소개페이지 및 제작자의 깃허브 링크로 이동됩니다. 4 | hELLO 는 무료인 만큼, 링크의 주소는 반드시 지켜주시기 바랍니다. 5 | small.author(class='flex gap-x-0.5') 6 | a.blog(href='https://pronist.tistory.com/5') hELLO 7 | | · Designed By 8 | a.name(href='https://github.com/pronist') 정상우. 9 | small.version v4.10.3 10 | -------------------------------------------------------------------------------- /views/Sidebar/Counter.pug: -------------------------------------------------------------------------------- 1 | li#counter.el(class='flex justify-between') 2 | .total(class='text-left') 3 | .tit 전체 4 | .cnt [##_count_total_##] 5 | .day(class='flex gap-x-2 text-right') 6 | .today 7 | .tit 오늘 8 | .cnt [##_count_today_##] 9 | .yesterday 10 | .tit 어제 11 | .cnt [##_count_yesterday_##] 12 | 13 | style 14 | :postcss 15 | #counter { 16 | .tit { 17 | @apply text-h-400 text-xs; 18 | } 19 | 20 | .cnt { 21 | @apply text-h-600 dark:text-h-200; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /views/Sidebar/MyLinks.pug: -------------------------------------------------------------------------------- 1 | li#my-links.el 2 | h2.tit 링크 3 | ul.links(class='flex flex-col gap-y-4') 4 | s_link_rep 5 | li.link 6 | .txt(class='leading-none') 7 | i.ico(class='fa-solid fa-link mr-2 text-xs') 8 | a.link( 9 | href='[##_link_url_##]' 10 | target='_blank' 11 | class='text-sm') [##_link_site_##] 12 | -------------------------------------------------------------------------------- /views/Sidebar/Notice.pug: -------------------------------------------------------------------------------- 1 | li#notice.el 2 | h2.tit 3 | a.link( 4 | class='link_tit' 5 | href='/notice') 공지사항 6 | s_rct_notice 7 | ul.notices(class='flex flex-col gap-y-4 text-sm') 8 | s_rct_notice_rep 9 | li.notice 10 | .tit 11 | i.ico(class='fa-solid fa-circle-exclamation text-h-400 mr-2') 12 | a.link(href='[##_notice_rep_link_##]') [##_notice_rep_title_##] 13 | -------------------------------------------------------------------------------- /views/Sidebar/PopularPosts.pug: -------------------------------------------------------------------------------- 1 | li#popular-posts.el 2 | h2.tit 인기 글 3 | ul.posts(class='flex flex-col gap-y-4') 4 | s_rctps_popular_rep 5 | li.post(class='flex justify-between') 6 | .tit(class='text-overflow-hidden text-h-400') 7 | a.link( 8 | class='text-sm' 9 | href='[##_rctps_rep_link_##]') [##_rctps_rep_title_##] 10 | .date(class='mt-1 text-xs') [##_rctps_rep_simple_date_##] 11 | s_rctps_rep_thumbnail 12 | img.thumb( 13 | class='lazyload object-cover ml-3 bg-h-100 w-11 h-11' 14 | data-src='[##_rctps_rep_thumbnail_##]' 15 | data-sizes='auto' 16 | alt='' 17 | width='44' 18 | height='44') 19 | -------------------------------------------------------------------------------- /views/Sidebar/Profile.pug: -------------------------------------------------------------------------------- 1 | li#profile.el(class='text-center flex flex-col items-center my-4') 2 | img.thumb( 3 | src='[##_image_##]' 4 | width='96' 5 | height='96' 6 | alt='[##_blogger_##]' 7 | class='rounded-full w-24 h-24 object-cover') 8 | .tit 9 | a.link( 10 | href='[##_blog_link_##]' 11 | class='link_tit text-h-800 dark:text-h-200 inline-block pt-4 pb-1 font-medium') [##_title_##] 12 | .blogger(class='text-h-400 text-sm') [##_blogger_##] 13 | -------------------------------------------------------------------------------- /views/Sidebar/RandomTags.pug: -------------------------------------------------------------------------------- 1 | li#random-tags.el 2 | h2.tit 3 | a.link( 4 | class='link_tit' 5 | href='/tag') 태그 6 | .tags(class='flex flex-wrap gap-2') 7 | s_random_tags 8 | .tag 9 | a.name( 10 | href='[##_tag_link_##]' 11 | class='inline-block text-xs px-2.5 py-1.5 rounded-lg bg-h-300 dark:bg-h-600') 12 | i.ico(class='fa fa-tag mr-1.5') 13 | span.link(class='[##_tag_class_##]') [##_tag_name_##] 14 | -------------------------------------------------------------------------------- /views/Sidebar/RecentComments.pug: -------------------------------------------------------------------------------- 1 | li#recent-comments.el 2 | h2.tit 최근 댓글 3 | ul.comments(class='flex flex-col gap-y-4') 4 | s_rctrp_rep 5 | li.comment(class='text-h-400') 6 | .txt(class='text-overflow-hidden text-sm') 7 | i.ico(class='fa-regular fa-comment-dots font-normal mr-2') 8 | a.link(href='[##_rctrp_rep_link_##]') [##_rctrp_rep_desc_##] 9 | .author(class='mt-1 text-h-400 text-xs flex gap-x-0.5') 10 | .name [##_rctrp_rep_name_##] 11 | | · 12 | time.date [##_rctrp_rep_time_##] 13 | -------------------------------------------------------------------------------- /views/Sidebar/RecentPosts.pug: -------------------------------------------------------------------------------- 1 | li#recent-posts.el 2 | h2.tit 최근 글 3 | ul.posts(class='flex flex-col gap-y-4') 4 | s_rctps_rep 5 | li.post(class='flex justify-between') 6 | .tit(class='text-overflow-hidden text-h-400') 7 | a.link( 8 | class='text-sm' 9 | href='[##_rctps_rep_link_##]') [##_rctps_rep_title_##] 10 | .date(class='mt-1 text-xs') [##_rctps_rep_simple_date_##] 11 | s_rctps_rep_thumbnail 12 | img.thumb( 13 | class='lazyload object-cover ml-3 bg-h-100 w-11 h-11' 14 | data-src='[##_rctps_rep_thumbnail_##]' 15 | data-sizes='auto' 16 | alt='' 17 | width='44' 18 | height='44') 19 | -------------------------------------------------------------------------------- /views/Sidebar/Search.pug: -------------------------------------------------------------------------------- 1 | li#search.el 2 | search.wrap(class='rounded-sm flex items-center gap-x-3 border-box px-4 py-2 bg-h-300 text-h-600 dark:bg-h-600 dark:text-h-300') 3 | s_search 4 | label.label(for='keyword') 5 | span.txt(class='text-hidden') 검색 6 | i.ico(class='text-sm fa-solid fa-magnifying-glass') 7 | input#keyword.input( 8 | type='text' 9 | autocomplete='off' 10 | name='[##_search_name_##]' 11 | value='[##_search_text_##]' 12 | onkeypress='if (event.keyCode == 13) { [##_search_onclick_submit_##] }' 13 | class='w-full text-sm text-overflow-hidden border-none outline-none bg-h-300 dark:bg-h-600') 14 | i.ico(class='fa-circle-arrow-right') 15 | -------------------------------------------------------------------------------- /views/Top.pug: -------------------------------------------------------------------------------- 1 | aside#top( 2 | x-data='top' 3 | @scroll.window='toggle' 4 | :class='open ? "backdrop-blur bg-h-100/50 dark:bg-h-800/80" : "bg-transparent"' 5 | class='w-full box-border px-4 h-14 top-0 fixed flex justify-between items-center z-[90] xl:w-c') 6 | .img 7 | img.thumb( 8 | @click='sidebar = ! sidebar' 9 | class='lazyload rounded-full w-9 h-9 cursor-pointer object-cover xl:invisible' 10 | data-src='[##_image_##]' 11 | data-sizes='auto' 12 | alt='[##_blogger_##]' 13 | width='36' 14 | height='36') 15 | .tit( 16 | x-show='open' 17 | x-transition:enter='transition ease-linear duration-100' 18 | x-transition:enter-start='opacity-0' 19 | x-transition:enter-end='opacity-100' 20 | x-transition:leave='transition ease-linear duration-100' 21 | x-transition:leave-start='opacity-100' 22 | x-transition:leave-end='opacity-0' 23 | class='max-w-[calc(80vw-152px)] h-5') 24 | .txt(class='m-0 text-overflow-hidden text-sm font-bold text-h-800 dark:text-h-200') [##_page_title_##] 25 | #menu-toolbar( 26 | x-ref='toolbar' 27 | class='menu_toolbar') 28 | template(x-if='canSubscribe') 29 | button.subscribe( 30 | :data-blog-id='T.config.BLOG.id' 31 | :data-url='TistoryBlog.tistoryUrl' 32 | class='btn_subscription') 33 | span.txt(class='text-hidden') 구독하기 34 | i.ico(class='fa-solid fa-star') 35 | 36 | script. 37 | document.addEventListener('alpine:init', () => Alpine.data('top', () => ({ 38 | /** 39 | * @property {boolean} open 40 | */ 41 | open: true, 42 | 43 | /** 44 | * Init 45 | */ 46 | init () { 47 | if (/^(.*\.tistory\.com)$/.test(location.hostname)) { 48 | this.setTistoryMenuToolbar() 49 | } 50 | 51 | this.toggle() 52 | }, 53 | 54 | /** 55 | * can subscribe? 56 | */ 57 | canSubscribe () { 58 | return T.config.ROLE !== "owner" && /^(.*\.tistory\.com)$/.test(location.hostname) 59 | }, 60 | 61 | /** 62 | * Set TISTORY menu toolbar 63 | */ 64 | setTistoryMenuToolbar () { 65 | const tistoryMenuToolbar = document.getElementById('menubar_wrapper') 66 | 67 | tistoryMenuToolbar && this.$refs.toolbar.append(tistoryMenuToolbar) 68 | }, 69 | 70 | /** 71 | * Toggle 72 | */ 73 | toggle () { 74 | this.$targets.forEach(el => { 75 | if (document.body.contains(el)) { 76 | this.open = el.getBoundingClientRect().bottom < 0 77 | } 78 | }) 79 | }, 80 | 81 | /** 82 | * targets 83 | * 84 | * @returns {Array} 85 | */ 86 | get $targets () { 87 | return [ 88 | this.$refs.header, 89 | this.$refs.globalHeader 90 | ] 91 | } 92 | }))) 93 | 94 | style 95 | :postcss 96 | .menu_toolbar { 97 | @apply hidden; 98 | } 99 | 100 | style 101 | :postcss 102 | #top { 103 | .menu_toolbar { 104 | @apply static flex gap-x-2.5; 105 | 106 | #menubar_wrapper { 107 | @apply max-lg:hidden; 108 | } 109 | 110 | .subscribe, 111 | .btn_menu_type2 { 112 | @apply flex justify-center items-center w-9 h-9 p-0 rounded-full outline-0 bg-h-200 text-h-500 shadow-none hover:bg-h-300; 113 | @apply dark:text-h-200 dark:bg-h-700 dark:hover:bg-h-600; 114 | } 115 | 116 | .subscribe { 117 | .ico { 118 | @apply font-awesome; 119 | } 120 | } 121 | } 122 | } 123 | 124 | style 125 | :postcss 126 | #menubar_wrapper { 127 | @apply relative; 128 | 129 | .btn_menu_type2 { 130 | .ico_tistory_sign { 131 | @apply opacity-70 dark:opacity-100 dark:invert; 132 | } 133 | } 134 | 135 | .header_layer { 136 | @apply absolute top-12 right-0 left-auto bottom-auto; 137 | @apply shadow-none bg-h-200 dark:bg-h-700; 138 | 139 | &::after { 140 | @apply hidden; 141 | } 142 | 143 | a { 144 | @apply no-underline; 145 | } 146 | 147 | .info_profile { 148 | @apply border-b-h-300 dark:border-b-h-600; 149 | 150 | .txt_id { 151 | @apply text-h-500 dark:text-h-200; 152 | } 153 | 154 | .txt_email, 155 | .link_setting_type2 { 156 | @apply text-h-400 hover:text-h-800 dark:hover:text-h-200; 157 | } 158 | } 159 | 160 | .list_toolbar { 161 | li { 162 | .link_list { 163 | @apply text-h-500 dark:text-h-200; 164 | } 165 | 166 | &:last-child { 167 | .link_list { 168 | @apply text-h-400 hover:text-h-800 dark:hover:text-h-200; 169 | } 170 | } 171 | } 172 | } 173 | 174 | .wrap_list { 175 | .tit_list_type { 176 | @apply text-h-400 hover:text-h-800 dark:hover:text-h-200; 177 | } 178 | } 179 | 180 | .wrap_toolbar { 181 | @apply border-t-h-300 dark:border-t-h-600; 182 | } 183 | } 184 | } 185 | --------------------------------------------------------------------------------