diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..e2eb31d --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +github: opdev1004 diff --git a/README.md b/README.md index 08d871a..8723c74 100644 --- a/README.md +++ b/README.md @@ -1,55 +1,64 @@ # Vuetilog + Blogger Theme built with Vue and Vuetify ## Other language: + [ν•œκ΅­μ–΄](/lang/ko) ## Notice -Please use the version 0.0.8 or above. It contains the updates for SEO after testing. + +Releasing version 0.1.0. The design has been updated. Popular posts and Featured post have been removed from vue components. You can use Popular posts and Featured posts from theme system instead. But you have to style them yourself. ## Example + [https://vuetilog.blogspot.com/](https://vuetilog.blogspot.com/) ## Download + [https://github.com/opdev1004/vuetilog/releases/](https://github.com/opdev1004/vuetilog/releases/) ## Features: + 1. Development with Vue and Vuetify 2. Responsive Web design 3. SEO 4. Better label control ## Installation: + 1. Apply Contempo theme to your blog. 2. Restore theme with vuetilog.xml or copy and paste vuetilog theme in HTML edit. 3. Edit any settings in your needs. ### How to use code style in the post + 1. Select your code block in the editor by mouse dragging 2. Set them as normal instead of paragraph 3. Change to HTML view -4. Set class to the div element for your code with "code". eg. ```class="code"``` +4. Set class to the div element for your code with "code". eg. `class="code"` ### Layout System -| Section | Description | -| - | - | -| Nav Top | You can add any sidebar widgets here. | -| Label Section | You can only add labels. | -| Nav Bottom | You can add any sidebar widgets here. | -| Main Content Top | You can add any main content widgets here. eg. ads | -| Main Content Bottom | You can add any main content widgets here. eg. ads | -| Components | This is for the theme developers. Specially for the widgets that is going to be modified a lot as a vue component. | -| Bottom Section | You can add any footer widgets here. | + +| Section | Description | +| ------------------- | ------------------------------------------------------------------------------------------------------------------ | +| Nav Top | You can add any sidebar widgets here. | +| Label Section | You can only add labels. | +| Nav Bottom | You can add any sidebar widgets here. | +| Main Content Top | You can add any main content widgets here. eg. ads | +| Main Content Bottom | You can add any main content widgets here. eg. ads | +| Components | This is for the theme developers. Specially for the widgets that is going to be modified a lot as a vue component. | +| Bottom Section | You can add any footer widgets here. | ## Contribution + You are welcome to improve Vuetilog. You can contribute by opening a pull request in this repository. -## License: -MIT - ## Theme Development Details + ### Theme load order + 1. Blogger Template System Generates HTML file from vuetilog theme 2. Webbrowser loads the blog page 3. Loads Vue, Vuetify, CSS and many other things from the head tag @@ -58,24 +67,42 @@ MIT 6. Creates loading overlay with Vue from the top of body tag 7. Componentizes the elements from id='init-wrapper' div tag 8. Create Vue app with components and data -9. Removes init-wrapper div tag +9. Removes init-wrapper div tag 10. Removes loading overlay ### How to use Vue and Vuetify? -As long as your tags are part of components and vue app template, they are going to be loaded. + +As long as your tags are part of components and vue app template, they are going to be loaded. ### Vuetilog Components -| Components | Location | Description | -| - | - | - | -| nav-top | Left Navigation Drawer | This component is for any sidebar widgets. | -| label-section | Left Navigation Drawer | This component is designed to contains only label widgets. | -| nav-bottom | Left Navigation Drawer | This component is for any sidebar widgets. | -| main-content-top | Main Page | This component is for any widgets for main page. eg. ads | -| main-content-bottom | Main Page | This component is for any widgets for main page. eg. ads | -| pagination | Main Page | This component is for placing pagination. | -| posts | Main Page | This component is for placing blog posts and pages. | -| comments | Main Page | This component is for placing comments. | -| post-feeds | Main Page | This component is for placing post feeds link. | -| popular-posts | Main Page | This component is designed to come after the blog post. | -| featured-post | Main Page | This component is designed to come after the blog post. | -| bottom-section | Main Page | This component is designed for footer of blog. | + +| Components | Location | Description | +| ------------------- | ---------------------- | ---------------------------------------------------------- | +| nav-top | Left Navigation Drawer | This component is for any sidebar widgets. | +| label-section | Left Navigation Drawer | This component is designed to contains only label widgets. | +| nav-bottom | Left Navigation Drawer | This component is for any sidebar widgets. | +| main-content-top | Main Page | This component is for any widgets for main page. eg. ads | +| main-content-bottom | Main Page | This component is for any widgets for main page. eg. ads | +| pagination | Main Page | This component is for placing pagination. | +| posts | Main Page | This component is for placing blog posts and pages. | +| comments | Main Page | This component is for placing comments. | +| post-feeds | Main Page | This component is for placing post feeds link. | +| bottom-section | Main Page | This component is designed for footer of blog. | + +### πŸ‘Ό Become a Sponsor + +- [Ko-fi](https://ko-fi.com/opdev1004) +- [Github sponsor page](https://github.com/sponsors/opdev1004) + +### 🎁 Shop + +- [RB Rino Shop](https://www.redbubble.com/shop/ap/149559711) +- [RB Geargom Shop](https://www.redbubble.com/people/Geargom/shop) + +## πŸ‘¨β€πŸ’» Author + +[Victor Chanil Park](https://github.com/opdev1004) + +## πŸ’― License + +MIT, See [LICENSE](./LICENSE). diff --git a/lang/ko/README.md b/lang/ko/README.md index 438e4dc..59c4efa 100644 --- a/lang/ko/README.md +++ b/lang/ko/README.md @@ -1,55 +1,64 @@ # Vuetilog (λ·°ν‹°λ‘œκ·Έ) + Vue와 Vuetify둜 λ§Œλ“  λΈ”λ‘œκ±° ν…Œλ§ˆ ## 곡지 -0.0.8 버젼 이상을 μ‚¬μš©ν•΄μ£Όμ„Έμš”. ν…ŒμŠ€νŒ… 후에 적용된 SEO κ΄€λ ¨ μ—…λ°μ΄νŠΈκ°€ λ“€μ–΄μžˆμŠ΅λ‹ˆλ‹€. + +0.1.0 버전을 릴리즈 ν•©λ‹ˆλ‹€. λ””μžμΈμ΄ λ³€κ²½λ˜μ—ˆμŠ΅λ‹ˆλ‹€. 그리고 인기 포슀트(Popular posts)와 μΆ”μ²œ 포슀트(Featured post)κ°€ Vue μ»΄ν¬λ„ŒνŠΈμ—μ„œ μ‚­μ œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€. ν•΄λ‹Ή μ»΄ν¬λ„ŒνŠΈλ“€μ΄ ν•„μš”ν•˜λ‹€λ©΄ ν…Œλ§ˆ μ‹œμŠ€ν…œμ„ 톡해 μΆ”κ°€ν•΄μ£Όμ„Έμš”. 단, 직접 μŠ€νƒ€μΌ ν•΄μ•Όν•©λ‹ˆλ‹€. ## λ‹€λ₯Έ μ–Έμ–΄: + [English](https://github.com/opdev1004/vuetilog) ## μ˜ˆμ‹œ + [https://vuetilog.blogspot.com/](https://vuetilog.blogspot.com/) ## λ‹€μš΄λ‘œλ“œ + [https://github.com/opdev1004/vuetilog/releases/](https://github.com/opdev1004/vuetilog/releases/) ## κΈ°λŠ₯: + 1. Vue와 Vuetify둜 개발 κ°€λŠ₯ 2. λ°˜μ‘ν˜• μ›Ή λ””μžμΈ 3. SEO 4. λ‚˜μ€ 라벨 컨트둀 ## μ„€μΉ˜: + 1. Contempo ν…Œλ§ˆλ₯Ό λΈ”λ‘œκ·Έμ— 적용 2. vuetilog.xml둜 ν…Œλ§ˆλ₯Ό λ³΅κ΅¬ν•˜κ±°λ‚˜ HTML μˆ˜μ •μ„ 톡해 ν…Œλ§ˆλ₯Ό λΆ™μ—¬λ„£κ³  μ €μž₯ 3. ν•„μš”μ— 따라 μ„€μ • μˆ˜μ • ### ν¬μŠ€νŠΈμ—μ„œ μ½”λ“œ μŠ€νƒ€μΌ μ‚¬μš©ν•˜λŠ” 방법 + 1. μ—λ””ν„°μ—μ„œ 마우슀둜 λ“œλž˜κ·Έν•˜μ—¬ μ½”λ“œλ₯Ό 선택(Select)ν•©λ‹ˆλ‹€ 2. μ„ νƒλœ μ½”λ“œλ“€μ„ λ‹¨λ½ν˜•μ‹μ—μ„œ λ³΄ν†΅μœΌλ‘œ λ°”κΏ‰λ‹ˆλ‹€. 3. 에디터λ₯Ό HTML 보기둜 λ³€κ²½ν•©λ‹ˆλ‹€ -4. μ½”λ“œ div μš”μ†Œμ˜ 클래슀λ₯Ό "code"둜 μ„€μ •ν•©λ‹ˆλ‹€. μ˜ˆμ‹œ.```class="code"``` +4. μ½”λ“œ div μš”μ†Œμ˜ 클래슀λ₯Ό "code"둜 μ„€μ •ν•©λ‹ˆλ‹€. μ˜ˆμ‹œ.`class="code"` ### λ ˆμ΄μ•„μ›ƒ μ‹œμŠ€ν…œ -| μ„Ήμ…˜ | μ„€λͺ… | -| - | - | -| Nav Top | μ‚¬μ΄λ“œλ°” μ „μš© μœ„μ ―μ„ μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€. | -| Label Section | 라벨 μœ„μ ―λ§Œ μΆ”κ°€ν•΄μ£Όμ„Έμš”. | -| Nav Bottom | μ‚¬μ΄λ“œλ°” μ „μš© μœ„μ ―μ„ μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€. | -| Main Content Top | 메인에 μ‚¬μš© 될 수 μžˆλŠ” μœ„μ ―μ„ μΆ”κ°€ ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ˜ˆμ‹œ: κ΄‘κ³  μœ„μ ―. | -| Main Content Bottom | 메인에 μ‚¬μš© 될 수 μžˆλŠ” μœ„μ ―μ„ μΆ”κ°€ ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ˜ˆμ‹œ: κ΄‘κ³  μœ„μ ―. | -| Components | ν…Œλ§ˆ 개발자λ₯Ό μœ„ν•œ μ„Ήμ…˜μž…λ‹ˆλ‹€. Vue μ»΄ν¬λ„ŒνŠΈκ°€ λ˜κΈ°μœ„ν•΄ 많이 개쑰될 μœ„μ ―λ“€μ΄ 이곳에 λ†“μ—¬μ§‘λ‹ˆλ‹€. | -| Bottom Section | footer μ „μš© μœ„μ ―μ„ μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€. | + +| μ„Ήμ…˜ | μ„€λͺ… | +| ------------------- | ---------------------------------------------------------------------------------------------- | +| Nav Top | μ‚¬μ΄λ“œλ°” μ „μš© μœ„μ ―μ„ μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€. | +| Label Section | 라벨 μœ„μ ―λ§Œ μΆ”κ°€ν•΄μ£Όμ„Έμš”. | +| Nav Bottom | μ‚¬μ΄λ“œλ°” μ „μš© μœ„μ ―μ„ μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€. | +| Main Content Top | 메인에 μ‚¬μš© 될 수 μžˆλŠ” μœ„μ ―μ„ μΆ”κ°€ ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ˜ˆμ‹œ: κ΄‘κ³  μœ„μ ―. | +| Main Content Bottom | 메인에 μ‚¬μš© 될 수 μžˆλŠ” μœ„μ ―μ„ μΆ”κ°€ ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ˜ˆμ‹œ: κ΄‘κ³  μœ„μ ―. | +| Components | ν…Œλ§ˆ 개발자λ₯Ό μœ„ν•œ μ„Ήμ…˜μž…λ‹ˆλ‹€. Vue μ»΄ν¬λ„ŒνŠΈκ°€ λ˜κΈ°μœ„ν•΄ 많이 개쑰될 μœ„μ ―λ“€μ΄ 이곳에 λ†“μ—¬μ§‘λ‹ˆλ‹€. | +| Bottom Section | footer μ „μš© μœ„μ ―μ„ μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€. | ## μ°Έμ—¬ν•˜κΈ° + Vuetilogλ₯Ό λ°œμ „μ‹œν‚€λŠ” 것을 ν™˜μ˜ν•©λ‹ˆλ‹€. 이 κΉƒν—™ μ €μž₯μ†Œμ— Pull Requestλ₯Ό μ—΄μ–΄μ£Όμ„Έμš”. -## λΌμ΄μ„ΌμŠ€: -MIT - ## ν…Œλ§ˆ 개발 λ””ν…ŒμΌ + ### ν…Œλ§ˆ λ‘œλ“œ μˆœμ„œ + 1. λΈ”λ‘œκ±° μ‹œμŠ€ν…œμ΄ Vuetilog ν…Œλ§ˆλ‘œλΆ€ν„° HTML파일 생성 2. μ›ΉλΈŒλ‘œμš°μ €κ°€ λΈ”λ‘œκ·Έ νŽ˜μ΄μ§€ λ‘œλ“œ 3. head νƒœκ·Έμ—μ„œ Vue, Vuetify, CSS 등등을 λ‘œλ“œ @@ -62,20 +71,37 @@ MIT 10. λ‘œλ”© μ˜€λ²„λ ˆμ΄ 제거 ### Vue와 Vuetify μ‚¬μš©λ°©λ²• + μ»΄ν¬λ„ŒνŠΈμ™€ Vue ν…œν”Œλ¦Ώμ˜ 일뢀뢄이라면 μ •μƒμ μœΌλ‘œ λ‘œλ“œλ©λ‹ˆλ‹€. ### Vuetilog μ»΄ν¬λ„ŒνŠΈ -| μ»΄ν¬λ„ŒνŠΈ | μœ„μΉ˜ | μ„€λͺ… | -| - | - | - | -| nav-top | Left Navigation Drawer | μ‚¬μ΄λ“œλ°” μœ„μ ―λ“€μ„ μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ | -| label-section | Left Navigation Drawer | λΌλ²¨λ§Œμ„ λ³΄μœ ν•˜κΈ° μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ | -| nav-bottom | Left Navigation Drawer | μ‚¬μ΄λ“œλ°” μœ„μ ―λ“€μ„ μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ | -| main-content-top | Main Page | 메인 μœ„μ ―λ“€μ„ μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ | -| main-content-bottom | Main Page | 메인 μœ„μ ―λ“€μ„ μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ | -| pagination | Main Page | νŽ˜μ΄μ§€ λ„€λΉ„κ²Œμ΄μ…˜ μ»΄ν¬λ„ŒνŠΈ | -| posts | Main Page | 포슀트, νŽ˜μ΄μ§€ μ»΄ν¬λ„ŒνŠΈ | -| comments | Main Page | λŒ“κΈ€ μ»΄ν¬λ„ŒνŠΈ | -| post-feeds | Main Page | ν”Όλ“œ 링크 μ»΄ν¬λ„ŒνŠΈ | -| popular-posts | Main Page | ν¬μŠ€νŠΈμ— μ‚¬μš© λ˜κΈ°μœ„ν•œ 인기 포슀트 μ»΄ν¬λ„ŒνŠΈ | -| featured-post | Main Page | ν¬μŠ€νŠΈμ— μ‚¬μš© λ˜κΈ°μœ„ν•œ μΆ”μ²œ 포슀트 μ»΄ν¬λ„ŒνŠΈ | -| bottom-section | Main Page | Footer μœ„μ ―λ“€μ„ μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ | + +| μ»΄ν¬λ„ŒνŠΈ | μœ„μΉ˜ | μ„€λͺ… | +| ------------------- | ---------------------- | ------------------------------- | +| nav-top | Left Navigation Drawer | μ‚¬μ΄λ“œλ°” μœ„μ ―λ“€μ„ μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ | +| label-section | Left Navigation Drawer | λΌλ²¨λ§Œμ„ λ³΄μœ ν•˜κΈ° μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ | +| nav-bottom | Left Navigation Drawer | μ‚¬μ΄λ“œλ°” μœ„μ ―λ“€μ„ μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ | +| main-content-top | Main Page | 메인 μœ„μ ―λ“€μ„ μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ | +| main-content-bottom | Main Page | 메인 μœ„μ ―λ“€μ„ μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ | +| pagination | Main Page | νŽ˜μ΄μ§€ λ„€λΉ„κ²Œμ΄μ…˜ μ»΄ν¬λ„ŒνŠΈ | +| posts | Main Page | 포슀트, νŽ˜μ΄μ§€ μ»΄ν¬λ„ŒνŠΈ | +| comments | Main Page | λŒ“κΈ€ μ»΄ν¬λ„ŒνŠΈ | +| post-feeds | Main Page | ν”Όλ“œ 링크 μ»΄ν¬λ„ŒνŠΈ | +| bottom-section | Main Page | Footer μœ„μ ―λ“€μ„ μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ | + +### πŸ‘Ό ν›„μ›ν•˜κΈ° + +- [Ko-fi](https://ko-fi.com/opdev1004) +- [κΉƒν—™ μŠ€ν°μ„œ νŽ˜μ΄μ§€](https://github.com/sponsors/opdev1004) + +### 🎁 상점 + +- [RB Geargom Shop](https://www.redbubble.com/people/Geargom/shop) + +## πŸ‘¨β€πŸ’» 레포 주인 + +[Victor Chanil Park](https://github.com/opdev1004) + +## πŸ’― λΌμ΄μ„ΌμŠ€ + +MIT, See [LICENSE](./LICENSE). diff --git a/src/vuetilog.xml b/src/vuetilog.xml index 25818fe..f68d06d 100644 --- a/src/vuetilog.xml +++ b/src/vuetilog.xml @@ -3,7 +3,10 @@ - + + + + @@ -27,7 +30,6 @@ <data:view.title.escaped/> - - + + - - - + + - - */ html { word-wrap: break-word; word-break: keep-all; + font-family: 'Noto Sans', Roboto, sans-serif !important; + font-size: 18px; } - a { text-decoration: none !important; } - img, svg { border: 0px; @@ -74,9 +71,8 @@ width: auto; height: auto; } - .code { - font-family: monaco, Consolas, "Lucida Console", Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; + font-family: 'Noto Sans Mono', monaco, Consolas, "Lucida Console", Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; color: $(code.font.color) !important; background-color: $(code.background.color) !important; white-space: nowrap; @@ -87,86 +83,84 @@ padding: 10px; margin-bottom: 16px; } - #init-wrapper { display: none; } - + .backgroundimage + { + display: block; + } + .titleForOthers { + text-align: center; + margin-bottom: 100px + } header { + top: 20px !important; background-color: $(header.background.color) !important; color: $(header.font.color) !important; + left: calc(50% - 240px) !important; + width: 780px; } - header #blog-title { width: calc(100% - 48px); } - header #blog-title .v-app-bar-title__content, header #blog-title .v-app-bar-title__placeholder { width: 100% !important; } - header #blog-title .v-app-bar-title__content a, header #blog-title .v-app-bar-title__placeholder a { width: 100% !important; } - header .v-icon { color: $(header.font.color) !important; } - header a { - color: $(header.font.color) !important; + color: $(header.font.color) !important; } - header .SearchBar .v-input { - width: calc(100vw - 80px) !important; + width: 700px !important; } - .v-navigation-drawer { + padding: 4px 8px; background-color: $(sidebar.background.color) !important; color: $(sidebar.font.color) !important; } - .v-navigation-drawer .theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) { color: $(sidebar.font.color) !important; } - .v-navigation-drawer .widget .title, + .v-navigation-drawer widget .title, + .v-navigation-drawer .title, + .v-navigation-drawer h3, .v-navigation-drawer .v-subheader { color: $(sidebar.font.color) !important; - opacity: 0.6 !important; + opacity: 1; + font-size: 1.25rem; } - .BlogArchive ul { list-style: none; padding: 0px !important; } - .BlogArchive .hierarchy ul { padding: 0px 0px 0px 16px !important; } - #NavTop { padding: 8px 16px; } - #NavBottom { padding: 8px 16px; } - #NavTop .widget .title, #NavBottom .widget .title { align-items: center; display: flex; height: 48px; - font-size: .875rem !important; font-weight: 400; color: rgba(0,0,0,.6); } - #NavTop .widget ul, #NavBottom .widget ul, #NavTop .widget ol, @@ -174,12 +168,10 @@ list-style: none; padding-left: 0px; } - #NavTop .Profile ul li, #NavBottom .Profile ul li { margin-bottom: 10px; } - #NavTop .Profile .team-member img, #NavTop .Profile .team-member span, #NavBottom .Profile .team-member img, @@ -187,98 +179,139 @@ vertical-align: middle; } + .v-application { + font-family: 'Noto Sans', Roboto, sans-serif !important; + } .v-application--is-ltr .v-navigation-drawer .LabelSection .v-list-group--sub-group, .v-application--is-ltr .v-navigation-drawer .LabelSection .v-list-group--no-action.v-list-group--sub-group>.v-list-group__items { display: block; } - .v-application--is-ltr .v-navigation-drawer .LabelSection .v-list-group--sub-group .v-list-group__header { padding-left: 16px !important; } - .v-application--is-ltr .v-navigation-drawer .LabelSection .v-list-group--no-action.v-list-group--sub-group>.v-list-group__items>.v-list-item { padding-left: 16px !important; display: block; } - .v-application--is-ltr .v-navigation-drawer .LabelSection .v-list-group--no-action.v-list-group--sub-group>.v-list-group__items>.v-chip { max-width: calc(100% - 8px); display: inline-block; } - .v-application--is-ltr .v-navigation-drawer .LabelSection .v-list-group--no-action.v-list-group--sub-group>.v-list-group__items>.v-chip .v-chip__content { display: inline-block; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } + + #bg-photo { + height: 40vh; + } main { - margin-top: 64px; - padding-top: 0px !important; + background-color: $(sidebar.background.color) !important; + color: $(sidebar.font.color) !important; } main .container { max-width: 780px; min-height: 100vh; + padding: 10px; } + main .post-share-buttons { + margin-left: auto; + margin-right: auto; + display: block; + min-height: 100px; + } + + main .post-share-buttons .ShareButtons { + display: flex; + align-items: center; + justify-content: center; + flex-flow: row wrap; + flex-wrap: wrap; + flex-direction: row; + } + + main .post-icons { + display: none; + } + main .container .post iframe, main .container .post object, main .container .post embed { - max-width: 756px; - max-height: 425px; - width: calc(100vw - 42px) !important; - height: calc((100vw - 42px) / 16 * 9) !important; + max-width: 700px; + max-height: 394px; + width: calc(100vw - 37px) !important; + height: calc((100vw - 37px) / 16 * 9) !important; } - main .container .blog-pagination { margin: 10px 0px !important; } - main .container .blog-pagination .v-btn { margin: 10px 0px !important; } + main .container .post-outer { + color: $(header.font.color) !important; + } + + main .container .post-outer .post-single { + background-color: $(header.background.color) !important; + padding: 60px 30px 100px 30px; + } + + main .container .post-outer .post-single .post-title { + font-size: 2em; + text-align: center; + } + + main .container .post-outer .post-multiple { + background-color: $(header.background.color) !important; + padding: 30px 40px 40px 40px; + margin-bottom: 40px; + transition: all 0.1s ease; + transform: scale(1); + } + + main .container .post-outer .post-multiple:hover { + transform: scale(1.02) perspective(1px) + } + main .container .post-outer .post .separator a { margin-left: 0px !important; margin-right: 0px !important; } - main .container .post-outer .post .v-divider { + margin-top: 5px; margin-bottom: 20px; } - main .container .post-outer .post-list-item-wrapper { margin: 5px -12px; } - main .container .post-index-image { border: 1px solid #CCCCCC; } - main .container .post-index-image svg, main .container .post-index-image img { vertical-align: middle } - main .container .post-index-image svg { fill: #CCCCCC; } - /* Sharing Buttons */ .ShareButtons { margin: 20px 0px; } - main .container .sharing li:hover, main .container .sharing li .sharing-platform-button:hover { text-decoration: none; } - /* fill: $(header.font.color); */ main .container .sharing svg { @@ -288,81 +321,80 @@ margin: 2px; padding: 0px; } - main .container .sharing li .platform-sharing-text { display: none; } - /* Popular Posts */ + main .container #PopularPosts1 article, + main .container #FeaturedPost1 article { + transition: all 0.1s ease; + transform: scale(1); + } + + main .container #PopularPosts1 article:hover, + main .container #FeaturedPost1 article:hover { + transform: scale(1.02) perspective(1px) + } + main .container #PopularPosts1 hr, main .container #FeaturedPost1 hr{ margin: 10px 0px; } - main .container #PopularPosts1 .post-title { font-size: 1em !important; } - main .container .feed-links { margin: 5px 0px; } - main #main-bottom { margin-top: 200px; } - main #main-bottom #BottomSection { margin-top: 20px; } - main #main-bottom #PageList1 ul { list-style-type: none; padding: 0px; text-align: center; } - main #main-bottom #PageList1 ul li { display: inline-block; } - main #main-bottom .row { margin-top: 20px; } - main #main-bottom .blogger .svg-icon-24 { - fill: #CCCCCC; + fill: #E0E0E0; cursor: pointer; height: 24px; width: 24px; min-width: 24px; vertical-align: bottom; } - /* Comments */ main .comments { margin-top: 30px; + color: $(header.font.color) !important; } main .comments .title { - margin-bottom: 10px; + color: $(sidebar.font.color) !important; + margin-bottom: 40px; } - main .comments ol { list-style-type: none; } - main .comments #top-ra { padding: 0px; - border-top: 1px solid #CCCCCC; } - main .comments #top-ra>li { - border-bottom: 1px solid #CCCCCC; margin: 10px auto 10px auto; } - + main .comments .comment { + margin-top: 20px; + } main .comments .comment .avatar-image-container { background-color: $(#CCCCCC); width: 35px; @@ -372,7 +404,6 @@ border-radius: 35px; z-index: 1; } - main .comments .comment .avatar-image-container::before { content: '?'; line-height: 35px; @@ -381,39 +412,42 @@ width: 35px; text-align: center; } - main .comments .comment .avatar-image-container img { border-radius: 35px; position: absolute; z-index: 2; } - main .comments .comment .comment-block { + background-color: #FFFFFF; width: calc(100% - 55px); display: inline-block; - padding: 0px 10px 5px 5px; + margin: 0px 10px 10px 10px; + padding: 15px; + border-radius: 25px; } - main .comments .comment .comment-block .comment-header {} - - main .comments .comment .comment-block .comment-header .user { + main .comments .comment .comment-block .comment-header cite { + color: #FFFFFF; font-style: normal; - display: block; + display: inline-block; + margin-bottom:10px; + padding: 5px 10px; + border-radius: 25px; + background-color: #80CBC4; + } + main .comments .comment .comment-block .comment-header cite a { + color: #FFFFFF; } - main .comments .comment .comment-block .comment-header .datetime { font-size: 0.8em; display: block; } - main .comments .comment .comment-block p { margin-block-start: 5px; margin-block-end: 5px; margin-inline-start: 0px; margin-inline-end: 0px; - } - main .comments .comment .comment-actions { margin-bottom: 5px; display: inline-block; @@ -426,26 +460,79 @@ overflow: hidden; text-overflow: ellipsis; } - main .comments .comment .comment-actions .comment-reply { margin-right: 8px; } - main .comments .comment .thread-toggle, main .comments .comment .continue, main .comments .comment-form #comment-post-message, main .comments .loadmore { display: none; } - main .comments .blogger-comment-from-post { margin: 20px auto; } - .hidden { display: none; } + #main-bottom .v-divider + { + border-color: $(sidebar.font.color); + } + + @media all and (max-width: 1263px) { + header { + top: 0px !important; + left: 0 !important; + width: 100vw; + } + + header .SearchBar .v-input { + width: calc(100vw - 80px) !important; + } + + main { + color: $(header.font.color) !important; + background-color: $(header.background.color) !important; + padding-top: 80px !important; + top: 0 !important; + } + + main h1, h2 { + font-size: 1.5rem !important; + } + + main .post-share-buttons { + min-height: 80px; + } + + main .container .post-outer .post-single { + padding: 0px; + } + + main .container .post-outer .post-multiple { + padding: 5px; + margin-bottom: 10px; + max-height: 240px; + overflow: hidden; + } + + main .comments .title + { + color: $(header.font.color) !important; + margin-bottom: 20px; + } + + #bg-photo { + display: none; + } + + #main-bottom .v-divider + { + border-color: #ccc; + } + } ]]> @@ -455,12 +542,9 @@ padding: 80px 0px 0px 0px !important; width: 800px !important; } - body#layout #init-wrapper { display: block; } - - body#layout .section { width: 100% !important; height: auto !important; @@ -469,7 +553,6 @@ padding: 0px !important; display: block !important; } - body#layout .section .widget { width: 100% !important; height: auto !important; @@ -489,6 +572,7 @@