dordogne-cd24: add custom styles for links to internal pages with pictures (#63440)

This commit is contained in:
Serghei Mihai 2022-03-29 15:10:30 +02:00
parent 6f60b50d0a
commit 53e859faa0
3 changed files with 66 additions and 4 deletions

View File

@ -316,7 +316,7 @@ div#tracking-code {
padding: 1em;
padding-left: 3em;
&::after {
color: #88446b;
color: $purple;
}
}
> div {
@ -337,7 +337,7 @@ div#tracking-code {
}
.add-more-items--button {
font-weight: bold;
color: #88446b;
color: $purple;
}
}
@media screen and ($max-mobile-viewport) {
@ -471,7 +471,7 @@ div#rub_service h2 {
h2, div#rub_service h3 {
font-size: 1.444rem;
color: #88446b;
color: $purple;
}
h3, div#rub_service h4 {
@ -513,7 +513,7 @@ div#registration-blocks {
div#sidebar {
margin-right: 2.5em;
h1, h2, h3 {
@include after-line(#88446b);
@include after-line($purple);
}
h2 {
margin: 0.5em;
@ -662,3 +662,51 @@ div.cell.contact-commune-rgpd, div.coordonnees-generales {
width: auto;
}
}
div.linkcell .internal-page-link {
padding: 220px 1rem 0.5rem;
background-repeat: no-repeat;
background-position: center top;
background-size: auto 195px;
box-shadow: 0px 1px 3px #aaa;
h2 {
&:first-child {
font-size: 1rem;
background: transparent;
padding: 0;
}
a {
color: $purple;
text-transform: uppercase;
}
}
&--description {
margin-left: 0.5em;
margin-right: 0.5em;
}
&--arrow {
background: $purple;
width: 1.75em;
height: 1.75rem;
display: flex;
justify-content: center;
align-items: center;
&::before {
content: '\f054'; /* fa-chevron-right */
font-family: FontAwesome;
color: white;
}
&-container {
display: flex;
justify-content: flex-end;
}
&:hover {
background: white;
border: 1px solid $purple;
text-decoration: none;
&::before {
color: $purple;
}
}
}
}

View File

@ -1,4 +1,5 @@
$primary-color: #f4f7fa;
$purple: #88446b;
$width: 1316px;
$font-family: Montserrat, sans-serif;

View File

@ -0,0 +1,13 @@
{% if cell.link_page and cell.link_page.picture %}
<div class="internal-page-link" style="background-image: url({{cell.link_page.picture.url}})">
<h2><a href="{{ url }}">{{ title }}</a></h2>
<p class="internal-page-link--description">{{ cell.link_page.description }}</p>
<div class="internal-page-link--arrow-container">
<a href="{{ url }}" class="internal-page-link--arrow"><span class="sr-only">{{ title }}</span></a>
</div>
</div>
{% else %}
<div class="links-list">
<ul><li><a href="{{url}}">{{title}}</a></li></ul>
</div>
{% endif %}