gitile/assets/css/git.css

git.css

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