arcHIVE-tech/Arc-hive-omeka-theme
arcHIVE-tech
/
Arc-hive-omeka-theme
4
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

changes in menu header, content accordion and footer logos

This commit is contained in:
jorge-vitrubio 2021-07-06 12:25:02 +02:00
parent 6946e8f524
commit d77d28e674
7 changed files with 129 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
asset/css/default.css
View File

File diff suppressed because one or more lines are too long

2
asset/scss/global/_branding.scss
View File

@ -24,8 +24,6 @@
} }
&.eu{ &.eu{
&::before { &::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'); background-image: url('../img/eu_flag_creative_europe_co_funded_left.svg');
} }
} }

154
asset/scss/global/_omeka.scss
View File

@ -11,7 +11,7 @@
// #. Global Styles // #. Global Styles
// ------------------ // ------------------
[type="submit"], [type="submit"],
[type="button"] { [type="button"] {
@extend .button; @extend .button;
} }
@ -28,7 +28,7 @@
} }
select { select {
width: auto; width: auto;
background: #fff url("../../../../application/asset/img/select-arrow.svg") no-repeat; background: #fff url("../../../../application/asset/img/select-arrow.svg") no-repeat;
background-position: right 6px center; background-position: right 6px center;
background-size: 8px; background-size: 8px;
@ -49,7 +49,7 @@ select {
#content { #content {
padding: (2 * $global-padding) $global-padding; padding: (2 * $global-padding) $global-padding;
@include xy-grid-container; @include xy-grid-container;
@include breakpoint(small down) { @include breakpoint(small down) {
padding: 0; padding: 0;
margin: $global-margin; margin: $global-margin;
@ -58,7 +58,7 @@ select {
body:not(.browse) #content { body:not(.browse) #content {
@include xy-grid-container; @include xy-grid-container;
padding: (2 * $global-padding) 0; padding: (2 * $global-padding) 0;
@include breakpoint(small down) { @include breakpoint(small down) {
padding: 0; padding: 0;
@ -80,7 +80,7 @@ body:not(.browse) #content {
body.vertical-menu { body.vertical-menu {
@include breakpoint(medium up) { @include breakpoint(medium up) {
background-color: $primary-color; background-color: $primary-color;
} }
} }
@ -95,7 +95,7 @@ body.vertical-menu #content {
background-color: $white; background-color: $white;
@include xy-cell(auto, $gutters: 0); @include xy-cell(auto, $gutters: 0);
max-width: none; max-width: none;
min-height: 90vh; min-height: 90vh;
margin: 0; margin: 0;
} }
} }
@ -123,7 +123,7 @@ body.vertical-menu #user-bar ~ #content {
padding: (.25 * $global-padding); padding: (.25 * $global-padding);
background-color: #fff; background-color: #fff;
opacity: 0; opacity: 0;
&:focus { &:focus {
z-index: 1000; z-index: 1000;
opacity: 1; opacity: 1;
@ -200,7 +200,7 @@ header .top-bar-left {
header .top-bar { header .top-bar {
@include breakpoint(small down) { @include breakpoint(small down) {
padding: 0; padding: 0;
} }
} }
@ -208,7 +208,7 @@ header .top-bar {
display: inline-block; display: inline-block;
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
button { button {
margin: 0 $global-margin 0 0; margin: 0 $global-margin 0 0;
background-color: transparent; background-color: transparent;
@ -221,40 +221,40 @@ body.vertical-menu header {
width: 100%; width: 100%;
@include breakpoint(large up) { @include breakpoint(large up) {
padding: $global-padding; padding: $global-padding;
@include xy-cell(2, $gutters: 0); @include xy-cell(2, $gutters: 0);
} }
a { a {
color: $white; color: $white;
} }
.title-bar { .title-bar {
display: flex; display: flex;
} }
.title-bar button { .title-bar button {
color: $white; color: $white;
} }
.site-title h1 { .site-title h1 {
font-size: 1.125 * $global-font-size; font-size: 1.125 * $global-font-size;
font-weight: bold; font-weight: bold;
} }
.site-title img { .site-title img {
max-height: none; max-height: none;
max-width: 100%; max-width: 100%;
} }
.vertical.menu { .vertical.menu {
margin: $global-margin 0; margin: $global-margin 0;
} }
.vertical.menu li { .vertical.menu li {
margin: 0; margin: 0;
} }
.vertical.menu li a { .vertical.menu li a {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
@ -267,7 +267,7 @@ body.vertical-menu header {
body.vertical-menu .vertical.menu.nested .active > a { body.vertical-menu .vertical.menu.nested .active > a {
position: relative; position: relative;
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
@ -291,9 +291,9 @@ body.vertical-menu header .desktop {
footer { footer {
@include xy-grid-container; @include xy-grid-container;
padding: (2 * $global-padding) 0; padding: (2 * $global-padding) 0;
@include breakpoint(small down) { @include breakpoint(small down) {
margin: 0 $global-margin; // margin: 0 $global-margin;
} }
} }
@ -304,7 +304,7 @@ body.vertical-menu footer {
margin: 0; margin: 0;
padding: $global-padding; padding: $global-padding;
min-height: 10vh; min-height: 10vh;
@include breakpoint(large up) { @include breakpoint(large up) {
width: calc(100% - #{xy-cell-size(2)}); width: calc(100% - #{xy-cell-size(2)});
margin-left: xy-cell-size(2); margin-left: xy-cell-size(2);
@ -323,7 +323,7 @@ body.vertical-menu footer {
.browse-control-mobile { .browse-control-mobile {
display: none; display: none;
@include breakpoint(small down) { @include breakpoint(small down) {
display: inline-block; display: inline-block;
float: right; float: right;
@ -339,7 +339,7 @@ body.vertical-menu footer {
font-weight: 900; font-weight: 900;
margin-left: (.5 * $global-margin); margin-left: (.5 * $global-margin);
} }
&.closed:after { &.closed:after {
content: "\f055"; content: "\f055";
} }
@ -360,7 +360,7 @@ body.vertical-menu footer {
align-items: center; align-items: center;
margin: 0 (-.5 * $global-margin); margin: 0 (-.5 * $global-margin);
font-size: .875 * $global-font-size; font-size: .875 * $global-font-size;
input, input,
select, select,
button, button,
@ -381,17 +381,17 @@ body.vertical-menu footer {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
} }
&.closed { &.closed {
display: none; display: none;
} }
.sorting, .sorting,
.omeka-pagination, .omeka-pagination,
.advanced-search { .advanced-search {
margin-bottom: $global-margin; margin-bottom: $global-margin;
} }
.advanced-search { .advanced-search {
order: 3; order: 3;
} }
@ -420,7 +420,7 @@ body.vertical-menu footer {
.resource-grid { .resource-grid {
list-style-type: none; list-style-type: none;
margin: (2 * $global-margin) 0; margin: (2 * $global-margin) 0;
@include breakpoint(small down) { @include breakpoint(small down) {
margin: 0; margin: 0;
} }
@ -448,7 +448,7 @@ body.vertical-menu footer {
order: 2; order: 2;
text-align: center; text-align: center;
width: 25%; width: 25%;
@include breakpoint(medium down) { @include breakpoint(medium down) {
margin: 0; margin: 0;
width: 50%; width: 50%;
@ -462,7 +462,7 @@ body.vertical-menu footer {
.resource-list .resource-meta:not(:only-child) { .resource-list .resource-meta:not(:only-child) {
@include xy-cell(9); @include xy-cell(9);
order: 1; order: 1;
@include breakpoint(small down) { @include breakpoint(small down) {
width: 50%; width: 50%;
} }
@ -477,7 +477,7 @@ body.vertical-menu footer {
.resource-grid .resource { .resource-grid .resource {
width: 25%; width: 25%;
padding: $global-padding; padding: $global-padding;
@include breakpoint(medium down) { @include breakpoint(medium down) {
width: 50%; width: 50%;
} }
@ -486,7 +486,7 @@ body.vertical-menu footer {
.description.ellipsis { .description.ellipsis {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 4; -webkit-line-clamp: 4;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
@ -494,7 +494,7 @@ body.vertical-menu footer {
position: relative; position: relative;
max-height: 6.5rem; max-height: 6.5rem;
overflow: hidden; overflow: hidden;
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
@ -506,13 +506,13 @@ body.vertical-menu footer {
} }
} }
.omeka-pagination { .omeka-pagination {
@include breakpoint(medium) { @include breakpoint(medium) {
@include xy-cell(4); @include xy-cell(4);
} }
} }
.omeka-pagination, .omeka-pagination,
.omeka-pagination form { .omeka-pagination form {
display: flex; display: flex;
align-items: center; align-items: center;
@ -572,7 +572,7 @@ body.vertical-menu footer {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
word-break: break-word; word-break: break-word;
h2 { h2 {
margin-right: $global-margin; margin-right: $global-margin;
@ -587,7 +587,7 @@ body.vertical-menu footer {
order: 1; order: 1;
@include xy-cell(8); @include xy-cell(8);
margin-left: 0; margin-left: 0;
@include breakpoint(medium down) { @include breakpoint(medium down) {
width: 100%; width: 100%;
margin-right: 0; margin-right: 0;
@ -599,7 +599,7 @@ body.vertical-menu footer {
order: 2; order: 2;
@include xy-cell(4); @include xy-cell(4);
margin-right: 0; margin-right: 0;
@include breakpoint(medium down) { @include breakpoint(medium down) {
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
@ -645,12 +645,12 @@ body.vertical-menu footer {
.inline .property { .inline .property {
display: flex; display: flex;
dt { dt {
@include xy-cell(4); @include xy-cell(4);
text-align: right; text-align: right;
} }
.values { .values {
@include xy-cell(8); @include xy-cell(8);
} }
@ -704,7 +704,7 @@ body.vertical-menu footer {
#advanced-search .remove-value { #advanced-search .remove-value {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
@include breakpoint(small down) { @include breakpoint(small down) {
margin-bottom: 0; margin-bottom: 0;
} }
@ -760,13 +760,13 @@ body.vertical-menu footer {
.wide.sub-menu a { .wide.sub-menu a {
@include breakpoint(small down) { @include breakpoint(small down) {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
} }
.wide.sub-menu + .blocks { .wide.sub-menu + .blocks {
@include xy-cell(9); @include xy-cell(9);
@include breakpoint(small down) { @include breakpoint(small down) {
@include xy-cell(12); @include xy-cell(12);
} }
@ -776,7 +776,7 @@ body.vertical-menu footer {
float: left; float: left;
margin: 0 $global-margin $global-margin 0; margin: 0 $global-margin $global-margin 0;
max-width: 40%; max-width: 40%;
@include breakpoint(small down) { @include breakpoint(small down) {
max-width: 25%; max-width: 25%;
} }
@ -785,7 +785,7 @@ body.vertical-menu footer {
.right { .right {
float: right; float: right;
margin: 0 0 $global-margin $global-margin; margin: 0 0 $global-margin $global-margin;
max-width: 40%; max-width: 40%;
@include breakpoint(small down) { @include breakpoint(small down) {
max-width: 25%; max-width: 25%;
@ -823,22 +823,22 @@ body.vertical-menu footer {
.item-with-metadata .resource.show { .item-with-metadata .resource.show {
display: flex; display: flex;
margin: (2 * $global-margin) 0; margin: (2 * $global-margin) 0;
.media-list { .media-list {
order: 1; order: 1;
@include xy-cell(3); @include xy-cell(3);
text-align: right; text-align: right;
.media { .media {
width: 100%; width: 100%;
display: block; display: block;
} }
img { img {
height: auto; height: auto;
} }
} }
dl:not(:only-child) { dl:not(:only-child) {
order: 2; order: 2;
@include xy-cell(9); @include xy-cell(9);
@ -866,12 +866,12 @@ body.vertical-menu footer {
& ~ * { & ~ * {
@include xy-cell(9); @include xy-cell(9);
float: right; float: right;
@include breakpoint(small down) { @include breakpoint(small down) {
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
} }
} }
@ -880,15 +880,15 @@ body.vertical-menu footer {
@extend .menu; @extend .menu;
@extend .vertical; @extend .vertical;
} }
ul { ul {
list-style: none; list-style: none;
} }
ul ul { ul ul {
@extend .nested; @extend .nested;
} }
} }
.preview-block .preview-header { .preview-block .preview-header {
@ -897,7 +897,7 @@ body.vertical-menu footer {
flex-wrap: wrap; flex-wrap: wrap;
border-bottom: 1px solid $light-gray; border-bottom: 1px solid $light-gray;
align-items: flex-end; align-items: flex-end;
a { a {
margin-bottom: (.5 * $global-margin); margin-bottom: (.5 * $global-margin);
} }
@ -916,11 +916,11 @@ body.vertical-menu footer {
.results ul { .results ul {
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
@include breakpoint(medium up) { @include breakpoint(medium up) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
@ -940,9 +940,9 @@ body.vertical-menu footer {
.results > ul > li { .results > ul > li {
margin-bottom: $global-padding; margin-bottom: $global-padding;
@include breakpoint(medium up) { @include breakpoint(medium up) {
width: 50%; width: 50%;
} }
} }
@ -958,7 +958,7 @@ body.vertical-menu footer {
@include breakpoint(medium up) { @include breakpoint(medium up) {
display: none; display: none;
} }
[type="text"], [type="text"],
[type="submit"] { [type="submit"] {
margin: 0; margin: 0;
@ -972,7 +972,7 @@ body.vertical-menu footer {
.sitewide-search-form ~ .advanced-search { .sitewide-search-form ~ .advanced-search {
display: block; display: block;
@include breakpoint(small down) { @include breakpoint(small down) {
margin: (-.5 * $global-margin) 0 $global-margin; margin: (-.5 * $global-margin) 0 $global-margin;
} }
@ -983,17 +983,17 @@ body.vertical-menu footer {
@include breakpoint(medium up) { @include breakpoint(medium up) {
width: 50%; width: 50%;
float: left; float: left;
} }
} }
.results > h3 { .results > h3 {
border-bottom: 1px solid $light-gray; border-bottom: 1px solid $light-gray;
} }
.sitewide-search-form ~ .omeka-pagination { .sitewide-search-form ~ .omeka-pagination {
margin: (-1 * $global-margin) 0 $global-margin; margin: (-1 * $global-margin) 0 $global-margin;
@include breakpoint(medium up) { @include breakpoint(medium up) {
margin: (.5 * $global-margin) 0 $global-margin; margin: (.5 * $global-margin) 0 $global-margin;
text-align: right; text-align: right;
@ -1015,16 +1015,16 @@ body.vertical-menu footer {
padding-left: 0; padding-left: 0;
margin-left: 0; margin-left: 0;
margin-bottom: 0; margin-bottom: 0;
@include breakpoint(medium up) { @include breakpoint(medium up) {
columns: 2; columns: 2;
} }
li { li {
padding: $global-padding 0; padding: $global-padding 0;
border-bottom: 1px solid $light-gray; border-bottom: 1px solid $light-gray;
} }
& + a { & + a {
display: block; display: block;
margin-top: $global-margin; margin-top: $global-margin;
@ -1039,7 +1039,7 @@ body.vertical-menu footer {
[id^="numeric-"] .inputs, [id^="numeric-"] .inputs,
[id*="numeric-"] .inputs { [id*="numeric-"] .inputs {
display: flex; display: flex;
@include breakpoint(small down) { @include breakpoint(small down) {
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -1059,7 +1059,7 @@ body.vertical-menu footer {
.inputs label.numeric-toggle-time.button { .inputs label.numeric-toggle-time.button {
border: 0; border: 0;
display: inline-flex; display: inline-flex;
@include breakpoint(small down) { @include breakpoint(small down) {
margin: (.25 * $global-margin) 0 0; margin: (.25 * $global-margin) 0 0;
} }
@ -1069,17 +1069,17 @@ body.vertical-menu footer {
.inputs .numeric-time-inputs, .inputs .numeric-time-inputs,
.inputs .numeric-datetime-inputs { .inputs .numeric-datetime-inputs {
margin: 0 0 0 (.25 * $global-margin); margin: 0 0 0 (.25 * $global-margin);
} }
} }
@include breakpoint(small down) { @include breakpoint(small down) {
#advanced-search [type="number"], #advanced-search [type="number"],
#advanced-search select { #advanced-search select {
width: 100%; width: 100%;
margin: (.25 * $global-margin) 0; margin: (.25 * $global-margin) 0;
} }
} }
.mapping-block { .mapping-block {
width: 100%; width: 100%;
} }

34
asset/scss/modules/_content.scss
View File

@ -148,6 +148,7 @@ main {
.collections-list { .collections-list {
@include xy-grid; @include xy-grid;
width:100vw;
header,main{ header,main{
@include xy-cell(12); @include xy-cell(12);
@include flex; @include flex;
@ -162,12 +163,13 @@ main {
main { main {
@include xy-grid; @include xy-grid;
article{ article{
// text-align:center;
@include card-container(); @include card-container();
@include breakpoint(small){ @include breakpoint(small){
@include xy-cell(); @include xy-cell();
font-size: $global-font-size*0.7;
} }
@include breakpoint(medium){ @include breakpoint(medium){
font-size: $global-font-size*1;
} }
@include breakpoint(large){ @include breakpoint(large){
} }
@ -180,12 +182,26 @@ main {
} }
} }
.accordion-content { .accordion-content {
@include xy-grid(12); section {
figure { @include xy-grid;
@include xy-cell(4); @include breakpoint(small){
} figure {
p { @include xy-cell(12);
@include xy-cell(6); }
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(); @include xy-grid();
.slide { .slide {
@include xy-grid; @include xy-grid;
justify-content: center;
@include breakpoint(small){ @include breakpoint(small){
width: 100vw; width: 100vw;
margin: 0; margin: 0;
padding: $global-padding * 3;
.textwidget { .textwidget {
padding: $global-padding * 3;
} }
} }
@include breakpoint(medium){ @include breakpoint(medium){
@ -331,7 +348,6 @@ main {
align-content: center; align-content: center;
align-self: center; align-self: center;
margin: $global-margin auto; margin: $global-margin auto;
justify-content: center;
&:first-child { &:first-child {
color: unset; color: unset;
background-color: unset; background-color: unset;

17
asset/scss/modules/_footer.scss
View File

@ -31,9 +31,19 @@ footer {
} }
&.eu { &.eu {
&::before { &::before {
margin-top:unset; @include breakpoint(small) {
max-width:100%; // background-image: url('../img/eu_flag_creative_europe_co_funded_black_right.svg');
max-height: 4rem; 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 {
} }
} }
} }

15
asset/scss/modules/_header.scss
View File

@ -10,14 +10,14 @@
min-width: 14rem; min-width: 14rem;
text-align: center; text-align: center;
} }
@include breakpoint(medium){ @include breakpoint(large){
@include xy-cell(shrink); @include xy-cell(shrink);
@include flex-align(left, middle); @include flex-align(left, middle);
text-align: unset; text-align: unset;
} }
} }
nav { nav {
@include breakpoint(small){ @include breakpoint(small) {
@include xy-cell(12); @include xy-cell(12);
@include flex; @include flex;
@include flex-align(center, middle); @include flex-align(center, middle);
@ -32,15 +32,22 @@
padding: 0; padding: 0;
font-size: 0.8rem; 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 xy-cell(auto);
@include flex; @include flex;
@include flex-align(right, middle); @include flex-align(right, middle);
menu { menu {
margin: inherit; margin: inherit;
padding: inherit; padding: inherit;
font-size: $global-font-size*1.5;
} }
} }
} }

4
view/common/site-list-entry.phtml
View File

@ -27,7 +27,7 @@ $summary = $showSummary ? $site->summary() : null;
</li> </li>
</ul> </ul>
</a> </a>
<div class="accordion-content" data-tab-content> <aside class="accordion-content" data-tab-content>
<figure> <figure>
<?php if ($site_meta_values != null): ?> <?php if ($site_meta_values != null): ?>
<img src="<?= $site_meta_values['thumbnail']; ?>" /> <img src="<?= $site_meta_values['thumbnail']; ?>" />
@ -39,5 +39,5 @@ $summary = $showSummary ? $site->summary() : null;
<?php endif; ?> <?php endif; ?>
<a class="button small" href="<?= $site->siteUrl() ?>">View</a> <a class="button small" href="<?= $site->siteUrl() ?>">View</a>
</p> </p>
</div> </aside>
</li> </li>