Skip to content

Commit 3bf6cb1

Browse files
robsonperassolirobsonperassoli
committed
change layout
1 parent 3b8c737 commit 3bf6cb1

File tree

5 files changed

+1190
-395
lines changed

5 files changed

+1190
-395
lines changed

‎priv/layout.html.eex‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,23 @@
1717
<link href="/public/styles.css" rel="stylesheet">
1818
</head>
1919
<body>
20-
<header>
21-
<img src="https://avatars.githubusercontent.com/u/625089" />
22-
<a href="/">
23-
<h1>Robson Perassoli</h1>
24-
<h2>Software Engineer</h2>
25-
</a>
26-
<nav>
27-
<a href="https://github.com/robsonperassoli" target="_blank">Github</a>
28-
<a href="https://www.linkedin.com/in/robsonperassoli/" target="_blank">LinkedIn</a>
29-
<a href="/dev">/dev</a>
20+
<header class="masthead">
21+
<nav class="header-nav">
22+
<a href="/home">/home</a>
23+
<a href="/dev">/dev-tools</a>
24+
<a href="https://github.com/robsonperassoli" target="_blank">/Github</a>
25+
<a href="https://www.linkedin.com/in/robsonperassoli/" target="_blank">/LinkedIn</a>
26+
3027
</nav>
28+
29+
<img src="https://avatars.githubusercontent.com/u/625089" alt="Robson Perassoli" class="author-photo" />
30+
31+
<div class="nameplate">
32+
<h1><a href="/">Robson Perassoli</a></h1>
33+
<h2>Software Engineer</h2>
34+
</div>
35+
36+
3137
</header>
3238

3339
<article class="markdown">

‎priv/static/layout.css‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
/* Layout Styles for Personal Website */
2+
3+
:root {
4+
--text-primary: #1f2937;
5+
--text-secondary: #6b7280;
6+
--text-muted: #9ca3af;
7+
--bg-primary: #ffffff;
8+
--bg-secondary: #f9fafb;
9+
--bg-tertiary: #f3f4f6;
10+
--border-color: #e5e7eb;
11+
--border-light: #f3f4f6;
12+
--accent-color: #3b82f6;
13+
--accent-hover: #2563eb;
14+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
15+
--shadow-md:
16+
0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
17+
}
18+
19+
@media (prefers-color-scheme: dark) {
20+
:root {
21+
--text-primary: #f9fafb;
22+
--text-secondary: #d1d5db;
23+
--text-muted: #9ca3af;
24+
--bg-primary: #111827;
25+
--bg-secondary: #1f2937;
26+
--bg-tertiary: #374151;
27+
--border-color: #374151;
28+
--border-light: #4b5563;
29+
--accent-color: #60a5fa;
30+
--accent-hover: #3b82f6;
31+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
32+
--shadow-md:
33+
0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
34+
}
35+
}
36+
37+
[data-theme="dark"] {
38+
--text-primary: #f9fafb;
39+
--text-secondary: #d1d5db;
40+
--text-muted: #9ca3af;
41+
--bg-primary: #111827;
42+
--bg-secondary: #1f2937;
43+
--bg-tertiary: #374151;
44+
--border-color: #374151;
45+
--border-light: #4b5563;
46+
--accent-color: #60a5fa;
47+
--accent-hover: #3b82f6;
48+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
49+
--shadow-md:
50+
0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
51+
}
52+
53+
body {
54+
background-color: var(--bg-primary);
55+
color: var(--text-primary);
56+
transition:
57+
background-color 0.3s ease,
58+
color 0.3s ease;
59+
min-height: 100vh;
60+
display: flex;
61+
flex-direction: column;
62+
max-width: 800px;
63+
margin: 0 auto;
64+
padding: 0 1.5rem;
65+
}
66+
67+
.masthead {
68+
border-bottom: 3px double var(--border-color);
69+
padding: 2rem 0 2.5rem 0;
70+
margin-bottom: 3rem;
71+
position: relative;
72+
}
73+
74+
.header-nav {
75+
display: flex;
76+
justify-content: center;
77+
gap: 3rem;
78+
margin-bottom: 2rem;
79+
padding-bottom: 1rem;
80+
border-bottom: 1px solid var(--border-color);
81+
}
82+
83+
.header-nav a {
84+
font-family: "Libertinus Serif Display", "Times New Roman", serif;
85+
font-size: 0.8rem;
86+
font-weight: 400;
87+
color: var(--text-secondary);
88+
text-decoration: none;
89+
letter-spacing: 0.05em;
90+
text-transform: uppercase;
91+
transition: color 0.2s ease;
92+
}
93+
94+
.header-nav a:hover {
95+
color: var(--text-primary);
96+
}
97+
98+
.header-nav a[href="/dev"] {
99+
color: var(--text-primary);
100+
font-weight: 500;
101+
}
102+
103+
.nameplate {
104+
text-align: center;
105+
margin: 2rem 0;
106+
}
107+
108+
.nameplate h1 {
109+
font-family: "Libertinus Serif Display", "Times New Roman", serif;
110+
font-size: 3.5rem;
111+
font-weight: 400;
112+
color: var(--text-primary);
113+
margin: 0 0 0.5rem 0;
114+
letter-spacing: -0.03em;
115+
line-height: 0.9;
116+
}
117+
118+
.nameplate h1 a {
119+
text-decoration: none;
120+
color: inherit;
121+
transition: opacity 0.2s ease;
122+
}
123+
124+
.nameplate h1 a:hover {
125+
opacity: 0.8;
126+
}
127+
128+
.nameplate h2 {
129+
font-family: "Libertinus Serif Display", "Times New Roman", serif;
130+
font-size: 0.9rem;
131+
font-weight: 400;
132+
color: var(--text-secondary);
133+
margin: 0;
134+
letter-spacing: 0.1em;
135+
text-transform: uppercase;
136+
font-variant: small-caps;
137+
}
138+
139+
.author-photo {
140+
width: 80px;
141+
height: 80px;
142+
border-radius: 50%;
143+
margin: 1.5rem auto 0 auto;
144+
display: block;
145+
opacity: 0.8;
146+
transition: opacity 0.2s ease;
147+
}
148+
149+
.author-photo:hover {
150+
opacity: 1;
151+
}
152+
153+
article {
154+
flex: 1;
155+
margin-bottom: 3rem;
156+
}
157+
158+
@media (max-width: 640px) {
159+
body {
160+
padding: 0 1rem;
161+
max-width: none;
162+
}
163+
164+
.masthead {
165+
padding: 1.5rem 0 2rem 0;
166+
margin-bottom: 2rem;
167+
}
168+
169+
.header-nav {
170+
gap: 2rem;
171+
margin-bottom: 1.5rem;
172+
padding-bottom: 0.75rem;
173+
}
174+
175+
.header-nav a {
176+
font-size: 0.75rem;
177+
}
178+
179+
.nameplate h1 {
180+
font-size: 2.5rem;
181+
}
182+
183+
.nameplate h2 {
184+
font-size: 0.8rem;
185+
}
186+
187+
.author-photo {
188+
width: 44px;
189+
height: 44px;
190+
margin: 1rem auto 0 auto;
191+
}
192+
}
193+
194+
@media (max-width: 480px) {
195+
body {
196+
padding: 0 0.75rem;
197+
}
198+
199+
.masthead {
200+
padding: 1rem 0 1.5rem 0;
201+
margin-bottom: 1.5rem;
202+
}
203+
204+
.header-nav {
205+
gap: 1.5rem;
206+
margin-bottom: 1rem;
207+
padding-bottom: 0.5rem;
208+
flex-wrap: wrap;
209+
}
210+
211+
.header-nav a {
212+
font-size: 0.7rem;
213+
}
214+
215+
.nameplate h1 {
216+
font-size: 2rem;
217+
line-height: 1;
218+
}
219+
220+
.nameplate h2 {
221+
font-size: 0.75rem;
222+
}
223+
224+
.author-photo {
225+
width: 40px;
226+
height: 40px;
227+
margin: 0.75rem auto 0 auto;
228+
}
229+
}
230+
231+
@media print {
232+
:root {
233+
--text-primary: #000000;
234+
--text-secondary: #333333;
235+
--bg-primary: #ffffff;
236+
--bg-secondary: #f5f5f5;
237+
--border-color: #cccccc;
238+
--accent-color: #000000;
239+
}
240+
241+
header {
242+
border-bottom-color: #cccccc;
243+
}
244+
245+
nav a {
246+
color: #333333 !important;
247+
}
248+
249+
header img {
250+
box-shadow: none;
251+
}
252+
}

0 commit comments

Comments
 (0)