hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update hero styles

Browse Source
This commit is contained in:
Hazem Krimi
2021-03-22 01:31:22 +01:00
parent 3440fa5c59
commit 17e830c6b4
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Hero.tsx
+15 -4
View File
@@ -1,7 +1,6 @@
import { FC, useContext } from 'react'; import { FC, useContext } from 'react';
import { DarkModeContext } from '../components/DarkMode'; import { DarkModeContext } from '../components/DarkMode';
import styled from 'styled-components'; import styled from 'styled-components';
import Image from 'next/image';
import Typing from 'react-typing-animation'; import Typing from 'react-typing-animation';
const Wrapper = styled.div` const Wrapper = styled.div`
@@ -23,11 +22,23 @@ const Wrapper = styled.div`
h2 { h2 {
font-size: 1.5rem; font-size: 1.5rem;
@media (min-width: 1440px) {
font-size: 2rem;
}
@media (min-width: 2560px) {
font-size: 3.5rem;
}
} }
.small { .small {
font-size: 1rem; font-size: 1rem;
font-weight: normal; font-weight: normal;
@media (min-width: 1440px) {
font-size: 1.5rem;
}
} }
.green { .green {
@@ -59,11 +70,11 @@ const Hero: FC = () => {
</h2> </h2>
</Typing> </Typing>
<div className='illustration'> <div className='illustration'>
<Image <img
src={dark ? '/light-illustration.svg' : '/dark-illustration.svg'} src={dark ? '/light-illustration.svg' : '/dark-illustration.svg'}
width='auto' width='100%'
height='auto' height='auto'
layout='responsive' alt='Illustration'
/> />
</div> </div>
</Wrapper> </Wrapper>