Updated cards from tuesch changes. Incorporated InteractionMapper memory leak fix.
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
$a: #ff77a5
|
||||
$b: #1eb4e9
|
||||
$c: #22d5a5
|
||||
$d: #f65d3b
|
||||
$e: #fcb95a
|
||||
$f: #1eb4e9
|
||||
$g: #ff77a5
|
||||
@@ -0,0 +1,7 @@
|
||||
$a: #f5f3ad //OLD
|
||||
$b: #FF0000 //OLD
|
||||
$c: #99d1ed
|
||||
$d: #aed3b3
|
||||
$e: #FF0000 //OLD
|
||||
$f: #f5adac //
|
||||
$g: #c499ed
|
||||
@@ -0,0 +1,7 @@
|
||||
$a: #fb8072
|
||||
$b: #80b1d3
|
||||
$c: #8dd3c7
|
||||
$d: #fdb462
|
||||
$e: #ffed6f
|
||||
$f: #bc80bd
|
||||
$g: #ccebc5
|
||||
@@ -0,0 +1,7 @@
|
||||
$a: #e1dea7
|
||||
$b: #dec1b2
|
||||
$c: #c8d9d7
|
||||
$d: #b0c6b2
|
||||
$e: #bebebe
|
||||
$f: #dec1b2
|
||||
$g: #c3c0d1
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
The essential.scss defines proerties that
|
||||
are essential for the basic features of an
|
||||
info card and are completely
|
||||
*/
|
||||
.unselectable {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.zoomable-wrapper {
|
||||
display: inline-block;
|
||||
align-self: center;
|
||||
|
||||
figure {
|
||||
// Is required that the zoomable tween works properly.
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Problem with display-block is, that it produces spaces
|
||||
// when elements contain a linebreak. Setting the font-size
|
||||
// to 0 prevents that.
|
||||
font-size: 0;
|
||||
|
||||
figcaption {
|
||||
font-size: initial;
|
||||
}
|
||||
|
||||
//Discuss: There is a weird div that needs to be scaled
|
||||
// alongside. Maybe this introduces the jittering of the graphic.
|
||||
// Try to get rid of it
|
||||
// - SO
|
||||
& > figure > div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
// Resets a weird styling, when certain elements
|
||||
// are (long) clicked on using a touch screen.
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
|
||||
@import "_variables.scss";
|
||||
$material-icons-font-family: "Material Icons";
|
||||
|
||||
@font-face {
|
||||
font-family: $material-icons-font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../fonts/material-icon-font/MaterialIcons-Regular.eot); /* For IE6-8 */
|
||||
src: local('Material Icons'),
|
||||
local('MaterialIcons-Regular'),
|
||||
url(../fonts/material-icon-font/MaterialIcons-Regular.woff2) format('woff2'),
|
||||
url(../fonts/material-icon-font/MaterialIcons-Regular.woff) format('woff'),
|
||||
url(../fonts/material-icon-font/MaterialIcons-Regular.ttf) format('truetype');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
@mixin beforeClass($selector){
|
||||
@at-root #{selector-unify(&, $selector + ":before")} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/*
|
||||
If any default style by the browser or
|
||||
certain plugins (e.g. Bulma) needs to be overwritten,
|
||||
this can be done in this file.
|
||||
*/
|
||||
|
||||
/* Remove the negative margin from Bulma's columns. */
|
||||
.columns {
|
||||
margin: 0 !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
&:not(:last-child){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
border-color: unset;
|
||||
border: unset;
|
||||
border-radius: unset;
|
||||
|
||||
&:active,
|
||||
&:hover
|
||||
{
|
||||
border-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: unset;
|
||||
height: unset;
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
|
||||
|
||||
/* Color */
|
||||
|
||||
$black: #191919;
|
||||
$white: #f2f2f2;
|
||||
$gray-light: #e5e5e5;
|
||||
$gray: #6f6f6e;
|
||||
$gray-dark: #333333;
|
||||
|
||||
|
||||
$blue: #008bd2;
|
||||
$blue-light: #33a2db;
|
||||
$blue-lighter: #99d1ed;
|
||||
$blue-dark: #004669;
|
||||
$blue-darker: #002335;
|
||||
|
||||
$red: #e73230;
|
||||
$red-light: #ff5f5d;
|
||||
$red-lighter: #f5adac;
|
||||
$red-dark: #741918;
|
||||
$red-darker: #3a0c0c;
|
||||
|
||||
$yellow: #e5e133;
|
||||
$yellow-light: #eae75c;
|
||||
$yellow-lighter: #f5f3ad;
|
||||
$yellow-dark: #807d1c;
|
||||
$yellow-darker: #0d2510;
|
||||
|
||||
$green: #349240;
|
||||
$green-light: #85be8c;
|
||||
$green-lighter: #aed3b3;
|
||||
$green-dark: #1a4920;
|
||||
$green-darker: #002335;
|
||||
|
||||
$purple: #6b00d1;
|
||||
$purple-light: #8933da;
|
||||
$purple-lighter: #c499ed;
|
||||
$purple-dark: #360069;
|
||||
$purple-darker: #1b0034;
|
||||
|
||||
|
||||
$tuebingen-red: $red;
|
||||
$link-color: $blue;
|
||||
|
||||
/* Font Properties */
|
||||
$card-font-color: $white;
|
||||
$font-family: "Calibri", sans-serif;
|
||||
|
||||
$tiny-font-size: 8px;
|
||||
$small-font-size: 18px;
|
||||
$regular-font-size: 26px;
|
||||
$large-font-size: 36px;
|
||||
$title-font-size: 52px;
|
||||
|
||||
$strong-font-weight: 700;
|
||||
$medium-font-weight: 500;
|
||||
$light-font-weight: 300;
|
||||
|
||||
/* Spacing */
|
||||
$grid-space: 25px;
|
||||
$default-space: 20px;
|
||||
$article-space: 30px;
|
||||
$border-space: 3* $default-space;
|
||||
|
||||
|
||||
/* Borders */
|
||||
$default-radius: 3px;
|
||||
|
||||
/* Shadows */
|
||||
$near-hover-shadow: 1px 2px 5px rgba(0,0,0,0.5);
|
||||
$medium-hover-shadow: 2px 3px 25px rgba(0,0,0,0.3);
|
||||
|
||||
/*
|
||||
$context: "../../../../../..";
|
||||
$white: #FEFEFE;
|
||||
$shady-white: rgb(240, 240, 240);
|
||||
$gray: #CCC;
|
||||
$dark: #333;
|
||||
$black: #222;
|
||||
|
||||
$small-edge-radius: 3px;
|
||||
$big-edge-radius: 10px;
|
||||
|
||||
$small-pad: 16px;
|
||||
$big-pad: 32px;
|
||||
$tuebingen-red: #e73230;
|
||||
|
||||
$increased-letter-spacing: 0.1em;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$font-color: $black;
|
||||
|
||||
|
||||
|
||||
$text-font-size: 26px;
|
||||
$medium-font-size: 28px;
|
||||
$large-font-size: 32px;
|
||||
|
||||
$regular-font-size: 1.451rem;
|
||||
|
||||
|
||||
$subtitle-font-size: $medium-font-size;
|
||||
$title-font-size: $subtitle-font-size * 1.641;
|
||||
|
||||
/* Font Weights *//*
|
||||
$strong-font-weight: 700;
|
||||
$medium-font-weight: 500;
|
||||
$light-font-weight: 300;
|
||||
|
||||
*/
|
||||
@@ -0,0 +1,4 @@
|
||||
@import 'card.scss'
|
||||
@import 'subcard.scss'
|
||||
@import 'highlight.scss'
|
||||
@import 'popup.scss'
|
||||
@@ -0,0 +1,474 @@
|
||||
@import '_mixins.scss';
|
||||
@import '_variables.scss';
|
||||
@import '_essentials.scss';
|
||||
@import '_overrides.scss';
|
||||
@import '_icons.scss';
|
||||
|
||||
/**
|
||||
* The card.scss is responsible for styling the top level of the card.
|
||||
*
|
||||
* + Info-Card
|
||||
* ++ Header
|
||||
* +++ Thubnail
|
||||
* +++ Overview
|
||||
* ++ Subcards-Container
|
||||
* +++ n * Subcards
|
||||
*/
|
||||
|
||||
.info-card {
|
||||
font-family: $font-family;
|
||||
color: white;
|
||||
background-color: #333;
|
||||
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 3px;
|
||||
|
||||
.ui {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 10px;
|
||||
z-index: 11;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.speech {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
// SIZE
|
||||
|
||||
$border: 16px;
|
||||
border-radius: 3px;
|
||||
|
||||
top: -$border/2;
|
||||
left: -$border/2;
|
||||
width: calc(100% + #{$border});
|
||||
height: calc(100% + #{$border});
|
||||
|
||||
// BACKGROUND
|
||||
|
||||
box-shadow: 0 0 15px #008bd2;
|
||||
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
#008bd2,
|
||||
#008bd2 20px,
|
||||
#33a2db 20px,
|
||||
#33a2db 40px
|
||||
);
|
||||
|
||||
// ANIMATION
|
||||
background-size: 56px 56px; /* This is unique for this background, need to find a pattern and develop a formula */
|
||||
background-position-x: 0%;
|
||||
-webkit-animation: 'slide' 20s infinite linear forwards;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
&.speech-plugin-is-reading {
|
||||
.speech.button:before {
|
||||
content: 'stop';
|
||||
}
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes 'slide' {
|
||||
0% {
|
||||
background-position-x: 0%;
|
||||
}
|
||||
100% {
|
||||
background-position-x: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 200;
|
||||
|
||||
//padding: $default-space;
|
||||
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
// padding: $default-space;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
z-index: 200;
|
||||
position: absolute;
|
||||
top: $default-space;
|
||||
right: $default-space;
|
||||
|
||||
> * {
|
||||
margin-right: $default-space / 3;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
// display: inline-block;
|
||||
color: $link-color;
|
||||
|
||||
&:hover {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mainview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
//Inherits from info-card
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $regular-font-size;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 35%;
|
||||
color: $white;
|
||||
background: linear-gradient(to top, $gray-dark, $gray 200%);
|
||||
padding: $default-space * 3;
|
||||
padding-bottom: $default-space;
|
||||
border-radius: inherit;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-gap: 20px;
|
||||
|
||||
//box-shadow: $near-hover-box-shadow;
|
||||
z-index: 1;
|
||||
|
||||
h1 {
|
||||
-webkit-margin-before: 0;
|
||||
font-size: $title-font-size;
|
||||
font-weight: 500;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.overview {
|
||||
// margin-left: $default-space;
|
||||
padding: 0 $default-space;
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column-start:2;
|
||||
//justify-content: flex-end;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p.misc {
|
||||
font-size: $regular-font-size;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 0.641em;
|
||||
|
||||
// // Added an icon before the build date.
|
||||
// // Just for testing.
|
||||
// &:before {
|
||||
// opacity: 0.5;
|
||||
// position: relative;
|
||||
// top: 5px;
|
||||
// margin-right: 10px;
|
||||
// font-style: normal;
|
||||
// content: "build";
|
||||
// font: {
|
||||
// family: $material-icons-font-family;
|
||||
// };
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-wrapper {
|
||||
overflow: hidden;
|
||||
border-radius: $default-radius;
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// z-index: 1;
|
||||
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
// Discuss: I added this for the thumbnail zoom icon
|
||||
// explicitly. I got rid of the .zoomicon class, because
|
||||
// everything was a zoomicon.
|
||||
// Now every icon is just an icon. The icons directly on the
|
||||
// subcards are card-icons.
|
||||
//
|
||||
// But a name for icons that can be on content elements of any
|
||||
// card page is yet to be found. (e.g. zoomables).
|
||||
.button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
This mixin selects the elements of $selector
|
||||
and adjust the style it there are n children of this selector
|
||||
inside the parent.
|
||||
*/
|
||||
@mixin childCountIs($selector, $n) {
|
||||
// #{$var} just prints the string to css.
|
||||
#{$selector}:first-child:nth-last-child(#{$n}),
|
||||
#{$selector}:first-child:nth-last-child(#{$n}) ~ #{$selector} {
|
||||
// @content prints the content to the mixin.
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
.subcards-container {
|
||||
// flex: 1;
|
||||
background-color: $gray-dark;
|
||||
height: 65%;
|
||||
|
||||
// We should use css-grids instead of flexbox here:
|
||||
// https://www.w3.org/TR/css-grid-1/
|
||||
//"Unlike Flexible Box Layout, which is single-axis–oriented,
|
||||
// Grid Layout is optimized for 2-dimensional layouts:
|
||||
// those in which alignment of content is desired in both dimensions."
|
||||
display: grid;
|
||||
|
||||
// Not sure why, but 1fr does not behave in the rows as expected:
|
||||
// Expectation: All space is available and therefore 1fr means
|
||||
// Half of the space available.
|
||||
grid-auto-rows: 1fr;
|
||||
grid-gap: $default-space;
|
||||
padding: $default-space * 3;
|
||||
padding-top: $default-space;
|
||||
|
||||
// The fr stands for fraction and should be preferably used with css grids.
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
grid-template-areas: '. tl tl tl . tr tr tr .' '. bl bl bl . br br br .';
|
||||
|
||||
@include childCountIs('.subcard-wrapper', 5) {
|
||||
&:nth-child(4) {
|
||||
grid-area: bl;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
grid-area: br;
|
||||
}
|
||||
}
|
||||
|
||||
@include childCountIs('.subcard-wrapper', 4) {
|
||||
&:first-child {
|
||||
grid-area: tl;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
grid-area: tr;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
grid-area: bl;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
grid-area: br;
|
||||
}
|
||||
}
|
||||
|
||||
@include childCountIs('.subcard-wrapper', 3) {
|
||||
&:first-child {
|
||||
grid-area: tl;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
grid-area: tr;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
grid-row: 2;
|
||||
grid-column: 4 / 7;
|
||||
}
|
||||
}
|
||||
|
||||
.subcard-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: auto;
|
||||
grid-column: span 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-icon,
|
||||
.zoomable-icon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.speech-only-text {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
border: 3px solid $white;
|
||||
box-shadow: $near-hover-shadow;
|
||||
-webkit-margin-before: 0;
|
||||
-webkit-margin-after: 0;
|
||||
-webkit-margin-start: 0;
|
||||
-webkit-margin-end: 0;
|
||||
}
|
||||
|
||||
figure .icon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-radius: $default-radius 0 0 0;
|
||||
}
|
||||
|
||||
.view-button.icon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 26px 26px;
|
||||
margin: -23px -13px;
|
||||
|
||||
// padding: $default-space/2 $default-space;
|
||||
|
||||
&.inverted {
|
||||
// background-color: transparent;
|
||||
|
||||
&:before {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
color: $gray-dark;
|
||||
font-size: $large-font-size;
|
||||
text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
color: $black;
|
||||
background-color: $white;
|
||||
pointer-events: none;
|
||||
|
||||
&.button {
|
||||
pointer-events: all;
|
||||
border-radius: $default-radius;
|
||||
|
||||
&.corner-button {
|
||||
border-radius: 0;
|
||||
|
||||
&.bottom-right {
|
||||
border-top-left-radius: $default-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inverted {
|
||||
color: $white;
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
&.transparent-background {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $white;
|
||||
background-color: $link-color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
// This is a nice feature of SASS
|
||||
// It lets you split attributes into
|
||||
// namespaces.
|
||||
//
|
||||
// font-family:#, font-weight:#, font-size:#
|
||||
// ==> font {family: #, weight: #, size: # }
|
||||
font: {
|
||||
family: $material-icons-font-family;
|
||||
size: 36px;
|
||||
}
|
||||
|
||||
@include beforeClass('.info') {
|
||||
content: 'info_outline';
|
||||
}
|
||||
|
||||
@include beforeClass('.close') {
|
||||
content: 'close';
|
||||
}
|
||||
|
||||
@include beforeClass('.zoom') {
|
||||
content: 'search';
|
||||
}
|
||||
|
||||
@include beforeClass('.speech') {
|
||||
content: 'record_voice_over';
|
||||
}
|
||||
|
||||
@include beforeClass('.language') {
|
||||
content: 'language';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-card.debug {
|
||||
.view-button {
|
||||
background-color: rgba(255, 0, 0, 0.5) !important;
|
||||
|
||||
&.disabled {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
html, body {
|
||||
position: relative;
|
||||
margin:0;
|
||||
padding:0;
|
||||
height:100%;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
circle
|
||||
{
|
||||
stroke-width: 1;
|
||||
stroke: white;
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
mask circle
|
||||
{
|
||||
stroke-width: 0;
|
||||
fill: white;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
@import "_variables.scss";
|
||||
@import "_icons.scss";
|
||||
|
||||
.popup {
|
||||
width: 800px;
|
||||
width: fit-content;
|
||||
min-width: 400px;
|
||||
color: $black;
|
||||
background-color: $white;
|
||||
border-radius: $default-radius;
|
||||
box-shadow: 0 0 100px rgba(0,0,0,0.3),$medium-hover-shadow, 0 0 4px rgba(0,0,0,0.8);
|
||||
padding: $default-space *2* 0.641 $default-space*2;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
|
||||
&:not(:first-child){
|
||||
margin-top: $default-space;
|
||||
}
|
||||
|
||||
&:not(:last-child){
|
||||
margin-bottom: $default-space;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.notch {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.PopupContent {
|
||||
p:not(:last-child) {
|
||||
margin-bottom: $article-space;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,345 @@
|
||||
@import "_variables.scss";
|
||||
|
||||
/**
|
||||
The subcards.scss is responsible for all css of the subcards.
|
||||
Historically, it was always used for the preview-cards on the info-card
|
||||
and the article page of the corresponding subcard.
|
||||
|
||||
Discuss: Personally I would prefer a strict separation from front page
|
||||
and article page. But there may be advantages, when the unit 'subcard'
|
||||
has a stylesheet on it's own.
|
||||
|
||||
- SO
|
||||
|
||||
Structure:
|
||||
|
||||
1. Shared (Preview and Expanded)
|
||||
2. Preview Subcards
|
||||
3. Expanded Subcards
|
||||
*/
|
||||
|
||||
.info-card {
|
||||
/*
|
||||
1. Shared Properties
|
||||
*/
|
||||
.subcard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: $black;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.subcard-content{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
min-height: 84px;
|
||||
background: linear-gradient(to top, $gray-dark -100%, $gray 200%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: inherit;
|
||||
|
||||
h2 {
|
||||
color: $white;
|
||||
font-size: $regular-font-size;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
line-height: 1.3em;
|
||||
|
||||
// font-weight: $normal-font-weight;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: $default-space / 2;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
2. Preview Properties
|
||||
*/
|
||||
.subcards-container {
|
||||
.subcard-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.subcard {
|
||||
flex: 1;
|
||||
// Put the subcards before the close button
|
||||
// to avoid closing when pushing subcard.
|
||||
z-index: 1;
|
||||
|
||||
box-shadow: $near-hover-shadow;
|
||||
|
||||
//Required for round borders.
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
$titlebar-height: 27%;
|
||||
|
||||
.titlebar {
|
||||
min-height: $titlebar-height;
|
||||
}
|
||||
|
||||
.subcard-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex:1;
|
||||
// height: 100% - $titlebar-height;
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
background-color: $white;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
p {
|
||||
//font-size: $large-font-size;
|
||||
// line-height: $large-font-size*1.3;
|
||||
font-style: italic;
|
||||
color: $gray;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
padding: 2 * $default-space;
|
||||
}
|
||||
|
||||
// Cover the whole preview area!
|
||||
img {
|
||||
// The position is set to absolute
|
||||
// then we can use the 1fr unit on the
|
||||
// grid element.
|
||||
//
|
||||
// Otherwise it stretches with content.
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
border-radius: $default-radius 0 0 0;
|
||||
}
|
||||
|
||||
.subcard.visited {
|
||||
.icon.info:before {
|
||||
content: "check";
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
//Reset some Bulma default styling.
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
3. Article Properties
|
||||
*/
|
||||
.mainview > .subcard {
|
||||
|
||||
background-color: rgba($black,0.8);
|
||||
justify-content: center;
|
||||
.column.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.column.content.wide {
|
||||
flex: 1 0 55%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.column.content.narrow {
|
||||
flex: 1 0 35%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
article {
|
||||
|
||||
background-color: $white;
|
||||
max-height: 100%;
|
||||
|
||||
p {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
p:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $large-font-size;
|
||||
}
|
||||
|
||||
h2:not(:first-child) {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.column:not(.zoomable-wrapper) {
|
||||
margin: $article-space;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
margin: -0px -5px -20px -5px;
|
||||
padding: 0px 5px 10px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.subcard-content{
|
||||
overflow: hidden;
|
||||
background-color: $white;
|
||||
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5)
|
||||
}
|
||||
|
||||
.subcard-content.dynamic-height {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.subcard-content:not(.dynamic-height){
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.zoomable-wrapper {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-top: $article-space;
|
||||
padding-bottom: 2* $article-space;
|
||||
align-self: center;
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.imggroup {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-top: $article-space;
|
||||
padding-bottom: 2* $article-space;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
& > .zoomable-wrapper,
|
||||
.mainview > .subcard {
|
||||
// figure {
|
||||
// position: relative;
|
||||
// border: 5px solid white;
|
||||
// box-shadow: $near-hover-shadow;
|
||||
// }
|
||||
|
||||
figcaption {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
|
||||
&.zoomcap {
|
||||
font-size: $tiny-font-size;
|
||||
display: none;
|
||||
top: calc(100% + 10px);
|
||||
padding: $default-space / 2;
|
||||
background-color: $white;
|
||||
box-shadow: $near-hover-shadow;
|
||||
color: $black;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.cap {
|
||||
bottom: -40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Colors for the card topics.
|
||||
*/
|
||||
@import "_colors_003.sass";
|
||||
|
||||
/* Remap the colors to the 'bundled' groups. */
|
||||
$g: $a;
|
||||
$a: $b;
|
||||
$c: $b;
|
||||
$e: $b;
|
||||
|
||||
@mixin subcard-style($topic-color) {
|
||||
// border: 2px solid $topic-color;
|
||||
.titlebar {
|
||||
border-bottom: 10px solid $topic-color;
|
||||
// box-shadow: 0 2px 5px rgba($topic-color, 0.5);
|
||||
z-index: 10;
|
||||
// background-color: $topic-color;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.subcard.leben_des_kunstwerks {
|
||||
@include subcard-style($a);
|
||||
}
|
||||
|
||||
.subcard.licht_und_farbe {
|
||||
@include subcard-style($b);
|
||||
}
|
||||
|
||||
.subcard.extra_info {
|
||||
@include subcard-style($c);
|
||||
}
|
||||
|
||||
.subcard.artist {
|
||||
@include subcard-style($d);
|
||||
}
|
||||
|
||||
.subcard.komposition {
|
||||
@include subcard-style($e);
|
||||
}
|
||||
|
||||
.subcard.details {
|
||||
@include subcard-style($f);
|
||||
}
|
||||
|
||||
.subcard.thema {
|
||||
@include subcard-style($g);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.info-card.debug {
|
||||
.mainview > .subcard a {
|
||||
background-color: rgba(102, 51, 153, 0.239);
|
||||
}
|
||||
|
||||
article {
|
||||
background-color: rgba(0,255,0,0.5);
|
||||
}
|
||||
|
||||
.subcard .view-button{
|
||||
background-color: rgba(0, 255, 0, 0.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user