Added interpreter for pseudocode for displaying exhibitions, events.

Added basic search.
Added object pages.
This commit is contained in:
2018-06-15 11:26:25 +02:00
committed by Stefan Rohde-Enslin
parent a49746ab10
commit 80485a98ab
19 changed files with 1573 additions and 82 deletions

View File

@ -2,6 +2,12 @@
* Default theme for the backend of md:cms.
*/
/****************************
* Imports
*/
@import 'mdEmbeds.css';
/****************************
* Load fonts
*/
@ -82,7 +88,7 @@ aside > * { display: block; padding: 1em; border: 1px solid #D6D6D6; }
body > header:nth-child(2) { margin: 0; padding: 0; }
body > header:nth-child(2) p { margin: 0; padding: 0; }
body > header:nth-child(2) img { width: 100vw; height: 20vh; object-fit: cover; margin-bottom: -.4em; }
body > header:nth-child(2) img { width: 100%; height: 20vh; object-fit: cover; margin-bottom: -.4em; }
/************
* Main wrapper
@ -104,7 +110,7 @@ body > nav { display: block; background: #212121; color: #EEE;
border: 1px solid #D6D6D6; border-width: 0; padding: 0 5vw; }
body > nav ul { list-style: none; margin: 0; padding: 0 0; }
body > nav li { position: relative; }
body > nav > ul { display: block; border-bottom: 1px solid #D6D6D6; }
body > nav > ul { display: block; }
body > nav > ul > li { display: inline-block; }
body > nav > ul > li ul { position: absolute; left: 0; top: 100%;
background: #424242; color: #EEE; z-index: 2; animation: fade-in .4s; }

View File

@ -0,0 +1,54 @@
/**
* Default theme for the backend of md:cms:
* Styles for data embedded from museum-digital.
*/
/**********
* Simple tiles for displaying an object.
*/
div.objTile { display: inline-block; width: 200px; border: 1px solid #D6D6D6; text-align: center;
transition: background .4s, box-shadow .4s; }
div.objTile > div { position: relative; padding: .5em .5em 1.5em .5em; }
div.objTile h4 { margin: 0; padding: 0 .5em; }
div.objTile img { max-width: 198px; }
div.objTile:hover { background: #F2F2F2; box-shadow: 1px 1px 3px #D6D6D6, -1px -1px 3px #D6D6D6; }
div.objTile > div > div { color: #888; font-size: .8em; }
div.objTile > div > div > a { position: absolute; top: 100%; left: -1px;
display: none; max-width: 50%; padding: .3em;
background: #FFF; text-align: left; border: 1px solid #D6D6D6;
transition: background .4s, color .4s; }
div.objTile:hover > div > div > a { display: block; animation: fade-in .4s; }
div.objTile > div > div > a:last-child { left: initial; right: -1px; text-align: right; }
div.objTile > div > div > a:hover { background: #EEE; color: #212121; }
/**********
* Object details.
*/
div.objDetails { }
div.objDetails dt { font-weight: bold; margin-top: .5em; }
div.objDetails dd { margin-left: 0; padding-left: 0; }
div.objDetails .objMainImg { max-width: 200px; margin: .5em 1em 1em 0; float: left;
border: 1px solid #D6D6D6; transition: max-width .4s; }
div.objDetails .objMainImg:hover { max-width: 100vw; max-height: 80vh; float: initial; }
.metadataLine { margin-top: 2.5em; color: #666; border-top: 1px solid #D6D6D6; }
.metadataLine > span { margin-right: 2em; font-size: .95em; font-style: italic; }
/*****
* Events on object detail page.
*/
.events { display: block; max-width: 100%; width: auto; margin: 0 0 1em 0; }
.events > * { display: inline-block; margin: 0 1em 1em 0; padding: 0 1em; border: 1px solid #D6D6D6;
vertical-align: top; transition: box-shadow .4s; }
.events h5 { margin: 0; padding: .5em 1em; font-size: .9em; background: #F2F2F2; color: #646464; }
.events tr * { padding: .1em .5em; vertical-align: middle; font-size: .95em; }
.events th { font-weight: normal; color: #646464; }
.events table { margin: .5em 0; }
.events > *:hover { box-shadow: 1px 1px 3px #D6D6D6, -1px -1px 3px #D6D6D6; }
.events tr:hover { background: initial; }

1
themes/imports.css Normal file
View File

@ -0,0 +1 @@
@import 'mdCalendar.css';

151
themes/mdCalendar.css Normal file
View File

@ -0,0 +1,151 @@
/**
* CSS file for mdCalendar.
*/
.mdCalendar { display: block; }
.mdCTable { width: 100%; table-layout: fixed; font-size: .9em; }
/**
* Table
*/
.mdCTable thead tr { border: 1px solid #D6D6D6; }
.mdCTable th { color: #646464; font-weight: normal; text-align: center; }
.mdCTable td { padding: 0; height: 10em; background: #FFF; border: 1px solid #D6D6D6; vertical-align: top; }
.mdCTable *:hover { z-index: 2; }
.mdCTable time { display: block; color: #646464; border-bottom: 1px dashed #D6D6D6; font-weight: bold;
cursor: pointer; transition: background .4s, color .4s; }
.mdCTable time:hover { background: #03A9F4; color: #FFF; }
.mdCTable td > * { display: block; padding: .3em .5em; line-height: 1.2em; }
.mdCTable td > a { position: relative; margin: .2em; padding-left: .7em;
background: rgba(240, 240, 240, .2); color: #424242; border: 1px solid #D6D6D6;
cursor: pointer; transition: background .4s, color .4s; }
.mdCTable td > a:hover { background: #333; color: #FFF; z-index: 2; }
.mdCTable td > a:before { content: " "; position: absolute; left: 0; top: 0; width: .5em; height: 100%; }
.mdCTable .mdCToday { background: #FAFAFA; }
.mdCTable .mdCOtherMonth { color: #646464; background: #EEE; }
/**
* Table head.
*/
.mdCTitleLine { display: table; width: 100%; margin: .5em 0; padding: 0; }
.mdCTitleLine > * { display: table-cell; vertical-align: middle; }
.mdCTitleLine > h3 { font-weight: normal; color: #424242; }
.mdCNav { width: 200px; color: #424242; text-align: right; }
.mdCNav > * { transition: background .4s, color .4s; font-size: 1em; padding: .5em; }
.mdCNav > *:hover { background: #F2F2F2; color: #000; }
.mdCNavPrev:before { content: "<"; }
.mdCNavNext:before { content: ">"; }
/**
* Alternative display of events in case there are too many for a day.
*/
.mdCTable td.mdCManyElements > a { display: inline-block; height: 1.1em; width: 1.1em; }
.mdCTable td.mdCManyElements > a:before { width: 100%; }
.mdCTable td.mdCManyElements > a span { display: none; }
@media screen and (max-width: 75em) {
.mdCTable td > a { display: inline-block; height: 1.1em; width: 1.1em; }
.mdCTable td > a span { display: none; }
.mdCTable td > a:before { width: 100%; }
}
/**
* Tooltips
*/
.mdCToolTip { position: absolute; top: calc(100% + 22px); left: 50%; transform: translate(-50%, 0);
width: 300px; padding: 1em 0;
background: #FFF; border: 1px solid #646464;
z-index: 1000; animation: fade-in-tooltip .4s; }
.mdCToolTip:before,
.mdCToolTip:after { content: " "; position: absolute; bottom: calc(100% - 1px); left: 50%; transform: translate(-50%, 0);
display: block; width: 0; height: 0;
border-left: 21px solid transparent; border-right: 21px solid transparent;
border-bottom: 21px solid #FFF; z-index: 1002; }
.mdCToolTip:after { border-left: 22px solid transparent; border-right: 22px solid transparent;
border-bottom: 22px solid #646464; z-index: 1001; }
.mdCToolTip tr * { height: auto; padding: .5em; vertical-align: top; text-align: left; color: #424242; border: 0; }
.mdCToolTip tr:first-child * { padding-top: 1em; }
.mdCToolTip tr:last-child * { padding-bottom: 1em; }
/**
* Overlay
*/
#mdCOverlay { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
max-height: 80vh; width: 600px; max-width: 80vw; background: #FFF;
box-shadow: 2px 2px 4px #D6D6D6, -2px -2px 4px #D6D6D6;
overflow-y: auto; z-index: 1003; }
.mdCOverlayTitleBar { display: table; width: 100%; }
.mdCOverlayTitleBar > * { display: table-cell; padding: .5rem 1.5rem; background: #EEE; color: #000; }
.mdCOverlayClose { width: 5em; text-align: right; }
.mdCOverlayClose:before { content: "x"; display: inline-block; padding: .1em .7em .3em .7em;
background: #03A9F4; color: #FFF; text-align: center;
border-radius: 100%; cursor: pointer; transition: background .4s; color .4s; }
.mdCOverlayClose:hover:before { background: #FFF; color: #03A9F4; }
#mdCOverlay ul { list-style: none; margin: 1em 1.5rem; padding: 0; }
#mdCOverlay li { margin: 0; padding: 1em 0; border-bottom: 1px solid #D6D6D6; }
#mdCOverlay li > a:first-child { color: #424242; font-weight: bold; }
/**
* @var {string[]} colorScheme Material design colors as taken from https://material.io/design/color/the-color-system.html#tools-for-picking-colors
*/
.color0:before { background: #F44336; }
.color1:before { background: #E53935; }
.color2:before { background: #D32F2F; }
.color3:before { background: #C62828; }
.color4:before { background: #B71C1C; }
.color5:before { background: #3F51B5; }
.color6:before { background: #3949AB; }
.color7:before { background: #303F9F; }
.color8:before { background: #283593; }
.color9:before { background: #1A237E; }
.color10:before { background: #2196F3; }
.color11:before { background: #1E88E5; }
.color12:before { background: #1976D2; }
.color13:before { background: #1565C0; }
.color14:before { background: #0D47A1; }
.color15:before { background: #03A9F4; }
.color16:before { background: #039BE5; }
.color17:before { background: #0288D1; }
.color18:before { background: #0277BD; }
.color19:before { background: #01579B; }
.color20:before { background: #00BCD4; }
.color21:before { background: #00ACC1; }
.color22:before { background: #0097A7; }
.color23:before { background: #00838F; }
.color24:before { background: #006064; }
.color25:before { background: #4CAF50; }
.color26:before { background: #43A047; }
.color27:before { background: #388E3C; }
.color28:before { background: #2E7D32; }
.color29:before { background: #1B5E20; }
/**
* Animations
*/
@keyframes fade-in-tooltip {
from { top: calc(100% + 19px); opacity: 0.1; }
to { top: calc(100% + 22px); opacity: 1.0; }
}