Skip to content

Commit eaee128

Browse files
tobiasraabetobiasraabe
authored
Add terminal animations. (#322)
1 parent cdf1222 commit eaee128

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1316
-228
lines changed

‎.pre-commit-config.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ repos:
120120
rev: v2.2.2
121121
hooks:
122122
- id: codespell
123-
args: [-L hist,-L unparseable, -L falsy]
123+
additional_dependencies: [tomli]
124124
- repo: https://github.com/mgedmin/check-manifest
125125
rev: "0.48"
126126
hooks:

‎README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ $ conda install -c conda-forge pytask
6363
```
6464

6565
Color support is automatically available on non-Windows platforms. On Windows, please,
66-
use [Windows Terminal](https://github.com/microsoft/terminal) which can be, for example,
67-
installed via the [Microsoft Store](https://aka.ms/terminal).
66+
use [Windows Terminal](https://github.com/microsoft/terminal), which can be, for
67+
example, installed via the [Microsoft Store](https://aka.ms/terminal).
6868

6969
To quickly set up a new project, use the
7070
[cookiecutter-pytask-project](https://github.com/pytask-dev/cookiecutter-pytask-project)
@@ -98,7 +98,7 @@ Here are some details:
9898

9999
To execute the task, enter `pytask` on the command-line
100100

101-
![image](https://github.com/pytask-dev/pytask/raw/main/docs/source/_static/images/readme.svg)
101+
![image](https://github.com/pytask-dev/pytask/raw/main/docs/source/_static/images/readme.gif)
102102

103103
# Documentation
104104

@@ -135,7 +135,7 @@ written by [Darren Burns](https://github.com/darrenburns).
135135
# Citation
136136

137137
If you rely on pytask to manage your research project, please cite it with the following
138-
key to helping others to discover the tool.
138+
key to help others to discover the tool.
139139

140140
```bibtex
141141
@Unpublished{Raabe2020,

‎docs/source/_static/css/custom.css

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,95 @@ pre {
1414
li pre {
1515
padding-left: 20px
1616
}
17+
18+
.termynal-comment {
19+
color: #4a968f;
20+
font-style: italic;
21+
display: block;
22+
}
23+
24+
.termy [data-termynal] {
25+
white-space: pre-wrap;
26+
}
27+
28+
a.external-link::after {
29+
/* \00A0 is a non-breaking space
30+
to make the mark be on the same line as the link
31+
*/
32+
content: "\00A0[↪]";
33+
}
34+
35+
a.internal-link::after {
36+
/* \00A0 is a non-breaking space
37+
to make the mark be on the same line as the link
38+
*/
39+
content: "\00A0↪";
40+
}
41+
42+
43+
:root {
44+
--termynal-green: #137C39;
45+
--termynal-red: #BF2D2D;
46+
--termynal-yellow: #F4C041;
47+
--termynal-white: #f2f2f2;
48+
--termynal-black: #0c0c0c;
49+
--termynal-blue: #11a8cd;
50+
--termynal-grey: #7f7f7f;
51+
}
52+
53+
54+
.termynal-failed {
55+
color: var(--termynal-red);
56+
}
57+
58+
.termynal-failed-textonly {
59+
color: var(--termynal-white);
60+
background: var(--termynal-red);
61+
font-weight: bold;
62+
}
63+
64+
.termynal-success {
65+
color: var(--termynal-green);
66+
}
67+
68+
.termynal-success-textonly {
69+
color: var(--termynal-white);
70+
background: var(--termynal-green);
71+
font-weight: bold;
72+
}
73+
74+
.termynal-skipped {
75+
color: var(--termynal-yellow);
76+
}
77+
78+
.termynal-skipped-textonly {
79+
color: var(--termynal-black);
80+
background: var(--termynal-yellow);
81+
font-weight: bold;
82+
}
83+
84+
.termynal-warning {
85+
color: var(--termynal-yellow);
86+
}
87+
.termynal-command {
88+
color: var(--termynal-green);
89+
font-weight: bold;
90+
}
91+
.termynal-option {
92+
color: var(--termynal-yellow);
93+
font-weight: bold;
94+
}
95+
.termynal-switch {
96+
color: var(--termynal-red);
97+
font-weight: bold;
98+
}
99+
.termynal-metavar {
100+
color: yellow;
101+
font-weight: bold;
102+
}
103+
.termynal-dim {
104+
color: var(--termynal-grey);
105+
}
106+
.termynal-number {
107+
color: var(--termynal-blue);
108+
}

‎docs/source/_static/css/termynal.css

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/**
2+
* termynal.js
3+
*
4+
* @author Ines Montani <[email protected]>
5+
* @version 0.0.1
6+
* @license MIT
7+
*/
8+
9+
:root {
10+
--color-bg: #0c0c0c;
11+
--color-text: #f2f2f2;
12+
--color-text-subtle: #a2a2a2;
13+
}
14+
15+
[data-termynal] {
16+
width: 750px;
17+
max-width: 100%;
18+
background: var(--color-bg);
19+
color: var(--color-text);
20+
/* font-size: 18px; */
21+
font-size: 15px;
22+
/* font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace; */
23+
font-family: 'Roboto Mono', 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace;
24+
border-radius: 4px;
25+
padding: 75px 45px 35px;
26+
position: relative;
27+
-webkit-box-sizing: border-box;
28+
box-sizing: border-box;
29+
line-height: 1.2;
30+
}
31+
32+
[data-termynal]:before {
33+
content: '';
34+
position: absolute;
35+
top: 15px;
36+
left: 15px;
37+
display: inline-block;
38+
width: 15px;
39+
height: 15px;
40+
border-radius: 50%;
41+
/* A little hack to display the window buttons in one pseudo element. */
42+
background: #d9515d;
43+
-webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
44+
box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
45+
}
46+
47+
[data-termynal]:after {
48+
content: 'bash';
49+
position: absolute;
50+
color: var(--color-text-subtle);
51+
top: 5px;
52+
left: 0;
53+
width: 100%;
54+
text-align: center;
55+
}
56+
57+
a[data-terminal-control] {
58+
text-align: right;
59+
display: block;
60+
color: #aebbff;
61+
}
62+
63+
[data-ty] {
64+
display: block;
65+
line-height: 2;
66+
}
67+
68+
[data-ty]:before {
69+
/* Set up defaults and ensure empty lines are displayed. */
70+
content: '';
71+
display: inline-block;
72+
vertical-align: middle;
73+
}
74+
75+
[data-ty="input"]:before,
76+
[data-ty-prompt]:before {
77+
margin-right: 0.75em;
78+
color: var(--color-text-subtle);
79+
}
80+
81+
[data-ty="input"]:before {
82+
content: '$';
83+
}
84+
85+
[data-ty][data-ty-prompt]:before {
86+
content: attr(data-ty-prompt);
87+
}
88+
89+
[data-ty-cursor]:after {
90+
content: attr(data-ty-cursor);
91+
font-family: monospace;
92+
margin-left: 0.5em;
93+
-webkit-animation: blink 1s infinite;
94+
animation: blink 1s infinite;
95+
}
96+
97+
98+
/* Cursor animation */
99+
100+
@-webkit-keyframes blink {
101+
50% {
102+
opacity: 0;
103+
}
104+
}
105+
106+
@keyframes blink {
107+
50% {
108+
opacity: 0;
109+
}
110+
}

‎docs/source/_static/images/persist-persisted.svg

Lines changed: 0 additions & 133 deletions
This file was deleted.

‎docs/source/_static/images/readme.gif

27.8 KB
Loading

0 commit comments

Comments
 (0)