858/frontend
1
0
Fork 0
Code Issues 11 Pull Requests Releases Wiki Activity

add title to the topics page, style the video items and the links, add about page.

Browse Source
This commit is contained in:
Ahmed Ayman 2020-01-15 14:32:33 +02:00
parent c2f7b02fd5
commit 41a6213443
16 changed files with 128 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 32 KiB

5
src/App.js
View File

@ -5,6 +5,7 @@ import './App.css';
import 'font-awesome/css/font-awesome.min.css'; import 'font-awesome/css/font-awesome.min.css';
import { Route, Switch } from 'react-router-dom'; import { Route, Switch } from 'react-router-dom';
import Home from './containers/Home'; import Home from './containers/Home';
import About from './containers/About';
import TopicsListContainer from './containers/TopicsListContainer'; import TopicsListContainer from './containers/TopicsListContainer';
import store from './store/configureStore'; import store from './store/configureStore';
import history from './history'; import history from './history';
@ -25,11 +26,13 @@ class App extends Component {
<Search/> <Search/>
<Switch> <Switch>
<Route exact={true} path="/" component={Home}/> <Route exact={true} path="/" component={Home}/>
<Route exact={true} path="/about" component={About}/>
<Route path="/topics" component={TopicsListContainer}/> <Route path="/topics" component={TopicsListContainer}/>
<Route path="/results/:categoryKey/:searchValue" component={Results}/> <Route path="/results/:categoryKey/:searchValue" component={Results}/>
<Route path="/videos/:videoId" component={Video}/> <Route path="/videos/:videoId" component={Video}/>
</Switch> </Switch>
<Nav/> <Nav />
<Footer/> <Footer/>
</div> </div>
</ConnectedRouter> </ConnectedRouter>

10
src/components/Nav.js
View File

@ -3,10 +3,10 @@ import React from 'react';
class Nav extends React.Component { class Nav extends React.Component {
render() { render() {
return ( return (
<nav> <nav className={"nav-footer"}>
<ul> <ul>
<li> <li>
<a href=""> <a href="/contact">
<span className="arabic-text">اتصل بنا</span> <span className="arabic-text">اتصل بنا</span>
<br/> <br/>
<span className="english-text"> contact us</span> <span className="english-text"> contact us</span>
@ -20,21 +20,21 @@ class Nav extends React.Component {
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="/">
<span className="arabic-text">الرئيسية</span> <span className="arabic-text">الرئيسية</span>
<br/> <br/>
<span className="english-text"> main</span> <span className="english-text"> main</span>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="https://858.ma/">
<span className="arabic-text">الأرشيف</span> <span className="arabic-text">الأرشيف</span>
<br/> <br/>
<span className="english-text"> the archive</span> <span className="english-text"> the archive</span>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="/about">
<span className="arabic-text">ماهذا الشيء</span> <span className="arabic-text">ماهذا الشيء</span>
<br/> <br/>
<span className="english-text"> what is this</span> <span className="english-text"> what is this</span>

32
src/components/RandomDate.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import VideoItem from "./VideoItem"; import VideoItem from "./VideoItem";
import RandomItemTitle from "./SectionHeading"; import RandomItemTitle from "./SectionHeading";
import {Link} from 'react-router-dom'; import { Link } from 'react-router-dom';
class RandomDate extends React.Component { class RandomDate extends React.Component {
@ -15,10 +15,11 @@ class RandomDate extends React.Component {
return ( return (
<section className="random-item-container"> <section className="random-item-container">
<h2 className="section-heading"> <h2 className="section-heading">
<span className="arabic-text random-section-title">من أماكن الارشيف</span>
<br/> <span className="arabic-text random-section-title"> يوم من أيام الارشيف</span>
<br />
<span className="section-title"> <span className="section-title">
<span className='english-text bold-english-text random-section-title'> Dates from the archive <span className='english-text bold-english-text random-section-title'> Dates from the archive
</span> </span>
</span> </span>
</h2> </h2>
@ -28,28 +29,33 @@ class RandomDate extends React.Component {
{/* View all dates button*/} {/* View all dates button*/}
<Link className="view-items-link" to="/dates"> <Link className="view-items-link" to="/dates">
<button className="view-all-items"> <button className="view-all-items">
<span className="english-text"> all dates &nbsp; </span> <span className={"highlighted-text"}>
<span className="arabic-text"> جميع الأماكن </span> <span className="english-text"> all dates &nbsp; </span>
<span className="arabic-text"> جميع الأيام </span>
</span>
</button> </button>
</Link> </Link>
{/* Shuffle button */} {/* Shuffle button */}
<button className="shuffle-button" onClick={this.shuffleDate.bind(this)}> <button className="shuffle-button" onClick={this.shuffleDate.bind(this)}>
<span className="english-text">Shuffle Dates - </span>
<span className="arabic-text"> مكان عشوائي </span> <span className={"highlighted-text"}>
<span className="english-text">Shuffle Dates - </span>
<span className="arabic-text"> مكان عشوائي </span>
</span>
<i className="fa fa-random"></i> <i className="fa fa-random"></i>
</button> </button>
</Grid> </Grid>
<Grid className="random-dates" <Grid className="random-dates"
width={220} width={220}
gap={12}> gap={12}>
{/*{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}/>*/}
{/*)}*/} {/*)}*/}
</Grid> </Grid>
<RandomItemTitle title={this.props.dateName} <RandomItemTitle title={this.props.dateName}
count={this.props.dateCount} count={this.props.dateCount}
src={'/results/date/' + this.props.dateName} src={'/results/date/' + this.props.dateName}
/> />
</section> </section>

8
src/components/RandomPlace.js
View File

@ -33,14 +33,18 @@ class RandomPlace extends React.Component {
{/* View all places button*/} {/* View all places button*/}
<Link className="view-items-link" to="/places"> <Link className="view-items-link" to="/places">
<button className="view-all-items"> <button className="view-all-items">
<span className="english-text"> all places &nbsp; </span> <span className={"highlighted-text"}>
<span className="arabic-text"> جميع الأماكن </span> <span className="english-text"> all places &nbsp; </span>
< span className="arabic-text"> جميع الأماكن </span>
</span>
</button> </button>
</Link> </Link>
{/* Shuffle button */} {/* Shuffle button */}
<button className="shuffle-button" onClick={this.shufflePlace.bind(this)}> <button className="shuffle-button" onClick={this.shufflePlace.bind(this)}>
<span className={"highlighted-text"}>
<span className="english-text">Shuffle Places - </span> <span className="english-text">Shuffle Places - </span>
<span className="arabic-text"> مكان عشوائي </span> <span className="arabic-text"> مكان عشوائي </span>
</span>
<i className="fa fa-random"></i> <i className="fa fa-random"></i>
</button> </button>
</Grid> </Grid>

25
src/components/RandomTopic.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import VideoItem from "./VideoItem"; import VideoItem from "./VideoItem";
import RandomItemTitle from "./SectionHeading"; import RandomItemTitle from "./SectionHeading";
import {Link} from 'react-router-dom'; import { Link } from 'react-router-dom';
// Refactor // Refactor
class RandomTopic extends React.Component { class RandomTopic extends React.Component {
@ -17,10 +17,10 @@ class RandomTopic extends React.Component {
<section className="random-item-container"> <section className="random-item-container">
<h2 className="section-heading"> <h2 className="section-heading">
<span className="arabic-text random-section-title">من مواضيع الارشيف</span> <span className="arabic-text random-section-title">من مواضيع الارشيف</span>
<br/> <br />
{/*<span className="english-text bold-english-text">topics from the Archive </span>*/} {/*<span className="english-text bold-english-text">topics from the Archive </span>*/}
<span className="section-title"> <span className="section-title">
<span className='english-text bold-english-text random-section-title'> topics from the archive <span className='english-text bold-english-text random-section-title'> topics from the archive
</span> </span>
</span> </span>
</h2> </h2>
@ -34,29 +34,32 @@ class RandomTopic extends React.Component {
<button className="view-all-items"> <button className="view-all-items">
<span className="highlighted-text"> <span className="highlighted-text">
<span className="english-text"> all topics &nbsp; </span> <span className="english-text"> all topics &nbsp; </span>
<span className="arabic-text"> جميع المواضيع </span> <span className="arabic-text"> جميع المواضيع </span>
</span> </span>
</button> </button>
</Link> </Link>
{/* Shuffle button */} {/* Shuffle button */}
<button className="shuffle-button" onClick={this.shuffleTopic.bind(this)}> <button className="shuffle-button" onClick={this.shuffleTopic.bind(this)}>
<span className="arabic-text"> موضوع عشوائي </span> <span className="highlighted-text">
<span className="english-text">&nbsp; shuffle topics </span> <span className="arabic-text"> موضوع عشوائي </span>
<span className="english-text">&nbsp; shuffle topics </span>
</span>
&nbsp; &nbsp;
<i className="fa fa-random"></i> <i className="fa fa-random"></i>
</button> </button>
</Grid> </Grid>
<Grid className="random-topics" <Grid className="random-topics"
width={220} width={220}
gap={12}> gap={12}>
{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} />
)} )}
</Grid> </Grid>
<RandomItemTitle title={this.props.topicName} <RandomItemTitle title={this.props.topicName}
count={this.props.topicCount} count={this.props.topicCount}
src={'/results/topic/' + this.props.topicName} src={'/results/topic/' + this.props.topicName}
/> />
</section> </section>

2
src/components/Search.js
View File

@ -14,6 +14,8 @@ class Search extends React.Component {
{/*<span className="arabic-text">بحث في الأرشيف - </span>*/} {/*<span className="arabic-text">بحث في الأرشيف - </span>*/}
{/*</div>*/} {/*</div>*/}
{/*</div>*/} {/*</div>*/}
{/* TODO: apply the font for search the archive */}
<input type="text" className="search-box" name="search-box" placeholder="search the Archive بحث في الأرشيف"/> <input type="text" className="search-box" name="search-box" placeholder="search the Archive بحث في الأرشيف"/>
</form> </form>
) )

23
src/containers/About.js Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
import Grid from 'react-css-grid'
class About extends React.Component {
render() {
return (
<div>
<Grid>
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
<div>
second Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</Grid>
</div>
);
}
}
export default (About);

25
src/containers/Results.js
View File

@ -3,7 +3,7 @@ import Grid from "react-css-grid";
import Loading from "../components/Loading"; import Loading from "../components/Loading";
import VideoItem from "../components/VideoItem"; import VideoItem from "../components/VideoItem";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import {getSearchResults} from "../actions/search"; import { getSearchResults } from "../actions/search";
import connect from "react-redux/es/connect/connect"; import connect from "react-redux/es/connect/connect";
class Results extends React.Component { class Results extends React.Component {
@ -12,24 +12,35 @@ class Results extends React.Component {
// get params from url // get params from url
const categoryKey = this.props.match.params.categoryKey; const categoryKey = this.props.match.params.categoryKey;
const searchValue = this.props.match.params.searchValue; const searchValue = this.props.match.params.searchValue;
//FIXME: first check if current key / value / results is already in state //FIXME: first check if current key / value / results is already in state
this.props.getSearchResults(categoryKey, searchValue); this.props.getSearchResults(categoryKey, searchValue);
} }
render() { render() {
// console.log('results', this.props.searchResults); let title = this.props.match.params.searchValue;
return ( return (
<div> <div>
{/* TODO: add the title with out very own beautiful format!*/}
<h2 className="section-heading">
<span className="section-title">
<span className='english-text bold-english-text random-section-title'>Topic: {title}
</span>
</span>
</h2>
<br />
<Grid className="random-topics" <Grid className="random-topics"
width={220} width={220}
gap={12}> gap={12}>
{this.props.loadingResults && ( {this.props.loadingResults && (
<Loading /> <Loading />
)} )}
{this.props.searchResults && this.props.searchResults.map(video => {this.props.searchResults && this.props.searchResults.map(video =>
<VideoItem id={video.id} key={video.id} title={video.title}/> <VideoItem id={video.id} key={video.id} title={video.title} />
)} )}
</Grid> </Grid>
</div> </div>

7
src/logo.svg
View File

@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

6
src/stylesheets/footer.scss
View File

@ -9,3 +9,9 @@ footer {
padding: 1em; padding: 1em;
font-weight: bold; font-weight: bold;
} }
.nav-footer {
a {
color: gray;
}
}

44
src/stylesheets/globals.scss
View File

@ -8,39 +8,39 @@
/* fonts */ /* fonts */
@font-face { @font-face {
font-family: 'Fedra Arabic'; font-family: "Fedra Arabic";
src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype'); src: url("../assets/fonts/Fedra Arabic Reg_beta.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: 'bebas'; font-family: "bebas";
src: url('../assets/fonts/BEBAS___.ttf') format('truetype'); src: url("../assets/fonts/BEBAS___.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: 'majalla'; font-family: "majalla";
src: url('../assets/fonts/majalla 2.ttf') format('truetype'); src: url("../assets/fonts/majalla 2.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: 'MyriadPro Regular'; font-family: "MyriadPro Regular";
src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf'); src: url("../assets/fonts/MyriadPro-Regular.otf") format("otf");
} }
@font-face { @font-face {
font-family: 'interstate'; font-family: "interstate";
src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'), src: url("../assets/fonts/Interstate-Regular.bmap") format("bmap"),
url('../assets/fonts/Interstate-Bold.bmap') format('bmap'); url("../assets/fonts/Interstate-Bold.bmap") format("bmap");
} }
@font-face { @font-face {
font-family: 'interstate-light'; font-family: "interstate-light";
src: url('../assets/fonts/Interstate_Light.ttf') format('truetype'); src: url("../assets/fonts/Interstate_Light.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: 'interstate-bold'; font-family: "interstate-bold";
src: url('../assets/fonts/Interstate-Bold.ttf') format('truetype'); src: url("../assets/fonts/Interstate-Bold.ttf") format("truetype");
} }
.text-left { .text-left {
@ -60,7 +60,6 @@
.bold-english-text { .bold-english-text {
font-family: interstate-bold, serif; font-family: interstate-bold, serif;
//padding: 0.3em;
} }
/* App */ /* App */
@ -78,11 +77,9 @@ button {
max-width: 300px; max-width: 300px;
justify-self: center; // for the css grid justify-self: center; // for the css grid
cursor: pointer; cursor: pointer;
} }
button.view-all-items:focus{ button:focus {outline:0 !important;}
outline: none;
}
// spans // spans
span { span {
display: inline-block; display: inline-block;
@ -100,10 +97,7 @@ a {
text-decoration: underline; text-decoration: underline;
font-size: 1em; font-size: 1em;
color: black; color: black;
&:hover{ &:hover {
color: gray; color: gray;
} }
} }
//

2
src/stylesheets/header.scss
View File

@ -12,7 +12,7 @@ header {
} }
.counter-container { .counter-container {
width: 10%; width: 18%;
position: absolute; position: absolute;
display: inline-block; display: inline-block;
right: 0; right: 0;

16
src/stylesheets/items-list.scss
View File

@ -1,11 +1,12 @@
@import "variables"; @import "variables";
@import "globals"; @import "globals";
// title // title
.all-items{ .all-items {
.section-heading{ .section-heading {
padding-bottom: 1em; padding-bottom: 1em;
} }
.section-title span:before, .section-title span:after{ .section-title span:before,
.section-title span:after {
width: 530px; width: 530px;
} }
} }
@ -13,12 +14,12 @@
#search-topics { #search-topics {
font-size: 1em; font-size: 1em;
padding: 1em; padding: 1em;
border: .5px solid gray; border: 0.5px solid gray;
height: 30px; height: 30px;
position: relative; position: relative;
top: -3px; top: -3px;
left: 1px; left: 1px;
font-size: .7em; font-size: 0.7em;
} }
.label { .label {
@ -27,9 +28,11 @@
.topic-item { .topic-item {
h3 { h3 {
&:hover{ color: rgb(16, 16, 16);
&:hover {
color: gray; color: gray;
} }
text-align: left; text-align: left;
padding: 1em; padding: 1em;
//font-size: 30px; //font-size: 30px;
@ -38,4 +41,3 @@
border-bottom: 6px solid black; border-bottom: 6px solid black;
margin-bottom: 2em; margin-bottom: 2em;
} }

2
src/stylesheets/search.scss
View File

@ -6,7 +6,7 @@
/* search */ /* search */
.search-button { .search-button {
background: transparent; background: transparent;
bottom: -13px; bottom: 4px;
position: relative; position: relative;
right: -39px; right: -39px;
padding: 0px; padding: 0px;

2
src/stylesheets/video-item.scss
View File

@ -7,6 +7,7 @@
background: $light-gray-color; background: $light-gray-color;
min-height: 300px; min-height: 300px;
padding: 1em; padding: 1em;
color : rgb(16, 16, 16);
} }
.video-thumbnail { .video-thumbnail {
@ -29,7 +30,6 @@
padding-top: 1em; padding-top: 1em;
font-weight: normal; font-weight: normal;
} }
// FIXME:
section.video-item:hover { section.video-item:hover {
outline: 2px solid black; outline: 2px solid black;
} }