[TWIG][CSS] Feedback provided to active page. Removed top accent border on notes.

public/assets/css/base.css

@@ -67,6 +67,13 @@
     align-items: center;
 }
 
+.active {
+    border-radius: var(--unit-size);
+    background: var(--white);
+    color: var(--bg1) !important;
+    transition: var(--cubic-transition);
+}
+
 .icon-logo {
     margin-right: var(--small-size);
     fill: var(--white);
@@ -138,7 +145,7 @@
 .note {
     background-color: var(--translucent);
     border: solid 2px var(--bg2);
-    border-top: solid 2px var(--bg3);
+    /*border-top: solid 2px var(--bg3);*/
     border-radius: var(--unit-size);
 }
 

public/assets/css/left/left.css

@@ -32,6 +32,7 @@
 #user-avatar {
     box-sizing: border-box;
     border-radius: 50%;
+    padding: 0;
 }
 
 #user-avatar img {
@@ -44,8 +45,8 @@
 
 #user-avatar:hover,
 #user-avatar:focus {
-    all: unset !important;
     cursor: pointer;
+    background: none !important;
 }
 
 #user-avatar:hover img,
@@ -62,6 +63,7 @@
 #user-tags {
     font-family: var(--main-font);
     font-size: var(--medium-size);
+    padding-left: var(--unit-size);
 }
 
 .footer {

public/assets/css/reset.css

@@ -136,26 +136,29 @@ li {
     padding: 0;
 }
 
-a:link {
+a {
     text-decoration: none;
     color: var(--white);
+    border-radius: var(--unit-size);
+
+    padding-left: var(--unit-size);
+    padding-right: var(--unit-size);
+    margin-bottom: 1px;
     outline: 0;
 }
 
 a:visited {
-    text-decoration: none;
     color: var(--white);
+    padding-left: var(--unit-size);
+    padding-right: var(--unit-size);
     outline: 0;
     margin: 0;
-    padding: 0;
 }
 
 a:focus,
 a:hover {
-    border-radius: var(--unit-size);
     background: var(--white);
     color: var(--bg1) !important;
-    padding: 0 var(--unit-size) 0 var(--unit-size);
     transition: var(--cubic-transition);
 }
 

public/assets/css/settings/settings.css

@@ -105,14 +105,16 @@
     margin-top: var(--unit-size);
 }
 
+.section-title-settings summary {
+    padding: var(--unit-size) var(--small-size);
+}
+
 .section-title-settings summary:focus,
 .section-title-settings summary:hover {
     cursor: pointer !important;
     border-radius: var(--unit-size);
     background: var(--white);
     color: var(--bg1);
-    padding-left: var(--unit-size);
-    padding-right: var(--unit-size);
     transition: var(--cubic-transition);
 }
 

templates/sidepanel/left/left.html.twig

@@ -3,14 +3,14 @@
 
         {% if app.user %}
             <section class='profile'>
-                <section id="profile-links">
+                <div id="profile-links">
                     <a id="user-avatar" href="{{ path('settings') }}">
                         <img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
                     </a>
 
                     <span id="user-info">
                         <a id="user-nick" href="{{ path('settings') }}">
-                            <h2>{{ user_nickname }}</h2>
+                            <h1>{{ user_nickname }}</h1>
                         </a>
                         <div id="user-tags">
                             {% if user_tags %}
@@ -22,7 +22,7 @@
                             {% endif %}
                         </div>
                     </span>
-                </section>
+                </div>
 
                 <span id="stats">
                     <h2>{{ 'Followers' | trans }} {{ user_followers }}</h2>