[TWIG][CSS] Shortcuts now work in small screen sizes. Header icons further polish. Profile navigation structural rework.

public/assets/css/base.css

@@ -11,7 +11,7 @@
      */
     --unit-size: 0.5rem;
     --main-size: 1.4rem;
-    --medium-size: 1.2rem;
+    --medium-size: 1.15rem;
     --small-size: 1rem;
 
     /* colours and shadows */
@@ -40,9 +40,14 @@
     background-size: 100% 100%;
 }
 
+.anchor-hidden {
+    display: none;
+}
+
 /* HEADER AND SIDEPANELS */
 #header {
     z-index: 1;
+    font-size: var(--main-size);
 
     height: 3rem;
     display: flex;
@@ -50,18 +55,13 @@
     top: 0;
     background-color: var(--bg1);
 
-    padding: var(--unit-size);
     width: 100%;
     align-items: center;
+    padding: var(--unit-size);
 
     box-shadow: var(--shadow);
 }
 
-/* content should be rendered after the header, not bellow */
-#header + * {
-    margin-top: 3rem;
-}
-
 #instance {
     display: flex;
     align-items: center;
@@ -96,10 +96,7 @@
 
 /* CONTAINS ALL ELEMENTS BESIDES HEADER */
 .container {
-    display: flex;
+    margin-top: 3rem;
-    flex-wrap: wrap;
-    justify-content: space-around;
-
     margin-left: 20%;
     margin-right: 20%;
     padding: var(--unit-size);
@@ -457,11 +454,11 @@ input[type=file]:hover {
 }
 
 /* MEDIA QUERIES */
-
 /* sidepanels need to be shown by default on desktop, hidden on mobile */
 .panel .panel-content {
     display: flex;
     flex-direction: column;
+    font-size: var(--small-size);
 
     /* should remain in place for the user */
     position: fixed;
@@ -473,7 +470,6 @@ input[type=file]:hover {
     /* should occupy the entire vertical real estate */
     height: 100%;
 
-
     padding: var(--unit-size);
 }
 
@@ -486,12 +482,19 @@ input[type=file]:hover {
         width: 100%;
         max-width: 20%;
     }
+
+    a[id|="anchor"]:target + * {
+        animation-name: highlight;
+        animation-duration: 500ms;
+        animation-timing-function: ease;
+    }
 }
 
 @media (max-width: 1200px) {
     /* content should occupy the entire width at this size */
     .container {
-        margin: unset;
+        margin-left: unset;
+        margin-right: unset;
     }
 
     .content {
@@ -504,8 +507,9 @@ input[type=file]:hover {
     }
 
     #panel-left-toggle:checked ~ .panel-content,
-    #panel-right-toggle:checked ~ .panel-content {
+    #panel-right-toggle:checked ~ .panel-content,
-        display: flex;
+    a[id|="anchor"]:target ~ .panel-content {
+        display: flex !important;
 
         width: 100%;
         background-color: var(--bg2);
@@ -595,9 +599,3 @@ input[type=file]:hover {
         box-shadow: initial;
     }
 }
-
-[id|="anchor"]:target + * {
-    animation-name: highlight;
-    animation-duration: 500ms;
-    animation-timing-function: ease;
-}

public/assets/css/left/left.css

@@ -5,20 +5,30 @@
 #panel-left-toggle:not(:checked),
 #panel-left-toggle:checked {
     position: absolute;
-    opacity: 0;
+    top: -100%;
+}
+#panel-left-toggle:focus + * {
+    border-radius: 4px;
+    border: 2px solid var(--white);
+}
+#panel-left-icon {
+    cursor: pointer !important;
+    border: 2px solid transparent;
+
+    height: 100%;
+    width: auto;
+}
+
+.panel-left nav {
+    font-size: var(--medium-size);
 }
 
 /* PROFILE */
-.profile-nav {
-    font-family: var(--display-font);
-}
-
-.profile-nav nav {
-    display: inline-grid;
-    margin-bottom: var(--main-size);
-}
-
 .profile {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--display-font);
+
     background-color: var(--translucent);
     margin-bottom: var(--main-size);
     border: solid 2px var(--bg2);
@@ -28,56 +38,27 @@
     box-sizing: border-box;
 }
 
-#profile-links {
+#user {
-    display: flex;
+    align-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    margin-bottom: var(--unit-size);
 }
-
+#user img {
-#user-avatar {
+    float: left;
-    box-sizing: border-box;
+    width: 5rem;
-    border-radius: 50%;
-    padding: 0;
-}
-
-#user-avatar img {
-    border-radius: var(--unit-size);
-    width: calc(3 * var(--main-size));
     height: auto;
-
+    margin-right: 5px;
-    margin-right: var(--unit-size);
 }
 
-#user-avatar:hover,
+.profile-navigation {
-#user-avatar:focus {
+    margin-bottom: var(--main-size);
-    cursor: pointer;
-    background: none !important;
 }
-
+.profile-navigation > * {
-#user-avatar:hover img,
+    display: block;
-#user-avatar:focus img {
-    border-radius: 50% !important;
-    box-shadow: var(--shadow-light) !important;
-}
-
-#user-info {
-    display: flex;
-    flex-direction: column;
-}
-
-#user-tags {
-    font-family: var(--main-font);
-    padding-left: var(--unit-size);
-}
-#stats {
-    display: flex;
-    flex-direction: column;
-    font-size: var(--medium-size);
-    font-weight: bold;
 }
 
 /* TIMELINE NAVIGATION / PLUGINS */
+.timeline-nav {
+    margin-bottom: var(--main-size);
+}
 .timeline-nav a,
 .timeline-nav h1 {
     display: flex;
@@ -106,5 +87,5 @@
 }
 
 .footer {
-
+    font-size: var(--small-size);
 }

public/assets/css/right/right.css

@@ -5,5 +5,16 @@
 #panel-right-toggle:not(:checked),
 #panel-right-toggle:checked {
     position: absolute;
-    opacity: 0;
+    top: -100%;
+}
+#panel-right-toggle:focus + * {
+    border-radius: 4px;
+    border: 2px solid var(--white);
+}
+#panel-right-icon {
+    cursor: pointer !important;
+    border: 2px solid transparent;
+
+    height: 100%;
+    width: auto;
 }

templates/sidepanel/left/left.html.twig

@@ -1,22 +1,17 @@
 <div class="panel panel-left">
     <input type="checkbox" id="panel-left-toggle">
-    <label for="panel-left-toggle">{{ icon('menu', 'icon icon-left') | raw }}</label>
+    <label id="panel-left-icon" for="panel-left-toggle">{{ icon('menu', 'icon icon-left') | raw }}</label>
 
     <a id="anchor-left-panel" class="anchor-hidden"></a>
     <aside class="panel-content">
-        <nav class='profile-nav'>
+        {% if app.user %}
-            {% if app.user %}
+            <section class='profile'>
-                <section class='profile' role="complementary">
+                <a id="user" href="{{ path('settings') }}">
-                    <div id="profile-links">
+                    <img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
-                        <a id="user-avatar" href="{{ path('settings') }}">
+                    <div id="user-info">
-                            <img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
+                        <h1>{{ user_nickname }}</h1>
-                        </a>
 
-                        <span id="user-info">
+                        <nav id="user-tags">
-                        <a id="user-nick" href="{{ path('settings') }}">
-                            <h1>{{ user_nickname }}</h1>
-                        </a>
-                        <div id="user-tags">
                             {% if user_tags %}
                                 {% for tag in user_tags %}
                                     <a href='#'> #{{ tag }}</a>
@@ -24,65 +19,60 @@
                             {% else %}
                                 {{ '(No tags)' | trans }}
                             {% endif %}
-                        </div>
+                        </nav>
-                    </span>
+
+                        <section id="user-stats">
+                            {% if user_followers %}<h2>{{ 'Followers' | trans }} {{ user_followers }}</h2> {% endif %}
+                            {% if user_followed %}<h2>{{ 'Followed' | trans }} {{ user_followed }}</h2> {% endif %}
+                        </section>
                     </div>
+                </a>
 
-                    <section id="stats">
+                {# {% for extra in profile_extras %}
-                        <label>{{ 'Followers' | trans }} {{ user_followers }}</label>
+                {% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %}
-                        <label>{{ 'Followed' | trans }} {{ user_followed }}</label>
-                    </section>
-
-                    {# {% for extra in profile_extras %}
-                    {% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %}
                 {% endfor %} #}
-                </section>
+            </section>
 
-                <nav role="navigation">
+            <nav class="profile-navigation">
-                    <a href='#'>Messages</a>
+                <a href='#'>Messages</a>
-                    <a href="{{ path("replies", {'nickname' : user_nickname}) }}"
+                <a href="{{ path("replies", {'nickname' : user_nickname}) }}"
-                       class='hover-effect {{ active("replies") }}'>Replies</a>
+                   class='hover-effect {{ active("replies") }}'>Replies</a>
-                    {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
+                {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
-                        {{ link | raw }}
+                    {{ link | raw }}
+                {% endfor %}
+                <a href="{{ path('settings') }}"
+                   class='hover-effect {{ active('settings_') }}'>Settings</a>
+                <a href='{{ path('logout') }}'>Logout</a>
+            </nav>
+
+        {% else %}
+            <nav class="profile-navigation">
+                <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
+                <a href="{{ path('register') }}">Register</a>
+            </nav>
+        {% endif %}
+
+        <nav class="timeline-nav" role="menu">
+            <h1 role="tab">Timeline</h1>
+
+            <nav class='sec-nav' role="navigation">
+                <a href="{{ path('main_public') }}"
+                   class='{{ active('main_public') }}'>Public</a>
+
+                {% if user_nickname is defined %}
+                    <a href="{{ path("home_all", {'nickname' : user_nickname}) }}"
+                       class='{{ active("home_all") }}'>Home</a>
+                {% endif %}
+
+                <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
+
+                {% if main_nav_tabs is defined %}
+                    {% for tab in main_nav_tabs %}
+                        <a href="{{ path(tab['route']) }}"
+                           class='{{ active(tab['route']) }}'>{{ tab['title'] }}</a>
                     {% endfor %}
-                    <a href="{{ path('settings') }}"
+                {% endif %}
-                       class='hover-effect {{ active('settings_') }}'>Settings</a>
+            </nav>
-                    <a href='{{ path('logout') }}'>Logout</a>
-                </nav>
-
-            {% else %}
-                <nav>
-                    <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
-                    <a href="{{ path('register') }}">Register</a>
-                </nav>
-            {% endif %}
-
-            <div class="timeline-nav" role="menu">
-                <nav>
-                    <h1 role="tab">Timeline</h1>
-
-                    <nav class='sec-nav' role="navigation">
-                        <a href="{{ path('main_public') }}"
-                           class='{{ active('main_public') }}'>Public</a>
-
-                        {% if user_nickname is defined %}
-                            <a href="{{ path("home_all", {'nickname' : user_nickname}) }}"
-                               class='{{ active("home_all") }}'>Home</a>
-                        {% endif %}
-
-                        <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
-
-                        {% if main_nav_tabs is defined %}
-                            {% for tab in main_nav_tabs %}
-                                <a href="{{ path(tab['route']) }}"
-                                   class='{{ active(tab['route']) }}'>{{ tab['title'] }}</a>
-                            {% endfor %}
-                        {% endif %}
-                    </nav>
-                </nav>
-
-            </div>
-
         </nav>
 
         <div class="footer" role="contentinfo">

templates/sidepanel/right/right.html.twig

@@ -1,6 +1,6 @@
 <div class="panel panel-right">
     <input type="checkbox" id="panel-right-toggle">
-    <label for="panel-right-toggle">{{ icon('notes', 'icon icon-right') | raw }}</label>
+    <label id="panel-right-icon" for="panel-right-toggle">{{ icon('notes', 'icon icon-right') | raw }}</label>
 
     <a id="anchor-right-panel" class="anchor-hidden"></a>
     <aside class="panel-content">