Permalink
Browse files

updated demo

  • Loading branch information...
1 parent 628ef8d commit 781eb0859bbff1528bb7d8a147dff33e2d0ff2c9 Calvin Metcalf committed Mar 1, 2013
Showing with 323 additions and 116 deletions.
  1. +127 −0 css/gh-fork-ribbon.css
  2. +68 −0 css/gh-fork-ribbon.ie.css
  3. +0 −50 demo-overlays.html
  4. +0 −66 demo.html
  5. +128 −0 index.html
View
@@ -0,0 +1,127 @@
+/* Left will inherit from right (so we don't need to duplicate code */
+.github-fork-ribbon {
+ /* The right and left lasses determine the side we attach our banner to */
+ position: absolute;
+
+ /* Add a bit of padding to give some substance outside the "stitching" */
+ padding: 2px 0;
+
+ /* Set the base colour */
+ background-color: #a00;
+
+ /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.00)), to(rgba(0, 0, 0, 0.15)));
+ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+ background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+ background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+ background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+ background-image: linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000');
+
+ /* Add a drop shadow */
+ -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
+ box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
+
+ z-index: 9999;
+}
+
+.github-fork-ribbon a {
+ /* Set the font */
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 13px;
+ font-weight: 700;
+ color: white;
+
+ /* Set the text properties */
+ text-decoration: none;
+ text-shadow: 0 -1px rgba(0,0,0,0.5);
+ text-align: center;
+
+ /* Set the geometry. If you fiddle with these you'll also need to tweak the top and right values in #github-fork-ribbon. */
+ width: 200px;
+ line-height: 20px;
+
+ /* Set the layout properties */
+ display: inline-block;
+ padding: 2px 0;
+
+ /* Add "stitching" effect */
+ border-width: 1px 0;
+ border-style: dotted;
+ border-color: rgba(255,255,255,0.7);
+}
+
+.github-fork-ribbon-wrapper {
+ width: 150px;
+ height: 150px;
+ position: absolute;
+ overflow: hidden;
+ top: 0;
+}
+
+.github-fork-ribbon-wrapper.left {
+ left: 0;
+}
+
+.github-fork-ribbon-wrapper.right {
+ right: 0;
+}
+
+.github-fork-ribbon-wrapper.left-bottom {
+ position: fixed;
+ top: inherit;
+ bottom: 0;
+ left: 0;
+}
+
+.github-fork-ribbon-wrapper.right-bottom {
+ position: fixed;
+ top: inherit;
+ bottom: 0;
+ right: 0;
+}
+
+.github-fork-ribbon-wrapper.right .github-fork-ribbon {
+ top: 42px;
+ right: -43px;
+
+ /* Rotate the banner 45 degrees */
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper.left .github-fork-ribbon {
+ top: 42px;
+ left: -43px;
+
+ /* Rotate the banner -45 degrees */
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+
+
+.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
+ top: 80px;
+ left: -43px;
+
+ /* Rotate the banner -45 degrees */
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
+ top: 80px;
+ right: -43px;
+
+ /* Rotate the banner -45 degrees */
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
View
@@ -0,0 +1,68 @@
+/* IE voodoo courtesy of http://stackoverflow.com/a/4617511/263871 and
+ * http://www.useragentman.com/IETransformsTranslator */
+.github-fork-ribbon-wrapper.right .github-fork-ribbon {
+ /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
+ top: -22px;
+ right: -62px;
+
+ /* IE8+ */
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
+ /* IE6 and 7 */
+ filter: progid:DXImageTransform.Microsoft.Matrix(
+ M11=0.7071067811865474,
+ M12=-0.7071067811865477,
+ M21=0.7071067811865477,
+ M22=0.7071067811865474,
+ SizingMethod='auto expand'
+ );
+}
+
+.github-fork-ribbon-wrapper.left .github-fork-ribbon {
+ top: -22px;
+ left: -22px;
+
+ /* IE8+ */
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
+ /* IE6 and 7 */
+ filter: progid:DXImageTransform.Microsoft.Matrix(
+ M11=0.7071067811865483,
+ M12=0.7071067811865467,
+ M21=-0.7071067811865467,
+ M22=0.7071067811865483,
+ SizingMethod='auto expand'
+ );
+}
+
+.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
+ /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
+ top: 12px;
+ left: -22px;
+
+
+ /* IE8+ */
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
+ /* IE6 and 7 */
+/* filter: progid:DXImageTransform.Microsoft.Matrix(
+ M11=0.7071067811865474,
+ M12=-0.7071067811865477,
+ M21=0.7071067811865477,
+ M22=0.7071067811865474,
+ SizingMethod='auto expand'
+ );
+*/}
+
+.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
+ top: 12px;
+ right: -62px;
+
+ /* IE8+ */
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
+ /* IE6 and 7 */
+ filter: progid:DXImageTransform.Microsoft.Matrix(
+ M11=0.7071067811865483,
+ M12=0.7071067811865467,
+ M21=-0.7071067811865467,
+ M22=0.7071067811865483,
+ SizingMethod='auto expand'
+ );
+}
View
@@ -1,50 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>Leaflet Provider Demo</title>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <!-- Leaflet style. REQUIRED! -->
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
- <!--[if lte IE 8]>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" />
- <![endif]-->
- <style>
- .map {
- width: 100%;
- height: 550px;
- }
- </style>
- <script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet-src.js"></script>
- <script src="leaflet-providers.js"></script>
-</head>
-<body>
- <h1>Leaflet Provider Demo</h1>
- <div id="map" class="map"></div>
- <script>
- var map = new L.Map('map', {
- center: new L.LatLng(48, -3),
- zoom: 5,
- attributionControl: true
- });
- var defaultLayer = L.tileLayer.provider('OpenStreetMap.Mapnik');
- map.addLayer(defaultLayer);
-
- var overlayLayers = {
- "OpenWeatherMap Clouds": L.tileLayer.provider('OpenWeatherMap.Clouds', {opacity: 0.5}),
- "OpenWeatherMap CloudsClassic": L.tileLayer.provider('OpenWeatherMap.CloudsClassic', {opacity: 0.5}),
- "OpenWeatherMap Precipitation": L.tileLayer.provider('OpenWeatherMap.Precipitation', {opacity: 0.5}),
- "OpenWeatherMap PrecipitationClassic": L.tileLayer.provider('OpenWeatherMap.PrecipitationClassic', {opacity: 0.5}),
- "OpenWeatherMap Rain": L.tileLayer.provider('OpenWeatherMap.Rain', {opacity: 0.5}),
- "OpenWeatherMap RainClassic": L.tileLayer.provider('OpenWeatherMap.RainClassic', {opacity: 0.5}),
- "OpenWeatherMap Pressure": L.tileLayer.provider('OpenWeatherMap.Pressure', {opacity: 0.5}),
- "OpenWeatherMap PressureContour": L.tileLayer.provider('OpenWeatherMap.PressureContour', {opacity: 0.5}),
- "OpenWeatherMap Wind": L.tileLayer.provider('OpenWeatherMap.Wind', {opacity: 0.5}),
- "OpenWeatherMap Temperature": L.tileLayer.provider('OpenWeatherMap.Temperature', {opacity: 0.5}),
- "OpenWeatherMap Snow": L.tileLayer.provider('OpenWeatherMap.Snow', {opacity: 0.5})
- };
- map.addControl(new L.Control.Layers('', overlayLayers, {collapsed: false}));
- </script>
-</body>
-</html>
View
@@ -1,66 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>Leaflet Provider Demo</title>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <!-- Leaflet style. REQUIRED! -->
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
- <!--[if lte IE 8]>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" />
- <![endif]-->
- <style>
- .map {
- width: 100%;
- height: 550px;
- }
- </style>
- <script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet-src.js"></script>
- <script src="leaflet-providers.js"></script>
-</head>
-<body>
- <h1>Leaflet Provider Demo</h1>
- <div id="map" class="map"></div>
- <script>
- var map = new L.Map('map', {
- center: new L.LatLng(48, -3),
- zoom: 5,
- attributionControl: true
- });
- var defaultLayer = L.tileLayer.provider('OpenStreetMap.Mapnik');
- map.addLayer(defaultLayer);
-
- var baseLayers = {
- "OpenStreetMap Default": defaultLayer,
- "OpenStreetMap German Style": L.tileLayer.provider('OpenStreetMap.DE'),
- "OpenStreetMap Black and White": L.tileLayer.provider('OpenStreetMap.BlackAndWhite'),
- "Thunderforest OpenCycleMap": L.tileLayer.provider('Thunderforest.OpenCycleMap'),
- "Thunderforest Transport": L.tileLayer.provider('Thunderforest.Transport'),
- "Thunderforest Landscape": L.tileLayer.provider('Thunderforest.Landscape'),
- "MapQuest OSM": L.tileLayer.provider('MapQuestOpen.OSM'),
- "MapQuest Aerial": L.tileLayer.provider('MapQuestOpen.Aerial'),
- "MapBox Example": L.tileLayer.provider('MapBox.examples.map-zr0njcqy'),
- "Stamen Toner": L.tileLayer.provider('Stamen.Toner'),
- "Stamen Terrain": L.tileLayer.provider('Stamen.Terrain'),
- "Stamen Watercolor": L.tileLayer.provider('Stamen.Watercolor'),
- "Esri WorldStreetMap": L.tileLayer.provider('Esri.WorldStreetMap'),
- "Esri DeLorme": L.tileLayer.provider('Esri.DeLorme'),
- "Esri WorldTopoMap": L.tileLayer.provider('Esri.WorldTopoMap'),
- "Esri WorldImagery": L.tileLayer.provider('Esri.WorldImagery'),
- "Esri WorldTerrain": L.tileLayer.provider('Esri.WorldTerrain'),
- "Esri WorldShadedRelief": L.tileLayer.provider('Esri.WorldShadedRelief'),
- "Esri WorldPhysical": L.tileLayer.provider('Esri.WorldPhysical'),
- "Esri OceanBasemap": L.tileLayer.provider('Esri.OceanBasemap'),
- "Esri NatGeoWorldMap": L.tileLayer.provider('Esri.NatGeoWorldMap'),
- "Esri WorldGrayCanvas": L.tileLayer.provider('Esri.WorldGrayCanvas'),
- "Nokia Normal Day": L.tileLayer.provider('Nokia.normalDay'),
- "Nokia Normal Day Grey": L.tileLayer.provider('Nokia.normalGreyDay'),
- "Nokia Satellite": L.tileLayer.provider('Nokia.satelliteNoLabelsDay'),
- "Nokia Satellite (Labeled)": L.tileLayer.provider('Nokia.satelliteYesLabelsDay'),
- "Nokia Terrain": L.tileLayer.provider('Nokia.terrainDay')
- };
- map.addControl(new L.Control.Layers(baseLayers, '', {collapsed: false}));
- </script>
-</body>
-</html>
Oops, something went wrong.

0 comments on commit 781eb08

Please sign in to comment.