adhesiones-jekyll-theme 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
+
}
|