hugo-theme-terminal

main.css (5290B)

 html {
     box-sizing: border-box;
     scroll-behavior: smooth;
 }
 
 *,
 *: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;
     overflow-wrap: break-word;
     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 (var(--phone-width)) {
         font-size: 1rem;
     }
 }
 
 .headings--one-size {
     h1 {
         line-height: 1.3;
         margin-top: 0px;
     }
 
     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;
 
     &:focus {
         border-color: var(--color);
         outline: 2px solid var(--color);
     }
 }
 
 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: 25px;
         float: left;
     }
 
     &.center {
         margin-left: auto;
         margin-right: auto;
     }
 
     &.right {
         margin-left: 25px;
         float: right;
     }
 
     img {
         margin-left: auto;
         margin-right: auto;
     }
 
     figcaption {
         font-size: 14px;
         padding: 5px 10px;
         margin-top: 5px;
         background: var(--accent);
         color: var(--bg-color);
 
         &.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: var(--trans-accent);
     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 var(--border-color);
     border-bottom: 1px solid var(--border-color);
 
     + pre {
         border-top: 0;
         margin-top: -40px;
     }
 
     @media (var(--phone-width)) {
         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: 5px;
 
     @media (var(--phone-width)) {
         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);
     }
 }
 
 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 (var(--phone-width)) {
         margin-left: 20px;
     }
 }
 
 ol {
     list-style: none;
     counter-reset: li;
 
     > li {
         counter-increment: 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;
 
                 &:before {
                     content: counters(li, ".") " ";
                 }
             }
         }
     }
 }
 
 mark {
     background: var(--accent);
     color: var(--bg-color);
 }
 
 .container {
     display: flex;
     flex-direction: column;
     padding: 40px;
     max-width: 864px;
     min-height: 100vh;
     border-right: 1px solid var(--border-color);
 
     &.full,
     &.center {
         border: none;
         margin: 0 auto;
     }
 
     &.full {
         max-width: 100%;
     }
 
     @media (var(--phone-width)) {
         padding: 20px;
     }
 
     @media print {
         display: initial;
     }
 }
 
 .content {
     display: flex;
     flex-direction: column;
 
     margin-top: 2rem;
     margin-bottom: 2rem;
 
     @media print {
         display: initial;
     }
 }
 
 hr {
     width: 100%;
     border: none;
     background: var(--border-color);
     height: 1px;
 }
 
 .hidden {
     display: none;
 }
 
 sup {
     line-height: 0;
 }