🎨 📱 make design more mobile-adaptive and add lecture 3 materials

ZKDL-Camp · Jul 30, 2024 · 553eb1d · 553eb1d
1 parent 39e4da3
commit 553eb1d
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 11 deletions.
diff --git a/files/exercises/3-ec.pdf b/files/exercises/3-ec.pdf
diff --git a/files/notes/3-fields-and-ec.pdf b/files/notes/3-fields-and-ec.pdf
diff --git a/images/lecture-previews/lecture_3.png b/images/lecture-previews/lecture_3.png
diff --git a/index.html b/index.html
@@ -206,36 +206,38 @@ <h2 class="lecture-card-title"> Lecture 3: Finite Field Extensions and Elliptic
                     </div>
                 </div>
 
-                <!-- <div class="lecture-links-section">
+                <div class="lecture-links-section">
                     <h1 class="lecture-links-header"> <strong> Lecture Material: </strong> </h1>
 
                     <div class="lecture-links-list">
-                        <a href="files/notes/2-math-and-crypto.pdf" class="lecture-link">
+                        <a href="files/notes/3-fields-and-ec.pdf" class="lecture-link">
                             <img src="images/icons/lecture_notes_icon.png">
                             <p class="link-name"> Lecture Notes </p>
                         </a>
 
-                        <a href="files/slides/2-math-and-crypto.pdf" class="lecture-link">
+                        <!-- <a href="files/slides/2-math-and-crypto.pdf" class="lecture-link">
                             <img src="images/icons/slides_icon.png">
                             <p class="link-name"> Slides </p>
-                        </a>
+                        </a> -->
 
-                        <a href="files/exercises/2-math-and-crypto.pdf" class="lecture-link">
+                        <a href="files/exercises/3-ec.pdf" class="lecture-link">
                             <img src="images/icons/test.png">
                             <p class="link-name"> Exercises </p>
                         </a>
 
-                        <a href="https://forms.gle/cvXfeSQzo1Au3x567" class="lecture-link">
+                        <!-- <a href="https://forms.gle/cvXfeSQzo1Au3x567" class="lecture-link">
                             <img src="images/icons/google_form.png">
                             <p class="link-name"> Test Form </p>
-                        </a>
+                        </a> -->
                     </div>
 
                     <h1 class="lecture-links-header"> <strong> Other Helpful Resources: </strong> </h1>
                     <ul>
-                        <li> <a href="https://doi.org/10.1137%2F0108018"> Reed, Irving S.; Solomon, Gustave (1960), Polynomial Codes over Certain Finite Fields </a>: Original Paper on Reed-Solomon Error Correction</li>
+                        <li> <a href="http://tomlr.free.fr/Math%E9matiques/Math%20Complete/Cryptography/Guide%20to%20Elliptic%20Curve%20Cryptography%20-%20D.%20Hankerson,%20A.%20Menezes,%20S.%20Vanstone.pdf"> "Guide to Elliptic Curve Cryptography" </a> by Alfred Menezes et al.: Amazing book on Elliptic Curves optimizations. It also contains a great introduction into finite fields. </li>
+                        <li> <a href="https://static1.squarespace.com/static/5fdbb09f31d71c1227082339/t/5ff394720493bd28278889c6/1609798774687/PairingsForBeginners.pdf"> "Pairing for Beginners" </a> by Craig Costello: Quick dive into inner workings of elliptic curve pairing. </li>
+                        <li> <a href="https://toc.cryptobook.us/"> "A Graduate Course in Applied Cryptography" </a> by Dan Boneh and Victor Shoup, <strong>Section 15</strong> (Elliptic curve cryptography and pairings): very easy-to-follow and from legendary Dan Boneh! </li>
                     </ul>
-                </div> -->
+                </div>
             </div>
         </div>
 

diff --git a/styles/main/main.css b/styles/main/main.css
@@ -124,6 +124,15 @@
   body {
     font-size: 80%;
   }
+  .title-block .title-text {
+    -webkit-text-stroke-width: 2.5px;
+  }
+  .about-block {
+    margin: 0 10% 0 10%;
+  }
+  .lectures-block {
+    margin: 0 10% 0 10%;
+  }
   .lectures-block .lecture-card .lecture-card-head {
     display: block;
   }
@@ -139,7 +148,16 @@
   }
 }
 @media only screen and (max-width: 500px) {
+  .title-block .title-text {
+    -webkit-text-stroke-width: 2px;
+  }
   body {
     font-size: 70%;
   }
+  .about-block {
+    margin: 0 5% 0 5%;
+  }
+  .lectures-block {
+    margin: 0 5% 0 5%;
+  }
 }/*# sourceMappingURL=main.css.map */
diff --git a/styles/main/main.css.map b/styles/main/main.css.map
diff --git a/styles/main/main.scss b/styles/main/main.scss
@@ -146,14 +146,30 @@
 }
 
 @media only screen and (max-width: 950px) {
+    // Decreasing the font size
     body {
         font-size: 80%;
     }
 
+    // Title block
+    .title-block {
+        .title-text {
+            -webkit-text-stroke-width: 2.5px; // Making the stroke smaller
+        }
+    }
+
+    // About Section
+    .about-block {
+        margin: 0 10% 0 10%; // Making margin smaller
+    }
+
+    // Lecture Section
     .lectures-block {
+         margin: 0 10% 0 10%; // Making margin smaller
+
         .lecture-card {
             .lecture-card-head {
-                // Making image position default
+                // Making image position default (not next to the paragraph)
                 display: block;
 
                 .lecture-card-preview {
@@ -175,7 +191,25 @@
 }
 
 @media only screen and (max-width: 500px) {
+    // Title block
+    .title-block {
+        .title-text {
+            -webkit-text-stroke-width: 2px; // Making the stroke smaller
+        }
+    }
+
+    // Decreasing the font size even more
     body {
         font-size: 70%;
     }
+
+    // About Section
+    .about-block {
+        margin: 0 5% 0 5%; // Making margin smaller
+    }
+
+    // Lectures Section
+    .lectures-block {
+        margin: 0 5% 0 5%; // Making margin even smaller
+    }
 }