footer elements are almost displayed

This commit is contained in:
Bachir Soussi Chiadmi
2018-01-02 16:32:17 +01:00
parent 9c6a1ce9a9
commit 7b9de31a42
70 changed files with 6581 additions and 65 deletions
@@ -28,7 +28,138 @@ header[role="banner"] {
outline: 1px solid blue; }
main[role="main"] {
outline: 1px solid green; }
outline: 1px solid green;
background-color: rgba(255, 255, 255, 0.9); }
footer[role="contentinfo"] {
outline: 1px solid pink; }
outline: 1px solid pink;
position: fixed;
bottom: 0;
width: 100%; }
canvas#edlp-map {
outline: 1px solid grey; }
footer {
text-align: center; }
footer > .region {
outline: 1px dotted pink; }
footer .region-footer-left {
float: left;
text-align: left; }
footer .region-footer-center {
display: inline-block;
margin: 0 auto;
text-align: center; }
footer .region-footer-right {
float: right;
text-align: right;
padding-right: 5em; }
footer nav.block-menu {
display: inline-block; }
footer nav.block-menu ul {
margin: 0;
padding: 0; }
footer nav.block-menu ul li {
display: inline-block;
position: relative;
list-style: none;
margin: 0 1.5em 0 0;
padding: 0; }
footer nav.block-menu ul li a {
position: absolute;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 0.756em;
white-space: nowrap; }
footer .block-language {
display: inline-block; }
footer .block-language ul {
position: absolute;
margin: 0;
padding: 0 0 0 0.5em;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg); }
footer .block-language ul li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block; }
footer .block-language ul li:last-of-type:before {
content: "/";
margin: 0 0.2em; }
footer .block-language ul li a {
color: inherit;
text-decoration: none;
font-size: 0.756em; }
footer .block-block-edlp-entrees {
display: inline-block; }
footer .block-block-edlp-entrees ul li {
display: inline-block;
position: relative;
list-style: none;
margin: 0 1.5em 0 0;
padding: 0; }
footer .block-block-edlp-entrees ul li a {
position: absolute;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 0.756em;
white-space: nowrap; }
footer .block-block-edlp-entrees ul li a:before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
border: 1px solid #000;
margin-right: 0.5em; }
footer .block-block-edlp-entrees ul li a.term-134:before {
border-color: #2b8f2f; }
footer .block-block-edlp-entrees ul li a.term-121:before {
border-color: #3a33b6; }
footer .block-block-edlp-entrees ul li a.term-125:before {
border-color: #2c9f57; }
footer .block-block-edlp-entrees ul li a.term-119:before {
border-color: #c48978; }
footer .block-block-edlp-entrees ul li a.term-132:before {
border-color: #5270bb; }
footer .block-block-edlp-entrees ul li a.term-122:before {
border-color: #fb54d3; }
footer .block-block-edlp-entrees ul li a.term-129:before {
border-color: #e07483; }
footer .block-block-edlp-entrees ul li a.term-120:before {
border-color: #655845; }
footer .block-block-edlp-entrees ul li a.term-130:before {
border-color: #7e0868; }
footer .block-block-edlp-entrees ul li a.term-118:before {
border-color: #0e7121; }
footer .block-block-edlp-entrees ul li a.term-127:before {
border-color: #dabd42; }
footer .block-block-edlp-entrees ul li a.term-133:before {
border-color: #0399bb; }
footer .block-block-edlp-entrees ul li a.term-128:before {
border-color: #399a1c; }
footer .block-block-edlp-entrees ul li a.term-124:before {
border-color: #708540; }
footer .block-block-edlp-entrees ul li a.term-116:before {
border-color: #191bff; }
footer .block-block-edlp-entrees ul li a.term-117:before {
border-color: #279d84; }
footer .block-block-edlp-entrees ul li a.term-131:before {
border-color: #5219ab; }
footer .block-block-edlp-entrees ul li a.term-126:before {
border-color: #d49cb6; }
footer .block-block-edlp-entrees ul li a.term-123:before {
border-color: #497715; }
@@ -40,8 +40,133 @@ header[role="banner"]{
main[role="main"]{
outline:1px solid green;
background-color: rgba(255,255,255, 0.9);
}
footer[role="contentinfo"]{
outline: 1px solid pink;
position: fixed;
bottom:0;
width:100%;
}
canvas#edlp-map{
outline: 1px solid grey;
}
@mixin oblique-list {
display: inline-block;
position: relative;
list-style: none;
margin: 0 1.5em 0 0;
// width:2em; height:10em;
padding: 0;
a{
position: absolute;
transform-origin: left bottom;
transform: rotateZ(-45deg);
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 0.756em;
white-space: nowrap;
}
}
footer{
text-align: center;
>.region{
outline: 1px dotted pink;
}
.region-footer-left{
float: left;
text-align: left;
}
.region-footer-center{
display: inline-block;
margin: 0 auto;
text-align: center;
}
.region-footer-right{
float: right;
text-align: right;
padding-right: 5em;
}
nav.block-menu{
display: inline-block;
ul{
margin:0;
padding:0;
li{
@include oblique-list;
}
}
}
.block-language{
display: inline-block;
ul{
position: absolute;
margin:0;
padding:0 0 0 0.5em;
transform-origin: left bottom;
transform: rotateZ(-45deg);
li{
margin:0; padding:0;
list-style: none;
display: inline-block;
&:last-of-type{
&:before{
content:"/";
margin:0 0.2em;
}
}
a{
color: inherit;
text-decoration: none;
font-size: 0.756em;
}
}
}
}
.block-block-edlp-entrees{
display: inline-block;
ul{
li{
@include oblique-list;
a{
&:before{
content: "";
display:inline-block;
$sq:7px;
width: $sq; height:$sq;
border: 1px solid #000;
margin-right: 0.5em;
}
&.term-134:before{border-color: $entree-color-134;}
&.term-121:before{border-color: $entree-color-121;}
&.term-125:before{border-color: $entree-color-125;}
&.term-119:before{border-color: $entree-color-119;}
&.term-132:before{border-color: $entree-color-132;}
&.term-122:before{border-color: $entree-color-122;}
&.term-129:before{border-color: $entree-color-129;}
&.term-120:before{border-color: $entree-color-120;}
&.term-130:before{border-color: $entree-color-130;}
&.term-118:before{border-color: $entree-color-118;}
&.term-127:before{border-color: $entree-color-127;}
&.term-133:before{border-color: $entree-color-133;}
&.term-128:before{border-color: $entree-color-128;}
&.term-124:before{border-color: $entree-color-124;}
&.term-116:before{border-color: $entree-color-116;}
&.term-117:before{border-color: $entree-color-117;}
&.term-131:before{border-color: $entree-color-131;}
&.term-126:before{border-color: $entree-color-126;}
&.term-123:before{border-color: $entree-color-123;}
}
}
}
}
}
@@ -1,21 +1,21 @@
$130:rgb(75, 143, 126);
$121:rgb(134, 142, 36);
$134:rgb(43, 143, 47);
$121:rgb(58, 51, 182);
$125:rgb(44, 159, 87);
$119:rgb(196, 137, 120);
$132:rgb(82, 112, 187);
$122:rgb(251, 84, 211);
$129:rgb(224, 116, 131);
$120:rgb(101, 88, 69);
$130:rgb(126, 8, 104);
$118:rgb(14, 113, 33);
$127:rgb(218, 189, 66);
$133:rgb(3, 153, 187);
$128:rgb(57, 154, 28);
$124:rgb(112, 133, 64);
$116:rgb(25, 27, 255);
$117:rgb(39, 157, 132);
$131:rgb(82, 25, 171);
$126:rgb(212, 156, 182);
$123:rgb(73, 119, 21);
$entree-color-130: rgb(75, 143, 126);
$entree-color-121: rgb(134, 142, 36);
$entree-color-134: rgb(43, 143, 47);
$entree-color-121: rgb(58, 51, 182);
$entree-color-125: rgb(44, 159, 87);
$entree-color-119: rgb(196, 137, 120);
$entree-color-132: rgb(82, 112, 187);
$entree-color-122: rgb(251, 84, 211);
$entree-color-129: rgb(224, 116, 131);
$entree-color-120: rgb(101, 88, 69);
$entree-color-130: rgb(126, 8, 104);
$entree-color-118: rgb(14, 113, 33);
$entree-color-127: rgb(218, 189, 66);
$entree-color-133: rgb(3, 153, 187);
$entree-color-128: rgb(57, 154, 28);
$entree-color-124: rgb(112, 133, 64);
$entree-color-116: rgb(25, 27, 255);
$entree-color-117: rgb(39, 157, 132);
$entree-color-131: rgb(82, 25, 171);
$entree-color-126: rgb(212, 156, 182);
$entree-color-123: rgb(73, 119, 21);
@@ -0,0 +1,18 @@
bartik.mobile:
label: mobile
mediaQuery: ''
weight: 0
multipliers:
- 1x
bartik.narrow:
label: narrow
mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
weight: 1
multipliers:
- 1x
bartik.wide:
label: wide
mediaQuery: 'all and (min-width: 851px)'
weight: 2
multipliers:
- 1x
@@ -15,17 +15,9 @@ libraries:
# - core/modules/system/css/system.theme.css
# - core/modules/views/css/views.module.css
# regions:
# content: Content
# content_top: 'Content Top'
# content_bottom: 'Content Bottom'
# nav: Navigation
# front_one: 'Front One'
# front_two: 'Front Two'
# front_three: 'Front Three'
# front_four: 'Front Four'
# front_five: 'Front Five'
# front_six: 'Front Six'
# front_seven: 'Front Seven'
# front_eight: 'Front Eight'
# footer: Footer
regions:
header: Header
content: Content
footer_left: 'Footer Left'
footer_center: 'Footer Center'
footer_right: 'Footer Right'
@@ -48,15 +48,6 @@
{{ page.header }}
</header>
{{ page.primary_menu }}
{{ page.secondary_menu }}
{{ page.breadcrumb }}
{{ page.highlighted }}
{{ page.help }}
<main role="main">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
@@ -64,23 +55,14 @@
{{ page.content }}
</div>{# /.layout-content #}
{% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endif %}
{% if page.sidebar_second %}
<aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
</main>
{% if page.footer %}
{% if page.footer_left or page.footer_center or page.footer_right %}
<footer role="contentinfo">
{{ page.footer }}
{{ page.footer_left }}
{{ page.footer_center }}
{{ page.footer_right }}
</footer>
{% endif %}
@@ -0,0 +1,57 @@
{#
/**
* @file
* Default theme implementation for a set of links.
*
* Available variables:
* - attributes: Attributes for the UL containing the list of links.
* - links: Links to be output.
* Each link will have the following elements:
* - title: The link text.
* - url: The link URL. If omitted, the 'title' is shown as a plain text
* item in the links list. If 'url' is supplied, the entire link is passed
* to l() as its $options parameter.
* - attributes: (optional) HTML attributes for the anchor, or for the <span>
* tag if no 'url' is supplied.
* - heading: (optional) A heading to precede the links.
* - text: The heading text.
* - level: The heading level (e.g. 'h2', 'h3').
* - attributes: (optional) A keyed list of attributes for the heading.
* If the heading is a string, it will be used as the text of the heading and
* the level will default to 'h2'.
*
* Headings should be used on navigation menus and any list of links that
* consistently appears on multiple pages. To make the heading invisible use
* the 'visually-hidden' CSS class. Do not use 'display:none', which
* removes it from screen readers and assistive technology. Headings allow
* screen reader and keyboard only users to navigate to or skip the links.
* See http://juicystudio.com/article/screen-readers-display-none.php and
* http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
*
* @see template_preprocess_links()
*
* @ingroup themeable
*/
#}
{% if links -%}
{%- if heading -%}
{%- if heading.level -%}
<{{ heading.level }}{{ heading.attributes }}>{{ heading.text }}</{{ heading.level }}>
{%- else -%}
<h2{{ heading.attributes }}>{{ heading.text }}</h2>
{%- endif -%}
{%- endif -%}
<ul{{ attributes }}>
{%- for item in links -%}
<li{{ item.attributes }}>
{%- if item.link -%}
<a href="{{ item.link.url }}">{{ item.text|slice(0,2) }}</a>
{%- elseif item.text_attributes -%}
<span{{ item.text_attributes }}>{{ item.text }}</span>
{%- else -%}
{{ item.text }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{%- endif %}