diff --git a/_includes/adding-removing.html b/_includes/adding-removing.html index ad1dcd2..6a68562 100644 --- a/_includes/adding-removing.html +++ b/_includes/adding-removing.html @@ -1,4 +1,4 @@ -
You can add and remove elements from shuffle after it has been created. This also works for infinite scrolling.
By passing a function to shuffle, you can customize the filtering to your hearts content. Shuffle will iterate over each item and give your function the element wrapped in jQuery and the shuffle instance. Return true
to keep the element or false
to hide it.
shufflejs
.A list of events shuffle triggers:
'loading.shuffle'
Settings you can change (these are the defaults)
// Overrideable options
diff --git a/_includes/sorting.html b/_includes/sorting.html
index 86cf532..defb653 100644
--- a/_includes/sorting.html
+++ b/_includes/sorting.html
@@ -1,4 +1,4 @@
-Sorting
+Sorting
You can order the elements based off a function you supply. In the demo above, each item has a data-date-created
and data-title
attribute. When the select option menu changes, a sort object is passed to shuffle.
diff --git a/_includes/usage.html b/_includes/usage.html
index 623116b..f8e03c6 100644
--- a/_includes/usage.html
+++ b/_includes/usage.html
@@ -1,4 +1,4 @@
-Usage
+Usage
The HTML Structure
The only real important thing here is the data-groups
attribute. It has to be a valid JSON array of strings. Optionally, it can be a string delimeted by a value you provide. See delimeter
in the options.
diff --git a/_scss/_helpers.scss b/_scss/_helpers.scss
index 57ca264..20062e1 100644
--- a/_scss/_helpers.scss
+++ b/_scss/_helpers.scss
@@ -1,3 +1,5 @@
+.text-center { text-align: center; }
+
.ib {
display: inline-block;
}
diff --git a/_scss/_main.scss b/_scss/_main.scss
index a3fbc15..469ee73 100644
--- a/_scss/_main.scss
+++ b/_scss/_main.scss
@@ -172,6 +172,12 @@ span.demo-link-container::before {
margin-top: 10px;
}
+#be-social {
+ h2 {
+ margin-bottom: 32px;
+ }
+}
+
// FAQ
diff --git a/_scss/_type.scss b/_scss/_type.scss
index bb5e50b..a7d2be2 100644
--- a/_scss/_type.scss
+++ b/_scss/_type.scss
@@ -77,6 +77,26 @@ h4 {
}
}
+h1 > a,
+h2 > a,
+h3 > a {
+ display: none;
+}
+
+h1:hover > a,
+h2:hover > a,
+h3:hover > a {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: -40px;
+ height: 50px;
+ width: 50px;
+ background: url('../img/link.svg') no-repeat;
+ overflow: hidden;
+ text-indent: -999em;
+}
+
.unstyled {
diff --git a/css/style.css b/css/style.css
index c5ba49c..277181f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -426,6 +426,26 @@ h4 {
margin: 2vw 0;
}
}
+h1 > a,
+h2 > a,
+h3 > a {
+ display: none;
+}
+
+h1:hover > a,
+h2:hover > a,
+h3:hover > a {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: -40px;
+ height: 50px;
+ width: 50px;
+ background: url("../img/link.svg") no-repeat;
+ overflow: hidden;
+ text-indent: -999em;
+}
+
.unstyled {
list-style-type: none;
padding: 0;
@@ -2049,6 +2069,10 @@ span.demo-link-container::before {
margin-top: 10px;
}
+#be-social h2 {
+ margin-bottom: 32px;
+}
+
.search-section {
margin-top: 1em;
margin-bottom: 1em;
@@ -2278,6 +2302,10 @@ button:active {
font-size: .75em;
}
}
+.text-center {
+ text-align: center;
+}
+
.ib {
display: inline-block;
}
diff --git a/img/link.svg b/img/link.svg
new file mode 100644
index 0000000..e6879be
--- /dev/null
+++ b/img/link.svg
@@ -0,0 +1,6 @@
+
diff --git a/index.html b/index.html
index bae6870..0bcc690 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@ prism: true
---