fix alumni and index issues

technojam-gu · Feb 4, 2019 · 0048085 · 0048085
1 parent 2a063d6
commit 0048085
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 22 deletions.
diff --git a/alumni.html b/alumni.html
@@ -21,12 +21,6 @@
         @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
         @import url('https://fonts.googleapis.com/css?family=Oswald');
         @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');
-        .alumni{
-            width: 80vw;
-            max-width: 800px;
-            position: relative;
-        }
-
         .alumni .headline{
             text-align: center;
             padding-bottom: 80px;
@@ -38,9 +32,12 @@
             color:black;
             text-align: left;
             background-color: #fff;
-            width: 100%;
+            width: 80vw;
+            max-width: 800px;
             min-height: 250px;
             position: relative;
+            left: 50%;
+            transform: translateX(-50%);
             margin-top: 50px;
             margin-bottom: 200px;
             box-shadow: 0 5px 20px rgba(0,0,0,0.4);
@@ -120,10 +117,8 @@
 
         /* tab view - 1 */
         @media(max-width:850px) {
-            .alumni {
-                width: 90vw;
-            }
             .alumni .card {
+                width: 80vw;
                 min-height: 200px;
                 margin-top: 50px;
                 margin-bottom: 100px;
@@ -151,11 +146,12 @@
         }
 
         /* tab view - 2 */
-        @media(max-width:700px) {  
+        @media(max-width:700px) {
             .alumni .card {
                 min-height: 150px;
                 margin-top: 50px;
                 margin-bottom: 100px;
+                width: calc(90vw - 30px);
             }
             .alumni .card .date {
                 top: -28px;
@@ -183,14 +179,16 @@
 
         /* mobile view */
         @media(max-width:450px) {
-            .alumni{
-                margin-top: 0px;
-            }
             .alumni .headline{
                 padding-bottom: 0px;
             }
             .alumni .card {
                 margin-bottom: 80px;
+                width: 90vw;
+            }
+            .alumni .card .wrapper {
+                max-height: 90vw;
+                overflow: hidden;
             }
             .alumni .card .date {
                 top: -25px;
@@ -204,10 +202,8 @@
                 text-shadow: 0 2px 2px rgba(0,0,0,0.4);
             }
             .alumni .card img, .alumni .card:nth-child(odd) img {
-                width: auto;
+                width: 100%;
                 height: auto;
-                max-width: 100%;
-                max-height: 300px;
                 position: relative;
                 left: 50%;
                 transform: translate(-50%,0);
@@ -248,7 +244,7 @@
             <h1 class="headline"><img src="images/logo.png" alt="Logo"> Alumni</h1>
             <div class="card">
                 <span class="date"><p>Jan 2019</p></span>
-                <img src="images/alumni/sample1.jpeg" alt="">
+                <div class="wrapper"><img src="images/alumni/sample1.jpeg" alt="coder"></div>                
                 <div class="content">
                     <h3 class="heading">A Not So Long Heading</h3>
                     <p class="name">- John Doe</p>
@@ -258,7 +254,7 @@ <h3 class="heading">A Not So Long Heading</h3>
 
             <div class="card">
                 <span class="date"><p>Nov 2018</p></span>
-                <img src="images/alumni/sample1.jpeg" alt="coder">
+                <div class="wrapper"><img src="images/alumni/sample1.jpeg" alt="coder"></div>
                 <div class="content">
                     <h3 class="heading">Some More Heading</h3>
                     <p class="name">- shivu </p>
@@ -268,7 +264,7 @@ <h3 class="heading">Some More Heading</h3>
 
             <div class="card">
                 <span class="date"><p>Aug 2018</p></span>
-                <img src="images/alumni/sample2.jpeg" alt="coder">
+                <div class="wrapper"><img src="images/alumni/sample2.jpeg" alt="coder"></div>
                 <div class="content">
                     <h3 class="heading">No More Heading</h3>
                     <p class="name">- shivu</p>

diff --git a/css/index.css b/css/index.css
@@ -1,6 +1,9 @@
 body{
 	background: black;
 }
+article {
+	max-width: 100vw;
+}
 .carousel{
 	display: block;
 	height: 100vh;
@@ -169,7 +172,7 @@ h1.overflowing {
 }
 .carousel-item{
 	background-position: center center;
-	background-repeat: no-repeat;
+	background-repeat: round;
 	background-size: cover;
 	height: 100%;
 }

diff --git a/serviceWorker.js b/serviceWorker.js
@@ -1,4 +1,4 @@
-var CACHE_NAME = 'tj-cache-v1.1';
+var CACHE_NAME = 'tj-cache-v1.2';
 var urlsToCache = [
     '/',
     '/events.html',