1
0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-23 01:29:41 +01:00

typography updates

This commit is contained in:
Matthias Kretschmann 2018-05-05 23:47:12 +02:00
parent 9da9c6ce8b
commit a296255287
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 13 additions and 10 deletions

View File

@ -1,4 +1,4 @@
.content { .content {
max-width: 40rem; max-width: 38rem;
margin: 0 auto; margin: 0 auto;
} }

View File

@ -19,9 +19,6 @@
margin-left: $spacer / 2; margin-left: $spacer / 2;
margin-bottom: $spacer / 2; margin-bottom: $spacer / 2;
flex: 0 0 calc(50% - #{$spacer / 2}); flex: 0 0 calc(50% - #{$spacer / 2});
font-size: $font-size-base;
@media (min-width: 35rem) {
flex-basis: calc(33% - #{$spacer / 2});
}
} }
} }

View File

@ -54,7 +54,7 @@
@media (min-width: 30rem) { @media (min-width: 30rem) {
margin-top: $spacer; margin-top: $spacer;
margin-bottom: $spacer; margin-bottom: 0;
} }
.header__title, .header__title,
@ -75,6 +75,7 @@
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-bottom: $spacer / 3; margin-bottom: $spacer / 3;
opacity: .5;
} }
.header__name { .header__name {
@ -87,6 +88,11 @@
transition: color .2s ease-out; transition: color .2s ease-out;
} }
.header__logo {
opacity: 1;
transition: opacity .2s ease-out;
}
.header__title { .header__title {
color: $brand-main; color: $brand-main;
} }

View File

@ -22,14 +22,14 @@ $text-color-light: $brand-grey-light;
// Typography // Typography
///////////////////////////////////// /////////////////////////////////////
$font-size-root : 16px; $font-size-root : 18px;
$font-size-base : 1rem; $font-size-base : 1rem;
$font-size-large : 1.2rem; $font-size-large : 1.2rem;
$font-size-small : .8rem; $font-size-small : .8rem;
$font-size-mini : .7rem; $font-size-mini : .7rem;
$font-size-h1 : 3rem; $font-size-h1 : 2.5rem;
$font-size-h2 : 2rem; $font-size-h2 : 2rem;
$font-size-h3 : 1.75rem; $font-size-h3 : 1.75rem;
$font-size-h4 : $font-size-large; $font-size-h4 : $font-size-large;

View File

@ -49,8 +49,8 @@ class Project extends Component {
</FullWidth> </FullWidth>
<footer className="project__meta"> <footer className="project__meta">
{!!techstack && <ProjectTechstack techstack={techstack} />}
{!!links && <ProjectLinks links={links} />} {!!links && <ProjectLinks links={links} />}
{!!techstack && <ProjectTechstack techstack={techstack} />}
</footer> </footer>
</Content> </Content>
</article> </article>

View File

@ -19,7 +19,7 @@
} }
.project__description { .project__description {
font-size: $font-size-large; font-size: $font-size-base;
color: $brand-grey; color: $brand-grey;
margin-bottom: $spacer * 3; margin-bottom: $spacer * 3;
} }