esuen.github.io/shared.css at master · esuen/esuen.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/* Shared styles — portfolio site */

:root {
  --text: #1a1a1a;
  --text-secondary: #555;
  --text-tertiary: #888;
  --accent: #2563eb;
  --border: #e5e5e5;
  --bg: #fafafa;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.container { margin: 0 auto; padding: 80px 24px 60px; }

/* Back link */
.back {
  display: inline-block;
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 1.5rem;
  margin-bottom: 40px;
  transition: color 0.15s;
}
.back::before { content: '\2190'; }
.back:hover { color: var(--accent); }

/* Header */
header { margin-bottom: 56px; }

h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.project-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 24px; }

.tech-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tech-tag {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  background: #fff;
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 100px;
}

.quick-facts {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin-top: 16px;
}
.quick-facts span { white-space: nowrap; }

/* Sections */
h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 16px;
}
p:last-child { margin-bottom: 0; }

/* Features grid */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.feature {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.feature-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; }
.feature-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0; }

/* Screenshots */
.screenshot { text-align: center; }
.screenshot-caption { font-size: 0.8rem; color: var(--text-tertiary); margin-top: 10px; }

/* Footer */
footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-tertiary);
}
footer a { color: var(--text-tertiary); text-decoration: none; transition: color 0.15s; }
footer a:hover { color: var(--accent); }

/* Responsive */
@media (max-width: 600px) {
  .container { padding: 48px 20px 40px; }
  h1 { font-size: 1.75rem; }
  .features { grid-template-columns: 1fr; }
}