top: 0;
left: 0;
height: 100%;
- background-image: url(/static/test.jpg);
- /* set real background image */
+ /* background-image: url(/static/test.jpg); set real background image */
background-size: 100% 100%;
border-top-left-radius: 0.938em 6.38%;
border-bottom-left-radius: 0.938em 6.38%; }
#catalogue-carousel #catalogue-carousel-links li a {
display: block;
+ overflow: hidden;
width: 28.75em;
height: 100%;
background-image: url(/static/catalogue/img/carousel-left.png);
background-position: 100% 0;
background-repeat: no-repeat;
- background-size: 4.375em 100%;
- /* left part of mask as background */ }
+ background-size: 4.375em 100%; }
#catalogue-carousel #catalogue-carousel-switcher {
margin: 0;
padding: 3.125em 0 0 3.625em;
top: 0;
list-style: none;
border-radius: 0 0.938em 0.938em 0;
- background-color: #16a487;
+ background-color: #ed7831;
background-image: url(/static/catalogue/img/carousel-right.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: auto 14.688em;
/* right part of mask as background */ }
#catalogue-carousel #catalogue-carousel-switcher li {
- margin-bottom: .9em;
- /* TODO: active sprites */ }
+ margin-bottom: .9em; }
#catalogue-carousel #catalogue-carousel-switcher li a {
text-transform: uppercase;
color: #363a3e;
font-size: .9em;
font-weight: bold; }
- #catalogue-carousel #catalogue-carousel-switcher li a.active {
- color: white; }
#catalogue-carousel #catalogue-carousel-switcher li a:before {
vertical-align: top;
margin-right: 1.5em; }
#catalogue-carousel #catalogue-carousel-switcher li .knowledge:before {
- content: url(/static/img/icons/knowledge.png); }
+ content: url(/static/img/icons/knowledge_dark.png); }
#catalogue-carousel #catalogue-carousel-switcher li .activity:before {
- content: url(/static/img/icons/activity.png); }
+ content: url(/static/img/icons/activity_dark.png); }
#catalogue-carousel #catalogue-carousel-switcher li .lesson-plan:before {
- content: url(/static/img/icons/lesson-plan.png); }
+ content: url(/static/img/icons/lesson-plan_dark.png); }
#catalogue-carousel #catalogue-carousel-switcher li .reference:before {
- content: url(/static/img/icons/reference.png); }
+ content: url(/static/img/icons/reference_dark.png); }
+ #catalogue-carousel #catalogue-carousel-switcher li.activeSlide a {
+ color: white; }
+ #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .knowledge:before {
+ content: url(/static/img/icons/knowledge_white.png); }
+ #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .activity:before {
+ content: url(/static/img/icons/activity_white.png); }
+ #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .lesson-plan:before {
+ content: url(/static/img/icons/lesson-plan_white.png); }
+ #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .reference:before {
+ content: url(/static/img/icons/reference_white.png); }
$px: .0625em;
+$ciemny: #363a3e;
+
+
#catalogue-carousel {
float: left;
position: relative;
top: 0;
left: 0;
height: 100%;
- background-image: url(/static/test.jpg); /* set real background image */
+ /* background-image: url(/static/test.jpg); set real background image */
background-size: 100% 100%;
border-top-left-radius: 15*$px 6.38%;
border-bottom-left-radius: 15*$px 6.38%;
a {
display: block;
+ overflow: hidden;
width: 460*$px;
height: 100%;
background-image: url(/static/catalogue/img/carousel-left.png);
background-position: 100% 0;
background-repeat: no-repeat;
background-size: 70*$px 100%;
-
- /* left part of mask as background */
}
}
}
top: 0;
list-style: none;
border-radius: 0 15*$px 15*$px 0;
- background-color: #16a487;
+ background-color: #ed7831;
background-image: url(/static/catalogue/img/carousel-right.png);
background-position: 0 0;
background-repeat: no-repeat;
a {
text-transform: uppercase;
- color: #363a3e;
+ color: $ciemny;
font-size: .9em;
font-weight: bold;
}
- a.active {
- color: white;
- }
a:before {
vertical-align: top;
margin-right: 1.5em;
}
- .knowledge:before {content: url(/static/img/icons/knowledge.png);}
- .activity:before {content: url(/static/img/icons/activity.png);}
- .lesson-plan:before {content: url(/static/img/icons/lesson-plan.png);}
- .reference:before {content: url(/static/img/icons/reference.png);}
- /* TODO: active sprites */
+ .knowledge:before {content: url(/static/img/icons/knowledge_dark.png);}
+ .activity:before {content: url(/static/img/icons/activity_dark.png);}
+ .lesson-plan:before {content: url(/static/img/icons/lesson-plan_dark.png);}
+ .reference:before {content: url(/static/img/icons/reference_dark.png);}
+ }
+ li.activeSlide {
+ a {
+ color: white;
+ }
+ .knowledge:before {content: url(/static/img/icons/knowledge_white.png);}
+ .activity:before {content: url(/static/img/icons/activity_white.png);}
+ .lesson-plan:before {content: url(/static/img/icons/lesson-plan_white.png);}
+ .reference:before {content: url(/static/img/icons/reference_white.png);}
}
}
margin: 0; }
#sidebar section h1.realisation {
font-weight: normal; }
- #sidebar section h1.realisation:before {
- content: url(/static/img/icons/time.png);
- vertical-align: middle;
- margin-right: 0.625em; }
#sidebar .box {
- background-color: #16a487;
+ background-color: #d4d6d8;
border-radius: 0.938em;
padding: 1.063em 0.75em 1.063em 0.75em; }
- #sidebar .box .dl-button {
+ #sidebar .box h1 {
+ font-size: 1em;
+ text-transform: uppercase; }
+ #sidebar .box-button {
+ background-color: #ed7831;
+ border-radius: 0.938em;
+ padding: 1.063em 0.75em 1.063em 0.75em; }
+ #sidebar .box-button .dl-button {
color: white; }
#sidebar .dl-button {
color: #363a3e;
h1.realisation {
font-weight: normal;
}
- h1.realisation:before {
- content: url(/static/img/icons/time.png);
- vertical-align: middle;
- margin-right: 10*$px;
- }
}
.box {
- background-color: #16a487;
+ background-color: #d4d6d8;
+ border-radius: 15*$px;
+ padding: 17*$px 12*$px 17*$px 12*$px;
+ h1 {
+ font-size: 1em;
+ text-transform: uppercase;
+ }
+ }
+ .box-button {
+ background-color: #ed7831;
border-radius: 15*$px;
padding: 17*$px 12*$px 17*$px 12*$px;
-
.dl-button {
color: white;
}
easeIn: 'easeInQuad',
easeOut: 'easeOutQuad',
speed: 1000,
-
+ pager: '#catalogue-carousel-switcher',
+ pagerAnchorBuilder: function(){},
});
-<ol>
+<ol class="link-list">
{% for post in posts %}
<li><a href="{{ post.link }}">{{ post.title }}</a></li>
{% endfor %}
-</ol>
\ No newline at end of file
+</ol>
<h1 class="realisation">Realizacja i czas lekcji</h1>
{% if object.depth == 0 %}
<p>To lekcja jest syntezą działu
- {{ object.section }}.
+ <strong>{{ object.section }}</strong>.
Dostępny jest również
- <a href="{% url 'catalogue_lessons' %}#{{ object.section.slug }}">szczegółowy kurs</a>
+ <strong><a href="{% url 'catalogue_lessons' %}#{{ object.section.slug }}">szczegółowy kurs</a></strong>
dla tego działu.
</p>
{% else %}
<p>Ta lekcja jest częścią działu
- {{ object.section }}.
+ <strong>{{ object.section }}</strong>.
Dostępna jest również
- <a href="">lekcja syntetyczna</a>
+ <strong><a href="">lekcja syntetyczna</a></strong>
dla tego działu.
</p>
{% endif %}
<p>Czas trwania: 45 minut.</p>
</section>
- <section class="box"><a href="" class="dl-button">Pobierz całą lekcję</a></section>
+ <section class="box-button"><a href="" class="dl-button">Pobierz całą lekcję</a></section>
<section><a href="" class="dl-button">Pobierz lekcję w wersji dla ucznia</a></section>
<section class="section">
<h1>Korzystanie z informacji</h1>
</p>
<p>Czas trwania: 45 minut</p>
</section>
- <section class="box"><a href="" class="dl-button">Pobierz wszystkie lekcje</a></section>
+ <section class="box-button"><a href="" class="dl-button">Pobierz wszystkie lekcje</a></section>
<section><a href="" class="dl-button">Pobierz wszystkie lekcje w wersji dla ucznia</a></section>
<section class="section-minor">
<h1>Zebrane z wszystkich działów</h1>
- <ul>
- <li>Słowniczek</li>
- <li>Czytelnia</li>
- <li>Używane metody edukacyjne</li>
+ <ul class="link-list">
+ <li><a href="">Słowniczek</a></li>
+ <li><a href="">Czytelnia</a></li>
+ <li><a href="">Używane metody edukacyjne</a></li>
</ul>
</section>
</aside>
+{% load url from future %}
<section id="catalogue-carousel">
<ul id="catalogue-carousel-links">
- <li>
- <a href="" class="catalogue-carousel-link"> </a>
+ <li style="background-image: url(/static/carousel/img1.jpg); z-index: 100;">
+ <a href="{% url 'catalogue_lesson' 'jak-planowac-prace-z-informacja' %}" class="catalogue-carousel-link"></a>
</li>
- <li>
- <a href="" class="catalogue-carousel-link"> </a>
+ <li style="background-image: url(/static/carousel/img2.jpg)">
+ <a href="{% url 'catalogue_lesson' 'jak-planowac-prace-z-informacja' %}" class="catalogue-carousel-link"></a>
+ </li>
+ <li style="background-image: url(/static/carousel/img3.jpg)">
+ <a href="{% url 'catalogue_lesson' 'jak-planowac-prace-z-informacja' %}" class="catalogue-carousel-link"></a>
+ </li>
+ <li style="background-image: url(/static/carousel/img4.jpg)">
+ <a href="{% url 'catalogue_lesson' 'jak-planowac-prace-z-informacja' %}" class="catalogue-carousel-link"></a>
</li>
</ul>
<ul id="catalogue-carousel-switcher">
- <li><a href="" class="knowledge">wiedza w pigułce</a></li>
- <li><a href="" class="activity active">ćwiczenia</a></li>
- <li><a href="" class="lesson-plan">scenariusze</a></li>
- <li><a href="" class="reference">słowniczek</a></li>
+ <li><a href="{% url 'catalogue_lesson' 'jak-planowac-prace-z-informacja' %}" class="knowledge">wiedza w pigułce</a></li>
+ <li><a href="{% url 'catalogue_lesson' 'jak-planowac-prace-z-informacja' %}" class="activity">ćwiczenia</a></li>
+ <li><a href="{% url 'catalogue_lesson' 'jak-planowac-prace-z-informacja' %}" class="lesson-plan">scenariusze</a></li>
+ <li><a href="{% url 'catalogue_lesson' 'jak-planowac-prace-z-informacja' %}" class="reference">słowniczek</a></li>
</ul>
</section>
-<ul>
+<ul class="link-list">
<li><a href="">język polski</a></li>
<li><a href="">informatykę</a></li>
<li><a href="">wiedzę o społeczeństwie</a></li>
<li><a href="">muzykę</a></li>
-</ul>
\ No newline at end of file
+</ul>
<ul class="section-buttons">
{% for object in object_list %}
{% url "catalogue_lessons" as lessons_url %}
- <li class="box{{ object.order }}"><a href="{{ lessons_url }}#{{ object.slug }}">{{ object }}</a></li>
+ <li class="box{{ object.order }}"><a href="{{ lessons_url }}#{{ object.slug }}"><span>{{ object }}</span></a></li>
{% endfor %}
-</ul>
\ No newline at end of file
+</ul>
+@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Dosis:400,700&subset=latin,latin-ext);
a {
text-decoration: none;
text-align: center;
/*position:relative;*/ }
header.main nav a {
- color: #ed7831;
+ color: #363a3e;
display: block;
vertical-align: bottom;
font-size: .85em; }
header.main nav a:hover {
- color: #363a3e; }
+ color: #ed7831; }
header.main nav a:before {
display: block;
margin-bottom: .8em; }
text-transform: uppercase; }
#search input::-ms-placeholder {
text-transform: uppercase; }
+
+.link-list {
+ list-style: none;
+ padding: 0; }
+ .link-list a:before {
+ content: "→";
+ margin-right: .5em; }
+ .link-list a {
+ color: #363a3e; }
+ .link-list a:hover {
+ color: #ed7831; }
/*position:relative;*/
}
a {
- color: $oranji;
+ color: $ciemny;
display: block;
vertical-align: bottom;
font-size: .85em;
}
a:hover {
- color: $ciemny;
+ color: $oranji;
}
a:before {
display: block;
text-transform: uppercase;
}
-}
\ No newline at end of file
+}
+
+
+.link-list {
+ list-style: none;
+ padding: 0;
+
+ a:before {
+ content: "→";
+ margin-right: .5em;
+ }
+ a {
+ color: $ciemny;
+ }
+ a:hover {
+ color: $oranji;
+ }
+}
#main-promobox {
- /*position: absolute;
- top: 0;
- right: 10 * $px;*/
float: right;
border-radius: 0.938em;
- background: #f8b323;
+ background: #16a487;
padding: 1.5em 1.25em;
width: 11.25em;
height: 11.688em; }
text-transform: uppercase;
font-size: .9em; }
#main-promobox h1:before {
- content: url(/static/img/icons/announce.png);
+ content: url(/static/img/icons/announce_white.png);
margin-right: 1.2em;
vertical-align: top; }
#main-promobox h2 {
float: left;
width: 10em;
height: 5.625em;
- border-radius: 0.938em;
- display: table; }
+ border-radius: 0.938em; }
#main-sections ul li a {
- display: table-cell;
- padding-left: 1.688em;
- vertical-align: middle;
- height: 100%;
color: white;
text-transform: uppercase;
- font-size: .9em; }
+ display: block;
+ height: 4.375em;
+ width: 8.75em;
+ display: table;
+ padding: 0.625em; }
+ #main-sections ul li a span {
+ font-size: .9em;
+ height: 100%;
+ width: 100%;
+ display: table-cell;
+ vertical-align: middle;
+ border: 1px solid transparent;
+ border-radius: 0.625em;
+ padding-left: 1em; }
+ #main-sections ul li a:hover span {
+ border: 1px solid white; }
#main-sections ul .box1 {
background-color: #adaeaf; }
#main-sections ul .box2 {
margin: 0 0 0 1.4em;
text-transform: uppercase; }
#main-chosen ul {
- margin: 1.063em 0 0 1.4em;
- padding: 0;
- list-style-position: inside; }
+ margin: 1.063em 0 0 1.4em; }
#main-chosen ul li {
font-size: .9em;
text-transform: uppercase;
line-height: 1.25em; }
- #main-chosen ul li a {
- color: #363a3e; }
#main-tools {
clear: both; }
text-transform: uppercase; }
#main-tools .main-tools-box ul, #main-tools .main-tools-box ol {
margin: 1.1em 0 0 0;
- padding: 0;
- list-style-position: inside;
- color: #ed7831;
font-size: .9em;
line-height: 1.15em; }
- #main-tools .main-tools-box ul li a, #main-tools .main-tools-box ol li a {
- color: #ed7831; }
$px: .0625em;
#main-promobox {
- /*position: absolute;
- top: 0;
- right: 10 * $px;*/
float: right;
border-radius: 15*$px;
- background: #f8b323;
+ background: #16a487;
padding: 1.5em 20*$px;
width: 220*$px - 2 * 20*$px;
height: 235*$px - 2 * 1.5em;
font-size: .9em;
}
h1:before {
- content: url(/static/img/icons/announce.png);
+ content: url(/static/img/icons/announce_white.png);
margin-right: 1.2em;
vertical-align: top;
}
width: 160*$px;
height: 90*$px;
border-radius: 15*$px;
- display: table;
a {
- display: table-cell;
- padding-left: 27*$px;
- vertical-align: middle;
- height: 100%;
color: white;
text-transform: uppercase;
- font-size: .9em;
+ display: block;
+ height: 70*$px;
+ width: 140*$px;
+ display: table;
+ padding: 10*$px;
+
+ span {
+ font-size: .9em;
+ height: 100%;
+ width: 100%;
+ display: table-cell;
+ vertical-align: middle;
+ border: 1px solid transparent;
+ border-radius: 10*$px;
+ padding-left: 16*$px;
+ }
+ }
+ a:hover span {
+ border: 1px solid white;
}
}
.box1 {background-color: #adaeaf;}
ul {
margin: 17*$px 0 0 1.4em;;
- padding: 0;
- list-style-position:inside;
li {
font-size: .9em;
text-transform: uppercase;
line-height: 1.25em;
-
- a {
- color: #363a3e;
- }
}
}
}
ul, ol {
margin: 1.1em 0 0 0;
- padding: 0;
- list-style-position:inside;
- color: #ed7831;
font-size: .9em;
line-height: 1.15em;
-
- li {
- a {
- color: #ed7831;
- }
- }
}
}
}