dordogne-cd24: add custom styles for links to internal pages with pictures (#63440)
This commit is contained in:
parent
6f60b50d0a
commit
53e859faa0
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
$primary-color: #f4f7fa;
|
||||
$purple: #88446b;
|
||||
$width: 1316px;
|
||||
|
||||
$font-family: Montserrat, sans-serif;
|
||||
|
|
|
@ -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 %}
|
Loading…
Reference in New Issue