imagine.css (3119B)
1 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i"); 2 3 /* Variables. Feel free to edit these! */ 4 :root { 5 --color-primary: #028090; 6 --color-secondary: #00A896; 7 8 --color-soft-white: #FFFFF0; 9 10 --color-soft-black: #444; 11 --color-hard-black: #222; 12 13 --color-special-todo: #790604; 14 15 --font-size-1: 33.57px; 16 --font-size-2: 26.86px; 17 --font-size-3: 21.48px; 18 --font-size-4: 17.19px; 19 20 --font-size-small: 11px; 21 } 22 23 /* Selection color */ 24 ::selection { 25 background-color: var(--color-primary); 26 color: var(--color-soft-white); 27 } 28 29 /* Remove outer padding */ 30 html, body{ 31 font-family: "Source Sans Pro", Helvetica, sans-serif; 32 margin: 0; 33 } 34 35 /* Heading styles */ 36 h1, h2, h3, h4, h5, h6{ 37 color: var(--color-hard-black); 38 font-family: var(--font-headings) 39 } 40 41 /* Scaled font sizes */ 42 h1{font-size: var(--font-size-1);} 43 h2{font-size: var(--font-size-2);} 44 h3{font-size: var(--font-size-3);} 45 h3{font-size: var(--font-size-4);} 46 h4{font-size: var(--font-size-4);} 47 h5{font-size: var(--font-size-4);} 48 49 h1 > .subtitle{ 50 font-size: 21.48px; 51 } 52 53 /* Normal text style(including code) */ 54 p, pre, ol, ul, table, code{ 55 color: #444; 56 font-size: var(--font-size-4); 57 font-family: var(--font-normal) 58 } 59 60 /* Better anchor tags */ 61 a{ 62 color: inherit; 63 } 64 65 a:hover{ 66 color: var(--color-secondary); 67 } 68 69 /* Force footer to bottom and center */ 70 #postamble{ 71 text-align: center; 72 width: 100%; 73 } 74 75 #postamble > p{ 76 display: inline; 77 } 78 79 .title{ 80 padding: 2vh 5vw; 81 } 82 83 84 /* Responsive images */ 85 img{ 86 max-width: 100%; 87 height: auto; 88 } 89 90 /* Responsive code blocks and tables */ 91 pre, .outline-text-2, .outline-text-3, outline-text-4{ 92 max-width: 100%; 93 overflow-x: auto; 94 } 95 96 97 /* Responsive content positioning */ 98 @media only screen and (min-width: 750px) /* Large screens */ 99 { 100 .outline-2{ 101 padding: 2vh 20vw; 102 } 103 104 } 105 106 @media only screen and (max-width: 750px) /* Small screens */ 107 { 108 .outline-2{ 109 padding: 2vh 5vw; 110 } 111 } 112 113 114 /* Code blocks */ 115 .org-keyword{ 116 color: var(--color-primary); 117 } 118 119 .org-rainbow-delimiters-depth-1{ 120 color: var(--color-secondary); 121 } 122 123 .org-org-meta-line{ 124 color: var(--color-primary); 125 } 126 blockquote{ 127 border-left:5px solid var(--color-primary); 128 padding-left: 10px; 129 } 130 131 .todo{ 132 color: var(--color-special-todo); 133 } 134 135 .done{ 136 color: var(--color-primary); 137 } 138 139 /* Tags. 140 The way org exports tags is a little strange. 141 They are exported as a span with class "tag" containing each 142 of the tags in its own span with class and contents equal to 143 the tags name. This is actually really useful as it allows 144 for targeting both the "tag group" and each tag individually */ 145 146 .tag{ 147 margin-top: 5px; 148 display: block; 149 color: var(--color-soft-white); 150 font-size: var(--font-size-small); 151 font-family: var(--font-normal) 152 153 } 154 155 .tag > span{ 156 background-color: var(--color-secondary); 157 text-transform: uppercase; 158 border-radius: 2px; 159 width: fit-content; 160 height: auto; 161 padding: 1px 5px; 162 margin: 1px; 163 } 164 165 .underline{ 166 text-decoration: underline; 167 }