Browse Source

feat(hero): fix responsiveness issues

tags/v1.1.0
Dany Sluijk 6 months ago
parent
commit
5d2b2d4cbf
Signed by: dsluijk GPG Key ID: EEEBA79CCB6729B0
7 changed files with 38 additions and 20 deletions
  1. +3
    -1
      example/src/pages/Home.tsx
  2. +2
    -2
      src/button/style.scss
  3. +2
    -1
      src/hero/index.tsx
  4. +10
    -2
      src/hero/style.scss
  5. +1
    -1
      src/sidebar/category/style.scss
  6. +16
    -11
      src/typography/style.scss
  7. +4
    -2
      theme/light.scss

+ 3
- 1
example/src/pages/Home.tsx View File

@@ -6,8 +6,9 @@ export const Home: FunctionalComponent = () => (
<Hero
image="https://i.picsum.photos/id/770/1440/1080.jpg?hmac=LgQtRIvk-FthvEO2N6QuR_FMH3Dj1MqITEsWrBr9xII"
imageFallback="linear-gradient(to bottom right, rgb(88, 90, 218), #eb5e28)"
imageLabel="Demo image"
>
<h1>Title</h1>
<h1>Page Title</h1>
<h4>Subtitle</h4>
<div>
<Button>Button 1</Button>
@@ -20,6 +21,7 @@ export const Home: FunctionalComponent = () => (
<h3>Header three</h3>
<h4>Header four</h4>
<h5>Header five</h5>
<h6>Header six</h6>
<p>
This is some text, with a <a href="https://dany.dev">link</a>.
</p>


+ 2
- 2
src/button/style.scss View File

@@ -31,7 +31,7 @@

.ghost {
color: var(--text-color);
border: 2px solid var(--text-color-highlight);
border: 2px solid var(--text-color-header);
background: none;

&:disabled {
@@ -40,6 +40,6 @@

&.inversed {
color: var(--text-color-inverse);
border: 2px solid var(--text-color-inverse-highlight);
border: 2px solid var(--text-color-inverse-header);
}
}

+ 2
- 1
src/hero/index.tsx View File

@@ -4,7 +4,7 @@ import style from "./style.scss";

export const Hero: FunctionalComponent<RenderableProps<Props>> = (props) => (
<div class={style.hero} style={`background: ${props.imageFallback}`}>
<img class={style.image} src={props.image} />
<img class={style.image} src={props.image} alt={props.imageLabel} />
<div class={style.content}>{props.children}</div>
</div>
);
@@ -12,4 +12,5 @@ export const Hero: FunctionalComponent<RenderableProps<Props>> = (props) => (
interface Props {
image: string;
imageFallback: string;
imageLabel: string;
}

+ 10
- 2
src/hero/style.scss View File

@@ -17,8 +17,16 @@
position: absolute;
flex-direction: column;
align-items: center;
margin: auto;
bottom: 4vh;
justify-content: center;
text-align: center;
padding-top: 0.6em;
top: 0;
bottom: 0;
left: 0;
right: 0;

img {
max-height: 6em;
max-width: 80%;
}
}

+ 1
- 1
src/sidebar/category/style.scss View File

@@ -3,6 +3,6 @@
align-items: center;
margin: 18px 18px 6px;
font-size: 0.9em;
color: var(--text-color-highlight);
color: var(--text-color-header);
font-family: var(--font);
}

+ 16
- 11
src/typography/style.scss View File

@@ -7,52 +7,57 @@
font-family: var(--font);

h1 {
font-size: 96px;
font-size: 4em;
font-weight: lighter;
letter-spacing: -1.5px;
}

h2 {
font-size: 60px;
font-size: 3.5em;
font-weight: lighter;
letter-spacing: -1.5px;
}

h3 {
font-size: 48px;
font-size: 2.5em;
font-weight: normal;
letter-spacing: 0;
}

h4 {
font-size: 34px;
font-size: 2em;
font-weight: normal;
letter-spacing: 0.25px;
}

h5 {
font-size: 24px;
font-size: 1.5em;
font-weight: normal;
letter-spacing: 0;
}

h6 {
font-size: 20px;
font-weight: bolder;
font-size: 1.2em;
font-weight: normal;
letter-spacing: 0.15px;
}

h1,
h2,
h3,
h4,
h5 {
margin: 0 0 6px;
color: var(--text-color-header);
}

h2,
h4,
h6 {
margin: 0 0 8px;
color: var(--text-color-highlight);
color: var(--text-color-subheader);
}

:not(nav) > a {
color: var(--text-color-highlight);
color: var(--text-color-header);
text-decoration: underline;
}
}

+ 4
- 2
theme/light.scss View File

@@ -6,9 +6,11 @@ html {
--secondary-color-highlight: #e04e15;
--secondary-color-text: #ffffdb;
--text-color: #000;
--text-color-highlight: #0a0a0a;
--text-color-header: #191919;
--text-color-subheader: #2f2f2f;
--text-color-inverse: #fff;
--text-color-inverse-highlight: #eaf4f4;
--text-color-inverse-header: #eaf4f4;
--text-color-inverse-subheader: #eaf4f4;
--background: #f1f5fb;
--background-secondary: #fff;
--background-border: #ccd0d9;


Loading…
Cancel
Save