[Home] Margin and stuff of profile pic

Author: Joni32do

assets/scss/_raditian.scss

@@ -1354,7 +1354,7 @@ a.nav-link::after {
     align-items: center;
     position: relative;
     margin-bottom: -20px;
-    padding-top: 240px;
+    padding-top: 20%;
 }
 
 .rad-showcase__bg {
@@ -1367,11 +1367,13 @@ a.nav-link::after {
     left: 0;
     z-index: 0;
     display: none;
+    padding-top: 5%;
+    padding-bottom: 5%;
 }
 
 .rad-showcase__bg img {
     width: 90%;
-    margin-top: 90px;
+    margin-top: 5%;
     height: 100%;
     max-height: 721px;
 }
@@ -1399,6 +1401,7 @@ a.nav-link::after {
     left: 0;
     right: 0;
     opacity: 1;
+    margin-bottom: 2rem
 }
 
 .rad-showcase__bg--mobile img {
@@ -1501,6 +1504,7 @@ a.nav-link::after {
 
 .profile-image img {
     margin-top: 40px;
+    margin-bottom: 40px;
 }
 
 .rad-showcase__bg img {
@@ -1751,6 +1755,127 @@ div.blog-single a{
     margin-bottom: 20px;
 }
 
+#blog-single #meta section {
+    font-weight: lighter;
+
+    .post-meta-info{
+        margin-bottom: 10px;
+    }
+}
+
+
+article.summary .post-meta {
+    font-weight: 500;
+
+    .post-meta-info{
+        margin-bottom: 10px;
+    }
+}
+
+
+article.post.summary h2 {
+    font-size: 40px
+}
+
+.post-summary {
+    margin-top: 20px;
+}
+
+.post-content {
+    margin-bottom: 20px;
+
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+
+    a {
+        color: $base-color;
+        text-decoration: underline;
+        transition: color 0.2s ease-in-out;
+        
+        &:hover {
+            color: darken($base-color, 20%);
+            text-decoration: underline;
+        }
+        
+        &:focus {
+            outline: 2px solid rgba($base-color, 0.5);
+            outline-offset: 2px;
+        }
+        
+        &.external {
+            &::after {
+                content: "\2197"; // Unicode for upward-right arrow
+                display: inline-block;
+                margin-left: 0.25em;
+                font-size: 0.8em;
+            }
+        }
+    }
+}
+
+ul.tags {
+    display: inline-flex;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+
+    li {
+        margin-bottom: 8px;
+        position: relative;
+        display: inline-block;
+        padding: 0.4em 1.2em 0.4em 1.6em;
+        background-color: white;
+        color: #333;
+        font-size: 0.9rem;
+        border-radius: 0.25rem;
+        border: 1px solid gray;
+
+        a{
+            color: $black;
+            display: inline-block;
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        
+        }
+
+        &::before {
+            content: "";
+            position: absolute;
+            left: 0.4em;
+            top: 50%;
+            transform: translateY(-50%) rotate(45deg);
+            width: 0.6em;
+            height: 0.6em;
+            background-color: #f5f5f5;
+            border-radius: 2px;
+        }
+    }
+}
+
+div.blog-single a{
+    color: $base-color
+}
+#blog-single #meta{
+    margin-bottom: 20px;
+}
+
+.light-border-bottom::after {
+    content: "";
+    width: 80%;
+    height: 1px;
+    max-width: 1170px;
+    background-color: #adb5bd;
+    display: block;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
 #blog-single #meta section {
     font-weight: lighter;
 }