agorise/palmpay.io-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Dynamic About font

Browse source
This commit is contained in:
Letícia Camara 2018-10-05 19:27:05 -03:00
parent 44719fb040
commit 926fe33bea
1 changed files with 229 additions and 200 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/components/sections/AboutSection.js
View file

@ -11,7 +11,35 @@ import AboutImage5 from '../../assets/img/about/ab5.png';
/**
* The about section of the home page.
*/
function AboutSection() {
class AboutSection extends React.Component {
constructor(props) {
super(props);
this.state = {
width: 0,
height: 0
};
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener('resize', this.updateWindowDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateWindowDimensions);
}
updateWindowDimensions() {
this.setState({ width: window.innerWidth, height: window.innerHeight });
}
render() {
const fontSize = (this.state.width > 1000) ? 16 * (1 + (this.state.width/5000)): 16;
return (
<section className="about bg-secondary" id="about">
<div className="col-md-10 mx-md-auto">
@ -32,28 +60,28 @@ function AboutSection() {
</h2>
<p className="about-text">
<span>
<span id="ab_lang2">
<span id="ab_lang2" style={{fontSize}}>
<FormattedMessage id="home.about.about1_description1" />
</span>
</span>
<br />
<span>
<span id="ab_lang3">
<span id="ab_lang3" style={{fontSize}}>
<FormattedMessage id="home.about.about1_description2" />
</span>
</span>
<br />
<span>
<span id="ab_lang4">
<span id="ab_lang4" style={{fontSize}}>
<FormattedMessage id="home.about.about1_description3" />
</span>
</span>
<br />
<span>
<span id="ab_lang5">
<span id="ab_lang5" style={{fontSize}}>
<FormattedMessage id="home.about.about1_description4" />
</span>
</span>
@ -79,19 +107,19 @@ function AboutSection() {
</h2>
<p className="about-text">
<span>
<span id="ab_lang7">
<span id="ab_lang7" style={{fontSize}}>
<FormattedMessage id="home.about.about2_description1" />
</span>
</span>
<br />
<span>
<span id="ab_lang8">
<span id="ab_lang8" style={{fontSize}}>
<FormattedMessage id="home.about.about2_description2" />
</span>
</span>
<br />
<span>
<span id="ab_lang9">
<span id="ab_lang9" style={{fontSize}}>
<FormattedMessage id="home.about.about2_description3" />
</span>
</span>
@ -118,28 +146,28 @@ function AboutSection() {
</h2>
<p className="about-text">
<span>
<span id="ab_lang11">
<span id="ab_lang11" style={{fontSize}}>
<FormattedMessage id="home.about.about3_description1" />
</span>
</span>
<br />
<span>
<span id="ab_lang12">
<span id="ab_lang12" style={{fontSize}}>
<FormattedMessage id="home.about.about3_description2" />
</span>
</span>
<br />
<span>
<span id="ab_lang13">
<span id="ab_lang13" style={{fontSize}}>
<FormattedMessage id="home.about.about3_description3" />
</span>
</span>
<br />
<span>
<span id="ab_lang14">
<span id="ab_lang14" style={{fontSize}}>
<FormattedHTMLMessage id="home.about.about3_description4" />
</span>
</span>
@ -165,13 +193,13 @@ function AboutSection() {
</h2>
<p className="about-text">
<span>
<span id="ab_lang16">
<span id="ab_lang16" style={{fontSize}}>
<FormattedHTMLMessage id="home.about.about4_description1" />
</span>
</span>
<br />
<span>
<span id="ab_lang17">
<span id="ab_lang17" style={{fontSize}}>
<FormattedMessage id="home.about.about4_description2" />
</span>
</span>
@ -197,21 +225,21 @@ function AboutSection() {
</h2>
<p className="about-text">
<span>
<span id="ab_lang19">
<span id="ab_lang19" style={{fontSize}}>
<FormattedMessage id="home.about.about5_description1" />
</span>
</span>
<br />
<span>
<span id="ab_lang20">
<span id="ab_lang20" style={{fontSize}}>
<FormattedMessage id="home.about.about5_description2" />
</span>
</span>
<br />
<span>
<span id="ab_lang21">
<span id="ab_lang21" style={{fontSize}}>
<FormattedMessage id="home.about.about5_description3" />
</span>
</span>
@ -222,6 +250,7 @@ function AboutSection() {
</div>
</section>
);
}
}
export { AboutSection };