From 387327ba9ec332a7863fe4a84ba930bdf7585b87 Mon Sep 17 00:00:00 2001 From: Manuel Ebert Date: Wed, 10 Jul 2019 14:47:47 -0700 Subject: [PATCH] Landing page refresh --- .gitignore | 6 +- docs/assets/theme.css | 9 +- docs/theme/img/jrnl_white.svg | 10 ++ docs/theme/img/sprites.svg | 27 ++- docs/theme/index.css | 327 ++++++++++++---------------------- docs/theme/index.html | 110 ++++++++++++ docs/theme/index.js | 110 +----------- 7 files changed, 250 insertions(+), 349 deletions(-) create mode 100644 docs/theme/img/jrnl_white.svg create mode 100755 docs/theme/index.html diff --git a/.gitignore b/.gitignore index 966cdaa9..713c3ca9 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,7 @@ develop-eggs .installed.cfg lib lib64 +.python-version # Installer logs pip-log.txt @@ -28,10 +29,8 @@ Icon _build _sources _static -*.html objects.inv searchindex.js -docs/_themes/jrnl/static/css/jrnl.css # MS Visual Studio (PyTools) obj @@ -43,8 +42,6 @@ obj env/ env*/ -docs/_themes/jrnl/static/less/3L.less - # PyCharm Project files .idea/ @@ -53,3 +50,4 @@ exp/ _extras/ *.sublime-* +site/ diff --git a/docs/assets/theme.css b/docs/assets/theme.css index 6a328920..a3de87a9 100644 --- a/docs/assets/theme.css +++ b/docs/assets/theme.css @@ -4,8 +4,8 @@ /* ------------------------------------------------------------ */ :root { - --sidebar: #47375d; - --sidebar-dark: #47375d; + --sidebar: #604385; + --sidebar-dark: #604385; --off-white: rgba(255,255,255,.7); } @@ -93,7 +93,7 @@ a.icon-home:before { border-right: 1em solid white; } -.rst-versions, .rst-versions .rst-current-version { background: #47375d; } +.rst-versions, .rst-versions .rst-current-version { display: none; } .wy-menu-vertical span { color: white !important; font-size: 1.2em; @@ -103,8 +103,9 @@ a.icon-home:before { .wy-nav-side { - background-image: linear-gradient(0deg, #47375d 0%, #7C5685 100%); + background-image: linear-gradient(211deg, #95699C 0%, #604385 100%); font-weight: 300 !important; + height: 100%; } diff --git a/docs/theme/img/jrnl_white.svg b/docs/theme/img/jrnl_white.svg new file mode 100644 index 00000000..c324ab91 --- /dev/null +++ b/docs/theme/img/jrnl_white.svg @@ -0,0 +1,10 @@ + + + + jrnl_white + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/theme/img/sprites.svg b/docs/theme/img/sprites.svg index 6c6fa7c3..32091555 100644 --- a/docs/theme/img/sprites.svg +++ b/docs/theme/img/sprites.svg @@ -1,23 +1,18 @@ - + sprites Created with Sketch. - - - - - - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/theme/index.css b/docs/theme/index.css index 18614789..a236dbe3 100644 --- a/docs/theme/index.css +++ b/docs/theme/index.css @@ -1,15 +1,23 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} +body +{ + background-color: #FAFDFE; + background-color: #f7f8f9; + font-family: "Open Sans", "Helvetica Neue", sans-serif; + font-weight: 300; +} + .icon { background-image: url("img/sprites.svg"); width: 32px; height: 32px; display: inline-block; font-size: 40px; - background-size: 200px 120px; + background-size: 200px 80px; } -h3 { font-weight: 300; } +h3 { font-weight: 400; } .icon.secure { background-position: 0em 0em; @@ -47,91 +55,61 @@ h3 { font-weight: 300; } background-position: -3em -1em; } -.icon.cal { +.icon.twitter { background-position: -4em -1em; } -.icon.left { - background-position: 0em -2em; +#upper { + background-image: linear-gradient(211deg, #95699C 0%, #604385 100%); + color: white; + border: 0px solid transparent; + display: relative; + padding-top: 150px; + overflow: hidden; } -.icon.right { - background-position: -1em -2em; -} - -.icon.info { - background-position: -2em -2em; -} - -.icon.twitter { - background-position: -3em -2em; -} - -.pre-block { - background: #2f1e34; - border-radius: 6px; - padding: 1px 20px; - margin: 40px auto; - width: 500px; - box-shadow: 0px 1px 8px #a0acb7; +#terminal { + background: #1B1C2E; + max-width: 520px; + box-shadow: 0 -2px 16px 0 rgba(0,0,0,0.35); + border-radius: 6px 6px 0 0; + min-height: 100px; + margin: 0px auto; position: relative; + /*transform: translateY(40px);*/ color: #f7f8f9; font-family: "Monaco", "Courier New"; font-size: 12pt; + padding: 45px 20px 0px 20px; + line-height: 165%; } -.pre-block #args { - color: #f6f7b9; +#terminal b { + font-weight: normal; + color: #C2CDD9; } -.pre-block #output { - color: #9278b5; +#terminal i { + font-style: normal; + color: #BB97BA; } -.terminal { - background: #2f1e34; - border-radius: 6px; - padding: 1px 20px; - margin: 40px auto; - width: 500px; - box-shadow: 0px 1px 8px #a0acb7; - position: relative; - color: #f7f8f9; - font-family: "Monaco", "Courier New"; - font-size: 12pt; - padding: 50px 20px 10px 20px; -} - -.terminal #args { - color: #f6f7b9; -} - -.terminal #output { - color: #9278b5; -} - -.terminal:before { - content: "Terminal"; - display: block; - width: 100%; +#terminal:before { + content: ''; position: absolute; - left: 0; - box-shadow: inset 0px 1px 0px #f4f4f4, inset 0px -1px 0px #888; - margin-top: -50px; - text-align: center; - height: 30px; - line-height: 30px; - color: #777; - text-shadow: 0px 1px 0px #ddd; - border-radius: 5px 5px 0px 0px; - background: linear-gradient(180deg, #eaeaea 0%, #bababa 100%); + top: 15px; + left: 15px; + display: inline-block; + width: 15px; + height: 15px; + border-radius: 50%; + background: #3B3B4A; + box-shadow: 25px 0 0 #3B3B4A, 50px 0 0 #3B3B4A; } -body -{ - background-color: #47375d; - font-family: "Open Sans", "Helvetica Neue", sans-serif; - font-weight: 300; +#typed:before { + content: "$ "; + color: #A879A7; } #twitter { @@ -140,9 +118,9 @@ body text-decoration: none; top: 20px; right: 20px; - border: 1px solid #47375d; + border: 1px solid white; padding: 5px 10px; - color: #47375d; + color: white; border-radius: 3px; opacity: .7; } @@ -160,31 +138,16 @@ body text-decoration: none; } -#title, +#title { + max-width: 690px; + margin: 0 auto; + padding: 0px 20px; +} + #prompt { - width: 900px; - margin: 0px auto; -} - -#upper { - *zoom: 1; - background: #f7f8f9; - box-shadow: inset 0px -6px 6px -3px #dadfe3; -} - -#upper:before, -#upper:after { - content: " "; - display: table; -} - -#upper:after { - clear: both; -} - -#upper #title { - width: 650px; - margin: 150px auto 75px auto; + max-width: 700px; + margin: 100px auto 0px auto; + padding: 0px 20px; } #upper img { @@ -192,60 +155,12 @@ body margin-right: 30px; } -#upper h1 { - color: #564371; +h1 { + color: white; font-weight: 300; } -#upper #prompt { - width: 640px; - margin: 0 auto; - *zoom: 1; -} - -#upper #prompt:before, -#upper #prompt:after { - content: " "; - display: table; -} - -#upper #prompt:after { - clear: both; -} - -#upper .terminal { - border-radius: 6px 6px 0px 0px; - float: left; - margin: 0px; - width: 500px; - min-height: 134px; - box-sizing: border-box; -} - -#upper .pleft, -#upper .pright { - text-align: center; - box-sizing: border-box; - float: left; - padding-top: 50px; - width: 70px; -} - -#upper .pleft i, -#upper .pright i { - opacity: .6; -} - -#upper .pleft i:hover, -#upper .pright i:hover { - opacity: 1; - cursor: pointer; -} - #nav { - background: linear-gradient(180deg, #7c95ca 0%, #5e7dc5 100%); - height: 60px; - box-shadow: 0px 6px 6px -3px #413155; text-align: center; } @@ -253,59 +168,60 @@ body display: none; } +a { + color: #684688; + text-decoration: underline; +} + #nav a { - color: #f7f8f9; - text-shadow: 0px -1px 0px #253865; - text-decoration: none; font-size: 14pt; - line-height: 60px; + line-height: 40pt; margin: 0 40px; } -#nav a:hover { - color: #f8d055; - text-shadow: 0px -1px 0px #947206; +a:hover { + color: #A3629F; } #nav a.cta { - background: linear-gradient(180deg, #725794 0%, #564371 100%); - box-shadow: 0px 1px 0px #413155; - border-radius: 5px; - padding: 6px 10px 5px 10px; + display: inline-block; + color: white; + background-image: linear-gradient(259deg, #A3629F 0%, #604385 100%); + box-shadow: 0 2px 8px 0 rgba(0,0,0,0.25); + border-radius: 50px; + padding: 0px 30pt; white-space: nowrap; + transition: all .1s ease; + font-weight: 600; + text-decoration: none; } #nav a.cta:hover { - background: linear-gradient(180deg, #f6c324 0%, #c59708 100%); - box-shadow: 0px 1px 0px #947206; - text-shadow: 0px -1px 0px #947206; + text-decoration: none; + background-image: linear-gradient(259deg, #AE57A8 0%, #68419C 100%); + box-shadow: 0 4px 16px 0 rgba(0,0,0,0.25); color: #f7f8f9; } #lower { - color: #f7f8f9; - max-width: 920px; - margin: 0 auto; + padding: 50px 0; } -#lower a { - color: #deaa09; - text-decoration: none; -} - -#lower a:hover { - color: #f8d055; - text-decoration: underline; -} .flex { display: flex; - margin: 0 10px; + margin: 0 auto; + max-width: 920px; + flex-wrap: wrap; + padding: 20px 20px; + justify-content: space-between; + } .flex .item { - margin: 10px 5px; - position: relative; + /*margin: 20px;*/ + margin-top: 40px; + width: 32%; } .flex .item:first-child { @@ -317,66 +233,60 @@ body .flex .item i { - position: absolute; + float: left; left: 0; - top: 16px; -} - -.flex .item h3, p { - padding-left: 40px; + display: block; + margin: 0px auto 10px auto; } .flex .item h3 { - font-size: 12pt; + margin-top: 0; + font-size: 14pt; + color: #684688; margin-bottom: .5em; + font-weight: 300; + margin-left: 40px; } .flex .item p { - font-size: 10pt; + padding-left: 40px; + color: #888; + font-size: 12pt; margin: 0; } -.flex.lower { - opacity: .8; -} @media screen and (max-width: 680px) { .flex { display: block; + padding: 0; } .flex .item { - margin: 40px 20px !important; + width: 100%; } - .flex .item h3, p { - padding-left: 48px; - } - - #nav { - height: auto; - padding-bottom: 10px; + #lower { + padding: 20px; + margin: 0; + width: calc(100% - 40px); } #nav a, #nav a#twitter-nav { - display: block; + display: inline-block; + margin: 0px 10px; } #nav a.cta { - margin: 10px; - padding: 1px; + display: block; + margin: 20px; } #upper #twitter { display: none; } - #upper #title { - margin: 30px 0 10px 0; - } - #upper #logo { - backgound: red; display: block; float: none; margin: 0px auto; @@ -386,19 +296,4 @@ body display: none; } - #upper .pleft, - #upper .pright { - display: none; - } - - #upper #prompt, - #upper #title { - width: 100%; - box-sizing: border-box; - padding: 0px 20px; - } - - #upper .terminal { - width: 100%; - } } diff --git a/docs/theme/index.html b/docs/theme/index.html new file mode 100755 index 00000000..75f7b306 --- /dev/null +++ b/docs/theme/index.html @@ -0,0 +1,110 @@ + + + + + + jrnl - The Command Line Journal + + + + + + + + + + + + + + + + + + + + + + + +
+ Tell your friends +
+ +

Collect your thoughts and notes
without leaving the command line.

+
+
+
+
+
+
+
+
+ +
+
+ +

Human friendly.

+

jrnl has a natural-language interface so you don't have to remember cryptic shortcuts when you're writing down your thoughts.

+
+
+ +

Future-proof.

+

Your journals are stored in plain-text files that will still be readable in 50 years when all your fancy iPad apps will have gone the way of the Dodo.

+
+
+ +

Secure.

+

Encrypt your journals with the industry-strength AES encryption. The NSA won't be able to read your dirty secrets.

+
+
+ +

Accessible anywhere.

+

Sync your journals with Dropbox and capture your thoughts where ever you are

+
+
+ +

DayOne compatible.

+

Read, write and search your DayOne journal from the command line.

+
+
+ +

Free & Open Source.

+

jrnl is made by a bunch of really friendly and remarkably attractive people. Maybe even you?

+
+
+ +

For work and play.

+

Effortlessly access several journals for all parts of your life.

+
+
+
+
+
+ + + + + diff --git a/docs/theme/index.js b/docs/theme/index.js index 4a5eb91a..7ad89342 100644 --- a/docs/theme/index.js +++ b/docs/theme/index.js @@ -1,109 +1 @@ -var phrases = [ - ["", "today: Started writing my memoirs. On the command line. Like a boss.", ""], - ["", "yesterday 2pm: used jrnl to keep track of accomplished tasks. The done.txt for my todo.txt", ""], - ["-from 2009 -until may", "", "(Displays all entries from January 2009 to last may)"], - ["", "A day on the beach with @beth and @frank. Taggidy-tag-tag.", ""], - ["--tags", "", "@idea 7
@beth 5"], - ["--export json", "", "(Exports your entire journal to json)"], - ["--encrypt", "", "(256 bit AES encryption. Crack this, NSA.)"] -] - -var args = document.getElementById("args"); -var input = document.getElementById("input"); -var output = document.getElementById("output"); -var current = 0 -var timer = null; -var fadeInTimer = null; -var fadeOutTimer = null; -var letterTimer = null; -var unletterTimer = null; - -var next = function() { - current = (current + 1) % phrases.length; - reveal(current); - timer = setTimeout(next, 5000); -} - -var prev = function() { - current = (current === 0) ? phrases.length - 1 : current - 1; - reveal(current); - timer = setTimeout(next, 5000); -} - -var reveal = function(idx) { - var args_text = phrases[idx][0]; - var input_text = phrases[idx][1]; - var output_text = phrases[idx][2]; - var old_dix = idx == 0 ? phrases.length - 1 : idx - 1; - console.log(idx, old_dix, "++++++++++++") - var old_args_text = args.innerHTML; - var old_input_text = input.innerHTML; - var old_output_text = output.innerHTML; - console.log(args_text, input_text, output_text) - console.log(old_args_text, old_input_text, old_output_text) - var s4 = function() {fadeIn(output_text, output);} - var s3 = function() {letter(input_text, input, s4);} - var s2 = function() {letter(args_text, args, s3);} - var s1 = function() {unletter(old_args_text, args, s2);} - var s0 = function() {unletter(old_input_text, input, s1);} - fadeOut(old_output_text, output, s0, 10); -} - -var fadeIn = function(text, element, next, step) { - step = step || 0 - var nx = function() { fadeIn(text, element, next, ++step); } - if (step==0) { - element.innerHTML = ""; - fadeInTimer = setTimeout(nx, 550); - return; - } - if (step==1) {element.innerHTML = text;} - if (step>10 || !text) { if (next) {next(); return;} else return;} - element.style.opacity = (step-1)/10; - element.style.filter = 'alpha(opacity=' + (step-1)*10 + ')'; - fadeInTimer = setTimeout(nx, 50); -} - -var fadeOut = function(text, element, next, step) { - if (step===10) element.innerHTML = text; - if (step<0 || !text) { - element.innerHTML = ""; - if (next) {next(); return;} - else return; - } - element.style.opacity = step/10; - element.style.filter = 'alpha(opacity=' + step*10 + ')'; - var nx = function() { fadeOut(text, element, next, --step); } - fadeOutTimer = setTimeout(nx, 50); -} - -var unletter = function(text, element, next, timeout, index) { - timeout = timeout||10; - if (index==null) index = text.length; - if (index==-1 || !text.length) { if (next) {next(); return;} else return;} - element.innerHTML = text.substring(0, index); - var nx = function() { unletter(text, element, next, timeout, --index); } - unletterTimer = setTimeout(nx, timeout); -} - -var letter = function(text, element, next, timeout, index) { - timeout = timeout||35; - index = index||0; - if (index > text.length || !text.length) { if (next) {next(); return;} else return;} - element.innerHTML = text.substring(0, index); - var nx = function() { letter(text, element, next, timeout, ++index); } - letterTimer = setTimeout(nx, timeout); -} - -var reset = function() { - var timers = [timer, fadeInTimer, fadeOutTimer, letterTimer, unletterTimer]; - timers.forEach(function (t) { - clearTimeout(t); - }); - - args.innerHTML = ""; - input.innerHTML = ""; - output.innerHTML = ""; -} - -timer = setTimeout(next, 3000); +var typed2 =