mirror of
https://github.com/voc/streaming-website
synced 2024-11-10 06:34:17 +00:00
GPN21: more fancy
This commit is contained in:
Evelyn Alicke
parent
dc606252d1
commit
8b0cecd66b
2 changed files with 390 additions and 16 deletions
223
configs/conferences/gpn21/dip8-clean-margins.svg
Normal file
223
configs/conferences/gpn21/dip8-clean-margins.svg
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with ❤ by GPN21 design team -->
|
||||
|
||||
<svg
|
||||
width="120mm"
|
||||
height="120mm"
|
||||
version="1.1"
|
||||
viewBox="-120 -120 360 360"
|
||||
id="svg58"
|
||||
sodipodi:docname="dip8-clean-margins.svg"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview60"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#505050"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.52034722"
|
||||
inkscape:cx="216.20179"
|
||||
inkscape:cy="227.73255"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1060"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg58" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
id="g56">
|
||||
<g
|
||||
id="g54">
|
||||
<g
|
||||
transform="matrix(0.26458,0,0,0.26458,-643.05,18.202)"
|
||||
id="g50">
|
||||
<g
|
||||
transform="matrix(0.91168,-0.54529,0.54529,0.91168,1078.9,-512.43)"
|
||||
id="g14">
|
||||
<path
|
||||
transform="matrix(0.3871,0,0,0.3871,2440.5,-262.24)"
|
||||
d="m -4085.7,3687.4 527.51,0.3264 188.22,299.02 -526.17,-1.3118 -70.459,-108.19 18.082,-5.7234 5.5427,-10.067 0.8639,-14.099 -7.2817,-13.892 -10.508,-13.51 -17.088,-11.808 -20.949,-9.8804 -19.832,-0.6266 z"
|
||||
fill="#463453"
|
||||
stroke="#000000"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="5.6728"
|
||||
style="paint-order:markers fill stroke"
|
||||
id="path4" />
|
||||
<text
|
||||
transform="skewX(34.174)"
|
||||
x="171.08441"
|
||||
y="1197.9722"
|
||||
fill="#9a7a9b"
|
||||
font-family="Nunito"
|
||||
font-size="34.946px"
|
||||
letter-spacing="0px"
|
||||
stroke-width="1.8458"
|
||||
text-align="center"
|
||||
text-anchor="middle"
|
||||
word-spacing="0px"
|
||||
style="line-height:1"
|
||||
xml:space="preserve"
|
||||
id="text8"><tspan
|
||||
x="171.08441"
|
||||
y="1197.9722"
|
||||
font-family="Nunito"
|
||||
font-size="34.946px"
|
||||
font-weight="600"
|
||||
stroke-width="1.8458"
|
||||
id="tspan6">GPN 42/2</tspan></text>
|
||||
<text
|
||||
transform="skewX(34.174)"
|
||||
x="232.83411"
|
||||
y="1272.9598"
|
||||
fill="#9a7a9b"
|
||||
font-family="Nunito"
|
||||
font-size="18.898px"
|
||||
letter-spacing="0px"
|
||||
stroke-width="2.1959"
|
||||
text-align="center"
|
||||
text-anchor="middle"
|
||||
word-spacing="0px"
|
||||
style="line-height:1"
|
||||
xml:space="preserve"
|
||||
id="text12"><tspan
|
||||
x="232.83411"
|
||||
y="1272.9598"
|
||||
font-family="Nunito"
|
||||
font-size="18.898px"
|
||||
font-weight="600"
|
||||
stroke-width="2.1959"
|
||||
id="tspan10">23-23</tspan></text>
|
||||
</g>
|
||||
<path
|
||||
d="m 2821.9,122.27 8.4991,-35.865 -201.81,119.12 -0.3403,31.622 z"
|
||||
fill="#482228"
|
||||
stroke="#000000"
|
||||
stroke-linejoin="bevel"
|
||||
stroke-width="2.3313"
|
||||
id="path16" />
|
||||
<path
|
||||
d="m 2480.7,130.77 147.95,74.76 -0.3403,31.622 -132.09,-66.766 z"
|
||||
fill="#231a1e"
|
||||
stroke="#000000"
|
||||
stroke-linejoin="bevel"
|
||||
stroke-width="2.3313"
|
||||
id="path18" />
|
||||
<path
|
||||
d="m 2832.3,76.736 v 8.8354 l -204.47,120.41 0.4425,-8.453 z"
|
||||
fill="#481707"
|
||||
stroke="#000000"
|
||||
stroke-linejoin="bevel"
|
||||
stroke-width="2.3313"
|
||||
id="path20" />
|
||||
<path
|
||||
d="m 2628.2,205.34 0.3688,-8.4565 -150.11,-74.195 0.4245,8.4167 z"
|
||||
fill="#23191e"
|
||||
stroke="#000000"
|
||||
stroke-width="2.3313"
|
||||
id="path22" />
|
||||
<path
|
||||
d="m 2484.7,122 142.45,72.513 -0.2203,-47.626 -47.632,-23.454 -1.4833,13.896 -35.514,-17.126 2.189,-14.17 -47.168,-24.706 z"
|
||||
fill="#1c1516"
|
||||
stroke="#000000"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2.3327"
|
||||
id="path24" />
|
||||
<path
|
||||
d="m 2627.2,194.51 200.33,-118.91 -14.253,-38.753 -186.3,110.03 z"
|
||||
fill="#341d18"
|
||||
stroke="#000000"
|
||||
stroke-width="2.3313"
|
||||
id="path26" />
|
||||
<path
|
||||
d="m 2827.5,75.605 4.8132,1.1318 -204.03,120.8 -1.1204,-3.0207 z"
|
||||
fill="#481707"
|
||||
stroke="#000000"
|
||||
stroke-linejoin="bevel"
|
||||
stroke-width="2.3313"
|
||||
id="path28" />
|
||||
<path
|
||||
d="m 2479.3,122.31 2.9642,-2.7193 3.5139,-1.4207 -1.0673,3.828 142.45,72.513 1.1204,3.0207 z"
|
||||
fill="#464646"
|
||||
stroke="#000000"
|
||||
stroke-linejoin="bevel"
|
||||
stroke-width="2.3313"
|
||||
id="path30" />
|
||||
<path
|
||||
d="m 2671.3,325.85 v -74.538 l 11.784,-7.1739 v -49.505 l -1.4302,-5.1631 -2.6248,-4.1701 -2.9032,-3.9018 -13.458,-6.4056 -23.569,15.076 0.1624,7.8907 8.7822,4.1487 2.4065,2.8598 2.191,4.2618 v 120.3 l 4.2165,13.119 7.496,2.9926 4.9554,-3.4365 2.0977,-8.8071 z"
|
||||
fill="#d9b9c8"
|
||||
stroke="#000000"
|
||||
stroke-width="2.3313"
|
||||
id="path32" />
|
||||
<path
|
||||
d="m 2709.7,229.65 v 70.083 l 4.0356,11.065 5.1925,1.6545 5.4431,-3.5937 3.382,-14.65 v -77.708 l 9.8501,-6.2131 v -48.221 l -1.1063,-4.8437 -2.9801,-4.852 -3.2782,-3.277 -13.254,-6.3582 -31.975,18.626 v 10.032 l 8.4275,3.8143 2.3787,3.403 1.6988,5.3652 v 43.693 l 6.7256,3.9784 z"
|
||||
fill="#d9b9c8"
|
||||
stroke="#000000"
|
||||
stroke-width="2.3313"
|
||||
id="path34" />
|
||||
<path
|
||||
d="m 2765.6,195.74 v 70.083 l 4.0356,11.065 5.1925,1.6545 5.4431,-3.5937 3.382,-14.65 v -77.708 l 9.8501,-6.2131 v -48.221 l -1.1063,-4.8437 -2.9801,-4.852 -3.2782,-3.277 -13.254,-6.3582 -31.975,18.626 v 10.032 l 8.4275,3.8143 2.3787,3.403 1.6988,5.3652 v 43.693 l 6.7256,3.9784 z"
|
||||
fill="#d9b9c8"
|
||||
stroke="#000000"
|
||||
stroke-width="2.3313"
|
||||
id="path36" />
|
||||
<path
|
||||
d="m 2821.7,163.21 v 70.083 l 4.0356,11.065 5.1925,1.6545 5.4431,-3.5937 3.382,-14.65 v -77.708 l -0.059,0.58187 v -48.221 l -1.1063,-4.8437 -2.9801,-4.852 -3.2782,-3.277 -13.254,-6.3582 -22.065,11.831 v 10.032 l 8.4274,3.8143 2.3787,3.403 1.6988,5.3652 v 43.693 l 6.7257,3.9784 z"
|
||||
fill="#d9b9c8"
|
||||
stroke="#000000"
|
||||
stroke-width="2.3313"
|
||||
id="path38" />
|
||||
<path
|
||||
d="m 2474.7,117.35 v 113.98 l 4.2694,19.958 4.8106,2.199 7.1114,-3.5345 2.7939,-13.711 v -72.129 l -13.792,-33.734 -0.5236,-8.0674 2.7494,-2.2975 1.9089,-1.6628 1.2964,-0.16663 1.6207,-5.5939 -5.1627,-3.6723 -2.8756,0.52204 -2.1414,1.2804 -1.8871,3.6504 z"
|
||||
fill="#6e6daf"
|
||||
stroke="#000000"
|
||||
stroke-width="2.3327"
|
||||
id="path40" />
|
||||
<path
|
||||
d="m 2532.7,188.62 v 17.411 l 2.8779,11.492 5.4064,1.953 5.9749,-2.9932 2.169,-13.063 v -5.9914 z"
|
||||
fill="#6e6daf"
|
||||
stroke="#000000"
|
||||
stroke-width="2.3313"
|
||||
id="path42" />
|
||||
<path
|
||||
d="m 2544.5,106.03 -2.189,14.17 35.514,17.126 1.4833,-13.896 5.1908,-5.8207 -0.1545,-4.7232 -2.6555,-5.1661 -5.4918,-3.3824 -6.552,-2.5696 -8.5212,-0.58627 -9.4813,0.90615 z"
|
||||
fill="#111111"
|
||||
fill-opacity="0.99662"
|
||||
stroke="#000000"
|
||||
stroke-width="2.3313"
|
||||
id="path44" />
|
||||
<path
|
||||
d="m 2477.5,110.11 13.998,-8.0371 -3.7075,10.879 -5.8706,-3.6292 -2.8756,0.52204 z"
|
||||
fill="#6e6daf"
|
||||
stroke="#000000"
|
||||
stroke-width="2.0918"
|
||||
id="path46" />
|
||||
<path
|
||||
d="m 2542.4,120.9 34.808,17.399 2.3808,-15.71 -5.4919,-3.3824 -6.5519,-2.5696 -8.5212,-0.58627 -9.4813,0.90615 z"
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke-width="2.3313"
|
||||
id="path48" />
|
||||
</g>
|
||||
<rect
|
||||
width="120"
|
||||
height="120"
|
||||
fill="none"
|
||||
id="rect52"
|
||||
x="0"
|
||||
y="0" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.4 KiB |
|
|
@ -1,19 +1,138 @@
|
|||
// vim: ts=4 sw=4 et
|
||||
@import "../../../assets/css/_structure.less";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('/configs/conferences/gpn21/Roboto-Regular.ttf') format('truetype');
|
||||
src: local('Roboto'), url('/configs/conferences/gpn21/Roboto-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@panel-default-border: #000;
|
||||
@orange: #ea5b0c;
|
||||
@panel-color: #eee;
|
||||
@panel-default-border: transparent;
|
||||
@nav-tabs-border-color: #000;
|
||||
@nav-tabs-active-link-hover-border-color: #000;
|
||||
@nav-tabs-justified-link-border-color: #000;
|
||||
|
||||
|
||||
.background() {
|
||||
background-image: url(dip8-clean-margins.svg), url(dip8-clean-margins.svg);
|
||||
background-size: 10%;
|
||||
background-position: 0 0, 240px 240px;
|
||||
background-scale: space;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto';
|
||||
border-radius: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
body > .container {
|
||||
padding-bottom: 30px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.hls {
|
||||
padding-bottom: 20px;
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body.room {
|
||||
background-color: @panel-color;
|
||||
}
|
||||
|
||||
.flex-root() {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.room-group {
|
||||
.flex-root();
|
||||
}
|
||||
|
||||
.room-medientheater {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.room-vortragssaal, .room-blauersalon {
|
||||
flex-basis: 50%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.talk {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: transparent;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.panel > *, .panel {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.panel-heading {
|
||||
border-bottom: #666 1px solid !important;
|
||||
background-color: fade(@panel-color, 80%) !important;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
background: fade(@panel-color, 60%);
|
||||
|
||||
}
|
||||
|
||||
.hoverable() {
|
||||
padding: 15px;
|
||||
border: 1px solid;
|
||||
transition: 200ms ease-in-out all;
|
||||
border-color: transparent;
|
||||
color: @orange;
|
||||
&:hover {
|
||||
border-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-primary {
|
||||
border: 0px;
|
||||
& > .panel-body {
|
||||
padding: 0px;
|
||||
& > * {
|
||||
.hoverable();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
h2 {
|
||||
& > span {
|
||||
padding: 10px !important;
|
||||
font-weight: bold;
|
||||
font-size: x-large;
|
||||
}
|
||||
}
|
||||
|
||||
.col-sm-6 {
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
& > .panel > .panel-body > a {
|
||||
font-size: x-large;
|
||||
}
|
||||
}
|
||||
|
||||
.recordings {
|
||||
.flex-root();
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -29,21 +148,53 @@ nav .navbar-brand .icon {
|
|||
background-size: contain;
|
||||
}
|
||||
|
||||
nav {
|
||||
border-bottom: #666 solid 1px !important;
|
||||
background-color: fade(white, 80%) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
.hoverable();
|
||||
padding: 10px;
|
||||
}
|
||||
.btn-primary {
|
||||
color: white;
|
||||
background-color: @orange !important;
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.gpn21 {
|
||||
background-image: url(dip8-clean.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 320px 320px;
|
||||
|
||||
animation: fadein 1s;
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
bottom: 70px;
|
||||
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
|
||||
.background();
|
||||
filter: opacity(30%) brightness(2) contrast(0.2) saturate(80%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -100;
|
||||
|
||||
@media (max-width: @screen-sm-min) {
|
||||
display: none;
|
||||
}
|
||||
.preview-warning {
|
||||
transition: 10s ease-in-out all;
|
||||
backdrop-filter: blur(10px);
|
||||
opacity: 0.7;
|
||||
padding: 1ch .5ch .5ch 1ch !important;
|
||||
border-top-left-radius: 2ch;
|
||||
font-weight: bold;
|
||||
width: min-content;
|
||||
height: max-content;
|
||||
user-select: none;
|
||||
pointer-events:hover;
|
||||
&:hover {
|
||||
opacity: 0.2;
|
||||
transition: 300ms ease-in-out all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue