gitile/assets/css/git.css

git.css

1
:root {
2
  --font-base: 14px;
3
  --font-sans: "DejaVu Sans", "Noto Sans", sans-serif;
4
  --font-mono: "DejaVu Sans Mono", "Noto Sans Mono", monospace;
5
6
  --white: #faf7f3;
7
  --darkwhite: #eae5e0;
8
  --gray: #d9d5d4;
9
  --border-dark: #aaa;
10
  --black: #333;
11
  --blue: #4C6F8A;
12
  --orange: #f89b1f;
13
  --green: #5ed67e;
14
  --darkgreen: #2cae0e;
15
  --darkergreen: #2c8e0e;
16
  --darkdarkgreen: #1e6504;
17
  --red: #ff5c47;
18
}
19
20
@media screen and (prefers-color-scheme: dark) {
21
  :root {
22
    --white: #110d0a;
23
    --darkwhite: #2a2520;
24
    --gray: #393534;
25
    --border-dark: #111;
26
    --black: #ddd;
27
28
    --blue: #2c3f4a;
29
    --orange: #885b0f;
30
    --green: #316b40;
31
    --red: #803227;
32
33
    --darkgreen: #1c5e08;
34
    --darkergreen: #1c4e08;
35
    --darkdarkgreen: #103504;
36
  }
37
}
38
39
html, body {
40
  margin: 0;
41
  padding: 0;
42
  background: var(--gray);
43
  color: var(--black);
44
  font-family: var(--font-sans);
45
  font-size: var(--font-base);
46
}
47
48
html {
49
  height: 100%;
50
}
51
52
body {
53
  min-height: 100%;
54
  display: flex;
55
  flex-direction: column;
56
}
57
58
h1 {
59
  text-align: center;
60
}
61
62
p {
63
  line-height: 1.5em;
64
}
65
66
header, footer {
67
  background: var(--white);
68
  padding: 1em;
69
}
70
71
header p, footer p {
72
  text-align: justify;
73
  max-width: 1200px;
74
  padding: 0.5em;
75
  margin: auto;
76
}
77
78
footer p {
79
  text-align: center;
80
}
81
82
#content {
83
  flex: 1;
84
}
85
86
#project-list {
87
  max-width: 1200px;
88
  margin: auto;
89
  padding: 1em;
90
  display: flex;
91
  flex-direction: horizontal;
92
  flex-flow: row wrap;
93
  justify-content: center;
94
  text-align: justify;
95
}
96
97
#project-list .project {
98
  max-width: 350px;
99
  background: var(--white);
100
  box-shadow: 1px 1px 3px var(--border-dark);
101
  border-top: 10px solid var(--darkdarkgreen);
102
  margin: 0.5em;
103
  padding: 0.5em;
104
}
105
106
.project h1 {
107
  margin: 0;
108
  font-size: 1.5em;
109
}
110
111
pre code {
112
  border-left: 5px solid var(--orange);
113
  background-color: var(--darkwhite);
114
  display: block;
115
  width: 100%;
116
  padding: 3px;
117
}
118
119
code {
120
  padding: 3px;
121
  background-color: var(--darkwhite);
122
  font-family: var(--font-mono);
123
}
124
125
.project .instructions code {
126
  display: block;
127
  margin-left: 1em;
128
  margin-right: 1em;
129
  text-align: left;
130
}
131
132
.links a {
133
  display: block;
134
  text-align: center;
135
  margin: 1em;
136
}
137
138
a {
139
  text-decoration: none;
140
  color: var(--darkgreen);
141
}
142
143
a:hover {
144
  color: var(--green);
145
}
146
147
#mire {
148
  text-align: center;
149
}
150
151
#mire span {
152
  display: inline-block;
153
  padding: 0.8em;
154
  margin: 0;
155
}
156
157
#mire .blue {
158
  background: var(--blue);
159
}
160
161
#mire .green {
162
  background: var(--darkergreen);
163
}
164
165
#mire .red {
166
  background: var(--red);
167
}
168
169
#mire .orange {
170
  background: var(--orange);
171
}
172