From 941642aee876a97dbb79666d8fabaa2b1feb9ff5 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Sun, 20 Mar 2022 00:38:25 +0530 Subject: Theme changes --- themes/terminal/assets/css/main.css | 346 ++++++++++++++++++++++++++++++++++++ 1 file changed, 346 insertions(+) create mode 100644 themes/terminal/assets/css/main.css (limited to 'themes/terminal/assets/css/main.css') 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; +} -- cgit v1.2.3