Commit eda28443 authored by Henrik Tramberend's avatar Henrik Tramberend
Browse files

Merge branch 'scss-modifications' into 'master'

1. Move stylesheets from deck.html to decker.scss (solves issue #38); 2. Give…

See merge request decker/decker!9
parents 7156ba51 d6707ae7
......@@ -30,6 +30,12 @@ $base-spacer: 1em;
@return $multiplied
}
@mixin prefix($property, $parameters...) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
#{$prefix}#{$property}: $parameters;
}
}
/////////////////////////////////////////////
// Styles
/////////////////////////////////////////////
......@@ -60,6 +66,16 @@ body {
margin: space(1 0);
}
/////////////////////////////////////////////
// Text align
/////////////////////////////////////////////
@each $position in center, right {
&[data-align="#{$position}"] > h1,
div[data-align="#{$position}"] {
text-align: $position;
}
}
/////////////////////////////////////////////
// Headers
/////////////////////////////////////////////
......@@ -96,7 +112,7 @@ body {
margin-bottom: space(0.1);
}
&.has-dark-background,
&.has-dark-background,
&.inverse {
h1,
h2,
......@@ -170,6 +186,15 @@ body {
q {
font-style: italic;
quotes: "“" "”" "‘" "’";
}
.smallcaps {
font-variant: small-caps;
}
.line-block {
white-space: pre-line;
}
/////////////////////////////////////////////
......@@ -214,14 +239,10 @@ body {
a {
color: #009;
text-decoration: none;
-webkit-transition: color 0.15s ease;
-moz-transition: color 0.15s ease;
transition: color 0.15s ease;
@include prefix(transition, color 0.15s ease);
img {
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
@include prefix(transition, color 0.15s linear);
}
&:hover {
......@@ -258,13 +279,19 @@ body {
/////////////////////////////////////////////
// Column settings
/////////////////////////////////////////////
&.column {
display: inline-block;
vertical-align: top;
width: 50%;
}
// For `{.split}`-Syntax
&.css-columns {
column-count: 2;
column-gap: 2em;
column-gap: space(2);
column-rule-style: none;
padding-left: 0.7em;
margin-left: -0.7em;
padding-left: space(0.7);
margin-left: space(-0.7);
}
&.box {
......@@ -303,7 +330,7 @@ body {
}
@for $i from 1 through 9 {
&[grow="#{$i}"] {
&[data-grow="#{$i}"] {
flex-grow: $i;
}
}
......@@ -400,54 +427,6 @@ body {
}
}
/////////////////////////////////////////////
// Column settings
/////////////////////////////////////////////
&.css-columns {
column-count: 2;
column-gap: 2em;
column-rule-style: none;
padding-left: 0.7em;
margin-left: -0.7em;
}
&.box {
break-inside: avoid-column;
}
&.multi-column-row {
display:flex;
flex-flow: row nowrap;
$margin-size: 1em;
div.column {
flex: 1 1 0%;
margin-left: $margin-size;
margin-right: $margin-size;
&:first-child {
margin-left: 0em;
margin-right: $margin-size;
}
&:last-child {
margin-left: $margin-size;
margin-right: 0em;
}
}
div.column[data-grow="1"] {flex-grow:1;}
div.column[data-grow="2"] {flex-grow:2;}
div.column[data-grow="3"] {flex-grow:3;}
div.column[data-grow="4"] {flex-grow:4;}
div.column[data-grow="5"] {flex-grow:5;}
div.column[data-grow="6"] {flex-grow:6;}
div.column[data-grow="7"] {flex-grow:7;}
div.column[data-grow="8"] {flex-grow:8;}
div.column[data-grow="9"] {flex-grow:9;}
}
/////////////////////////////////////////////
// Video
/////////////////////////////////////////////
......@@ -531,6 +510,7 @@ body {
padding: space(0.4 0.7);
background: rgba(0, 0, 0, 0.03);
border-radius: 0.25em;
overflow: auto;
pre {
display: block;
......@@ -543,6 +523,35 @@ body {
font-size: 90%;
margin: 0;
&.numberSource {
margin-left: 3em;
border-left: 1px solid #aaaaaa;
padding-left: 4px;
a.sourceLine{
position: relative;
&:empty {
position: absolute;
}
&::before {
content: attr(data-line-number);
position: absolute;
left: space(-5);
text-align: right;
vertical-align: baseline;
border: none;
pointer-events: all;
@include prefix(user-select, none);
-webkit-touch-callout: none;
padding: 0 4px;
width: space(4);
color: #aaaaaa;
}
}
}
code {
display: block;
overflow: auto;
......@@ -550,6 +559,116 @@ body {
word-wrap: normal;
border: none;
font-family: 'Source Code Pro', monospace;
white-space: pre; // pre-wrap generates line breaks
position: relative;
a.sourceLine {
display: inline-block;
line-height: 1.25;
pointer-events: none;
color: inherit;
text-decoration: inherit;
&:empty {
height: 1.2em;
position: absolute;
}
&::before {
text-decoration: underline;
}
span {
&.al { // Alert
color: #ff0000;
font-weight: bold;
}
&.an, // Annotation
&.cv, // CommentVar
&.wa, // Warning
&.in { // Information
color: #60a0b0;
font-weight: bold;
font-style: italic;
}
&.at { // Attribute
color: #7d9029;
}
&.fl, // Float
&.dv, // DecVal
&.bn { // BaseN
color: #40a070;
}
&.bu, // BuiltIn
&.ex, // Extension
&.im { // Import
}
&.cf, // ControlFlow
&.kw { // Keyword
color: #007020;
font-weight: bold;
}
&.ch, // Char
&.sc, // SpecialChar
&.st, // String
&.vs { // VerbatimString
color: #4070a0;
}
&.cn { // Constant
color: #880000;
}
&.co { // Comment
color: #60a0b0;
font-style: italic;
}
&.do { // Documentation
color: #ba2121;
font-style: italic;
}
&.dt { // DataType
color: #902000;
}
&.er { // Error
color: #ff0000;
font-weight: bold;
}
&.fu { // Function
color: #06287e;
}
&.op { // Operator
color: #666666;
}
&.ot { // Other
color: #007020;
}
&.pp { // Preprocessor
color: #bc7a00;
}
&.ss { // SpecialString
color: #bb6688;
}
&.va { // Variable
color: #19177c;
}
}
}
}
}
}
......@@ -707,9 +826,7 @@ body {
span {
background: #777;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
@include prefix(transition, width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985));
}
}
......@@ -837,10 +954,79 @@ body {
// Print modifications
/////////////////////////////////////////////
@media print {
$base-font-size: 12pt;
$medium-font-size: 1 * $base-font-size;
$xx-small-font-size: 0.4 * $base-font-size;
$x-small-font-size: 0.6 * $base-font-size;
$small-font-size: 0.8 * $base-font-size;
$large-font-size: 1.2 * $base-font-size;
$x-large-font-size: 1.4 * $base-font-size;
$xx-large-font-size: 1.6 * $base-font-size;
body {
.reveal {
.slides {
transform: none !important;
font-family: 'Roboto', sans-serif !important;
font-size: $medium-font-size !important;
section {
p,
td,
li,
div {
font-family: inherit !important;
font-size: inherit !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit !important;
font-size: inherit !important;
color: rgba(0, 0, 0, 0.87);
letter-spacing: normal;
text-transform: none;
text-shadow: none;
word-wrap: break-word;
font-weight: normal;
}
h1 {
font-size: $xx-large-font-size !important;
margin: space(0 0 0.5 0);
}
h2 {
font-weight: 500;
font-size: $large-font-size !important;
margin-bottom: space(0.1);
color: rgb(100, 100, 100) !important;
}
a {
&:link,
&:visited {
font-weight: normal;
}
}
div.sourceCode {
pre {
code {
white-space: pre-wrap;
a.sourceLine {
text-indent: space(-1); padding-left: space(1);
}
}
}
}
}
}
}
......@@ -848,4 +1034,4 @@ body {
content: " (" attr(href) ") ";
}
}
}
}
\ No newline at end of file
......@@ -3,44 +3,33 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="pandoc">
$for(author-meta)$
<meta name="author" content="$author-meta$">
$endfor$
$if(date-meta)$
<meta name="dcterms.date" content="$date-meta$">
$endif$
$if(keywords)$
<meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$">
$endif$
<title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="$revealjs-url$/css/reveal.css">
<style type="text/css">
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.line-block{white-space: pre-line;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
$if(quotes)$
q { quotes: "“" "”" "‘" "’"; }
$endif$
</style>
$if(highlighting-css)$
<style type="text/css">
$highlighting-css$
</style>
$endif$
<!-- Reveal.js theme with white as default -->
$if(theme)$
<link rel="stylesheet" href="$revealjs-url$/css/theme/$theme$.css" id="theme">
$else$
<link rel="stylesheet" href="$revealjs-url$/css/theme/white.css" id="theme">
$endif$
<link rel="stylesheet" href="$decker-support-dir$/decker.css">
$for(css)$
<link rel="stylesheet" href="$css$"/>
$endfor$
<!-- Printing and PDF exports -->
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
......@@ -48,26 +37,55 @@ $endfor$
link.href = window.location.search.match( /print-pdf/gi ) ? '$revealjs-url$/css/print/pdf.css' : '$revealjs-url$/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="$revealjs-url$/lib/js/html5shiv.js"></script>
<script src="$revealjs-url$/lib/js/html5shiv.js"></script>
<![endif]-->
$if(math)$
$math$
$endif$
<script>
var socket = new WebSocket("ws://" + location.host + "/reload");
socket.onmessage = function () {
window.location.reload(true);
};
</script>
<style type="text/css">
$if(quotes)$
q { quotes: "“" "”" "‘" "’"; }
$endif$
</style>
$if(highlighting-css)$
<!-- Pandoc uses this for syntax highlighting -->
<style type="text/css">
$highlighting-css$
</style>
$endif$
<!-- Reload on change machinery -->
<script>
var socket = new WebSocket("ws://" + location.host + "/reload");
socket.onmessage = function () {
window.location.reload(true);
};
</script>
<!-- Decker's standard default CSS -->
<link rel="stylesheet" href="$decker-support-dir$/decker.css">
<!-- The last word on CSS for the power user -->
$for(css)$
<link rel="stylesheet" href="$css$"/>
$endfor$
$for(header-includes)$
$header-includes$
$endfor$
</head>
<body>
$for(include-before)$
$include-before$
$endfor$
<div class="reveal">
<div class="slides">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment