wip: programme

src/thsf/static/css/planning.css

@@ -13,38 +13,116 @@
   align-items: flex-start;
   align-content: flex-start;
   margin: 1em;
-  border-radius: 5px;
-  border-color: var(--alt-color);
-  background-color: var(--main-color);
-  border-style: solid;
-  border-width: 1px;
   font-size: 2em;
-  width: 25em;
+  width: 22em;
+}
+
+.metadata, .data {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: flex-start;
+  align-content: flex-start;
+  padding: 0.5em;
+  border-style: solid;
+  height: 13em;
 }
 
 .metadata {
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: flex-start;
-  align-content: flex-start;
+  width: 7.333em;
+  border-radius: 10px 0 0 10px;
+  background-color: var(--alt-bg-color);
+  color: var(--main-color);
+  border-color: var(--main-color);
+  font-family: pfdintextcompprothin;
+  border-width: 1px 0 0px 1px;
 }
 
 .data {
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: flex-start;
-  align-content: flex-start;
-  margin-left: 2em;
+  width: 14.666em;
+  background-color: var(--main-color);
+  color: var(--alt-main-color);
+  border-color: var(--main-color);
+  border-width: 1px 1px 1px 0;
+  font-family: pfdintextcompprothin;
+  overflow-y: auto;
 }
 
-.speaker_avatar {
-  height: 50px;
-  width: 50px;
+.metadata > .button {
+  font-size: 1em;
+  margin-bottom: 1em;
 }
 
-.data_img {
-  height: 50px;
-  width: 50px;
+.title {
+  font-family: pfdintextcomppromedium;
+  font-weight: 250;
+  margin-bottom: 0.5em;
+}
+
+.speakers {
+  font-family: pfdintextcompprothin;
+  font-weight: 250;
+  margin-bottom: 0.5em;
+}
+
+.speaker_details {
+  position: relative;
+  display: inline-block;
+}
+
+.speaker_details .details {
+  visibility: hidden;
+  background-color: var(--main-color);
+  color: var(--alt-main-color);
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  transform: translateX(2em) translateY(50%);
+  transition: opacity 1s;
+}
+
+.speaker_details .details::after {
+  content: "";
+  position: relative;
+  margin-left: -5px;
+  border-width: 5px;
+}
+
+.speaker_details:hover .details {
+  visibility: visible;
+  opacity: 1;
+  font-size: 0.7em;
+  padding: 0.2em;
+}
+
+.speaker_details > .details > img, .data > .abstract > img {
+  max-width: 200px;
+  max-height: 200px;
+  float: left;
+  margin: 0 0.5em 0.5em 0;
+}
+
+.speaker_details > .details > p {
+  text-align: justify;
+  font-size: 0.5em;
+}
+
+.data > .abstract > p {
+  text-align: justify;
+  font-size: 1em;
+}
+
+.data > .details {
+  font-family: pfdintextcomppromedium;
+  font-weight: 250;
+  margin-bottom: 0.5em;
+}
+
+.data > .resources > .resource > a {
+  color: var(--main-bg-color);
 }

src/thsf/static/css/style.css

@@ -10,8 +10,10 @@
 
 :root {
   --main-bg-color: #e6007e;
+  --alt-bg-color: #E59730;
+  --alt2-bg-color: #9EBF43;
   --main-color: #ffffff;
-  --alt-color: #1A000D;
+  --alt-main-color: #1A000D;
 }
 
 * {
@@ -30,7 +32,7 @@ body {
 }
 
 .black {
-  color: var(--alt-color);
+  color: var(--alt-main-color);
 }
 
 .thin {
@@ -56,18 +58,10 @@ body {
   width: inherit;
 }
 
-.cursor {
-  width: 0;
-  height: 0;
-  border-left: 0.75em solid transparent;
-  border-right: 0.75em solid transparent;
-  border-bottom: 0.75em solid var(--alt-color);
-}
-
 a {
   font-family: pfdintextcomppromedium;
   font-weight: 250;
-  color: var(--alt-color);
+  color: var(--alt-main-color);
   transition-property: color;
   transition-duration: 1s;
   text-decoration: wavy;
@@ -137,10 +131,6 @@ a:hover {
   width: 100vw;
 }
 
-#cursorbar {
-  margin-top: 1em;
-}
-
 #blah {
   margin: 2em 0 2em;
   font-size: 2em;

src/thsf/static/css/tooltip.css

@@ -1,12 +1,13 @@
-.tooltip {
+.tooltip, .planning_tooltip {
   position: relative;
   display: inline-block;
 }
 
+
 .tooltip .tooltiptext {
   visibility: hidden;
   background-color: var(--main-color);
-  color: var(--alt-color);
+  color: var(--alt-main-color);
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
@@ -19,7 +20,7 @@
   transition: opacity 1s;
 }
 
-.tooltip .tooltiptext::after {
+.tooltip .tooltiptext::after, .planning_tooltip .planning_tooltiptext::after {
   content: "";
   position: absolute;
   top: 100%;
@@ -28,9 +29,25 @@
   border-width: 5px;
 }
 
-.tooltip:hover .tooltiptext {
+.tooltip:hover .tooltiptext, .planning_tooltip:hover .planning_tooltiptext  {
   visibility: visible;
   opacity: 1;
   font-size: 0.7em;
   padding: 0.2em;
 }
+
+.planning_tooltip .planning_tooltiptext {
+  visibility: hidden;
+  background-color: var(--main-color);
+  color: var(--alt-main-color);
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  transform: translateX(2em) translateY(-3em);
+  transition: opacity 1s;
+}