@import "variables.less"; h1, h2, h3, h4, h5, h6 { font-weight: 300; line-height: 1.1em; } h1{ font-size: 2.4em } h2 { font-size: 2em } h3 { font-size: 1.6em } h4 { font-size: 1.36em } h5 { font-size: 1.2em } h6 { font-size: 1.1em } @font-face { font-family: Biolinum; src: url('/theme/fonts/biolinum/LinBiolinum_R.ttf'); } svg.icon { display: inline; width: 1.5em; height: 1.5em; fill: #ffffff; margin: 0.2em; vertical-align: middle; } body { margin: 0; padding: 0; background-color: @body-bg; color: @text-color; font-family: Biolinum; font-size: 16pt; line-height: 1.6em; flex-flow: vertical wrap; justify-content: center; display: flex; } :focus { box-shadow: 0 0 0.2em 0.2em @focus-color; } a { color: @link-color; text-decoration: none; } a:hover { color: @link-hover-color; } hr { color: @light-grey; background-color: @light-grey; height: 0.1em; border: none; margin-top: 1em; margin-bottom: 1em; } img { max-width: 100%; } body > header { display: flex; width: 100vw; background-color: @header-bg; color: @header-text-color; align-items: center; flex-flow: row wrap; padding-top: 0.3em; box-shadow: 0 0.3em @header-border-color, 0 0 0.3em 0.4em @header-bg; z-index: 1000; a { color: @header-link-color; } a:hover { color: @header-link-hover-color; } margin: 0; img { border-radius: 50%; max-width: 7em; } > h1 { margin: 0.3em 0 0.3em 0; flex-grow: 1; } p { margin: 0 0 1em 0; } > nav { flex-grow: 1; flex-flow: row wrap; ul { display: flex; flex-flow: row wrap; justify-content: center; li { display: flex; line-height: 1.6em; font-size: 1.28em; padding: 0.5em; } } } } main { a, input { word-break: none; hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; } nav { text-align: center; text-transform: uppercase; font-size: .72em; padding: 1em 0 1em 0; border-bottom: @nav-border-color 0.1em solid; a { padding: 0 0.5em 0 0.5em; border-right: @nav-border-color 0.1em solid; } :first-child { border-left: @nav-border-color 0.1em solid; } } .pagination { margin: 4% 8% 2% 8%; height: 1em; } .social-share { p { font-size: .8em; } } article { margin: 0 8% 2% 8%; header { h1, h2 { margin-bottom: 0; margin-top: 0; } p { color: @article-header-text-color; font-size: 0.86em; text-indent: 0; } } p { text-indent: 1.2em; line-height: 1.8em; margin: 0 0 0.5em 0; max-width: 80ex; } code, kbd, samp, pre { font-family: @mono; } blockquote, pre { background-color: rgba(128,128,128,0.05); border-top-right-radius: 0.3em; border-bottom-right-radius: 0.3em; border-left: 8px solid rgba(128,128,128,0.075); border-left-width: 0.5em; } blockquote { padding: 0.5em 1em; font-weight: 300; font-size: 1.1em; } pre { padding: 0.3em; font-size: .9em; overflow-x: auto; } samp { white-space: pre; display: block; overflow-x: auto; } kbd { padding: .1em .6em; border: 0.1em solid rgba(63,63,63,0.25); box-shadow: 0 0.1em 0 rgba(63,63,63,0.25); background-color: #fff; color: #333; border-radius: 0.3em; display: inline-block; margin: 0 .1em; white-space: nowrap; font-size: .78em; } code { font-size: .8em; white-space: nowrap; color: #c25; padding: 0.1em 0.3em; background-color: #f7f7f9; border: 0.1em solid #e1e1e8; border-radius: 0.3em; } .comment-count { font-size: .8em; } table { border-collapse: collapse; border-spacing: 0; thead:first-child tr:first-child th { border-top: 0; } th, td { padding: 0.5em; line-height: eem; vertical-align: top; border-top: 0.1em solid #ddd; } } } word-break: break-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; box-shadow: 0 0 0.2em 0.2em @med-grey; max-width: 180ex; min-width: 50vw; margin: 0 10vw 0 10vw; padding: 2em; z-index: 10; } body > footer { padding-top: 0.3em; box-shadow: 0 -0.3em @footer-border-color, 0 0 0.3em 0.4em @footer-bg; background-color: @footer-bg; color: @footer-text-color; text-align: center; width: 100vw; z-index: 100; a { color: @footer-link-color; } a:hover { color: @footer-link-hover-color; } p { margin: 0.2em; text-align: center; text-indent: 0; padding: 0 2em 0 2em; color: @footer-text-color; } } .tag-cloud { a { background-color: @tag-bg; padding: .2em .6em .2em; font-size: .74em; line-height: 0.1em; color: @tag-text-color; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; } a:hover { background-color: @tag-hover-color; } } a.btn { background-color: @btn-bg; padding: .6em .6em; font-size: .8em; line-height: 0.1em; color: @btn-text-color; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; } a.btn:hover { background-color: @btn-hover-color; } .center, .text-center { text-align: center; } .img-center { margin-left: auto; margin-right: auto; display: block; } .float-right { float: right; } div.related-posts { margin: 1em 0 1em 0; padding-bottom: 1em; border-top: @rel-post-border-color 0.1em solid; border-bottom: @rel-post-border-color 0.1em solid; h4 { margin: 1em 0 1em 0; } ul { font-size: 1.1em; padding-left: 12px; li { padding: 0.5em 0 0.5em 0; } } } nav.language-selector { display: flex; flex-flow: row; align-items: center; } ul.list, ul.social, ul.related-posts, nav.language-selector ul { list-style-type: none; margin: 0.3em; padding: 0; } ul.list, nav.language-selector ul { padding: 1em 0 1em 0; li { padding: 0.5em; } } ul.social { font-size: 0.9em; display: flex; flex-flow: row wrap; justify-content: center; li { margin: 0.5em; } a:hover { z-index: 2; -webkit-transform: translateY(-0.5em); transform: translateY(-0.5em); color: white; } a { display: inline-block; height: 2em; border-radius: 2em; text-align: center; line-height: 2em; padding-left: 0.5em; padding-right: 0.5em; color: white; } a.sc-facebook { border: 0.2em solid @facebook-bg-color; svg.icon { fill: @facebook-bg-color; } } a.sc-google { border: 0.2em solid @google-bg-color; svg.icon { fill: @google-bg-color; } } a.sc-pinterest { border: 0.2em solid @pinterest-bg-color; svg.icon { fill: @pinterest-bg-color; } } a.sc-linkedin { border: 0.2em solid @linkedin-bg-color; svg.icon { fill: @linkedin-bg-color; } } a.sc-rss { border: 0.2em solid @rss-bg-color; svg.icon { fill: @rss-bg-color; } } a.sc-stack-overflow { border: 0.2em solid @stack-overflow-bg-color; svg.icon { fill: @stack-overflow-bg-color; } } a.sc-mastodon { border: 0.2em solid @mastodon-bg-color; svg.icon { fill: @mastodon-bg-color; } } a.sc-diaspora { border: 0.2em solid @diaspora-bg-color; svg.icon { fill: @diaspora-bg-color; } } a.sc-twitter { border: 0.2em solid @twitter-bg-color; svg.icon { fill: @twitter-bg-color; } } a.sc-youtube { border: 0.2em solid @youtube-bg-color; svg.icon { fill: @youtube-bg-color; } } a.sc-git, a.sc-git-alt { border: 0.2em solid @github-bg-color; svg.icon { fill: @github-bg-color; } } a.sc-github, a.sc-github-alt { border: 0.2em solid @github-bg-color; svg.icon { fill: @github-bg-color; } } a.sc-email { border: 0.2em solid @email-bg-color; svg.icon { fill: @email-bg-color; } } a.sc-reddit { border: 0.2em solid @reddit-bg-color; svg.icon { fill: @reddit-bg-color; } } a.sc-soundcloud { border: 0.2em solid @soundcloud-bg-color; svg.icon { fill: @soundcloud-bg-color; } } } main ul.social a { color: @text-color; &:hover { color: @text-color; } } .ads-header { display: inline-block; width: 70%; }