From 6eed205e2c30c973f9e6e873003227bbeb2bf2a3 Mon Sep 17 00:00:00 2001
From: Raniere Silva <raniere@ime.unicamp.br>
Date: Mon, 17 Feb 2014 22:57:50 -0300
Subject: [PATCH] CSS arrow to mark input and output
**Note**: This is a prototype.
Instead of "In" and "Out" use arrow to mark the input and output
of IPython lessons.
To construct the arrows we only use CSS.
---
lesson.css | 31 ++++++++++++++++++++++++++++++-
swc.css | 27 ---------------------------
2 files changed, 30 insertions(+), 28 deletions(-)
diff --git a/lesson.css b/lesson.css
index 12ba83a..b97b17a 100644
--- a/lesson.css
+++ b/lesson.css
@@ -11,12 +11,41 @@
/* Manual input. */
.in {
color: darkgreen;
+ margin-left: 20px;
+}
+
+div.in:before {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border-top: 12px solid transparent;
+ border-bottom: 12px solid transparent;
+ border-left: 12px solid #727272;
+ position: relative;
+ left:-16px;
+ top:10px;
+ float:left;
}
/* Program output. */
.out {
color: darkblue;
- font-style: italic;
+ margin-left: 20px;
+}
+
+div.out:before {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border-top: 12px solid transparent;
+ border-bottom: 12px solid transparent;
+ border-right: 12px solid #727272;
+ position: relative;
+ left:-16px;
+ top:10px;
+ float:left;
}
/* Error output. */
diff --git a/swc.css b/swc.css
index 12ddde7..3bb49a3 100644
--- a/swc.css
+++ b/swc.css
@@ -23,17 +23,6 @@ div.chapter h2 {
background-color: azure;
}
-/* Comments in code. */
-.comment {
- color: purple;
-}
-
-/* Error messages. */
-.err {
- color: darkred;
- font-style: italic;
-}
-
/* Things to fix. */
.fixme {
text-decoration: underline;
@@ -41,22 +30,6 @@ div.chapter h2 {
background-color: lightgray;
}
-/* Highlighted changes in code. */
-.highlight {
- background-color: mistyrose;
-}
-
-/* Manual input. */
-.in {
- color: darkgreen;
-}
-
-/* Program output. */
-.out {
- color: darkblue;
- font-style: italic;
-}
-
/* Putting shadows around things. */
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
--
GitLab