]> git.parisson.com Git - mezzo.git/commitdiff
Updates for metainfo styles, added calendar
authorPhilippe Barbosa <contact@philippebarbosa.com>
Tue, 22 Mar 2016 17:00:33 +0000 (18:00 +0100)
committerPhilippe Barbosa <contact@philippebarbosa.com>
Tue, 22 Mar 2016 17:00:33 +0000 (18:00 +0100)
app/festival/static/css/index.css
app/festival/static/scss/base/_forms.scss
app/festival/static/scss/index.scss
app/festival/static/scss/modules/calendar.scss [new file with mode: 0644]
app/festival/static/scss/modules/event-card.scss
app/festival/templates/festival/video_detail.html
app/templates/agenda/event_detail.html
app/templates/agenda/event_list.html
app/templates/agenda/includes/event_metainfo.html
app/templates/base.html
app/templates/includes/calendar.html [new file with mode: 0644]

index d55dad343f446927ba0fe75145b917a82f6a69d9..2fef7c328def1949adf5631f7eaf75fc5bbf1506 100755 (executable)
@@ -515,7 +515,7 @@ body {
 }
 
 /* line 30, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_defaults.scss */
-.clearfix:after, .container:after, .row:after, .row-box:after, .sticked-form:after, .banner:after, .header:after, .navigation:after, .footer-nav:after, .media:after, .split-container:after {
+.clearfix:after, .container:after, .row:after, .row-box:after, .event__card:after, .event__card--alt:after, .calendar__month:after, .sticked-form:after, .banner:after, .header:after, .navigation:after, .footer-nav:after, .media:after, .split-container:after {
   content: "";
   display: table;
   clear: both;
@@ -792,7 +792,7 @@ pre > p {
 }
 
 /* line 22, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_layout.scss */
-.row, .row-box {
+.row, .row-box, .event__card, .event__card--alt, .calendar__month {
   display: block;
 }
 
@@ -1070,9 +1070,10 @@ select {
 
 /* line 163, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 .sticked-form input[type=submit] {
-  width: 100%;
+  width: 30%;
   -webkit-appearance: none;
   background: #ca9727;
+  float: left;
   font-weight: 700;
   color: #fff;
   border: 0;
@@ -1080,7 +1081,7 @@ select {
   margin-top: 0;
 }
 
-/* line 181, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+/* line 183, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 .sticked-form input[type=submit]:active {
   outline: 0;
   background: #e4c073;
@@ -1089,7 +1090,7 @@ select {
 /*
  * Custom select
  */
-/* line 192, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+/* line 194, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 .select {
   padding: 0;
   margin: 0;
@@ -1100,7 +1101,7 @@ select {
   position: relative;
 }
 
-/* line 200, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+/* line 202, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 .select:after {
   position: absolute;
   top: 50%;
@@ -1113,7 +1114,7 @@ select {
   border-top: 0.5rem solid #e8ca88;
 }
 
-/* line 212, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+/* line 214, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 .select.search__form__select {
   display: block;
   float: left;
@@ -1123,7 +1124,7 @@ select {
   width: 30%;
 }
 
-/* line 225, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+/* line 227, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 .select select {
   width: 130%;
   border: none;
@@ -1136,7 +1137,7 @@ select {
   text-align: center;
 }
 
-/* line 236, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+/* line 238, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 .select select:focus {
   outline: none;
 }
@@ -1144,7 +1145,7 @@ select {
 /**
  * Reset input buttons styles
  */
-/* line 244, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+/* line 246, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 button,
 input[type="button"],
 input[type="reset"],
@@ -1174,7 +1175,7 @@ button {
   margin-top: 1rem;
 }
 
-/* line 269, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+/* line 271, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 button:hover, button:focus,
 input[type="button"]:hover,
 input[type="button"]:focus,
@@ -1188,7 +1189,7 @@ button:focus {
   color: #fff;
 }
 
-/* line 275, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+/* line 277, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 button:disabled,
 input[type="button"]:disabled,
 input[type="reset"]:disabled,
@@ -1198,12 +1199,12 @@ button:disabled {
   opacity: 0.5;
 }
 
-/* line 282, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+/* line 284, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 .help-block {
   font-size: .7rem;
 }
 
-/* line 286, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+/* line 288, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 .form-group {
   margin: 0 0 1rem;
 }
@@ -2878,26 +2879,39 @@ th {
   background: #fff;
 }
 
-/* line 4, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
+/* line 5, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
 .event__card--alt {
   background: #00818d;
   color: white;
 }
 
-/* line 11, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
+/* line 12, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
 .event__name {
   margin: 0 0 0.3rem;
   font-size: 2.2rem;
   text-transform: uppercase;
 }
 
-/* line 17, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
+/* line 18, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
+.event__thumbnail {
+  display: block;
+  float: left;
+  margin-right: .5rem;
+  margin-bottom: .1rem;
+}
+
+/* line 25, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
 .event__description {
   padding-bottom: 1em;
   margin-bottom: 1em;
 }
 
-/* line 23, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
+/* line 29, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
+.event__description img {
+  display: block;
+}
+
+/* line 34, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
 .event__meta {
   display: block;
   padding: .5rem;
@@ -2906,33 +2920,34 @@ th {
   font-weight: 700;
   text-transform: uppercase;
   color: #000;
+  margin-bottom: 1rem;
 }
 
-/* line 32, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
-.event__meta span {
+/* line 44, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
+.event__meta__inner {
   display: block;
   padding: 0.3rem 0;
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
 }
 
-/* line 57, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
+/* line 69, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
 .event__meta__location {
   display: block;
-  float: right;
   text-decoration: none;
   color: #000;
   font-weight: 400;
 }
 
-/* line 67, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
+/* line 79, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
 .event__meta__cta {
   text-transform: uppercase;
   display: block;
-  float: right;
+  padding: .5rem;
+  background: #fff;
 }
 
-/* line 73, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
+/* line 87, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
 .event__detail,
 .event__detail a {
   text-align: right;
@@ -2967,6 +2982,92 @@ th {
   background-size: cover;
 }
 
+/* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/calendar.scss */
+.calendar__month {
+  width: 100%;
+  margin-bottom: 2rem;
+}
+
+/* line 7, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/calendar.scss */
+.calendar__month__title {
+  text-transform: uppercase;
+  font-size: 1rem;
+  text-align: center;
+  color: #000;
+  font-weight: 700;
+}
+
+/* line 15, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/calendar.scss */
+.calendar__month:nth-child(6n+1) {
+  clear: left;
+}
+
+/* line 19, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/calendar.scss */
+.calendar__month.hover span {
+  opacity: 1;
+}
+
+/* line 23, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/calendar.scss */
+.calendar__day {
+  float: left;
+  width: 14.2%;
+  box-sizing: border-box;
+  border-right: 1px solid #f0ddb3;
+  border-bottom: 1px solid #f0ddb3;
+  cursor: default;
+}
+
+/* line 32, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/calendar.scss */
+.calendar__day-inner {
+  position: relative;
+  height: 0;
+  padding-bottom: 100%;
+  overflow: hidden;
+  background: #e8ca88;
+}
+
+/* line 40, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/calendar.scss */
+.calendar__day-active .calendar__day-inner {
+  background: #e0b75d;
+}
+
+/* line 42, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/calendar.scss */
+.calendar__day-active .calendar__day-inner span,
+.calendar__day-active .calendar__day-inner span a {
+  color: black;
+}
+
+/* line 48, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/calendar.scss */
+.calendar__day-inner span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 12px;
+  padding: 35% 0;
+  font-size: .7rem;
+  color: #555;
+  opacity: 0.4;
+  transition: all .25s ease-in-out;
+}
+
+/* line 63, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/calendar.scss */
+.calendar__day-name .calendar__day-inner,
+.calendar__day-off .calendar__day-inner {
+  background: #eee;
+}
+
+/* line 68, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/calendar.scss */
+.calendar__day-name .calendar__day-inner span {
+  text-transform: uppercase;
+  font-size: 11px;
+  margin-bottom: 8px;
+  text-align: center;
+  color: #555;
+}
+
 /* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/user.scss */
 .user__panel {
   margin: 1rem auto;
@@ -3041,7 +3142,7 @@ th {
   .sticked-form input[type=submit] {
     width: 20%;
     border-radius: 0 0px 0px 0;
-  }/* line 212, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+  }/* line 214, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
   .select.search__form__select {
     width: 20%;
   }/* line 42, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
index 9804b1772418599d95c41f53e254fea2952d037f..10248c607ae13ce01bbdd32dcc4badfb1fe3fa1b 100755 (executable)
@@ -161,9 +161,11 @@ select {
     }
 
     input[type=submit] {
-      width: 100%;
+      width: 30%;
       -webkit-appearance: none;
       background: darken($base_btn_background_color, 5);
+      float: left;
+
 
       @media (min-width : $desktop) {
           width: 20%;
index 4241e03b245f06294741e8a226d0998656c2cb8c..4fa19f27b34f1d1c19d3699f039a2b7845121f2b 100755 (executable)
@@ -82,4 +82,6 @@
 
         'modules/hero-slider',
 
+        'modules/calendar',
+
         'modules/user';
\ No newline at end of file
diff --git a/app/festival/static/scss/modules/calendar.scss b/app/festival/static/scss/modules/calendar.scss
new file mode 100644 (file)
index 0000000..a3d64a7
--- /dev/null
@@ -0,0 +1,74 @@
+.calendar__month {
+  width: 100%;
+  margin-bottom: 2rem;
+  @extend .row;
+}
+
+.calendar__month__title {
+  text-transform: uppercase;
+  font-size: 1rem;
+  text-align: center;
+  color: $black;
+  font-weight: 700;
+}
+
+.calendar__month:nth-child(6n+1) {
+  clear: left
+}
+
+.calendar__month.hover span {
+  opacity: 1;
+}
+
+.calendar__day {
+  float: left;
+  width: 14.2%;
+  box-sizing: border-box;
+  border-right: 1px solid lighten($main_color, 10);;
+  border-bottom: 1px solid lighten($main_color, 10);;
+  cursor: default;
+}
+
+.calendar__day-inner {
+  position: relative;
+  height: 0;
+  padding-bottom: 100%;
+  overflow: hidden;
+  background: $main_color;
+}
+
+.calendar__day-active .calendar__day-inner {
+    background: darken($main_color, 10);
+    span,
+    span a {
+        color: black;
+    }
+}
+
+.calendar__day-inner span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 12px;
+  padding: 35% 0;
+  font-size: .7rem;
+  color: $base_font_color;
+  opacity: 0.4;
+  transition: all .25s ease-in-out;
+}
+
+.calendar__day-name .calendar__day-inner,
+.calendar__day-off .calendar__day-inner {
+  background: #eee;
+}
+
+.calendar__day-name .calendar__day-inner span {
+  text-transform: uppercase;
+  font-size: 11px;
+  margin-bottom: 8px;
+  text-align: center;
+  color: $base_font_color;
+}
\ No newline at end of file
index f5a959cd4c803589a0c9faced47bac765c30eb82..b0dc78cc2499910464a46d358a298e368a486c5c 100644 (file)
@@ -1,6 +1,7 @@
 .event__card {
   padding: 1rem;
   background: $white;
+  @extend .row;
   &--alt {
     @extend .event__card;
     background: $main_color_alt;
  text-transform: uppercase;
 }
 
+.event__thumbnail {
+  display: block;
+  float: left;
+  margin-right: .5rem;
+  margin-bottom: .1rem;
+}
+
 .event__description {
   padding-bottom: 1em;
   // border-bottom: 1px solid $gray;
   margin-bottom: 1em;
+  img {
+    display: block;
+  }
 }
 
 .event__meta {
@@ -28,8 +39,9 @@
   font-weight: $bold;
   text-transform: uppercase;
   color: $black;
+  margin-bottom: 1rem;
 
-  span {
+  &__inner {
     display: block;
     // float: left;
     padding: 0.3rem 0;
@@ -56,7 +68,7 @@
 
 .event__meta__location {
   display: block;
-  float: right;
+  // float: right;
   // padding: 0.3rem 0;
   text-decoration: none;
   // border-bottom: 1px solid #000;
@@ -67,7 +79,9 @@
 .event__meta__cta {
   text-transform: uppercase;
   display: block;
-  float: right;
+  // float: right;
+  padding: .5rem;
+  background: $white;
 }
 
 .event__detail,
index 73c05aa7a097325d736694215208a91aa1bbf9c6..7489c617c21272a9e815cbac37406dd8180db067 100644 (file)
@@ -16,7 +16,9 @@
     {{ video.content|safe }}
 </div>
 
-<iframe width="480" height="360" src="http://medias.ircam.fr/embed/media/{{ video.media_id }}" frameborder="0" allowfullscreen=""></iframe>
+<div class="embed-responsive">
+    <iframe src="http://medias.ircam.fr/embed/media/{{ video.media_id }}" frameborder="0" allowfullscreen=""></iframe>
+</div>
 
 <div class="video-event">
     <h2>{% trans 'Related event' %}</h2>
index b8967daff18d008a5c623d890322619bda3c1f48..16051432cd3ba66961e3fbceb43565ce3831a8d8 100644 (file)
 
 {% block event_detail_postedby %}
 {% editable event.start event.end event.location %}
-<p class="event__meta">
-    <span>
-        {{ event.start }}
-        {% if event.end %}
-        {% trans "-" %} {% if event.end|date == event.start|date %}{{ event.end|time:"TIME_FORMAT" }}{% else %}{{ event.end }}{% endif %}
-        {% endif %}
-        {% if event.location %}
-        <a href="{% url "event_list_location" event.location.slug %}" class="event__meta__location">{{ event.location }}</a>
-    </span>
+<div class="event__meta">
+        <div class="event__meta__inner split-container">
+            <div class="split-left">
+                {{ event.start }}
+                {% if event.end %}
+                <br>
+                {% if event.end|date == event.start|date %}{{ event.end|time:"TIME_FORMAT" }}{% else %}{{ event.end }}{% endif %}
+                {% endif %}
+                {% if event.location %}
+                <a href="{% url "event_list_location" event.location.slug %}" class="event__meta__location">{{ event.location }}</a>
+            </div>
+            <div class="split-right">
+                <a href="{{ event.get_absolute_url }}" class="event__meta__cta">Réserver</a>
+            </div>
+        </div>
     {% endif %}
-</p>
+</div>
 {% endeditable %}
 {% endblock %}
 {% block event_detail_commentlink %}
index 93c258477a7a2ab46439fcc5a8561c98fd0323a5..0da98be3ce2e87bccf387da635f6924dd0022adf 100644 (file)
@@ -89,8 +89,8 @@
 
     {% if event.featured_image %}
         {% block event_list_event_featured_image %}
-            <a href="{{ event.get_absolute_url }}">
-                <img class="img-thumbnail pull-left" src="{{ MEDIA_URL }}{% thumbnail event.featured_image 90 90 %}">
+            <a href="{{ event.get_absolute_url }}" class="event__thumbnail">
+                <img src="{{ MEDIA_URL }}{% thumbnail event.featured_image 90 90 %}">
             </a>
         {% endblock %}
     {% endif %}
@@ -99,6 +99,7 @@
         {% editable event.content %}
             <div class="event__description">
                 {{ event.description_from_content|safe }}
+                <a href="{{ event.get_absolute_url }}" class="event__meta__cta">{% trans "read more" %}</a>
             </div>
         {% endeditable %}
     {% endblock %}
index 580c3fbd81333480ab7741c5854a8625dc14616a..f707360fe81574243d0cf43f576cc7e58e41ddff 100644 (file)
@@ -1,15 +1,20 @@
 {% load i18n mezzanine_tags event_tags %}
 {% editable event.start event.end event.location %}
-<p class="event__meta">
-    <span>
-        {{ event.start }}
-        {% if event.end %}
-        {% trans "-" %} {% if event.end|date == event.start|date %}{{ event.end|time:"TIME_FORMAT" }}{% else %}{{ event.end }}{% endif %}
-        {% endif %}
-        {% if event.location %}
-        <a href="{% url "event_list_location" event.location.slug %}" class="event__meta__location">{{ event.location }}</a>
-    </span>
+<div class="event__meta">
+        <div class="event__meta__inner split-container">
+            <div class="split-left">
+                {{ event.start }}
+                {% if event.end %}
+                <br>
+                {% if event.end|date == event.start|date %}{{ event.end|time:"TIME_FORMAT" }}{% else %}{{ event.end }}{% endif %}
+                {% endif %}
+                {% if event.location %}
+                <a href="{% url "event_list_location" event.location.slug %}" class="event__meta__location">{{ event.location }}</a>
+            </div>
+            <div class="split-right">
+                <a href="{{ event.get_absolute_url }}" class="event__meta__cta">Réserver</a>
+            </div>
+        </div>
     {% endif %}
-</p>
-{# <a href="{{ event.get_absolute_url }}" class="event__meta__cta">{% trans "read more" %}</a> #}
+</div>
 {% endeditable %}
index c7a05cc1263ca31cb6c96e23bec8895d4e82739b..3c035fc16522dffac2a28ad0e2b9e7a1ca9569eb 100644 (file)
                 {% include "includes/user_panel.html" %}
                 {% endnevercache %}
                 <div class="panel panel-default">
-                <div class="panel-body">
-                {% block right_panel %}
-                {% ifinstalled mezzanine.twitter %}
-                {% include "twitter/tweets.html" %}
-                {% endifinstalled %}
-                {% endblock %}
-                </div>
+                    <div class="panel-body">
+                    {% block right_panel %}
+                    {% ifinstalled mezzanine.twitter %}
+                    {% include "twitter/tweets.html" %}
+                    {% endifinstalled %}
+                    {% endblock %}
+                    </div>
                 </div>
+                {% include "includes/calendar.html" %}
             </aside>
         </div>
     </div>
diff --git a/app/templates/includes/calendar.html b/app/templates/includes/calendar.html
new file mode 100644 (file)
index 0000000..3200286
--- /dev/null
@@ -0,0 +1,139 @@
+{% load i18n %}
+
+<h2 class="sidebar__title">Calendrier du festival</h2>
+
+<ul class="calendar">
+    <li class="calendar__month">
+        {# <div class="calendar__month__title">Juin / Juillet</div> #}
+        <div class="calendar__day calendar__day-name">
+            <div class="calendar__day-inner"><span>L</span></div>
+        </div>
+        <div class="calendar__day calendar__day-name">
+            <div class="calendar__day-inner"><span>M</span></div>
+        </div>
+        <div class="calendar__day calendar__day-name">
+            <div class="calendar__day-inner"><span>M</span></div>
+        </div>
+        <div class="calendar__day calendar__day-name">
+            <div class="calendar__day-inner"><span>J</span></div>
+        </div>
+        <div class="calendar__day calendar__day-name">
+            <div class="calendar__day-inner"><span>V</span></div>
+        </div>
+        <div class="calendar__day calendar__day-name">
+            <div class="calendar__day-inner"><span>S</span></div>
+        </div>
+        <div class="calendar__day calendar__day-name">
+            <div class="calendar__day-inner"><span>D</span></div>
+        </div>
+        <div class="calendar__day calendar__day-off">
+            <div class="calendar__day-inner"></div>
+        </div>
+        <div class="calendar__day calendar__day-off">
+            <div class="calendar__day-inner"></div>
+        </div>
+        <div class="calendar__day calendar__day-off">
+            <div class="calendar__day-inner"></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>2</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>3</span></div>
+        </div>
+        <div class="calendar__day calendar__day-weekend">
+            <div class="calendar__day-inner"><span>4</span></div>
+        </div>
+        <div class="calendar__day calendar__day-weekend">
+            <div class="calendar__day-inner"><span>5</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>6</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>7</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>8</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>9</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>10</span></div>
+        </div>
+        <div class="calendar__day calendar__day-weekend">
+            <div class="calendar__day-inner"><span>11</span></div>
+        </div>
+        <div class="calendar__day calendar__day-weekend">
+            <div class="calendar__day-inner"><span>12</span></div>
+        </div>
+        <div class="calendar__day calendar__day-active">
+            <div class="calendar__day-inner">
+                <span> <a href="#">13</a> </span>
+            </div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>14</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>15</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>16</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>17</span></div>
+        </div>
+        <div class="calendar__day calendar__day-active">
+            <div class="calendar__day-inner">
+                <span> <a href="#">18</a> </span>
+            </div>
+        </div>
+        <div class="calendar__day calendar__day-weekend">
+            <div class="calendar__day-inner"><span>19</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>20</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>21</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>22</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>23</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>24</span></div>
+        </div>
+        <div class="calendar__day calendar__day-weekend">
+            <div class="calendar__day-inner"><span>25</span></div>
+        </div>
+        <div class="calendar__day calendar__day-weekend">
+            <div class="calendar__day-inner"><span>26</span></div>
+        </div>
+        <div class="calendar__day" calendar__day-weekend="">
+            <div class="calendar__day-inner"><span>27</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>28</span></div>
+        </div>
+        <div class="calendar__day calendar__day-semiholiday" data-toggle="tooltip" title="" data-original-title="São Pedro (feriado municipal em concelhos como Sintra, Évora e Póvoa de Varzim)">
+            <div class="calendar__day-inner"><span>29</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>30</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>01</span></div>
+        </div>
+        <div class="calendar__day">
+            <div class="calendar__day-inner"><span>02</span></div>
+        </div>
+        <div class="calendar__day calendar__day-off">
+            <div class="calendar__day-inner"></div>
+        </div>
+    </li>
+</ul>
\ No newline at end of file