Design: box radius

gumgood · Jun 12, 2024 · 2b27446 · 2b27446
1 parent ff4eb81
commit 2b27446
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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">