Homepage Image & small improvements

1 files changed, 21 insertions, 6 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index c09c56d..42b34ef 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -2,7 +2,8 @@
 :root {
     --bg-main: #fffff0;
     --bg-special: #f4e3b2;
-    --border-radius: 50px;
+    --border-radius-max: 250px;
+    --border-radius-minimal: 5px;
     --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
     --font-size-default: 1rem;
     --font-size-h1: 2rem;
@@ -205,7 +206,7 @@ time {
 .theme-toggle {
     background-color: var(--text-color);
     border: none;
-    border-radius: var(--border-radius);
+    border-radius: var(--border-radius-max);
     color: var(--bg-main);
     cursor: pointer;
     padding: 0.2rem;
@@ -218,7 +219,7 @@ time {
 /* SITE NAVMENU */
 .header__navigation {
     background-color: var(--bg-special);
-    border-radius: 5px;
+    border-radius: var(--border-radius-minimal);
     padding: var(--margin-padding-Y-small);
 }
 
@@ -304,13 +305,27 @@ time {
 
 .post-card__tags-item {
     background-color: var(--bg-special);
-    border-radius: var(--border-radius);
+    border-radius: var(--border-radius-max);
     color: #fff;
     font-size: var(--font-size-small);
     padding: 0.1rem 0.4rem;
 }
 
 /* PAGES Content */
+/* Homepage */
+.homepage__header-title {
+    text-align: center;
+}
+
+.homepage__header-image {
+    border: 4px solid var(--bg-special);
+    border-radius: var(--border-radius-max);
+    display: block;
+    margin: 1rem auto;
+    max-width: 150px;
+    max-height: 150px;
+}
+
 /* Article */
 .article__header {
     margin-bottom: var(--gap-large);
@@ -366,7 +381,7 @@ time {
 .search-form__input {
     font-size: var(--font-size-default);
     border: 1px solid var(--bg-special);
-    border-radius: 5px;
+    border-radius: var(--border-radius-minimal);
     padding: 0.2rem;
     width: 50%;
 
@@ -378,7 +393,7 @@ time {
 .search-form__reset {
     background-color: var(--bg-special);
     border: none;
-    border-radius: var(--border-radius);
+    border-radius: var(--border-radius-max);
     color: var(--text-color);
     font-size: var(--font-size-default);
     font-weight: bold;