refactor the project to use scss

This commit is contained in:
Ahmed-Ayman 2018-12-11 12:42:56 +02:00
parent 0b51135517
commit 45b435b201
10 changed files with 233 additions and 211 deletions

View File

@ -20,12 +20,12 @@ class RandomTopic extends React.Component {
{this.props.videos.map(video => {this.props.videos.map(video =>
<VideoItem id={video.id} key={video.id} title={video.title }/> <VideoItem id={video.id} key={video.id} title={video.title }/>
)} )}
<Link to="/topics"> {/*<Link to="/topics">*/}
<span className="view-all-parents">See All Topics</span> {/*<span className="view-all-parents">See All Topics</span>*/}
</Link> {/*</Link>*/}
<Link to="/topics"> {/*<Link to="/topics">*/}
<span className="view-all-items"> See All videos of {this.props.topicName} ({this.props.topicCount})</span> {/*<span className="view-all-items"> See All videos of {this.props.topicName} ({this.props.topicCount})</span>*/}
</Link> {/*</Link>*/}
</Grid> </Grid>
</section> </section>

View File

@ -0,0 +1,11 @@
@import "variables";
/* footer */
footer {
background: $light-gray-color;
position: absolute;
width: 100%;
left: 0;
margin-top: 1em;
padding: 1em;
font-weight: bold;
}

View File

@ -0,0 +1,52 @@
@import "variables";
/* globals */
* {
box-sizing: border-box;
margin: 0px;
border: 0px;
}
/* fonts */
@font-face {
font-family: 'Fedra Arabic';
src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype');
}
@font-face {
font-family: 'bebas';
src: url('../assets/fonts/BEBAS___.ttf') format('truetype');
}
@font-face {
font-family: 'majalla';
src: url('../assets/fonts/majalla 2.ttf') format('truetype');
}
@font-face {
font-family: 'MyriadPro Regular';
src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf');
}
@font-face {
font-family: 'interstate';
src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'),
url('../assets/fonts/Interstate-Bold.bmap') format('bmap');
}
.text-left {
text-align: left;
}
.arabic-text {
font-family: "Fedra Arabic", serif;
}
.english-text {
font-family: majalla, serif;
}
/* App */
.App {
max-width: 960px;
margin: 0 auto;
}

View File

@ -0,0 +1,25 @@
@import "variables";
@import "globals";
/* header */
header {
padding-top: 1em;
}
.site-logo {
max-width: 300px;
text-align: center;
}
.counter-container {
position: absolute;
display: inline-block;
right: 0;
top: 0;
padding: 2em;
}
.counter {
position: relative;
right: 0;
}

24
src/stylesheets/nav.scss Normal file
View File

@ -0,0 +1,24 @@
@import "variables";
@import "globals";
@import "header";
/* nav */
nav {
margin: 3em;
}
nav ul li {
display: inline-block;
list-style-type: none;
padding: 1em;
border-right: 1px solid black;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: black;
}

View File

@ -0,0 +1,37 @@
@import "variables";
/* section heading*/
.section-title {
padding: 1em;
margin-bottom: 1em;
}
.section-title::after{
width: 100%;
}
.section-heading{
padding-top: 1em;
}
/* view all elements */
.view-all-parents {
color: white;
background: black;
padding: 1em;
position: relative;
top: 1em;
}
.view-all-parents,
.view-all-items {
text-decoration: none;
}
.view-all-items {
color: black;
text-decoration: none;
padding: 1em;
border: 1px solid black;
position: relative;
top: 1em;
}

View File

@ -0,0 +1,40 @@
@import "variables";
@import "globals";
@import "header";
/* search */
.search-button {
background: white;
bottom: -18px;
position: relative;
}
.search-button img {
max-width: 50px;
}
.search-box {
padding: 1em;
width: 50%;
background: $light-gray-color;
}
.search-box::placeholder {
color: black;
text-align: center;
font-size: 1.5em;
color: gray;
}
@media screen and (max-width: 700px) {
.search-box::placeholder {
font-size: 1em;
}
}
@media screen and (max-width: 400px) {
.search-box::placeholder {
font-size: .75em;
}
}

View File

@ -1,206 +1,8 @@
@import "variables"; @import "variables";
/* globals */ @import "globals";
* { @import "header";
box-sizing: border-box; @import "nav";
margin: 0px; @import "search";
border: 0px; @import "random-item";
} @import "video-item";
@import "footer";
/* fonts */
@font-face {
font-family: 'Fedra Arabic';
src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype');
}
@font-face {
font-family: 'bebas';
src: url('../assets/fonts/BEBAS___.ttf') format('truetype');
}
@font-face {
font-family: 'majalla';
src: url('../assets/fonts/majalla 2.ttf') format('truetype');
}
@font-face {
font-family: 'MyriadPro Regular';
src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf');
}
@font-face {
font-family: 'interstate';
src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'),
url('../assets/fonts/Interstate-Bold.bmap') format('bmap');
}
.text-left {
text-align: left;
}
.arabic-text {
font-family: "Fedra Arabic", serif;
}
.english-text {
font-family: majalla, serif;
}
/* variables */
/* App */
.App {
max-width: 960px;
margin: 0 auto;
}
/* header */
header {
padding-top: 1em;
}
.site-logo {
max-width: 300px;
text-align: center;
}
.counter-container {
position: absolute;
display: inline-block;
right: 0;
top: 0;
padding: 2em;
}
.counter {
position: relative;
right: 0;
}
/* search */
.search-button {
background: white;
bottom: -18px;
position: relative;
}
.search-button img {
max-width: 50px;
}
.search-box {
padding: 1em;
width: 50%;
background: $light-gray-color;
}
.search-box::placeholder {
color: black;
text-align: center;
font-size: 1.5em;
color: gray;
}
@media screen and (max-width: 700px) {
.search-box::placeholder {
font-size: 1em;
}
}
@media screen and (max-width: 400px) {
.search-box::placeholder {
font-size: .75em;
}
}
/* Video item*/
.video-item {
background: #f6f6f6;
min-height: 400px;
padding: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
.video-thumbnail {
transition: all .4s ease-in-out;
}
.video-thumbnail:hover {
transform: scale(1.1);
}
.video-thumbnail-container {
position: relative;
overflow: hidden;
}
/* section heading*/
.section-title {
padding: 1em;
margin-bottom: 1em;
}
.section-title::after{
width: 100%;
}
.section-heading{
padding-top: 1em;
}
/* footer */
footer {
background: $light-gray-color;
position: absolute;
width: 100%;
left: 0;
margin-top: 1em;
padding: 1em;
font-weight: bold;
}
/* nav */
nav {
margin: 3em;
}
nav ul li {
display: inline-block;
list-style-type: none;
padding: 1em;
border-right: 1px solid black;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: black;
}
/* view all elements*/
.view-all-parents {
color: white;
background: black;
padding: 1em;
position: relative;
top: 1em;
}
.view-all-parents,
.view-all-items {
text-decoration: none;
}
.view-all-items {
color: black;
text-decoration: none;
padding: 1em;
border: 1px solid black;
position: relative;
top: 1em;
}

View File

@ -0,0 +1,30 @@
@import "variables";
@import "globals";
@import "header";
/* Video item*/
.video-item {
background: #f6f6f6;
min-height: 400px;
padding: 1em;
}
a {
text-decoration: none;
font-size: 14px;
color: black;
}
.video-thumbnail {
transition: all .4s ease-in-out;
}
.video-thumbnail:hover {
transform: scale(1.1);
}
.video-thumbnail-container {
position: relative;
overflow: hidden;
}

View File

@ -0,0 +1 @@
@import "variables";