Merge pull request #48 from dixitk13/dixitk13/feat/fix-layout

fixing some layouts, sans 4k

src/common/ExpandableCard.js

@@ -52,7 +52,7 @@ export const Expander = styled.div.attrs(({ cardId, open }) => ({
         `
       : `display: none;`};
 
-  @media ${device.mobile} {
+  @media ${device.mobile}, ${device.tablet} {
     width: ${(props) => (props.open ? "100%" : "")};
   }
 `;
@@ -113,7 +113,7 @@ export const Tags = styled.ul.attrs({
   margin: 21px 0 0 0;
   width: 100%;
 
-  @media ${device.mobile} {
+  @media ${device.mobile}, ${device.tablet} {
     flex-wrap: wrap;
     justify-content: flex-start;
   }
@@ -138,7 +138,7 @@ export const Tag = styled.li.attrs({ tabIndex: 0 })`
     }
   }
 
-  @media ${device.mobile} {
+  @media ${device.mobile}, ${device.tablet} {
     display: flex;
     flex-wrap: wrap;
     &:nth-of-type(n + 5) {
@@ -226,7 +226,7 @@ export const Body = styled.article.attrs({ tabIndex: 0 })`
 `;
 
 /* Normal Card Classes */
-export const Card = styled.li.attrs(({ active, open }) => ({
+export const Card = styled.li.attrs(({ active }) => ({
   role: "listitem",
   tabIndex: active ? -1 : 0,
 }))`
@@ -241,9 +241,10 @@ export const Card = styled.li.attrs(({ active, open }) => ({
 
   background: ${background};
   color: ${fontColor};
-
-  @media ${device.desktop} {
-    min-width: 300px;
+  /* TODO: 4k f*s up? */
+  @media ${device.desktop}, ${device.smallLaptop}, ${device.screen4k} {
+    max-width: 300px;
+    min-width: 200px;
     // top-cards shouldn't have any margin
     &:nth-child(-n + ${numberOfCards}) {
       margin-top: 0;
@@ -265,7 +266,7 @@ export const Card = styled.li.attrs(({ active, open }) => ({
     }
   }
 
-  @media ${device.mobile} {
+  @media ${device.mobile}, ${device.tablet} {
     width: 100%;
     margin: 10px 0;
     min-height: ${rhythm(4)};

src/components/AboutMe/CardView/AboutMeCardView.js

@@ -34,11 +34,14 @@ const AboutMeContainer = styled.div`
   box-shadow: ${boxShadow};
   z-index: 2;
 
+  @media ${device.screen4k} {
+    width: 10vw;
+  }
   @media ${device.desktop} {
     margin: 0 10px ${rhythm(0.25)} 10px;
   }
 
-  @media ${device.mobile} {
+  @media ${device.mobile}, ${device.tablet} {
     height: unset;
     margin-right: unset;
     width: 100%;
@@ -72,8 +75,7 @@ const Image = styled.img.attrs({
   margin-bottom: 1rem;
   background-size: cover;
   clip-path: polygon(0, 0);
-  // TODO: uncomment before deployment
-  // animation: ${polygons} 60s infinite;
+  animation: ${polygons} 60s infinite;
 `;
 
 const Quote = styled(Blockquote).attrs({

src/components/Home/HomeView.js

@@ -27,7 +27,7 @@ export const HomeViewContainer = styled.div`
   @media ${device.desktop} {
     height: 100%;
   }
-  @media ${device.mobile} {
+  @media ${device.mobile}, ${device.tablet} {
     flex-direction: column;
     overflow-x: hidden;
   }

src/components/Projects/ProjectsView.js

@@ -38,13 +38,19 @@ const ProjectCardsContainer = styled.ul.attrs({
 })`
   margin: 0;
 
+  @media ${device.smallLaptop} {
+    width: 60vw;
+    display: flex;
+    flex-flow: row wrap;
+    height: 100%;
+  }
   @media ${device.desktop} {
-    width: 40vw;
+    width: 45vw;
     display: flex;
     flex-flow: row wrap;
     height: 100%;
   }
-  @media ${device.mobile} {
+  @media ${device.mobile}, ${device.tablet} {
     display: flex;
     padding: 0;
     flex-direction: column;

src/components/Tags/TagList.js

@@ -19,9 +19,15 @@ const TagsUnorderedList = styled.ul`
   display: grid;
   grid-gap: ${rhythm(0.5)};
 
-  // TODO: something wrong w/ breakpoints here
-  grid-template-columns: repeat(4, ${boxDim});
-
+  @media ${device.smallLaptop} {
+    grid-template-columns: repeat(2, ${boxDim});
+  }
+  @media ${device.desktop} {
+    grid-template-columns: repeat(3, ${boxDim});
+  }
+  @media ${device.screen4k} {
+    grid-template-columns: repeat(4, ${boxDim});
+  }
   @media ${device.mobile} {
     margin: ${rhythm(2)} 0 0 0;
     display: flex;
@@ -65,15 +71,10 @@ const StyledListItem = styled.li`
   &:active {
     transform: translateZ(-12px);
   }
-  @media ${device.mobile} {
-    height: ${mobileBoxDim};
-    width: ${mobileBoxDim};
-    margin: 3px;
-  }
-  @media ${device.tablet} {
+  @media ${device.mobile}, ${device.tablet} {
     height: ${mobileBoxDim};
     width: ${mobileBoxDim};
-    margin: 10px;
+    margin: 6px;
   }
 
   a {

src/utils/device.js

@@ -1,24 +1,26 @@
 const size = {
-  mobileS: "320px",
-  mobileM: "375px",
-  mobileL: "425px",
-  tablet: "768px",
-  laptop: "1024px",
-  laptopL: "1440px",
-  desktop: "2560px",
-  screen4k: "1900px",
+  mobileStart: "320px",
+  mobileEnd: "480px",
+  tabletStart: "481px",
+  tabletEnd: "768px",
+  smallLaptopStart: "769px",
+  smallLaptopEnd: "1280px",
+  desktopStart: "1281px",
+  desktopEnd: "2560px",
+  screen4k: "2560px",
 };
 
+/**
+ * 320px — 480px: Mobile devices
+ * 481px — 768px: iPads, Tablets
+ * 769px — 1024px: Small screens, laptops
+ * 1025px — 1200px: Desktops, large screens
+ * 1201px and more —  Extra large screens, TV
+ */
 export const device = {
-  mobileS: `(max-width: ${size.mobileS})`,
-  mobileM: `(max-width: ${size.mobileM})`,
-  mobileL: `(max-width: ${size.mobileL})`,
-  mobile: `(min-width: ${size.mobileS}) and (max-width: ${size.tablet})`,
-  tabletSize: `(max-width: ${size.tablet})`,
-  tablet: `(min-width: ${size.tablet}) and (max-width: ${size.laptop})`,
-  laptop: `(max-width: ${size.laptop})`,
-  laptopL: `(max-width: ${size.laptopL})`,
-  desktop: `(min-width: ${size.laptop}) and (max-width: ${size.desktop})`,
-  desktopL: `(max-width: ${size.desktop})`,
+  mobile: `(min-width: ${size.mobileStart}) and (max-width: ${size.mobileEnd})`,
+  tablet: `(min-width: ${size.tabletStart}) and (max-width: ${size.tabletEnd})`,
+  smallLaptop: `(min-width: ${size.smallLaptopStart}) and (max-width: ${size.smallLaptopEnd})`,
+  desktop: `(min-width: ${size.desktopStart}) and (max-width: ${size.desktopEnd})`,
   screen4k: `(min-width: ${size.screen4k})`,
 };