Skip to content

Commit d152432

Browse files
KattyaCuevasKattyaCuevas
authored
Redesign site using tailwind and new design (#44)
Redesign entire site: - Implement TailwindCSS, using postCSS as jekyll plugin - Rewrite all the layouts and current active pages on the site
1 parent 326e4ea commit d152432

29 files changed

+3734
-532
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.DS_Store
22
.sass-cache
33
_site
4+
node_modules

‎Gemfile

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
# frozen_string_literal: true
2+
13
source 'https://rubygems.org'
24

35
gem 'jekyll', github: 'jekyll/jekyll'
4-
5-
gem "webrick", "~> 1.8"
6+
gem 'jekyll-postcss', '~> 0.5.0'
7+
gem 'rubocop', '~> 1.42', group: :development
8+
gem 'webrick', '~> 1.8'

‎Gemfile.lock

+25
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ GEM
2323
specs:
2424
addressable (2.8.1)
2525
public_suffix (>= 2.0.2, < 6.0)
26+
ast (2.4.2)
2627
colorator (1.1.0)
2728
concurrent-ruby (1.1.6)
2829
em-websocket (0.5.1)
@@ -34,10 +35,12 @@ GEM
3435
http_parser.rb (0.6.0)
3536
i18n (1.8.3)
3637
concurrent-ruby (~> 1.0)
38+
jekyll-postcss (0.5.0)
3739
jekyll-sass-converter (2.1.0)
3840
sassc (> 2.0.1, < 3.0)
3941
jekyll-watch (2.2.1)
4042
listen (~> 3.0)
43+
json (2.7.1)
4144
kramdown (2.3.1)
4245
rexml
4346
kramdown-parser-gfm (1.1.0)
@@ -47,14 +50,34 @@ GEM
4750
rb-fsevent (~> 0.10, >= 0.10.3)
4851
rb-inotify (~> 0.9, >= 0.9.10)
4952
mercenary (0.4.0)
53+
parallel (1.24.0)
54+
parser (3.2.2.4)
55+
ast (~> 2.4.1)
56+
racc
5057
pathutil (0.16.2)
5158
forwardable-extended (~> 2.6)
5259
public_suffix (5.0.0)
60+
racc (1.7.3)
61+
rainbow (3.1.1)
5362
rb-fsevent (0.10.4)
5463
rb-inotify (0.10.1)
5564
ffi (~> 1.0)
65+
regexp_parser (2.8.3)
5666
rexml (3.2.5)
5767
rouge (3.20.0)
68+
rubocop (1.42.0)
69+
json (~> 2.3)
70+
parallel (~> 1.10)
71+
parser (>= 3.1.2.1)
72+
rainbow (>= 2.2.2, < 4.0)
73+
regexp_parser (>= 1.8, < 3.0)
74+
rexml (>= 3.2.5, < 4.0)
75+
rubocop-ast (>= 1.24.1, < 2.0)
76+
ruby-progressbar (~> 1.7)
77+
unicode-display_width (>= 1.4.0, < 3.0)
78+
rubocop-ast (1.30.0)
79+
parser (>= 3.2.1.0)
80+
ruby-progressbar (1.13.0)
5881
safe_yaml (1.0.5)
5982
sassc (2.4.0)
6083
ffi (~> 1.9)
@@ -68,6 +91,8 @@ PLATFORMS
6891

6992
DEPENDENCIES
7093
jekyll!
94+
jekyll-postcss (~> 0.5.0)
95+
rubocop (~> 1.42)
7196
webrick (~> 1.8)
7297

7398
BUNDLED WITH

‎_config.yml

+8
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,11 @@ permalink: date
1818

1919
sass:
2020
sass_dir: _sass
21+
load_paths:
22+
- node_modules
23+
24+
plugins:
25+
- jekyll-postcss
26+
27+
postcss:
28+
cache: false

‎_layouts/base.html

+37-15
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,42 @@
88
<meta property="og:type" content="ruby.pe">
99
<meta property="og:url" content="http://ruby.pe/">
1010
<meta property="og:image" content="/img/rubyperu_logo.png">
11-
<link href="/assets/css/styles.css" media="screen" rel="stylesheet" type="text/css" />
11+
<link href="/assets/dist-style.css" media="screen" rel="stylesheet" type="text/css" />
12+
<link rel="shortcut icon" type="image/png" href="favicon.png">
13+
</head>
14+
<body class="bg-gradient-to-r from-stone-100 via-rose-50 to-rose-200 min-h-screen">
15+
16+
<nav class="bg-rose-700 text-red-50 px-5">
17+
<div class="max-w-5xl mx-auto max-h-24 flex items-center justify-between gap-2 py-8">
18+
<a href="/"><img src="{{ '/img/rubyperu_logo_white.svg' | relative_url }}" class="h-10" alt="Ruby Peru" /></a>
19+
<ul class="hidden md:flex gap-8 items-center ">
20+
<li><a href="/blog" class="font-medium px-2 py-1 focus-visible:outline-white focus-visible:outline-1 focus-visible:outline-offset-4 hover:bg-rose-600 hover:text-white rounded">Blog</a></li>
21+
<li><a href="/cfp" class="font-medium px-2 py-1 focus-visible:outline-white focus-visible:outline-1 focus-visible:outline-offset-4 hover:bg-rose-600 hover:text-white rounded">Dar una charla</a></li>
22+
<li><a href="/code_of_conduct" class="font-medium px-2 py-1 focus-visible:outline-white focus-visible:outline-1 focus-visible:outline-offset-4 hover:bg-rose-600 hover:text-white rounded">Código de Conducta</a></li>
23+
</ul>
24+
<a href="htpps://ruby.pe/slack" target="_blank" class="bg-red-50 text-rose-700 border border-red-50 px-6 py-2 rounded-full uppercase font-semibold text-sm flex-shrink-0 hover:bg-red-700 hover:text-red-50 focus-visible:outline-2 focus-visible:outline-red-700 focus-visible:outline-offset-2">Unirse al Slack</a>
25+
</div>
26+
</nav>
27+
28+
{{ content }}
29+
30+
<foote>
31+
<div class="bg-rose-700 py-10 text-red-50">
32+
<div class="max-w-5xl mx-auto">
33+
<ul class="grid grid-cols-2 md:grid-cols-3 gap-x-4 gap-y-3 items-center px-5">
34+
<li><a href="/slack" class="text-sm font-medium px-2 py-1 focus-visible:outline-white focus-visible:outline-1 focus-visible:outline-offset-4 hover:bg-rose-600 hover:text-white rounded">Unirse al Slack</a></li>
35+
<li><a href="/calendar" class="text-sm font-medium px-2 py-1 focus-visible:outline-white focus-visible:outline-1 focus-visible:outline-offset-4 hover:bg-rose-600 hover:text-white rounded">Calendario de Actividades</a></li>
36+
<li><a href="/meetup" class="text-sm font-medium px-2 py-1 focus-visible:outline-white focus-visible:outline-1 focus-visible:outline-offset-4 hover:bg-rose-600 hover:text-white rounded">Registo próximo meetup</a></li>
37+
<li><a href="/bookclub" class="text-sm font-medium px-2 py-1 focus-visible:outline-white focus-visible:outline-1 focus-visible:outline-offset-4 hover:bg-rose-600 hover:text-white rounded">Registro próximo Club de Lectura</a></li>
38+
<li><a href="/cfp" class="text-sm font-medium px-2 py-1 focus-visible:outline-white focus-visible:outline-1 focus-visible:outline-offset-4 hover:bg-rose-600 hover:text-white rounded">Dar una charla</a></li>
39+
<li><a href="/code_of_conduct" class="text-sm font-medium px-2 py-1 focus-visible:outline-white focus-visible:outline-1 focus-visible:outline-offset-4 hover:bg-rose-600 hover:text-white rounded">Código de Conducta</a></li>
40+
<li><a href="/blog" class="text-sm font-medium px-2 py-1 focus-visible:outline-white focus-visible:outline-1 focus-visible:outline-offset-4 hover:bg-rose-600 hover:text-white rounded">Blog</a></li>
41+
</ul>
42+
</div>
43+
</div>
44+
<p class="text-center py-4 text-stone-700 px-5">Hecho con 🩷 por la comunidad de Ruby Perú</p>
45+
</footer>
46+
1247
<script src="/assets/js/base.js" type="text/javascript"></script>
1348
<script type="text/javascript">
1449
var _gaq = _gaq || [];
@@ -22,18 +57,5 @@
2257
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
2358
})();
2459
</script>
25-
</head>
26-
<body>
27-
<header>
28-
<a href="/" class="logo"><img src="/img/rubyperu_logo.png" /></a>
29-
</header>
30-
<div class="container">
31-
{{ content }}
32-
</div>
33-
<footer>
34-
<a href="/cfp">Quiero dar una charla</a>
35-
<a href="/blog">Blog</a>
36-
<a href="http://bit.ly/rubyperu-slack" target="_blank">Unirse a Slack</a>
37-
</footer>
3860
</body>
39-
</html>
61+
</html>

‎_layouts/blog.html

+17-47
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,19 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Ruby Perú &mdash; Comunidad peruana de usuarios de Ruby</title>
5-
<meta charset='utf-8'>
6-
<meta name="author" content="Comunidad Ruby Perú">
7-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8-
<meta property="og:type" content="ruby.pe">
9-
<meta property="og:url" content="http://ruby.pe/">
10-
<meta property="og:image" content="/img/rubyperu_logo.png">
11-
<link href="/assets/css/prism.css" media="screen" rel="stylesheet" type="text/css" />
12-
<link href="/assets/css/styles.css" media="screen" rel="stylesheet" type="text/css" />
13-
<script src="/assets/js/prism.js" type="text/javascript"></script>
14-
<script type="text/javascript">
15-
var _gaq = _gaq || [];
16-
_gaq.push(['_setAccount', 'UA-28860038-1']);
17-
_gaq.push(['_setDomainName', 'ruby.pe']);
18-
_gaq.push(['_trackPageview']);
1+
---
2+
layout: base
3+
---
194

20-
(function() {
21-
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
22-
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
23-
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
24-
})();
25-
</script>
26-
</head>
27-
<body>
28-
<header>
29-
<a href="/" class="logo"><img src="/img/rubyperu_logo.png" /></a>
30-
</header>
31-
<div class="blogContainer">
32-
<div class="blogContent">
33-
<div class="info">
34-
<h1>{{ page.title }}</h1>
35-
<div class="subtitle">
36-
<time datetime="{{page.date}}">{{ page.date | date_to_string }}</time> - {{ page.author }}
37-
</div>
38-
</div>
39-
40-
{{ content }}
5+
<div class="max-w-5xl mx-auto py-32 px-5">
6+
<div>
7+
{%- if page.title -%}
8+
<h1 class="text-5xl text-stone-900 font-extrabold">{{ page.title }}</h1>
9+
{%- endif -%}
10+
{%- if page.date and page.author -%}
11+
<div class="text-base text-stone-700 mt-2 mb-6">
12+
<time datetime="{{page.date}}">{{ page.date | date_to_string }}</time> - {{ page.author }}
4113
</div>
42-
</div>
43-
<footer>
44-
<a href="/cfp">Quiero dar una charla</a>
45-
<a href="/blog">Blog</a>
46-
<a href="http://bit.ly/rubyperu-slack" target="_blank">Unirse a Slack</a>
47-
</footer>
48-
</body>
49-
</html>
14+
{%- endif -%}
15+
</div>
16+
<div class="prose lg:prose-lg md:prose-xl prose-stone">
17+
{{ content }}
18+
</div>
19+
</div>

‎_plugins/sass_converter.rb

-29
This file was deleted.

‎_sass/.gitkeep

Whitespace-only changes.

0 commit comments

Comments
 (0)