Kafetegirako atalaren lehen bertsioa sortzen du (#1)
* feat: backean kafetegia sortzen du * helbidea kentzen du * feat: kafetegirako desktop bista sortzen du * Nabigazioa sortzen du * chore: tsconfig fitxategia sortzen du * refactor: extract component * feat: kolorea ematen dio atal bakoitzari * chore: koloreak sortzen ditu * fix: nabigazioa konpontzen du * feat: mugikor menua sortzen du * fix: tipografia aldatzen du * feat: kafetegiko menua margotzen du * feat: produktu zerrenda erakusten du
This commit is contained in:
Aitor Urrutia
GitHub
4
front/src/@types/typings.d.ts
vendored
Normal file
4
front/src/@types/typings.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
declare module '*.svg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
12
front/src/assets/beganoa.svg
Normal file
12
front/src/assets/beganoa.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg viewBox="0 0 28 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_42_985)">
|
||||
<path d="M26.7981 16.0918C26.2944 17.3092 25.2717 17.9766 23.8349 18.0353C24.5535 15.8314 24.588 13.4616 23.9338 11.2377C23.8912 11.1376 23.8121 11.0574 23.7126 11.0133C23.6131 10.9692 23.5005 10.9645 23.3977 11.0003C23.2949 11.036 23.2095 11.1094 23.1587 11.2057C23.108 11.3019 23.0956 11.4139 23.1243 11.5189C23.456 12.6461 23.5939 13.8215 23.5321 14.995C23.4926 16.0142 23.2988 17.0216 22.9574 17.9828C22.1881 17.8654 21.1684 17.5224 20.5659 16.7469C20.0839 16.1289 19.9479 15.3287 20.1766 14.3523C20.844 11.4417 21.0077 10.2706 19.6266 7.52685C20.6937 7.43984 21.7669 7.58847 22.7702 7.96224C23.7734 8.336 24.6823 8.92575 25.4324 9.68973C26.9618 11.179 27.5983 14.17 26.7981 16.0918Z" fill="white"/>
|
||||
<path d="M26.0287 9.07791C22.7411 5.88612 19.0271 6.74818 18.8727 6.79762C18.8161 6.81015 18.7633 6.83552 18.7182 6.87177C18.7182 6.72655 18.7336 6.57824 18.7336 6.42684C18.7336 2.25866 15.9188 0 10.7093 0H0V23.5846H12.9773C13.345 23.5846 21.876 23.4209 23.5259 18.8912C25.1975 18.9221 26.5014 18.2732 27.2677 17.0744C27.3976 16.8667 27.5103 16.6486 27.6045 16.4224C28.5253 14.173 27.8084 10.8144 26.0287 9.07791ZM6.15802 5.20636H10.0234C11.7413 5.20636 12.6683 5.89539 12.6683 7.20547C12.6683 8.51556 11.7413 9.2015 10.0234 9.2015H6.15802V5.20636ZM10.6444 18.2763H6.15802V14.0185H10.6444C12.2821 14.0185 13.1997 14.8682 13.1997 16.1474C13.1997 17.4266 12.2821 18.2763 10.6444 18.2763ZM18.6347 7.48356C20.1364 10.3077 20.019 11.2192 19.3423 14.1699C19.2719 14.4669 19.2316 14.7702 19.2218 15.0753C19.2218 15.1772 19.2218 15.2792 19.2218 15.3842C19.1971 15.2823 19.1693 15.1803 19.1384 15.0753C18.8823 14.2266 18.4354 13.4479 17.8318 12.7988C17.2282 12.1497 16.4839 11.6474 15.6561 11.3304C16.4186 10.9665 17.0853 10.4289 17.6025 9.7609C18.1198 9.09285 18.4733 8.31289 18.6347 7.48356ZM16.6171 22.2467C18.4061 21.1344 19.3639 19.3269 19.3979 16.9755C19.3979 16.9446 19.3979 16.9137 19.3979 16.8797C19.3986 16.6733 19.3883 16.467 19.367 16.2618C19.4387 16.513 19.5425 16.754 19.676 16.9786C19.7428 17.086 19.816 17.1891 19.8954 17.2876C20.5786 18.0835 21.5206 18.613 22.5557 18.783C21.6659 20.8069 18.9375 21.774 16.6171 22.2467ZM26.8135 16.1042C26.3099 17.3216 25.2871 17.989 23.8504 18.0477C24.5689 15.8438 24.6034 13.4739 23.9492 11.2501C23.9066 11.1499 23.8275 11.0697 23.728 11.0256C23.6285 10.9815 23.516 10.9769 23.4132 11.0126C23.3103 11.0483 23.2249 11.1217 23.1742 11.218C23.1234 11.3143 23.1111 11.4262 23.1397 11.5312C23.4714 12.6585 23.6094 13.8339 23.5476 15.0073C23.508 16.0266 23.3143 17.0339 22.9728 17.9951C22.2035 17.8777 21.1838 17.5348 20.5813 16.7592C20.0993 16.1412 19.9634 15.341 20.192 14.3646C20.8594 11.454 21.0232 10.2829 19.642 7.53917C20.7091 7.45216 21.7823 7.6008 22.7856 7.97456C23.7889 8.34833 24.6977 8.93807 25.4478 9.70205C26.9618 11.179 27.5983 14.1699 26.7981 16.0918L26.8135 16.1042Z" fill="#191919"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_42_985">
|
||||
<rect width="28" height="23.5846" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
12
front/src/assets/ekologikoa.svg
Normal file
12
front/src/assets/ekologikoa.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg viewBox="0 0 29 25" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_42_921)">
|
||||
<path d="M26.4665 14.2057C25.6058 18.3118 21.3025 22.5214 17.2613 23.2162C14.7057 23.6537 12.5204 22.656 10.9121 20.3313C12.8826 19.8357 14.775 19.0696 16.5352 18.0546C20.2111 15.939 22.2281 13.4484 22.305 13.345C22.4446 13.1706 22.5093 12.9479 22.4847 12.7259C22.4601 12.5038 22.3484 12.3006 22.174 12.161C21.9996 12.0214 21.7769 11.9567 21.5548 11.9813C21.3328 12.0059 21.1296 12.1177 20.99 12.292C19.4596 14.0253 17.648 15.4883 15.6313 16.6194C13.8945 17.6255 12.0158 18.3639 10.0586 18.8095C9.4456 17.4079 8.94074 15.35 9.57782 13.5373C10.0947 12.0949 11.2967 11.0251 13.1551 10.3688C18.7109 8.41426 20.8313 7.46465 23.9446 2.27905C25.2428 3.96431 27.7406 8.13298 26.4665 14.2057Z" fill="white"/>
|
||||
<path d="M23.3918 0.240496C23.2996 0.152277 23.1886 0.0861154 23.0671 0.0469906C22.9457 0.00786583 22.8169 -0.0032034 22.6906 0.0146158C22.5642 0.032435 22.4435 0.0786785 22.3376 0.149867C22.2317 0.221055 22.1434 0.315334 22.0791 0.42561C18.8962 6.03192 17.271 6.7868 11.607 8.7918C9.25099 9.6164 7.70277 11.0348 7.00799 12.9821C6.27474 15.04 6.64978 17.3287 7.36619 19.1245C4.9175 19.4318 2.43325 19.2884 0.0361624 18.7014C-0.0724331 18.6728 -0.185658 18.6662 -0.296838 18.682C-0.408019 18.6979 -0.514905 18.7358 -0.611198 18.7936C-0.707492 18.8514 -0.791243 18.9279 -0.857516 19.0185C-0.923789 19.1092 -0.971243 19.2122 -0.99708 19.3215C-1.02292 19.4308 -1.02662 19.5441 -1.00796 19.6549C-0.989301 19.7656 -0.948664 19.8715 -0.888443 19.9663C-0.828222 20.0611 -0.749634 20.1428 -0.657314 20.2068C-0.564993 20.2707 -0.460806 20.3155 -0.350894 20.3386C1.34212 20.745 3.07678 20.9523 4.81787 20.9564C5.92902 20.9567 7.03842 20.8683 8.1355 20.692C9.85201 23.5072 12.2873 25.0025 15.1073 25.0025C15.5908 25.0021 16.0734 24.9603 16.5498 24.8775C21.2738 24.0673 26.1132 19.3481 27.1277 14.552C28.9668 5.72179 23.6202 0.454459 23.3918 0.240496ZM25.4665 14.2106C24.6058 18.3119 20.3025 22.5215 16.2613 23.2163C13.7057 23.6538 11.5204 22.6561 9.91211 20.3314C11.8826 19.8358 13.775 19.0697 15.5352 18.0547C19.2111 15.9391 21.2281 13.4485 21.305 13.3451C21.4447 13.1707 21.5093 12.948 21.4847 12.726C21.4602 12.5039 21.3484 12.3007 21.174 12.1611C20.9996 12.0215 20.7769 11.9568 20.5549 11.9814C20.3328 12.006 20.1296 12.1178 19.99 12.2921C18.4596 14.0254 16.648 15.4884 14.6313 16.6195C12.8945 17.6256 11.0158 18.364 9.05867 18.8096C8.44563 17.408 7.94077 15.3501 8.57785 13.5374C9.09473 12.095 10.2968 11.0252 12.1551 10.3689C17.7109 8.41436 19.8313 7.46475 22.9446 2.27915C24.2428 3.96441 26.7407 8.13308 25.4665 14.2058V14.2106Z" fill="#191919"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_42_921">
|
||||
<rect width="28.5027" height="25" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -6,16 +6,20 @@ import { size } from '../ui/theme/size';
|
||||
export const Container = styled.div`
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: ${rem(size.tiny)};
|
||||
padding-right: ${rem(size.tiny)};
|
||||
padding-left: ${rem(size.base)};
|
||||
padding-right: ${rem(size.base)};
|
||||
|
||||
width: 100%;
|
||||
|
||||
${media.tablet`
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 744px;
|
||||
`}
|
||||
|
||||
${media.desktop`
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 1014px;
|
||||
`}
|
||||
`;
|
||||
|
||||
45
front/src/components/Gainburua/DesktopNabigazioa.tsx
Normal file
45
front/src/components/Gainburua/DesktopNabigazioa.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import styled from 'styled-components';
|
||||
import { rem } from 'polished';
|
||||
import { size } from '../../ui/theme';
|
||||
|
||||
export const DesktopNabigazioa: React.FC<{
|
||||
atala: 'hasiera' | 'kafetegia';
|
||||
}> = ({ atala }) => {
|
||||
return (
|
||||
<Nabigazioa>
|
||||
<EstekaZerrenda>
|
||||
<Esteka aktiboa={atala === 'hasiera'}>
|
||||
<Link to="/">Laba gara</Link>
|
||||
</Esteka>
|
||||
<Esteka aktiboa={atala === 'kafetegia'}>
|
||||
<Link to="/kafetegia">Dastatu Laba</Link>
|
||||
</Esteka>
|
||||
</EstekaZerrenda>
|
||||
</Nabigazioa>
|
||||
);
|
||||
};
|
||||
|
||||
export const Nabigazioa = styled.nav`
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: ${rem(size.tiny)};
|
||||
left: 0;
|
||||
`;
|
||||
|
||||
export const EstekaZerrenda = styled.ul`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style-type: none;
|
||||
`;
|
||||
|
||||
export const Esteka = styled.li<{ aktiboa?: boolean }>`
|
||||
padding: ${rem(size.small)};
|
||||
|
||||
${({ aktiboa }) =>
|
||||
aktiboa &&
|
||||
`
|
||||
border-bottom: 3px solid var(--color);
|
||||
`}
|
||||
`;
|
||||
168
front/src/components/Gainburua/Gainburua.tsx
Normal file
168
front/src/components/Gainburua/Gainburua.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
import { rem } from 'polished';
|
||||
import styled from 'styled-components';
|
||||
import { Container } from '../../components/Container';
|
||||
import { breakpoints, font, media, size } from '../../ui/theme';
|
||||
import LabaLogo from '../../assets/logo.svg';
|
||||
|
||||
import { colors } from '../../ui/theme/colors';
|
||||
import { DesktopNabigazioa } from './DesktopNabigazioa';
|
||||
import { MugikorNabigazioa } from './MugikorNabigazioa';
|
||||
import MediaQuery from 'react-responsive';
|
||||
import { KontaktuDatuak } from './KontaktuDatuak';
|
||||
|
||||
interface Props {
|
||||
izenburua: string;
|
||||
deskribapena: string;
|
||||
atala: 'hasiera' | 'kafetegia';
|
||||
}
|
||||
|
||||
export const Gainburua: React.FC<Props> = ({
|
||||
izenburua,
|
||||
deskribapena,
|
||||
atala,
|
||||
}) => {
|
||||
return (
|
||||
<Wrapper atala={atala}>
|
||||
<MediaQuery maxWidth={breakpoints.tablet}>
|
||||
<Container>
|
||||
<MugikorWrapper>
|
||||
<MenuWrapper>
|
||||
<MugikorNabigazioa />
|
||||
</MenuWrapper>
|
||||
<MugikorLogoWrapper>
|
||||
<Link to="/">
|
||||
<LogoWrapper>
|
||||
<Logo title="Laba gara" />
|
||||
</LogoWrapper>
|
||||
</Link>
|
||||
</MugikorLogoWrapper>
|
||||
</MugikorWrapper>
|
||||
</Container>
|
||||
</MediaQuery>
|
||||
|
||||
<MediaQuery minWidth={breakpoints.tablet}>
|
||||
<GainburuWrapper>
|
||||
<Link to="/">
|
||||
<LogoWrapper>
|
||||
<Logo title="Laba gara" />
|
||||
</LogoWrapper>
|
||||
</Link>
|
||||
|
||||
<KontaktuDatuak />
|
||||
</GainburuWrapper>
|
||||
</MediaQuery>
|
||||
|
||||
<Container>
|
||||
<main>
|
||||
<Deskribapena>{deskribapena}</Deskribapena>
|
||||
|
||||
<IzenburuWrapper>
|
||||
<Marra />
|
||||
<Izenburua>{izenburua}</Izenburua>
|
||||
</IzenburuWrapper>
|
||||
</main>
|
||||
|
||||
<MediaQuery minWidth={breakpoints.tablet}>
|
||||
<DesktopNabigazioa atala={atala} />
|
||||
</MediaQuery>
|
||||
</Container>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const MugikorWrapper = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding-top: ${rem(size.base)};
|
||||
|
||||
margin-bottom: ${rem(size.medium)};
|
||||
`;
|
||||
|
||||
const MenuWrapper = styled.div`
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
const MugikorLogoWrapper = styled.div`
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const Wrapper = styled.div<{ atala: 'hasiera' | 'kafetegia' }>`
|
||||
--color: ${({ atala }) =>
|
||||
atala === 'hasiera' ? colors.zuria : colors.beltza};
|
||||
|
||||
background-color: ${({ atala }) =>
|
||||
atala === 'hasiera' ? colors.gorria : colors.horia};
|
||||
color: var(--color);
|
||||
|
||||
padding-bottom: ${rem(size.base)};
|
||||
|
||||
min-height: 100vh;
|
||||
padding-bottom: 0;
|
||||
`;
|
||||
|
||||
const LogoWrapper = styled.div`
|
||||
width: ${rem(size.huge)};
|
||||
`;
|
||||
|
||||
const Logo = styled(LabaLogo)`
|
||||
path {
|
||||
fill: var(--color);
|
||||
}
|
||||
`;
|
||||
|
||||
const GainburuWrapper = styled.header`
|
||||
padding: ${rem(size.tiny)};
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: ${rem(size.base)};
|
||||
|
||||
${media.tablet`
|
||||
padding: ${rem(size.large)};
|
||||
`};
|
||||
`;
|
||||
|
||||
const Deskribapena = styled.p`
|
||||
margin-bottom: ${rem(size.xlarge)};
|
||||
text-align: justify;
|
||||
|
||||
${font.base()};
|
||||
|
||||
${media.tablet`
|
||||
${font.large()};
|
||||
`};
|
||||
`;
|
||||
|
||||
const IzenburuWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const Marra = styled.div`
|
||||
/* altuera erabiliko den letraren berdina da */
|
||||
height: ${rem(41.83)};
|
||||
flex-grow: 1;
|
||||
box-shadow: inset 0px -3px 0px 0px var(--color);
|
||||
margin-right: ${rem(size.tiny)};
|
||||
`;
|
||||
|
||||
const Izenburua = styled.h1`
|
||||
text-align: right;
|
||||
vertical-align: bottom;
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
}
|
||||
|
||||
${font.gargantuan()};
|
||||
`;
|
||||
79
front/src/components/Gainburua/KontaktuDatuak.tsx
Normal file
79
front/src/components/Gainburua/KontaktuDatuak.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import { rem } from 'polished';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { font, size } from '../../ui/theme';
|
||||
import InstagramLogo from '../../assets/instagram.svg';
|
||||
import TwitterLogo from '../../assets/twitter.svg';
|
||||
|
||||
/**
|
||||
* ERREPIKATUA
|
||||
* KontaktuDatuak konponentea MugikorNabigazioan errepikatzen da, honek
|
||||
* logoaren fill-erako kokapenaren araberako CSS aldagaia erabiltzen duelako
|
||||
* TODO: Beste estrategia bat bilatu, abstrakzio bakarra izateko
|
||||
*/
|
||||
|
||||
export const KontaktuDatuak: React.FC = () => {
|
||||
return (
|
||||
<Kontaktua>
|
||||
<Helbidea>
|
||||
<p>Gazteluko plaza 2</p>
|
||||
<p>Iruñea</p>
|
||||
</Helbidea>
|
||||
|
||||
<SareSozialak>
|
||||
<SareSoziala>
|
||||
<a href="https://twitter.com/labasarea/">
|
||||
<Twitter tabIndex="0" role="link" title="Laba Twitterren" />
|
||||
</a>
|
||||
</SareSoziala>
|
||||
|
||||
<SareSoziala>
|
||||
<a href="https://www.instagram.com/labasarea/">
|
||||
<Instagram tabIndex="0" role="link" title="Laba Instagramen" />
|
||||
</a>
|
||||
</SareSoziala>
|
||||
</SareSozialak>
|
||||
</Kontaktua>
|
||||
);
|
||||
};
|
||||
|
||||
export const Kontaktua = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export const SareSoziala = styled.li`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
:not(:last-child) {
|
||||
margin-right: ${rem(size.small)};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Instagram = styled(InstagramLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: var(--color);
|
||||
}
|
||||
`;
|
||||
|
||||
export const Twitter = styled(TwitterLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: var(--color);
|
||||
}
|
||||
`;
|
||||
|
||||
export const SareSozialak = styled.ul`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
`;
|
||||
|
||||
export const Helbidea = styled.address`
|
||||
border-right: 3px solid var(--color);
|
||||
padding-right: ${rem(size.small)};
|
||||
margin-right: ${rem(size.small)};
|
||||
${font.tiny()};
|
||||
`;
|
||||
184
front/src/components/Gainburua/MugikorNabigazioa.tsx
Normal file
184
front/src/components/Gainburua/MugikorNabigazioa.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import { Link } from 'gatsby';
|
||||
import { rem } from 'polished';
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { font, size } from '../../ui/theme';
|
||||
import { colors } from '../../ui/theme/colors';
|
||||
import HamburgerIcon from './assets/hamburguer.svg';
|
||||
import Itxi from './assets/itxi.svg';
|
||||
import InstagramLogo from '../../assets/instagram.svg';
|
||||
import TwitterLogo from '../../assets/twitter.svg';
|
||||
|
||||
export const MugikorNabigazioa: React.FC = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isOpen && (
|
||||
<NabigazioaWrapper>
|
||||
<OpenClose onClick={() => setIsOpen(false)}>
|
||||
<Itxi />
|
||||
</OpenClose>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<Esteka>
|
||||
<Link to="/">Laba gara</Link>
|
||||
</Esteka>
|
||||
<Esteka>
|
||||
<Link to="/kafetegia">Dastatu Laba</Link>
|
||||
</Esteka>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<KontaktuaWrapper>
|
||||
<KontaktuDatuak />
|
||||
</KontaktuaWrapper>
|
||||
</NabigazioaWrapper>
|
||||
)}
|
||||
|
||||
<OpenClose
|
||||
onClick={() => {
|
||||
setIsOpen(true);
|
||||
}}
|
||||
>
|
||||
<Hamburger />
|
||||
</OpenClose>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const KontaktuaWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Esteka = styled.li`
|
||||
color: ${colors.zuria};
|
||||
${font.large()};
|
||||
text-align: right;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: ${rem(size.base)};
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
}
|
||||
`;
|
||||
|
||||
const Hamburger = styled(HamburgerIcon)`
|
||||
path {
|
||||
fill: var(--color);
|
||||
}
|
||||
`;
|
||||
|
||||
const OpenClose = styled.div`
|
||||
cursor: pointer;
|
||||
width: ${rem(size.medium)};
|
||||
margin-bottom: ${rem(size.base)};
|
||||
`;
|
||||
|
||||
const NabigazioaWrapper = styled.div`
|
||||
@keyframes sartu {
|
||||
from {
|
||||
right: -300px;
|
||||
}
|
||||
to {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
animation-name: sartu;
|
||||
animation-duration: 0.25s;
|
||||
|
||||
/* Containerrak sartzen duen padding berdina */
|
||||
padding: ${rem(size.base)};
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
min-width: 300px;
|
||||
background-color: ${colors.beltza};
|
||||
color: ${colors.zuria};
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
/**
|
||||
* ERREPIKATUA
|
||||
* KontaktuDatuak konponentea errepikatzen da, besteak logoaren fill-erako kokapenaren
|
||||
* araberako CSS aldagaia erabiltzen duelako eta hemen testu eta irudi guztiak zuriak izan
|
||||
* behar direlako
|
||||
* TODO: Beste estrategia bat bilatu, abstrakzio bakarra izateko
|
||||
*/
|
||||
const KontaktuDatuak: React.FC = () => {
|
||||
return (
|
||||
<Kontaktua>
|
||||
<Helbidea>
|
||||
<p>Gazteluko plaza 2</p>
|
||||
<p>Iruñea</p>
|
||||
</Helbidea>
|
||||
|
||||
<SareSozialak>
|
||||
<SareSoziala>
|
||||
<a href="https://twitter.com/labasarea/">
|
||||
<Twitter tabIndex="0" role="link" title="Laba Twitterren" />
|
||||
</a>
|
||||
</SareSoziala>
|
||||
|
||||
<SareSoziala>
|
||||
<a href="https://www.instagram.com/labasarea/">
|
||||
<Instagram tabIndex="0" role="link" title="Laba Instagramen" />
|
||||
</a>
|
||||
</SareSoziala>
|
||||
</SareSozialak>
|
||||
</Kontaktua>
|
||||
);
|
||||
};
|
||||
|
||||
export const Kontaktua = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export const SareSoziala = styled.li`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
:not(:last-child) {
|
||||
margin-right: ${rem(size.small)};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Instagram = styled(InstagramLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: ${colors.zuria};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Twitter = styled(TwitterLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: ${colors.zuria};
|
||||
}
|
||||
`;
|
||||
|
||||
export const SareSozialak = styled.ul`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
`;
|
||||
|
||||
export const Helbidea = styled.address`
|
||||
border-right: 3px solid ${colors.zuria};
|
||||
padding-right: ${rem(size.small)};
|
||||
margin-right: ${rem(size.small)};
|
||||
${font.tiny()};
|
||||
`;
|
||||
6
front/src/components/Gainburua/assets/hamburguer.svg
Normal file
6
front/src/components/Gainburua/assets/hamburguer.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg viewBox="0 0 60 43" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M59.46 0H0V6H59.46V0Z" fill="#191919"/>
|
||||
<path d="M59.46 18.16H0V24.16H59.46V18.16Z" fill="#191919"/>
|
||||
<path d="M59.46 36.31H0V42.31H59.46V36.31Z" fill="#191919"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 267 B |
4
front/src/components/Gainburua/assets/itxi.svg
Normal file
4
front/src/components/Gainburua/assets/itxi.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg viewBox="0 0 47 47" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M46.29 4.24L42.05 0L23.14 18.9L4.24 0L0 4.24L18.9 23.14L0 42.05L4.24 46.29L23.14 27.39L42.05 46.29L46.29 42.05L27.39 23.14L46.29 4.24Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 248 B |
1
front/src/components/Gainburua/index.ts
Normal file
1
front/src/components/Gainburua/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { Gainburua } from './Gainburua';
|
||||
@@ -1,15 +1,9 @@
|
||||
import { graphql, PageProps, useStaticQuery } from 'gatsby';
|
||||
import { rem } from 'polished';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Container } from '../components/Container';
|
||||
import { GlobalStyles } from '../ui/GlobalStyles';
|
||||
import { font, media, size } from '../ui/theme';
|
||||
import LabaLogo from '../assets/logo.svg';
|
||||
import InstagramLogo from '../assets/instagram.svg';
|
||||
import TwitterLogo from '../assets/twitter.svg';
|
||||
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { Gainburua } from '../components/Gainburua';
|
||||
|
||||
interface DataProps {
|
||||
strapiHasiera: {
|
||||
@@ -38,7 +32,10 @@ const IndexPage: React.VFC<PageProps> = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet title="Laba gara | Laba" htmlAttributes={{ lang: 'eu' }}>
|
||||
<Helmet
|
||||
title={`${strapiHasiera.data.attributes.izenburua} | Laba`}
|
||||
htmlAttributes={{ lang: 'eu' }}
|
||||
>
|
||||
<meta
|
||||
name="description"
|
||||
content={strapiHasiera.data.attributes.deskribapena}
|
||||
@@ -47,150 +44,13 @@ const IndexPage: React.VFC<PageProps> = () => {
|
||||
|
||||
<GlobalStyles />
|
||||
|
||||
<Gainburua>
|
||||
<LogoWrapper>
|
||||
<Logo title="Laba gara" />
|
||||
</LogoWrapper>
|
||||
|
||||
<Kontaktua>
|
||||
<Helbidea>
|
||||
<p>Gazteluko plaza 2</p>
|
||||
<p>Iruñea</p>
|
||||
</Helbidea>
|
||||
|
||||
<SareSozialak>
|
||||
<SareSoziala>
|
||||
<a href="https://twitter.com/labasarea/">
|
||||
<Twitter tabIndex="0" role="link" title="Laba Twitterren" />
|
||||
</a>
|
||||
</SareSoziala>
|
||||
|
||||
<SareSoziala>
|
||||
<a href="https://www.instagram.com/labasarea/">
|
||||
<Instagram tabIndex="0" role="link" title="Laba Instagramen" />
|
||||
</a>
|
||||
</SareSoziala>
|
||||
</SareSozialak>
|
||||
</Kontaktua>
|
||||
</Gainburua>
|
||||
|
||||
<Container>
|
||||
<main>
|
||||
<Deskribapena>
|
||||
{strapiHasiera.data.attributes.deskribapena}
|
||||
</Deskribapena>
|
||||
|
||||
<IzenburuWrapper>
|
||||
<Marra />
|
||||
<Izenburua>{strapiHasiera.data.attributes.izenburua}</Izenburua>
|
||||
</IzenburuWrapper>
|
||||
</main>
|
||||
</Container>
|
||||
<Gainburua
|
||||
atala="hasiera"
|
||||
izenburua={strapiHasiera.data.attributes.izenburua}
|
||||
deskribapena={strapiHasiera.data.attributes.deskribapena}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const LogoWrapper = styled.div`
|
||||
width: ${rem(size.large)};
|
||||
|
||||
${media.tablet`
|
||||
width: ${rem(size.huge)};
|
||||
`}
|
||||
`;
|
||||
|
||||
const Kontaktua = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const SareSoziala = styled.li`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
:not(:last-child) {
|
||||
margin-right: ${rem(size.small)};
|
||||
}
|
||||
`;
|
||||
|
||||
const Instagram = styled(InstagramLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: white;
|
||||
}
|
||||
`;
|
||||
|
||||
const Twitter = styled(TwitterLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: white;
|
||||
}
|
||||
`;
|
||||
|
||||
const Logo = styled(LabaLogo)`
|
||||
path {
|
||||
fill: white;
|
||||
}
|
||||
`;
|
||||
|
||||
const SareSozialak = styled.ul`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
`;
|
||||
|
||||
const Helbidea = styled.address`
|
||||
border-right: 3px solid white;
|
||||
padding-right: ${rem(size.small)};
|
||||
margin-right: ${rem(size.small)};
|
||||
${font.tiny()};
|
||||
`;
|
||||
|
||||
const Gainburua = styled.header`
|
||||
padding: ${rem(size.tiny)};
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: ${rem(size.base)};
|
||||
|
||||
${media.tablet`
|
||||
padding: ${rem(size.large)};
|
||||
`};
|
||||
`;
|
||||
|
||||
const Deskribapena = styled.p`
|
||||
margin-bottom: ${rem(size.xlarge)};
|
||||
text-align: justify;
|
||||
|
||||
${font.base()};
|
||||
|
||||
${media.tablet`
|
||||
${font.large()};
|
||||
`};
|
||||
`;
|
||||
|
||||
const IzenburuWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const Marra = styled.div`
|
||||
/* altuera erabiliko den letraren berdina da */
|
||||
height: ${rem(41.83)};
|
||||
flex-grow: 1;
|
||||
box-shadow: inset 0px -3px 0px 0px white;
|
||||
margin-right: ${rem(size.tiny)};
|
||||
`;
|
||||
|
||||
const Izenburua = styled.h1`
|
||||
text-align: right;
|
||||
vertical-align: bottom;
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
}
|
||||
|
||||
${font.gargantuan()};
|
||||
`;
|
||||
|
||||
export default IndexPage;
|
||||
|
||||
431
front/src/pages/kafetegia.tsx
Normal file
431
front/src/pages/kafetegia.tsx
Normal file
@@ -0,0 +1,431 @@
|
||||
import { graphql, PageProps, useStaticQuery } from 'gatsby';
|
||||
import React from 'react';
|
||||
import { GlobalStyles } from '../ui/GlobalStyles';
|
||||
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { Gainburua } from '../components/Gainburua';
|
||||
import { Container } from '../components/Container';
|
||||
import styled from 'styled-components';
|
||||
import { colors, font, fontWeight, size } from '../ui/theme';
|
||||
|
||||
import BeganoaLogo from '../assets/beganoa.svg';
|
||||
import EkologikoaLogo from '../assets/ekologikoa.svg';
|
||||
import { rem } from 'polished';
|
||||
|
||||
type Alergenoa =
|
||||
| 'apioa'
|
||||
| 'arraina'
|
||||
| 'arrautzak'
|
||||
| 'esnekiak'
|
||||
| 'fruituLehorrak'
|
||||
| 'glutena'
|
||||
| 'kakahueteak'
|
||||
| 'krustazeoak'
|
||||
| 'lupinuak'
|
||||
| 'moluskuak'
|
||||
| 'sesamoa'
|
||||
| 'soja'
|
||||
| 'sulfitoak'
|
||||
| 'ziapea';
|
||||
|
||||
interface Produktua {
|
||||
id: string;
|
||||
izena: string;
|
||||
prezioa: number;
|
||||
ekologikoa: boolean;
|
||||
beganoa: boolean;
|
||||
alergenoak: {
|
||||
[alergenoa in Alergenoa]: boolean;
|
||||
};
|
||||
}
|
||||
interface DataProps {
|
||||
kafetegia: {
|
||||
data: {
|
||||
attributes: {
|
||||
deskribapena: string;
|
||||
izenburua: string;
|
||||
edariBeroak: Produktua[];
|
||||
infusioEkologikoak: Produktua[];
|
||||
edariHotzak: Produktua[];
|
||||
pikatzekoak: Produktua[];
|
||||
gozoak: Produktua[];
|
||||
anizkoJogurta: Produktua;
|
||||
tostadak: Produktua[];
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const Kafetegia: React.VFC<PageProps> = () => {
|
||||
const {
|
||||
kafetegia: {
|
||||
data: {
|
||||
attributes: {
|
||||
izenburua,
|
||||
deskribapena,
|
||||
anizkoJogurta,
|
||||
edariBeroak,
|
||||
edariHotzak,
|
||||
infusioEkologikoak,
|
||||
pikatzekoak,
|
||||
gozoak,
|
||||
tostadak,
|
||||
},
|
||||
},
|
||||
},
|
||||
} = useStaticQuery<DataProps>(graphql`
|
||||
{
|
||||
kafetegia {
|
||||
data {
|
||||
attributes {
|
||||
izenburua
|
||||
deskribapena
|
||||
anizkoJogurta {
|
||||
alergenoak {
|
||||
apioa
|
||||
arraina
|
||||
arrautzak
|
||||
esnekiak
|
||||
fruituLehorrak
|
||||
glutena
|
||||
kakahueteak
|
||||
krustazeoak
|
||||
lupinuak
|
||||
moluskuak
|
||||
sesamoa
|
||||
soja
|
||||
sulfitoak
|
||||
ziapea
|
||||
}
|
||||
beganoa
|
||||
ekologikoa
|
||||
izena
|
||||
prezioa
|
||||
id__normalized
|
||||
}
|
||||
edariBeroak {
|
||||
id
|
||||
ekologikoa
|
||||
beganoa
|
||||
izena
|
||||
prezioa
|
||||
alergenoak {
|
||||
apioa
|
||||
arraina
|
||||
arrautzak
|
||||
esnekiak
|
||||
fruituLehorrak
|
||||
glutena
|
||||
kakahueteak
|
||||
krustazeoak
|
||||
lupinuak
|
||||
moluskuak
|
||||
sesamoa
|
||||
soja
|
||||
sulfitoak
|
||||
ziapea
|
||||
}
|
||||
}
|
||||
edariHotzak {
|
||||
id
|
||||
ekologikoa
|
||||
beganoa
|
||||
izena
|
||||
prezioa
|
||||
alergenoak {
|
||||
apioa
|
||||
arraina
|
||||
arrautzak
|
||||
esnekiak
|
||||
fruituLehorrak
|
||||
glutena
|
||||
kakahueteak
|
||||
krustazeoak
|
||||
lupinuak
|
||||
moluskuak
|
||||
sesamoa
|
||||
soja
|
||||
sulfitoak
|
||||
ziapea
|
||||
}
|
||||
}
|
||||
infusioEkologikoak {
|
||||
id
|
||||
ekologikoa
|
||||
beganoa
|
||||
izena
|
||||
prezioa
|
||||
alergenoak {
|
||||
apioa
|
||||
arraina
|
||||
arrautzak
|
||||
esnekiak
|
||||
fruituLehorrak
|
||||
glutena
|
||||
kakahueteak
|
||||
krustazeoak
|
||||
lupinuak
|
||||
moluskuak
|
||||
sesamoa
|
||||
soja
|
||||
sulfitoak
|
||||
ziapea
|
||||
}
|
||||
}
|
||||
pikatzekoak {
|
||||
id
|
||||
ekologikoa
|
||||
beganoa
|
||||
izena
|
||||
prezioa
|
||||
alergenoak {
|
||||
apioa
|
||||
arraina
|
||||
arrautzak
|
||||
esnekiak
|
||||
fruituLehorrak
|
||||
glutena
|
||||
kakahueteak
|
||||
krustazeoak
|
||||
lupinuak
|
||||
moluskuak
|
||||
sesamoa
|
||||
soja
|
||||
sulfitoak
|
||||
ziapea
|
||||
}
|
||||
}
|
||||
gozoak {
|
||||
id
|
||||
ekologikoa
|
||||
beganoa
|
||||
izena
|
||||
prezioa
|
||||
alergenoak {
|
||||
apioa
|
||||
arraina
|
||||
arrautzak
|
||||
esnekiak
|
||||
fruituLehorrak
|
||||
glutena
|
||||
kakahueteak
|
||||
krustazeoak
|
||||
lupinuak
|
||||
moluskuak
|
||||
sesamoa
|
||||
soja
|
||||
sulfitoak
|
||||
ziapea
|
||||
}
|
||||
}
|
||||
tostadak {
|
||||
id
|
||||
ekologikoa
|
||||
beganoa
|
||||
izena
|
||||
prezioa
|
||||
alergenoak {
|
||||
apioa
|
||||
arraina
|
||||
arrautzak
|
||||
esnekiak
|
||||
fruituLehorrak
|
||||
glutena
|
||||
kakahueteak
|
||||
krustazeoak
|
||||
lupinuak
|
||||
moluskuak
|
||||
sesamoa
|
||||
soja
|
||||
sulfitoak
|
||||
ziapea
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet title={`${izenburua} | Laba`} htmlAttributes={{ lang: 'eu' }}>
|
||||
<meta name="description" content={deskribapena} />
|
||||
</Helmet>
|
||||
|
||||
<GlobalStyles />
|
||||
|
||||
<GainburuaWrapper>
|
||||
<Gainburua
|
||||
atala="kafetegia"
|
||||
izenburua={izenburua}
|
||||
deskribapena={deskribapena}
|
||||
/>
|
||||
</GainburuaWrapper>
|
||||
|
||||
<Container>
|
||||
<TaldeWrapper>
|
||||
<IzenburuWrapper>
|
||||
<Marra />
|
||||
<Izenburua>Edariak</Izenburua>
|
||||
</IzenburuWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda
|
||||
izena="Edari beroak"
|
||||
produktuZerrenda={edariBeroak}
|
||||
/>
|
||||
</ZerrendaWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda
|
||||
izena="Infusio ekologikoak"
|
||||
produktuZerrenda={infusioEkologikoak}
|
||||
/>
|
||||
</ZerrendaWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda
|
||||
izena="Edari hotzak"
|
||||
produktuZerrenda={edariHotzak}
|
||||
/>
|
||||
</ZerrendaWrapper>
|
||||
</TaldeWrapper>
|
||||
|
||||
<TaldeWrapper>
|
||||
<IzenburuWrapper>
|
||||
<Marra />
|
||||
<Izenburua>Jakiak</Izenburua>
|
||||
</IzenburuWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda
|
||||
izena="Pikatzekoak"
|
||||
produktuZerrenda={pikatzekoak}
|
||||
/>
|
||||
</ZerrendaWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda izena="Tostadak" produktuZerrenda={tostadak} />
|
||||
</ZerrendaWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda izena="Gozoak" produktuZerrenda={gozoak} />
|
||||
</ZerrendaWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda
|
||||
izena="Anizko Jogurta"
|
||||
produktuZerrenda={[anizkoJogurta]}
|
||||
/>
|
||||
</ZerrendaWrapper>
|
||||
</TaldeWrapper>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const GainburuaWrapper = styled.div`
|
||||
margin-bottom: ${rem(size.huge)};
|
||||
`;
|
||||
|
||||
const TaldeWrapper = styled.section`
|
||||
&:not(:last-child) {
|
||||
margin-bottom: ${size.large}px;
|
||||
}
|
||||
`;
|
||||
|
||||
const ZerrendaWrapper = styled.div`
|
||||
&:not(:last-child) {
|
||||
margin-bottom: ${size.base}px;
|
||||
}
|
||||
`;
|
||||
|
||||
const ProduktuZerrenda: React.FC<{
|
||||
produktuZerrenda: Produktua[];
|
||||
izena: React.ReactNode;
|
||||
}> = ({ produktuZerrenda, izena }) => (
|
||||
<ProduktuTaula>
|
||||
<ProduktuMota>{izena}</ProduktuMota>
|
||||
|
||||
{produktuZerrenda.map(produktua => (
|
||||
<tr key={produktua.id}>
|
||||
<Ezaugarria>
|
||||
{produktua.beganoa && <BeganoaLogo title="Produktu beganoa" />}
|
||||
</Ezaugarria>
|
||||
<Ezaugarria>
|
||||
{produktua.ekologikoa && (
|
||||
<EkologikoaLogo title="Produktu ekologikoa" />
|
||||
)}
|
||||
</Ezaugarria>
|
||||
<Izena scope="row">{produktua.izena}</Izena>
|
||||
<Prezioa>
|
||||
{new Intl.NumberFormat('eu-ES', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(produktua.prezioa)}
|
||||
</Prezioa>
|
||||
</tr>
|
||||
))}
|
||||
</ProduktuTaula>
|
||||
);
|
||||
|
||||
const ProduktuTaula = styled.table`
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
overflow-wrap: break-word;
|
||||
`;
|
||||
|
||||
const Ezaugarria = styled.td`
|
||||
width: ${size.medium}px;
|
||||
height: ${size.medium}px;
|
||||
padding: 0 ${size.xtiny}px;
|
||||
vertical-align: top;
|
||||
`;
|
||||
|
||||
const Izena = styled.td`
|
||||
text-align: left;
|
||||
font-weight: ${fontWeight.regular};
|
||||
padding: 0 ${size.xtiny}px;
|
||||
vertical-align: top;
|
||||
`;
|
||||
|
||||
const Prezioa = styled.td`
|
||||
min-width: ${size.medium}px;
|
||||
text-align: right;
|
||||
font-weight: ${fontWeight.regular};
|
||||
padding: 0 ${size.xtiny}px;
|
||||
vertical-align: top;
|
||||
`;
|
||||
|
||||
const ProduktuMota = styled.caption`
|
||||
${font.large()};
|
||||
text-align: left;
|
||||
padding-left: 67px;
|
||||
margin-bottom: ${rem(size.mini)};
|
||||
|
||||
&::after {
|
||||
content: '.';
|
||||
}
|
||||
`;
|
||||
|
||||
const IzenburuWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-bottom: ${rem(size.medium)};
|
||||
`;
|
||||
|
||||
const Marra = styled.div`
|
||||
/* altuera erabiliko den letraren berdina da */
|
||||
height: ${rem(41.83)};
|
||||
flex-grow: 1;
|
||||
box-shadow: inset 0px -3px 0px 0px ${colors.beltza};
|
||||
margin-right: ${rem(size.tiny)};
|
||||
`;
|
||||
|
||||
const Izenburua = styled.h1`
|
||||
text-align: right;
|
||||
vertical-align: bottom;
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
}
|
||||
|
||||
${font.gargantuan()};
|
||||
`;
|
||||
|
||||
export default Kafetegia;
|
||||
@@ -1,5 +1,6 @@
|
||||
import { createGlobalStyle, css } from 'styled-components';
|
||||
import { font } from './theme';
|
||||
import { font, fontWeight } from './theme';
|
||||
import { colors } from './theme/colors';
|
||||
|
||||
/**
|
||||
* Inicializa estilos base
|
||||
@@ -197,12 +198,11 @@ export const GlobalStyles = createGlobalStyle`
|
||||
${reboot};
|
||||
|
||||
body {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-family: 'Almarai', sans-serif;
|
||||
|
||||
${font.base()}
|
||||
font-weight: 600;
|
||||
font-weight: ${fontWeight.bold};
|
||||
|
||||
background-color: #fd3447;
|
||||
color: #fff;
|
||||
color: ${colors.beltza};
|
||||
}
|
||||
`;
|
||||
|
||||
10
front/src/ui/theme/colors.ts
Normal file
10
front/src/ui/theme/colors.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
export const colors = {
|
||||
beltza: '#191919',
|
||||
urdina: '#8FBBFD',
|
||||
morea: '#510DFB',
|
||||
horia: '#FDB201',
|
||||
gorria: '#FD3647',
|
||||
zuria: '#FFFFFF',
|
||||
};
|
||||
|
||||
export type Color = keyof typeof colors;
|
||||
4
front/src/ui/theme/fontWeight.ts
Normal file
4
front/src/ui/theme/fontWeight.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export const fontWeight = {
|
||||
regular: 300,
|
||||
bold: 600,
|
||||
};
|
||||
@@ -2,3 +2,5 @@ export { breakpoints } from './breakpoints';
|
||||
export { font } from './font';
|
||||
export { media } from './media';
|
||||
export { size } from './size';
|
||||
export { colors, Color } from './colors';
|
||||
export { fontWeight } from './fontWeight';
|
||||
|
||||
Reference in New Issue
Block a user