diff --git a/open-isle-cli/src/components/HeaderComponent.vue b/open-isle-cli/src/components/HeaderComponent.vue index e60bed5ae..7dc8a3a27 100644 --- a/open-isle-cli/src/components/HeaderComponent.vue +++ b/open-isle-cli/src/components/HeaderComponent.vue @@ -4,7 +4,7 @@ -
+
OpenIsle
OpenIsle
@@ -14,7 +14,12 @@ @@ -34,6 +39,7 @@ export default { align-items: center; font-size: 20px; font-weight: bold; + cursor: pointer; } .header-content { diff --git a/open-isle-cli/src/views/HomePageView.vue b/open-isle-cli/src/views/HomePageView.vue index e1d44bbcc..a3306d8d9 100644 --- a/open-isle-cli/src/views/HomePageView.vue +++ b/open-isle-cli/src/views/HomePageView.vue @@ -403,6 +403,13 @@ export default { .article-item-title { font-size: 20px; + text-decoration: none; + color: black; +} + +.article-item-title:hover { + color: var(--primary-color); + text-decoration: underline; } .article-item-description { diff --git a/open-isle-cli/src/views/PostPageView.vue b/open-isle-cli/src/views/PostPageView.vue index bb98aee51..5d2e7a42e 100644 --- a/open-isle-cli/src/views/PostPageView.vue +++ b/open-isle-cli/src/views/PostPageView.vue @@ -1,34 +1,115 @@ @@ -37,4 +118,153 @@ export default { .post-page { padding: 20px; } + +.article-title-container { + display: flex; + flex-direction: column; +} + +.article-title { + font-size: 30px; + font-weight: bold; +} + +.article-info-container { + display: flex; + flex-direction: row; + margin-top: 10px; + gap: 10px; + align-items: center; +} + +.article-info-item { + display: flex; + flex-direction: row; + gap: 5px; + align-items: center; +} + +.article-tags-container { + display: flex; + flex-direction: row; + gap: 10px; +} + +.article-tag-item { + display: flex; + flex-direction: row; + gap: 5px; + align-items: center; +} + +.article-content-container { + margin-top: 20px; + display: flex; + flex-direction: row; + gap: 10px; +} + +.user-avatar-container { + display: flex; + flex-direction: row; + gap: 10px; +} + +.user-avatar-item { + width: 50px; + height: 50px; +} + +.user-avatar-item-img { + width: 100%; + height: 100%; + border-radius: 50%; +} + +.article-content { + display: flex; + flex-direction: column; + gap: 10px; +} + +.user-name { + font-size: 16px; + font-weight: bold; +} + +.article-content-text { + font-size: 16px; + line-height: 1.8; + opacity: 0.7; +} + +.article-footer-container { + display: flex; + flex-direction: row; + gap: 10px; + margin-top: 60px; +} + +.reactions-container { + display: flex; + flex-direction: row; + gap: 10px; + align-items: center; + width: 100%; + justify-content: space-between; +} + +.reactions-viewer { + display: flex; + flex-direction: row; + gap: 20px; + align-items: center; +} + +.reactions-viewer-item-container { + display: flex; + flex-direction: row; + gap: 2px; + align-items: center; +} + +.reactions-viewer-item { + font-size: 16px; +} + +.reactions-count { + font-size: 16px; + opacity: 0.5; +} + +.make-reaction-container { + display: flex; + flex-direction: row; + gap: 20px; +} + +.make-reaction-item { + cursor: pointer; + padding: 10px; + border-radius: 50%; + opacity: 0.7; +} + +.like-reaction { + font-size: 20px; + color: #ff0000; +} + +.like-reaction:hover { + background-color: #ffe2e2; +} + +.copy-link { + font-size: 20px; +} + +.copy-link:hover { + background-color: #e2e2e2; +} +