From 309eb4d8d0fa41a8d2b670f67bba44aa350ca8e8 Mon Sep 17 00:00:00 2001 From: Jonas Duri Date: Wed, 30 Jan 2019 21:20:35 +0100 Subject: [PATCH] change overall look and feel --- lib/terminal.css | 85 +++++++++++++++++------- src/layouts/dark.ejs | 19 ++++-- src/layouts/default.ejs | 10 ++- src/layouts/sans.ejs | 18 +++-- src/pages/dark.md | 2 +- src/partials/aside.ejs | 8 +++ src/partials/bottom-scripts.ejs | 2 + src/partials/components.ejs | 58 ++++++++-------- src/partials/components/nav-list.ejs | 18 +++++ src/partials/components/nav.ejs | 1 - src/partials/documentation.ejs | 6 ++ src/partials/documentation/variables.ejs | 53 +++++++++++++++ src/partials/head.ejs | 48 ------------- src/partials/navigation.ejs | 14 ++-- 14 files changed, 214 insertions(+), 128 deletions(-) create mode 100644 src/partials/components/nav-list.ejs create mode 100644 src/partials/documentation.ejs create mode 100644 src/partials/documentation/variables.ejs diff --git a/lib/terminal.css b/lib/terminal.css index 86c217f..d750183 100644 --- a/lib/terminal.css +++ b/lib/terminal.css @@ -1,21 +1,21 @@ :root { - --global-font-size: 16px; + --global-font-size: 15px; --global-line-height: 1.4em; --global-space: 10px; - --font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif; - --mono-font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif; + --font-stack: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif; + --mono-font-stack: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif; --background-color: #fff; - --page-width: 65em; + --page-width: 60em; --font-color: #151515; --invert-font-color: #fff; - --secondary-color: #6a737b; - --tertiary-color: #6a737b; - --primary-color: #511378; + --primary-color: #17a569; + --secondary-color: #727578; --error-color: #d20962; - --progress-bar-background: #6a737b; + --progress-bar-background: #727578; --progress-bar-fill: #151515; - --code-bg-color: #dce2e7; - --input-style: dashed; + --code-bg-color: #e8eff2; + --input-style: solid; + --display-h1-decoration: none; } * { @@ -74,7 +74,6 @@ a { cursor: pointer; color: var(--primary-color); text-decoration: none; - border-bottom: 1px solid var(--primary-color); } a:hover { @@ -136,6 +135,7 @@ h1:after { position: absolute; bottom: 5px; left: 0; + display: var(--display-h1-decoration); } h1 + *, .logo + * { @@ -151,16 +151,15 @@ h1 + *, .logo + * { .terminal-prompt::after{ content: ""; - -webkit-animation: cursor 1s infinite; - animation: cursor 1s infinite; + animation: cursor 800ms infinite; background: var(--primary-color); - border-radius: 1px; + border-radius: 0px; display: inline-block; - height: 1rem; - margin-left: 4px; - width: 5px; - bottom: -1px; - position: relative; + height: 1em; + margin-left: .2em; + width: 3px; + bottom: -2px; + position: relative; } @-webkit-keyframes cursor { @@ -195,12 +194,16 @@ h2, h3, h4, h5, h6 { font-weight: 600; } -li { +li, li>ul>li { position: relative; display: block; padding-left: calc(var(--global-space) * 2); } +nav>ul>li { + padding-left: 0; +} + li:after { position: absolute; top: 0; @@ -211,6 +214,10 @@ ul > li:after { content: "-"; } +nav ul > li:after { + content: ""; +} + ol { counter-reset: item; } @@ -400,7 +407,7 @@ label { input[type="email"], input[type="text"], input[type="number"], input[type="password"], input[type="search"] { border: 1px var(--input-style) var(--font-color); width: 100%; - padding: .5em; + padding: .7em .5em; font-size: 1em; font-family: var(--font-stack); -webkit-appearance: none; @@ -460,6 +467,21 @@ input::placeholder, textarea::placeholder { opacity: 1; } +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover +textarea:-webkit-autofill:focus, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus { + border: 1px solid var(--font-color); + -webkit-text-fill-color: var(--font-color); + -webkit-box-shadow: 0 0 0px 1000px var(--invert-font-color) inset; + transition: background-color 5000s ease-in-out 0s; +} + .btn { display: -ms-inline-flexbox; display: inline-flex; @@ -567,6 +589,11 @@ input::placeholder, textarea::placeholder { z-index: 2; } +.btn-small { + padding: .5em 1.3em!important; + font-size: .9em!important; +} + .btn-group { overflow: auto; } @@ -584,7 +611,7 @@ input::placeholder, textarea::placeholder { } .terminal-card > header { - color: var(--font-color); + color: var(--invert-font-color); text-align: center; background-color: var(--secondary-color); padding: .5em 0; @@ -618,6 +645,7 @@ input::placeholder, textarea::placeholder { .terminal-nav { display: flex; flex-direction: column; + align-items: flex-start; } .terminal-logo { @@ -663,15 +691,21 @@ input::placeholder, textarea::placeholder { display: none; } -.terminal-menu li a { +.terminal-menu li a:not(.btn) { text-decoration: none; display: block; width: 100%; border: none; + color: var(--secondary-color); } .terminal-menu li a.active { - font-weight: 600; + color: var(--font-color); +} + +.terminal-menu li a:hover { + background: none; + color: inherit; } @media screen and (max-width: 960px) { @@ -694,6 +728,7 @@ input::placeholder, textarea::placeholder { @media only screen and (min-width: 30em) { .terminal-nav { flex-direction: row; + align-items: center; } .terminal-menu ul { flex-direction: row; @@ -769,7 +804,7 @@ figure > img { } figure > figcaption { - color: var(--tertiary-color); + color: var(--secondary-color); text-align: center; } diff --git a/src/layouts/dark.ejs b/src/layouts/dark.ejs index 21c152f..a8806ab 100644 --- a/src/layouts/dark.ejs +++ b/src/layouts/dark.ejs @@ -4,12 +4,13 @@ <%- include('partials/head') %> - <%- include('partials/git-corner') %> <%- include('partials/navigation', { "page": "dark" }) %>

@@ -34,7 +36,14 @@

<%- include('partials/aside') %> - <%- include('partials/components') %> +
+ <%- include('partials/components') %> + <%- include('partials/documentation') %> +
+ <%- include('partials/footer') %> +
+ <%- include('partials/version') %> +
<%- include('partials/bottom-scripts') %> diff --git a/src/layouts/default.ejs b/src/layouts/default.ejs index d519357..84bce45 100644 --- a/src/layouts/default.ejs +++ b/src/layouts/default.ejs @@ -4,7 +4,6 @@ <%- include('partials/head') %> - <%- include('partials/git-corner') %> <%- include('partials/navigation', { "page": "main" }) %>

@@ -15,7 +14,14 @@

<%- include('partials/aside') %> - <%- include('partials/components') %> +
+ <%- include('partials/components') %> + <%- include('partials/documentation') %> +
+ <%- include('partials/footer') %> +
+ <%- include('partials/version') %> +
<%- include('partials/bottom-scripts') %> diff --git a/src/layouts/sans.ejs b/src/layouts/sans.ejs index 3d27670..c2523d8 100644 --- a/src/layouts/sans.ejs +++ b/src/layouts/sans.ejs @@ -4,15 +4,14 @@ <%- include('partials/head') %> - <%- include('partials/git-corner') %> <%- include('partials/navigation', { "page": "sans" }) %>

@@ -23,7 +22,14 @@

<%- include('partials/aside') %> - <%- include('partials/components') %> +
+ <%- include('partials/components') %> + <%- include('partials/documentation') %> +
+ <%- include('partials/footer') %> +
+ <%- include('partials/version') %> +
<%- include('partials/bottom-scripts') %> diff --git a/src/pages/dark.md b/src/pages/dark.md index b39c767..e787382 100644 --- a/src/pages/dark.md +++ b/src/pages/dark.md @@ -23,7 +23,7 @@ import 'terminal.css' Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.2/dist/terminal.min.css) ```html - + ``` ## Themes diff --git a/src/partials/aside.ejs b/src/partials/aside.ejs index 7ae6445..5c5468e 100644 --- a/src/partials/aside.ejs +++ b/src/partials/aside.ejs @@ -4,6 +4,7 @@ + +

Documentation

+ diff --git a/src/partials/bottom-scripts.ejs b/src/partials/bottom-scripts.ejs index 534fadb..97e4c8c 100644 --- a/src/partials/bottom-scripts.ejs +++ b/src/partials/bottom-scripts.ejs @@ -1,8 +1,10 @@ + diff --git a/src/partials/components.ejs b/src/partials/components.ejs index f150047..0c9d0ab 100644 --- a/src/partials/components.ejs +++ b/src/partials/components.ejs @@ -1,31 +1,27 @@ -
- <%- include('components/grid') %> -
- <%- include('components/nav') %> -
- <%- include('components/lists') %> -
- <%- include('components/typography') %> -
- <%- include('components/tables') %> -
- <%- include('components/special-elements') %> -
- <%- include('components/forms') %> -
- <%- include('components/progress') %> -
- <%- include('components/buttons') %> -
- <%- include('components/card') %> -
- <%- include('components/alerts') %> -
- <%- include('components/figure') %> -
- <%- include('components/highlight-js.ejs') %> -
- <%- include('footer') %> -
- <%- include('version') %> -
\ No newline at end of file +<%- include('components/grid') %> +
+<%- include('components/nav') %> +
+<%- include('components/nav-list') %> +
+<%- include('components/lists') %> +
+<%- include('components/typography') %> +
+<%- include('components/tables') %> +
+<%- include('components/special-elements') %> +
+<%- include('components/forms') %> +
+<%- include('components/progress') %> +
+<%- include('components/buttons') %> +
+<%- include('components/card') %> +
+<%- include('components/alerts') %> +
+<%- include('components/figure') %> +
+<%- include('components/highlight-js.ejs') %> diff --git a/src/partials/components/nav-list.ejs b/src/partials/components/nav-list.ejs new file mode 100644 index 0000000..0162b1f --- /dev/null +++ b/src/partials/components/nav-list.ejs @@ -0,0 +1,18 @@ +
+
+ +
diff --git a/src/partials/components/nav.ejs b/src/partials/components/nav.ejs index 0c78f16..e260983 100644 --- a/src/partials/components/nav.ejs +++ b/src/partials/components/nav.ejs @@ -11,5 +11,4 @@
  • Item #3
    • - diff --git a/src/partials/documentation.ejs b/src/partials/documentation.ejs new file mode 100644 index 0000000..1d1f66b --- /dev/null +++ b/src/partials/documentation.ejs @@ -0,0 +1,6 @@ +
    +
    +

    Documentation

    +

    Most of the documentation is still in an early stage. For in detail informations please have a look at the source of this website.

    + <%- include('documentation/variables') %> +
    \ No newline at end of file diff --git a/src/partials/documentation/variables.ejs b/src/partials/documentation/variables.ejs new file mode 100644 index 0000000..6ce49be --- /dev/null +++ b/src/partials/documentation/variables.ejs @@ -0,0 +1,53 @@ +
    +
    +

    Variables

    +
    +

    It's easy to customize the style of Terminal CSS with CSS Variables.

    + +
    + +
    --global-font-size
    +
    The Base font size
    +
    --global-line-height
    +
    The base line height. Modify this to achieve best readability.
    +
    --font-stack
    +
    The fonts for the website.
    +
    Use @font-face or any other font provider to include your custom fonts.
    +
    --mono-font-stack
    +
    Same as above but for code.
    +
    --background-color
    +
    The page background color
    +
    --font-color
    +
    The base font color for text, headlines, blockquotes, lists etc.
    +
    --invert-font-color
    +
    Sometimes text appears on colored background. Adjust this color to improve readability.
    +
    --primary-color
    +
    The primary color is used for links and buttons.
    +
    --secondary-color
    +
    The secondary color is more subtle then the primary color. It's used for code highlighting and image captions.
    +
    --error-color
    +
    Used for error alerts and form validation.
    +
    --progress-bar-background
    +
    The background color of progress bars.
    +
    --progress-bar-fill
    +
    The fill color, indicating the progress in progress bars.
    +
    --code-bg-color
    +
    The background color of <code> elements.
    +
    --input-style
    +
    The style of input element borders. Possible values are:
    +
    none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden, inherit, initial, unset
    +
    --display-h1-decoration
    +
    Show a double dash below h1 elements. Possible values are:
    +
    block, none
    +
    +
    + diff --git a/src/partials/head.ejs b/src/partials/head.ejs index b5750ec..f6fb0cd 100644 --- a/src/partials/head.ejs +++ b/src/partials/head.ejs @@ -90,54 +90,6 @@ href="/favicon/favicon-16x16.png" />