diff --git a/less/core.less b/less/core.less index 00839d4..8bee852 100644 --- a/less/core.less +++ b/less/core.less @@ -1,1520 +1,1520 @@ 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.17em; } } 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; } .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 { +textarea, input#title, 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 { +textarea, input#title, 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; } } } 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; } } 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 { margin-left: 0; 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; } } 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/pad-theme.less b/less/pad-theme.less index f6a7018..94276cd 100644 --- a/less/pad-theme.less +++ b/less/pad-theme.less @@ -1,217 +1,217 @@ @lightBG: #ffffff; @lightTextColor: #000; @lightLinkColor: #444; @lightNavBG: #fff; @lightNavHoverBG: #f6f6f6; @lightNavBorder: #ccc; @darkBG: #222222; @darkTextColor: #ffffff; @darkLinkColor: #ccc; @darkNavBG: #393939; @darkNavHoverBG: #555; @darkNavBorder: #333; .pad-theme-transition { -moz-transition-property: background-color, color; -webkit-transition-property: background-color, color; -o-transition-property: background-color, color; transition-property: background-color, color; .transition-duration(0.25s); } body#pad-sub #posts, .atoms { h3 { a { color: @lightTextColor; &:hover { color: darken(@lightTextColor, 10%); } } } h3, h4 { a { color: @lightTextColor; &:hover { color: darken(@lightTextColor, 10%); } } } date, .electron { color: #999; } a.action, a { color: @lightLinkColor; &:hover { color: darken(@lightLinkColor, 10%); } } } body#pad, body#pad-sub { .pad-theme-transition; &.light { background-color: @lightBG; color: @lightTextColor; #tools { .pad-theme-transition; background-color: transparent; h1 { a { color: @headerTextColor; } } #belt { a, button { color: #000; } } .tool { &#status { color: #999; } } .hidden { &#wc { color: #777; } } a:hover, a:active { background-color: transparent; color: @lightLinkColor; } } .modal { border-color: @lightNavBorder; background: @lightNavBG; } } &.dark { background-color: @darkBG; color: @darkTextColor; #tools { .pad-theme-transition; background-color: #262626; h1 { a { color: @darkTextColor; } } #belt { a, button { color: white; } } .tool { &#status { color: #666; } } .hidden { &#wc { color: #ececec; } } a:hover, a:active { background-color: transparent; color: @darkLinkColor; } nav { &> ul > li a { color: @darkTextColor; } ul { ul { background: @darkNavBG; border-color: @darkNavBorder; } li { &.current-user { color: #fff; } &.selected { a { color: #777; } } } li:hover { background: @darkNavHoverBG; } } } } #posts { h3 { a { color: @darkTextColor; &:hover { color: darken(@darkTextColor, 10%); } } } h3, h4 { a { color: @darkTextColor; &:hover { color: darken(@darkTextColor, 10%); } } } a.action, a { color: @darkLinkColor; &:hover { color: darken(@darkLinkColor, 10%); } } } .modal { border-color: @darkNavBorder; background: @darkNavBG; input { color: #fff; } .form-hint { color: #ccc; } a:link, a:visited { color: lighten(@primary, 8%); } } } } body#pad { .pad-theme-transition; - textarea { + textarea, #title { .pad-theme-transition; } &.dark { - textarea, #editor { + textarea, #title, #editor { background-color: @darkBG; color: @darkTextColor; } } &.light { - textarea, #editor { + textarea, #title, #editor { background-color: @lightBG; color: @lightTextColor; } } } body { &.dark { nav#top-nav { a { color: @darkLinkColor; } } } } diff --git a/less/pad.less b/less/pad.less index a132b30..db38fe1 100644 --- a/less/pad.less +++ b/less/pad.less @@ -1,471 +1,479 @@ .dropdown-nav { font-family: @sansFont; line-height: 2em; span { margin: 0; } .material-icons { vertical-align: sub; } >ul>li { line-height: 1.8; bottom: -0.35em; } ul { display: inline; list-style:none; position:relative; margin:0; padding:0; ul { display:none; position:absolute; top:100%; left:0; background:#fff; padding:0; max-height: 30em; overflow-y: auto; overflow-x: hidden; border: 1px solid @lightNavBorder; .rounded(.25em); li { line-height: 1.8; display: block; min-width: 9em; max-width: 16em; } } a { display: block; color:#333; text-decoration:none; padding: 0 0.5em; margin: 0; overflow: hidden; white-space: -moz-nowrap; /* Mozilla, since 1999 */ white-space: -nowrap; /* Opera 4-6 */ white-space: -o-nowrap; /* Opera 7 */ white-space: nowrap; &:hover { text-decoration: none; } } li { display: inline-block; position: relative; margin: 0; padding: 0; &:hover { background: @lightNavHoverBG; } &:hover > ul { display: block; } &.selected { a, a:hover { color: #888; } } &.current-user, &.menu-heading { font-weight: bold; padding: 0 .5em; color: #000; &:hover { background-color: transparent !important; } } &.menu-heading { color: #666; font-weight: normal; font-size: 0.8em; padding: 0.2em 0.8em; cursor: default; text-align: left; } hr { margin: 0.5em 0.75em; } } } } nav#manage { .dropdown-nav; ul ul li { min-width: 11em; img.ic-18dp { margin-top: -2px; } } } img.ic-18dp { width: 18px; height: 18px; vertical-align: middle; } img.ic-24dp { width: 24px; height: 24px; vertical-align: middle; } body#pad, body#pad-sub { margin: 0; padding: 0; font-size: 100%; font-family: Lora, serif; header { height: 1.6em; } #tools { margin: 0 0 1em; padding: 1em 2em; -moz-transition-property: opacity; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; .transition-duration(0.4s); &:hover { .opacity(1); .hidden { .opacity(1); } } .hidden { &#wc { position: relative; top: -0.15em; font-size: 0.9em; margin-left: 0.75em; } } h1 { display: inline-block; font-family: Lora, serif; margin: 0; font-size: 1.5em; a { color: white; } } nav { .dropdown-nav; } #clip { display: inline-block; margin-top: -0.35em; } #belt { float: right; a { padding: 1em 1.2em; vertical-align: middle; .opacity(.75); .transition-duration(0.2s); -moz-transition-property: opacity; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; &:hover { .opacity(1); } &.disabled, &.disabled:hover { .opacity(.3); } img.ic-24dp { vertical-align: bottom; } .material-icons { vertical-align: middle; max-width: 24px; overflow: hidden; display: inline-block; } .material-icons, img.ic-24dp { &+ span { margin-left: .4em; height: 24px; vertical-align: bottom; } } } .tool:last-child a { padding-right: 0; } } .tool { display: inline-block; margin: 0; &#status { &.doing { font-style: italic; } } button { font-family: @sansFont; background-color: transparent; padding-top: 0.25rem; padding-bottom: 0.25rem; border: 0; } } } } body#pad-sub { .content-container { p { a:hover { text-decoration: underline; } &.status { text-align: center; font-size: 1.1em; &:first-child { margin-top: 1.5em; } } } } } body#pad { textarea, textarea:focus { border: 0; outline: 0; } - textarea { + textarea, #title { position: fixed !important; top: 3em; right: 0; bottom: 0; left: 0; width: 100%; height: auto; height: calc(~"100% - 3em - 1px"); padding: 1em 2em 2em; font-size: 1.2em; letter-spacing: 0.6px; box-sizing: border-box; resize: none; &.classy { font-family: Lora, serif; letter-spacing: 0.7px; } &.mono, &.code { padding-left: 1em; padding-right: 1em; white-space: -moz-pre; /* Mozilla, since 1999 */ white-space: -pre; /* Opera 4-6 */ white-space: -o-pre; /* Opera 7 */ white-space: pre; word-wrap: normal; } &.norm, &.sans, &.wrap { line-height: 1.4; } } #tools { position: fixed; top: 0; left: 0; right: 0; margin: 0; .opacity(.2); .mode-wp { font-family: serif; } .mode-typewriter { font-family: "Courier New", monospace; font-size: 1em; } } } .modal { display: none; position: absolute; z-index: 11; top: 3em; left: 50%; width: 30em; margin-left: -15em; padding: 1.5em 2em; .rounded(.25em); background: @lightNavBG; border: 1px solid @lightNavBorder; h2 { margin-top: 0; } input[type=text], input[type=email], input[type=password] { background: transparent; border: 0; border-bottom: 1px solid #ccc; -moz-transition-property: opacity; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; .transition-duration(0.2s); .opacity(1); &:disabled { .opacity(.4); } } .short { text-align: center; } .form-hint { font-size: 0.78em; color: #888; } } #overlay { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.4); z-index: 10; } @media all and (max-height: 500px) { body#pad { textarea { top: 2.25em; padding-top: 0.25em; } + &.classic { + #editor { + top: 5.25em; + } + #title { + top: 3.5rem; + } + } #tools { padding-top: 0.5em; padding-bottom: 0.5em; } } } @media all and (min-width: 360px) { body#pad #tools .if-room.room-1, body#pad-sub #tools .tool.if-room.room-1, .if-room.room-1 { display: inline-block; } } @media all and (min-width: 425px) { body#pad #tools .if-room.room-2, body#pad-sub #tools .tool.if-room.room-2, .if-room.room-2 { display: inline-block; } } @media all and (min-width: 510px) { body#pad #tools .if-room.room-3, body#pad-sub #tools .tool.if-room.room-3, .if-room.room-3 { display: inline-block; } } @media all and (max-width: 650px) { body#pad #tools .tool.if-room, body#pad-sub #tools .tool.if-room, .if-room { display: none; } } @media all and (max-width: 600px) { .modal { margin-left: 0; width: auto; left: 0; right: 0; } #user-nav .tabs { display: block; text-align: center; margin: 0.5em 0 -2em; a:first-child { margin-left: 0; } } #target-name { max-width: 98px; display: inline-block; } } @media all and (min-width: 50em) { - body#pad { - textarea { + body#pad, body#pad.classic { + textarea, #title { padding-left: 10%; padding-right: 10%; } } } @media all and (min-width: 60em) { - body#pad { - textarea { + body#pad, body#pad.classic { + textarea, #title { padding-left: 15%; padding-right: 15%; } } } @media all and (min-width: 70em) { - body#pad { - textarea { + body#pad, body#pad.classic { + textarea, #title { padding-left: 20%; padding-right: 20%; } } } @media all and (min-width: 85em) { - body#pad { - textarea { + body#pad, body#pad.classic { + textarea, #title { padding-left: 25%; padding-right: 25%; } } } @media all and (min-width: 105em) { - body#pad { - textarea { + body#pad, body#pad.classic { + textarea, #title { padding-left: 30%; padding-right: 30%; } } } @media (pointer: coarse) { body#pad, body#pad-sub { #tools { .opacity(.8); .hidden { .opacity(.8); } } } } diff --git a/less/prose-editor.less b/less/prose-editor.less index eba8b74..f11f3a7 100644 --- a/less/prose-editor.less +++ b/less/prose-editor.less @@ -1,413 +1,440 @@ +body#pad.classic { + header { + display: flex; + justify-content: space-between; + align-items: center; + } + #editor { + top: 4em; + } + #title { + top: 4.25rem; + bottom: unset; + height: auto; + font-weight: bold; + font-size: 2em; + padding-top: 0; + padding-bottom: 0; + border: 0; + } + #tools { + #belt { + float: none; + } + } + #target { + ul { + a { + padding: 0 0.5em !important; + } + } + } +} + .ProseMirror { position: relative; height: calc(~"100% - 1.6em"); overflow-y: auto; box-sizing: border-box; -moz-box-sizing: border-box; font-size: 1.2em; -} - -.ProseMirror { word-wrap: break-word; white-space: pre-wrap; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; + padding: 0.5em 0; + line-height: 1.5; + outline: none; } .ProseMirror pre { white-space: pre-wrap; } .ProseMirror li { position: relative; } .ProseMirror-hideselection *::selection { background: transparent; } .ProseMirror-hideselection *::-moz-selection { background: transparent; } .ProseMirror-hideselection { caret-color: transparent; } .ProseMirror-selectednode { outline: 2px solid #8cf; } /* Make sure li selections wrap around markers */ li.ProseMirror-selectednode { outline: none; } li.ProseMirror-selectednode:after { content: ""; position: absolute; left: -32px; right: -2px; top: -2px; bottom: -2px; border: 2px solid #8cf; pointer-events: none; } .ProseMirror-textblock-dropdown { min-width: 3em; } .ProseMirror-menu { margin: 0 -4px; line-height: 1; } .ProseMirror-tooltip .ProseMirror-menu { width: -webkit-fit-content; width: fit-content; white-space: pre; } .ProseMirror-menuitem { margin-right: 3px; display: inline-block; } .ProseMirror-menuseparator { border-right: 1px solid #ddd; margin-right: 3px; } .ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu { font-size: 90%; white-space: nowrap; } .ProseMirror-menu-dropdown { vertical-align: 1px; cursor: pointer; position: relative; padding-right: 15px; } .ProseMirror-menu-dropdown-wrap { padding: 1px 0 1px 4px; display: inline-block; position: relative; } .ProseMirror-menu-dropdown:after { content: ""; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: .6; position: absolute; right: 4px; top: calc(50% - 2px); } .ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu { position: absolute; background: white; color: #666; border: 1px solid #aaa; padding: 2px; } .ProseMirror-menu-dropdown-menu { z-index: 15; min-width: 6em; } .ProseMirror-menu-dropdown-item { cursor: pointer; padding: 2px 8px 2px 4px; } .ProseMirror-menu-dropdown-item:hover { background: #f2f2f2; } .ProseMirror-menu-submenu-wrap { position: relative; margin-right: -4px; } .ProseMirror-menu-submenu-label:after { content: ""; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid currentColor; opacity: .6; position: absolute; right: 4px; top: calc(50% - 4px); } .ProseMirror-menu-submenu { display: none; min-width: 4em; left: 100%; top: -3px; } .ProseMirror-menu-active { background: #eee; border-radius: 4px; } .ProseMirror-menu-active { background: #eee; border-radius: 4px; } .ProseMirror-menu-disabled { opacity: .3; } .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu { display: block; } .ProseMirror-menubar { position: relative; min-height: 1em; color: #666; padding: 0.5em; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.8); z-index: 10; -moz-box-sizing: border-box; box-sizing: border-box; overflow: visible; } .ProseMirror-icon { display: inline-block; line-height: .8; vertical-align: -2px; /* Compensate for padding */ padding: 2px 8px; cursor: pointer; } .ProseMirror-menu-disabled.ProseMirror-icon { cursor: default; } .ProseMirror-icon svg { fill: currentColor; height: 1em; } .ProseMirror-icon span { vertical-align: text-top; } .ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; } .ProseMirror-gapcursor:after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid black; animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; } @keyframes ProseMirror-cursor-blink { to { visibility: hidden; } } .ProseMirror-focused .ProseMirror-gapcursor { display: block; } /* Add space around the hr to make clicking it easier */ .ProseMirror-example-setup-style hr { padding: 2px 10px; border: none; margin: 1em 0; } .ProseMirror-example-setup-style hr:after { content: ""; display: block; height: 1px; background-color: silver; line-height: 2px; } .ProseMirror ul, .ProseMirror ol { padding-left: 30px; } .ProseMirror blockquote { padding-left: 1em; border-left: 3px solid #eee; margin-left: 0; margin-right: 0; } .ProseMirror-example-setup-style img { cursor: default; } .ProseMirror-prompt { background: white; padding: 5px 10px 5px 15px; border: 1px solid silver; position: fixed; border-radius: 3px; z-index: 11; box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2); } .ProseMirror-prompt h5 { margin: 0; font-weight: normal; font-size: 100%; color: #444; } .ProseMirror-prompt input[type="text"], .ProseMirror-prompt textarea { background: #eee; border: none; outline: none; } .ProseMirror-prompt input[type="text"] { padding: 0 4px; } .ProseMirror-prompt-close { position: absolute; left: 2px; top: 1px; color: #666; border: none; background: transparent; padding: 0; } .ProseMirror-prompt-close:after { content: "✕"; font-size: 12px; } .ProseMirror-invalid { background: #ffc; border: 1px solid #cc7; border-radius: 4px; padding: 5px 10px; position: absolute; min-width: 10em; } .ProseMirror-prompt-buttons { margin-top: 5px; display: none; } #editor, .editor { position: fixed; top: 0; right: 0; bottom: 0; left: 0; color: black; background-clip: padding-box; padding: 5px 0; margin: 4em auto 23px auto; } .ProseMirror p:first-child, .ProseMirror h1:first-child, .ProseMirror h2:first-child, .ProseMirror h3:first-child, .ProseMirror h4:first-child, .ProseMirror h5:first-child, .ProseMirror h6:first-child { margin-top: 10px; } -.ProseMirror { - padding: 4px 8px 4px 14px; - line-height: 1.2; - outline: none; -} - .ProseMirror p { margin-bottom: 1em; } textarea { width: 100%; height: 123px; border: 1px solid silver; box-sizing: border-box; -moz-box-sizing: border-box; padding: 3px 10px; border: none; outline: none; font-family: inherit; font-size: inherit; } .ProseMirror-menubar-wrapper { height: 100%; box-sizing: border-box; } .ProseMirror-menubar-wrapper, #markdown textarea { display: block; margin-bottom: 4px; } @media all and (min-width: 50em) { #editor { margin-left: 10%; margin-right: 10%; } } @media all and (min-width: 60em) { #editor { margin-left: 15%; margin-right: 15%; } } @media all and (min-width: 70em) { #editor { margin-left: 20%; margin-right: 20%; } } @media all and (min-width: 85em) { #editor { margin-left: 25%; margin-right: 25%; } } @media all and (min-width: 105em) { #editor { margin-left: 30%; margin-right: 30%; } } diff --git a/static/js/h.js b/static/js/h.js index 5dac2f5..2aef69a 100644 --- a/static/js/h.js +++ b/static/js/h.js @@ -1,260 +1,283 @@ /** * H.js * * Lightweight, extremely bare-bones library for manipulating the DOM and * saving some typing. */ var Element = function(domElement) { this.el = domElement; }; /** * Creates a toggle button that adds / removes the given class name from the * given element. * * @param {Element} $el - The element to modify. * @param {string} onClass - The class to add to the given element. * @param {function} onFunc - Additional actions when toggling on. * @param {function} offFunc - Additional actions when toggling off. */ Element.prototype.createToggle = function($el, onClass, onFunc, offFunc) { this.on('click', function(e) { if ($el.el.className === '') { $el.el.className = onClass; onFunc(new Element(this), e); } else { $el.el.className = ''; offFunc(new Element(this), e); } e.preventDefault(); }, false); }; Element.prototype.on = function(event, func) { events = event.split(' '); var el = this.el; if (el == null) { console.error("Error: element for event is null"); return; } var addEvent = function(e) { if (el.addEventListener) { el.addEventListener(e, func, false); } else if (el.attachEvent) { el.attachEvent(e, func); } }; if (events.length === 1) { addEvent(event); } else { for(var i=0; i summaryLen) { summary = summary.substring(0, summaryLen) + "..."; } return { title: content.substring("# ".length, eol), summary: summary, }; } var blankLine = content.indexOf("\n\n"); if (blankLine !== -1 && blankLine <= eol && blankLine <= titleLen) { // Title is in the format: // // Some title // // The body starts after that blank line above it. var summary = content.substring(blankLine).trim(); if (summary.length > summaryLen) { summary = summary.substring(0, summaryLen) + "..."; } return { title: content.substring(0, blankLine), summary: summary, }; } // TODO: move this to the beginning var title = content.trim(); var summary = ""; if (title.length > titleLen) { // Content can't fit in the title, so figure out the summary summary = title; title = ""; if (summary.length > summaryLen) { summary = summary.substring(0, summaryLen) + "..."; } } else if (eol > 0) { summary = title.substring(eol+1); title = title.substring(0, eol); } return { title: title, summary: summary }; }; var post = getPostMeta(content); post.id = id; post.token = editToken; post.created = created ? new Date(created) : new Date(); post.client = "Pad"; return post; }, getTitleStrict: function(content) { var eol = content.indexOf("\n"); var title = ""; var newContent = content; if (content.indexOf("# ") === 0) { // Title is in the format: // # Some title if (eol !== -1) { // First line should start with # and end with \n newContent = content.substring(eol).leftTrim(); title = content.substring("# ".length, eol); } } return { title: title, content: newContent }; }, }; var He = { create: function(name) { return document.createElement(name); }, get: function(id) { return document.getElementById(id); }, $: function(selector) { var els = document.querySelectorAll(selector); return els; }, postJSON: function(url, params, callback) { var http = new XMLHttpRequest(); http.open("POST", url, true); // Send the proper header information along with the request http.setRequestHeader("Content-type", "application/json"); http.onreadystatechange = function() { if (http.readyState == 4) { callback(http.status, JSON.parse(http.responseText)); } } http.send(JSON.stringify(params)); }, }; String.prototype.leftTrim = function() { return this.replace(/^\s+/,""); }; diff --git a/templates/wysiwyg.tmpl b/templates/wysiwyg.tmpl index f0a8712..554609d 100644 --- a/templates/wysiwyg.tmpl +++ b/templates/wysiwyg.tmpl @@ -1,376 +1,399 @@ {{define "pad"}} {{if .Editing}}Editing {{if .Post.Title}}{{.Post.Title}}{{else}}{{.Post.Id}}{{end}}{{else}}New Post{{end}} — {{.SiteName}} - +
+
{{if not .SingleUser}}

{{end}}
{{if .Editing}}{{end}}
{{end}}