first commit

src/static/images/search-icon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="251px" height="251px" viewBox="0 0 251 251" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="musica-searcher" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M244.186,214.604 L189.807,160.226 C189.518,159.937 189.179,159.735 188.877,159.466 C199.577,143.235 205.822,123.806 205.822,102.912 C205.822,46.075 159.747,0 102.911,0 C46.075,0 0,46.075 0,102.911 C0,159.746 46.074,205.822 102.91,205.822 C123.805,205.822 143.233,199.577 159.464,188.877 C159.733,189.178 159.934,189.517 160.223,189.806 L214.603,244.186 C222.772,252.354 236.016,252.354 244.186,244.186 C252.354,236.017 252.354,222.773 244.186,214.604 Z M102.911,170.146 C65.777,170.146 35.675,140.044 35.675,102.911 C35.675,65.777 65.778,35.675 102.911,35.675 C140.043,35.675 170.146,65.778 170.146,102.911 C170.146,140.044 140.043,170.146 102.911,170.146 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>

src/static/sass/abstracts/_variables.scss

@@ -0,0 +1,14 @@
+$color-dark: #171818;
+$color-background: #141414;
+$color-white: rgb(221, 218, 218);
+
+$color-green: #1cb831; 
+
+$color-red: #e21221;
+
+$color-dark-blue: #082452;
+$color-light-blue: rgb(15, 61, 129);
+$color-light-blue-2: #2b2da5;
+
+$color-purple: #782da3;
+

src/static/sass/base/_animations.scss

@@ -0,0 +1,2 @@
+
+

src/static/sass/base/_base.scss

@@ -0,0 +1,61 @@
+/* GLOBAL RESET */
+:global(html), :global(body), :global(div), :global(span), :global(applet), :global(object), :global(iframe),
+:global(h1), :global(h2), :global(h3), :global(h4), :global(h5), :global(h6), :global(p), :global(blockquote), :global(pre),
+:global(a), :global(abbr), :global(acronym), :global(address), :global(big), :global(cite), :global(code),
+:global(del), :global(dfn), :global(em), :global(img), :global(ins), :global(kbd), :global(q), :global(s), :global(samp),
+:global(small), :global(strike), :global(strong), :global(sub), :global(sup), :global(tt), :global(var),
+:global(b), :global(u), :global(i), :global(center),
+:global(dl), :global(dt), :global(dd), :global(ol), :global(ul), :global(li),
+:global(fieldset), :global(form), :global(label), :global(legend),
+:global(table), :global(caption), :global(tbody), :global(tfoot), :global(thead), :global(tr), :global(th), :global(td),
+:global(article), :global(aside), :global(canvas), :global(details), :global(embed),
+:global(figure), :global(figcaption), :global(footer), :global(header), :global(hgroup),
+:global(menu), :global(nav), :global(output), :global(ruby), :global(section), :global(summary),
+:global(time), :global(mark), :global(audio), :global(video) {
+	margin: 0;
+	padding: 0;
+	border: 0;
+   vertical-align: baseline;
+   box-sizing: inherit;
+}
+
+/* HTML5 display-role reset for older browsers */
+:global(article), :global(aside), :global(details), :global(figcaption), :global(figure),
+:global(footer), :global(header), :global(hgroup), :global(menu), :global(nav), :global(section) {
+	display: block;
+}
+:global(body) {
+	line-height: 1;
+}
+:global(ol), :global(ul) {
+	list-style: none;
+}
+:global(blockquote), :global(q) {
+	quotes: none;
+}
+:global(blockquote:before), :global(blockquote:after),
+:global(q:before), :global(q:after) {
+	content: '';
+	content: none;
+} 
+:global(table) {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+body {
+	box-sizing: border-box;
+	background-color: fff;
+}
+
+html {
+   // this defines what 1rem is --> font root size 
+   font-size: 62.5%; // 10/16, 1rem = 10px; 
+}
+
+// GRID AREA 
+.container {
+	display: grid;      
+	grid-template-rows: 47vw min-content min-content min-content; 
+	grid-template-columns:  4% repeat(10, 1fr) 4%;
+}

src/static/sass/components/_movieOriginals.scss

@@ -0,0 +1,14 @@
+.movieOriginals {
+   background-color: pink;
+   grid-column: 2 / 13;
+
+   &__container {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      column-gap: .5rem;
+
+      &--movie {
+         padding-bottom: 45rem;
+      }
+   }
+}

src/static/sass/components/_movieShowcase.scss

@@ -0,0 +1,14 @@
+.movieShowcase {
+   background-color: blue;
+   grid-column: 2 / 13;
+
+   &__container {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        column-gap: .5rem;
+
+        &--movie {
+           padding: 3rem;
+        }
+   }
+}

src/static/sass/layout/_footer.scss

@@ -0,0 +1,14 @@
+.footer {
+   background-color: greenyellow;
+   grid-column: 2 / 13;
+   
+
+   &__container {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+
+      &--description {
+         padding: 3rem;
+      }
+   }
+}

src/static/sass/layout/_header.scss

@@ -0,0 +1,5 @@
+.header {
+   padding-top: 4rem;
+   background-color: rebeccapurple;
+   grid-column: 1 / 13;
+}

src/static/sass/layout/_navigation.scss

@@ -0,0 +1,87 @@
+.navigation {
+   background-color: transparent; 
+
+   grid-column: 1 / 13; 
+   position: fixed;
+   width: 100%;
+   height: 6.7rem;
+   transition-timing-function: ease-in;
+   transition: all 1s;
+
+
+   &.black {
+      background-color: $color-background;
+   }
+
+   &__container {
+      background-color: transparent;
+      margin-left: 3.8rem;
+      display: flex;
+      height: 6.7rem;
+      justify-content: flex-start;
+      align-items: center;
+
+      a:first-child {
+         padding-left: .2%;
+         color: $color-red;
+         font-size: 4rem;
+      }
+
+      &-link {
+         color: #fff;
+         text-decoration: none;
+         margin-right: 3rem;
+      }
+
+      &--left {
+         flex-grow: 1;
+         color: #fff;
+         padding-right: 4.6rem;
+         display: flex;
+         justify-content: flex-end;
+
+      }
+   }
+
+}
+
+input[type="text"] {
+   // display: none;
+   // color: #fff;
+   border: none;
+   outline: none;
+   width: 0px;
+   padding: 10px;
+   padding-right: 2rem;
+   // background: none;
+   transition: width .5s cubic-bezier(0.000, 0.795, 0.000, 1.000);
+   cursor: pointer;
+}
+
+input[type="text"]:focus:hover {
+   border-bottom: 1px solid #BBB;
+   color: #fff;
+}
+
+input[type="text"]:focus {
+   width: 22rem;
+   z-index: 1;
+   background-color: #000;
+   border: 1px solid #fff;
+   cursor: text;
+}
+
+input[type="submit"] {
+   height: 67px;
+   width: 63px;
+
+   color: red;
+   text-indent: -10000px;
+   border: none;
+   position: absolute;
+   z-index: 2;
+   cursor: pointer;
+   opacity: 0.4;
+   cursor: pointer;
+   transition: opacity .4s ease;
+}

src/static/sass/style.scss

@@ -0,0 +1,18 @@
+@import "abstracts/functions";
+@import "abstracts/mixins";
+@import "abstracts/variables";
+
+@import "base/animations";
+@import "base/base";
+@import "base/typography";
+@import "base/utils";
+
+@import "components/search";
+@import "components/movie";
+@import "components/movieOriginals";
+@import "components/movieShowcase";
+
+@import "layout/footer";
+@import "layout/header";
+@import "layout/navigation";
+