diff --git a/_layouts/project.html b/_layouts/project.html new file mode 100644 index 0000000..676c50c --- /dev/null +++ b/_layouts/project.html @@ -0,0 +1,9 @@ +--- +layout: default +--- + +

+ +

+{{ content }} +

diff --git a/_posts/2014-04-21-firstpost.markdown b/_posts/2014-04-21-firstpost.markdown deleted file mode 100644 index 12c0662..0000000 --- a/_posts/2014-04-21-firstpost.markdown +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: post -title: "First Post" -date: 2014-04-21 21:54:59 -categories: projects -author : Gabriel Dunne ---- - -Putting my ancient home-brewed [blog software](http://git.quilime.com/?p=plog.git) on a break and giving [Jekyll](https://github.com/mojombo/jekyll) a try. diff --git a/_posts/2014-04-23-gh-td.markdown b/_posts/2014-04-23-gh-td.markdown index ce14184..85f12f6 100644 --- a/_posts/2014-04-23-gh-td.markdown +++ b/_posts/2014-04-23-gh-td.markdown @@ -2,7 +2,7 @@ layout: post title: "Grasshopper -> TouchDesigner Bridge" date: 2014-04-23 -categories: articles +categories: software --- ## Abstract diff --git a/_posts/2014-04-24-tetra-field.markdown b/_posts/2014-04-24-tetra-field.markdown index fb10904..c8dcd1f 100644 --- a/_posts/2014-04-24-tetra-field.markdown +++ b/_posts/2014-04-24-tetra-field.markdown @@ -1,8 +1,8 @@ --- layout: post -title: "Tetra Field: In Depth Making Of" +title: "Tetra Field" date: 2014-04-24 -categories: articles +categories: projects author: Gabriel Dunne --- @@ -14,19 +14,13 @@ Gabriel Dunne plywood, projector, touchdesigner, grasshopper -## Introduction -*Tetra Field* consists of a series of projection-mapped truncated tetrahedrons laser-cut from 10mm bitch ply. They vary in size, orientation, truncation, and all have an arbirary boolean intersection with a vertical plane, resulting in each having unique placement on the wall. -I arrived at this design during an experiment on rapid fabrication closely linked with the process of projection-mapping. +*Tetra Field* consists of a series of projection-mapped truncated tetrahedrons laser-cut from 10mm bitch ply. They vary in size, orientation, truncation, and all have a boolean intersection with the wall as if each object is embedded within it. -Rhino/Grasshopper was used to generate the geometry, and TouchDesigner was used for the projection graphics. The polygon mesh information from Grasshopper is shared by TouchDesigner from via my [Grasshopper -> TouchDesigner Bridge]({% post_url 2014-04-23-gh-td %}). This allows the fabrication process of the object, and and the projection graphics to be highly linked and related. +This installation was completed over the span of 2 days as an experiment in developing a process for procedural sculptural form that is closely linked with realtime projection-mapped graphics. -Further Software Iterations: This project did not solve the problem of aligning the projector to the sculptures. For this project, projecting and capturing GrayCode patterns would have been the most reliable method, but the shape of the objects was so simple, I mounted them on the wall, and knowing the projector distance, I oriented the graphics manually. For future iterations, I want to experiment with embedded fiber-optics in verticies that would be tracked with an IR camera for a precise, real-time alignment. A huge challenge involved in projection mapping objects is the sheer amount of time it takes to align projections, and creating a real-time mapping solution allows for articulated and or moving installations. - -Future Fabrication Iterations: This iteration does not include a solution mitered corners, due to the physical tendancies of the laser cutter, which simplifies the fabrication process considerably. My current process is designing a precise, repeatable solution for generating mitres when fabricating polygonal shapes. However, the lack of mitres in this design reveals a perfect channel between faces that highlights the polygon edge. - -## Materials +Sculptural Forms created in Grasshopper had their polygon mesh information shared with TouchDesigner from via a [Grasshopper -> TouchDesigner Bridge]({% post_url 2014-04-23-gh-td %}). This allowed the fabrication of the physical object and and the projection graphics to be closely related. ### Software - [Rhino3D](http://rhino3d.com) @@ -35,33 +29,38 @@ Future Fabrication Iterations: This iteration does not include a solution mitere - [GhPython](http://www.food4rhino.com/project/ghpython) - [TouchDesigner](https://www.derivative.ca/) -### Hardware -- DLP or LCD Projector -- Windows PC with TouchDesigner-supported videocard (NVidia). +### Installation Hardware +- LCD Projector +- Windows PC with NVidia graphics card. ### Fabrication Tools - Laser Cutter -### Material List -- 10mm Plywood Stock trimmed to fit laser bed +### Materials +- 10mm Plywood - Cyanoacrylate Super Glue - Neodynimum Magnets - Angle Brackets -- Gap-filling paint/primer -- silicon caulk -- gaffers tape +- Gap-filling primer +- White Silicon Caulk +- Gaffers Tape +- L-Brackets + +## Design & Fabrication -## Design +Geometry was created in Grasshopper/Rhino via the LunchBox toolkit. -Geometry was created in Grasshopper via the LunchBox toolkit. +![](https://raw.githubusercontent.com/quilime/gh-td/master/screenshots/sender_gh.PNG) -[grasshopper patch/screenshot] +### Supports +[supports image] -Grasshopper process. +![](https://farm8.staticflickr.com/7179/13884653138_d4d1784c6c_b.jpg) +Gometry and supports layed out for cutting. -## Fabrication Process +## Laser Cutting ![Lasering](https://farm4.staticflickr.com/3698/10585763365_b0047bf023_c.jpg) @@ -69,20 +68,27 @@ Forms were cut with a LaserSaur laser cutter from sheets of lightweight, low-gra ![Gluing](https://farm8.staticflickr.com/7308/10585766255_f3b95369ae_c.jpg) -Panels are superglued together by hand. The interior support structure relies on two angle wedges, which are superglued to the interior of the forms. +Panels are superglued together by hand. The interior support structure relies on two angle wedges, which are attached on the interior of the forms. ![Painting](https://farm8.staticflickr.com/7430/10585792186_6a42ecb673_c.jpg) -After the glue dries (very I gave them multiple coats of white primer and gap filler. The brazing of the laser on the plywood is a tough surface to paint completely white, and required multiple coats. +After glue-up multiple coats of white primer is applied. I did a light hand sanding of the laser-cut plywood edges, as the laser-braze is a tough surface to get paint to adhere to, and therefor coat well enough so it appears completely white. Grey would have looked nice and worked well. ## Installation -Ultra strong neodynium magnets were used as a mounting solution. I tried the methods of inserting large-headed nails or screws into the wall, or simply gaff-taping an opposing magnet. The gaff-tape method was a temporary, but works. +Ultra strong neodynium magnets attracted to large-headed nails or screws into the wall were used as a mounting solution. [magnet shot] ## Projection Mapping -[touch designer graphics page/screenshot] +[projection mapping patch] + +## Future Iterations + +### Software +This project did not attempt to solve the task of of aligning projections to the physical objects. Because of their simple geometric shape, I had planned to first install them on a surface and register the projections manually. For future iterations, I'd am considering ideas that include embedded fiber-optics in the verticies that would be tracked with an IR camera for a precise, real-time alignment. A huge challenge involved in projection mapping objects is the sheer amount of time it takes to align projections, and creating a real-time mapping solution allows for articulated and or moving installations. +### Fabrication +This iteration does not include a solution mitered corners, due to the physical tendancies of the laser cutter. However, the lack of mitres simplified the fabrication process considerably and was a benifit -- as this design reveals a channel between faces that makes a perfect area highlight the polygon edge when mapping. diff --git a/_posts/2014-04-24-woodmitres.markdown b/_posts/2014-04-24-woodmitres.markdown index 71c3da7..879eed8 100644 --- a/_posts/2014-04-24-woodmitres.markdown +++ b/_posts/2014-04-24-woodmitres.markdown @@ -1,6 +1,6 @@ --- layout: post -title: "Mitre Solution for Wooden Geometry" +title: "Mitre Solutions for Fabricating Geometric Forms out of Wood" date: 2014-04-24 categories: articles author: Gabriel Dunne diff --git a/_posts/2014-04-29-tetra-table.markdown b/_posts/2014-04-29-tetra-table.markdown new file mode 100644 index 0000000..e22bd4e --- /dev/null +++ b/_posts/2014-04-29-tetra-table.markdown @@ -0,0 +1,261 @@ +--- +layout: post +title: "Tetra Table" +date: 2014-04-29 +categories: projects +author: Gabriel Dunne +--- + + + +I'm continuing interations with Tetrahedral geometry because of its simplistic beauty. This article will cover the creation of a truncated tetrahedron shape out of 3/4" material, with a solution for mitred joins between panels. + + + +## Requirements + +### Software + - Rhino + - Grasshopper + +### Tools + - Laser Cutter + - Table Saw + +### Materials + - Wood Glue + - 4' x 8' x 3/4" birch sandply + + + +## Design + +I am using Rhinoceros 3D. There is an evaluation version for Windows or Mac available at [http://www.rhino3d.com/download](http://www.rhino3d.com/download). + +There are many of ways to create this type of geometric form, especially with software like Rhino, and its companion plugin for algorhythmic design: Grasshopper. For this tutorial, I'm going to go about it in a way that is based on simple transforms and booleans as an attempt to be software agnostic. + + + +## Creating a Tetrahedron + +I'll cover two methods for creating a Tetrahedron in Rhino. One is from scratch, the other is using the Pyramid tool. Creating a Tetrahedron from scratch requires knowing the shapes' height based on its edge length. Starting from an edge length of 10, we can use the height formula for a regular tetrahedron: + +[height formula] + +Then, I use a calculator to solve for *h*. I'm rounding to the hundreths for brevity, but you should use as many numbers past the decimal that your calculator or computer spits out + +2 / 3 +**= 0.667** +squareroot +**= 0.816** +* 10 (edge length) +**= 8.164** + +Result: A tetrahedron with edge length 10 will have a height of 8.164. + + +[polygon video] + + +If you're using Rhino want to shortcut the process of do this all from scratch, you can also use the Pyramid tool. + + +## Pyramid Method + +Type `Pyramid` into the command line. + +Options will appear in the command line. By clicking on the variables, set the options to equal: + + NumSides=3 DirectionalConstraint=Vertical Solid=Yes + +Click Edge in the Pyramid command. + +Type `0` to set the origin + +Type `10` to set the edge length, and now the base of the pyramid will be constrained to 10 inch edges. + +Hold down shift to constrain the axis, and when you orient the tip of the base on the X axis, click once. + +[image of constrain] + +Type `8.16496580927726` into the command line. You can be as precise as you like, or just copypasta from this tutorial. In the top view, orient the shape so it's right side up, and click once. + +Tetrahedron! + + + + + +## Truncation + +Now, we need to truncate our shape. + +Fist, we need to find the center of our shape. There are many ways to do this is various software, let's do it by hand. + +First I create a new layer and make it a color. + +I use the snapping tools to find the center of all the edges, and draw three lines that intersect at the center of all the faces. I do this for all 4 faces of the form. + +Then, I draw four lines that originate from the center of each face, and coincides with the far vertex opposite the face. + +The center of the form is where these four lines intersect. We can use the "Point" tool to create a point at the intersection. + +Type "Move" in the command line, and move our shape and the centerpoint we just created to the origin. + +Now we're centered. + +Select everything and group them with Command-G. + +Type "Rotate" into the command line. + +Type 0 to center at the origin, and set `Copy=Yes` in the command line options by clicking it. + +Hold down shift and click to set the second reference point on the vertical axis. + +With shift still held, rotate the form completely around so it's upside down, and press enter. + +Right Click to redo our same rotate command, but make sure Copy is set to Off. + +Type "0" to set the origin, hold down shift, and rotate the entire form 180 degrees from the top view. + +Now we have two intersecting tetrahedrons. If we were to do a boolean combine of these two objects, we would have an icosohedron. + +To create our truncation,we can scale one of the tetrahedrons to our liking, using the center point as the scale origin. + +When you get to a scale that you like, type Boolean2Objects, and click to cycle through the various boolean operations until you arrive at the truncated shape. You can keep trying different truncation scales until you find one you like. + +If you want t truncate the shape so it creates a perfect hexagon on three sides, enter "0" as the origin, and enter `1.666666666` as the scale factor. + +After you complete the Boolean2Objects command, your shape is complete. + +You can clean up and delete all the extra guide lines at this point. + +[blue truncated tet] + +Now, we need to scale the object to our build size. + + + +For my design, I'm going to ultimately use this as a table, so I'm going to cut off a bit from the bottom. This actually adds a little more work because I'll have to cut a few unique shapes in the plywood. + +I'm going to truncate at a `0.6666` of the length of the hexagon edges, because thirds are nice and the fractions are inherent to this geometry. I create a line along the edge of the lower hexagon sides, and then use the Divide tool with 3 segments. + +I then create a rectangle plane, and align it to the 2/3d's segement, and do another boolean. + +I chose 22" as the height of the finished object, which fits onto a single sheet of 4' x 8' ply. + +To make it easier to work with the form, I draw guidelines at the base and the top so I know where center is. These intersections are the reference point for moving and scaling the object. + +Move the object to the origin, and draw a 22" inch line from 0 on the Y axis. We'll use this line to scale to. + +Then, I make trace all the edges, do 3pt orients, and align them to the cutting plane. + + + +## Creating Thickness + +Steps to create material thickness: + +1. Offset mesh by .75 +2. Convert mesh to surfaces +3. DupBorderEdge to find edge curves +4. Loft inner curve to outer curve + +You only need to do this for each individual piece, and then duplicate them. + + + +## Measuring Mitre Angles + +We need guidlines for measuring perpendicular to the edge of the face. + +[mitre angle edge measure] + +Then we measure the angle between the faces by typing "angle" in the command line, and selecting the beginning and ending of both lines. Then we find the mitre angle by dividing in half. + +For Support A, the hexagon-to-hexagon mating edge: + +70.529 / 2 +**= 35.2645** + +And for Support B, the hexagon-to-triangle edges: + +109.471 / 2 +**= 54.7355** + +We're going to use these angles to make some internal support triangle blocks. + + +You can create thes any way you like. I navigate inside my object and just build them in relation to the form. I also add notches in the side of the triangle that won't be mated, so there's no puzzle-piece confusing when we assemble. + +We'll need to make 18 of each. Duplicate them so we have 18 each, and lay them out for our cut. You can be as precise as you like in laying out your cutfile. I typically try to be conservative with the material. + +[cutfile image] + +Now, we lasercut! + + +[Metabeam Cutting Awesomeness] + +Now that the shapes are cut, we can mitre the edges. + +Using masking tape, I mark all the angles and lay them out. + +I'm using a 1HP Bosche Trim Router with a tilt add-on. + +This is an analog method of setting the angle, I typically error on the side of cutting more material away, because it's easier to fix a gap on the inside of the form, rather than the edges. + +[photos of setting the router angle] + +I cut all the edges one angle before setting the tool again. + +[cutting angles A] + +Now set the router to our additional angle + +[cutting angles B] + +We have one more special angle to cut, for the parts of the form that rest on the ground. + +[photo of cutting foot angle] + +We're done cutting! + + +## Assembly + +We'll work upside down, and build the form up. Place the top of the form upside down on the worksurface + +[form upside down] + +And glue in supports. We can also screw or brad them in. I'm measuing out a fractional 1/3 position for the positions of my supports. + +[adding supports] + +Next, we add supports to the hexagonal sides, in order. + +[lay out supports on sides] + +Attach supports to hexagonal sides with glue and or brads + +[attaching supports] + +Arrange the sides and use a ratchet strap to hold them together while the glue sets + +[Setting sides] + +Attach sides to tabletop. + +[Attach hexagonal sides to eachother] + +The last part is the attach the triangles via glue and/or brads. + +[attaching triangles] + +Using an electric sander at first, buff the entire shape, and then lightly hit the corners by hand. + +[picture of finishing corners] + +Use your choice of finish to seal. I went with a combination beezwax oil. + +[finished glamour shots] \ No newline at end of file diff --git a/archive.html b/archive.html index f13192f..134f709 100644 --- a/archive.html +++ b/archive.html @@ -1,9 +1,12 @@ --- layout: default -title: Your New Jekyll Site +title: archive ---

+ +

archive

{{ category | first }} diff --git a/css/component.css b/css/component.css new file mode 100755 index 0000000..d816f40 --- /dev/null +++ b/css/component.css @@ -0,0 +1,151 @@ +st-effect-3*, +*:after, +*::before { + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html, +body, +.st-container, +.st-pusher, +.st-content { + +} + +.st-content { + overflow-y: scroll; +} + +.st-content, +.st-content-inner { +} + +.st-container { + position: relative; +} + +.st-pusher { + position: relative; + left: 0; + z-index: 99; + height: 100%; + -webkit-transition: -webkit-transform 0.35s; + transition: transform 0.35s; +} + +.st-pusher::after { + position: absolute; + top: 0; + right: 0; + width: 0; + height: 0; + background: rgba(0,0,0,0.3); + content: ''; + opacity: 0; + -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; + transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; +} + +.st-menu-open .st-pusher::after { + width: 100%; + height: 100%; + opacity: 1; + -webkit-transition: opacity 0.5s; + transition: opacity 0.5s; +} + +.st-menu { + position: absolute; + top: 0; + left: 0; + z-index: 100; + visibility: hidden; + width: 300px; + height: 100%; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} + +.st-menu::after { + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.2); + content: ''; + opacity: 1; + -webkit-transition: opacity 0.5s; + transition: opacity 0.5s; +} + +.st-menu-open .st-menu::after { + width: 0; + height: 0; + opacity: 0; + -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; + transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; +} + +/* content style */ + +.st-menu ul { + margin: 0; + padding: 0; + list-style: none; +} + +.st-menu h2 { + margin: 0; + padding: 1em; + color: rgba(0,0,0,0.4); + font-weight: 300; +} + +.st-menu ul li a { + display: block; + padding: 1em 1em 1em 1.2em; + outline: none; + color: #000; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 400; + text-decoration:none; +} + +.st-menu ul li a:hover { + text-decoration:underline; + background: rgba(0,0,0,0.8); + color: #fff; +} + +/* Individual effects */ + +/* Effect 3: Push*/ +.st-effect-3.st-menu-open .st-pusher { + -webkit-transform: translate3d(300px, 0, 0); + transform: translate3d(300px, 0, 0); +} + +.st-effect-3.st-menu { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} + +.st-effect-3.st-menu-open .st-effect-3.st-menu { + visibility: visible; + -webkit-transition: -webkit-transform 0.5s; + transition: transform 0.5s; +} + +.st-effect-3.st-menu::after { + display: none; +} + + +/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */ +.no-csstransforms3d .st-pusher, +.no-js .st-pusher { + padding-left: 300px; +} diff --git a/css/main.css b/css/main.css index 7b2375a..45c0ceb 100755 --- a/css/main.css +++ b/css/main.css @@ -19,14 +19,52 @@ html, body { height: 100%; } body { - background-color: #eee; - font: 12px menlo, "andale mono", monospace, sans-serif; + background-color: #f4f4f4; + font: 12px Menlo, "Consolas", "Andale Mono", "Lucida Console", monospace; + animation: fadein 1s; + -moz-animation: fadein 1s; /* Firefox */ + -webkit-animation: fadein 1s; /* Safari and Chrome */ + -o-animation: fadein 1s; /* Opera */ +} + + +@keyframes fadein { + from { + opacity:0; + } + to { + opacity:1; + } +} +@-moz-keyframes fadein { /* Firefox */ + from { + opacity:0; + } + to { + opacity:1; + } +} +@-webkit-keyframes fadein { /* Safari and Chrome */ + from { + opacity:0; + } + to { + opacity:1; + } +} +@-o-keyframes fadein { /* Opera */ + from { + opacity:0; + } + to { + opacity: 1; + } } h1,h2,h3, h4, h5, h6 { font-size: 1em; color:#000; - line-height:1em; + line-height:1.2em; font-weight:bold; margin: 1em 0; } @@ -81,7 +119,9 @@ header { } .posts li { - padding-bottom: .2em; + font-family: lettergothic, sans; + font-size:1.2em; + line-height:1.5em; } .posts span { @@ -139,14 +179,29 @@ header { } .meta { - color: #aaa; + color: #888; text-align:center; } .footer { text-align:center; color: #999; - margin-top: 2em; + margin: 2em 0; +} + +.nav { + font-size:2em; + position:absolute; + top:1em; + left:1em; + display:block; + width:2em; + height:2em; + cursor:pointer; +} +.nav a { + font-family: lettergothic; + text-decoration:none; } /*****************************************************************************/ @@ -160,8 +215,8 @@ header { /* standard */ .post pre { border: 1px solid #ddd; - background-color: #eef; padding: 0 .4em; + background-color:#fff; } .post ul, .post ol { @@ -170,8 +225,10 @@ header { .post code { border: 1px solid #ddd; - background-color: #eef; - padding: 0 .2em; + color:#000; + background-color: #fff; + padding: .2em .4em; + border-radius:0.2em; } .post pre code { diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..ae8bc83 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,425 @@ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} \ No newline at end of file diff --git a/index.html b/index.html index ba7649c..6a7bf2d 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,10 @@ title: notes
-
{{site.name}}
-
- - {{ post.title }} - — - {{ post.date | date_to_string }} + {{ post.title }}
diff --git a/js/classie.js b/js/classie.js new file mode 100755 index 0000000..a967554 --- /dev/null +++ b/js/classie.js @@ -0,0 +1,80 @@ +/*! + * classie - class helper functions + * from bonzo https://github.com/ded/bonzo + * + * classie.has( elem, 'my-class' ) -> true/false + * classie.add( elem, 'my-new-class' ) + * classie.remove( elem, 'my-unwanted-class' ) + * classie.toggle( elem, 'my-class' ) + */ + +/*jshint browser: true, strict: true, undef: true */ +/*global define: false */ + +( function( window ) { + +'use strict'; + +// class helper functions from bonzo https://github.com/ded/bonzo + +function classReg( className ) { + return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); +} + +// classList support for class management +// altho to be fair, the api sucks because it won't accept multiple classes at once +var hasClass, addClass, removeClass; + +if ( 'classList' in document.documentElement ) { + hasClass = function( elem, c ) { + return elem.classList.contains( c ); + }; + addClass = function( elem, c ) { + elem.classList.add( c ); + }; + removeClass = function( elem, c ) { + elem.classList.remove( c ); + }; +} +else { + hasClass = function( elem, c ) { + return classReg( c ).test( elem.className ); + }; + addClass = function( elem, c ) { + if ( !hasClass( elem, c ) ) { + elem.className = elem.className + ' ' + c; + } + }; + removeClass = function( elem, c ) { + elem.className = elem.className.replace( classReg( c ), ' ' ); + }; +} + +function toggleClass( elem, c ) { + var fn = hasClass( elem, c ) ? removeClass : addClass; + fn( elem, c ); +} + +var classie = { + // full names + hasClass: hasClass, + addClass: addClass, + removeClass: removeClass, + toggleClass: toggleClass, + // short names + has: hasClass, + add: addClass, + remove: removeClass, + toggle: toggleClass +}; + +// transport +if ( typeof define === 'function' && define.amd ) { + // AMD + define( classie ); +} else { + // browser global + window.classie = classie; +} + +})( window ); diff --git a/js/modernizr.custom.js b/js/modernizr.custom.js new file mode 100755 index 0000000..f63dbbe --- /dev/null +++ b/js/modernizr.custom.js @@ -0,0 +1,4 @@ +/* Modernizr 2.6.2 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-csstransforms3d-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load + */ +;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f div' ) ), + // event type (if mobile use touch events) + eventtype = mobilecheck() ? 'touchstart' : 'click', + resetMenu = function() { + classie.remove( container, 'st-menu-open' ); + }, + bodyClickFn = function(evt) { + if( !hasParentClass( evt.target, 'st-menu' ) ) { + resetMenu(); + document.removeEventListener( eventtype, bodyClickFn ); + } + }; + + buttons.forEach( function( el, i ) { + var effect = el.getAttribute( 'data-effect' ); + + el.addEventListener( eventtype, function( ev ) { + ev.stopPropagation(); + ev.preventDefault(); + container.className = 'st-container'; // clear + classie.add( container, effect ); + setTimeout( function() { + classie.add( container, 'st-menu-open' ); + }, 25 ); + document.addEventListener( eventtype, bodyClickFn ); + }); + } ); + + } + + init(); + +})(); \ No newline at end of file -- 2.34.1

{{ page.title }}

archive

{{site.name}}