styling

refactoring added custom font for the figcaptions on welcome page
nclandrei · Mar 22, 2017 · b4db0d2 · b4db0d2
1 parent 7e09bcb
commit b4db0d2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 22 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -4,12 +4,13 @@
 }
 
 html {
-    background: rgba(238, 238, 238, 1);
-    background: -moz-linear-gradient(left, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);
-    background: -webkit-linear-gradient(left, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);
-    background: -o-linear-gradient(left, rgba(238, 238, 238, 1)0%, rgba(238, 238, 238, 1) 100%);
-    background: -ms-linear-gradient(left, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);
-    background: linear-gradient(to right, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);
+    /*background: rgba(238, 238, 238, 1);*/
+    /*background: -moz-linear-gradient(left, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);*/
+    /*background: -webkit-linear-gradient(left, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);*/
+    /*background: -o-linear-gradient(left, rgba(238, 238, 238, 1)0%, rgba(238, 238, 238, 1) 100%);*/
+    /*background: -ms-linear-gradient(left, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);*/
+    /*background: linear-gradient(to right, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);*/
+    background: black;
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#499bea', endColorstr='#207ce5', GradientType=1);
     position: absolute;
     top: 0;
@@ -121,3 +122,16 @@ code {
     padding-left: 0;
     padding-right: 0;
 }
+
+@font-face {
+    font-family: Adam-CG-PRO;
+    src: url('../fonts/adamcg.otf');
+}
+
+figcaption {
+    font-family: Adam-CG-PRO, sans-serif;
+}
+
+a {
+    color: white;
+}
diff --git a/fonts/adamcg.otf b/fonts/adamcg.otf
diff --git a/js/carousel-flipster.js b/js/carousel-flipster.js
diff --git a/welcome.html b/welcome.html
@@ -14,46 +14,46 @@
 
 <img src="./assets/icons/png/icon.png" class="logo logo-center" height="128px" width="128px">
 
-<div id="coverflow" class="flipster">
+<div id="coverflow">
     <ul>
         <li>
-            <a href="huffman.html" text="huffman tree">
+            <a href="huffman.html">
                 <img src="./assets/huffman.png" style="width: 600px; height: 450px;">
                 <figcaption style="font-size: 3em;">Huffman Tree Encoding</figcaption>
             </a>
         </li>
         <li>
-            <a href="bfs.html" text="breadth first">
+            <a href="bfs.html">
                 <img src="assets/bfs.png" style="width: 600px; height: 450px;">
                 <figcaption style="font-size: 3em;">Breadth-First Search Algorithm</figcaption>
             </a>
         </li>
         <li>
-            <a href="dfs.html" text="depth first">
+            <a href="dfs.html">
                 <img src="./assets/dfs.png" style="width: 600px; height: 450px;">
                 <figcaption style="font-size: 3em;">Depth-First Search Algorithm</figcaption>
             </a>
         </li>
         <li>
-             <a href="dijkstra.html" text="dijkstra">
+             <a href="dijkstra.html">
                  <img src="./assets/dijkstra.jpg" style="width: 600px; height: 450px;">
                  <figcaption style="font-size: 3em;">Dijkstra's Shortest Path Algorithm</figcaption>
              </a>
          </li>
         <li>
-            <a href="prim-jarnik.html" text="prim-jarnik">
+            <a href="prim-jarnik.html">
                 <img src="./assets/prim-jarnik.png" style="width: 600px; height: 450px;">
-                <figcaption style="font-size: 3em;">Prim-Jarnik Min Spanning Tree Algorithm</figcaption>
+                <figcaption href="prim-jarnik.html" style="font-size: 3em;">Prim-Jarnik Min Spanning Tree Algorithm</figcaption>
             </a>
         </li>
         <li>
-            <a href="prim-jarnik-refinement.html" text="prim-jarnik-refinement">
+            <a href="prim-jarnik-refinement.html">
                 <img src="./assets/pjd.jpg" style="width: 600px; height: 450px;">
                 <figcaption style="font-size: 3em;">Prim-Jarnik Dijkstra's Refinement Min Spanning Tree Algorithm</figcaption>
             </a>
         </li>
         <li>
-            <a href="heap.html" text="heap">
+            <a href="heap.html">
                 <img src="./assets/heap.jpg" style="width: 600px; height: 450px;">
                 <figcaption style="font-size: 3em;">Heap Algorithms</figcaption>
             </a>
@@ -66,6 +66,7 @@
 <script>window.$ = window.jQuery = require('./js/jquery/jquery.min.js');</script>
 <script src="js/jquery/jquery.flipster.min.js"></script>
 <script src="js/carousel-flipster.js"></script>
+<script>$("#coverflow").flipster({ style: "carousel" });</script>
 </body>
 </html>