8 files changed, 94 insertions, 3 deletions

diff --git a/src/_badge.scss b/src/_badge.scss
new file mode 100644
index 0000000..b13dbc9
--- /dev/null
+++ b/src/_badge.scss
@@ -0,0 +1,15 @@
+@use 'iro-sass/src/props';
+
+@use 'common';
+
+@mixin styles {
+    .badge, a.badge {
+        padding-inline: 8px;
+        border-radius: 10em;
+    }
+
+    .badge.badgeUpdate, a.badge.badgeUpdate {
+        --background-color: #{props.get(common.$vlpnLink)};
+        --color: #{props.get(common.$vlpnLinkFg)};
+    }
+}
diff --git a/src/_board.scss b/src/_board.scss
index 90b2768..7e8be12 100644
--- a/src/_board.scss
+++ b/src/_board.scss
@@ -23,6 +23,16 @@
         }
     }
 
+    .wbbBoardNode__lastPostAvatar .userAvatarImage {
+        inline-size: 32px;
+        block-size: 32px;
+    }
+
+    .wbbBoardSeparator {
+        block-size: 1px;
+        background-color: var(--wcfContentBorderInner);
+    }
+
     .tabularListColumns {
         &::before {
             content: "";
@@ -38,4 +48,10 @@
             }
         }
     }
+
+    .tabularListRow.divider {
+        + li:not(.divider) {
+            border-block-start-width: 3px;
+        }
+    }
 }
diff --git a/src/_common.vars.scss b/src/_common.vars.scss
index 47c32d5..54066e8 100644
--- a/src/_common.vars.scss
+++ b/src/_common.vars.scss
@@ -3,7 +3,9 @@
 @use 'core';
 
 $vlpnLink: props.def(--vlpnLink, props.get(core.$theme, --red, --1000));
+$vlpnLinkFg: props.def(--vlpnLinkFg, props.get(core.$theme, --red, --1000-text));
 $vlpnLinkActive: props.def(--vlpnLinkActive, props.get(core.$theme, --red, --1300));
+$vlpnLinkActiveFg: props.def(--vlpnLinkActiveFg, props.get(core.$theme, --red, --1300-text));
 
 $wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --600));
 $wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get(core.$theme, --base, --800));
@@ -19,6 +21,7 @@ $wcfNavigationLink: props.def(--wcfNavigationLink, props.get(core.$theme, --base
 $wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get(core.$theme, --base, --800));
 
 $wcfContentBackground: props.def(--wcfContentBackground, props.get(core.$theme, --base, --75));
+$wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner));
 
 $wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get(core.$theme, --base, --100));
 $wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get(core.$theme, --base, --800));
@@ -33,20 +36,22 @@ $wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get(core.$the
 $wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get(core.$theme, --base, --50));
 $wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get(core.$theme, --base, --50));
 
-$wcfSidebarBackground: props.def(--wcfSidebarBackground, transparent);
+$wcfSidebarBackground: props.def(--wcfSidebarBackground, props.get($wcfContentBackground));
 
 $wcfButtonBackground: props.def(--wcfButtonBackground, props.get(core.$theme, --base, --200));
 $wcfButtonText: props.def(--wcfButtonText, props.get(core.$theme, --base, --200-text));
 $wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get(core.$theme, --base, --500));
 $wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get(core.$theme, --base, --500-text));
 
-$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get(core.$theme, --base, --500));
-$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get(core.$theme, --base, --500-text));
+$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get(core.$theme, --base, --600));
+$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get(core.$theme, --base, --600-text));
 $wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get(core.$theme, --base, --800));
 $wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get(core.$theme, --base, --800-text));
 
 $wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);
 
+$wcfContentContainerBorder: props.def(--wcfContentContainerBorder, var(--wcfContentContainerBackground));
+
 $wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink));
 $wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActive));
 
diff --git a/src/_footer.scss b/src/_footer.scss
new file mode 100644
index 0000000..714a1cf
--- /dev/null
+++ b/src/_footer.scss
@@ -0,0 +1,9 @@
+@mixin styles {
+    .boxesFooterBoxes {
+        a {
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}
diff --git a/src/_header.scss b/src/_header.scss
index 1f3abc7..1d601c7 100644
--- a/src/_header.scss
+++ b/src/_header.scss
@@ -13,4 +13,9 @@
             padding-block: 0;
         }
     }
+
+    .userPanel > ul > li > a > fa-icon {
+        --font-size: 18px;
+        --icon-size: 24px;
+    }
 }
diff --git a/src/_rank.scss b/src/_rank.scss
new file mode 100644
index 0000000..4cd4c5c
--- /dev/null
+++ b/src/_rank.scss
@@ -0,0 +1,5 @@
+@mixin styles {
+    .userRankImage > img {
+        vertical-align: bottom;
+    }
+}
diff --git a/src/_sidebar.scss b/src/_sidebar.scss
index d220678..3d1689a 100644
--- a/src/_sidebar.scss
+++ b/src/_sidebar.scss
@@ -28,5 +28,35 @@
                 }
             }
         }
+
+        a {
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    @media screen and (min-width: 545px) and (max-width: 1024px) {
+        .boxesSidebarLeft{
+            margin-inline-end: 0;
+        }
+    
+        .boxesSidebarRight {
+            margin-inline-start: 0;
+        }
+
+        .boxesSidebarLeft, .boxesSidebarRight {
+            .box {
+                border-radius: 0;
+    
+                &:not(:first-child) {
+                    padding-start: 20px 10px;
+    
+                    &::before {
+                        display: none;
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/src/light.scss b/src/light.scss
index 4ab586a..f3115d2 100644
--- a/src/light.scss
+++ b/src/light.scss
@@ -8,6 +8,9 @@
 @use 'sidebar';
 @use 'board';
 @use 'avatar';
+@use 'badge';
+@use 'rank';
+@use 'footer';
 
 @include core.styles--light;
 @include common.styles;
@@ -16,3 +19,6 @@
 @include sidebar.styles;
 @include board.styles;
 @include avatar.styles;
+@include badge.styles;
+@include rank.styles;
+@include footer.styles;