Initial commit
This commit is contained in:
47
static/roboto.css
Normal file
47
static/roboto.css
Normal file
@ -0,0 +1,47 @@
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-regular.eot);
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-regular.eot?#iefix) format('embedded-opentype'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-regular.woff2) format('woff2'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-regular.woff) format('woff'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-regular.ttf) format('truetype'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-regular.svg#Roboto) format('svg')
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url(https://static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-italic.eot);
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-italic.eot?#iefix) format('embedded-opentype'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-italic.woff2) format('woff2'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-italic.woff) format('woff'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-italic.ttf) format('truetype'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-italic.svg#Roboto) format('svg')
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(https://static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-700.eot);
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-700.eot?#iefix) format('embedded-opentype'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-700.woff2) format('woff2'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-700.woff) format('woff'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-700.ttf) format('truetype'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-700.svg#Roboto) format('svg')
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url(https://static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-700italic.eot);
|
||||
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-700italic.eot?#iefix) format('embedded-opentype'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-700italic.woff2) format('woff2'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-700italic.woff) format('woff'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-700italic.ttf) format('truetype'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-v20-latin-700italic.svg#Roboto) format('svg')
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://static.fablab-altmuehlfranken.de/fonts/roboto-slab-v9-latin-regular.eot);
|
||||
src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-slab-v9-latin-regular.eot?#iefix) format('embedded-opentype'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-slab-v9-latin-regular.woff2) format('woff2'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-slab-v9-latin-regular.woff) format('woff'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-slab-v9-latin-regular.ttf) format('truetype'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-slab-v9-latin-regular.svg#RobotoSlab) format('svg')
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(https://static.fablab-altmuehlfranken.de/fonts/roboto-slab-v9-latin-700.eot);
|
||||
src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-slab-v9-latin-700.eot?#iefix) format('embedded-opentype'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-slab-v9-latin-700.woff2) format('woff2'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-slab-v9-latin-700.woff) format('woff'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-slab-v9-latin-700.ttf) format('truetype'), url(//static.fablab-altmuehlfranken.de/fonts/roboto-slab-v9-latin-700.svg#RobotoSlab) format('svg')
|
||||
}
|
||||
157
static/style.css
Normal file
157
static/style.css
Normal file
@ -0,0 +1,157 @@
|
||||
:root {
|
||||
--calendar-fablab-red: #D13F34;
|
||||
--calendar-fablab-blue: #16A3C4;
|
||||
--calendar-border: 1px solid #999;
|
||||
}
|
||||
|
||||
body {
|
||||
color: black;
|
||||
|
||||
/* inspired by fablab-altmuehlfranken.de */
|
||||
font-weight: 100;
|
||||
line-height: 1.3;
|
||||
font-size: 9pt;
|
||||
|
||||
height: auto;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.calendar {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.calendar-date {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-direction: row;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.calendar-date-date {
|
||||
border: var(--calendar-border);
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
margin-right: 8px;
|
||||
flex: 35px 0 0;
|
||||
height: 100%;
|
||||
}
|
||||
.calendar-date-month {
|
||||
background-color: var(--calendar-fablab-red);
|
||||
color: white;
|
||||
padding: 3px 0;
|
||||
}
|
||||
.calendar-date:nth-of-type(2n) .calendar-date-month {
|
||||
/*background-color: var(--calendar-fablab-blue);*/
|
||||
}
|
||||
.calendar-date-day {
|
||||
font-size: 13pt;
|
||||
font-weight: 700;
|
||||
padding-top: 3px;
|
||||
}
|
||||
.calendar-date-weekday {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.calendar-events {
|
||||
flex-grow: 100;
|
||||
vertical-align: top;
|
||||
}
|
||||
.calendar-event {
|
||||
background-color: white;
|
||||
border: var(--calendar-border);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
filter: brightness(1);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
.calendar-event-time {
|
||||
text-align: center;
|
||||
padding: 5px 8px 5px 5px;
|
||||
margin: -5px 0 -5px -5px;
|
||||
flex: 0 0 45px;
|
||||
background-color: #ddd;
|
||||
}
|
||||
.calendar-event-timesep {
|
||||
line-height: 1.2;
|
||||
}
|
||||
.calendar-event-timesep:before {
|
||||
display: block;
|
||||
content: "⋮";
|
||||
}
|
||||
.calendar-event-description {
|
||||
flex-grow: 100;
|
||||
margin: 0 5px;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
.calendar-event-description, .calendar-event-time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.calendar-event-type {
|
||||
flex: 0 0 12px;
|
||||
margin: -5px -5px -5px 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.calendar-event {
|
||||
flex-direction: column;
|
||||
}
|
||||
.calendar-event-time {
|
||||
flex-direction: row;
|
||||
padding: 5px 8px 5px 5px;
|
||||
margin: -5px -5px 5px -5px;
|
||||
flex: 0 0 12px;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.calendar-event-type {
|
||||
flex: 0 0 12px;
|
||||
margin: 5px -5px -5px -5px;
|
||||
}
|
||||
.calendar-event-timesep {
|
||||
display: block;
|
||||
}
|
||||
.calendar-event-timesep:before {
|
||||
display: block;
|
||||
content: "...";
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-date-date, .calendar-event {
|
||||
/* make sure border radius clips content */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
details.calendar-event-details > summary {
|
||||
text-decoration: underline dotted black;
|
||||
}
|
||||
.calendar-popover-content > * {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.calendar-popover-entry {
|
||||
display: flex;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.calendar-popover-entry-icon {
|
||||
flex: 0 0 18px;
|
||||
}
|
||||
|
||||
/* CSS-only "fake soft open", might be replaced something more sophisticated in the future */
|
||||
details.calendar-event-details[open] summary ~ * {
|
||||
animation: calendar-event-details-sweep .5s ease-in-out;
|
||||
}
|
||||
@keyframes calendar-event-details-sweep {
|
||||
0% {opacity: 0; transform: translateY(-10px)}
|
||||
100% {opacity: 1; transform: translateY(0)}
|
||||
}
|
||||
Reference in New Issue
Block a user