[UI] Feed structure done, feed CSS work

public/assets/css/network/public.css

@@ -1,22 +1,85 @@
 .content {
     display: flex;
     flex-wrap: wrap;
-    margin-top: calc(5 * var(--main-size));
+    margin-top: calc(4 * var(--main-size));
     justify-content: center;
     align-items: center;
     margin-left: var(--nav-size);
-    margin-right: 0;
+    margin-right: var(--nav-size);
+    margin-bottom: var(--unit-size);
+}
+.content .main {
+    width: 100%;
+    margin-left: var(--unit-size);
+    margin-right: var(--unit-size);
+    box-shadow: var(--shadow);
+    border-radius: 0 0 var(--unit-size) var(--unit-size);
 }
 
-.content div {
+.main-nav {
-    background-color: #00000050;
+    order: 1;
-    padding: calc(2*var(--unit-size));
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    flex: 1;
+    background-color: var(--bg1);
+    padding: var(--medium-size);
     font-size: var(--medium-size);
-    height: 100%;
+    font-family: var(--head-font);
+}
+
+.main-nav ul {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-evenly;
     width: 100%;
-    margin-top: var(--unit-size);
+    margin-left: calc(2 * var(--side-margin));
-    margin-left: var(--side-margin);
+    margin-right: calc(2 * var(--side-margin));
-    margin-right: var(--side-margin);
+    padding: 0;
-    box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
+}
+.main-nav li {
+    display: block;
+    flex: 0 1 auto;
+    list-style-type: none;
+    font-weight: 700;
+}
+.active {
+    color: var(--fg) !important;
+    font-weight: 700;
+}
+
+.main-nav a {
+    color: var(--accent);
+}
+
+.main-nav a:hover {
+    color: var(--fg);
+    transition: all 0.8s ease;
+}
+
+.notices {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--medium-size);
+    border-radius: 0 0 var(--unit-size) var(--unit-size);
+    background-color: var(--bg3);
+    padding: var(--unit-size);
+}
+.notices .timeline-nav {
+    order: 2;
+    width: 100%;
+    box-shadow: var(--shadow);
     border-radius: var(--unit-size);
 }
+.notices .timeline-nav .notices div {
+    background-color: var(--bg4);
+    box-shadow: var(--shadow);
+    padding: var(--unit-size);
+    margin-top: var(--unit-size);
+    border-radius: var(--unit-size);
+    width: 100%;
+}
+.notices .main-nav {
+    width: 100%;
+    font-size: var(--unit-size);
+}

templates/network/public.html.twig

@@ -21,6 +21,37 @@
 
 {% block body %}
     <div class="content">
+        <div class="main">
+            <nav class='main-nav'>
+                <ul>
+                    <li>
+                        <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Timeline</a>
+                    </li>
+                    <li>
+                        <a href="#">Groups</a>
+                    </li>
+                    <li>
+                        <a href="#">People</a>
+                    </li>
+                </ul>
+            </nav>
+            <hr>
+            <div class="notices">
+                <nav class='main-nav'>
+                    <ul>
+                        <li>
+                            <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Public</a>
+                        </li>
+                        <li>
+                            <a href="#">Home</a>
+                        </li>
+                        <li>
+                            <a href="#">Network</a>
+                        </li>
+                    </ul>
+                </nav>
+                <div class="timeline-nav">
+                    <div class="notices">
                         {% if notices is defined %}
                             {% for notice in notices %}
                                 <div> {{notice}} </div>
@@ -29,6 +60,10 @@
                             No notices here.
                         {% endif %}
                     </div>
+                </div>
+            </div>
+        </div>
+    </div>
 {% endblock body %}
 
 {% block javascripts %}{% endblock %}