Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

19 style guide #20

Merged
merged 21 commits into from Jun 4, 2019
Merged
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
6f66471
Got sidetracked and tweaked portfolio instead.
majtom2grndctrl May 30, 2019
952c5ca
Merge branch 'master' into 19--style-guide
majtom2grndctrl May 30, 2019
91a18dc
Convert desktop siteheader to use scale variables
majtom2grndctrl May 30, 2019
d7ade22
Merge branch 'master' into 19--style-guide
majtom2grndctrl May 30, 2019
f900d5d
Another round of size adjustments on a bus
majtom2grndctrl May 30, 2019
580ea2b
--scale -> --type-scale
majtom2grndctrl May 31, 2019
db86b21
--type-scale-multiplier -> --scale-multiplier
majtom2grndctrl May 31, 2019
664377e
First pass at adding a spatial scale in addition to a type scale.
majtom2grndctrl May 31, 2019
bf62b3f
Deploy updates from a couple rounds of tinkering.
majtom2grndctrl May 31, 2019
b59a31b
Revert prior change to global font size scaling
majtom2grndctrl Jun 1, 2019
bd2459d
Round of layout adjustments all over the Portfolio index.
majtom2grndctrl Jun 1, 2019
5107d88
Merge branch 'master' into 19--style-guide
majtom2grndctrl Jun 1, 2019
5139634
Spatial adjustments to blog index header.
majtom2grndctrl Jun 1, 2019
37c1b40
Spot-check some layout issues.
majtom2grndctrl Jun 1, 2019
a9845df
Update spacing for entries on blog index.
majtom2grndctrl Jun 1, 2019
3e20fa9
Refactor case study header
majtom2grndctrl Jun 3, 2019
0d2b549
Refactor CMS content on phone and tablet form factors.
majtom2grndctrl Jun 3, 2019
18c5139
Restyle CMS content on desktop.
majtom2grndctrl Jun 3, 2019
be0af40
Refactor desktop font sizes around new content font size.
majtom2grndctrl Jun 3, 2019
241c840
Get blog posts to not crash when I’m working on a bus. 🚌
majtom2grndctrl Jun 4, 2019
f83dfc8
More style refactoring.
majtom2grndctrl Jun 4, 2019
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -1,10 +1,3 @@
/* Lessons were learned here: */
@media (min-width: 820px /* 51.25rem *//* 820 / 16 */) {
html {
font-size: calc(100% + 10 * (100vw - 1440px) / 900);
}
}

/*
Global CSS Variables
****************************/
@@ -26,7 +19,45 @@
--font-heading: 'Poppins', sans-serif;
--font-body: 'Arimo', sans-serif;
--mobile-nav-transition-duration: .3s;

--type-scale-base: calc(18rem/16);
--scale-multiplier: 1.2;
--type-scale-00: calc(var(--type-scale-base) / var(--scale-multiplier) / var(--scale-multiplier));
--type-scale-0: calc(var(--type-scale-base) / var(--scale-multiplier));
--type-scale-1: var(--type-scale-base);
--type-scale-2: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier));
--type-scale-3: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
--type-scale-4: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
--type-scale-5: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
--type-scale-6: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
--type-scale-7: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
--type-scale-8: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));

--spatial-scale-base: calc(var(--type-scale-base) * .705);
--spatial-scale-00: calc(var(--spatial-scale-base) / var(--scale-multiplier) / var(--scale-multiplier));
--spatial-scale-0: calc(var(--spatial-scale-base) / var(--scale-multiplier));
--spatial-scale-1: var(--spatial-scale-base);
--spatial-scale-2: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier));
--spatial-scale-3: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
--spatial-scale-4: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
--spatial-scale-5: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
--spatial-scale-6: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
--spatial-scale-7: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
--spatial-scale-8: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));

}

/* Lessons were learned here: */
@media (min-width: 820px /* 51.25rem *//* 820 / 16 */) {
html {
font-size: calc(100% + 10 * (100vw - 1440px) / 900);
}
:root {
--scale-multiplier: 1.25;
--type-scale-base: calc(22rem/16);
}
}

/*
Global styles
****************************/
@@ -5,7 +5,7 @@
<img class="image-desktop" src="/img/project-collage-desktop.jpg" alt="" />
</div>
<div class="content">
<h1>There’s so much more to talk&nbsp;about!</h1>
<h1 class="title">There’s so much more to talk&nbsp;about!</h1>
<p>I’ve worked on many different teams and challenges. Some of that work hasn’t been published here yet&mdash;<strong>much of it can’t be</strong>. The&nbsp;best way to get to know what I have to offer is to talk shop over&nbsp;coffee.</p>
<cta-link class="cta" href="https://www.linkedin.com/in/danhiester" variant="white">Contact me on LinkedIn</cta-link>
</div>
@@ -33,7 +33,7 @@ export default ContactCta
.ContactCta {
background: #486172;
color: var(--white);
padding: 0 0 2rem 0;
padding: 0 0 var(--spatial-scale-3) 0;
}
.image-mobile {
width: 100%;
@@ -42,36 +42,35 @@ export default ContactCta
display: none;
}
.content {
margin: 0 1.25rem;
margin: 0 var(--spatial-scale-3);
padding: 0;
overflow: hidden;
& > h1 {
& > .title {
font-weight: 400;
font-size: calc(30rem/16);
line-height: calc(38rem/16);
margin: 1em 0 .25em;
font-size: var(--type-scale-2);
line-height: var(--spatial-scale-6);
margin: 1em 0 var(--spatial-scale-1);
}
& > p {
font-size: 1rem;
line-height: 1.5rem;
margin: .5em 0 1.5em;
font-size: var(--type-scale-1);
line-height: var(--spatial-scale-5);
margin: var(--spatial-scale-1) 0 var(--spatial-scale-3);
}
}
.cta {
max-width: 20rem;
margin-right: auto;
margin-left: auto;
}
@media (--viewport-small) {
.content {
margin: 0 auto;
max-width: 30rem;
& > h1 {
margin-bottom: .5em;
& > .title {
text-align: center;
}
}
.cta {
max-width: 20rem;
margin-right: auto;
margin-left: auto;
}
}
@media (--viewport-medium) {
.ContactCta {
@@ -85,20 +84,22 @@ export default ContactCta
.content {
flex-basis: 47%;
padding-right: 1.5rem;
& > h1, & > p, & > .cta {
& > .title, & > p, & > .cta {
max-width: 22rem;
margin-right: auto;
margin-left: auto;
}
& > h1 {
font-size: calc(36rem/16);
line-height: calc(50em/36);
& > .title {
font-size: var(--type-scale-2);
line-height: var(--spatial-scale-5);
margin-top: 0;
margin-bottom: var(--spatial-scale-1);
text-align: left;
}
& > p {
font-size: calc(18rem/16);
line-height: calc(28rem/16);
font-size: var(--type-scale-0);
line-height: var(--spatial-scale-3);
margin-bottom: var(--spatial-scale-2);
}
}
.image-container {
@@ -9,7 +9,6 @@
</svg>
</template>


<script lang="ts">
import { Vue, Component, Prop } from "nuxt-property-decorator"
@@ -43,4 +42,3 @@ class DyLogo extends Vue {
}
export default DyLogo
</script>

@@ -29,16 +29,18 @@ export default Anthology
padding: 0 calc(20rem/16);
}
.anthology-list {
display: flex;
flex-direction: column;
padding-bottom: 1.5rem;
}
@media (--viewport-medium) {
.anthology {
margin: 2rem 0;
padding: 0;
&:first-child {
margin-top: 0;
}
}
.anthology-list {
display: flex;
flex-direction: row;
padding-bottom: 0;
}
@@ -31,32 +31,31 @@ export default AnthologyHero

<style lang="postcss" scoped>
.AnthologyHero {
display: flex;
flex-direction: column;
overflow: hidden;
}
.title {
color: var(--white);
font-size: calc(24rem/16);
font-size: var(--type-scale-2);
font-weight: 400;
line-height: calc(38em/30);
margin: calc(35em/30) 0 calc(20em/30) 0;
line-height: 1.375em;
margin: var(--spatial-scale-4) 0 var(--spatial-scale-1);
text-align: center;
}
.description {
font-size: 1rem;
line-height: calc(24em/16);
font-size: var(--type-scale-1);
line-height: var(--spatial-scale-5);
}
.image {
margin: 0 15%;
margin: var(--spatial-scale-1) 15%;
& > img {
width: 100%;
}
}
.subhead {
font-size: calc(24rem/16);
font-size: var(--type-scale-2);
font-weight: 400;
line-height: 1.26667em;
margin: 1.16667em 0 .66667em;
line-height: 1.375em;
margin: var(--spatial-scale-2) 0 var(--spatial-scale-1);
text-align: center;
}
@media (--viewport-small) {
@@ -69,6 +68,7 @@ export default AnthologyHero
@media (--viewport-medium) {
.AnthologyHero {
display: flex;
flex-direction: column;
height: 25.5rem;
justify-content: center;
overflow: hidden;
@@ -81,7 +81,11 @@ export default AnthologyHero
}
.subhead {
display: none;
}
}
.description {
font-size: var(--type-scale-0);
line-height: var(--spatial-scale-3);
}
.image {
margin: 0;
position: absolute;
@@ -93,7 +97,7 @@ export default AnthologyHero
/* Modification classes */
.Anthology--inroads {
& .title {
font-size: calc(48rem/16) !important;
font-size: var(--type-scale-4) !important;
}
}
}
@@ -40,11 +40,8 @@ export default AnthologyItem
background-color: var(--white);
border-radius: calc(8rem/16);
color: var(--gray-400);
margin: calc(12rem/16) 0;
padding: 1rem;
&:first-of-type {
margin-top: calc(15rem/16);
}
margin: var(--spatial-scale-2) 0;
padding: var(--spatial-scale-3) var(--spatial-scale-1) var(--spatial-scale-1);
& .type {
color: var(--gray-600);
}
@@ -54,13 +51,14 @@ export default AnthologyItem
}
}
.description {
margin: calc(5rem/16) 0 calc(15rem/16) 0;
margin: 0 0 var(--spatial-scale-1) 0;
}
@media (--viewport-small) {
.AnthologyItem {
max-width: 30rem;
margin-right: auto;
margin-left: auto;
padding: var(--type-scale-1);
& .cta {
max-width: 20rem;
@@ -76,12 +74,9 @@ export default AnthologyItem
display: flex;
flex-direction: column;
flex-basis: 50%;
padding: 4rem 0 4.25rem 0;
padding: var(--spatial-scale-8) 0 var(--spatial-scale-8) 0;
margin: 0;
max-width: none;
&:first-of-type {
margin-top: 0;
}
&:nth-child(2n+1) {
background: var(--bg-blue-600);
}
@@ -90,6 +85,10 @@ export default AnthologyItem
}
& .type {
color: inherit;
font-size: var(--type-scale-00);
line-height: var(--spatial-scale-00);
}
& .description {
}
& .cta {
background-color: var(--white);
@@ -43,17 +43,17 @@ export default BlogPost
.text {
margin: 0 auto;
max-width: 30rem;
padding: 3rem 1.25rem;
padding: var(--spatial-scale-5) var(--spatial-scale-2);
}
.title {
font-size: calc(26rem/16);
line-height: calc(32em/26);
font-size: var(--type-scale-2);
line-height: var(--spatial-scale-5);
margin-top: 0;
margin-bottom: var(--spatial-scale-2);
}
.cta {
max-width: 20rem;
margin-left: auto;
margin-right: auto;
margin: var(--spatial-scale-3) auto 0;
}
</style>

ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.