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
html, body {
17
  margin: 0;
18
  padding: 0;
19
  font-family: "Noto Sans", "Dejavu Sans", sans-serif, sans;
20
  background: var(--gray);
21
  color: var(--black);
22
}
23
24
html {
25
  height: 100%;
26
}
27
28
body {
29
  min-height: 100%;
30
  display: flex;
31
  flex-direction: column;
32
}
33
34
h1 {
35
  text-align: center;
36
}
37
38
p {
39
  line-height: 1.5em;
40
}
41
42
header, footer {
43
  background: var(--white);
44
  padding: 1em;
45
}
46
47
header p, footer p {
48
  text-align: justify;
49
  max-width: 1200px;
50
  padding: 0.5em;
51
  margin: auto;
52
}
53
54
footer p {
55
  text-align: center;
56
}
57
58
.pseudo {
59
  font-family: monospace, monospace;
60
}
61
62
#content {
63
  flex: 1;
64
}
65
66
#project-list {
67
  max-width: 1200px;
68
  margin: auto;
69
  padding: 1em;
70
  display: flex;
71
  flex-direction: horizontal;
72
  flex-flow: row wrap;
73
  justify-content: center;
74
  text-align: justify;
75
}
76
77
#project-list .project {
78
  max-width: 350px;
79
  background: var(--white);
80
  box-shadow: 1px 1px 3px var(--border-dark);
81
  border-top: 10px solid var(--darkdarkgreen);
82
  margin: 0.5em;
83
  padding: 0.5em;
84
}
85
86
.project h1 {
87
  margin: 0;
88
  font-size: 1.5em;
89
}
90
91
pre code {
92
  border-left: 5px solid var(--orange);
93
  background-color: var(--darkwhite);
94
  display: block;
95
  width: 100%;
96
  padding: 3px;
97
}
98
99
code {
100
  padding: 3px;
101
  background-color: var(--darkwhite);
102
}
103
104
.project .instructions code {
105
  display: block;
106
  margin-left: 1em;
107
  margin-right: 1em;
108
}
109
110
.links a {
111
  display: block;
112
  text-align: center;
113
  margin: 1em;
114
}
115
116
a {
117
  text-decoration: none;
118
  color: var(--darkgreen);
119
}
120
121
a:hover {
122
  color: var(--green);
123
}
124
125
#mire {
126
  text-align: center;
127
}
128
129
#mire span {
130
  display: inline-block;
131
  padding: 0.8em;
132
  margin: 0;
133
}
134
135
#mire .blue {
136
  background: var(--blue);
137
}
138
#mire .green {
139
  background: var(--darkergreen);
140
}
141
#mire .red {
142
  background: var(--red);
143
}
144
#mire .orange {
145
  background: var(--orange);
146
}
147