Added interpreter for pseudocode for displaying exhibitions, events.
Added basic search. Added object pages.
This commit is contained in:
@ -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; }
|
||||
|
54
themes/default/mdEmbeds.css
Normal file
54
themes/default/mdEmbeds.css
Normal 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
1
themes/imports.css
Normal file
@ -0,0 +1 @@
|
||||
@import 'mdCalendar.css';
|
151
themes/mdCalendar.css
Normal file
151
themes/mdCalendar.css
Normal 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; }
|
||||
}
|
Reference in New Issue
Block a user