feat: estiloak sortzen ditu

2022-01-15 12:53:15 +01:00
parent db8cae3bc5
commit ca03625727
10 changed files with 400 additions and 6 deletions
--- 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",
--- a/front/src/components/Container.tsx
+++ 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;
+  `}
+`;
--- 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<PageProps<DataProps>> = () => {
+const IndexPage: React.VFC<PageProps> = () => {
  const { strapiHasiera } = useStaticQuery<DataProps>(graphql`
    {
      strapiHasiera {
@@ -27,11 +32,77 @@ const IndexPage: React.VFC<PageProps<DataProps>> = () => {
  `);

  return (
-    <main>
-      <h1>{strapiHasiera.data.attributes.izenburua}</h1>
-      <p>{strapiHasiera.data.attributes.deskribapena}</p>
-    </main>
+    <>
+      <GlobalStyles />
+
+      <Gainburua>
+        <div>LABA LOGOA</div>
+
+        <Helbidea>
+          <p>Gazteluko plaza 2</p>
+          <p>Iruñea</p>
+        </Helbidea>
+      </Gainburua>
+
+      <Container>
+        <main>
+          <Deskribapena>
+            {strapiHasiera.data.attributes.deskribapena}
+          </Deskribapena>
+
+          <IzenburuWrapper>
+            <Marra />
+            <Izenburua>{strapiHasiera.data.attributes.izenburua}</Izenburua>
+          </IzenburuWrapper>
+        </main>
+      </Container>
+    </>
  );
 };

+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;
--- a/front/src/ui/GlobalStyles.tsx
+++ 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 '<th>' 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;
+  }
+`;
--- a/front/src/ui/theme/breakpoints.ts
+++ b/front/src/ui/theme/breakpoints.ts
@@ -0,0 +1,4 @@
+export const breakpoints = {
+  tablet: 768,
+  desktop: 1024,
+};
--- a/front/src/ui/theme/font.ts
+++ 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)};
+    `;
+  },
+};
--- a/front/src/ui/theme/index.ts
+++ 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';
--- a/front/src/ui/theme/media.ts
+++ 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)};
+    }
+  `,
+};
--- a/front/src/ui/theme/size.ts
+++ 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,
+};
--- 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"