adhesiones-jekyll-theme 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +168 -0
- data/README.md +113 -0
- data/_config.yml +45 -0
- data/_data/en.yml +50 -0
- data/_data/es.yml +50 -0
- data/_data/layouts/adhesion.yml +70 -0
- data/_data/layouts/post.yml +123 -0
- data/_includes/boolean.html +30 -0
- data/_includes/contact.html +19 -0
- data/_includes/content.html +1 -0
- data/_includes/email.html +1 -0
- data/_includes/file.html +33 -0
- data/_includes/form/boolean.html +1 -0
- data/_includes/form/content.html +1 -0
- data/_includes/form/email.html +1 -0
- data/_includes/form/file.html +1 -0
- data/_includes/form/hidden.html +1 -0
- data/_includes/form/input.html +1 -0
- data/_includes/form/markdown_content.html +1 -0
- data/_includes/form/number.html +1 -0
- data/_includes/form/predefined_array.html +1 -0
- data/_includes/form/section.html +1 -0
- data/_includes/form/separator.html +1 -0
- data/_includes/form/string.html +1 -0
- data/_includes/form/submit.html +1 -0
- data/_includes/form/text.html +1 -0
- data/_includes/form/url.html +1 -0
- data/_includes/hidden.html +5 -0
- data/_includes/input.html +33 -0
- data/_includes/markdown_content.html +1 -0
- data/_includes/navbar.html +29 -0
- data/_includes/number.html +1 -0
- data/_includes/predefined_array.html +39 -0
- data/_includes/section.html +1 -0
- data/_includes/separator.html +1 -0
- data/_includes/share.html +12 -0
- data/_includes/share_box.html +16 -0
- data/_includes/string.html +3 -0
- data/_includes/submit.html +1 -0
- data/_includes/text.html +32 -0
- data/_includes/url.html +1 -0
- data/_layouts/default.html +26 -0
- data/_layouts/home.html +182 -0
- data/_layouts/post.html +69 -0
- data/_sass/accessibility.scss +13 -0
- data/_sass/font.scss +17 -0
- data/_sass/helpers.scss +54 -0
- data/_sass/share.html +12 -0
- data/_sass/share_box.html +16 -0
- data/_sass/share_box.scss +26 -0
- data/_sass/toggler.scss +39 -0
- data/assets/css/styles.scss +83 -0
- data/assets/fonts/forkawesome-webfont.woff2 +0 -0
- data/assets/fonts/saira/v3/Saira-subset.zopfli.woff +0 -0
- data/assets/fonts/saira/v3/Saira.ttf +0 -0
- data/assets/fonts/saira/v3/SairaBold-subset.zopfli.woff +0 -0
- data/assets/fonts/saira/v3/SairaBold.ttf +0 -0
- data/assets/fonts/saira/v3/SairaMedium-subset.zopfli.woff +0 -0
- data/assets/fonts/saira/v3/SairaMedium.ttf +0 -0
- data/assets/js/script.js +39 -0
- metadata +261 -0
data/_includes/url.html
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{% include input.html field=field %}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="{{ site.lang }}" dir="{{ site.dir }}">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<base href="{% base %}" />
|
|
6
|
+
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
|
|
7
|
+
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
8
|
+
<meta name="theme-color" content="white"/>
|
|
9
|
+
<meta name="color-scheme" content="light"/>
|
|
10
|
+
|
|
11
|
+
<link href="assets/css/styles.css" rel="stylesheet">
|
|
12
|
+
<script defer type="text/javascript" src="assets/js/script.js"></script>
|
|
13
|
+
|
|
14
|
+
{% seo %}
|
|
15
|
+
{% feed_meta %}
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<main class="container">
|
|
19
|
+
<div class="row justify-content-center d-print-block">
|
|
20
|
+
<div class="col">
|
|
21
|
+
{{ content }}
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</main>
|
|
25
|
+
</body>
|
|
26
|
+
</html>
|
data/_layouts/home.html
ADDED
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
{% assign documento = site.posts | where: 'layout', 'post' | first %}
|
|
6
|
+
|
|
7
|
+
<section id="documento">
|
|
8
|
+
<article>
|
|
9
|
+
<header>
|
|
10
|
+
<div class="row no-gutters align-items-center justify-content-between mb-3 mt-5">
|
|
11
|
+
<div class="col-6 col-lg-9">
|
|
12
|
+
<h2 class="ml-3">{{ documento.author }}</h2>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div class="col-6 col-lg-3 d-print-none d-flex flex-column align-items-end justify-content-center">
|
|
16
|
+
<a
|
|
17
|
+
href="{{ site.i18n.home.campaign.url }}"
|
|
18
|
+
class="btn btn-primary btn-sm-sm btn-xs-sm btn-block"
|
|
19
|
+
target="_blank">
|
|
20
|
+
{{ site.i18n.home.campaign.text }}
|
|
21
|
+
</a>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div class="row no-gutters align-items-center justify-content-between mb-3">
|
|
26
|
+
<div class="col-9">
|
|
27
|
+
<h1 class="font-weight-bold">{{ documento.title }}</h1>
|
|
28
|
+
—
|
|
29
|
+
<time datetime="{{ documento.date }}">
|
|
30
|
+
{{ documento.date | date: site.i18n.date }}
|
|
31
|
+
</time>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div class="col-12 col-lg-3 d-print-none d-flex flex-column align-items-end justify-content-center">
|
|
35
|
+
<button class="print btn border-left btn-block">
|
|
36
|
+
{{ site.i18n.home.print.text }}
|
|
37
|
+
<i class="fa fa-{{ site.i18n.home.print.icon }}"></i>
|
|
38
|
+
</button>
|
|
39
|
+
|
|
40
|
+
{% include share_box.html url=page.url title=documento.title description=documento.description %}
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</header>
|
|
44
|
+
|
|
45
|
+
{%- if documento.image.path -%}
|
|
46
|
+
<div class="float-lg-right">
|
|
47
|
+
<img
|
|
48
|
+
class="img-fluid ml-lg-3 mb-lg-3"
|
|
49
|
+
src="{{ documento.image.path | thumbnail: 500 }}"
|
|
50
|
+
alt="{{ documento.image.description | default: documento.title }}" />
|
|
51
|
+
</div>
|
|
52
|
+
{%- endif -%}
|
|
53
|
+
|
|
54
|
+
{{ documento.content }}
|
|
55
|
+
</article>
|
|
56
|
+
</section>
|
|
57
|
+
|
|
58
|
+
<section id="sumarse" class="d-print-none">
|
|
59
|
+
<h1 class="color-up">{{ site.i18n.home.form.title }}</h1>
|
|
60
|
+
|
|
61
|
+
<div class="row no-gutters align-items-center">
|
|
62
|
+
<div class="col-12 col-lg-6">
|
|
63
|
+
<img class="d-none" src="{{ site.sutty }}/v1/sites/{{ site.hostname }}/contact/cookie.png" />
|
|
64
|
+
<form action="{{ site.sutty }}/v1/sites/{{ site.hostname }}/posts/adhesion" method="post" enctype="multipart/form-data">
|
|
65
|
+
<div class="row justify-content-center">
|
|
66
|
+
{%- for field in site.data.layouts.adhesion -%}
|
|
67
|
+
{%- if field[1].skip -%}{% continue %}{%- endif -%}
|
|
68
|
+
{%- assign template = field[1].type | append: '.html' -%}
|
|
69
|
+
|
|
70
|
+
<div class="col-12 col-lg-{{ field[1].col | default: 12 | prepend: '-' }}">
|
|
71
|
+
{% include {{ template }} field=field %}
|
|
72
|
+
</div>
|
|
73
|
+
{%- endfor -%}
|
|
74
|
+
|
|
75
|
+
<div class="col-12">
|
|
76
|
+
<input type="submit" value="{{ site.i18n.home.form.submit }}" class="btn btn-success btn-block" />
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</form>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div class="col-12 col-lg-6 mt-5 mt-lg-0 pl-lg-5">
|
|
83
|
+
{%- if documento.cita -%}
|
|
84
|
+
<blockquote class="blockquote">
|
|
85
|
+
|
|
86
|
+
<div class="font-bigger d-flex flex-row align-items-center justify-content-space-between">
|
|
87
|
+
<div class="mr-2 align-self-start">
|
|
88
|
+
<i class="fa fa-quote-left redpink"></i>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div>
|
|
92
|
+
{{ documento.cita | append: '' | markdownify }}
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="ml-2 align-self-end">
|
|
96
|
+
<i class="fa fa-quote-right redpink"></i>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
{%- if documento.cita_autore -%}
|
|
101
|
+
<footer class="blockquote-footer text-right">
|
|
102
|
+
{{ documento.cita_autore }}
|
|
103
|
+
</footer>
|
|
104
|
+
{%- endif -%}
|
|
105
|
+
</blockquote>
|
|
106
|
+
{%- endif -%}
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
</section>
|
|
110
|
+
|
|
111
|
+
{% assign adhesiones = site.posts | where: 'layout', 'adhesion' %}
|
|
112
|
+
<section class="mt-5" id="adhesiones">
|
|
113
|
+
<header class="row align-items-center justify-content-between">
|
|
114
|
+
<div class="col-12 col-lg-4">
|
|
115
|
+
<h1>{{ site.i18n.home.adhesiones }}</h1>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<div class="col-6 col-lg-4">
|
|
119
|
+
<p>
|
|
120
|
+
<span class="font-weight-bold font-bigger">{{ adhesiones | size }}</span>
|
|
121
|
+
{{ site.i18n.home.metric }}
|
|
122
|
+
<i class="fa fa-line-chart"></i>
|
|
123
|
+
</p>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<div class="col-6 col-lg-4">
|
|
127
|
+
<label for="share" class="share btn border d-print-none">
|
|
128
|
+
{{ site.i18n.home.share_post.text }}
|
|
129
|
+
<i class="fa fa-{{ site.i18n.home.share_post.icon }}"></i>
|
|
130
|
+
</label>
|
|
131
|
+
</div>
|
|
132
|
+
</header>
|
|
133
|
+
|
|
134
|
+
{%- for adhesion in adhesiones -%}
|
|
135
|
+
<article id="{{ adhesion.uuid }}" class="callout">
|
|
136
|
+
<header >
|
|
137
|
+
<h5>
|
|
138
|
+
{%- if adhesion.web -%}
|
|
139
|
+
<a href="{{ adhesion.web }}" target="_blank">
|
|
140
|
+
{{ adhesion.title }}
|
|
141
|
+
</a>
|
|
142
|
+
{%- else -%}
|
|
143
|
+
{{ adhesion.title }}
|
|
144
|
+
{%- endif -%}
|
|
145
|
+
</h5>
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
<time datetime="{{ adhesion.date }}">
|
|
149
|
+
{{ adhesion.date | date: site.i18n.date }}
|
|
150
|
+
</time>
|
|
151
|
+
</header>
|
|
152
|
+
|
|
153
|
+
{{ adhesion.content }}
|
|
154
|
+
</article>
|
|
155
|
+
{%- endfor -%}
|
|
156
|
+
|
|
157
|
+
<footer class="row no-gutters justify-space-between">
|
|
158
|
+
{%- for adhesion in adhesiones -%}
|
|
159
|
+
{%- unless adhesion.logo.path -%}
|
|
160
|
+
{%- continue -%}
|
|
161
|
+
{%- endunless -%}
|
|
162
|
+
|
|
163
|
+
<div class="col mb-5">
|
|
164
|
+
{%- if adhesion.web -%}
|
|
165
|
+
<a href="{{ adhesion.web }}" target="_blank">
|
|
166
|
+
<img
|
|
167
|
+
src="{{ adhesion.logo.path | thumbnail: 200 }}"
|
|
168
|
+
alt="{{ adhesion.title }}" />
|
|
169
|
+
</a>
|
|
170
|
+
{%- else -%}
|
|
171
|
+
<img
|
|
172
|
+
src="{{ adhesion.logo.path | thumbnail: 200 }}"
|
|
173
|
+
alt="{{ adhesion.title }}" />
|
|
174
|
+
{%- endif -%}
|
|
175
|
+
</div>
|
|
176
|
+
{%- endfor -%}
|
|
177
|
+
</footer>
|
|
178
|
+
</section>
|
|
179
|
+
|
|
180
|
+
<footer class="d-print-none">
|
|
181
|
+
{{ site.i18n.home.footer | markdownify }}
|
|
182
|
+
</footer>
|
data/_layouts/post.html
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<article class="h-entry" itemscope itemtype="http://schema.org/Article">
|
|
6
|
+
<header>
|
|
7
|
+
<h1 class="p-name" itemprop="name headline">{{ page.title | escape }}</h1>
|
|
8
|
+
|
|
9
|
+
{%- if page.description -%}
|
|
10
|
+
<p class="lead p-summary" itemprop="description">{{ page.description | escape }}</p>
|
|
11
|
+
{%- endif -%}
|
|
12
|
+
|
|
13
|
+
{%- if page.image.path -%}
|
|
14
|
+
<picture>
|
|
15
|
+
{% for size in site.images.sizes %}
|
|
16
|
+
<source srcset="{{ page.image.path | thumbnail: size }}" media="(max-width: {{ size }}px)" />
|
|
17
|
+
{% endfor %}
|
|
18
|
+
|
|
19
|
+
<img class="img-fluid" src="{{ page.image.path | thumbnail: 1140 }}" alt="{{ page.image.description }}" />
|
|
20
|
+
</picture>
|
|
21
|
+
{%- endif -%}
|
|
22
|
+
|
|
23
|
+
<p>
|
|
24
|
+
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
|
|
25
|
+
{%- assign date_format = site.i18n.date | default: "%b %-d, %Y" -%}
|
|
26
|
+
{{ page.date | date: date_format }}
|
|
27
|
+
</time>
|
|
28
|
+
{%- for author in page.author -%}
|
|
29
|
+
•
|
|
30
|
+
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
|
|
31
|
+
<span class="p-author h-card" itemprop="name">
|
|
32
|
+
{{ author | escape }}
|
|
33
|
+
</span>
|
|
34
|
+
</span>
|
|
35
|
+
{%- endfor -%}
|
|
36
|
+
</p>
|
|
37
|
+
</header>
|
|
38
|
+
|
|
39
|
+
<div class="e-content" itemprop="articleBody">
|
|
40
|
+
{{ content }}
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<footer>
|
|
44
|
+
<a class="u-url" itemprop="url" href="{{ page.url }}" hidden>
|
|
45
|
+
{{ site.url }}/{{ page.url }}
|
|
46
|
+
</a>
|
|
47
|
+
|
|
48
|
+
{%- if page.uuid -%}
|
|
49
|
+
<span hidden itemprop="identifier">{{ page.uuid }}</span>
|
|
50
|
+
{%- endif -%}
|
|
51
|
+
|
|
52
|
+
{%- if page.license.url -%}
|
|
53
|
+
<p itemprop="license" itemtype="http://schema.org/CreativeWork">
|
|
54
|
+
<a rel="license" itemprop="url" href="{{ page.license.url }}">
|
|
55
|
+
<span itemprop="articleBody">
|
|
56
|
+
{{ page.license.description }}
|
|
57
|
+
</span>
|
|
58
|
+
</a>
|
|
59
|
+
</p>
|
|
60
|
+
{%- endif -%}
|
|
61
|
+
|
|
62
|
+
{%- if page.tags %}
|
|
63
|
+
<span itemprop="keywords" hidden>{{ page.tags | join: ', ' }}</span>
|
|
64
|
+
{%- for tag in page.tags -%}
|
|
65
|
+
<span hidden class="h-category">{{ tag }}</span>
|
|
66
|
+
{%- endfor -%}
|
|
67
|
+
{%- endif -%}
|
|
68
|
+
</footer>
|
|
69
|
+
</article>
|
data/_sass/font.scss
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: 'Saira';
|
|
3
|
+
font-style: normal;
|
|
4
|
+
font-weight: 500;
|
|
5
|
+
font-display: optional;
|
|
6
|
+
src: local('Saira Medium'), local('Saira-Medium'),
|
|
7
|
+
url('../fonts/saira/v3/SairaMedium-subset.zopfli.woff') format('woff');
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@font-face {
|
|
11
|
+
font-family: 'Saira';
|
|
12
|
+
font-style: normal;
|
|
13
|
+
font-weight: 700;
|
|
14
|
+
font-display: optional;
|
|
15
|
+
src: local('Saira Bold'), local('Saira-Bold'),
|
|
16
|
+
url('../fonts/saira/v3/SairaBold-subset.zopfli.woff') format('woff');
|
|
17
|
+
}
|
data/_sass/helpers.scss
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
$bezier: cubic-bezier(0.75, 0, 0.25, 1);
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* Crea una propiedad con prefijos de navegador
|
|
5
|
+
*/
|
|
6
|
+
$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
|
|
7
|
+
@mixin vendor-prefix($property, $definition...) {
|
|
8
|
+
@each $prefix in $vendor-prefixes {
|
|
9
|
+
#{$prefix}$property: $definition;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/*
|
|
14
|
+
* Crea clases para asignar colores según la lista de colores.
|
|
15
|
+
*/
|
|
16
|
+
@each $color, $_ in $colors {
|
|
17
|
+
.background-#{$color} {
|
|
18
|
+
background-color: var(--#{$color});
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.#{$color} {
|
|
22
|
+
color: var(--#{$color});
|
|
23
|
+
|
|
24
|
+
::-moz-selection,
|
|
25
|
+
::selection {
|
|
26
|
+
background: var(--#{$color});
|
|
27
|
+
color: white;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
svg {
|
|
31
|
+
* {
|
|
32
|
+
fill: var(--#{$color});
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.form-control {
|
|
37
|
+
border-color: var(--#{$color});
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.btn {
|
|
41
|
+
background-color: var(--#{$color});
|
|
42
|
+
color: white;
|
|
43
|
+
border-color: var(--#{$color});
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
hr {
|
|
47
|
+
border-color: var(--#{$color});
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
a {
|
|
51
|
+
color: var(--#{$color});
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
data/_sass/share.html
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{% assign url = site.url | append: include.url | uri_escape %}
|
|
2
|
+
{% assign title = include.title | default: site.title | uri_escape %}
|
|
3
|
+
{% assign description = include.description | default: '' | uri_escape %}
|
|
4
|
+
|
|
5
|
+
<a
|
|
6
|
+
target="_blank"
|
|
7
|
+
title="{{ include.share.title }}"
|
|
8
|
+
class="d-flex flex-column align-items-center p-3"
|
|
9
|
+
href="{{ include.share.url | replace: '%url', url | replace: '%title', title | replace: '%description', description }}">
|
|
10
|
+
<i class="fa fa-fw fa-2x fa-{{ include.share.icon }}"></i>
|
|
11
|
+
<span>{{ include.share.title }}</span>
|
|
12
|
+
</a>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<input type="checkbox" id="share" class="toggler" autocomplete="off" />
|
|
2
|
+
|
|
3
|
+
<label class="share btn border btn-block" for="share">
|
|
4
|
+
{{ site.i18n.share.text }}
|
|
5
|
+
<i class="fa fa-{{ site.i18n.share.icon }}"></i>
|
|
6
|
+
|
|
7
|
+
<div class="share-box toggled d-flex align-items-center justify-content-center">
|
|
8
|
+
<div class="box background-white color-redpink row no-gutters align-items-center justify-content-center p-3">
|
|
9
|
+
{% for share in site.i18n.share.items %}
|
|
10
|
+
<div class="col-4">
|
|
11
|
+
{% include_cached share.html share=share url=include.url title=include.title description=include.description %}
|
|
12
|
+
</div>
|
|
13
|
+
{% endfor %}
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</label>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
input[type="checkbox"].toggler {
|
|
2
|
+
&:focus + label {
|
|
3
|
+
outline: none;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.share-box {
|
|
8
|
+
position: fixed;
|
|
9
|
+
top: 0;
|
|
10
|
+
left: 0;
|
|
11
|
+
width: 100vw;
|
|
12
|
+
height: 100vh;
|
|
13
|
+
background-color: rgba(0,0,0,.5);
|
|
14
|
+
|
|
15
|
+
@include vendor-prefix(transition, all 0.2s $bezier);
|
|
16
|
+
|
|
17
|
+
a {
|
|
18
|
+
border: $border-width solid transparent;
|
|
19
|
+
|
|
20
|
+
&:focus,
|
|
21
|
+
&:hover {
|
|
22
|
+
text-decoration: none;
|
|
23
|
+
border: $border-width solid $border-color;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
data/_sass/toggler.scss
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Desplegar menúes sin javascript!
|
|
3
|
+
*
|
|
4
|
+
* Inspirado en https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
// Comenzamos con un input checkbox con la clase toggler
|
|
8
|
+
input[type="checkbox"].toggler {
|
|
9
|
+
// Lo ocultamos pero todavía queremos que se le pueda dar foco con el
|
|
10
|
+
// teclado
|
|
11
|
+
opacity: 0;
|
|
12
|
+
position: absolute;
|
|
13
|
+
|
|
14
|
+
// Ocultamos el elemento colapsable
|
|
15
|
+
& ~ label {
|
|
16
|
+
.toggled {
|
|
17
|
+
z-index: 10;
|
|
18
|
+
visibility: hidden;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// Al tildar el input, mostramos el elemento
|
|
23
|
+
&:checked ~ label {
|
|
24
|
+
.toggled {
|
|
25
|
+
visibility: visible;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
& + label {
|
|
30
|
+
border: none;
|
|
31
|
+
outline: none;
|
|
32
|
+
z-index: 11;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Dar una guía visual de que estamos enfocando el input
|
|
36
|
+
&:focus + label {
|
|
37
|
+
outline: 1px dotted grey ;
|
|
38
|
+
}
|
|
39
|
+
}
|