diff --git a/.gitignore b/.gitignore
index 847e8f0..76da739 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,10 +1,11 @@
*~
*.swp
*.swo
build
tmp
*.ini
*.db
bindata.go
+*.DS_Store
diff --git a/go.mod b/go.mod
index 9c67aeb..d73e86e 100644
--- a/go.mod
+++ b/go.mod
@@ -1,60 +1,62 @@
module github.com/writeas/writefreely
require (
github.com/BurntSushi/toml v0.3.1 // indirect
github.com/alecthomas/gometalinter v3.0.0+incompatible // indirect
github.com/alecthomas/units v0.0.0-20151022065526-2efee857e7cf // indirect
github.com/captncraig/cors v0.0.0-20180620154129-376d45073b49 // indirect
github.com/clbanning/mxj v1.8.4 // indirect
github.com/dustin/go-humanize v1.0.0
github.com/fatih/color v1.7.0
github.com/go-sql-driver/mysql v1.4.1
github.com/go-test/deep v1.0.1 // indirect
github.com/golang/lint v0.0.0-20181217174547-8f45f776aaf1 // indirect
github.com/gopherjs/gopherjs v0.0.0-20181103185306-d547d1d9531e // indirect
github.com/gorilla/feeds v1.1.0
github.com/gorilla/mux v1.7.0
github.com/gorilla/schema v1.0.2
github.com/gorilla/sessions v1.1.3
github.com/guregu/null v3.4.0+incompatible
github.com/ikeikeikeike/go-sitemap-generator/v2 v2.0.2
github.com/jtolds/gls v4.2.1+incompatible // indirect
github.com/kylemcc/twitter-text-go v0.0.0-20180726194232-7f582f6736ec
github.com/lunixbochs/vtclean v1.0.0 // indirect
github.com/manifoldco/promptui v0.3.2
github.com/mattn/go-colorable v0.1.0 // indirect
github.com/mattn/go-sqlite3 v1.10.0
github.com/microcosm-cc/bluemonday v1.0.2
github.com/mitchellh/go-wordwrap v1.0.0
github.com/nicksnyder/go-i18n v1.10.0 // indirect
github.com/nu7hatch/gouuid v0.0.0-20131221200532-179d4d0c4d8d
github.com/pelletier/go-toml v1.2.0 // indirect
github.com/pkg/errors v0.8.1 // indirect
github.com/rainycape/unidecode v0.0.0-20150907023854-cb7f23ec59be // indirect
github.com/shurcooL/sanitized_anchor_name v1.0.0 // indirect
github.com/smartystreets/assertions v0.0.0-20190116191733-b6c0e53d7304 // indirect
github.com/smartystreets/goconvey v0.0.0-20181108003508-044398e4856c // indirect
github.com/stretchr/testify v1.3.0 // indirect
github.com/writeas/activity v0.1.2
github.com/writeas/go-strip-markdown v2.0.1+incompatible
github.com/writeas/go-webfinger v0.0.0-20190106002315-85cf805c86d2
github.com/writeas/httpsig v1.0.0
github.com/writeas/impart v1.1.0
github.com/writeas/monday v0.0.0-20181024183321-54a7dd579219
github.com/writeas/nerds v1.0.0
github.com/writeas/openssl-go v1.0.0 // indirect
github.com/writeas/saturday v1.7.1
github.com/writeas/slug v1.2.0
github.com/writeas/web-core v1.0.0
github.com/writefreely/go-nodeinfo v1.2.0
golang.org/x/crypto v0.0.0-20190208162236-193df9c0f06f
golang.org/x/lint v0.0.0-20181217174547-8f45f776aaf1 // indirect
golang.org/x/net v0.0.0-20190206173232-65e2d4e15006 // indirect
golang.org/x/sys v0.0.0-20190209173611-3b5209105503 // indirect
golang.org/x/tools v0.0.0-20190208222737-3744606dbb67 // indirect
google.golang.org/appengine v1.4.0 // indirect
gopkg.in/alecthomas/kingpin.v3-unstable v3.0.0-20180810215634-df19058c872c // indirect
gopkg.in/ini.v1 v1.41.0
gopkg.in/yaml.v1 v1.0.0-20140924161607-9f9df34309c0 // indirect
gopkg.in/yaml.v2 v2.2.2 // indirect
)
+
+go 1.13
diff --git a/less/core.less b/less/core.less
index 179536e..5e0d17d 100644
--- a/less/core.less
+++ b/less/core.less
@@ -1,1568 +1,1625 @@
@primary: rgb(114, 120, 191);
@secondary: rgb(114, 191, 133);
@subheaders: #444;
+@subheadersDark: #aaa;
@headerTextColor: black;
-@headerTextColorDarkMode: white;
+@headerTextColorDarkMode: #cfcfcf;
@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);
+@textLinkColorDark: rgb(162, 162, 255);
:root {
color-scheme: light dark;
}
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, body#collection article, body#subpage article, body#subpage #wrapper h1 {
max-width: 40rem;
margin: 0 auto;
}
textarea, pre, body#post article, body#collection article p {
&.norm, &.sans, &.wrap {
line-height: 1.4em;
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;
}
}
}
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 {
padding: 0.5em;
font-family: @serifFont;
font-size: 100%;
.rounded(.25em);
&[type=submit], &.submit {
border: 1px solid @primary;
background: @primary;
color: white;
.transition(0.2s);
&:hover {
background-color: lighten(@primary, 3%);
}
&: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;
}
&.regular {
font-size: 1em;
}
.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.4;
}
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.features {
margin-top: 1.5em;
text-align: center;
font-size: 0.86em;
ul {
text-align: left;
max-width: 26em;
margin-left: auto !important;
margin-right: auto !important;
li.soon, span.soon {
color: lighten(#111, 40%);
}
}
}
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.4;
.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;
}
}
div.row {
display: flex;
align-items: center;
> div {
flex: 1;
}
}
@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 {
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;
}
@media (prefers-color-scheme: dark) {
body{
color: #eee;
background: #111;
.post-title a:link{
color: #ccc;
}
&#collection{
color: #eee;
pre{
background: #060606;
}
}
h1, header h2 {
a {
color: @headerTextColorDarkMode;
&:hover {
- color: #cfcfcf;
+ color: #fff;
+ }
+ &:visited {
+ color: @headerTextColorDarkMode;
}
}
}
#nav#manage ul a, .dropdown-nav ul a, nav#manage ul ul a, nav#manage ul a{
color: #ccc;
}
.dropdown-nav ul ul, .dropdown-nav ul li:hover, nav#manage ul ul, nav#manage ul ul li:hover, nav#manage ul li:hover{
background: #222;
}
#official-writing h2, #official-writing h3, #official-writing h4, #wrapper h2, #wrapper h3, #wrapper h4{
color: #ddd;
}
a {
- color: rgb(162, 162, 255);
+ color: @textLinkColorDark
}
a:visited{
color: rgb(201, 138, 253);
}
+ #official-writing, #wrapper {
+ h2, h3, h4 {
+ color: @subheadersDark;
+ }
+ ul {
+ &.collections {
+ li {
+ &.collection {
+ a.title {
+ &:link, &:visited {
+ color: @headerTextColorDarkMode;
+ }
+ }
+ }
+ a.create {
+ color: @subheadersDark;
+ }
+ }
+ }
+ }
+ }
+
+ }
+
+ body#me #official-writing h2 a:link, body#me #official-writing h2 a:visited{
+ color: @textLinkColorDark
}
+ .ace_editor {
+ border: 1px solid #333;
+ }
+
+ input {
+ background: #202020;
+ color: #bbb;
+ }
+
+ nav#manage ul ul li img{
+ filter: invert(1);
+ }
+
+ .alert {
+ &.info {
+ color: #4295be;
+ background-color: #0a0b0c;
+ border-color: #181d1f;
+ }
+ &.success {
+ color: #5bb35c;
+ background-color: #282b27;
+ border-color: #21241e;
+ }
+ }
+
}
\ No newline at end of file
diff --git a/less/pad-theme.less b/less/pad-theme.less
index a8f668e..f2608f3 100644
--- a/less/pad-theme.less
+++ b/less/pad-theme.less
@@ -1,217 +1,248 @@
@lightBG: #ffffff;
@lightTextColor: #000;
@lightLinkColor: #444;
@lightNavBG: #fff;
@lightNavHoverBG: #f6f6f6;
@lightNavBorder: #ccc;
+@darkNavBorder: #333;
@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%);
}
}
}
+@media (prefers-color-scheme: dark){
+ body#pad-sub #posts, .atoms {
+ h3 {
+ a {
+ color: @darkTextColor;
+ &:hover {
+ color: lighten(@darkTextColor, 10%);
+ }
+ }
+ }
+ h3, h4 {
+ a {
+ color: @darkTextColor;
+ &:hover {
+ color: lighten(@darkTextColor, 10%);
+ }
+ }
+ }
+ date, .electron {
+ color: #999;
+ }
+ a.action, a {
+ color: @darkTextColor;
+ &:hover {
+ color: lighten(@darkTextColor, 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 {
.pad-theme-transition;
}
&.dark {
textarea {
background-color: @darkBG;
color: @darkTextColor;
}
}
&.light {
textarea {
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..7eebcd7 100644
--- a/less/pad.less
+++ b/less/pad.less
@@ -1,471 +1,478 @@
.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;
}
}
}
}
+
+@media (prefers-color-scheme: dark){
+ .dropdown-nav ul ul {
+ border-color: @darkNavBorder;
+ }
+}
+
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 {
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;
}
#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 {
padding-left: 10%;
padding-right: 10%;
}
}
}
@media all and (min-width: 60em) {
body#pad {
textarea {
padding-left: 15%;
padding-right: 15%;
}
}
}
@media all and (min-width: 70em) {
body#pad {
textarea {
padding-left: 20%;
padding-right: 20%;
}
}
}
@media all and (min-width: 85em) {
body#pad {
textarea {
padding-left: 25%;
padding-right: 25%;
}
}
}
@media all and (min-width: 105em) {
body#pad {
textarea {
padding-left: 30%;
padding-right: 30%;
}
}
}
@media (pointer: coarse) {
body#pad, body#pad-sub {
#tools {
.opacity(.8);
.hidden {
.opacity(.8);
}
}
}
}
diff --git a/static/js/theme-solarized_dark.js b/static/js/theme-solarized_dark.js
new file mode 100644
index 0000000..71c6522
--- /dev/null
+++ b/static/js/theme-solarized_dark.js
@@ -0,0 +1,11 @@
+cssText = ".ace-solarized-dark .ace_gutter { background: #01313f; color: #d0edf7 } .ace-solarized-dark .ace_print-margin { width: 1px; background: #33555E } .ace-solarized-dark { background-color: #002B36; color: #93A1A1 } .ace-solarized-dark .ace_entity.ace_other.ace_attribute-name, .ace-solarized-dark .ace_storage { color: #93A1A1 } .ace-solarized-dark .ace_cursor, .ace-solarized-dark .ace_string.ace_regexp { color: #D30102 } .ace-solarized-dark .ace_marker-layer .ace_active-line, .ace-solarized-dark .ace_marker-layer .ace_selection { background: rgba(255, 255, 255, 0.1) } .ace-solarized-dark.ace_multiselect .ace_selection.ace_start { box-shadow: 0 0 3px 0px #002B36; } .ace-solarized-dark .ace_marker-layer .ace_step { background: rgb(102, 82, 0) } .ace-solarized-dark .ace_marker-layer .ace_bracket { margin: -1px 0 0 -1px; border: 1px solid rgba(147, 161, 161, 0.50) } .ace-solarized-dark .ace_gutter-active-line { background-color: #0d3440 } .ace-solarized-dark .ace_marker-layer .ace_selected-word { border: 1px solid #073642 } .ace-solarized-dark .ace_invisible { color: rgba(147, 161, 161, 0.50) } .ace-solarized-dark .ace_keyword, .ace-solarized-dark .ace_meta, .ace-solarized-dark .ace_support.ace_class, .ace-solarized-dark .ace_support.ace_type { color: #859900 } .ace-solarized-dark .ace_constant.ace_character, .ace-solarized-dark .ace_constant.ace_other { color: #CB4B16 } .ace-solarized-dark .ace_constant.ace_language { color: #B58900 } .ace-solarized-dark .ace_constant.ace_numeric { color: #D33682 } .ace-solarized-dark .ace_fold { background-color: #268BD2; border-color: #93A1A1 } .ace-solarized-dark .ace_entity.ace_name.ace_function, .ace-solarized-dark .ace_entity.ace_name.ace_tag, .ace-solarized-dark .ace_support.ace_function, .ace-solarized-dark .ace_variable, .ace-solarized-dark .ace_variable.ace_language { color: #268BD2 } .ace-solarized-dark .ace_string { color: #2AA198 } .ace-solarized-dark .ace_comment { font-style: italic; color: #657B83 } .ace-solarized-dark .ace_indent-guide { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNg0Db1ZVCxc/sPAAd4AlUHlLenAAAAAElFTkSuQmCC) right repeat-y }";
+
+ace.define("ace/theme/solarized_dark",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!1,t.cssClass="ace-solarized_dark",t.cssText=cssText;var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)});
+ (function() {
+ ace.require(["ace/theme/solarized_dark"], function(m) {
+ if (typeof module == "object" && typeof exports == "object" && module) {
+ module.exports = m;
+ }
+ });
+ })();
+
\ No newline at end of file
diff --git a/templates/user/collection.tmpl b/templates/user/collection.tmpl
index 8af3bda..3f40f4a 100644
--- a/templates/user/collection.tmpl
+++ b/templates/user/collection.tmpl
@@ -1,238 +1,243 @@
{{define "upgrade"}}
<p><a href="/me/plan?to=/me/c/{{.Alias}}">Upgrade</a> for <span>$40 / year</span> to edit.</p>
{{end}}
{{define "collection"}}
{{template "header" .}}
<div class="content-container snug">
<div id="overlay"></div>
<h2>Customize {{.DisplayTitle}} <a href="{{if .SingleUser}}/{{else}}/{{.Alias}}/{{end}}">view blog</a></h2>
{{if .Flashes}}<ul class="errors">
{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
</ul>{{end}}
<form name="customize-form" action="/api/collections/{{.Alias}}" method="post" onsubmit="return disableSubmit()">
<div id="collection-options">
<div style="text-align:center">
<h1><input type="text" name="title" id="title" value="{{.DisplayTitle}}" placeholder="Title" /></h1>
<p><input type="text" name="description" id="description" value="{{.Description}}" placeholder="Description" /></p>
</div>
<div class="option">
<h2><a name="preferred-url"></a>URL</h2>
<div class="section">
{{if eq .Alias .Username}}<p style="font-size: 0.8em">This blog uses your username in its URL{{if .Federation}} and fediverse handle{{end}}. You can change it in your <a href="/me/settings">Account Settings</a>.</p>{{end}}
<ul style="list-style:none">
<li>
{{.FriendlyHost}}/<strong>{{.Alias}}</strong>/
</li>
<li>
<strong id="normal-handle-env" class="fedi-handle" {{if not .Federation}}style="display:none"{{end}}>@<span id="fedi-handle">{{.Alias}}</span>@<span id="fedi-domain">{{.FriendlyHost}}</span></strong>
</li>
</ul>
</div>
</div>
<div class="option">
<h2>Publicity</h2>
<div class="section">
<ul style="list-style:none">
<li>
<label><input type="radio" name="visibility" id="visibility-unlisted" value="0" {{if .IsUnlisted}}checked="checked"{{end}} />
Unlisted
</label>
<p>This blog is visible to {{if .Private}}any registered user on this instance{{else}}anyone with its link{{end}}.</p>
</li>
<li>
<label class="option-text"><input type="radio" name="visibility" id="visibility-private" value="2" {{if .IsPrivate}}checked="checked"{{end}} />
Private
</label>
<p>Only you may read this blog (while you're logged in).</p>
</li>
<li>
<label class="option-text"><input type="radio" name="visibility" id="visibility-protected" value="4" {{if .IsProtected}}checked="checked"{{end}} />
Password-protected: <input type="password" class="low-profile" name="password" id="collection-pass" autocomplete="new-password" placeholder="{{if .IsProtected}}xxxxxxxxxxxxxxxx{{else}}a memorable password{{end}}" />
</label>
<p>A password is required to read this blog.</p>
</li>
{{if not .SingleUser}}
<li>
<label class="option-text{{if not .LocalTimeline}} disabled{{end}}"><input type="radio" name="visibility" id="visibility-public" value="1" {{if .IsPublic}}checked="checked"{{end}} {{if not .LocalTimeline}}disabled="disabled"{{end}} />
Public
</label>
{{if .LocalTimeline}}<p>This blog is displayed on the public <a href="/read">reader</a>, and is visible to {{if .Private}}any registered user on this instance{{else}}anyone with its link{{end}}.</p>
{{else}}<p>The public reader is currently turned off for this community.</p>{{end}}
</li>
{{end}}
</ul>
</div>
</div>
<div class="option">
<h2>Display Format</h2>
<div class="section">
<p class="explain">Customize how your posts display on your page.
</p>
<ul style="list-style:none">
<li>
<label><input type="radio" name="format" id="format-blog" value="blog" {{if or (not .Format) (eq .Format "blog")}}checked="checked"{{end}} />
Blog
</label>
<p>Dates are shown. Latest posts listed first.</p>
</li>
<li>
<label class="option-text"><input type="radio" name="format" id="format-novel" value="novel" {{if eq .Format "novel"}}checked="checked"{{end}} />
Novel
</label>
<p>No dates shown. Oldest posts first.</p>
</li>
<li>
<label class="option-text"><input type="radio" name="format" id="format-notebook" value="notebook" {{if eq .Format "notebook"}}checked="checked"{{end}} />
Notebook
</label>
<p>No dates shown. Latest posts first.</p>
</li>
</ul>
</div>
</div>
<div class="option">
<h2>Text Rendering</h2>
<div class="section">
<p class="explain">Customize how plain text renders on your blog.</p>
<ul style="list-style:none">
<li>
<label class="option-text disabled"><input type="checkbox" name="markdown" checked="checked" disabled />
Markdown
</label>
</li>
<li>
<label><input type="checkbox" name="mathjax" {{if .RenderMathJax}}checked="checked"{{end}} />
MathJax
</label>
</li>
</ul>
</div>
</div>
<div class="option">
<h2>Custom CSS</h2>
<div class="section">
<textarea id="css-editor" class="section codable" name="style_sheet">{{.StyleSheet}}</textarea>
<p class="explain">See our guide on <a href="https://guides.write.as/customizing/#custom-css">customization</a>.</p>
</div>
</div>
<div class="option" style="text-align: center; margin-top: 4em;">
<input type="submit" id="save-changes" value="Save changes" />
<p><a href="{{if .SingleUser}}/{{else}}/{{.Alias}}/{{end}}">View Blog</a></p>
{{if ne .Alias .Username}}<p><a class="danger" href="#modal-delete" onclick="promptDelete();">Delete Blog...</a></p>{{end}}
</div>
</div>
</form>
</div>
<div id="modal-delete" class="modal">
<h2>Are you sure you want to delete this blog?</h2>
<div class="body short">
<p style="text-align:left">This will permanently erase <strong>{{.DisplayTitle}}</strong> ({{.FriendlyHost}}/{{.Alias}}) from the internet. Any posts on this blog will be saved and made into drafts (found on your <a href="/me/posts/">Drafts</a> page).</p>
<p>If you're sure you want to delete this blog, enter its name in the box below and press <strong>Delete</strong>.</p>
<ul id="delete-errors" class="errors"></ul>
<input id="confirm-text" placeholder="{{.Alias}}" type="text" class="boxy" style="margin-top: 0.5em;" />
<div style="text-align:right; margin-top: 1em;">
<a id="cancel-delete" style="margin-right:2em" href="#">Cancel</a>
<button id="btn-delete" class="danger" onclick="deleteBlog(); return false;">Delete</button>
</div>
</div>
</div>
<script src="/js/h.js"></script>
<script src="/js/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
+// set dark mode
+const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
// Begin shared modal code
function showModal(id) {
document.getElementById('overlay').style.display = 'block';
document.getElementById('modal-'+id).style.display = 'block';
}
var closeModals = function(e) {
e.preventDefault();
document.getElementById('overlay').style.display = 'none';
var modals = document.querySelectorAll('.modal');
for (var i=0; i<modals.length; i++) {
modals[i].style.display = 'none';
}
};
H.getEl('overlay').on('click', closeModals);
H.getEl('cancel-delete').on('click', closeModals);
// end
var deleteBlog = function(e) {
if (document.getElementById('confirm-text').value != '{{.Alias}}') {
document.getElementById('delete-errors').innerHTML = '<li class="urgent">Enter <strong>{{.Alias}}</strong> in the box below.</li>';
return;
}
// Clear errors
document.getElementById('delete-errors').innerHTML = '';
document.getElementById('btn-delete').innerHTML = 'Deleting...';
var http = new XMLHttpRequest();
var url = "/api/collections/{{.Alias}}?web=1";
http.open("DELETE", url, true);
http.setRequestHeader("Content-type", "application/json");
http.onreadystatechange = function() {
if (http.readyState == 4) {
if (http.status == 204) {
window.location = '/me/c/';
} else {
var data = JSON.parse(http.responseText);
document.getElementById('delete-errors').innerHTML = '<li class="urgent">'+data.error_msg+'</li>';
document.getElementById('btn-delete').innerHTML = 'Delete';
}
}
};
http.send(null);
};
function createHidden(theForm, key, value) {
var input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = value;
theForm.appendChild(input);
}
function disableSubmit() {
var $form = document.forms['customize-form'];
createHidden($form, 'style_sheet', cssEditor.getSession().getValue());
var $btn = document.getElementById("save-changes");
$btn.value = "Saving changes...";
$btn.disabled = true;
return true;
}
function promptDelete() {
showModal("delete");
}
var $fediDomain = document.getElementById('fedi-domain');
var $fediCustomDomain = document.getElementById('fedi-custom-domain');
var $customDomain = document.getElementById('domain-alias');
var $customHandleEnv = document.getElementById('custom-handle-env');
var $normalHandleEnv = document.getElementById('normal-handle-env');
var opt = {
showLineNumbers: false,
showPrintMargin: 0,
};
var theme = "ace/theme/chrome";
var cssEditor = ace.edit("css-editor");
+if (isDarkMode){
+ var theme = "ace/theme/solarized_dark";
+}
cssEditor.setTheme(theme);
cssEditor.session.setMode("ace/mode/css");
cssEditor.setOptions(opt);
</script>
{{template "footer" .}}
{{end}}