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 @@
-
-
+
+
-
-
-
+
+
-
-
*/
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 @@
+
@@ -631,7 +715,7 @@
-
+
FLAT
yyyy
@@ -644,159 +728,60 @@
MONTHLY
-
-
-
+
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
-
-
-
- true
- true
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
@@ -811,13 +796,13 @@
Comments
#ffffff
true
+
Author:
true
-
#f2f8f2
+
#ffffff
true
-
true
-
#81c784
+
#ffffff
TextAndImage
-
#000000
+
#ffffff
Date:
true
@@ -827,7 +812,7 @@
true
1
false
-
#000000
+
#ffffff
false
false
@@ -1168,7 +1153,7 @@
There is the bug that does not check whethere the older post exists or not. Not our fault. Blogger team needs to fix it.
-
+
@@ -1254,13 +1239,13 @@
-
+
-
+
@@ -1274,10 +1259,9 @@
@@ -1420,7 +1404,7 @@
-
+
@@ -1521,597 +1505,25 @@
-
+
+
+
+
- true
- true
- 2670895679547873606
- true
- true
+
+ Home
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 6
- true
- true
- ALL_TIME
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Home
-
-
-
-
-
-
-
-
-
-
-
-
+
+
@@ -2140,8 +1552,8 @@
@@ -2166,11 +1578,11 @@
-
+
mdi-arrow-left
-
+
@@ -2202,46 +1614,31 @@
-
+
+
-
-
-
-
-
+
-
+
- International language support
-
- μλ¬ 404: νμ΄μ§λ₯Ό μ°Ύμ μ μμ΅λλ€
-
- Error 404: Page not found
-
+ Error 404: Page not found
-
-
-
-
-
-
-
-
+
-
-
-
+
@@ -2270,11 +1667,9 @@
let result = '' + labelTitle + ' ';
let widgetContent = labelWidget.getElementsByClassName('cloud-label-widget-content')[0];
let items = '';
-
if (widgetContent === undefined || widgetContent === null) {
widgetContent = labelWidget.getElementsByClassName('list-label-widget-content')[0];
let links = widgetContent.getElementsByClassName('label-name');
-
for (let link of links) {
items = items + '' + link.innerHTML + ' '
}
@@ -2284,13 +1679,11 @@
items = items + '' + link.innerHTML + ' ';
}
}
-
result = result + items + ' ';
labelWidget.innerHTML = result;
}
}
-
let postShareButtons = document.getElementsByClassName('post-share-buttons')[0];
if (postShareButtons !== undefined && postShareButtons !== null) {
let shareButtons = document.getElementsByClassName('sharing-platform-button');
@@ -2298,7 +1691,6 @@
if (shareButtons.length > 0) {
for (let i = 0; i < shareButtons.length; i++) {
let shareButton = document.createElement("v-btn");
-
shareButton.classList = shareButtons[i].classList;
shareButton.classList.add('mx-2');
shareButton.setAttribute('aria-label', shareButtons[i].getAttribute('aria-label'));
@@ -2308,7 +1700,6 @@
shareButton.setAttribute('fab', 'true');
shareButton.setAttribute('small', 'true');
shareButton.setAttribute('elevation', '0');
-
if(shareButton.classList.contains('sharing-element-facebook')) shareButton.innerHTML = 'mdi-facebook ';
else if(shareButton.classList.contains('sharing-element-twitter')) shareButton.innerHTML = 'mdi-twitter ';
else if(shareButton.classList.contains('sharing-element-pinterest')) shareButton.innerHTML = 'mdi-pinterest '
@@ -2318,114 +1709,79 @@
}
shareButtonsTemplate = shareButtonsTemplate + '
';
}
-
document.getElementsByClassName('post-share-buttons')[0].innerHTML = shareButtonsTemplate;
}
-
let navTop = document.getElementById('NavTop');
-
if (navTop !== undefined && navTop !== null) {
-
Vue.component('nav-top', {
template: navTop.outerHTML
});
}
-
let labelSection = document.getElementById('LabelSection');
if (labelSection !== undefined && labelSection !== null) {
Vue.component('label-section', {
template: labelSection.outerHTML
});
}
-
let navBottom = document.getElementById('NavBottom');
if (navBottom !== undefined && navBottom !== null) {
Vue.component('nav-bottom', {
template: navBottom.outerHTML
});
}
-
let mainContentTop = document.getElementById('MainContentTop');
if (mainContentTop !== undefined && mainContentTop !== null) {
Vue.component('main-content-top', {
template: mainContentTop.outerHTML
});
}
-
let mainContentBottom = document.getElementById('MainContentBottom');
if (mainContentBottom !== undefined && mainContentBottom !== null) {
Vue.component('main-content-bottom', {
template: mainContentBottom.outerHTML
});
}
-
let pagination = document.getElementsByClassName('blog-pagination')[0];
if (pagination !== undefined && pagination !== null) {
Vue.component('pagination', {
template: pagination.outerHTML
});
}
-
let postOuters = document.getElementsByClassName('post-outer');
let posts = '';
if (postOuters !== undefined && postOuters !== null) {
for (let postOuter of postOuters) {
posts = posts + postOuter.outerHTML;
}
-
posts = posts + '
'
Vue.component('posts', {
template: posts
});
}
-
let comments = document.getElementById('comments');
if (comments !== undefined && comments !== null) {
+ let users = comments.getElementsByTagName('cite');
+ for (let user of users) {
+ let icon = document.createElement('v-icon');
+ icon.textContent = 'mdi-account';
+ user.insertBefore(icon, user.firstChild);
+ }
Vue.component('comments', {
template: comments.outerHTML
});
}
-
let postFeeds = document.getElementsByClassName('post-feeds')[0];
if (postFeeds !== undefined && postFeeds !== null) {
Vue.component('post-feeds', {
template: postFeeds.outerHTML
});
}
-
- let popularPosts = document.getElementById('PopularPosts1');
- if (popularPosts !== undefined && popularPosts !== null) {
- let widgetTitle = popularPosts.getElementsByClassName('title')[0];
- let titleText = '';
- if (widgetTitle !== undefined && widgetTitle !== null) {
- titleText = widgetTitle.innerHTML;
- popularPosts.getElementsByClassName('title')[0].outerHTML = '' + titleText + ' ';
- }
- Vue.component('popular-posts', {
- template: popularPosts.outerHTML
- });
- }
-
- let featuredPost = document.getElementById('FeaturedPost1');
- if (featuredPost !== undefined && featuredPost !== null) {
- let widgetTitle = featuredPost.getElementsByClassName('title')[0];
- let titleText = '';
- if (widgetTitle !== undefined && widgetTitle !== null) {
- titleText = widgetTitle.innerHTML;
- featuredPost.getElementsByClassName('title')[0].outerHTML = '' + titleText + ' ';
- }
- Vue.component('featured-post', {
- template: featuredPost.outerHTML
- });
- }
-
let bottomSection = document.getElementById('BottomSection');
if (bottomSection !== undefined && bottomSection !== null) {
Vue.component('bottom-section', {
template: bottomSection.outerHTML
});
}
-
let blogTitle = document.getElementById('BlogTitle');
if (blogTitle !== undefined && blogTitle !== null) {
Vue.component('blog-title', {
@@ -2437,15 +1793,24 @@
el: '#app',
vuetify: new Vuetify(),
data: {
+ desktop: true,
drawer: false,
labels: [],
search: false,
},
methods:{
-
},
mounted: function () {
- if (window.innerWidth > 1200) this.drawer = true;
+ if (window.innerWidth > 1263)
+ {
+ this.drawer = true;
+ this.desktop = true;
+ }
+
+ window.addEventListener('resize', () => {
+ this.desktop = window.innerWidth > 1263;
+ });
+
let shareButtons = document.getElementsByClassName('sharing-platform-button');
if (shareButtons.length > 0) {
for (let i = 0; i < shareButtons.length; i++) {
@@ -2474,10 +1839,9 @@
}
}
});
-
loadingOverlay.$destroy();
document.getElementById('loading-overlay').outerHTML = '';
- document.getElementById('loading-overlay-script').outerHTML = '';
+ document.getElementById('loading-overlay-script').outerHTML = '';
//]]>