retro.css (2311B)
1 /* Base */ 2 html, 3 body { 4 background-color: #222; 5 min-height: 100%; 6 line-height: 1.5; 7 } 8 9 body { 10 color: #fafafa; 11 font-family: "Courier New"; 12 } 13 14 ::selection { 15 background-color: #2ecc40; 16 color: white; 17 } 18 19 /* Responsive content positioning */ 20 @media only screen and (min-width: 1020px) /* Large screens */ 21 { 22 body{ 23 padding: 10vh 25vw; 24 } 25 } 26 27 @media only screen and (max-width: 1020px) and (min-width: 750px) /* Small screens */ 28 { 29 body{ 30 padding: 5vh 10vw; 31 } 32 } 33 34 @media only screen and (max-width: 750px) /* Small screens */ 35 { 36 body{ 37 padding: 2vh 5vw; 38 } 39 } 40 41 /* Headers */ 42 h1{font-size: 2.5rem;} 43 h2{font-size: 1.7rem;} 44 h1 > .subtitle, h3, h4, h5, h6{font-size: 1.3rem;} 45 46 .title{ 47 margin-bottom: 2.5rem; 48 } 49 50 /* Padding & Margin */ 51 * {margin: 0; padding: 0;} 52 pre, blockquote, ul, ol, p, table{ 53 margin: 1rem 0; 54 } 55 56 h1, h2{margin-top: 2rem; line-height: 2rem;} 57 h3, h4, h5, h6{margin-top: 1rem;} 58 59 60 /* Links */ 61 a, a:visited { 62 color: #01ff70; 63 text-decoration: underline; 64 } 65 66 a:hover, a:focus, a:active { 67 color: #2ecc40; 68 } 69 70 /* Code */ 71 pre { 72 font-family: "Courier New"; 73 padding: .5rem; 74 background-color: #333; 75 padding: 0.5rem; 76 border-radius: 0.2rem; 77 font-size: 0.9rem; 78 color: #EEE; 79 overflow-x: auto; 80 } 81 82 .org-keyword{ 83 color: #01ff70; 84 } 85 86 .org-rainbow-delimiters-depth-1{ 87 color: #2ecc40; 88 } 89 90 .org-rainbow-delimiters-depth-2{ 91 color: #01ff70; 92 } 93 94 /* Blockquotes */ 95 blockquote { 96 border-left: 3px solid #01ff70; 97 padding-left: 1rem; 98 } 99 100 li{ 101 list-style-position: inside; 102 } 103 104 /* Tags */ 105 .tag{ 106 margin-top: 0.5rem; 107 display: block; 108 color: white; 109 font-size: var(--font-size-xsmall); 110 } 111 112 .tag > span{ 113 font-weight: 400; 114 font-size: 0.8rem; 115 background-color: #444; 116 text-transform: uppercase; 117 border-radius: 2px; 118 width: fit-content; 119 height: auto; 120 padding: 1px 5px; 121 } 122 123 /* Keywords */ 124 .todo{ 125 color: #2ecc40; 126 } 127 128 .done{ 129 color: #444; 130 } 131 132 /* Overflows */ 133 .outline-text-2, .outline-text-3, .outline-text-4{ 134 max-width: 100%; 135 overflow-x: auto; 136 } 137 138 /* Table */ 139 tr:nth-child(even) { 140 background-color: #333; 141 } 142 143 th, td{ 144 padding: 0.5rem; 145 text-align: center; 146 } 147 148 .underline{ 149 text-decoration: underline; 150 } 151 152 img{ 153 max-width: 100%; 154 height: auto; 155 }