refactor the project to use scss
This commit is contained in:
Ahmed-Ayman
parent
0b51135517
commit
45b435b201
|
|
@ -20,12 +20,12 @@ class RandomTopic extends React.Component {
|
|||
{this.props.videos.map(video =>
|
||||
<VideoItem id={video.id} key={video.id} title={video.title }/>
|
||||
)}
|
||||
<Link to="/topics">
|
||||
<span className="view-all-parents">See All Topics</span>
|
||||
</Link>
|
||||
<Link to="/topics">
|
||||
<span className="view-all-items"> See All videos of {this.props.topicName} ({this.props.topicCount})</span>
|
||||
</Link>
|
||||
{/*<Link to="/topics">*/}
|
||||
{/*<span className="view-all-parents">See All Topics</span>*/}
|
||||
{/*</Link>*/}
|
||||
{/*<Link to="/topics">*/}
|
||||
{/*<span className="view-all-items"> See All videos of {this.props.topicName} ({this.props.topicCount})</span>*/}
|
||||
{/*</Link>*/}
|
||||
</Grid>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
11
src/stylesheets/footer.scss
Normal file
11
src/stylesheets/footer.scss
Normal 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;
|
||||
}
|
||||
52
src/stylesheets/globals.scss
Normal file
52
src/stylesheets/globals.scss
Normal 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;
|
||||
}
|
||||
25
src/stylesheets/header.scss
Normal file
25
src/stylesheets/header.scss
Normal 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
24
src/stylesheets/nav.scss
Normal 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;
|
||||
}
|
||||
37
src/stylesheets/random-item.scss
Normal file
37
src/stylesheets/random-item.scss
Normal 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;
|
||||
}
|
||||
40
src/stylesheets/search.scss
Normal file
40
src/stylesheets/search.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,206 +1,8 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@import "globals";
|
||||
@import "header";
|
||||
@import "nav";
|
||||
@import "search";
|
||||
@import "random-item";
|
||||
@import "video-item";
|
||||
@import "footer";
|
||||
30
src/stylesheets/video-item.scss
Normal file
30
src/stylesheets/video-item.scss
Normal 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;
|
||||
}
|
||||
|
||||
1
src/stylesheets/video-player.scss
Normal file
1
src/stylesheets/video-player.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "variables";
|
||||
Loading…
Reference in New Issue
Block a user