diff --git a/less/admin.less b/less/admin.less index d9d659e..86dc9ff 100644 --- a/less/admin.less +++ b/less/admin.less @@ -1,86 +1,99 @@ .edit-page { font-size: 1em; min-height: 12em; } header.admin { margin: 0; h1 + a { margin-left: 1em; } } nav#admin { display: block; margin: 0.5em 0; a { margin-left: 0; .rounded(.25em); border: 0; &.selected { background: #dedede; font-weight: bold; .blip { color: black; } } } .blip { font-weight: bold; } } .pager { display: flex; justify-content: center; + &:not(.pages) { + display: block; + margin: 0.5em 0; + a { + margin-left: 0; + .rounded(.25em); + + &+a { + margin-left: 0.5em; + } + } + } + a { color: #333; font-family: @sansFont; font-size: 0.86em; padding: 0.5em 1em; border: 1px solid #ccc; &:hover { text-decoration: none; background: #efefef; } &.selected { cursor: default; background: #ccc; } } } .admin-actions { .btn { font-family: @sansFont; font-size: 0.86em; } } .features { margin: 1em 0; div { &:first-child { font-weight: bold; } &+div { padding-left: 1em; } p { font-weight: normal; margin: 0.5rem 0; font-size: 0.86em; color: #666; } } } @media (max-width: 600px) { div.row.features { align-items: start; } .features div + div { padding-left: 0; } } \ No newline at end of file diff --git a/less/core.less b/less/core.less index b502c5d..85e97e6 100644 --- a/less/core.less +++ b/less/core.less @@ -1,1549 +1,1576 @@ @primary: rgb(114, 120, 191); @secondary: rgb(114, 191, 133); @subheaders: #444; @headerTextColor: black; @sansFont: 'Open Sans', 'Segoe UI', Tahoma, Arial, sans-serif; @serifFont: Lora, 'Palatino Linotype', 'Book Antiqua', 'New York', 'DejaVu serif', serif; @monoFont: Hack, consolas, Menlo-Regular, Menlo, Monaco, 'ubuntu mono', monospace, monospace; @dangerCol: #e21d27; @errUrgentCol: #ecc63c; @proSelectedCol: #71D571; @textLinkColor: rgb(0, 0, 238); body { font-family: @serifFont; font-size-adjust: 0.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: white; color: #111; h1, header h2 { a { color: @headerTextColor; .transition-duration(0.2s); &:hover { color: #303030; text-decoration: none; } } } h1, h2, h3 { line-height: 1.2; } &#post article, &#collection article p, &#subpage article p { display: block; unicode-bidi: embed; white-space: pre; } &#post { #wrapper, pre { max-width: 40em; margin: 0 auto; a:hover { text-decoration: underline; } } blockquote { p + p { margin: -2em 0 0.5em; } } article { margin-bottom: 2em !important; h1, h2, h3, h4, h5, h6, p, ul, ol, code { display: inline; margin: 0; } hr + p, ol, ul { display: block; margin-top: -1rem; margin-bottom: -1rem; } ol, ul { margin: 2rem 0 -1rem; ol, ul { margin: 1.25rem 0 -0.5rem; } } li { margin-top: -0.5rem; margin-bottom: -0.5rem; } h2#title { .article-title; } h1 { font-size: 1.5em; } h2 { font-size: 1.4em; } } header { nav { span, a { &.pinned { &.selected { font-weight: bold; } &+.views { margin-left: 2em; } } } } } .owner-visible { display: none; } } &#post, &#collection, &#subpage { code { .article-code; } img, video, audio { max-width: 100%; } audio { width: 100%; white-space: initial; } pre { .code-block; code { background: transparent; border: 0; padding: 0; font-size: 1em; white-space: pre-wrap; /* CSS 3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } } blockquote { .article-blockquote; } article { hr { margin-top: 0; margin-bottom: 0; } p.badge { background-color: #aaa; display: inline-block; padding: 0.25em 0.5em; margin: 0; float: right; color: white; .rounded(.25em); } } header { nav { span, a { &.pinned { &+.pinned { margin-left: 1.5em; } } } } } footer { nav { a { margin-top: 0; } } } } &#collection { #welcome, .access { margin: 0 auto; max-width: 35em; h2 { font-weight: normal; margin-bottom: 1em; } p { font-size: 1.2em; line-height: 1.6; } } .access { margin: 8em auto; text-align: center; h2, ul.errors { font-size: 1.2em; margin-bottom: 1.5em !important; } } header { padding: 0 1em; text-align: center; max-width: 50em; margin: 3em auto 4em; .writeas-prefix { a { color: #aaa; } display: block; margin-bottom: 0.5em; } nav { display: block; margin: 1em 0; a:first-child { margin: 0; } } } nav#manage { position: absolute; top: 1em; left: 1.5em; li a.write { font-family: @serifFont; padding-top: 0.2em; padding-bottom: 0.2em; } } pre { line-height: 1.5; } } &#subpage { #wrapper { h1 { font-size: 2.5em; letter-spacing: -2px; padding: 0 2rem 2rem; } } } &#post { pre { font-size: 0.75em; } } &#collection, &#subpage { #wrapper { margin-left: auto; margin-right: auto; article { margin-bottom: 4em; &:hover { .hidden { .opacity(1); } } } h2 { margin-top: 0em; margin-bottom: 0.25em; &+time { display: block; margin-top: 0.25em; margin-bottom: 0.25em; } } time { font-size: 1.1em; &+p { margin-top: 0.25em; } } footer { text-align: left; padding: 0; } } #paging { overflow: visible; padding: 1em 6em 0; } a.read-more { color: #666; } } &#me #official-writing { h2 { font-weight: normal; a { font-size: 0.6em; margin-left: 1em; } a[name] { margin-left: 0; } a:link, a:visited { color: @textLinkColor; } a:hover { text-decoration: underline; } } } &#promo { div.heading { margin: 8em 0; } div.heading, div.attention-form { h1 { font-size: 3.5em; } input { padding-left: 0.75em; padding-right: 0.75em; &[type=email] { max-width: 16em; } &[type=submit] { padding-left: 1.5em; padding-right: 1.5em; } } } h2 { margin-bottom: 0; font-size: 1.8em; font-weight: normal; span.write-as { color: black; } &.soon { color: lighten(@subheaders, 50%); span { &.write-as { color: lighten(#000, 50%); } &.note { color: lighten(#333, 50%); font-variant: small-caps; margin-left: 0.5em; } } } } .half-col a { margin-left: 1em; margin-right: 1em; } } nav#top-nav { display: inline; position: absolute; top: 1.5em; right: 1.5em; font-size: 0.95rem; font-family: @sansFont; text-transform: uppercase; a { color: #777; } a + a { margin-left: 1em; } } footer { nav, ul { a { display: inline-block; margin-top: 0.8em; .transition-duration(0.1s); text-decoration: none; + a { margin-left: 0.8em; } &:link, &:visited { color: #999; } &:hover { color: #666; text-decoration: none; } } } a.home { &:link, &:visited { color: #333; } font-weight: bold; text-decoration: none; &:hover { color: #000; } } ul { list-style: none; text-align: left; padding-left: 0 !important; margin-left: 0 !important; .icons img { height: 16px; width: 16px; fill: #999; } } } } nav#full-nav { margin: 0; .left-side { display: inline-block; a:first-child { margin-left: 0; } } .right-side { float: right; } } nav#full-nav a.simple-btn, .tool button { font-family: @sansFont; border: 1px solid #ccc !important; padding: .5rem 1rem; margin: 0; .rounded(.25em); text-decoration: none; } +#user-nav { + a:link, a:visited, a:hover { + color: @primary; + } + >a:hover { + text-decoration: underline !important; + } +} + .post-title { a { &:link { color: #333; } &:visited { color: #444; } } time, time a:link, time a:visited, &+.time { color: #999; } } .hidden { -moz-transition-property: opacity; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; .transition-duration(0.4s); .opacity(0); } a { text-decoration: none; &:hover { text-decoration: underline; } &.subdued { color: #999; &:hover { border-bottom: 1px solid #999; text-decoration: none; } } &.danger { color: @dangerCol; font-size: 0.86em; } &.simple-cta { text-decoration: none; border-bottom: 1px solid #ccc; color: #333; padding-bottom: 2px; &:hover { text-decoration: none; } } &.action-btn { font-family: @sansFont; text-transform: uppercase; .rounded(.25em); background-color: red; color: white; font-weight: bold; padding: 0.5em 0.75em; &:hover { background-color: lighten(#f00, 5%); text-decoration: none; } } &.hashtag:hover { text-decoration: none; span + span { text-decoration: underline; } } &.hashtag { span:first-child { color: #999; margin-right: 0.1em; font-size: 0.86em; text-decoration: none; } } } abbr { border-bottom: 1px dotted #999; text-decoration: none; cursor: help; } body#collection article p, body#subpage article p { .article-p; } pre, body#post article, #post .alert, #subpage .alert, body#collection article, body#subpage article, body#subpage #wrapper h1 { max-width: 40rem; margin: 0 auto; } #collection header .alert, #post .alert, #subpage .alert { margin-bottom: 1em; p { text-align: left; line-height: 1.5; } } textarea, pre, body#post article, body#collection article p { &.norm, &.sans, &.wrap { line-height: 1.5; white-space: pre-wrap; /* CSS 3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } } textarea, pre, body#post article, body#collection article, body#subpage article, span, .font { &.norm { font-family: @serifFont; } &.sans { font-family: @sansFont; } &.mono, &.wrap, &.code { font-family: @monoFont; } &.mono, &.code { max-width: none !important; } } textarea { &.section { border: 1px solid #ccc; padding: 0.65em 0.75em; .rounded(.25em); &.codable { height: 12em; resize: vertical; } } } .ace_editor { height: 12em; border: 1px solid #333; max-width: initial; width: 100%; font-size: 0.86em !important; border: 1px solid #ccc; padding: 0.65em 0.75em; margin: 0; .rounded(.25em); } p { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; &.intro { font-size: 1.25em; text-align: center; } &.upgrade-prompt { font-size: 0.9em; color: #444; } &.text-cta { font-size: 1.2em; text-align: center; margin-bottom: 0.5em; &+ p { text-align: center; font-size: 0.7em; margin-top: 0; color: #666; } } &.error { font-style: italic; color: @errUrgentCol; } &.headeresque { font-size: 2em; } } table.classy { width: 95%; border-collapse: collapse; margin-bottom: 2em; tr + tr { border-top: 1px solid #ccc; } th { text-transform: uppercase; font-weight: normal; font-size: 95%; font-family: @sansFont; padding: 1rem 0.75rem; text-align: center; } td { height: 3.5rem; } p { margin-top: 0 !important; margin-bottom: 0 !important; } &.export { .disabled { color: #999; } .disabled, a { text-transform: lowercase; } } } article table { border-spacing: 0; border-collapse: collapse; width: 100%; th { border-width: 1px 1px 2px 1px; border-style: solid; border-color: #ccc; } td { border-width: 0 1px 1px 1px; border-style: solid; border-color: #ccc; padding: .25rem .5rem; } } body#collection article, body#subpage article { padding-top: 0; padding-bottom: 0; .book { h2 { font-size: 1.4em; } a.hidden.action { color: #666; float: right; font-size: 1em; margin-left: 1em; margin-bottom: 1em; } } } body#post article { p.badge { font-size: 0.9em; } } article { h2.post-title a[rel=nofollow]::after { content: '\a0 \2934'; } } table.downloads { width: 100%; td { text-align: center; } img.os { width: 48px; vertical-align: middle; margin-bottom: 6px; } } select.inputform, textarea.inputform { border: 1px solid #999; } input, button, select.inputform, textarea.inputform, a.btn { padding: 0.5em; font-family: @serifFont; font-size: 100%; .rounded(.25em); &[type=submit], &.submit, &.cta { border: 1px solid @primary; background: @primary; color: white; .transition(0.2s); &:hover { background-color: lighten(@primary, 3%); text-decoration: none; } &:disabled { cursor: default; background-color: desaturate(@primary, 100%) !important; border-color: desaturate(@primary, 100%) !important; } } &.error[type=text], textarea.error { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; } &.danger { border: 1px solid @dangerCol; background: @dangerCol; color: white; &:hover { background-color: lighten(@dangerCol, 3%); } } &.error[type=text]:focus, textarea.error:focus { box-shadow: 0 0 5px @errUrgentCol; border: 1px solid @errUrgentCol; } } +.btn.pager { + border: 1px solid @lightNavBorder; + font-size: .86em; + padding: .5em 1em; + white-space: nowrap; + font-family: @sansFont; + &:hover { + text-decoration: none; + background: @lightNavBorder; + } +} + div.flat-select { display: inline-block; position: relative; select { border: 0; background: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; } &.action { &:hover { label { text-decoration: underline; } } label, select { cursor: pointer; } } } input { &.underline{ border: none; border-bottom: 1px solid #ccc; padding: 0 .2em .2em; font-size: 0.9em; color: #333; } &.inline { padding: 0.2rem 0.2rem; margin-left: 0; font-size: 1em; border: 0 !important; border-bottom: 1px solid #999 !important; width: 7em; .rounded(0); } &[type=tel], &[type=text], &[type=email], &[type=password] { border: 1px solid #999; } &.boxy { border: 1px solid #999 !important; } } #beta, .content-container { max-width: 50em; margin: 0 auto 3em; font-size: 1.2em; &.tight { max-width: 30em; } &.snug { max-width: 40em; } .app { + .app { margin-top: 1.5em; } h2 { margin-bottom: 0.25em; } p { margin-top: 0.25em; } } h2.intro { font-weight: normal; } p { line-height: 1.5; } li { margin: 0.3em 0; } h2 { &.light { font-weight: normal; } a { .transition-duration(0.2s); -moz-transition-property: color; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; &:link, &:visited, &:hover { color: @subheaders; } &:hover { color: lighten(@subheaders, 10%); text-decoration: none; } } } } .content-container { &#pricing { button { cursor: pointer; color: white; margin-top: 1em; margin-bottom: 1em; padding-left: 1.5em; padding-right: 1.5em; border: 0; background: @primary; .rounded(.25em); .transition(0.2s); &:hover { background-color: lighten(@primary, 5%); } &.unselected { cursor: pointer; } } h2 span { font-weight: normal; } .half { margin: 0 0 1em 0; text-align: center; } } div.blurbs { >h2 { text-align: center; color: #333; font-weight: normal; } p.price { font-size: 1.2em; margin-bottom: 0; color: #333; margin-top: 0.5em; &+p { margin-top: 0; font-size: 0.8em; } } p.text-cta { font-size: 1em; } } } footer div.blurbs { display: flex; flex-flow: row; flex-wrap: wrap; } div.blurbs { .half, .third, .fourth { font-size: 0.86em; h3 { font-weight: normal; } p, ul { color: #595959; } hr { margin: 1em 0; } } .half { padding: 0 1em 0 0; width: ~"calc(50% - 1em)"; &+.half { padding: 0 0 0 1em; } } .third { padding: 0; width: ~"calc(33% - 1em)"; &+.third { padding: 0 0 0 1em; } } .fourth { flex: 1 1 25%; -webkit-flex: 1 1 25%; h3 { margin-bottom: 0.5em; } ul { margin-top: 0.5em; } } } .contain-me { text-align: left; margin: 0 auto 4em; max-width: 50em; h2 + p, h2 + p + p, p.describe-me { margin-left: 1.5em; margin-right: 1.5em; color: #333; } } footer.contain-me { font-size: 1.1em; } #official-writing, #wrapper { h2, h3, h4 { color: @subheaders; } ul { &.collections { + padding-left: 0; margin-left: 0; + h3 { + margin-top: 0; + font-weight: normal; + } li { &.collection { a.title { &:link, &:visited { color: @headerTextColor; } } } a.create { color: #444; } } & + p { margin-top: 2em; margin-left: 1em; } } } } #official-writing, #wrapper { h2 { &.major { color: #222; } &.bugfix { color: #666; } +.android-version { a { color: #999; &:hover { text-decoration: underline; } } } } } li { line-height: 1.5; .item-desc, .prog-lang { font-size: 0.6em; font-family: 'Open Sans', sans-serif; font-weight: bold; margin-left: 0.5em; margin-right: 0.5em; text-transform: uppercase; color: #999; } } .success { color: darken(@proSelectedCol, 20%); } .alert { padding: 1em; margin-bottom: 1.25em; border: 1px solid transparent; .rounded(.25em); &.info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } &.success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } p { margin: 0; &+p { margin-top: 0.5em; } } p.dismiss { font-family: @sansFont; text-align: right; font-size: 0.86em; text-transform: uppercase; } } ul.errors { padding: 0; text-indent: 0; li.urgent { list-style: none; font-style: italic; text-align: center; color: @errUrgentCol; a:link, a:visited { color: purple; } } li.info { list-style: none; font-size: 1.1em; text-align: center; } } body#pad #target a.upgrade-prompt { padding-left: 1em; padding-right: 1em; text-align: center; font-style: italic; color: @primary; } body#pad-sub #posts, .atoms { margin-top: 1.5em; h3 { margin-bottom: 0.25em; &+ h4 { margin-top: 0.25em; margin-bottom: 0.5em; &+ p { margin-top: 0.5em; } } .electron { font-weight: normal; - margin-left: 0.5em; + font-size: 0.86em; + margin-left: 0.75rem; } } h3, h4 { a { .transition-duration(0.2s); -moz-transition-property: color; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; } } h4 { font-size: 0.9em; font-weight: normal; } date, .electron { margin-right: 0.5em; } .action { font-size: 1em; } #more-posts p { text-align: center; font-size: 1.1em; } p { font-size: 0.86em; } .error { display: inline-block; font-size: 0.8em; font-style: italic; color: @errUrgentCol; strong { font-style: normal; } } .error + nav { display: inline-block; font-size: 0.8em; margin-left: 1em; a + a { margin-left: 0.75em; } } } h2 { a, time { &+.action { margin-left: 0.5em; } } } .action { font-size: 0.7em; font-weight: normal; font-family: @serifFont; &+ .action { margin-left: 0.5em; } &.new-post { font-weight: bold; } } article.moved { p { font-size: 1.2em; color: #999; } } span.as { .opacity(0.2); font-weight: normal; } span.ras { .opacity(0.6); font-weight: normal; } header { nav { .username { font-size: 2em; font-weight: normal; color: #555; } &#user-nav { margin-left: 0; & > a, .tabs > a { &.selected { cursor: default; font-weight: bold; &:hover { text-decoration: none; } } & + a { margin-left: 2em; } } a { font-size: 1.2em; font-family: @sansFont; span { font-size: 0.7em; color: #999; text-transform: uppercase; margin-left: 0.5em; margin-right: 0.5em; } &.title { font-size: 1.6em; font-family: @serifFont; font-weight: bold; } } nav > ul > li:first-child { &> a { display: inline-block; } img { position: relative; top: -0.5em; right: 0.3em; } } ul ul { font-size: 0.8em; a { padding-top: 0.25em; padding-bottom: 0.25em; } } li { line-height: 1.5; } } &.tabs { margin: 0 0 0 1em; } &+ nav.tabs { margin: 0; } } &.singleuser { margin: 0.5em 0.25em; nav#user-nav { nav > ul > li:first-child { img { top: -0.75em; } } } } .dash-nav { font-weight: bold; } } li#create-collection { display: none; h4 { margin-top: 0px; margin-bottom: 0px; } input[type=submit] { margin-left: 0.5em; } } #collection-options { .option { textarea { font-size: 0.86em; font-family: @monoFont; } .section > p.explain { font-size: 0.8em; } } } .img-placeholder { text-align: center; img { max-width: 100%; } } dl { &.admin-dl-horizontal { dt { font-weight: bolder; width: 360px; } dd { line-height: 1.5; } } } dt { float: left; clear: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } form { dt, dd { padding: 0.5rem 0; } dt { line-height: 1.8; } dd { font-size: 0.86em; line-height: 2; } &.prominent { margin: 1em 0; label { font-weight: bold; } input, select { width: 100%; } select { font-size: 1em; padding: 0.5rem; display: block; border-radius: 0.25rem; margin: 0.5rem 0; } } } div.row { display: flex; align-items: center; > div { flex: 1; } } .check, .blip { font-size: 1.125em; color: #71D571; } .ex.failure { font-weight: bold; color: @dangerCol; } @media all and (max-width: 450px) { body#post { header { nav { .xtra-feature { display: none; } } } } } @media all and (min-width: 1280px) { body#promo { div.heading { margin: 10em 0; } } } @media all and (min-width: 1600px) { body#promo { div.heading { margin: 14em 0; } } } @media all and (max-width: 900px) { .half.big { padding: 0 !important; width: 100% !important; } .third { padding: 0 !important; float: none; width: 100% !important; p.introduction { font-size: 0.86em; } } div.blurbs { .fourth { flex: 1 1 15em; -webkit-flex: 1 1 15em; } } .blurbs .third, .blurbs .half { p, ul { text-align: left; } } .half-col, .big { float: none; text-align: center; &+.half-col, &+.big { margin-top: 4em !important; margin-left: 0; } } #beta, .content-container { font-size: 1.15em; } } @media all and (max-width: 600px) { div.row:not(.admin-actions) { flex-direction: column; } .half { padding: 0 !important; width: 100% !important; } .third { width: 100% !important; float: none; } body#promo { div.heading { margin: 6em 0; } h2 { font-size: 1.6em; } .half-col a + a { margin-left: 1em; } .half-col a.channel { margin-left: auto !important; margin-right: auto !important; } } ul.add-integrations { li { display: list-item; &+ li { margin-left: 0; } } } } @media all and (max-height: 500px) { body#promo { div.heading { margin: 5em 0; } } } @media all and (max-height: 400px) { body#promo { div.heading { margin: 0em 0; } } } /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { header { .opacity(1); } } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { .content-container#pricing { .half { float: none; width: 100%; } } header { .opacity(1); } } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { header { .opacity(1); } } @media (pointer: coarse) { body footer nav a:not(.pubd) { padding: 0.8em 1em; margin-left: 0; margin-top: 0; } } @media print { h1 { page-break-before: always; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } table, figure { page-break-inside: avoid; } header, footer { display: none; } article#post-body { margin-top: 2em; margin-left: 0; margin-right: 0; } hr { border: 1px solid #ccc; } } .code-block { padding: 0; max-width: 100%; margin: 0; background: #f8f8f8; border: 1px solid #ccc; padding: 0.375em 0.625em; font-size: 0.86em; .rounded(.25em); } pre.code-block { overflow-x: auto; } diff --git a/less/new-core.less b/less/new-core.less index 87d8158..c9e7a17 100644 --- a/less/new-core.less +++ b/less/new-core.less @@ -1,258 +1,257 @@ @actionNavColor: #767676; body { margin: 0; padding: 0; font-size: 100%; footer { text-align: center; padding: 0 2em; nav { margin: 3em 0 4em; color: #444; a { text-decoration: none; + a { margin-left: 0.8em; } &:link, &:visited { color: #999; } &:hover { color: #666; } &.home { color: #333; font-weight: bold; &:hover { color: #000; } } } } } } header { margin: 1em; h1, h2 { display: inline; } nav { display: inline; margin: 0 1em; line-height: 2.4em; span, a { margin: 0 0 0 1em; } a { color: @actionNavColor; &:hover { text-decoration: underline; } } } p { &.description { color: #444; font-size: 1.1em; margin-top: 0.5em; line-height: 1.5; } &.meta-note { color: #333; font-style: italic; margin-top: 2em; span { text-transform: uppercase; font-variant: small-caps; font-size: 0.9em; color: #666; font-style: normal; } } } } hr { border: 0; height: 1px; background: #ccc; max-width: 40em; margin: 4em auto; text-align: center; } textarea, textarea:focus { border: 0; } textarea, textarea:focus, input { outline: 0; } textarea { width: 100%; resize: none; &#editor { position: fixed; top: 3em; right: 0; bottom: 2em; left: 0; padding: 2em 2em 0 2em; font-size: 2em; box-sizing: border-box; } } #official-writing, #wrapper { margin: 1em 2em; ul { margin: 0; padding: 0 0 0 1em; line-height: 1.5; &.collections, &.posts, &.integrations { list-style: none; margin-left: 1em; li + li { margin-top: 0.4em; } } &.collections li { &.collection { a.title { font-size: 1.3em; - font-weight: bold; } } } } } .clearfix { overflow: auto; } .half-col, .half, .third { float: left; + .half-col { margin-left: 4em; } } .half { width: 50%; } .third { width: 33%; } code, textarea#embed { font-family: monospace, monospace; font-size: 1em; } #wrapper { max-width: 50em; } #official-writing, #wrapper { h2 { &.minor { font-size: 1.3em; } &.bugfix { font-size: 1.15em; } +.android-version { margin-top: 0; font-size: 1.1em; a { &:hover { text-decoration: underline; } } } } } #beta, .content-container { max-width: 50em; margin: 0 auto 3em; font-size: 1.2em; &.tight { max-width: 30em; } &.snug { max-width: 40em; } .app { + .app { margin-top: 1.5em; } h2 { margin-bottom: 0.25em; } p { margin-top: 0.25em; } } h2.intro { font-weight: normal; } p { line-height: 1.5; } li { margin: 0.3em 0; } h2 { &.light { font-weight: normal; } } } #collection-options { #title, #description { width: 100%; box-sizing: border-box; } .option { h2 { margin-top: 2em; margin-bottom: 0.5em; } label { &.option-text.disabled { color: #999; #domain-alias { border-color: #ccc; } &+p { color: #555; } } } label+p, p.describe { font-size: 0.8em; margin-top: 0.4em; margin-left: 1.8em; } input.low-profile { padding: 0.25rem 0.5rem; margin-left: 0.25rem; font-size: 0.8em; } .fedi-handle { margin-left: 0.5em; .transition-duration(0.25s); } } } diff --git a/templates.go b/templates.go index 5ee4bcf..e29b390 100644 --- a/templates.go +++ b/templates.go @@ -1,202 +1,223 @@ /* * Copyright © 2018 A Bunch Tell LLC. * * This file is part of WriteFreely. * * WriteFreely is free software: you can redistribute it and/or modify * it under the terms of the GNU Affero General Public License, included * in the LICENSE file in this source code package. */ package writefreely import ( + "errors" "html/template" "io" "io/ioutil" "net/http" "os" "path/filepath" "strings" "github.com/dustin/go-humanize" "github.com/writeas/web-core/l10n" "github.com/writeas/web-core/log" "github.com/writeas/writefreely/config" ) var ( templates = map[string]*template.Template{} pages = map[string]*template.Template{} userPages = map[string]*template.Template{} funcMap = template.FuncMap{ "largeNumFmt": largeNumFmt, "pluralize": pluralize, "isRTL": isRTL, "isLTR": isLTR, "localstr": localStr, "localhtml": localHTML, "tolower": strings.ToLower, "title": strings.Title, + "hasPrefix": strings.HasPrefix, + "hasSuffix": strings.HasSuffix, + "dict": dict, } ) const ( templatesDir = "templates" pagesDir = "pages" ) func showUserPage(w http.ResponseWriter, name string, obj interface{}) { if obj == nil { log.Error("showUserPage: data is nil!") return } if err := userPages[filepath.Join("user", name+".tmpl")].ExecuteTemplate(w, name, obj); err != nil { log.Error("Error parsing %s: %v", name, err) } } func initTemplate(parentDir, name string) { if debugging { log.Info(" " + filepath.Join(parentDir, templatesDir, name+".tmpl")) } files := []string{ filepath.Join(parentDir, templatesDir, name+".tmpl"), filepath.Join(parentDir, templatesDir, "include", "footer.tmpl"), filepath.Join(parentDir, templatesDir, "base.tmpl"), filepath.Join(parentDir, templatesDir, "user", "include", "silenced.tmpl"), } if name == "collection" || name == "collection-tags" || name == "chorus-collection" { // These pages list out collection posts, so we also parse templatesDir + "include/posts.tmpl" files = append(files, filepath.Join(parentDir, templatesDir, "include", "posts.tmpl")) } if name == "chorus-collection" || name == "chorus-collection-post" { files = append(files, filepath.Join(parentDir, templatesDir, "user", "include", "header.tmpl")) } if name == "collection" || name == "collection-tags" || name == "collection-post" || name == "post" || name == "chorus-collection" || name == "chorus-collection-post" { files = append(files, filepath.Join(parentDir, templatesDir, "include", "post-render.tmpl")) } templates[name] = template.Must(template.New("").Funcs(funcMap).ParseFiles(files...)) } func initPage(parentDir, path, key string) { if debugging { log.Info(" [%s] %s", key, path) } pages[key] = template.Must(template.New("").Funcs(funcMap).ParseFiles( path, filepath.Join(parentDir, templatesDir, "include", "footer.tmpl"), filepath.Join(parentDir, templatesDir, "base.tmpl"), filepath.Join(parentDir, templatesDir, "user", "include", "silenced.tmpl"), )) } func initUserPage(parentDir, path, key string) { if debugging { log.Info(" [%s] %s", key, path) } userPages[key] = template.Must(template.New(key).Funcs(funcMap).ParseFiles( path, filepath.Join(parentDir, templatesDir, "user", "include", "header.tmpl"), filepath.Join(parentDir, templatesDir, "user", "include", "footer.tmpl"), filepath.Join(parentDir, templatesDir, "user", "include", "silenced.tmpl"), + filepath.Join(parentDir, templatesDir, "user", "include", "nav.tmpl"), )) } // InitTemplates loads all template files from the configured parent dir. func InitTemplates(cfg *config.Config) error { log.Info("Loading templates...") tmplFiles, err := ioutil.ReadDir(filepath.Join(cfg.Server.TemplatesParentDir, templatesDir)) if err != nil { return err } for _, f := range tmplFiles { if !f.IsDir() && !strings.HasPrefix(f.Name(), ".") { parts := strings.Split(f.Name(), ".") key := parts[0] initTemplate(cfg.Server.TemplatesParentDir, key) } } log.Info("Loading pages...") // Initialize all static pages that use the base template filepath.Walk(filepath.Join(cfg.Server.PagesParentDir, pagesDir), func(path string, i os.FileInfo, err error) error { if !i.IsDir() && !strings.HasPrefix(i.Name(), ".") { key := i.Name() initPage(cfg.Server.PagesParentDir, path, key) } return nil }) log.Info("Loading user pages...") // Initialize all user pages that use base templates filepath.Walk(filepath.Join(cfg.Server.TemplatesParentDir, templatesDir, "user"), func(path string, f os.FileInfo, err error) error { if !f.IsDir() && !strings.HasPrefix(f.Name(), ".") { corePath := path if cfg.Server.TemplatesParentDir != "" { corePath = corePath[len(cfg.Server.TemplatesParentDir)+1:] } parts := strings.Split(corePath, string(filepath.Separator)) key := f.Name() if len(parts) > 2 { key = filepath.Join(parts[1], f.Name()) } initUserPage(cfg.Server.TemplatesParentDir, path, key) } return nil }) return nil } // renderPage retrieves the given template and renders it to the given io.Writer. // If something goes wrong, the error is logged and returned. func renderPage(w io.Writer, tmpl string, data interface{}) error { err := pages[tmpl].ExecuteTemplate(w, "base", data) if err != nil { log.Error("%v", err) } return err } func largeNumFmt(n int64) string { return humanize.Comma(n) } func pluralize(singular, plural string, n int64) string { if n == 1 { return singular } return plural } func isRTL(d string) bool { return d == "rtl" } func isLTR(d string) bool { return d == "ltr" || d == "auto" } func localStr(term, lang string) string { s := l10n.Strings(lang)[term] if s == "" { s = l10n.Strings("")[term] } return s } func localHTML(term, lang string) template.HTML { s := l10n.Strings(lang)[term] if s == "" { s = l10n.Strings("")[term] } s = strings.Replace(s, "write.as", "writefreely", 1) return template.HTML(s) } + +// from: https://stackoverflow.com/a/18276968/1549194 +func dict(values ...interface{}) (map[string]interface{}, error) { + if len(values)%2 != 0 { + return nil, errors.New("dict: invalid number of parameters") + } + dict := make(map[string]interface{}, len(values)/2) + for i := 0; i < len(values); i += 2 { + key, ok := values[i].(string) + if !ok { + return nil, errors.New("dict: keys must be strings") + } + dict[key] = values[i+1] + } + return dict, nil +} diff --git a/templates/user/admin/users.tmpl b/templates/user/admin/users.tmpl index 714fa24..4b2404e 100644 --- a/templates/user/admin/users.tmpl +++ b/templates/user/admin/users.tmpl @@ -1,36 +1,36 @@ {{define "users"}} {{template "header" .}}
{{template "admin-header" .}}
{{.TotalUsers}} {{pluralize "user" "users" .TotalUsers}} + Invite people
{{range .Users}} {{end}}
User Joined Type Status
{{.Username}} {{.CreatedFriendly}} {{if .IsAdmin}}Admin{{else}}User{{end}} {{if .IsSilenced}}Silenced{{else}}Active{{end}}
-
{{template "footer" .}} {{end}} diff --git a/templates/user/collection.tmpl b/templates/user/collection.tmpl index 14114e6..8bf4c41 100644 --- a/templates/user/collection.tmpl +++ b/templates/user/collection.tmpl @@ -1,258 +1,260 @@ {{define "upgrade"}}

Upgrade for $40 / year to edit.

{{end}} {{define "collection"}} {{template "header" .}}
{{if .Silenced}} {{template "user-silenced"}} {{end}} -

Customize {{.DisplayTitle}} view blog

+

Customize {{.DisplayTitle}}

+ + {{template "collection-nav" (dict "Alias" .Alias "Path" .Path "SingleUser" .SingleUser)}} {{if .Flashes}}{{end}}

URL

{{if eq .Alias .Username}}

This blog uses your username in its URL{{if .Federation}} and fediverse handle{{end}}. You can change it in your Account Settings.

{{end}}
  • {{.FriendlyHost}}/{{.Alias}}/
  • @{{.Alias}}@{{.FriendlyHost}}

Publicity

  • This blog is visible to {{if .Private}}any registered user on this instance{{else}}anyone with its link{{end}}.

  • Only you may read this blog (while you're logged in).

  • A password is required to read this blog.

  • {{if not .SingleUser}}
  • {{if .LocalTimeline}}

    This blog is displayed on the public reader, and is visible to {{if .Private}}any registered user on this instance{{else}}anyone with its link{{end}}.

    {{else}}

    The public reader is currently turned off for this community.

    {{end}}
  • {{end}}

Display Format

Customize how your posts display on your page.

  • Dates are shown. Latest posts listed first.

  • No dates shown. Oldest posts first.

  • No dates shown. Latest posts first.

Text Rendering

Customize how plain text renders on your blog.

Custom CSS

See our guide on customization.

Post Signature

This content will be added to the end of every post on this blog, as if it were part of the post itself. Markdown, HTML, and shortcodes are allowed.

View Blog

{{if ne .Alias .Username}}

Delete Blog...

{{end}}
{{template "footer" .}} {{end}} diff --git a/templates/user/collections.tmpl b/templates/user/collections.tmpl index b2ce51a..64ab6a0 100644 --- a/templates/user/collections.tmpl +++ b/templates/user/collections.tmpl @@ -1,114 +1,116 @@ {{define "collections"}} {{template "header" .}}
{{if .Flashes}}{{end}} {{if .Silenced}} {{template "user-silenced"}} {{end}}

Blogs

{{if not .NewBlogsDisabled}}

New blog

{{end}}
{{template "foot" .}} {{template "body-end" .}} {{end}} diff --git a/templates/user/include/nav.tmpl b/templates/user/include/nav.tmpl new file mode 100644 index 0000000..2b54baf --- /dev/null +++ b/templates/user/include/nav.tmpl @@ -0,0 +1,10 @@ +{{define "collection-nav"}} +
+ +
+{{end}} diff --git a/templates/user/stats.tmpl b/templates/user/stats.tmpl index 19cc33b..963dd2e 100644 --- a/templates/user/stats.tmpl +++ b/templates/user/stats.tmpl @@ -1,56 +1,60 @@ {{define "stats"}} {{template "header" .}}
{{if .Silenced}} {{template "user-silenced"}} {{end}} -

{{if .Collection}}{{.Collection.DisplayTitle}} {{end}}Stats

+

{{if .Collection}}{{.Collection.DisplayTitle}} {{end}}Stats

+ + {{if .Collection}} + {{template "collection-nav" (dict "Alias" .Collection.Alias "Path" .Path "SingleUser" .SingleUser)}} + {{end}}

Stats for all time.

{{if .Federation}}

Fediverse stats

Followers
{{.APFollowers}}
{{end}}

Top {{len .TopPosts}} posts

{{if not .Collection}}{{end}} {{range .TopPosts}} {{ if not $.Collection }}{{ end }} {{end}}
PostBlogTotal Views
{{if ne .Title.String ""}}{{.Title.String}}{{else}}{{.ID}}{{end}}{{if .Collection}}{{.Collection.Title}}{{else}}Draft{{end}}{{.ViewCount}}
{{template "footer" .}} {{end}}