From ca03625727bd3d607224eb92981ce0c4ac55d012 Mon Sep 17 00:00:00 2001 From: Aitor Urrutia Date: Sat, 15 Jan 2022 12:53:15 +0100 Subject: [PATCH] feat: estiloak sortzen ditu --- front/package.json | 2 + front/src/components/Container.tsx | 21 +++ front/src/pages/index.tsx | 81 ++++++++++- front/src/ui/GlobalStyles.tsx | 208 +++++++++++++++++++++++++++++ front/src/ui/theme/breakpoints.ts | 4 + front/src/ui/theme/font.ts | 41 ++++++ front/src/ui/theme/index.ts | 4 + front/src/ui/theme/media.ts | 15 +++ front/src/ui/theme/size.ts | 12 ++ yarn.lock | 18 ++- 10 files changed, 400 insertions(+), 6 deletions(-) create mode 100644 front/src/components/Container.tsx create mode 100644 front/src/ui/GlobalStyles.tsx create mode 100644 front/src/ui/theme/breakpoints.ts create mode 100644 front/src/ui/theme/font.ts create mode 100644 front/src/ui/theme/index.ts create mode 100644 front/src/ui/theme/media.ts create mode 100644 front/src/ui/theme/size.ts diff --git a/front/package.json b/front/package.json index f480888..d56406e 100644 --- a/front/package.json +++ b/front/package.json @@ -17,6 +17,7 @@ "prettier": "prettier . --write" }, "dependencies": { + "@types/styled-components": "^5.1.20", "babel-plugin-styled-components": "^2.0.2", "gatsby": "^4.5.2", "gatsby-plugin-image": "^2.5.1", @@ -28,6 +29,7 @@ "gatsby-source-filesystem": "^4.5.1", "gatsby-source-strapi": "^1.0.2", "gatsby-transformer-sharp": "^4.5.0", + "polished": "^4.1.3", "react": "^17.0.1", "react-dom": "^17.0.1", "react-helmet": "^6.1.0", diff --git a/front/src/components/Container.tsx b/front/src/components/Container.tsx new file mode 100644 index 0000000..7e4f602 --- /dev/null +++ b/front/src/components/Container.tsx @@ -0,0 +1,21 @@ +import { rem } from 'polished'; +import styled from 'styled-components'; +import { media } from '../ui/theme/media'; +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)}; + + width: 100%; + + ${media.tablet` + width: 744px; + `} + + ${media.desktop` + width: 1014px; + `} +`; diff --git a/front/src/pages/index.tsx b/front/src/pages/index.tsx index 328db0a..2228906 100644 --- a/front/src/pages/index.tsx +++ b/front/src/pages/index.tsx @@ -1,5 +1,10 @@ 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'; interface DataProps { strapiHasiera: { @@ -12,7 +17,7 @@ interface DataProps { }; } -const IndexPage: React.VFC> = () => { +const IndexPage: React.VFC = () => { const { strapiHasiera } = useStaticQuery(graphql` { strapiHasiera { @@ -27,11 +32,77 @@ const IndexPage: React.VFC> = () => { `); return ( -
-

{strapiHasiera.data.attributes.izenburua}

-

{strapiHasiera.data.attributes.deskribapena}

-
+ <> + + + +
LABA LOGOA
+ + +

Gazteluko plaza 2

+

Iruñea

+ + + + +
+ + {strapiHasiera.data.attributes.deskribapena} + + + + + {strapiHasiera.data.attributes.izenburua} + +
+ + ); }; +const Helbidea = styled.div` + border-right: 3px solid white; + padding-right: ${rem(size.small)}; + ${font.small()}; +`; + +const Gainburua = styled.header` + padding: ${rem(size.base)}; + display: flex; + 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.large()}; +`; + +const IzenburuWrapper = styled.div` + display: flex; + justify-content: flex-end; +`; + +const Marra = styled.hr` + flex-grow: 1; + border: none; + box-shadow: inset 0px -3px 0px 0px white; + margin-right: ${rem(size.tiny)}; +`; + +const Izenburua = styled.h1` + text-transform: uppercase; + text-align: right; + vertical-align: bottom; + + ${font.gargantuan()}; +`; + export default IndexPage; diff --git a/front/src/ui/GlobalStyles.tsx b/front/src/ui/GlobalStyles.tsx new file mode 100644 index 0000000..b706cfc --- /dev/null +++ b/front/src/ui/GlobalStyles.tsx @@ -0,0 +1,208 @@ +import { createGlobalStyle, css } from 'styled-components'; +import { font } from './theme'; + +/** + * Inicializa estilos base + * 1. Change from `box-sizing: content-box` so that `width` is not affected + * by `padding` or `border`. + * 2. As a best practice, apply a default 'background-color'. + * 3. Set an explicit initial text-align value so that we can later use the the 'inherit' + * value on things like '' elements. + * 4. Prevent adjustments of font size after orientation changes in IE on + * Windows Phone and in iOS. + * 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, + * so we force a non-overlapping, non-auto-hiding scrollbar to counteract. + * 6. Change the default tap highlight to be completely transparent in iOS. + * 7. Implement full height to let children control own height. + */ +const reboot = css` + *, + *::before, + *::after { + box-sizing: border-box; /* 1 */ + } + html { + -webkit-text-size-adjust: 100%; /* 4 */ + -ms-text-size-adjust: 100%; /* 4 */ + -ms-overflow-style: scrollbar; /* 5 */ + -webkit-tap-highlight-color: rgba(#000, 0); /* 6 */ + -webkit-tap-highlight-color: transparent; + } + body { + min-height: 100vh; + } + -ms-viewport { + width: device-width; + } + strong { + font-weight: 700; + } +`; + +const reset = css` + /* http://meyerweb.com/eric/tools/css/reset/ + v4.0 | 20180602 + License: none (public domain) +*/ + html, + body, + div, + span, + applet, + object, + iframe, + h1, + h2, + h3, + h4, + h5, + h6, + p, + blockquote, + pre, + a, + abbr, + acronym, + address, + big, + cite, + code, + del, + dfn, + img, + ins, + kbd, + q, + s, + samp, + small, + strike, + strong, + sub, + sup, + tt, + var, + u, + center, + dl, + dt, + dd, + ol, + ul, + li, + fieldset, + form, + label, + legend, + table, + caption, + tbody, + tfoot, + thead, + tr, + th, + td, + article, + aside, + canvas, + details, + embed, + figure, + figcaption, + footer, + header, + hgroup, + main, + menu, + nav, + output, + ruby, + section, + summary, + time, + mark, + audio, + video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + em, + i, + b { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; + } + /* HTML5 display-role reset for older browsers */ + article, + aside, + details, + figcaption, + figure, + footer, + header, + hgroup, + main, + menu, + nav, + section { + display: block; + } + *:focus, + :active { + outline: 0; + } + /* HTML5 hidden-attribute fix for newer browsers */ + *[hidden] { + display: none; + } + body { + line-height: 1; + } + ol, + ul { + list-style: none; + } + blockquote, + q { + quotes: none; + } + blockquote:before, + blockquote:after, + q:before, + q:after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; + } + a:link, + a:visited, + a:active { + text-decoration: none; + color: inherit; + } +`; + +export const GlobalStyles = createGlobalStyle` + ${reset}; + ${reboot}; + + body { + font-family: 'Arial', 'Open Sans', sans-serif; + + ${font.base()} + font-weight: 700; + + background-color: #fd3447; + color: #fff; + } +`; diff --git a/front/src/ui/theme/breakpoints.ts b/front/src/ui/theme/breakpoints.ts new file mode 100644 index 0000000..5ad3b6b --- /dev/null +++ b/front/src/ui/theme/breakpoints.ts @@ -0,0 +1,4 @@ +export const breakpoints = { + tablet: 768, + desktop: 1024, +}; diff --git a/front/src/ui/theme/font.ts b/front/src/ui/theme/font.ts new file mode 100644 index 0000000..91f80ea --- /dev/null +++ b/front/src/ui/theme/font.ts @@ -0,0 +1,41 @@ +import { css } from 'styled-components'; +import { rem } from 'polished'; + +export const font = { + tiny() { + return css` + font-size: ${rem(12.64)}; + line-height: ${rem(17)}; + `; + }, + small() { + return css` + font-size: ${rem(16)}; + line-height: ${rem(22)}; + `; + }, + base() { + return css` + font-size: ${rem(18)}; + line-height: ${rem(24)}; + `; + }, + large() { + return css` + font-size: ${rem(25.63)}; + line-height: ${rem(35)}; + `; + }, + huge() { + return css` + font-size: ${rem(36.41)}; + line-height: ${rem(50)}; + `; + }, + gargantuan() { + return css` + font-size: ${rem(41.83)}; + line-height: ${rem(57)}; + `; + }, +}; diff --git a/front/src/ui/theme/index.ts b/front/src/ui/theme/index.ts new file mode 100644 index 0000000..6c37743 --- /dev/null +++ b/front/src/ui/theme/index.ts @@ -0,0 +1,4 @@ +export { breakpoints } from './breakpoints'; +export { font } from './font'; +export { media } from './media'; +export { size } from './size'; diff --git a/front/src/ui/theme/media.ts b/front/src/ui/theme/media.ts new file mode 100644 index 0000000..4954608 --- /dev/null +++ b/front/src/ui/theme/media.ts @@ -0,0 +1,15 @@ +import { css } from 'styled-components'; +import { breakpoints } from './breakpoints'; + +export const media = { + tablet: (styles: TemplateStringsArray, ...args) => css` + @media (min-width: ${breakpoints.tablet}px) { + ${css(styles, ...args)}; + } + `, + desktop: (styles: TemplateStringsArray, ...args) => css` + @media (min-width: ${breakpoints.desktop}px) { + ${css(styles, ...args)}; + } + `, +}; diff --git a/front/src/ui/theme/size.ts b/front/src/ui/theme/size.ts new file mode 100644 index 0000000..cc473ea --- /dev/null +++ b/front/src/ui/theme/size.ts @@ -0,0 +1,12 @@ +export const size = { + none: 0, + xtiny: 4, + tiny: 8, + small: 12, + mini: 16, + base: 24, + medium: 32, + large: 48, + xlarge: 64, + huge: 96, +}; diff --git a/yarn.lock b/yarn.lock index d7883e5..a23a613 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2756,7 +2756,7 @@ "@types/minimatch" "*" "@types/node" "*" -"@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1": +"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== @@ -2990,6 +2990,15 @@ dependencies: "@types/node" "*" +"@types/styled-components@^5.1.20": + version "5.1.20" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.20.tgz#83c545d1b793b846c231ff18e93019ccd2867972" + integrity sha512-TvpQceFwnxJJsAzR1aHsYpL5DxWMHRzM2/0EA6sGtRjV6DtJubmNxeoPMPiIPQzKEGNHccwObXO7Hug/iwm1Xw== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + csstype "^3.0.2" + "@types/through@*": version "0.0.30" resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.30.tgz#e0e42ce77e897bd6aead6f6ea62aeb135b8a3895" @@ -11902,6 +11911,13 @@ pngjs@^3.0.0, pngjs@^3.3.3: resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f" integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w== +polished@^4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/polished/-/polished-4.1.3.tgz#7a3abf2972364e7d97770b827eec9a9e64002cfc" + integrity sha512-ocPAcVBUOryJEKe0z2KLd1l9EBa1r5mSwlKpExmrLzsnIzJo4axsoU9O2BjOTkDGDT4mZ0WFE5XKTlR3nLnZOA== + dependencies: + "@babel/runtime" "^7.14.0" + portfinder@^1.0.28: version "1.0.28" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"