[GSSoC] Improving document sections styling, improving separation of contents

assets/css/style.css

@@ -113,14 +113,18 @@ header * {
   border-radius: 0.5rem;
   padding: 4px 8px;
   color: #f6f4f6;
-  align-self: flex-end;
+  float: inline-end;
   width: max-content;
+  box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
+    0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
+    0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
 }
 
 hr {
+  float: inline-start;
   margin-bottom: 1rem;
   width: 100%;
-  color: #221e2266;
+  color: snow;
 }
 
 #log-of-past-successes {
@@ -295,6 +299,21 @@ h2 {
     0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
 }
 
+.card {
+  background-color: #f6f4f666;
+  padding: 1rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
+    0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
+    0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
+}
+
+.card h1,.card h2,.card h3,.card h {
+  margin-top: unset;
+}
+
 .content-team {
   z-index: 3;
   position: sticky;

soc/index.html

@@ -114,57 +114,68 @@ N.B.:
                 Network Services Improvements proposal</a> (old format).</p>
         </article>
 
-        <article id="log-of-past-successes">
-            <h2><a href="#log-of-past-successes">Past successes</a></h2>
+        <hr>
 
-            <h3 id="log-of-2019-successes"><a href="#log-of-2020-successes">In 2020</a></h3>
-
-            <h4><a href="https://www.diogo.site/projects/GNU-social/soc/2020/accepted_proposals/frontend_eliseu.pdf">V3
-                Frontend</a></h4>
-            <p>Modular and meaningful Web UX for GNU social v3</p>
-            <p>Proposed by <a href="https://eliseuama.ro/">Eliseu Amaro</a> and mentored by <a
-                    href="https://www.hackerposse.com/~rozzin/">Joshua Judson Rosen</a>, <a
-                    href="https://github.com/phablulo">Phablulo Joel</a> and <a href="https://dansup.com">Daniel
-                Supernault</a>.</p>
-            <a class="button" href="2020/tech_report/v3_fe/">Technical Report</a>
-
-            <h4><a href="https://summerofcode.withgoogle.com/archive/2020/projects/5483698721390592/">V3 Backend</a>
-            </h4>
-            <p>Initial implementation of GNU social v3's backend.</p>
-            <p>Proposed by <a href="https://hsal.es/">Hugo Sales</a> and mentored by <a href="https://www.diogo.site/">Diogo
-                Cordeiro</a> and <a href="https://loadaverage.org/XRevan86">Alexei Sorokin</a>.</p>
-            <a class="button" href="2020/tech_report/v3_be/">Technical Report</a>
-            <hr>
-
-            <h3 id="log-of-2019-successes"><a href="#log-of-2019-successes">In 2019</a></h3>
-
-            <h4><a href="https://summerofcode.withgoogle.com/archive/2019/projects/6021217092370432/">Improvements on
-                GNU social's network systems</a></h4>
-            <p>Private Messaging, further development on ActivityPub, improved Remote Actions.</p>
-            <p>Proposed by <a href="https://loadaverage.org/tenma">Bruno Casteleiro</a> and mentored by <a
-                    href="https://diogo.site/">Diogo Cordeiro</a>.</p>
-            <a class="button" href="2019/tech_report/network/">Technical Report</a>
-
-            <h4><a href="https://summerofcode.withgoogle.com/archive/2019/projects/6155433343975424/">Optimizations on
-                Load Balance System and Storage Usage</a></h4>
-            <p>Image System, Embed Plugin, Queue System, Caching System.</p>
-            <p>Proposed by <a href="https://loadaverage.org/biodan">Miguel Dantas</a> and mentored by <a
-                    href="https://diogo.site/">Diogo Cordeiro</a>.</p>
-            <a class="button" href="2019/tech_report/load/">Technical Report</a>
-            <hr>
-
-            <h3 id="log-of-2018-successes"><a href="#log-of-2018-successes">In 2018</a></h3>
-
-            <h4><a href="https://summerofcode.withgoogle.com/archive/2018/projects/5289876471676928/">GS ActivityPub
-                Plugin</a></h4>
-            <p>The tendency is that newer software will focus in the implementation of the ActivityPub Protocol (as it
-                is newer and considered to be simpler) instead of OStatus, given that, it is important for GNU social to
-                support it in order to stay updated and relevant in an even larger fediverse.</p>
-            <p>Proposed by <a href="https://www.diogo.site/">Diogo Cordeiro</a> and mentored by <a
-                    href="https://github.com/dansup">Daniel Supernault</a> and <a href="https://mmn-o.se/">Mikael
-                Nordfeldth</a>.</p>
-            <a class="button" href="2018/">Technical Report</a>
-            <hr>
+        <article id="log-of-past-successes" class="card">
+            <h2><a href="#log-of-past-successes">Past successes</a></h2>
+            <section class="card">
+                <h3 id="log-of-2019-successes"><a href="#log-of-2020-successes">In 2020</a></h3>
+
+                <h4><a href="https://www.diogo.site/projects/GNU-social/soc/2020/accepted_proposals/frontend_eliseu.pdf">V3
+                    Frontend</a></h4>
+                <p>Modular and meaningful Web UX for GNU social v3</p>
+                <p>Proposed by <a href="https://eliseuama.ro/">Eliseu Amaro</a> and mentored by <a
+                        href="https://www.hackerposse.com/~rozzin/">Joshua Judson Rosen</a>, <a
+                        href="https://github.com/phablulo">Phablulo Joel</a> and <a href="https://dansup.com">Daniel
+                    Supernault</a>.</p>
+                <a class="button" href="2020/tech_report/v3_fe/">Technical Report</a>
+                
+                <hr>
+
+                <h4><a href="https://summerofcode.withgoogle.com/archive/2020/projects/5483698721390592/">V3 Backend</a>
+                </h4>
+                <p>Initial implementation of GNU social v3's backend.</p>
+                <p>Proposed by <a href="https://hsal.es/">Hugo Sales</a> and mentored by <a href="https://www.diogo.site/">Diogo
+                    Cordeiro</a> and <a href="https://loadaverage.org/XRevan86">Alexei Sorokin</a>.</p>
+                <a class="button" href="2020/tech_report/v3_be/">Technical Report</a>
+                <hr>
+            </section>
+            
+            <section class="card">
+                <h3 id="log-of-2019-successes"><a href="#log-of-2019-successes">In 2019</a></h3>
+
+                <h4><a href="https://summerofcode.withgoogle.com/archive/2019/projects/6021217092370432/">Improvements on
+                    GNU social's network systems</a></h4>
+                <p>Private Messaging, further development on ActivityPub, improved Remote Actions.</p>
+                <p>Proposed by <a href="https://loadaverage.org/tenma">Bruno Casteleiro</a> and mentored by <a
+                        href="https://diogo.site/">Diogo Cordeiro</a>.</p>
+                <a class="button" href="2019/tech_report/network/">Technical Report</a>
+    
+                <hr>
+                
+                <h4><a href="https://summerofcode.withgoogle.com/archive/2019/projects/6155433343975424/">Optimizations on
+                    Load Balance System and Storage Usage</a></h4>
+                <p>Image System, Embed Plugin, Queue System, Caching System.</p>
+                <p>Proposed by <a href="https://loadaverage.org/biodan">Miguel Dantas</a> and mentored by <a
+                        href="https://diogo.site/">Diogo Cordeiro</a>.</p>
+                <a class="button" href="2019/tech_report/load/">Technical Report</a>
+                <hr>
+            </section>
+
+            <section class="card">
+                <h3 id="log-of-2018-successes"><a href="#log-of-2018-successes">In 2018</a></h3>
+
+                <h4><a href="https://summerofcode.withgoogle.com/archive/2018/projects/5289876471676928/">GS ActivityPub
+                    Plugin</a></h4>
+                <p>The tendency is that newer software will focus in the implementation of the ActivityPub Protocol (as it
+                    is newer and considered to be simpler) instead of OStatus, given that, it is important for GNU social to
+                    support it in order to stay updated and relevant in an even larger fediverse.</p>
+                <p>Proposed by <a href="https://www.diogo.site/">Diogo Cordeiro</a> and mentored by <a
+                        href="https://github.com/dansup">Daniel Supernault</a> and <a href="https://mmn-o.se/">Mikael
+                    Nordfeldth</a>.</p>
+                <a class="button" href="2018/">Technical Report</a>
+                <hr>
+            </section>            
         </article>
     </div>