[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,9 +114,11 @@ N.B.:
                 Network Services Improvements proposal</a> (old format).</p>
         </article>
 
-        <article id="log-of-past-successes">
+        <hr>
-            <h2><a href="#log-of-past-successes">Past successes</a></h2>
 
+        <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
@@ -128,6 +130,8 @@ N.B.:
                     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>
@@ -135,7 +139,9 @@ N.B.:
                     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
@@ -145,6 +151,8 @@ N.B.:
                         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>
@@ -152,7 +160,9 @@ N.B.:
                         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
@@ -165,6 +175,7 @@ N.B.:
                     Nordfeldth</a>.</p>
                 <a class="button" href="2018/">Technical Report</a>
                 <hr>
+            </section>            
         </article>
     </div>