From 2b2744613681c99ab967121f50c1b20328c71d67 Mon Sep 17 00:00:00 2001
From: gumgood <gumgood@naver.com>
Date: Wed, 12 Jun 2024 14:44:37 +0000
Subject: [PATCH] Design: box radius

---
 _sass/_common.scss                 |  2 +-
 _sass/include/_navigation.scss     |  4 +++-
 _sass/pages/_index.scss            | 15 +++------------
 _sass/style/_light-typography.scss |  3 +++
 index.html                         |  2 +-
 5 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/_sass/_common.scss b/_sass/_common.scss
index e947536..11c1903 100644
--- a/_sass/_common.scss
+++ b/_sass/_common.scss
@@ -90,7 +90,7 @@ $nav-width: 15rem;
 .Box {
     background-color: var(--color-canvas-default);
     border-color: var(--color-border-default);
-    border-radius: var(--borderRadius-medium);
+    border-radius: var(--borderRadius-large);
     border-style: solid;
     border-width: var(--borderWidth-thin);
 }
diff --git a/_sass/include/_navigation.scss b/_sass/include/_navigation.scss
index f74862b..230c084 100644
--- a/_sass/include/_navigation.scss
+++ b/_sass/include/_navigation.scss
@@ -35,16 +35,18 @@ nav {
         height: 7rem;
         width: 7rem;
         overflow: hidden;
-        border-radius: 50%;
+        border-radius: var(--borderRadius-full);
         box-shadow: var(--color-avatar-border) 0 0 0 2px;
     }
 
   
     .profile-site-title {
+        width: min-content;
         margin: 0 -0.5rem;
         padding: 0.125rem 0.5rem;
         font-weight: 600;
         color: var(--color-fg-default);
+        border-radius: var(--borderRadius-medium);
     }
   
     .profile-site-description {
diff --git a/_sass/pages/_index.scss b/_sass/pages/_index.scss
index 1843c82..9e859da 100644
--- a/_sass/pages/_index.scss
+++ b/_sass/pages/_index.scss
@@ -1,16 +1,6 @@
 .post-summaries { 
 
     .post-summaries__item {
-        margin-bottom: 1.25rem;
-        
-        @media screen and (max-width: $break-small) {
-            margin-bottom: 1.5rem;
-        }
-
-        //box-shadow: var(--post-summaries-shadow);
-        border: 1px solid rgb(208, 215, 222);
-        border-radius: 0.5rem;
-        background-color: var(--post-summaries-bg);
 
         &:hover {
             box-shadow: rgba(104, 104, 104, 0.5) 0 2px 6px 0, rgba(211, 209, 209, 0.15) 0 0 0 1px;
@@ -79,8 +69,9 @@
         display: flex;
         flex-basis: 20rem;
 
-        border-radius: 0 0.5rem 0.5rem 0;
-
+        border-top-right-radius: var(--borderRadius-large);
+        border-bottom-right-radius: var(--borderRadius-large);
+        
         @media screen and (max-width: 640px) {
             max-height: 10rem;
             border-radius: 0.5rem 0.5rem 0 0;
diff --git a/_sass/style/_light-typography.scss b/_sass/style/_light-typography.scss
index 9e9eb39..1baa570 100644
--- a/_sass/style/_light-typography.scss
+++ b/_sass/style/_light-typography.scss
@@ -5,7 +5,10 @@
 @mixin light-scheme {
 // 230923
     --borderWidth-thin: 0.0625rem;
+    --borderRadius-small: 0.1875rem;
     --borderRadius-medium: 0.375rem;
+    --borderRadius-large: 0.75rem;
+    --borderRadius-full: 624.9375rem;
 
     --color-accent-fg: rgb(9, 105, 218);
     --color-avatar-border: var(--color-border-default);
diff --git a/index.html b/index.html
index be404e0..543f1bf 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     {%- for post in paginator.posts -%}
         {% assign img_attributes = post.content | split: "<img" | slice: 1 | first | split: '/>' | first %}
         <a class="link-muted" href="{{ post.url }}">
-            <div class="post-summaries__item">
+            <div class="post-summaries__item Box mb-4">
                 <div class="post-summaries-container">
                     {% if img_attributes %}
                     <div class="preview-img_wrapper flex-row">