Browse Source

retocs d'estil (CSS). Falta que canvii el color segons arrossegui -> javascript

master
Xavier 10 years ago
parent
commit
cfad7a1f30
  1. 116
      01-cell/cel.html
  2. 7
      qfer.textile
  3. 69
      stylesheets/pygment_trac.css
  4. 198
      stylesheets/slim.css
  5. 50
      stylesheets/style.css

116
01-cell/cel.html

@ -1,23 +1,13 @@
<html>
<head>
<title>Canvas tutorial</title>
<link rel="stylesheet" type="text/css" href="../stylesheets/style.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Rosario:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: Gill Sans,My Gill Sans,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 1em;
font-size-adjust: none;
font-stretch: normal;
-x-system-font: none;
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
}
#instruccions {
border: 1px solid #aaaaaa;
width="90%";
text-align:center;
vertical-align: middle;
background-color: rgb(193, 210, 231);
background-image: none;
background-repeat: repeat;
@ -26,10 +16,55 @@
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
border-bottom-left-radius: 0.5em;
}
#pou {
border: medium dotted rgb(102, 0, 51);
border-top-width: medium;
border-right-width-value: medium;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-bottom-width: medium;
border-left-width-value: medium;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-top-style: dotted;
border-right-style-value: dotted;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-bottom-style: dotted;
border-left-style-value: dotted;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-top-color: rgb(102, 0, 51);
border-right-color-value: rgb(102, 0, 51);
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-bottom-color: rgb(102, 0, 51);
border-left-color-value: rgb(102, 0, 51);
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image-source: none;
border-image-slice: 100% 100% 100% 100%;
border-image-width: 1 1 1 1;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
padding: 10px;
width: 100px;
height: 35px;
margin: 10px;
}
#div1, #div2 {
float: left;
margin-left: 10px;
//float: left;
//margin-left: 10px;
//display: inline-block;
width: 100px;
height: 35px;
margin: 10px;
@ -41,12 +76,14 @@
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
//border: 1px solid black;
}
p.image-description {
font-size: small;
text-align: center;
}
#nivell, #area { background-color: #eee; font-size: 14px; color: #333; padding: 3px 14px; text-shadow: 1px 1px 0px #fff; }
.rosario { font-family: 'Rosario', sans-serif; }
</style>
<script type="text/javascript">
@ -66,19 +103,40 @@
</script>
</head>
<body>
<h1>La cèl·lula</h1>
<h2>Orgànuls cel·lulars</h2>
<div id="instruccions"><p>Arrossega els noms dels orgànuls cel·lulars a una de les parts de la cèl·lula</p></div>
<br/>
<div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag1" draggable="true" ondragstart="drag(event)" width="88" height="31">Vesícules</div>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div>
<img class="displayed" src="cell800.png" alt="Cèl·lula eucariota animal">
<p class="image-description">Cèl·lula eucariota animal</p>
<div class="wrapper">
<div class="header">
<a class="logo roundbottom rosario" href="http://somenxavier.github.com/xalumnat/">mdadak
<span>La cèl·lula</span>
</a>
<ul class="nav">
<li id="nivell">Nivell: ESO</li>
<li id="area">Àrea: Biologia</li>
</ul>
</div>
<h1>Orgànuls cel·lulars</h1>
<div id="instruccions"><p>Arrossega els noms dels orgànuls cel·lulars a una de les parts de la cèl·lula</p></div>
<br/>
<div class="twocolrighta">
<div class="column first">
<div>
<!--The image has to be 800x486 resolution -->
<img class="displayed" src="cell800.png" alt="Cèl·lula eucariota animal">
<p class="image-description">Cèl·lula eucariota animal</p>
</div>
<div id="pou" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="column last sidecol">
<div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag1" draggable="true" ondragstart="drag(event)" width="88" height="31">Vesícules</div>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div>
</div>
<div class="footer">
<p><a href="https://github.com/somenxavier/my-drag-and-drop-kahn-academy">codi font</a></p>
</div>
</div>
</body>
</html>

7
qfer.textile

@ -3,14 +3,11 @@ h1. Què fer
h2. Curt termini
# Canviar id per class -> no funciona
# Mateix estil que W3C School: http://www.w3.org/Style/Examples/007/center.en.html (font i color)
# Les paraules al damunt i la imatge abaix
# Llevar el requadre negre de la imatge?
# Posar els requadres-pous color gris
# canviar de color si és incorrecte o correcte
# tocar un so quan sigui correcte o no
# crear una branca gh-pages
h2. Llarg termini
# tocar un so depenent de si la resposta és correcte o no
# posar compte enrera
# poder introduir els noms dels alumnes i que automàticament canviï de nom

69
stylesheets/pygment_trac.css

@ -0,0 +1,69 @@
.highlight { background: #ffffff; }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { font-weight: bold } /* Keyword */
.highlight .o { font-weight: bold } /* Operator */
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { font-weight: bold } /* Keyword.Constant */
.highlight .kd { font-weight: bold } /* Keyword.Declaration */
.highlight .kn { font-weight: bold } /* Keyword.Namespace */
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #009999 } /* Literal.Number */
.highlight .s { color: #d14 } /* Literal.String */
.highlight .na { color: #008080 } /* Name.Attribute */
.highlight .nb { color: #0086B3 } /* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
.highlight .no { color: #008080 } /* Name.Constant */
.highlight .ni { color: #800080 } /* Name.Entity */
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
.highlight .nn { color: #555555 } /* Name.Namespace */
.highlight .nt { color: #000080 } /* Name.Tag */
.highlight .nv { color: #008080 } /* Name.Variable */
.highlight .ow { font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #009999 } /* Literal.Number.Float */
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
.highlight .sb { color: #d14 } /* Literal.String.Backtick */
.highlight .sc { color: #d14 } /* Literal.String.Char */
.highlight .sd { color: #d14 } /* Literal.String.Doc */
.highlight .s2 { color: #d14 } /* Literal.String.Double */
.highlight .se { color: #d14 } /* Literal.String.Escape */
.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
.highlight .si { color: #d14 } /* Literal.String.Interpol */
.highlight .sx { color: #d14 } /* Literal.String.Other */
.highlight .sr { color: #009926 } /* Literal.String.Regex */
.highlight .s1 { color: #d14 } /* Literal.String.Single */
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080 } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* 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 }

198
stylesheets/slim.css

@ -0,0 +1,198 @@
/* -----------------------------------------------------------------------
Slim CSS Framework v1.5
http://billyshall.com/slimcss/
----------------------------------------------------------------------- */
/* Reset ------------------------------------------------------------ */
html,body,div,h1,h2,h3,h4,h5,h6,p,blockquote,code,pre,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th,p,input,select,textarea { font-size: 1em; font-weight: normal; font-style:normal; }
table { border-collapse: collapse; border-spacing: 0; }
caption,th { text-align: left; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
/* Layout ------------------------------------------------------------ */
html { margin-bottom:1px; min-height:100%; }
html, body { height: 100%; }
body { background-color: #fff; color: #333; font: 12px/18px "Lucida Grande", Geneva, Arial, Verdana, sans-serif; }
.wrapper { position: relative; text-align: left; width: 960px; margin: 0 auto; }
body.fluid .wrapper { min-width: 780px; max-width: 1260px; margin: 0 20px; width: auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto"); }
.header, .footer { width: 100%; margin: 0 auto; position: relative; }
/* Grid ------------------------------------------------------------ */
.onecol, .twocol, .twocollefta, .twocolleftb, .twocolrighta, .twocolrightb, .threecol, .threecola, .fourcol, .fivecol, .sixcol { width: 100%; margin:0 auto 18px auto; display:inline-block; position:relative; }
.column { float: left; margin-left: 2%; }
.column.first, .column.last { margin-left: 0 !important; }
.column.last { float: right; }
.column.first .column :last-child { margin-bottom: 0; }
.column.last .column :last-child { margin-bottom: 0; }
/* One Column ----------------------------- */
.onecol { }
.onecol .column,
.column .onecol .column,
.column .onecol .column.first,
.column .onecol .column.last { width:90% !important; float:none; margin:0 auto; }
/* Two Column ----------------------------- */
/* Even */
.twocol .column { width: 49%; }
.column .twocol .column, .column .twocol .column.first, .column .twocol .column.last { width: 48%; }
/* Smaller Left - Wider Right */
.twocollefta .column.first, .column .twocollefta .column.first { width: 20%; }
.twocollefta .column.last, .column .twocollefta .column.last { width: 78%; }
/* Small Left - Wide Right */
.twocolleftb .column.first, .column .twocolleftb .column.first { width: 33%; }
.twocolleftb .column.last, .column .twocolleftb .column.last { width: 65%; }
/* Wider Left - Small Right */
.twocolrighta .column.first, .column .twocolrighta .column.first { width: 85%; }
.twocolrighta .column.last, .column .twocolrighta .column.last { width: 15%; }
/* Small Left - Wide Right - fit nested .twocol for a total of 3 columns */
.twocolrightb .column.first, .column .twocolrightb .column.first { width: 65%; }
.twocolrightb .column.last, .column .twocolrightb .column.last { width: 33%; }
/* Three Column ----------------------------- */
/* Small Right/Left - Wide Center */
.threecola .column, .column .threecola .column, .column.first .threecola .column, .column.last .threecola .column { width: 55.5%; }
.threecola .column.first, .threecola .column.last, .column .threecola .column.first, .column .threecola .column.last { width: 20%; }
/* Even */
.threecol .column, .column .threecol .column, .column.first .threecol .column, .column.last .threecol .column { width: 32%; margin-right: 0; }
/* Four Column */
.fourcol .column, .column .fourcol .column, .column.first fourcol .column, .column.last .fourcol .column { width: 23%; margin-left: 3%; }
/* Five Column */
.fivecol .column, .column .fivecol .column, .column.first .fivecol .column, .column.last .fivecol .column { width: 18.5%; }
/* Six Column */
.sixcol .column, .column .sixcol .column, .column.first .sixcol .column, .column.last .sixcol .column { width: 15.1%; }
/* Clear Floats */
.column:after, .onecol:after, .twocol:after, .twocollefta:after, .twocolleftb:after, .twocolrighta:after, .twocolrightb:after, .threecol:after, .threecola:after, .fourcol:after, .fivecol:after, .sixcol:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/* Typography ------------------------------------------------------------ */
a { color: #105CB6; text-decoration: none; }
a:hover, a:focus { color: #105CB6; text-decoration: underline; }
a:active { color: #105CB6; }
h1 { font-size: 24px; line-height: 36px; margin-bottom: 18px; }
h2 { font-size: 18px; line-height: 18px; margin-bottom: 18px; }
h3 { font-size: 12px; line-height: 18px; font-weight: bold; }
h4 { font-size: 12px; line-height: 18px; font-weight: bold; }
h5 { font-size: 11px; line-height: 18px; font-weight: bold; }
h6 { font-size: 10px; line-height: 18px; font-weight: bold; }
h1,h2,h3,h4,h5,h6 { color: #333; }
p { margin-bottom: 18px; }
.textleft { text-align: left; }
.textcenter { text-align: center; }
.textright { text-align: right; }
.textjustify { text-align: justify; }
img.left { float: left; margin: 0 18px 18px 0; }
img.center { margin: 0 auto; display: block; }
img.right { float: right; margin: 0 0 18px 18px; }
a.left { float: left; }
a.right { float: right; }
.serif { font-family: Georgia, "lucida bright", "times new roman", serif; }
/* Misc ------------------------------------------------------------ */
em, i { font-style: italic; }
strong, b { font-weight: bold; }
.hr { background-color: #ccc; border: 0px; color: #ccc; height: 1px; margin: 8px 0 18px 0; }
pre, code { background:#E0ECF6; display:block; margin-bottom: 18px; padding:10px; }
abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }
address { margin-bottom: 18px; font-style: italic; }
del { color: #666; }
dfn { font-weight: bold; }
blockquote { margin: 10px 10px 18px; padding: 9px; background-color: #f8f8f8; color: #666; border-left: 5px solid #ddd; font: 14px/18px Georgia, Times, serif; quotes: "\201C" "\201D"; }
blockquote p { margin: 0; }
blockquote:before { content: open-quote; font-weight: bold; }
blockquote:after { content: close-quote; font-weight: bold; }
.clear { clear: both; }
.zero { margin: 0; padding: 0; }
/* Round Corners ------------------------------------------------------------ */
.roundtop { -webkit-border-top-right-radius: 5px; -khtml-border-radius-topright: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; -khtml-border-radius-topleft: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; }
.roundbottom { -webkit-border-bottom-right-radius: 5px; -khtml-border-radius-bottomright: 5px; -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -khtml-border-radius-bottomleft: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; }
.round { -webkit-border-radius: 9px; -khtml-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }
/* Lists ------------------------------------------------------------ */
ul { margin-bottom: 18px; list-style: none outside; }
ol { margin-bottom: 18px; margin-left: 2em; list-style-type: decimal; }
ul.disc { list-style: disc outside; margin-left: 2em; }
ul.circle { list-style: circle outside; margin-left: 2em; }
ul.square { list-style: square outside; margin-left: 2em; }
ul ul, ol ol { margin-bottom:0; }
dl { margin-bottom: 18px; }
dt { font-weight: bold; margin-bottom: 18px; }
dd { }
/* Forms ------------------------------------------------------------ */
fieldset { position: relative; border-top:1px solid #ccc; padding: 10px; margin-bottom:18px; }
fieldset legend { font-weight:bold; font-size:16px; padding: 0 5px; }
form label { }
form .error { color: #ff0000; display: block; }
form.inline label { margin-right: 10px; text-align:right; width:140px; float:left; }
/* form.inline input, form.inline textarea { margin:0 0 9px 0; } */
form.inline input[type="text"], form.inline input[type="password"] { }
form.inline input[type="submit"] { margin-left:150px; display: block; }
form.inline textarea { font-size: 12px; padding: 4px; border: solid 1px #ccc; }
form.inline .error { color: #ff0000; display: block; margin-left:150px; font-size: 11px; font-style: italic; }
form.inline em { display: block; margin-left:150px; font-size: 11px; font-style: italic; }
form.block label { display: block; }
form.block input[type="text"], form.block input[type="password"] { display: block; font-size: 12px; padding: 5px; border: solid 1px #ccc; }
form.block textarea { font-size: 12px; padding: 5px; border: solid 1px #ccc; }
form.block input[type="submit"] { display: block; }
/* Tables ------------------------------------------------------------ */
table { margin-bottom: 18px; width:100%; }
th { font-weight: bold; }
td { text-align: left; }
tfoot { font-style: italic; }
.odd { background-color:#EDF3F9; }
.even { background-color:#ffffff; }
/* Print ------------------------------------------------------------ */
@media print {
body, .wrapper { color: #000 !important; }
a, a:link, a:visited { color: #000 !important; text-decoration: none !important; }
}

50
stylesheets/style.css

@ -0,0 +1,50 @@
@import "slim.css";
/* -----------------------------------------------------------------------
Minimal v1.0
http://billyshall.com/templates/minimal
----------------------------------------------------------------------- */
/* Header ------------------------------------------------------------ */
.header { height: 54px; margin: 0 auto 18px auto; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif; }
a.logo { float:left; text-align: center; font-size: 26px; background-color: #eee; color:#333; text-shadow: 1px 1px 0px #fff; padding: 9px; }
a.logo:hover { text-decoration: none; background-color: #ddd; }
a.logo span { display: block; font-size: 14px; color: #666; }
.nav { padding:0; margin:0; float:right; }
.nav li { display:inline; padding-left:9px; }
.nav li a { background-color: #eee; font-size: 14px; color: #333; padding: 3px 14px; text-shadow: 1px 1px 0px #fff; }
.nav li a:hover { background-color: #ddd; text-decoration:none; border-bottom: 10px solid #ddd; }
.breadcrumbs { position:relative; margin-bottom:9px; color:#333; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif; font-size:11px; }
.leaderboard { margin: 0 auto 18px; text-align: center; }
/* Footer ------------------------------------------------------------ */
.footer { border-top:1px solid #ccc; font-size:10px; line-height:26px; color:#999; }
.footer a { color:#999999; }
.footer a:hover { color:#105CB6; }
.footer p { float:left; }
.footer ul { float:right; }
.footer ul li { display:inline; list-style:none; padding-left:18px; }
h1,h2,h3 { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif; }
/* Side Columns ------------------------------------------------------------ */
.sidecol { }
.sidecol h4 { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif; font-size: 16px; color: #333; border-bottom: 1px solid #ccc; font-weight: normal; line-height: 24px; text-indent: 10px; margin-bottom: 9px; }
.sidecol ul li { margin: 0 0 3px; }
.sidecol ul li a { border: 1px solid #ccc; display: block; text-indent: 10px; background-color: #eee; color: #333; }
.sidecol ul li a:hover { text-decoration: none; background-color: #ddd; }
/* Misc ------------------------------------------------------------ */
Loading…
Cancel
Save