andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Travis build: 580

Browse Source
This commit is contained in:
30secondsofcode
2019-11-25 10:55:23 +00:00
parent fdf99ebb6c
commit e2878846a3
3 changed files with 132 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
snippet_data/snippetList.json
View File

@ -402,14 +402,14 @@
"type": "snippetListing",
"title": "Hamburger Button",
"attributes": {
"text": "This is a way to build simple hamburger button for menu bar.\n\n",
"text": "Displays a hamburger menu which transitions to a cross on hover.\n\n",
"tags": [
"interactivity",
"beginner"
]
},
"meta": {
"hash": "952fe17aa1f9856b3976d74578db84e409a7439d0ded80195b7d5420ea95d5ae"
"hash": "06f323835f89d7e055e932ee67c23a9c5d2edeb7e62c1029c0528238e17a08f8"
}
},
{

190
snippet_data/snippets.json
View File

@ -54,8 +54,8 @@
},
"meta": {
"hash": "2934b3aa733591f4964a7c8780f3ec7b273e4bd6a38fce6e0da2a5dd2dd9959f",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -83,8 +83,8 @@
},
"meta": {
"hash": "d4e635bb76a083266e08723f25c3db981b39001ea5d513ce65570fe0099eb6b0",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -112,8 +112,8 @@
},
"meta": {
"hash": "ff6401cc784b92a9672e74968719c029de224c29fcfdc3eaeaa764274108f648",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -141,8 +141,8 @@
},
"meta": {
"hash": "8165e64d1bca7ae3bb0c990712023720dff55c2f6194b557a131901d528be4b7",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -170,8 +170,8 @@
},
"meta": {
"hash": "60ac5a7cb7e2c24c936b267ac74d649052c9aaa80810278720b5b5a14fee1562",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -199,7 +199,7 @@
},
"meta": {
"hash": "8a1beb75b1efe89f11f1bac944a836feac26604d5bc06bdb026dd0bd6650ad95",
"firstSeen": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1574366733",
"updateCount": 3
}
@ -228,8 +228,8 @@
},
"meta": {
"hash": "931815035291ba0e6de497d7296fc75e207117c9ff0607fd646f01da53793929",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -258,8 +258,8 @@
},
"meta": {
"hash": "7c572c339c0767840bd0fd6f5daab357a8da070988c621e341bc5ce78d0f798e",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -287,8 +287,8 @@
},
"meta": {
"hash": "e5544c894ee3cd4ce3352d10331e2f321c6d30b4a0a667434286c6d4951c3b0a",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -316,8 +316,8 @@
},
"meta": {
"hash": "bf835c2f1d038e6b08d221c9fef85933757a80c67de555797c6bc63ff7035ae8",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -345,8 +345,8 @@
},
"meta": {
"hash": "7a0d1c46beceb336265b2ca27a4f3cf25ad332a5cd2e8c0b692a43ce5b329fef",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -374,8 +374,8 @@
},
"meta": {
"hash": "02f6472568975f5897a84f8846d97f8561fc5334ddafac53e73adb52ccda5f29",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -403,8 +403,8 @@
},
"meta": {
"hash": "83c7806b0be2e50ca34f313912f9cb90682852790e6d0105a635f781212fa5b1",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -432,8 +432,8 @@
},
"meta": {
"hash": "4e7f5ce479955deb9830ca4a72fc8260c8863aa65d6f67f15e88a3f923c10c3a",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -491,8 +491,8 @@
},
"meta": {
"hash": "738fae9ee6d0a9fe84cdbdd632a93f651f8377ec7e9f647e1031207d99b819a5",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -520,8 +520,8 @@
},
"meta": {
"hash": "94ec3c4e6b02374b61367e8cf4edcb9532bb7297673a28acaee0ad3264adfa3d",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -549,8 +549,8 @@
},
"meta": {
"hash": "68da5c2e7399979db3aeb1022d13b0490fc71d55d068597544954706c7027bef",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -578,8 +578,8 @@
},
"meta": {
"hash": "86c8c53be49e82365f6d6f54a03b55d9a8888ccc85504fe0480499b0e68c7f5b",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -608,8 +608,8 @@
},
"meta": {
"hash": "5d09d5e54b7436f047db61223cff15dce2f17f6cffe5e71e0f9061337de3068e",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -637,8 +637,8 @@
},
"meta": {
"hash": "a2bf8cfa4de368cfb10d013b6bbb87c598e0cccacfe816972da4ac668c6abc1a",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -667,8 +667,8 @@
},
"meta": {
"hash": "a12b394af0b2df2f7fa6bae2cbbe3a8b01ba74510991dcfe3952b8bd9c0a5a41",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -696,7 +696,7 @@
},
"meta": {
"hash": "23cab923692f5e3250be38b3c970dc11f3bab34159812aaf979ea09bce441c30",
"firstSeen": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567144393",
"updateCount": 3
}
@ -725,8 +725,8 @@
},
"meta": {
"hash": "0515f03b1505eafa21e0d0d7377facbe4aaa9159996906dd4ed2857ee137073a",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -754,8 +754,8 @@
},
"meta": {
"hash": "9620da48fb82b48a7c6b681854707b622a18c158f2db88c816e3b9c0d9b04523",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -783,8 +783,8 @@
},
"meta": {
"hash": "f6fbb076581e63ab9187ca63d8620f88de19d7a78c46f9ded903271461a445bf",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -812,8 +812,8 @@
},
"meta": {
"hash": "cd26d0cd1831474afdc784b4459b60062243e2d390975e94cd7d51fa776c603f",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -823,17 +823,17 @@
"type": "snippet",
"attributes": {
"fileName": "hamburger-button.md",
"text": "This is a way to build simple hamburger button for menu bar.\n\n",
"explanation": "\n\n- Use a `<button>` element for the middle bar of the hamburger icon.\n- Use the `::before` and `::after` pseudo-elements to create the top and bottom bars of the icon.\n- Use `position: relative` on the `<button>` and `position: absolute` on the pseudo-elements to place them appropriately.\n- Use the `:hover` pseudo-selector to rotate `:before` to `45deg` and `:after` to `-45deg` and hide the center bar using`:background-color` transparent.\n\n",
"text": "Displays a hamburger menu which transitions to a cross on hover.\n\n",
"explanation": "\n\n- Use a `.hamburger-menu` container `div` which contains the top, bottom, and middle bars.\n- The container is set to be a flex container (`display: flex`) with `flex-direction` to be `column` and `flex-wrap` to be `wrap` (alternatively, you can set both properties by a shorthand `flex-flow: column wrap`).\n- Add distance between the bars using `justify-content: space-between`.\n- The animation has 3 parts: top and bottom bars transforming to 45 degree angles (`rotate(45deg)`), and the middle bar fading away by setting `opacity: 0`.\n- The `transform-origin` is set to `left` so the bars rotate around the left point.\n- Set `transition all 0.5s` so that both `transform` and `opacity` properties are animated for half a second.\n\n",
"browserSupport": {
"text": "\n",
"text": "\n\n- https://caniuse.com/#feat=flexbox\n- https://caniuse.com/#feat=css-transitions\n",
"supportPercentage": 100
},
"codeBlocks": {
"html": "<button class=\"hb\"></button>",
"css": ".hb,\n.hb:before,\n.hb:after {\n position: relative;\n width: 30px;\n height: 5px;\n border: none;\n outline: none;\n background-color: #333;\n border-radius: 3px;\n transition: 0.5s;\n cursor: pointer;\n}\n\n.hb:before,\n.hb:after {\n content: '';\n position: absolute;\n top: -7.5px;\n left: 0;\n}\n\n.hb:after {\n top: 7.5px;\n}\n\n.hb:hover {\n background-color: transparent;\n}\n\n.hb:hover:before,\n.hb:hover:after {\n top: 0;\n}\n\n.hb:hover::before {\n transform: rotate(45deg);\n}\n\n.hb:hover::after {\n transform: rotate(-45deg);\n}",
"html": "<div class=\"hamburger-menu\">\n <div class=\"bar top\"></div>\n <div class=\"bar middle\"></div>\n <div class=\"bar bottom\"></div>\n</div>",
"css": ".hamburger-menu {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: space-between;\n height: 2.5rem;\n width: 2.5rem;\n cursor: pointer;\n}\n\n.hamburger-menu .bar {\n height: 5px;\n background: black;\n border-radius: 5px;\n margin: 3px 0px;\n transform-origin: left;\n transition: all 0.5s;\n}\n\n.hamburger-menu:hover .top {\n transform: rotate(45deg);\n}\n\n.hamburger-menu:hover .middle {\n opacity: 0;\n}\n\n.hamburger-menu:hover .bottom {\n transform: rotate(-45deg);\n}",
"js": "",
"scopedCss": "[data-scope=\"hamburger-button\"] .hb,\n[data-scope=\"hamburger-button\"] .hb:before,\n[data-scope=\"hamburger-button\"] .hb:after {\n position: relative;\n width: 30px;\n height: 5px;\n border: none;\n outline: none;\n background-color: #333;\n border-radius: 3px;\n transition: 0.5s;\n cursor: pointer; }\n\n[data-scope=\"hamburger-button\"] .hb:before,\n[data-scope=\"hamburger-button\"] .hb:after {\n content: '';\n position: absolute;\n top: -7.5px;\n left: 0; }\n\n[data-scope=\"hamburger-button\"] .hb:after {\n top: 7.5px; }\n\n[data-scope=\"hamburger-button\"] .hb:hover {\n background-color: transparent; }\n\n[data-scope=\"hamburger-button\"] .hb:hover:before,\n[data-scope=\"hamburger-button\"] .hb:hover:after {\n top: 0; }\n\n[data-scope=\"hamburger-button\"] .hb:hover::before {\n transform: rotate(45deg); }\n\n[data-scope=\"hamburger-button\"] .hb:hover::after {\n transform: rotate(-45deg); }\n"
"scopedCss": "[data-scope=\"hamburger-button\"] .hamburger-menu {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: space-between;\n height: 2.5rem;\n width: 2.5rem;\n cursor: pointer; }\n\n[data-scope=\"hamburger-button\"] .hamburger-menu .bar {\n height: 5px;\n background: black;\n border-radius: 5px;\n margin: 3px 0px;\n transform-origin: left;\n transition: all 0.5s; }\n\n[data-scope=\"hamburger-button\"] .hamburger-menu:hover .top {\n transform: rotate(45deg); }\n\n[data-scope=\"hamburger-button\"] .hamburger-menu:hover .middle {\n opacity: 0; }\n\n[data-scope=\"hamburger-button\"] .hamburger-menu:hover .bottom {\n transform: rotate(-45deg); }\n"
},
"tags": [
"interactivity",
@ -841,10 +841,10 @@
]
},
"meta": {
"hash": "952fe17aa1f9856b3976d74578db84e409a7439d0ded80195b7d5420ea95d5ae",
"hash": "06f323835f89d7e055e932ee67c23a9c5d2edeb7e62c1029c0528238e17a08f8",
"firstSeen": "1570668578",
"lastUpdated": "1573762725",
"updateCount": 6
"lastUpdated": "1574679180",
"updateCount": 11
}
},
{
@ -871,8 +871,8 @@
},
"meta": {
"hash": "bff0b57d24dac06ae6a6d71a8d0d628ec0b97760be0cfda66791191957075d73",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -900,8 +900,8 @@
},
"meta": {
"hash": "4136aff34ae1b8bf6b525c08881a12c43e9ce7265e864c09ea25fa40e8d86396",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -929,8 +929,8 @@
},
"meta": {
"hash": "6e8a53b0b69ab05f54c199f42944746c0e3331712f69a8dc72709eda16428424",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -958,8 +958,8 @@
},
"meta": {
"hash": "2f925cc190a9744532de97bb4add65e53cc0b2f3833760f4e7263f5df17cfad5",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -1018,7 +1018,7 @@
},
"meta": {
"hash": "97fbac82b526cafe6e48233dda46d0bb87fde7a52027774048b90c9c14818395",
"firstSeen": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567151937",
"updateCount": 3
}
@ -1077,7 +1077,7 @@
},
"meta": {
"hash": "847dbaae8802781fa073cc92c6891ea0a0c39752f95266fcb4db7812dc78640e",
"firstSeen": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1569415890",
"updateCount": 3
}
@ -1107,7 +1107,7 @@
},
"meta": {
"hash": "a718446c91f49c73e68bc4f317911ff03f898ac8efe0e832ca1f803709107820",
"firstSeen": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1571634867",
"updateCount": 3
}
@ -1136,7 +1136,7 @@
},
"meta": {
"hash": "e25bdb353dc5da5c1c359f91769d85d0b3b0a58ff7085041603e4e685b380ef7",
"firstSeen": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567155517",
"updateCount": 3
}
@ -1165,8 +1165,8 @@
},
"meta": {
"hash": "46d1f9e1a05328d86ffda0dbea7dc60eae44c319eb430632ef384d2f3e7e6d44",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -1194,8 +1194,8 @@
},
"meta": {
"hash": "fb3a96cbbb4d59af2566f3d0729c13478a81a572b25a8dd1696e2a67dd8fff79",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -1253,8 +1253,8 @@
},
"meta": {
"hash": "f9542b2db5cd49f09e53b3af8348c58c973244bdeede87857e49660c6e713d65",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -1282,8 +1282,8 @@
},
"meta": {
"hash": "0b86c444f4d15709a99d1e32c651e9530a294258ba32784d998a56c6f14198b1",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -1311,8 +1311,8 @@
},
"meta": {
"hash": "35bfb52929dcbd21c120d555c9d3382154f47b661d31722ffb3d21281021bba3",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -1340,8 +1340,8 @@
},
"meta": {
"hash": "97b037f3f463b8cf7de0cc12a607c540ffe8a4869323a4cc17c66eebbc92d612",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -1400,8 +1400,8 @@
},
"meta": {
"hash": "e29182514bd83550705267a43d21eec8886ed011c6259f2b3efec9862541f90e",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -1429,8 +1429,8 @@
},
"meta": {
"hash": "9ee4bb8713d24b9e6f5367eb05645c6e41d205b120b4d06a9a949984c7cd73b0",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -1488,8 +1488,8 @@
},
"meta": {
"hash": "357daaf44bab240518a3c9bdd34a1e8702fab3358171e30f633b7a7f423b9884",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -1517,8 +1517,8 @@
},
"meta": {
"hash": "a30287149e833b454deea446359d51554640ad3a57cd2460d8519c376077b8b4",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -1546,8 +1546,8 @@
},
"meta": {
"hash": "4ce872446c7950c9450e56ab2251c7cfcd473a1c9b2a64baa7c9d6b029264796",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
},
@ -1575,8 +1575,8 @@
},
"meta": {
"hash": "43bc0cd7776468f3b74791017349ef278921c8ded7ba0bd7788d2b01bdb68c7a",
"firstSeen": "1567098755",
"lastUpdated": "1567098755",
"firstSeen": "1567099321",
"lastUpdated": "1567099321",
"updateCount": 2
}
}