scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Responsive design and embedded fonts

Browse source
This commit is contained in:
Ben Grant 2021-03-02 22:47:29 +11:00
parent 89fd659f5c
commit b6b0a48d75
5 changed files with 35 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
crabfit-frontend/public/fonts/molot.otf Normal file
View file

Binary file not shown.

BIN
crabfit-frontend/public/fonts/samuraibob.ttf Normal file
View file

Binary file not shown.

12
crabfit-frontend/public/index.css
View file

@ -3,3 +3,15 @@
src: url('fonts/karla-variable.ttf') format('truetype'); src: url('fonts/karla-variable.ttf') format('truetype');
font-weight: 1 999; font-weight: 1 999;
} }
@font-face {
font-family: 'Samurai Bob';
src: url('fonts/samuraibob.ttf') format('truetype');
font-weight: 400;
}
@font-face {
font-family: 'Molot';
src: url('fonts/molot.otf') format('opentype');
font-weight: 400;
}

32
crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts
View file

@ -33,21 +33,35 @@ export const CalendarDays = styled.div`
grid-gap: 2px; grid-gap: 2px;
`; `;
export const Day = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 3px 0;
font-weight: bold;
user-select: none;
opacity: .7;
@media (max-width: 350px) {
font-size: 12px;
}
`;
export const CalendarBody = styled.div` export const CalendarBody = styled.div`
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
grid-gap: 2px; grid-gap: 2px;
& div:first-child { & div:first-of-type {
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
& div:nth-child(7) { & div:nth-of-type(7) {
border-top-right-radius: 3px; border-top-right-radius: 3px;
} }
& div:nth-last-child(7) { & div:nth-last-of-type(7) {
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
& div:last-child { & div:last-of-type {
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
} }
`; `;
@ -81,13 +95,3 @@ export const Date = styled.div`
color: ${props.isToday ? props.theme.primaryDark : (props.otherMonth ? props.theme.primaryLight : 'inherit')}; color: ${props.isToday ? props.theme.primaryDark : (props.otherMonth ? props.theme.primaryLight : 'inherit')};
`} `}
`; `;
export const Day = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
font-weight: bold;
user-select: none;
opacity: .7;
`;

6
crabfit-frontend/src/pages/Home/homeStyle.ts
View file

@ -14,7 +14,7 @@ export const TitleSmall = styled.span`
margin: 0; margin: 0;
font-size: 3rem; font-size: 3rem;
text-align: center; text-align: center;
font-family: 'CF Samurai Bob'; font-family: 'Samurai Bob';
font-weight: 400; font-weight: 400;
color: ${props => props.theme.primaryDark}; color: ${props => props.theme.primaryDark};
line-height: 1em; line-height: 1em;
@ -29,6 +29,10 @@ export const TitleLarge = styled.h1`
font-weight: 400; font-weight: 400;
text-shadow: 0 4px 0 ${props => props.theme.primaryDark}; text-shadow: 0 4px 0 ${props => props.theme.primaryDark};
line-height: 1em; line-height: 1em;
@media (max-width: 350px) {
font-size: 3.5rem;
}
`; `;
export const Logo = styled.img` export const Logo = styled.img`