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. * 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 ( return (
<section className="about bg-secondary" id="about"> <section className="about bg-secondary" id="about">
<div className="col-md-10 mx-md-auto"> <div className="col-md-10 mx-md-auto">
@ -32,28 +60,28 @@ function AboutSection() {
</h2> </h2>
<p className="about-text"> <p className="about-text">
<span> <span>
<span id="ab_lang2"> <span id="ab_lang2" style={{fontSize}}>
<FormattedMessage id="home.about.about1_description1" /> <FormattedMessage id="home.about.about1_description1" />
</span> </span>
</span> </span>
<br /> <br />
<span> <span>
<span id="ab_lang3"> <span id="ab_lang3" style={{fontSize}}>
<FormattedMessage id="home.about.about1_description2" /> <FormattedMessage id="home.about.about1_description2" />
</span> </span>
</span> </span>
<br /> <br />
<span> <span>
<span id="ab_lang4"> <span id="ab_lang4" style={{fontSize}}>
<FormattedMessage id="home.about.about1_description3" /> <FormattedMessage id="home.about.about1_description3" />
</span> </span>
</span> </span>
<br /> <br />
<span> <span>
<span id="ab_lang5"> <span id="ab_lang5" style={{fontSize}}>
<FormattedMessage id="home.about.about1_description4" /> <FormattedMessage id="home.about.about1_description4" />
</span> </span>
</span> </span>
@ -79,19 +107,19 @@ function AboutSection() {
</h2> </h2>
<p className="about-text"> <p className="about-text">
<span> <span>
<span id="ab_lang7"> <span id="ab_lang7" style={{fontSize}}>
<FormattedMessage id="home.about.about2_description1" /> <FormattedMessage id="home.about.about2_description1" />
</span> </span>
</span> </span>
<br /> <br />
<span> <span>
<span id="ab_lang8"> <span id="ab_lang8" style={{fontSize}}>
<FormattedMessage id="home.about.about2_description2" /> <FormattedMessage id="home.about.about2_description2" />
</span> </span>
</span> </span>
<br /> <br />
<span> <span>
<span id="ab_lang9"> <span id="ab_lang9" style={{fontSize}}>
<FormattedMessage id="home.about.about2_description3" /> <FormattedMessage id="home.about.about2_description3" />
</span> </span>
</span> </span>
@ -118,28 +146,28 @@ function AboutSection() {
</h2> </h2>
<p className="about-text"> <p className="about-text">
<span> <span>
<span id="ab_lang11"> <span id="ab_lang11" style={{fontSize}}>
<FormattedMessage id="home.about.about3_description1" /> <FormattedMessage id="home.about.about3_description1" />
</span> </span>
</span> </span>
<br /> <br />
<span> <span>
<span id="ab_lang12"> <span id="ab_lang12" style={{fontSize}}>
<FormattedMessage id="home.about.about3_description2" /> <FormattedMessage id="home.about.about3_description2" />
</span> </span>
</span> </span>
<br /> <br />
<span> <span>
<span id="ab_lang13"> <span id="ab_lang13" style={{fontSize}}>
<FormattedMessage id="home.about.about3_description3" /> <FormattedMessage id="home.about.about3_description3" />
</span> </span>
</span> </span>
<br /> <br />
<span> <span>
<span id="ab_lang14"> <span id="ab_lang14" style={{fontSize}}>
<FormattedHTMLMessage id="home.about.about3_description4" /> <FormattedHTMLMessage id="home.about.about3_description4" />
</span> </span>
</span> </span>
@ -165,13 +193,13 @@ function AboutSection() {
</h2> </h2>
<p className="about-text"> <p className="about-text">
<span> <span>
<span id="ab_lang16"> <span id="ab_lang16" style={{fontSize}}>
<FormattedHTMLMessage id="home.about.about4_description1" /> <FormattedHTMLMessage id="home.about.about4_description1" />
</span> </span>
</span> </span>
<br /> <br />
<span> <span>
<span id="ab_lang17"> <span id="ab_lang17" style={{fontSize}}>
<FormattedMessage id="home.about.about4_description2" /> <FormattedMessage id="home.about.about4_description2" />
</span> </span>
</span> </span>
@ -197,21 +225,21 @@ function AboutSection() {
</h2> </h2>
<p className="about-text"> <p className="about-text">
<span> <span>
<span id="ab_lang19"> <span id="ab_lang19" style={{fontSize}}>
<FormattedMessage id="home.about.about5_description1" /> <FormattedMessage id="home.about.about5_description1" />
</span> </span>
</span> </span>
<br /> <br />
<span> <span>
<span id="ab_lang20"> <span id="ab_lang20" style={{fontSize}}>
<FormattedMessage id="home.about.about5_description2" /> <FormattedMessage id="home.about.about5_description2" />
</span> </span>
</span> </span>
<br /> <br />
<span> <span>
<span id="ab_lang21"> <span id="ab_lang21" style={{fontSize}}>
<FormattedMessage id="home.about.about5_description3" /> <FormattedMessage id="home.about.about5_description3" />
</span> </span>
</span> </span>
@ -222,6 +250,7 @@ function AboutSection() {
</div> </div>
</section> </section>
); );
}
} }
export { AboutSection }; export { AboutSection };