kgames

KGames — free keyboard games for kids
git clone https://www.keyboard.games/code/kgames.git
Log | Files | Refs | README | LICENSE

stagit-style.css (3781B)

      1 /* KGames stylesheet for the stagit-generated code browser.
      2    Based on stagit's default style.css, recoloured to the site palette:
      3    #E63946 red · #1D7CF2 blue · #FFD23F yellow · #2EC4B6 teal */
      4 
      5 /* @import must come before any rule. stagit's header has no <link> of its own,
      6    so the site font is pulled in from here. */
      7 @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&display=swap');
      8 
      9 body {
     10 	color: #2b2b2b;
     11 	background-color: #FFF5F5;
     12 	font-family: 'Fredoka', system-ui, sans-serif;
     13 	margin: 1.2em;
     14 }
     15 
     16 pre, td.num, #blob, .code, pre a {
     17 	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
     18 }
     19 
     20 a {
     21 	color: #1D7CF2;
     22 }
     23 
     24 a:hover {
     25 	color: #E63946;
     26 }
     27 
     28 h1, h2, h3, h4, h5, h6 {
     29 	font-size: 1em;
     30 	margin: 0;
     31 }
     32 
     33 h1 {
     34 	font-size: 1.4em;
     35 	font-weight: 600;
     36 }
     37 
     38 img, h1, h2 {
     39 	vertical-align: middle;
     40 }
     41 
     42 img {
     43 	border: 0;
     44 }
     45 
     46 a:target {
     47 	background-color: #FFD23F;
     48 }
     49 
     50 a.d,
     51 a.h,
     52 a.i,
     53 a.line {
     54 	text-decoration: none;
     55 }
     56 
     57 #blob a {
     58 	color: #9a9a9a;
     59 }
     60 
     61 #blob a:hover {
     62 	color: #1D7CF2;
     63 	text-decoration: none;
     64 }
     65 
     66 table thead td {
     67 	font-weight: 600;
     68 }
     69 
     70 table td {
     71 	padding: 0.1em 0.5em;
     72 }
     73 
     74 #content table td {
     75 	vertical-align: top;
     76 	white-space: nowrap;
     77 }
     78 
     79 #branches tr:hover td,
     80 #tags tr:hover td,
     81 #index tr:hover td,
     82 #log tr:hover td,
     83 #files tr:hover td {
     84 	background-color: #FFE8E8;
     85 }
     86 
     87 #index tr td:nth-child(2),
     88 #tags tr td:nth-child(3),
     89 #branches tr td:nth-child(3),
     90 #log tr td:nth-child(2) {
     91 	white-space: normal;
     92 }
     93 
     94 td.num {
     95 	text-align: right;
     96 }
     97 
     98 .desc {
     99 	color: #6b6b6b;
    100 }
    101 
    102 hr {
    103 	border: 0;
    104 	border-top: 2px solid #2EC4B6;
    105 	height: 2px;
    106 }
    107 
    108 pre a.h {
    109 	color: #1D7CF2;
    110 }
    111 
    112 .A,
    113 span.i,
    114 pre a.i {
    115 	color: #17836f;
    116 }
    117 
    118 .D,
    119 span.d,
    120 pre a.d {
    121 	color: #E63946;
    122 }
    123 
    124 pre a.h:hover,
    125 pre a.i:hover,
    126 pre a.d:hover {
    127 	text-decoration: none;
    128 }
    129 
    130 @media (prefers-color-scheme: dark) {
    131 	body {
    132 		background-color: #141418;
    133 		color: #d8d8d8;
    134 	}
    135 	hr {
    136 		border-color: #2EC4B6;
    137 	}
    138 	a {
    139 		color: #5FA8FF;
    140 	}
    141 	a:hover {
    142 		color: #FF6B76;
    143 	}
    144 	a:target {
    145 		background-color: #5c4a00;
    146 	}
    147 	.desc {
    148 		color: #a0a0a0;
    149 	}
    150 	#blob a {
    151 		color: #5a5a5a;
    152 	}
    153 	#blob a:target {
    154 		color: #eee;
    155 	}
    156 	#blob a:hover {
    157 		color: #5FA8FF;
    158 	}
    159 	pre a.h {
    160 		color: #2EC4B6;
    161 	}
    162 	.A,
    163 	span.i,
    164 	pre a.i {
    165 		color: #4fd6a0;
    166 	}
    167 	.D,
    168 	span.d,
    169 	pre a.d {
    170 		color: #FF6B76;
    171 	}
    172 	#branches tr:hover td,
    173 	#tags tr:hover td,
    174 	#index tr:hover td,
    175 	#log tr:hover td,
    176 	#files tr:hover td {
    177 		background-color: #22222a;
    178 	}
    179 }
    180 
    181 /* --- rendered README landing page (index.html) ------------------------- */
    182 
    183 #readme {
    184 	max-width: 44em;
    185 	line-height: 1.6;
    186 }
    187 
    188 /* stagit's #content rules assume monospace tables; undo them for prose. */
    189 #readme table td,
    190 #readme table th {
    191 	white-space: normal;
    192 	vertical-align: top;
    193 	border-bottom: 1px solid rgba(46, 196, 182, 0.35);
    194 }
    195 
    196 #readme h1 { font-size: 1.8em; font-weight: 600; margin: 0.8em 0 0.3em; }
    197 #readme h2 { font-size: 1.3em; font-weight: 600; margin: 1.4em 0 0.3em; color: #1D7CF2; }
    198 #readme h3 { font-size: 1.1em; font-weight: 600; margin: 1.1em 0 0.2em; }
    199 
    200 #readme p, #readme li { margin: 0.4em 0; }
    201 #readme ul, #readme ol { padding-left: 1.4em; }
    202 
    203 #readme code {
    204 	background: rgba(46, 196, 182, 0.14);
    205 	border-radius: 4px;
    206 	padding: 0.1em 0.35em;
    207 	font-size: 0.92em;
    208 }
    209 
    210 #readme pre {
    211 	background: rgba(46, 196, 182, 0.10);
    212 	border-left: 3px solid #2EC4B6;
    213 	border-radius: 6px;
    214 	padding: 0.7em 0.9em;
    215 	overflow-x: auto;
    216 }
    217 
    218 #readme pre code {
    219 	background: none;
    220 	padding: 0;
    221 }
    222 
    223 #readme blockquote {
    224 	margin: 0.6em 0;
    225 	padding-left: 0.9em;
    226 	border-left: 3px solid #FFD23F;
    227 	color: #6b6b6b;
    228 }
    229 
    230 #readme img { max-width: 100%; }
    231 
    232 #browse {
    233 	font-weight: 600;
    234 	margin: 0.8em 0;
    235 }
    236 
    237 @media (prefers-color-scheme: dark) {
    238 	#readme h2 { color: #5FA8FF; }
    239 	#readme blockquote { color: #a0a0a0; }
    240 	#readme code, #readme pre { background: rgba(46, 196, 182, 0.13); }
    241 }