Create gh-pages branch via GitHub
This commit is contained in:
Kevin Giszewski
Binary file not shown.
|
After Width: | Height: | Size: 943 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
+138
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
|
||||
<meta name="description" content="Archetype : An Umbraco 7 Property Editor Wrapper" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
|
||||
|
||||
<title>Archetype</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div id="header_wrap" class="outer">
|
||||
<header class="inner">
|
||||
<a id="forkme_banner" href="https://github.com/imulus/Archetype">View on GitHub</a>
|
||||
|
||||
<h1 id="project_title">Archetype</h1>
|
||||
<h2 id="project_tagline">An Umbraco 7 Property Editor Wrapper</h2>
|
||||
|
||||
<section id="downloads">
|
||||
<a class="zip_download_link" href="https://github.com/imulus/Archetype/zipball/master">Download this project as a .zip file</a>
|
||||
<a class="tar_download_link" href="https://github.com/imulus/Archetype/tarball/master">Download this project as a tar.gz file</a>
|
||||
</section>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<div id="main_content_wrap" class="outer">
|
||||
<section id="main_content" class="inner">
|
||||
<p>Archetype is an Umbraco 7 property editor that wraps other installed property editors. By wrapping the other properties, Archetype allows for custom and repeatable fieldset mashups.</p>
|
||||
|
||||
<p>Checkout some videos of Archetype in action here: <a href="http://blog.imulus.com/kevin-giszewski/umbraco-7-package-preview-archetype">http://blog.imulus.com/kevin-giszewski/umbraco-7-package-preview-archetype</a></p>
|
||||
|
||||
<h2>
|
||||
<a name="installation" class="anchor" href="#installation"><span class="octicon octicon-link"></span></a>Installation</h2>
|
||||
|
||||
<p>Install the <a href="https://github.com/imulus/Archetype/releases">package</a> through the Umbraco package installer or via <a href="http://www.nuget.org/packages/Archetype/">NuGet</a>.</p>
|
||||
|
||||
<h2>
|
||||
<a name="basic-configuration" class="anchor" href="#basic-configuration"><span class="octicon octicon-link"></span></a>Basic Configuration</h2>
|
||||
|
||||
<p>After installation, visit the developer section and create a new data type with ‘Archetype’ as the selected property editor.</p>
|
||||
|
||||
<p>At this point you should now see several input boxes to set up your Archetype fieldset:</p>
|
||||
|
||||
<p><strong>Label</strong> - A label for your fieldset (i.e. person, car, etc)</p>
|
||||
|
||||
<p><strong>Alias (required)</strong> - Pick a machine safe (A-Z 0-9 _- no spaces) name for your archetype that will be used for tracking this fieldset.</p>
|
||||
|
||||
<p><strong>Label Template</strong></p>
|
||||
|
||||
<p>This template will be used in the data editor and will display when the fieldset is collapsed. Ideally you can select static text or a property alias. If you choose to use a property value, you must use the following syntax:</p>
|
||||
|
||||
<p><code>{{firstName}}</code> - Where ‘firstName’ is the alias of a property.</p>
|
||||
|
||||
<p><strong>Tooltip</strong> - Appears when hovering overing over a fieldset in the data editor. This is only applicable when multiple fieldsets are enabled.</p>
|
||||
|
||||
<p><strong>Properties</strong> - Properties represent the actual input controls that your Archetype will encapsulate.</p>
|
||||
|
||||
<ul>
|
||||
<li><p><em>Label</em> - A label for your property.</p></li>
|
||||
<li><p><em>Alias</em> (required) - Pick a machine safe (A-Z 0-9 _- no spaces) name for your archetype that will be used for tracking this property.</p></li>
|
||||
<li><p><em>Help Text</em> - Text that appears under the label to guide the user on what the input is for.</p></li>
|
||||
<li><p><em>Datatype</em> - Select the preconfigured Umbraco data type.</p></li>
|
||||
<li><p><em>Default Value</em> - Input either a JSON or plain text value. This value varies and is determined by the chosen view.</p></li>
|
||||
<li><p><em>Required</em> - Simple required validation can be achieved by ticking this box.</p></li>
|
||||
</ul><h2>
|
||||
<a name="advanced-configuration" class="anchor" href="#advanced-configuration"><span class="octicon octicon-link"></span></a>Advanced Configuration</h2>
|
||||
|
||||
<p>Advanced options can be exposed by ticking the ‘Toggle Advanced Options’ box.</p>
|
||||
|
||||
<p><strong>Max Fieldsets</strong> - When blank, the Archetype will allow an infinite number of repeated fieldsets. Placing an integer in this box will limit the number to the amount entered.</p>
|
||||
|
||||
<p><strong>Enable Multiple Fieldsets</strong> - By ticking this box, a developer may add more than one type of fieldset to the Archetype. When there are multiple fieldsets configured, a toolbar will display on the data editor to allow the editor to select the different fieldsets.</p>
|
||||
|
||||
<p><strong>Custom Wrapper Class</strong> - If you need to inject a custom class to your Archetype wrapper, this is the place to do it.</p>
|
||||
|
||||
<p><strong>CSS File</strong> - If you would like to alter the appearance of the default Archetype styles, simply include a file path to your CSS file here.</p>
|
||||
|
||||
<p><strong>JS File</strong> - If you would like to inject some JavaScript on the page, simply include a file path to your JS file here.</p>
|
||||
|
||||
<p><strong>Toggle Developer Mode</strong> - Tick this box to enable verbose debugging to the console. This also expose the data model on the data editor page which can be live edited.</p>
|
||||
|
||||
<p><strong>Config Model</strong> - Import/Export your Archetype between installs by copy/pasting this code. You can also live edit your Archetype config by alter these values. Caution should be used when doing so.</p>
|
||||
|
||||
<h2>
|
||||
<a name="usage" class="anchor" href="#usage"><span class="octicon octicon-link"></span></a>Usage</h2>
|
||||
|
||||
<p>To use your new Archetype, simply add it to any document type.</p>
|
||||
|
||||
<p>To integrate your own property editor:</p>
|
||||
|
||||
<ol>
|
||||
<li>Ensure your property editor is installed into Umbraco.</li>
|
||||
<li>Edit the <code>/App_Plugins/Archetype/js/propertyEditors.views.js</code> file.</li>
|
||||
<li>Add a JSON object that defines your custom property editor.</li>
|
||||
</ol><h2>
|
||||
<a name="known-issues" class="anchor" href="#known-issues"><span class="octicon octicon-link"></span></a>Known Issues</h2>
|
||||
|
||||
<h3>
|
||||
<a name="umbraco-caching" class="anchor" href="#umbraco-caching"><span class="octicon octicon-link"></span></a>Umbraco Caching</h3>
|
||||
|
||||
<p>If you decide to extend this project locally, you'll want to set the <code><compilation></code> debug property in your web.config to <code>true</code>:</p>
|
||||
|
||||
<p><code><compilation defaultLanguage="c#" debug="true" batch="false" targetFramework="4.5"></code></p>
|
||||
|
||||
<p>This is in order to circumvent the minification and caching of the JavaScript files.</p>
|
||||
|
||||
<h3>
|
||||
<a name="prevalue-character-limit" class="anchor" href="#prevalue-character-limit"><span class="octicon octicon-link"></span></a>Prevalue Character Limit</h3>
|
||||
|
||||
<p>If you get an error during saving that says the value will be truncated in the database, it is because you config has exceeded the 2500 character limit imposed by Umbraco. You can get around this by upping the limit in your DB. Please backup your DB first.</p>
|
||||
|
||||
<p><a href="http://issues.umbraco.org/issue/U4-2120">http://issues.umbraco.org/issue/U4-2120</a></p>
|
||||
|
||||
<h3>
|
||||
<a name="core-property-editors" class="anchor" href="#core-property-editors"><span class="octicon octicon-link"></span></a>Core Property Editors</h3>
|
||||
|
||||
<p>RTE - The RTE doesn’t like to render on a repeatable fieldset. It also goes bonkers when you try to sort a field.</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<div id="footer_wrap" class="outer">
|
||||
<footer class="inner">
|
||||
<p class="copyright">Archetype maintained by <a href="https://github.com/imulus">imulus</a></p>
|
||||
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
console.log('This would be the main JS file.');
|
||||
@@ -0,0 +1 @@
|
||||
{"name":"Archetype","tagline":"An Umbraco 7 Property Editor Wrapper","body":"Archetype is an Umbraco 7 property editor that wraps other installed property editors. By wrapping the other properties, Archetype allows for custom and repeatable fieldset mashups.\r\n\r\nCheckout some videos of Archetype in action here: http://blog.imulus.com/kevin-giszewski/umbraco-7-package-preview-archetype\r\n\r\n##Installation\r\n\r\nInstall the [package](https://github.com/imulus/Archetype/releases) through the Umbraco package installer or via [NuGet](http://www.nuget.org/packages/Archetype/).\r\n\r\n##Basic Configuration##\r\n\r\nAfter installation, visit the developer section and create a new data type with ‘Archetype’ as the selected property editor.\r\n\r\nAt this point you should now see several input boxes to set up your Archetype fieldset:\r\n\r\n**Label** - A label for your fieldset (i.e. person, car, etc)\r\n\r\n**Alias (required)** - Pick a machine safe (A-Z 0-9 _- no spaces) name for your archetype that will be used for tracking this fieldset.\r\n\r\n**Label Template**\r\n\r\nThis template will be used in the data editor and will display when the fieldset is collapsed. Ideally you can select static text or a property alias. If you choose to use a property value, you must use the following syntax:\r\n\r\n`{{firstName}}` - Where ‘firstName’ is the alias of a property.\r\n\r\n**Tooltip** - Appears when hovering overing over a fieldset in the data editor. This is only applicable when multiple fieldsets are enabled.\r\n\r\n**Properties** - Properties represent the actual input controls that your Archetype will encapsulate.\r\n\t\r\n* _Label_ - A label for your property.\r\n\t\r\n* _Alias_ (required) - Pick a machine safe (A-Z 0-9 _- no spaces) name for your archetype that will be used for tracking this property.\r\n\r\n* _Help Text_ - Text that appears under the label to guide the user on what the input is for.\r\n\r\n* _Datatype_ - Select the preconfigured Umbraco data type.\r\n\r\n* _Default Value_ - Input either a JSON or plain text value. This value varies and is determined by the chosen view.\r\n\r\n* _Required_ - Simple required validation can be achieved by ticking this box.\r\n\r\n## Advanced Configuration\r\n\r\nAdvanced options can be exposed by ticking the ‘Toggle Advanced Options’ box.\r\n\r\n**Max Fieldsets** - When blank, the Archetype will allow an infinite number of repeated fieldsets. Placing an integer in this box will limit the number to the amount entered.\r\n\r\n**Enable Multiple Fieldsets** - By ticking this box, a developer may add more than one type of fieldset to the Archetype. When there are multiple fieldsets configured, a toolbar will display on the data editor to allow the editor to select the different fieldsets.\r\n\r\n**Custom Wrapper Class** - If you need to inject a custom class to your Archetype wrapper, this is the place to do it.\r\n\r\n**CSS File** - If you would like to alter the appearance of the default Archetype styles, simply include a file path to your CSS file here.\r\n\r\n**JS File** - If you would like to inject some JavaScript on the page, simply include a file path to your JS file here.\r\n\r\n**Toggle Developer Mode** - Tick this box to enable verbose debugging to the console. This also expose the data model on the data editor page which can be live edited.\r\n\r\n**Config Model** - Import/Export your Archetype between installs by copy/pasting this code. You can also live edit your Archetype config by alter these values. Caution should be used when doing so.\r\n\r\n## Usage\r\n\r\nTo use your new Archetype, simply add it to any document type.\r\n\r\nTo integrate your own property editor:\r\n\r\n1. Ensure your property editor is installed into Umbraco.\r\n2. Edit the `/App_Plugins/Archetype/js/propertyEditors.views.js` file.\r\n3. Add a JSON object that defines your custom property editor.\r\n\r\n## Known Issues\r\n\r\n### Umbraco Caching\r\n\r\nIf you decide to extend this project locally, you'll want to set the `<compilation>` debug property in your web.config to `true`:\r\n\r\n`<compilation defaultLanguage=\"c#\" debug=\"true\" batch=\"false\" targetFramework=\"4.5\">`\r\n\r\nThis is in order to circumvent the minification and caching of the JavaScript files.\r\n\r\n### Prevalue Character Limit\r\n\r\nIf you get an error during saving that says the value will be truncated in the database, it is because you config has exceeded the 2500 character limit imposed by Umbraco. You can get around this by upping the limit in your DB. Please backup your DB first.\r\n\r\nhttp://issues.umbraco.org/issue/U4-2120\r\n\r\n### Core Property Editors\r\nRTE - The RTE doesn’t like to render on a repeatable fieldset. It also goes bonkers when you try to sort a field.","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
|
||||
@@ -0,0 +1,70 @@
|
||||
.highlight .hll { background-color: #ffffcc }
|
||||
.highlight { background: #f0f3f3; }
|
||||
.highlight .c { color: #0099FF; font-style: italic } /* Comment */
|
||||
.highlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */
|
||||
.highlight .k { color: #006699; font-weight: bold } /* Keyword */
|
||||
.highlight .o { color: #555555 } /* Operator */
|
||||
.highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
|
||||
.highlight .cp { color: #009999 } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #0099FF; font-style: italic } /* Comment.Single */
|
||||
.highlight .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */
|
||||
.highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
|
||||
.highlight .ge { font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #FF0000 } /* Generic.Error */
|
||||
.highlight .gh { color: #003300; font-weight: bold } /* Generic.Heading */
|
||||
.highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
|
||||
.highlight .go { color: #AAAAAA } /* Generic.Output */
|
||||
.highlight .gp { color: #000099; font-weight: bold } /* Generic.Prompt */
|
||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #003300; font-weight: bold } /* Generic.Subheading */
|
||||
.highlight .gt { color: #99CC66 } /* Generic.Traceback */
|
||||
.highlight .kc { color: #006699; font-weight: bold } /* Keyword.Constant */
|
||||
.highlight .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #006699 } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */
|
||||
.highlight .m { color: #FF6600 } /* Literal.Number */
|
||||
.highlight .s { color: #CC3300 } /* Literal.String */
|
||||
.highlight .na { color: #330099 } /* Name.Attribute */
|
||||
.highlight .nb { color: #336666 } /* Name.Builtin */
|
||||
.highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */
|
||||
.highlight .no { color: #336600 } /* Name.Constant */
|
||||
.highlight .nd { color: #9999FF } /* Name.Decorator */
|
||||
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
|
||||
.highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */
|
||||
.highlight .nf { color: #CC00FF } /* Name.Function */
|
||||
.highlight .nl { color: #9999FF } /* Name.Label */
|
||||
.highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */
|
||||
.highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */
|
||||
.highlight .nv { color: #003333 } /* Name.Variable */
|
||||
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
|
||||
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.highlight .mf { color: #FF6600 } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #CC3300 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #CC3300 } /* Literal.String.Double */
|
||||
.highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #AA0000 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #CC3300 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #33AAAA } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #CC3300 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #003333 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #003333 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #003333 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */
|
||||
|
||||
.type-csharp .highlight .k { color: #0000FF }
|
||||
.type-csharp .highlight .kt { color: #0000FF }
|
||||
.type-csharp .highlight .nf { color: #000000; font-weight: normal }
|
||||
.type-csharp .highlight .nc { color: #2B91AF }
|
||||
.type-csharp .highlight .nn { color: #000000 }
|
||||
.type-csharp .highlight .s { color: #A31515 }
|
||||
.type-csharp .highlight .sc { color: #A31515 }
|
||||
@@ -0,0 +1,423 @@
|
||||
/*******************************************************************************
|
||||
Slate Theme for GitHub Pages
|
||||
by Jason Costello, @jsncostello
|
||||
*******************************************************************************/
|
||||
|
||||
@import url(pygment_trac.css);
|
||||
|
||||
/*******************************************************************************
|
||||
MeyerWeb Reset
|
||||
*******************************************************************************/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
Theme Styles
|
||||
*******************************************************************************/
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
color:#373737;
|
||||
background: #212121;
|
||||
font-size: 16px;
|
||||
font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 10px 0;
|
||||
font-weight: 700;
|
||||
color:#222222;
|
||||
font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-bottom: 10px;
|
||||
font-size: 32px;
|
||||
background: url('../images/bg_hr.png') repeat-x bottom;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0 15px 0;
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #007edf;
|
||||
text-shadow: none;
|
||||
|
||||
transition: color 0.5s ease;
|
||||
transition: text-shadow 0.5s ease;
|
||||
-webkit-transition: color 0.5s ease;
|
||||
-webkit-transition: text-shadow 0.5s ease;
|
||||
-moz-transition: color 0.5s ease;
|
||||
-moz-transition: text-shadow 0.5s ease;
|
||||
-o-transition: color 0.5s ease;
|
||||
-o-transition: text-shadow 0.5s ease;
|
||||
-ms-transition: color 0.5s ease;
|
||||
-ms-transition: text-shadow 0.5s ease;
|
||||
}
|
||||
|
||||
a:hover, a:focus {text-decoration: underline;}
|
||||
|
||||
footer a {
|
||||
color: #F2F2F2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: 739px;
|
||||
padding: 5px;
|
||||
margin: 10px 0 10px 0;
|
||||
border: 1px solid #ebebeb;
|
||||
|
||||
box-shadow: 0 0 5px #ebebeb;
|
||||
-webkit-box-shadow: 0 0 5px #ebebeb;
|
||||
-moz-box-shadow: 0 0 5px #ebebeb;
|
||||
-o-box-shadow: 0 0 5px #ebebeb;
|
||||
-ms-box-shadow: 0 0 5px #ebebeb;
|
||||
}
|
||||
|
||||
p img {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
width: 100%;
|
||||
color: #222;
|
||||
background-color: #fff;
|
||||
|
||||
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
|
||||
font-size: 14px;
|
||||
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
}
|
||||
|
||||
pre {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 3px;
|
||||
margin: 0 3px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 0 0 20px;
|
||||
border-left: 3px solid #bbb;
|
||||
}
|
||||
|
||||
|
||||
ul, ol, dl {
|
||||
margin-bottom: 15px
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: inside;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal inside;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
padding-left: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
dl p {
|
||||
padding-left: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
margin-bottom: 5px;
|
||||
border: none;
|
||||
background: url('../images/bg_hr.png') repeat-x center;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #373737;
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
padding: 10px;
|
||||
background: #373737;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
border: 1px solid #373737;
|
||||
}
|
||||
|
||||
form {
|
||||
background: #f2f2f2;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
Full-Width Styles
|
||||
*******************************************************************************/
|
||||
|
||||
.outer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: relative;
|
||||
max-width: 640px;
|
||||
padding: 20px 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#forkme_banner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top:0;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
padding: 10px 50px 10px 10px;
|
||||
color: #fff;
|
||||
background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.5);
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
#header_wrap {
|
||||
background: #212121;
|
||||
background: -moz-linear-gradient(top, #373737, #212121);
|
||||
background: -webkit-linear-gradient(top, #373737, #212121);
|
||||
background: -ms-linear-gradient(top, #373737, #212121);
|
||||
background: -o-linear-gradient(top, #373737, #212121);
|
||||
background: linear-gradient(top, #373737, #212121);
|
||||
}
|
||||
|
||||
#header_wrap .inner {
|
||||
padding: 50px 10px 30px 10px;
|
||||
}
|
||||
|
||||
#project_title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
text-shadow: #111 0px 0px 10px;
|
||||
}
|
||||
|
||||
#project_tagline {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
background: none;
|
||||
text-shadow: #111 0px 0px 10px;
|
||||
}
|
||||
|
||||
#downloads {
|
||||
position: absolute;
|
||||
width: 210px;
|
||||
z-index: 10;
|
||||
bottom: -40px;
|
||||
right: 0;
|
||||
height: 70px;
|
||||
background: url('../images/icon_download.png') no-repeat 0% 90%;
|
||||
}
|
||||
|
||||
.zip_download_link {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 90px;
|
||||
height:70px;
|
||||
text-indent: -5000px;
|
||||
overflow: hidden;
|
||||
background: url(../images/sprite_download.png) no-repeat bottom left;
|
||||
}
|
||||
|
||||
.tar_download_link {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 90px;
|
||||
height:70px;
|
||||
text-indent: -5000px;
|
||||
overflow: hidden;
|
||||
background: url(../images/sprite_download.png) no-repeat bottom right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.zip_download_link:hover {
|
||||
background: url(../images/sprite_download.png) no-repeat top left;
|
||||
}
|
||||
|
||||
.tar_download_link:hover {
|
||||
background: url(../images/sprite_download.png) no-repeat top right;
|
||||
}
|
||||
|
||||
#main_content_wrap {
|
||||
background: #f2f2f2;
|
||||
border-top: 1px solid #111;
|
||||
border-bottom: 1px solid #111;
|
||||
}
|
||||
|
||||
#main_content {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#footer_wrap {
|
||||
background: #212121;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
Small Device Styles
|
||||
*******************************************************************************/
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
body {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
#downloads {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inner {
|
||||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
#project_title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user