mirror of
https://github.com/andre-wojtowicz/image-processing-project-student.git
synced 2024-11-22 14:30:27 +01:00
Create gh-pages branch via GitHub
This commit is contained in:
Andrzej Wójtowicz
parent
1b42107cce
commit
a5a49bdaa7
BIN
images/bg_hr.png
Normal file
BIN
images/bg_hr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 B |
BIN
images/blacktocat.png
Normal file
BIN
images/blacktocat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 463 B |
BIN
images/icon_download.png
Normal file
BIN
images/icon_download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 B |
BIN
images/sprite_download.png
Normal file
BIN
images/sprite_download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
282
index.html
282
index.html
@ -1,48 +1,260 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Image-processing-project-student by andre-wojtowicz</title>
|
||||
<link rel="stylesheet" href="stylesheets/styles.css">
|
||||
<link rel="stylesheet" href="stylesheets/github-dark.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<script src="javascripts/respond.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<!--[if lt IE 8]>
|
||||
<link rel="stylesheet" href="stylesheets/ie.css">
|
||||
<![endif]-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="description" content="Mini-GIMP template project for Image processing course : ">
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
|
||||
|
||||
<title>Mini-GIMP template project for Image processing course</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
<nav>
|
||||
<li class="fork"><a href="https://github.com/andre-wojtowicz/image-processing-project-student">View On GitHub</a></li>
|
||||
<li class="downloads"><a href="https://github.com/andre-wojtowicz/image-processing-project-student/zipball/master">ZIP</a></li>
|
||||
<li class="downloads"><a href="https://github.com/andre-wojtowicz/image-processing-project-student/tarball/master">TAR</a></li>
|
||||
<li class="title">DOWNLOADS</li>
|
||||
</nav>
|
||||
</div><!-- end header -->
|
||||
|
||||
<div class="wrapper">
|
||||
<!-- HEADER -->
|
||||
<div id="header_wrap" class="outer">
|
||||
<header class="inner">
|
||||
<a id="forkme_banner" href="https://github.com/andre-wojtowicz/image-processing-project-student">View on GitHub</a>
|
||||
|
||||
<section>
|
||||
<div id="title">
|
||||
<h1>Image-processing-project-student</h1>
|
||||
<p>Mini GIMP</p>
|
||||
<hr>
|
||||
<span class="credits left">Project maintained by <a href="https://github.com/andre-wojtowicz">andre-wojtowicz</a></span>
|
||||
<span class="credits right">Hosted on GitHub Pages — Theme by <a href="https://twitter.com/michigangraham">mattgraham</a></span>
|
||||
</div>
|
||||
|
||||
<p>temp</p>
|
||||
</section>
|
||||
<h1 id="project_title">Mini-GIMP template project for Image processing course</h1>
|
||||
<h2 id="project_tagline"></h2>
|
||||
|
||||
<section id="downloads">
|
||||
<a class="zip_download_link" href="https://github.com/andre-wojtowicz/image-processing-project-student/zipball/master">Download this project as a .zip file</a>
|
||||
<a class="tar_download_link" href="https://github.com/andre-wojtowicz/image-processing-project-student/tarball/master">Download this project as a tar.gz file</a>
|
||||
</section>
|
||||
</header>
|
||||
</div>
|
||||
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<div id="main_content_wrap" class="outer">
|
||||
<section id="main_content" class="inner">
|
||||
<p>This program is a student template of a project for <strong>Image processing</strong> course. During 15 laboratories the students have to program a mini-GIMP application.</p>
|
||||
|
||||
<p>The code is written in C++ which uses <a href="https://www.qt.io">Qt</a> library; tested 5.1.1 version, should compile and run on Windows (MinGW or MSVC), Linux and MacOS. The code may be completed in Qt Creator or Visual Studio. The program works with all <a href="http://en.wikipedia.org/wiki/Portable_anymap">Netpbm</a> files as well as JPEG, PNG, etc.</p>
|
||||
|
||||
<p>The program has the following image processing procedures to be completed:</p>
|
||||
|
||||
<ol>
|
||||
<li>negative (already done as an example),</li>
|
||||
<li>grayscale conversion,</li>
|
||||
<li>correction (brightness, contrast and gamma),</li>
|
||||
<li>histogram (construction, stretching and equalizing),</li>
|
||||
<li>convolution (with custom filter),</li>
|
||||
<li>blurring (uniform and Gaussian),</li>
|
||||
<li>binarization (manual, gradient, iterative bimodal, Otsu and Niblack),</li>
|
||||
<li>noise reduction (median and bilateral),</li>
|
||||
<li>morphology (structural elements, dilation, erosion, opening and closing),</li>
|
||||
<li>edge detection (Roberts, Prewitt, Sobel, Laplacian with zero-crossing and Canny),</li>
|
||||
<li>procedural textures (height map, normal mapping, horizon mapping and Perlin noise),</li>
|
||||
<li>lines and rectangles detection (Hough),</li>
|
||||
<li>corners detection (Harris),</li>
|
||||
<li>segmentation (watershed).</li>
|
||||
</ol>
|
||||
|
||||
<p><strong>The completed version of the project is stored on the different private repository</strong>. It is stored for lecturer's as a helpfull tool to assess students' solutions. If you need it, please send me an e-mail.</p>
|
||||
|
||||
<h1>
|
||||
<a id="screenshots" class="anchor" href="#screenshots" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Screenshots</h1>
|
||||
|
||||
<p>The following screenshots regards to completed version of the program:</p>
|
||||
|
||||
<p><img src="screen1.png" alt=""></p>
|
||||
|
||||
<p><img src="screen2.png" alt=""></p>
|
||||
|
||||
<p><img src="screen3.png" alt=""></p>
|
||||
|
||||
<h1>
|
||||
<a id="documentation" class="anchor" href="#documentation" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Documentation</h1>
|
||||
|
||||
<p>The project consists of 3 folders:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>images</strong> - contains images saved in <code>pnm</code> format,</li>
|
||||
<li>
|
||||
<strong>res</strong> - here are icons for the program,</li>
|
||||
<li>
|
||||
<strong>src</strong> - main sources.</li>
|
||||
</ul>
|
||||
|
||||
<p>In sources you can find two modules:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>core</strong> - files concering loading and saving images and transofmations,</li>
|
||||
<li>
|
||||
<strong>gui</strong> - everything related to a graphic user interface.</li>
|
||||
</ul>
|
||||
|
||||
<p>Writing solutions means completing the <code>.cpp</code> files in a directory <code>src/core/transformations/</code> and a file <code>src/core/histogram.cpp</code>. </p>
|
||||
|
||||
<p>A hint that something needs to be implement is:</p>
|
||||
|
||||
<div class="highlight highlight-source-c++"><pre><span class="pl-en">qDebug</span>() << Q_FUNC_INFO << "Not implemented yet!";</pre></div>
|
||||
|
||||
<h2>
|
||||
<a id="debugging" class="anchor" href="#debugging" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Debugging</h2>
|
||||
|
||||
<p>If you like debugging by printing values of variables you just need to use <code>qDebug()</code> in the following way:</p>
|
||||
|
||||
<div class="highlight highlight-source-c++"><pre><span class="pl-en">qDebug</span>() << "width =" << image->width();</pre></div>
|
||||
|
||||
<h2>
|
||||
<a id="pnm-class" class="anchor" href="#pnm-class" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>PNM class</h2>
|
||||
|
||||
<p>Main class to handle an image is <strong>PNM</strong> which inherits <a href="http://qt-project.org/doc/qt-5.1/qtgui/qimage.html">QImage</a>. Main methods are:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>pixel(...)</strong> - getting a value of a given pixel of an image,</li>
|
||||
<li>
|
||||
<strong>setPixel(...)</strong> - saving in the image given value of a pixel,</li>
|
||||
<li>
|
||||
<strong>format()</strong> - getting a format of the image.</li>
|
||||
</ul>
|
||||
|
||||
<p>We are interested only in three formats of images:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>QImage::Format_Mono</strong> - black and white,</li>
|
||||
<li>
|
||||
<strong>QImage::Format_Indexed8</strong> - grayscale,</li>
|
||||
<li>
|
||||
<strong>QImage::Format_RGB32</strong> - 3-channels color.</li>
|
||||
</ul>
|
||||
|
||||
<p>To get a value of a pixel from a desired channel some functions from <a href="http://qt-project.org/doc/qt-5.1/qtgui/qcolor.html">QColor</a> will be helpful:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>qRed(...)</strong>,</li>
|
||||
<li>
|
||||
<strong>qGreen(...)</strong>,</li>
|
||||
<li>
|
||||
<strong>qBlue(...)</strong>,</li>
|
||||
<li>
|
||||
<strong>qGray(...)</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<p>An example is in <code>src/core/transformations/negative_image.cpp</code></p>
|
||||
|
||||
<h2>
|
||||
<a id="automatic-loading-of-an-image" class="anchor" href="#automatic-loading-of-an-image" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Automatic loading of an image</h2>
|
||||
|
||||
<p>If you setup a working directory on a folder <code>images</code> then when you run the program you should see on the screen <code>lenna_512x512.pnm</code>.</p>
|
||||
|
||||
<p>More information you will find at the top of <code>src/gui/mainwindow.h</code>.</p>
|
||||
|
||||
<p>During compilation you might find useful automatic launching of a transformation.</p>
|
||||
|
||||
<h2>
|
||||
<a id="signals" class="anchor" href="#signals" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Signals</h2>
|
||||
|
||||
<p>Some of next transformations may perform a bit longer so it will be OK to display some auxiliary messages. You may achieve it by so-called signals:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>message(QString)</strong>,</li>
|
||||
<li>
|
||||
<strong>progress(int)</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<p>Example:</p>
|
||||
|
||||
<div class="highlight highlight-source-c++"><pre>emit <span class="pl-en">message</span>(<span class="pl-s"><span class="pl-pds">"</span>Edge detection...<span class="pl-pds">"</span></span>);</pre></div>
|
||||
|
||||
<p>or</p>
|
||||
|
||||
<div class="highlight highlight-source-c++"><pre>emit <span class="pl-en">progress</span>(<span class="pl-c1">100</span>*x/<span class="pl-k">double</span>(image-><span class="pl-en">width</span>()));</pre></div>
|
||||
|
||||
<h2>
|
||||
<a id="mixing-transformations" class="anchor" href="#mixing-transformations" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Mixing transformations</h2>
|
||||
|
||||
<p>Some of transformations need using others. In transformations you must use <code>transform()</code> method, i.e.:</p>
|
||||
|
||||
<div class="highlight highlight-source-c++"><pre>PNM* grayImage = ConversionGrayscale(image).transform();</pre></div>
|
||||
|
||||
<p>Most of the transformations use parameters (constants, sigmas, regions etc.). It's done by methods:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>setParameter(...)</strong>,</li>
|
||||
<li>
|
||||
<strong>getParameter(...)</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<p>An exemplar use is in a file <code>src/core/tools.cpp</code> or <code>src/core/transformations/edge_canny.cpp</code></p>
|
||||
|
||||
<p>In order to display messages or progress of used transformation you must put in its construction an instance of <code>ImageViewer</code>, i.e.:</p>
|
||||
|
||||
<div class="highlight highlight-source-c++"><pre>emit <span class="pl-en">message</span>(<span class="pl-s"><span class="pl-pds">"</span>Blurring...<span class="pl-pds">"</span></span>);
|
||||
|
||||
BlurGaussian <span class="pl-en">blurTrans</span>(grayImage, getSupervisor());
|
||||
blurTrans.setParameter(<span class="pl-s"><span class="pl-pds">"</span>size<span class="pl-pds">"</span></span>, <span class="pl-c1">3</span>);
|
||||
blurTrans.setParameter(<span class="pl-s"><span class="pl-pds">"</span>sigma<span class="pl-pds">"</span></span>, <span class="pl-c1">1.6</span>);
|
||||
|
||||
PNM* blurredImage = blurTrans.transform();</pre></div>
|
||||
|
||||
<p>Please remember to delete redundant variables before you return a result, i.e.:</p>
|
||||
|
||||
<div class="highlight highlight-source-c++"><pre><span class="pl-k">delete</span> grayImage;
|
||||
|
||||
<span class="pl-k">return</span> newImage;</pre></div>
|
||||
|
||||
<h2>
|
||||
<a id="possible-performance-increase" class="anchor" href="#possible-performance-increase" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Possible performance increase</h2>
|
||||
|
||||
<ul>
|
||||
<li>resign from <code>src/core/matrix.h</code> and work directly on arrays,</li>
|
||||
<li>avoid <code>QImage::pixel(...)</code> and <code>QImage::setPixel(...)</code> and work directly on arrays given by <code>QImage::bits()</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>
|
||||
<a id="programming-in-visual-studio-2012-with-image-watch-extenstion" class="anchor" href="#programming-in-visual-studio-2012-with-image-watch-extenstion" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Programming in Visual Studio 2012 with Image Watch extenstion</h1>
|
||||
|
||||
<p>There is <a href="https://download.qt.io/official_releases/vsaddin/">Visual Studio Add-in</a> for Qt5 so you don't have to use Qt Creator and what's more, debugging is far easier and faster.</p>
|
||||
|
||||
<p>Microsoft released <a href="https://visualstudiogallery.msdn.microsoft.com/e682d542-7ef3-402c-b857-bbfba714f78d">Image Watch</a> extension which allows to display an image during debugging.</p>
|
||||
|
||||
<ol>
|
||||
<li>import the project (<code>QT5 > Open Qt Project File (.pro)...</code>),</li>
|
||||
<li>open <code>pnm.h</code> file and uncomment lines 11-13,</li>
|
||||
<li>add to your project a path to a directory with private Qt headers (in <em>Solution Explorer</em> <code>Properties > Configuration Properties > C/C++ > General > Additional Include Directories</code>):
|
||||
|
||||
<ul>
|
||||
<li>this can be for example <code>C:\software\qt\5.1.1\msvc2012\include\QtGui\5.1.1</code>. </li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>to your directory <code>Documents\Visual Studio 2012\Visualizers</code> copy <code>src\core\pnm.natvis</code>,</li>
|
||||
<li>install <strong>Image Watch</strong> extension (<code>Tools > Extensions and Updates...</code> and in <em>Online</em> search <em>Image Watch</em>).</li>
|
||||
</ol>
|
||||
|
||||
<p>Effects you can check on the negative operation. During debugging you have to display <em>Image Watch</em> window (<code>View > Other Windows > Image Watch</code>) and when the debugger reaches breakpoints you can watch any PNM-type variable (with the exception of binary images! but you can handle this by conversion to a grayscale). When you click on a variable you must also tick <em>4-Channel Ignore Alpha</em>.</p>
|
||||
|
||||
<p><img src="image-watch.png" alt="Image Watch example"></p>
|
||||
|
||||
<h1>
|
||||
<a id="credits" class="anchor" href="#credits" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Credits</h1>
|
||||
|
||||
<p>Co-author of the project is <a href="http://quati.pl">Krzysztof Szarzyński</a>. </p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<div id="footer_wrap" class="outer">
|
||||
<footer class="inner">
|
||||
<p class="copyright">Mini-GIMP template project for Image processing course maintained by <a href="https://github.com/andre-wojtowicz">andre-wojtowicz</a></p>
|
||||
<p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
javascripts/main.js
Normal file
1
javascripts/main.js
Normal file
@ -0,0 +1 @@
|
||||
console.log('This would be the main JS file.');
|
||||
File diff suppressed because one or more lines are too long
116
stylesheets/github-light.css
Normal file
116
stylesheets/github-light.css
Normal file
@ -0,0 +1,116 @@
|
||||
/*
|
||||
Copyright 2014 GitHub Inc.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
*/
|
||||
|
||||
.pl-c /* comment */ {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.pl-c1 /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */,
|
||||
.pl-s .pl-v /* string variable */ {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.pl-e /* entity */,
|
||||
.pl-en /* entity.name */ {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.pl-s .pl-s1 /* string source */,
|
||||
.pl-smi /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pl-ent /* entity.name.tag */ {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.pl-k /* keyword, storage, storage.type */ {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.pl-pds /* punctuation.definition.string, string.regexp.character-class */,
|
||||
.pl-s /* string */,
|
||||
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
|
||||
.pl-sr /* string.regexp */,
|
||||
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
|
||||
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */,
|
||||
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */ {
|
||||
color: #183691;
|
||||
}
|
||||
|
||||
.pl-v /* variable */ {
|
||||
color: #ed6a43;
|
||||
}
|
||||
|
||||
.pl-id /* invalid.deprecated */ {
|
||||
color: #b52a1d;
|
||||
}
|
||||
|
||||
.pl-ii /* invalid.illegal */ {
|
||||
background-color: #b52a1d;
|
||||
color: #f8f8f8;
|
||||
}
|
||||
|
||||
.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
|
||||
color: #63a35c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pl-ml /* markup.list */ {
|
||||
color: #693a17;
|
||||
}
|
||||
|
||||
.pl-mh /* markup.heading */,
|
||||
.pl-mh .pl-en /* markup.heading entity.name */,
|
||||
.pl-ms /* meta.separator */ {
|
||||
color: #1d3e81;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pl-mq /* markup.quote */ {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.pl-mi /* markup.italic */ {
|
||||
color: #333;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.pl-mb /* markup.bold */ {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pl-md /* markup.deleted, meta.diff.header.from-file */ {
|
||||
background-color: #ffecec;
|
||||
color: #bd2c00;
|
||||
}
|
||||
|
||||
.pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
|
||||
background-color: #eaffea;
|
||||
color: #55a532;
|
||||
}
|
||||
|
||||
.pl-mdr /* meta.diff.range */ {
|
||||
color: #795da3;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pl-mo /* meta.output */ {
|
||||
color: #1d3e81;
|
||||
}
|
||||
|
||||
425
stylesheets/stylesheet.css
Normal file
425
stylesheets/stylesheet.css
Normal file
@ -0,0 +1,425 @@
|
||||
/*******************************************************************************
|
||||
Slate Theme for GitHub Pages
|
||||
by Jason Costello, @jsncostello
|
||||
*******************************************************************************/
|
||||
|
||||
@import url(github-light.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-position: inside;
|
||||
list-style: disc;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-position: inside;
|
||||
list-style: decimal;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user