Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-07 16:06:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

ui: tweak header, make it much smaller

Browse Source
This commit is contained in:
Jean-Philippe Sirois
2020-07-24 13:28:31 -04:00
parent 1b09b1651a
commit c08e8446b5
2 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HeaderBarebone/index.tsx
+1
View File
@@ -26,6 +26,7 @@ export const HeaderBarebone: React.FC<IHeaderBareboneProps> = (props) => {
<SC.Title <SC.Title
className={cx({ className={cx({
"has-content-above": props.above,
"has-content-below": props.content, "has-content-below": props.content,
})} })}
> >
src/components/HeaderBarebone/styles.tsx
+11 -5
View File
@@ -4,9 +4,11 @@ import { fontFamily } from "../../design/typography"
import { WavesTop, WavesBottom } from "../Waves" import { WavesTop, WavesBottom } from "../Waves"
import Circles from "../../images/circles.svg" import Circles from "../../images/circles.svg"
const height = 250
export const HeaderWrapper = styled.div` export const HeaderWrapper = styled.div`
width: 100%; width: 100%;
height: 391px; height: ${height}px;
padding-top: 67px; padding-top: 67px;
position: relative; position: relative;
@@ -24,12 +26,12 @@ export const HeaderWrapper = styled.div`
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
height: auto; height: auto;
min-height: 391px; min-height: ${height}px;
} }
` `
export const BackgroundWrapper = styled.div` export const BackgroundWrapper = styled.div`
height: 391px; height: ${height}px;
padding-top: 67px; padding-top: 67px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@@ -108,9 +110,13 @@ export const Title = styled.h1`
line-height: 41px; line-height: 41px;
letter-spacing: -1.75px; letter-spacing: -1.75px;
margin-top: 0; margin-top: 0;
margin: 0; margin-bottom: 0;
&.has-content-above {
margin-top: 8px;
}
&.has-content-below { &.has-content-below {
margin-bottom: 16px; margin-bottom: 8px;
} }
` `