base.css (2622B)
1 /* @global base */ 2 3 :root { 4 font-size: var(--base-font-size); 5 } 6 7 @media screen and (min-width: 48rem) { 8 :root { 9 font-size: calc(var(--base-font-size) + 4px); 10 } 11 } 12 13 @media screen and (min-width: 120rem) { 14 :root { 15 font-size: calc(var(--base-font-size) + 8px); 16 } 17 } 18 19 body { 20 background: var(--base-bg) url("/images/noise.png") repeat; 21 line-height: var(--base-line-height); 22 } 23 24 @media only screen { 25 body { 26 display: flex; 27 flex-direction: column; 28 min-height: 100vh; 29 } 30 } 31 32 body > * > * { 33 max-width: var(--grid-max-width); 34 } 35 36 @media screen and (min-width: 15rem) { 37 body > * > * { 38 padding: 4rem 2rem; 39 } 40 41 body.index > main > div { 42 padding-bottom: 2rem; 43 } 44 45 body.index > main > aside { 46 padding-top: 2rem; 47 } 48 } 49 50 @media only screen { 51 body > main { 52 margin-bottom: auto; 53 margin-top: auto; 54 } 55 } 56 57 [hidden] + * { 58 margin-top: 0 !important; 59 } 60 61 a { 62 background: linear-gradient(180deg,transparent 70%, var(--base-link-bg) 0); 63 color: var(--base-link-fg); 64 overflow-wrap: break-word; 65 hyphens: auto; 66 text-decoration: none; 67 } 68 69 a:focus:not(.go-to-nav):not(.p-category):not(.nav__link) { 70 outline: 0.1em solid var(--base-link-fg); 71 outline-offset: 2px; 72 } 73 74 a:hover { 75 background: linear-gradient(180deg,transparent 0%, var(--base-link-bg) 0); 76 color: var(--base-fg); 77 } 78 79 a:active { 80 outline: 0; 81 } 82 83 a[href*="://"]:not([href*="://hugo.soucy.cc"])::after { 84 content: "\279A"; 85 display: inline-block; 86 } 87 88 hr { 89 background: transparent; 90 border: dotted var(--base-br); 91 border-width: 1px 0 0; 92 display: block; 93 height: 1px; 94 } 95 96 pre { 97 background: var(--base-snippet-bg); 98 border: 1px dotted var(--base-snippet-fg); 99 font-size: .85rem; 100 overflow: auto; 101 padding: 1rem; 102 } 103 104 pre > code, 105 pre > samp { 106 background: transparent; 107 } 108 109 code, 110 samp, 111 kbd { 112 background: var(--base-snippet-bg); 113 color: var(--base-snippet-fg); 114 } 115 116 kbd { 117 border: 1px solid var(--base-snippet-fg); 118 border-radius: 3px; 119 padding: 1px; 120 } 121 122 iframe, 123 img { 124 height: auto; 125 max-width: 100%; 126 } 127 128 ol, 129 ul { 130 padding-left: 1rem; 131 } 132 133 li + li { 134 margin-bottom: 0; 135 margin-top: 0.25rem; 136 } 137 138 nav ol, 139 nav ul { 140 list-style-type: none; 141 padding: 0; 142 } 143 144 nav li + li { 145 margin-bottom: 0; 146 margin-top: 0; 147 } 148 149 svg:not(:root) { 150 overflow: hidden; 151 } 152 153 abbr { 154 cursor: help; 155 } 156 157 table { 158 border-collapse: collapse; 159 font-size: .85rem; 160 overflow: auto; 161 } 162 163 table caption { 164 font-style: italic; 165 } 166 167 td, 168 th { 169 border: solid var(--base-snippet-fg); 170 border-width: 0 0 1px; 171 padding: 0.5rem; 172 text-align: left; 173 } 174 175 th { 176 font-weight: 700; 177 } 178 179 tr :first-child { 180 text-align: left; 181 } 182 183 summary { 184 cursor: pointer; 185 }