tracend/impress.css

## readme.md

      
    Raw
  

              readme.md
            
          
    This is a simple guide after trying to move one of my presentations from google docs to github, using impress.js for the presentation.
I tried to keep the modifications to a minimal so the process will be easily repeated.
Still work in progress and admittedly hit and miss at some cases...
Steps


Start the presentation (in Chrome)
Save the complete page with image assets
Add the impress.js library in the same folder
Copy the div with id=":0" to the preso template (attached)
Save the preso template in the same folder
Change the id from ":0" to "impress"
String search for containers with the class "slide" and preform the following actions:
a) Add a "step" class
b) Remove all inline styles (only on the slide container)

Example

Before: https://docs.google.com/present/view?id=dnkhtrs_89d6qc8kf4
After: http://code.kdi.co/talks/2012/html5devconf/
Notes


Ideally we can setup a slide class so we won't need step #7a
Sliding transitions would be nice to have
Need to find generic solutions for tweaking the formatting


## impress.css
/*
    ... and we enhance the styles for impress.js.
*/
    .step {
    position: relative;
    width: 900px;
    padding: 40px;
    margin: 20px auto;

    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    -ms-box-sizing:     border-box;
    -o-box-sizing:      border-box;
    box-sizing:         border-box;

    font-family: 'PT Serif', georgia, serif;
    font-size: 48px;
    line-height: 1.5;
}

/*
    Basically we remove the margin and make inactive steps a little bit transparent.
*/
.impress-enabled .step {
	display: none;

    margin: 0;
    opacity: 0.3;

    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}

.impress-enabled .step.active {
	display: block;
	opacity: 1;
	/* this is necessary in a stack of slides */
	z-index: 9999;
}

/*
    These 'slide' step styles were heavily inspired by HTML5 Slides:
    http://html5slides.googlecode.com/svn/trunk/styles.css

    ;)

    They cover everything what you see on first three steps of the demo.
*/
.slide {
    display: block;
	overflow: hidden;

    width: 900px;
    height: 700px;
    padding: 40px 60px;

    background-color: white;
    border: 1px solid rgba(0, 0, 0, .3);
    /*border-radius: 10px;*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);

    color: rgb(102, 102, 102);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);

    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -1px;
}

.slide q {
    display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 100px;
}

.slide q strong {
    white-space: nowrap;
}


/* Google Presentation specific styles */
.placeholder.background{
	position: absolute;
	z-index: -1;
	background: #fff;
}

## preso.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>{{PRESENTATION_TITLE}}</title>

<link href="impress.css" rel="stylesheet" />

<head>
<body>


<!-- place container with id=":0" here -->

<script src="impress.js"></script>
<script>impress().init();</script>

</body>
</html>
	/*
	... and we enhance the styles for impress.js.
	*/
	.step {
	position: relative;
	width: 900px;
	padding: 40px;
	margin: 20px auto;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;

	font-family: 'PT Serif', georgia, serif;
	font-size: 48px;
	line-height: 1.5;
	}

	/*
	Basically we remove the margin and make inactive steps a little bit transparent.
	*/
	.impress-enabled .step {
	display: none;

	margin: 0;
	opacity: 0.3;

	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-ms-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
	}

	.impress-enabled .step.active {
	display: block;
	opacity: 1;
	/* this is necessary in a stack of slides */
	z-index: 9999;
	}

	/*
	These 'slide' step styles were heavily inspired by HTML5 Slides:
	http://html5slides.googlecode.com/svn/trunk/styles.css

	;)

	They cover everything what you see on first three steps of the demo.
	*/
	.slide {
	display: block;
	overflow: hidden;

	width: 900px;
	height: 700px;
	padding: 40px 60px;

	background-color: white;
	border: 1px solid rgba(0, 0, 0, .3);
	/border-radius: 10px;/
	box-shadow: 0 2px 6px rgba(0, 0, 0, .1);

	color: rgb(102, 102, 102);
	text-shadow: 0 2px 2px rgba(0, 0, 0, .1);

	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 30px;
	line-height: 36px;
	letter-spacing: -1px;
	}

	.slide q {
	display: block;
	font-size: 50px;
	line-height: 72px;

	margin-top: 100px;
	}

	.slide q strong {
	white-space: nowrap;
	}


	/* Google Presentation specific styles */
	.placeholder.background{
	position: absolute;
	z-index: -1;
	background: #fff;
	}
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>{{PRESENTATION_TITLE}}</title>

	<link href="impress.css" rel="stylesheet" />

	<head>
	<body>


	<!-- place container with id=":0" here -->

	<script src="impress.js"></script>
	<script>impress().init();</script>

	</body>
	</html>