summaryrefslogtreecommitdiff
path: root/themes/terminal/assets/css/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'themes/terminal/assets/css/main.css')
-rw-r--r--themes/terminal/assets/css/main.css346
1 files changed, 346 insertions, 0 deletions
diff --git a/themes/terminal/assets/css/main.css b/themes/terminal/assets/css/main.css
new file mode 100644
index 0000000..8929ea1
--- /dev/null
+++ b/themes/terminal/assets/css/main.css
@@ -0,0 +1,346 @@
+html {
+ box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+ box-sizing: inherit;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
+ font-size: 1rem;
+ line-height: 1.54;
+ letter-spacing: -0.02em;
+ background-color: color-mod(var(--accent) blend(#1D1E28 98%));
+ color: var(--color);
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
+ font-variant-ligatures: contextual;
+ -webkit-overflow-scrolling: touch;
+ -webkit-text-size-adjust: 100%;
+
+ @media (--phone) {
+ font-size: 1rem;
+ }
+}
+
+.headings--one-size {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ line-height: 1.3;
+
+ &:not(first-child) {
+ margin-top: 40px;
+ }
+ }
+
+ h1,
+ h2,
+ h3 {
+ font-size: 1.4rem;
+ }
+
+ h4,
+ h5,
+ h6 {
+ font-size: 1.2rem;
+ }
+}
+
+a {
+ color: inherit;
+
+ /* Waiting for a better times... */
+ /* &:has(code) {
+ text-decoration-color: var(--accent);
+ } */
+}
+
+img {
+ display: block;
+ max-width: 100%;
+
+ &.left {
+ margin-right: auto;
+ }
+
+ &.center {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ &.right {
+ margin-left: auto;
+ }
+}
+
+p {
+ margin-bottom: 20px;
+}
+
+figure {
+ display: table;
+ max-width: 100%;
+ margin: 25px 0;
+
+ &.left {
+ margin-right: auto;
+ }
+
+ &.center {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ &.right {
+ margin-left: auto;
+ }
+
+ figcaption {
+ font-size: 14px;
+ padding: 5px 10px;
+ margin-top: 5px;
+ background: var(--accent);
+ color: var(--background);
+ /* opacity: .8; */
+
+ &.left {
+ text-align: left;
+ }
+
+ &.center {
+ text-align: center;
+ }
+
+ &.right {
+ text-align: right;
+ }
+ }
+}
+
+code, kbd {
+ font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
+ font-feature-settings: normal;
+ background: color-mod(var(--accent) a(20%));
+ color: var(--accent);
+ padding: 1px 6px;
+ margin: 0 2px;
+ font-size: .95rem;
+
+ code, kbd {
+ background: transparent;
+ padding: 0;
+ margin: 0;
+ }
+}
+
+pre {
+ background: transparent !important;
+ padding: 20px 10px;
+ margin: 40px 0;
+ font-size: .95rem !important;
+ overflow: auto;
+ border-top: 1px solid rgba(255, 255, 255, .1);
+ border-bottom: 1px solid rgba(255, 255, 255, .1);
+
+ + pre {
+ border-top: 0;
+ margin-top: -40px;
+ }
+
+ @media (--phone) {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ }
+
+ code {
+ background: none !important;
+ margin: 0;
+ padding: 0;
+ font-size: inherit;
+ border: none;
+ }
+}
+
+blockquote {
+ border-top: 1px solid var(--accent);
+ border-bottom: 1px solid var(--accent);
+ margin: 40px 0;
+ padding: 25px;
+
+ @media (--phone) {
+ padding-right: 0;
+ }
+
+ p:first-of-type {
+ margin-top: 0;
+ }
+
+ p:last-of-type {
+ margin-bottom: 0;
+ }
+
+ p {
+ position: relative;
+ }
+
+ p:first-of-type:before {
+ content: '>';
+ display: block;
+ position: absolute;
+ left: -25px;
+ color: var(--accent);
+ }
+
+ &.twitter-tweet {
+ position: relative;
+ background: color-mod(var(--accent) a(10%));
+ font: inherit;
+ color: inherit;
+ border: 1px solid var(--accent);
+ padding-top: 60px;
+
+ p:before {
+ content: '';
+ }
+
+ &:before {
+ content: '> From Twitter:';
+ position: absolute;
+ top: 20px;
+ color: var(--accent);
+ font-weight: bold;
+ }
+
+ a {
+ color: var(--accent);
+ }
+ }
+}
+
+table {
+ table-layout: auto;
+ border-collapse: collapse;
+ width: 100%;
+ margin: 40px 0;
+}
+
+table,
+th,
+td {
+ border: 1px dashed var(--accent);
+ padding: 10px;
+}
+
+th {
+ color: var(--accent);
+}
+
+ul,
+ol {
+ margin-left: 22px;
+ padding: 0;
+
+ li {
+ position: relative;
+ }
+
+ @media (--phone) {
+ margin-left: 20px;
+ }
+}
+
+ol {
+ list-style: none;
+ counter-reset: li;
+
+ li {
+ counter-increment: li;
+ }
+
+ li:before {
+ content: counter(li);
+ position: absolute;
+ right: calc(100% + 10px);
+ color: var(--accent);
+ display: inline-block;
+ text-align: right;
+ }
+
+ ol {
+ margin-left: 38px;
+
+ li {
+ counter-increment: li;
+ }
+
+ li:before {
+ content: counters(li, ".") " ";
+ }
+ }
+}
+
+mark {
+ background: var(--accent);
+ color: var(--background);
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ padding: 40px;
+ max-width: 864px;
+ min-height: 100vh;
+ border-right: 1px solid rgba(255, 255, 255, 0.1);
+
+ &.full,
+ &.center {
+ border: none;
+ margin: 0 auto;
+ }
+
+ &.full {
+ max-width: 100%;
+ }
+
+ @media (--phone) {
+ padding: 20px;
+ }
+
+ @media print {
+ display: initial;
+ }
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+
+ @media print {
+ display: initial;
+ }
+}
+
+hr {
+ width: 100%;
+ border: none;
+ background: var(--border-color);
+ height: 1px;
+}
+
+.hidden {
+ display: none;
+}
+
+sup {
+ line-height: 0;
+}