Skip to content

Commit dfbc668

Browse files
elcuervoelcuervo
committed
Adds og
1 parent cbe5f9c commit dfbc668

3 files changed

Lines changed: 154 additions & 0 deletions

File tree

‎_config.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ defaults:
3535
values:
3636
description: "Comunidad Ruby en Uruguay: meetups, charlas y contenido de Ruby y Ruby on Rails para desarrolladores."
3737
keywords: "comunidad ruby uruguay, meetup ruby uruguay, ruby on rails uruguay, charlas ruby"
38+
image:
39+
path: /assets/images/og.png
40+
alt: "Ruby UY: comunidad Ruby en Uruguay"
41+
width: 1200
42+
height: 630
3843
- scope:
3944
path: "index.md"
4045
values:

‎_og/og.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!doctype html>
2+
<!-- Source for assets/images/og.png (1200x630). Regenerate:
3+
agent_browser: args ["set","viewport","1200","630"], open file://.../og.html, screenshot ".og" assets/images/og.png -->
4+
<html lang="es">
5+
<head>
6+
<meta charset="utf-8">
7+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Syncopate:wght@700&display=swap" rel="stylesheet">
8+
<style>
9+
* { margin: 0; padding: 0; box-sizing: border-box; }
10+
html, body { width: 1200px; height: 630px; overflow: hidden; }
11+
12+
.og {
13+
position: relative;
14+
width: 1200px;
15+
height: 630px;
16+
background: #3967D1;
17+
color: #fff;
18+
font-family: "DM Sans", system-ui, sans-serif;
19+
display: flex;
20+
flex-direction: column;
21+
overflow: hidden;
22+
}
23+
24+
/* flat structural rules, no gradients */
25+
.og::before {
26+
content: "";
27+
position: absolute;
28+
inset: 0 0 auto 0;
29+
height: 14px;
30+
background: #FFC24D;
31+
}
32+
33+
.og__top {
34+
position: relative;
35+
flex: 1;
36+
padding: 52px 64px 0;
37+
display: flex;
38+
flex-direction: column;
39+
}
40+
41+
.og__brand {
42+
position: relative;
43+
display: flex;
44+
align-items: center;
45+
gap: 16px;
46+
}
47+
.og__mark { width: 62px; height: 53px; filter: drop-shadow(4px 4px 0 #2E2E2E); }
48+
.og__sun {
49+
position: absolute;
50+
right: 24px;
51+
top: 104px;
52+
width: 212px;
53+
height: 180px;
54+
filter: drop-shadow(8px 8px 0 #2E2E2E);
55+
}
56+
.og__wordmark {
57+
font-family: Syncopate, sans-serif;
58+
font-weight: 700;
59+
font-size: 34px;
60+
letter-spacing: 0.02em;
61+
color: #fff;
62+
}
63+
.og__wordmark span { color: #FFC24D; }
64+
.og__kicker {
65+
margin-left: auto;
66+
font-family: Syncopate, sans-serif;
67+
font-weight: 700;
68+
font-size: 15px;
69+
letter-spacing: 0.18em;
70+
color: #ABC2FB;
71+
text-transform: uppercase;
72+
}
73+
74+
.og__body { position: relative; margin: auto 0; }
75+
.og__title {
76+
font-family: Syncopate, sans-serif;
77+
font-weight: 700;
78+
font-size: 98px;
79+
line-height: 1;
80+
letter-spacing: -0.02em;
81+
color: #FFC24D;
82+
text-shadow: 6px 6px 0 #2E2E2E;
83+
}
84+
.og__title em { font-style: normal; color: #fff; }
85+
86+
.og__band {
87+
border-top: 3px solid #2E2E2E;
88+
background: #F6EEEC;
89+
color: #2E2E2E;
90+
padding: 34px 64px;
91+
display: flex;
92+
align-items: center;
93+
gap: 32px;
94+
}
95+
.og__pill {
96+
flex: none;
97+
background: #FFC24D;
98+
color: #2E2E2E;
99+
font-family: Syncopate, sans-serif;
100+
font-weight: 700;
101+
font-size: 22px;
102+
padding: 16px 32px;
103+
border: 3px solid #2E2E2E;
104+
border-radius: 999px;
105+
box-shadow: 5px 5px 0 #2E2E2E;
106+
}
107+
.og__lead {
108+
font-size: 25px;
109+
line-height: 1.35;
110+
font-weight: 500;
111+
max-width: 640px;
112+
color: #2E2E2E;
113+
}
114+
.og__meta {
115+
margin-left: auto;
116+
text-align: right;
117+
font-family: Syncopate, sans-serif;
118+
font-weight: 700;
119+
font-size: 14px;
120+
line-height: 1.7;
121+
letter-spacing: 0.16em;
122+
text-transform: uppercase;
123+
color: rgba(46, 46, 46, 0.7);
124+
}
125+
</style>
126+
</head>
127+
<body>
128+
<div class="og">
129+
<div class="og__top">
130+
<div class="og__brand">
131+
<img class="og__mark" src="../assets/images/logo.svg" alt="">
132+
<div class="og__wordmark">RUBY<span>.</span>UY</div>
133+
<div class="og__kicker">Meetups · Charlas · Open source</div>
134+
</div>
135+
136+
<div class="og__body">
137+
<h1 class="og__title">COMUNIDAD<br><em>RUBY</em> URUGUAY</h1>
138+
</div>
139+
<img class="og__sun" src="../assets/images/logo.svg" alt="">
140+
</div>
141+
142+
<div class="og__band">
143+
<div class="og__pill">ruby.uy</div>
144+
<p class="og__lead">Meetups, charlas y open source de la comunidad Ruby y Rails en Uruguay desde 2012.</p>
145+
<div class="og__meta">Montevideo<br>Uruguay</div>
146+
</div>
147+
</div>
148+
</body>
149+
</html>

‎assets/images/og.png‎

81.6 KB
Loading

0 commit comments

Comments
 (0)