changes in menu header, content accordion and footer logos
This commit is contained in:
jorge-vitrubio
parent
6946e8f524
commit
d77d28e674
File diff suppressed because one or more lines are too long
|
|
@ -24,8 +24,6 @@
|
|||
}
|
||||
&.eu{
|
||||
&::before {
|
||||
max-width: 15rem;
|
||||
// background-image: url('../img/eu_flag_creative_europe_co_funded_black_right.svg');
|
||||
background-image: url('../img/eu_flag_creative_europe_co_funded_left.svg');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
// #. Global Styles
|
||||
// ------------------
|
||||
|
||||
[type="submit"],
|
||||
[type="submit"],
|
||||
[type="button"] {
|
||||
@extend .button;
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
select {
|
||||
width: auto;
|
||||
width: auto;
|
||||
background: #fff url("../../../../application/asset/img/select-arrow.svg") no-repeat;
|
||||
background-position: right 6px center;
|
||||
background-size: 8px;
|
||||
|
|
@ -49,7 +49,7 @@ select {
|
|||
#content {
|
||||
padding: (2 * $global-padding) $global-padding;
|
||||
@include xy-grid-container;
|
||||
|
||||
|
||||
@include breakpoint(small down) {
|
||||
padding: 0;
|
||||
margin: $global-margin;
|
||||
|
|
@ -58,7 +58,7 @@ select {
|
|||
|
||||
body:not(.browse) #content {
|
||||
@include xy-grid-container;
|
||||
padding: (2 * $global-padding) 0;
|
||||
padding: (2 * $global-padding) 0;
|
||||
|
||||
@include breakpoint(small down) {
|
||||
padding: 0;
|
||||
|
|
@ -80,7 +80,7 @@ body:not(.browse) #content {
|
|||
|
||||
body.vertical-menu {
|
||||
@include breakpoint(medium up) {
|
||||
background-color: $primary-color;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -95,7 +95,7 @@ body.vertical-menu #content {
|
|||
background-color: $white;
|
||||
@include xy-cell(auto, $gutters: 0);
|
||||
max-width: none;
|
||||
min-height: 90vh;
|
||||
min-height: 90vh;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -123,7 +123,7 @@ body.vertical-menu #user-bar ~ #content {
|
|||
padding: (.25 * $global-padding);
|
||||
background-color: #fff;
|
||||
opacity: 0;
|
||||
|
||||
|
||||
&:focus {
|
||||
z-index: 1000;
|
||||
opacity: 1;
|
||||
|
|
@ -200,7 +200,7 @@ header .top-bar-left {
|
|||
|
||||
header .top-bar {
|
||||
@include breakpoint(small down) {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -208,7 +208,7 @@ header .top-bar {
|
|||
display: inline-block;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
|
||||
|
||||
button {
|
||||
margin: 0 $global-margin 0 0;
|
||||
background-color: transparent;
|
||||
|
|
@ -221,40 +221,40 @@ body.vertical-menu header {
|
|||
width: 100%;
|
||||
|
||||
@include breakpoint(large up) {
|
||||
padding: $global-padding;
|
||||
padding: $global-padding;
|
||||
@include xy-cell(2, $gutters: 0);
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
.title-bar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.title-bar button {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
.site-title h1 {
|
||||
font-size: 1.125 * $global-font-size;
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.site-title img {
|
||||
max-height: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.vertical.menu {
|
||||
margin: $global-margin 0;
|
||||
}
|
||||
|
||||
|
||||
.vertical.menu li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.vertical.menu li a {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
|
@ -267,7 +267,7 @@ body.vertical-menu header {
|
|||
|
||||
body.vertical-menu .vertical.menu.nested .active > a {
|
||||
position: relative;
|
||||
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -291,9 +291,9 @@ body.vertical-menu header .desktop {
|
|||
footer {
|
||||
@include xy-grid-container;
|
||||
padding: (2 * $global-padding) 0;
|
||||
|
||||
|
||||
@include breakpoint(small down) {
|
||||
margin: 0 $global-margin;
|
||||
// margin: 0 $global-margin;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -304,7 +304,7 @@ body.vertical-menu footer {
|
|||
margin: 0;
|
||||
padding: $global-padding;
|
||||
min-height: 10vh;
|
||||
|
||||
|
||||
@include breakpoint(large up) {
|
||||
width: calc(100% - #{xy-cell-size(2)});
|
||||
margin-left: xy-cell-size(2);
|
||||
|
|
@ -323,7 +323,7 @@ body.vertical-menu footer {
|
|||
|
||||
.browse-control-mobile {
|
||||
display: none;
|
||||
|
||||
|
||||
@include breakpoint(small down) {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
|
|
@ -339,7 +339,7 @@ body.vertical-menu footer {
|
|||
font-weight: 900;
|
||||
margin-left: (.5 * $global-margin);
|
||||
}
|
||||
|
||||
|
||||
&.closed:after {
|
||||
content: "\f055";
|
||||
}
|
||||
|
|
@ -360,7 +360,7 @@ body.vertical-menu footer {
|
|||
align-items: center;
|
||||
margin: 0 (-.5 * $global-margin);
|
||||
font-size: .875 * $global-font-size;
|
||||
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
|
|
@ -381,17 +381,17 @@ body.vertical-menu footer {
|
|||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
&.closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.sorting,
|
||||
.omeka-pagination,
|
||||
.advanced-search {
|
||||
margin-bottom: $global-margin;
|
||||
}
|
||||
|
||||
|
||||
.advanced-search {
|
||||
order: 3;
|
||||
}
|
||||
|
|
@ -420,7 +420,7 @@ body.vertical-menu footer {
|
|||
.resource-grid {
|
||||
list-style-type: none;
|
||||
margin: (2 * $global-margin) 0;
|
||||
|
||||
|
||||
@include breakpoint(small down) {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -448,7 +448,7 @@ body.vertical-menu footer {
|
|||
order: 2;
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
|
||||
|
||||
@include breakpoint(medium down) {
|
||||
margin: 0;
|
||||
width: 50%;
|
||||
|
|
@ -462,7 +462,7 @@ body.vertical-menu footer {
|
|||
.resource-list .resource-meta:not(:only-child) {
|
||||
@include xy-cell(9);
|
||||
order: 1;
|
||||
|
||||
|
||||
@include breakpoint(small down) {
|
||||
width: 50%;
|
||||
}
|
||||
|
|
@ -477,7 +477,7 @@ body.vertical-menu footer {
|
|||
.resource-grid .resource {
|
||||
width: 25%;
|
||||
padding: $global-padding;
|
||||
|
||||
|
||||
@include breakpoint(medium down) {
|
||||
width: 50%;
|
||||
}
|
||||
|
|
@ -486,7 +486,7 @@ body.vertical-menu footer {
|
|||
.description.ellipsis {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -494,7 +494,7 @@ body.vertical-menu footer {
|
|||
position: relative;
|
||||
max-height: 6.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -506,13 +506,13 @@ body.vertical-menu footer {
|
|||
}
|
||||
}
|
||||
|
||||
.omeka-pagination {
|
||||
.omeka-pagination {
|
||||
@include breakpoint(medium) {
|
||||
@include xy-cell(4);
|
||||
}
|
||||
}
|
||||
|
||||
.omeka-pagination,
|
||||
.omeka-pagination,
|
||||
.omeka-pagination form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -572,7 +572,7 @@ body.vertical-menu footer {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
word-break: break-word;
|
||||
word-break: break-word;
|
||||
|
||||
h2 {
|
||||
margin-right: $global-margin;
|
||||
|
|
@ -587,7 +587,7 @@ body.vertical-menu footer {
|
|||
order: 1;
|
||||
@include xy-cell(8);
|
||||
margin-left: 0;
|
||||
|
||||
|
||||
@include breakpoint(medium down) {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
|
|
@ -599,7 +599,7 @@ body.vertical-menu footer {
|
|||
order: 2;
|
||||
@include xy-cell(4);
|
||||
margin-right: 0;
|
||||
|
||||
|
||||
@include breakpoint(medium down) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
|
|
@ -645,12 +645,12 @@ body.vertical-menu footer {
|
|||
|
||||
.inline .property {
|
||||
display: flex;
|
||||
|
||||
|
||||
dt {
|
||||
@include xy-cell(4);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
.values {
|
||||
@include xy-cell(8);
|
||||
}
|
||||
|
|
@ -704,7 +704,7 @@ body.vertical-menu footer {
|
|||
#advanced-search .remove-value {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
|
||||
@include breakpoint(small down) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -760,13 +760,13 @@ body.vertical-menu footer {
|
|||
.wide.sub-menu a {
|
||||
@include breakpoint(small down) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wide.sub-menu + .blocks {
|
||||
.wide.sub-menu + .blocks {
|
||||
@include xy-cell(9);
|
||||
|
||||
|
||||
@include breakpoint(small down) {
|
||||
@include xy-cell(12);
|
||||
}
|
||||
|
|
@ -776,7 +776,7 @@ body.vertical-menu footer {
|
|||
float: left;
|
||||
margin: 0 $global-margin $global-margin 0;
|
||||
max-width: 40%;
|
||||
|
||||
|
||||
@include breakpoint(small down) {
|
||||
max-width: 25%;
|
||||
}
|
||||
|
|
@ -785,7 +785,7 @@ body.vertical-menu footer {
|
|||
.right {
|
||||
float: right;
|
||||
margin: 0 0 $global-margin $global-margin;
|
||||
max-width: 40%;
|
||||
max-width: 40%;
|
||||
|
||||
@include breakpoint(small down) {
|
||||
max-width: 25%;
|
||||
|
|
@ -823,22 +823,22 @@ body.vertical-menu footer {
|
|||
.item-with-metadata .resource.show {
|
||||
display: flex;
|
||||
margin: (2 * $global-margin) 0;
|
||||
|
||||
|
||||
.media-list {
|
||||
order: 1;
|
||||
@include xy-cell(3);
|
||||
text-align: right;
|
||||
|
||||
|
||||
.media {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
dl:not(:only-child) {
|
||||
order: 2;
|
||||
@include xy-cell(9);
|
||||
|
|
@ -866,12 +866,12 @@ body.vertical-menu footer {
|
|||
& ~ * {
|
||||
@include xy-cell(9);
|
||||
float: right;
|
||||
|
||||
|
||||
@include breakpoint(small down) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -880,15 +880,15 @@ body.vertical-menu footer {
|
|||
@extend .menu;
|
||||
@extend .vertical;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
ul ul {
|
||||
@extend .nested;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.preview-block .preview-header {
|
||||
|
|
@ -897,7 +897,7 @@ body.vertical-menu footer {
|
|||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid $light-gray;
|
||||
align-items: flex-end;
|
||||
|
||||
|
||||
a {
|
||||
margin-bottom: (.5 * $global-margin);
|
||||
}
|
||||
|
|
@ -916,11 +916,11 @@ body.vertical-menu footer {
|
|||
|
||||
.results ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
padding-left: 0;
|
||||
|
||||
@include breakpoint(medium up) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -940,9 +940,9 @@ body.vertical-menu footer {
|
|||
|
||||
.results > ul > li {
|
||||
margin-bottom: $global-padding;
|
||||
|
||||
|
||||
@include breakpoint(medium up) {
|
||||
width: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -958,7 +958,7 @@ body.vertical-menu footer {
|
|||
@include breakpoint(medium up) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
[type="text"],
|
||||
[type="submit"] {
|
||||
margin: 0;
|
||||
|
|
@ -972,7 +972,7 @@ body.vertical-menu footer {
|
|||
|
||||
.sitewide-search-form ~ .advanced-search {
|
||||
display: block;
|
||||
|
||||
|
||||
@include breakpoint(small down) {
|
||||
margin: (-.5 * $global-margin) 0 $global-margin;
|
||||
}
|
||||
|
|
@ -983,17 +983,17 @@ body.vertical-menu footer {
|
|||
|
||||
@include breakpoint(medium up) {
|
||||
width: 50%;
|
||||
float: left;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.results > h3 {
|
||||
border-bottom: 1px solid $light-gray;
|
||||
border-bottom: 1px solid $light-gray;
|
||||
}
|
||||
|
||||
.sitewide-search-form ~ .omeka-pagination {
|
||||
margin: (-1 * $global-margin) 0 $global-margin;
|
||||
|
||||
margin: (-1 * $global-margin) 0 $global-margin;
|
||||
|
||||
@include breakpoint(medium up) {
|
||||
margin: (.5 * $global-margin) 0 $global-margin;
|
||||
text-align: right;
|
||||
|
|
@ -1015,16 +1015,16 @@ body.vertical-menu footer {
|
|||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
|
||||
@include breakpoint(medium up) {
|
||||
columns: 2;
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
padding: $global-padding 0;
|
||||
border-bottom: 1px solid $light-gray;
|
||||
}
|
||||
|
||||
|
||||
& + a {
|
||||
display: block;
|
||||
margin-top: $global-margin;
|
||||
|
|
@ -1039,7 +1039,7 @@ body.vertical-menu footer {
|
|||
[id^="numeric-"] .inputs,
|
||||
[id*="numeric-"] .inputs {
|
||||
display: flex;
|
||||
|
||||
|
||||
@include breakpoint(small down) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
@ -1059,7 +1059,7 @@ body.vertical-menu footer {
|
|||
.inputs label.numeric-toggle-time.button {
|
||||
border: 0;
|
||||
display: inline-flex;
|
||||
|
||||
|
||||
@include breakpoint(small down) {
|
||||
margin: (.25 * $global-margin) 0 0;
|
||||
}
|
||||
|
|
@ -1069,17 +1069,17 @@ body.vertical-menu footer {
|
|||
.inputs .numeric-time-inputs,
|
||||
.inputs .numeric-datetime-inputs {
|
||||
margin: 0 0 0 (.25 * $global-margin);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small down) {
|
||||
#advanced-search [type="number"],
|
||||
#advanced-search select {
|
||||
width: 100%;
|
||||
margin: (.25 * $global-margin) 0;
|
||||
margin: (.25 * $global-margin) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mapping-block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -148,6 +148,7 @@ main {
|
|||
|
||||
.collections-list {
|
||||
@include xy-grid;
|
||||
width:100vw;
|
||||
header,main{
|
||||
@include xy-cell(12);
|
||||
@include flex;
|
||||
|
|
@ -162,12 +163,13 @@ main {
|
|||
main {
|
||||
@include xy-grid;
|
||||
article{
|
||||
// text-align:center;
|
||||
@include card-container();
|
||||
@include breakpoint(small){
|
||||
@include xy-cell();
|
||||
font-size: $global-font-size*0.7;
|
||||
}
|
||||
@include breakpoint(medium){
|
||||
font-size: $global-font-size*1;
|
||||
}
|
||||
@include breakpoint(large){
|
||||
}
|
||||
|
|
@ -180,12 +182,26 @@ main {
|
|||
}
|
||||
}
|
||||
.accordion-content {
|
||||
@include xy-grid(12);
|
||||
figure {
|
||||
@include xy-cell(4);
|
||||
}
|
||||
p {
|
||||
@include xy-cell(6);
|
||||
section {
|
||||
@include xy-grid;
|
||||
@include breakpoint(small){
|
||||
figure {
|
||||
@include xy-cell(12);
|
||||
}
|
||||
p {
|
||||
@include xy-cell(12);
|
||||
}
|
||||
}
|
||||
@include breakpoint(medium){
|
||||
figure {
|
||||
@include xy-cell(3);
|
||||
}
|
||||
p {
|
||||
@include xy-cell(9);
|
||||
}
|
||||
}
|
||||
@include breakpoint(large){
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -234,11 +250,12 @@ main {
|
|||
@include xy-grid();
|
||||
.slide {
|
||||
@include xy-grid;
|
||||
justify-content: center;
|
||||
@include breakpoint(small){
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
padding: $global-padding * 3;
|
||||
.textwidget {
|
||||
padding: $global-padding * 3;
|
||||
}
|
||||
}
|
||||
@include breakpoint(medium){
|
||||
|
|
@ -331,7 +348,6 @@ main {
|
|||
align-content: center;
|
||||
align-self: center;
|
||||
margin: $global-margin auto;
|
||||
justify-content: center;
|
||||
&:first-child {
|
||||
color: unset;
|
||||
background-color: unset;
|
||||
|
|
|
|||
|
|
@ -31,9 +31,19 @@ footer {
|
|||
}
|
||||
&.eu {
|
||||
&::before {
|
||||
margin-top:unset;
|
||||
max-width:100%;
|
||||
max-height: 4rem;
|
||||
@include breakpoint(small) {
|
||||
// background-image: url('../img/eu_flag_creative_europe_co_funded_black_right.svg');
|
||||
background-position-x: right;
|
||||
max-width: 50vw;
|
||||
margin-top:unset;
|
||||
}
|
||||
@include breakpoint(medium) {
|
||||
background-position-x: left;
|
||||
margin-top:unset;
|
||||
max-width:100%;
|
||||
max-height: 4rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -76,4 +86,3 @@ footer {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
min-width: 14rem;
|
||||
text-align: center;
|
||||
}
|
||||
@include breakpoint(medium){
|
||||
@include breakpoint(large){
|
||||
@include xy-cell(shrink);
|
||||
@include flex-align(left, middle);
|
||||
text-align: unset;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
@include breakpoint(small){
|
||||
@include breakpoint(small) {
|
||||
@include xy-cell(12);
|
||||
@include flex;
|
||||
@include flex-align(center, middle);
|
||||
|
|
@ -32,15 +32,22 @@
|
|||
padding: 0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.menu a {
|
||||
padding: $global-padding*0.7 $global-padding*0.5;
|
||||
}
|
||||
}
|
||||
@include breakpoint(medium){
|
||||
@include breakpoint(medium) {
|
||||
menu {
|
||||
font-size: $global-font-size*1.5;
|
||||
}
|
||||
}
|
||||
@include breakpoint(large) {
|
||||
@include xy-cell(auto);
|
||||
@include flex;
|
||||
@include flex-align(right, middle);
|
||||
menu {
|
||||
margin: inherit;
|
||||
padding: inherit;
|
||||
font-size: $global-font-size*1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ $summary = $showSummary ? $site->summary() : null;
|
|||
</li>
|
||||
</ul>
|
||||
</a>
|
||||
<div class="accordion-content" data-tab-content>
|
||||
<aside class="accordion-content" data-tab-content>
|
||||
<figure>
|
||||
<?php if ($site_meta_values != null): ?>
|
||||
<img src="<?= $site_meta_values['thumbnail']; ?>" />
|
||||
|
|
@ -39,5 +39,5 @@ $summary = $showSummary ? $site->summary() : null;
|
|||
<?php endif; ?>
|
||||
<a class="button small" href="<?= $site->siteUrl() ?>">View</a>
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue