:root{--text-font:Rubik;--heading-font:Lato, Helvetica, sans-serif;--code-font:"Source Code Pro", "Lucida Console", monospace;--bg-color:#fafafa;--fg-color:#212121;--alt-bg-color:#e0e0e0;--alt-fg-color:#000;--link-color:#1565c0}*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:var(--fg-color);background-color:var(--bg-color);font-family:var(--text-font);font-size:1.9em;font-weight:300;line-height:1.65em;@media only screen and (max-width:768px){font-size: 1.6em; line-height: 1.6em; } } a { font-weight: 300; color: var(--link-color); text-decoration: none; &:focus,&:hover { text-decoration: underline; } } p { margin: 2rem 0; } h1,h2,h3,h4,h5,h6 { font-family: var(--heading-font); font-weight: 700; color: var(--alt-fg-color); margin: 6.4rem 0 3.2rem 0; } h2,h3,h4,h5,hr { clear: both; } h1 { margin-top: 0.5rem; font-size: 3.2rem; line-height: 3.6rem; @media only screen and (max-width: 768px) { font-size: 3rem; line-height: 3.4rem; } } h2 { font-size: 2.8rem; line-height: 3.2rem; @media only screen and (max-width: 768px) { font-size: 2.6rem; line-height: 3rem; } } h3 { margin-top: 3rem; margin-bottom: 1.5rem; color: #707070; font-size: 2.4rem; line-height: 2.8rem; @media only screen and (max-width: 768px) { font-size: 2.2rem; line-height: 2.6rem; } } h4 { font-size: 2.2rem; line-height: 2.6rem; margin-top: 2rem; margin-bottom: 1.4rem; @media only screen and (max-width: 768px) { font-size: 2rem; line-height: 2.4rem; } } h5 { font-size: 2rem; line-height: 2.4rem; @media only screen and (max-width: 768px) { font-size: 1.8rem; line-height: 2.2rem; } } h6 { font-size: 1.8rem; line-height: 2.2rem; @media only screen and (max-width: 768px) { font-size: 1.6rem; line-height: 2rem; } } b,strong { font-weight: 700; } pre { display: block; font-family: var(--code-font); font-size: 1.6rem; font-weight: 400; line-height: 2.6rem; margin: 2rem 0; padding: 2rem; overflow-x: auto; code { display: inline-block; background-color: inherit; color: inherit; } } code { font-family: var(--code-font); font-size: 1.6rem; font-weight: 400; background-color: var(--alt-bg-color); color: var(--fg-color); padding: 0.2rem 0.4rem; } blockquote { border-left: 2px solid var(--alt-bg-color); padding-left: 2rem; line-height: 2.8rem; font-weight: 400; font-style: italic; } table { border-collapse: collapse; max-width: 100%; width: fit-content; overflow-x: auto; display: block; td,th { padding: 1.6rem; border: 2px solid var(--alt-fg-color); } tr { &:first-child th{border-top:0}&:last-child td{border-bottom:0}td,th{&:first-child { border-left:0; } &:last-child { border-right:0; }}}}img{max-width:100%}.wrapper{display:flex;flex-direction:column;min-height:100vh;width:100%}.container{margin:0 auto;max-width:90rem;width:100%;padding-left:2rem;padding-right:2rem}.fab{font-weight:400}.fas{font-weight:900}hr{margin-top:50px}article{word-wrap:break-word}.hanchor{visibility:hidden;color:#3d9be7;&:hover { visibility:hidden; color:rgb(15,81,134); }}h1,h2,h3,h4{&:hover .hanchor { visibility:visible; text-decoration:none; }}.btn-primary{width:100%;float:none;color:#fff;background:#0d6db8;border-radius:3px;cursor:pointer;border:none;text-shadow:none}.list{.blurb-list { li { display: flex; flex-direction: column; @media screen and (min-width: 768px) { flex-direction: row; } .date { text-align: left; margin: 0; } h2 { margin: 0 0 0.5rem 0 !important; } } img { object-fit: contain; max-width: 100%; @media screen and (min-width: 768px) { max-height: 200px; } } .img-wrapper { display: flex; justify-content: center; @media screen and (min-width: 768px) { display: block; margin-right: 2.5rem; min-width: 280px; max-width: 280px; } } &.book-reports-list { li { margin: 2rem 0; @media screen and (min-width: 768px) { margin-bottom: 3rem; display: flex; flex-direction: column; } .summary { @media screen and (min-width: 768px) { display: flex; flex-direction: row; } } .title { font-size: 24pt !important; margin-bottom: 3rem !important; a { text-decoration: none; font-weight: 700; } } img { @media screen and (min-width: 768px) { max-height: inherit; } } } .img-wrapper { display: flex; justify-content: center; @media screen and (min-width: 768px) { justify-content: flex-start; margin-right: 2.5rem; min-width: 260px; max-width: 260px; } } .full-review-link { display: block; text-align: center; text-decoration: none; font-size: 1.1em; background-color: rgb(225, 255, 208); border: 1px solid rgb(119, 197, 119); padding: 1rem 2rem; margin: 0 auto; @media screen and (min-width: 768px) { display: inline-block; } } } } .posts-list { li { border-bottom: 1px solid rgba(177, 177, 177, 0.623); margin: 0 0 4rem 0; @media screen and (min-width: 768px) { padding-bottom: 2rem !important; } } } ul { margin: 3.2rem 0; list-style: none; padding: 0; li { font-size: 1.8rem; @media only screen and (max-width: 768px) { margin: 1.6rem 0; } .date { display: inline-block; width: 20rem; text-align: right; margin-right: 3rem; @media only screen and (max-width: 768px) { display: block; text-align: left; } } .title { font-size: 1.8rem; color: var(--fg-color); font-family: var(--heading-font); font-weight: 700; &:hover, &:focus { color: var(--link-color); } } } }}.book-reports{.book-cover { @media screen and (min-width: 768px) { max-width: 300px; padding-right: 1rem; margin: 0 3rem 0 0 !important; } }}.centered{display:flex;align-items:center;justify-content:center;.about { text-align: center; h1 { margin-top: 2rem; margin-bottom: 0.5rem; } h2 { margin-top: 1rem; margin-bottom: 0.5rem; font-size: 2.4rem; @media only screen and (max-width: 768px) { font-size: 2rem; } } ul { list-style: none; margin: 3rem 0 1rem 0; padding: 0; li { display: inline-block; position: relative; a { color: var(--fg-color); text-transform: uppercase; margin-left: 1rem; margin-right: 1rem; font-size: 1.6rem; &:hover, &:focus { color: var(--link-color); } @media only screen and (max-width: 768px) { font-size: 1.4rem; } i { font-size: 3.2rem; } } } } } .error { text-align: center; h1 { margin-top: 2rem; margin-bottom: 0.5rem; font-size: 4.6rem; @media only screen and (max-width: 768px) { font-size: 3.2rem; } } h2 { margin-top: 2rem; margin-bottom: 3.2rem; font-size: 3.2rem; @media only screen and (max-width: 768px) { font-size: 2.8rem; } } }}.content{flex:1;display:flex;margin-top:.5rem;margin-bottom:3.2rem;article { header { margin-top: 0.25rem; margin-bottom: 0.5rem; h1 { font-size: 4.2rem; line-height: 4.6rem; margin: 0; @media only screen and (max-width: 768px) { font-size: 2.8rem; line-height: 3rem; } } } > h2:first-of-type { margin-top: 1rem; } footer { margin-top: 4rem; .see-also { margin: 3.2rem 0; h3 { margin: 3.2rem 0; } } } } header .header-meta, header .tags { margin-left: 0; margin-right: 1.5rem; } header .tags { display: inline; } .post { .post-title { margin-bottom: 0.75em; } .post-meta i { text-align: center; width: 1.6rem; margin-left: 0; margin-right: 0.5rem; } } figure { margin: 0; padding: 0; & + figure { margin-top: 3rem; } &.gallery .img-container { display: flex; flex-direction: column; @media screen and (min-width: 768px) { flex-direction: row; img { max-width: 99%; } } } } figcaption { p { text-align: center; font-style: normal; font-size: 1.6rem; margin: 0; } code { font-size: 1.5rem; background-color: unset; padding: 0; } } .img { max-width: 100%; margin-left: auto; margin-right: auto; } .video { display: flex; justify-content: center; margin-left: auto; margin-right: auto; max-width: 100%; } video { max-width: 100%; } .img-border { border: 1px solid rgba(177, 177, 177, 0.76); } table + .img { margin-top: 3rem; } .align-left { @media screen and (min-width: 768px) { float: left; margin-right: 1em !important; margin-top: 1em !important; } } .align-right { @media screen and (min-width: 768px) { float: right; margin-left: 1em !important; margin-top: 1em !important; } } .notice { margin: 2em 0 !important; padding: 1em; color: #494e52; font-size: 0.8em !important; border-radius: 4px; text-indent: initial; clear: both; h5 { margin-top: 1rem; } } .notice.notice-info { background-color: #eef7fa; box-shadow: 0 1px 1px rgba(82, 173, 200, 0.25); } .notice.notice-warning { background-color: #fef4e6; box-shadow: 0 1px 1px rgba(248, 148, 6, 0.25); } .notice.notice-danger { background-color: #fdefef; box-shadow: 0 1px 1px rgba(238, 95, 91, 0.25); } .inline-file { clear: both; margin-bottom: 65px; .download-raw-button { border-width: 1px; border-style: solid; border-color: #f2f3f3; border-top: 0; border-radius: 0 0 4px 4px; background-color: #fafafa; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125); margin-top: -20px; z-index: 10; position: relative; padding: 0.5em 1em; float: right; margin-left: 1em; font-size: 0.6875em; } } .twitter-tweet { margin: 0 auto; }}.footer{width:100%;text-align:center;line-height:2rem;margin-bottom:1rem;& a { color: var(--link-color); } & .creative-commons-license { margin-top: 1rem; } & ul { list-style: none; margin: 3rem 0 1rem; padding: 0; & li { display: inline-block; position: relative; & a { color: #212121; text-transform: uppercase; margin-left: 1rem; margin-right: 1rem; font-size: 1.6rem; } } }}.navigation{height:6rem;width:100%;& a, & span { display: inline; font-size: 1.6rem; font-family: var(--heading-font); font-weight: 700; line-height: 6rem; color: var(--fg-color); } & a:hover, & a:focus { color: var(--link-color); } & .navigation-title { letter-spacing: 0.1rem; text-transform: uppercase; } & .navigation-list { float: right; list-style: none; margin-bottom: 0; margin-top: 0; & .navigation-item { float: left; margin: 0; position: relative; & a, & span { margin-left: 1rem; margin-right: 1rem; } } @media only screen and (max-width: 768px) { position: absolute; top: 6rem; right: 0; z-index: 5; visibility: hidden; opacity: 0; padding: 0; max-height: 0; width: 100%; background-color: var(--bg-color); border-top: solid 2px var(--alt-bg-color); border-bottom: solid 2px var(--alt-bg-color); transition: opacity 0.25s, max-height 0.15s linear; & .navigation-item { float: none !important; text-align: center; & a, & span { line-height: 5rem; } } & .menu-separator { border-top: 2px solid var(--fg-color); margin: 0 8rem; & span { display: none; } } } } & #menu-toggle { display: none; @media only screen and (max-width: 768px) { &:checked + label { color: var(--alt-bg-color); } &:checked + label + ul { visibility: visible; opacity: 1; max-height: 100rem; } } } & .menu-button { display: none; @media only screen and (max-width: 768px) { display: block; font-size: 2.4rem; font-weight: 400; line-height: 6rem; color: var(--fg-color); cursor: pointer; &:hover, &:focus { color: var(--link-color); } } } .float-right { float: right; }}.navigation{height:6rem;width:100%;& a, & span { display: inline; font-size: 1.6rem; font-family: var(--heading-font); font-weight: 700; line-height: 6rem; color: var(--fg-color); } & a:hover, & a:focus { color: var(--link-color); } & .navigation-title { letter-spacing: 0.1rem; text-transform: uppercase; } & .navigation-list { float: right; list-style: none; margin-bottom: 0; margin-top: 0; & .navigation-item { float: left; margin: 0; position: relative; & a, & span { margin-left: 1rem; margin-right: 1rem; } } } & #menu-toggle { display: none; } & .menu-button { display: none; } @media only screen and (max-width: 768px) { & .navigation-list { position: absolute; top: 6rem; right: 0; z-index: 5; visibility: hidden; opacity: 0; padding: 0; max-height: 0; width: 100%; background-color: var(--bg-color); border-top: solid 2px var(--alt-bg-color); border-bottom: solid 2px var(--alt-bg-color); transition: opacity 0.25s, max-height 0.15s linear; & .navigation-item { float: none !important; text-align: center; & a, & span { line-height: 5rem; } } & .menu-separator { border-top: 2px solid var(--fg-color); margin: 0 8rem; & span { display: none; } } } & #menu-toggle:checked + label { color: var(--alt-bg-color); } & #menu-toggle:checked + label + ul { visibility: visible; opacity: 1; max-height: 100rem; } & .menu-button { display: block; font-size: 2.4rem; font-weight: 400; line-height: 6rem; color: var(--fg-color); cursor: pointer; &:hover, &:focus { color: var(--link-color); } } }}.navigation-author{display:inline-flex;flex-direction:row;justify-content:center;align-items:center}.navigation-avatar{display:inline-block!important;max-width:50px;max-height:50px}.navigation-avatar img{max-width:100%;object-fit:contain;border-radius:30%}.navigation-author .name{margin-left:1rem;font-size:1.5em;text-decoration:none;font-weight:100}.refactoring-english-box{background:#d3ffca;font-family:helvetica neue,Helvetica,Arial,Verdana,sans-serif;color:#5c4033;border:1px solid #a6ed99;text-align:center;width:100%;margin-bottom:10rem;font-size:1.05em;padding:1rem;display:flex;flex-direction:column;justify-content:center}@media screen and (min-width:768px){.refactoring-english-box{margin-top:0;padding:3rem}}.refactoring-english-box h2{margin-top:.75rem;font-size:1.5em;color:#5c4033}@media screen and (min-width:768px){.refactoring-english-box h2{font-size:1.4em}}.refactoring-english-box p{margin-top:1rem;font-size:.9em}.refactoring-english-box ul{text-align:left;margin-left:auto;margin-right:auto;font-size:1em;padding-top:0;margin-top:0}.refactoring-english-box ul li{list-style-type:none;position:relative;padding-left:1.5em}.refactoring-english-box ul li:before{content:"✓";color:green;position:absolute;left:0}.refactoring-english-box .btn-primary{font-size:1.2em;padding:1.5rem;margin-top:3rem;display:block;text-align:center}.refactoring-english-box a:hover{text-decoration:none}.retrospectives{.prev-next-links { display: flex; flex-direction: row; justify-content: space-between; margin: 1rem 0; a { background-color: #d6d6d6; color: black; padding: 0.5rem 2rem; border: 1px solid #666; border-radius: 4px; &:hover { background-color: #ccc; color: black; text-decoration: none; } } } .list { li { margin-bottom: 2rem; @media screen and (min-width: 768px) { display: flex; } .title { font-size: 1.4em; text-decoration: none; } } } .finances-chart { margin-bottom: 5rem; }}.subscribe-container{background:#f9f9f9;font-family:helvetica neue,Helvetica,Arial,Verdana,sans-serif;line-height:1.5em;overflow:hidden;color:#666;font-size:16px;border:1px solid #d1d1d1;box-shadow:none;clear:both;margin:20px 0;text-align:center;width:100%;max-width:100%;h3 { text-align: center; margin: 0px 0px 10px; font-size: 28px; } form { background-color: inherit; } .subscribe-container-inner { width: 100%; float: left; padding: 3rem; } input[type="email"] { width: 100%; float: none; margin-top: 5px; font-size: 18px; padding: 10px 8px; border: 1px solid #d6d6d6; border-radius: 3px; background-color: #fff; margin-bottom: 5px; height: 42px; &:focus { outline: none; border-color: #aaa; } } .subscribe-topic { display: flex; flex-direction: column; text-align: left; margin-top: 2rem; margin-bottom: 2rem; } .btn-primary { margin-top: 5px; padding: 11px 0px; font-size: 18px; height: 42px; }}.btn-social{color:#fff;border-radius:5px;padding:1rem;margin-right:1rem}.btn-social:hover{text-decoration:none}.btn-social span{display:none}@media screen and (min-width:768px){.btn-social span{display:inline-block}}.btn-twitter{background-color:#007bb6}.btn-twitter:hover{background-color:#016594}.btn-facebook{background-color:#3b5998}.btn-facebook:hover{background-color:#264079}.btn-linkedin{background-color:#007bb6}.btn-linkedin:hover{background-color:#016796}.btn-hacker-news{background-color:#f60}.btn-hacker-news:hover{background-color:#c95609}.btn-reddit{background-color:#ff5700}.btn-reddit:hover{background-color:#e24d02}.btn-indie-hackers{background-color:#203b55}.btn-indie-hackers:hover{background-color:#2c5c83}.btn-indie-hackers i{background-image:url(/images/social/indie-hackers.svg);background-position:50%}.tag{font-size:.8em;margin-left:1rem;padding:.5rem;&:hover { text-decoration:none; }}.tag-posts{background-color:#e3ffe8}.tag-retrospectives{background-color:#fffade}.tag-book-reports,.tag-notes{background-color:#f5ebfa}