Merge branch 'master' of https://github.com/sebathefox/skolehjem-webapp into master

skolehjem/public/css/webapp.css

@@ -1,19 +1,23 @@
 @charset "UTF-8";
+
 @font-face {
   font-family: "Titillium Web";
   src: url("/fonts/TitilliumWeb-Regular.ttf");
   font-weight: normal;
 }
+
 @font-face {
   font-family: "Titillium Web";
   src: url("/fonts/TitilliumWeb-SemiBold.ttf");
   font-weight: 600;
 }
+
 @font-face {
   font-family: "Titillium Web";
   src: url("/fonts/TitilliumWeb-Bold.ttf");
   font-weight: 700;
 }
+
 form {
   max-width: 100%;
   padding: 0 0.45rem 0 0.45rem;
@@ -66,7 +70,8 @@ input[type=file] {
   display: inline-flex;
 }
 
-input, select {
+input,
+select {
   border: grey solid 2px;
   border-radius: 4px;
   background-color: transparent;
@@ -284,7 +289,8 @@ span.toggle__text.sde-blue {
   font-family: "Titillium Web";
 }
 
-html, body {
+html,
+body {
   width: 100%;
   margin: 0;
   padding: 0;
@@ -532,6 +538,7 @@ a {
  * Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  */
+
 .fa,
 .fas,
 .far,
@@ -611,6 +618,7 @@ a {
   margin-left: 2.5em;
   padding-left: 0;
 }
+
 .fa-ul > li {
   position: relative;
 }
@@ -644,6 +652,7 @@ a {
 .fab.fa-pull-left {
   margin-right: 0.3em;
 }
+
 .fa.fa-pull-right,
 .fas.fa-pull-right,
 .far.fa-pull-right,
@@ -666,6 +675,7 @@ a {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -675,10 +685,12 @@ a {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
+
 .fa-rotate-90 {
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
   transform: rotate(90deg);
@@ -704,7 +716,8 @@ a {
   transform: scale(1, -1);
 }
 
-.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
+.fa-flip-both,
+.fa-flip-horizontal.fa-flip-vertical {
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
   transform: scale(-1, -1);
 }
@@ -750,6 +763,7 @@ a {
 
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
 readers do not read off random characters that represent icons */
+
 .fa-500px:before {
   content: "\F26E";
 }
@@ -6553,7 +6567,8 @@ readers do not read off random characters that represent icons */
   width: 1px;
 }
 
-.sr-only-focusable:active, .sr-only-focusable:focus {
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
   clip: auto;
   height: auto;
   margin: 0;
@@ -6566,6 +6581,7 @@ readers do not read off random characters that represent icons */
  * Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  */
+
 @font-face {
   font-family: "Font Awesome 5 Free";
   font-style: normal;
@@ -6574,6 +6590,7 @@ readers do not read off random characters that represent icons */
   src: url("/webfonts/fa-solid-900.eot");
   src: url("/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/webfonts/fa-solid-900.woff2") format("woff2"), url("/webfonts/fa-solid-900.woff") format("woff"), url("/webfonts/fa-solid-900.ttf") format("truetype"), url("/webfonts/fa-solid-900.svg#fontawesome") format("svg");
 }
+
 .fa,
 .fas {
   font-family: "Font Awesome 5 Free";
@@ -6612,7 +6629,8 @@ main {
     margin: 7rem 0 5rem 0;
   }
 
-  header, #menu {
+  header,
+  #menu {
     padding: 1.25rem 1.75rem 0 1.75rem;
   }
 
@@ -6662,9 +6680,11 @@ main {
     justify-content: center;
   }
 }
+
 .mock-up-link {
   display: none;
 }
+
 @media (min-width: 768px) {
   .mock-up-link {
     display: block;
@@ -6678,6 +6698,7 @@ main {
   max-width: 414px;
   overflow-y: auto;
 }
+
 @media (min-width: 415px) {
   .main-container-wrapper {
     box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
@@ -6697,14 +6718,17 @@ main {
   top: -25px;
   width: 80px;
 }
+
 .header__btn .icon {
   display: inline-block;
 }
+
 .header__btn--left {
   left: -25px;
   padding-left: 38px;
   text-align: left;
 }
+
 .header__btn--right {
   padding-right: 32px;
   right: -25px;
@@ -6716,10 +6740,12 @@ main {
   padding: 16px;
   margin-bottom: 24px;
 }
+
 .calendar-container__header {
   display: flex;
   justify-content: space-between;
 }
+
 .calendar-container__btn {
   background: transparent;
   border: 0;
@@ -6728,6 +6754,7 @@ main {
   outline: none;
   color: #E9E8E8;
 }
+
 .calendar-container__title {
   color: #222741;
   font-size: 20px;
@@ -6742,6 +6769,7 @@ main {
   margin-top: 12px;
   width: 100%;
 }
+
 .calendar-table__item {
   border-radius: 50%;
   color: #424588;
@@ -6754,17 +6782,21 @@ main {
   justify-content: center;
   cursor: pointer;
 }
+
 .calendar-table__item:hover > span {
   color: white;
 }
+
 .calendar-table__row {
   display: flex;
   justify-content: center;
 }
+
 .calendar-table__header {
   border-bottom: 2px solid #F2F6F8;
   margin-bottom: 4px;
 }
+
 .calendar-table__header .calendar-table__col {
   display: inline-block;
   color: #99A4AE;
@@ -6776,95 +6808,115 @@ main {
   width: 40px;
   height: 18px;
 }
+
 @media (min-width: 350px) {
   .calendar-table__header .calendar-table__col {
     width: 46px;
     height: 20.7px;
   }
 }
+
 @media (min-width: 390px) {
   .calendar-table__header .calendar-table__col {
     width: 56px;
     height: 25.2px;
   }
 }
+
 .calendar-table__body .calendar-table__col {
   width: 40px;
   height: 40px;
   border-radius: 50%;
 }
+
 @media (min-width: 350px) {
   .calendar-table__body .calendar-table__col {
     width: 46px;
     height: 46px;
   }
 }
+
 @media (min-width: 390px) {
   .calendar-table__body .calendar-table__col {
     width: 56px;
     height: 56px;
   }
 }
+
 @media (min-width: 410px) {
   .calendar-table__body .calendar-table__col {
     width: 56px;
     height: 56px;
   }
 }
+
 @media (min-width: 460px) {
   .calendar-table__body .calendar-table__col {
     width: 61px;
     height: 61px;
   }
 }
+
 .calendar-table__body .calendar-table__col.selected {
   background: #00788a;
   transition: all 0.3s ease-in;
   outline: none;
 }
+
 .calendar-table__today .calendar-table__item {
   border-color: #FEFEFE;
   background-color: #00788a;
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
 }
+
 .calendar-table__event .calendar-table__item {
   background-color: #00788a;
   border-color: #FEFEFE;
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
   color: #fff;
 }
+
 .calendar-table__event--long {
   overflow-x: hidden;
 }
+
 .calendar-table__event--long .calendar-table__item {
   border-radius: 0;
 }
+
 .calendar-table__event--start .calendar-table__item {
   border-left: 2px solid #fff;
   border-radius: 50% 0 0 50%;
 }
+
 .calendar-table__event--start.calendar-table__col:last-child .calendar-table__item {
   border-width: 2px;
 }
+
 .calendar-table__event--end .calendar-table__item {
   border-right: 2px solid #fff;
   border-radius: 0 50% 50% 0;
 }
+
 .calendar-table__event--end.calendar-table__col:first-child .calendar-table__item {
   border-width: 2px;
 }
+
 .calendar-table__inactive .calendar-table__item {
   color: #DCDCE3;
   cursor: default;
 }
+
 .calendar-table__inactive .calendar-table__item:hover {
   background: transparent;
   box-shadow: none;
 }
+
 .calendar-table__inactive.calendar-table__event .calendar-table__item {
   color: #fff;
   opacity: 0.25;
 }
+
 .calendar-table__inactive.calendar-table__event .calendar-table__item:hover {
   background: #00788a;
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
@@ -6888,6 +6940,7 @@ main {
   font-weight: 600;
   margin-bottom: 16px;
 }
+
 .events__tag {
   background: #00788a;
   border: 2px solid #FEFEFE;
@@ -6901,9 +6954,11 @@ main {
   padding: 5px 2px;
   text-align: center;
 }
+
 .events__tag--highlighted {
   background: #FDCA40;
 }
+
 .events__item {
   background: #fff;
   border-left: 8px solid #00788a;
@@ -6915,9 +6970,11 @@ main {
   align-items: center;
   margin-bottom: 16px;
 }
+
 .events__item--left {
   width: calc(100% - 76px);
 }
+
 .events__name {
   font-size: 12px;
   font-weight: 700;
@@ -6925,6 +6982,7 @@ main {
   display: block;
   margin-bottom: 6px;
 }
+
 .events__date {
   font-size: 12px;
   color: #9FAAB7;
@@ -6976,38 +7034,46 @@ main {
     bottom: 0;
     opacity: 0;
   }
+
   to {
     bottom: 30px;
     opacity: 1;
   }
 }
+
 @keyframes fadein {
   from {
     bottom: 0;
     opacity: 0;
   }
+
   to {
     bottom: 30px;
     opacity: 1;
   }
 }
+
 @-webkit-keyframes fadeout {
   from {
     bottom: 30px;
     opacity: 1;
   }
+
   to {
     bottom: 0;
     opacity: 0;
   }
 }
+
 @keyframes fadeout {
   from {
     bottom: 30px;
     opacity: 1;
   }
+
   to {
     bottom: 0;
     opacity: 0;
   }
 }
+

skolehjem/public/css/webappdark.css

@@ -1,19 +1,23 @@
 @charset "UTF-8";
+
 @font-face {
   font-family: "Titillium Web";
   src: url("/fonts/TitilliumWeb-Regular.ttf");
   font-weight: normal;
 }
+
 @font-face {
   font-family: "Titillium Web";
   src: url("/fonts/TitilliumWeb-SemiBold.ttf");
   font-weight: 600;
 }
+
 @font-face {
   font-family: "Titillium Web";
   src: url("/fonts/TitilliumWeb-Bold.ttf");
   font-weight: 700;
 }
+
 form {
   max-width: 100%;
   padding: 0 0.45rem 0 0.45rem;
@@ -66,7 +70,8 @@ input[type=file] {
   display: inline-flex;
 }
 
-input, select {
+input,
+select {
   border: grey solid 2px;
   border-radius: 4px;
   background-color: transparent;
@@ -284,7 +289,8 @@ span.toggle__text.sde-blue {
   font-family: "Titillium Web";
 }
 
-html, body {
+html,
+body {
   width: 100%;
   margin: 0;
   padding: 0;
@@ -532,6 +538,7 @@ a {
  * Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  */
+
 .fa,
 .fas,
 .far,
@@ -611,6 +618,7 @@ a {
   margin-left: 2.5em;
   padding-left: 0;
 }
+
 .fa-ul > li {
   position: relative;
 }
@@ -644,6 +652,7 @@ a {
 .fab.fa-pull-left {
   margin-right: 0.3em;
 }
+
 .fa.fa-pull-right,
 .fas.fa-pull-right,
 .far.fa-pull-right,
@@ -666,6 +675,7 @@ a {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -675,10 +685,12 @@ a {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
+
 .fa-rotate-90 {
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
   transform: rotate(90deg);
@@ -704,7 +716,8 @@ a {
   transform: scale(1, -1);
 }
 
-.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
+.fa-flip-both,
+.fa-flip-horizontal.fa-flip-vertical {
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
   transform: scale(-1, -1);
 }
@@ -750,6 +763,7 @@ a {
 
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
 readers do not read off random characters that represent icons */
+
 .fa-500px:before {
   content: "\F26E";
 }
@@ -6553,7 +6567,8 @@ readers do not read off random characters that represent icons */
   width: 1px;
 }
 
-.sr-only-focusable:active, .sr-only-focusable:focus {
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
   clip: auto;
   height: auto;
   margin: 0;
@@ -6566,6 +6581,7 @@ readers do not read off random characters that represent icons */
  * Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  */
+
 @font-face {
   font-family: "Font Awesome 5 Free";
   font-style: normal;
@@ -6574,6 +6590,7 @@ readers do not read off random characters that represent icons */
   src: url("/webfonts/fa-solid-900.eot");
   src: url("/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/webfonts/fa-solid-900.woff2") format("woff2"), url("/webfonts/fa-solid-900.woff") format("woff"), url("/webfonts/fa-solid-900.ttf") format("truetype"), url("/webfonts/fa-solid-900.svg#fontawesome") format("svg");
 }
+
 .fa,
 .fas {
   font-family: "Font Awesome 5 Free";
@@ -6612,7 +6629,8 @@ main {
     margin: 7rem 0 5rem 0;
   }
 
-  header, #menu {
+  header,
+  #menu {
     padding: 1.25rem 1.75rem 0 1.75rem;
   }
 
@@ -6662,9 +6680,11 @@ main {
     justify-content: center;
   }
 }
+
 .mock-up-link {
   display: none;
 }
+
 @media (min-width: 768px) {
   .mock-up-link {
     display: block;
@@ -6678,6 +6698,7 @@ main {
   max-width: 414px;
   overflow-y: auto;
 }
+
 @media (min-width: 415px) {
   .main-container-wrapper {
     box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
@@ -6697,14 +6718,17 @@ main {
   top: -25px;
   width: 80px;
 }
+
 .header__btn .icon {
   display: inline-block;
 }
+
 .header__btn--left {
   left: -25px;
   padding-left: 38px;
   text-align: left;
 }
+
 .header__btn--right {
   padding-right: 32px;
   right: -25px;
@@ -6716,10 +6740,12 @@ main {
   padding: 16px;
   margin-bottom: 24px;
 }
+
 .calendar-container__header {
   display: flex;
   justify-content: space-between;
 }
+
 .calendar-container__btn {
   background: transparent;
   border: 0;
@@ -6728,6 +6754,7 @@ main {
   outline: none;
   color: #E9E8E8;
 }
+
 .calendar-container__title {
   color: #222741;
   font-size: 20px;
@@ -6742,6 +6769,7 @@ main {
   margin-top: 12px;
   width: 100%;
 }
+
 .calendar-table__item {
   border-radius: 50%;
   color: #424588;
@@ -6754,17 +6782,21 @@ main {
   justify-content: center;
   cursor: pointer;
 }
+
 .calendar-table__item:hover > span {
   color: white;
 }
+
 .calendar-table__row {
   display: flex;
   justify-content: center;
 }
+
 .calendar-table__header {
   border-bottom: 2px solid #F2F6F8;
   margin-bottom: 4px;
 }
+
 .calendar-table__header .calendar-table__col {
   display: inline-block;
   color: #99A4AE;
@@ -6776,95 +6808,115 @@ main {
   width: 40px;
   height: 18px;
 }
+
 @media (min-width: 350px) {
   .calendar-table__header .calendar-table__col {
     width: 46px;
     height: 20.7px;
   }
 }
+
 @media (min-width: 390px) {
   .calendar-table__header .calendar-table__col {
     width: 56px;
     height: 25.2px;
   }
 }
+
 .calendar-table__body .calendar-table__col {
   width: 40px;
   height: 40px;
   border-radius: 50%;
 }
+
 @media (min-width: 350px) {
   .calendar-table__body .calendar-table__col {
     width: 46px;
     height: 46px;
   }
 }
+
 @media (min-width: 390px) {
   .calendar-table__body .calendar-table__col {
     width: 56px;
     height: 56px;
   }
 }
+
 @media (min-width: 410px) {
   .calendar-table__body .calendar-table__col {
     width: 56px;
     height: 56px;
   }
 }
+
 @media (min-width: 460px) {
   .calendar-table__body .calendar-table__col {
     width: 61px;
     height: 61px;
   }
 }
+
 .calendar-table__body .calendar-table__col.selected {
   background: #00788a;
   transition: all 0.3s ease-in;
   outline: none;
 }
+
 .calendar-table__today .calendar-table__item {
   border-color: #FEFEFE;
   background-color: #00788a;
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
 }
+
 .calendar-table__event .calendar-table__item {
   background-color: #00788a;
   border-color: #FEFEFE;
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
   color: #fff;
 }
+
 .calendar-table__event--long {
   overflow-x: hidden;
 }
+
 .calendar-table__event--long .calendar-table__item {
   border-radius: 0;
 }
+
 .calendar-table__event--start .calendar-table__item {
   border-left: 2px solid #fff;
   border-radius: 50% 0 0 50%;
 }
+
 .calendar-table__event--start.calendar-table__col:last-child .calendar-table__item {
   border-width: 2px;
 }
+
 .calendar-table__event--end .calendar-table__item {
   border-right: 2px solid #fff;
   border-radius: 0 50% 50% 0;
 }
+
 .calendar-table__event--end.calendar-table__col:first-child .calendar-table__item {
   border-width: 2px;
 }
+
 .calendar-table__inactive .calendar-table__item {
   color: #DCDCE3;
   cursor: default;
 }
+
 .calendar-table__inactive .calendar-table__item:hover {
   background: transparent;
   box-shadow: none;
 }
+
 .calendar-table__inactive.calendar-table__event .calendar-table__item {
   color: #fff;
   opacity: 0.25;
 }
+
 .calendar-table__inactive.calendar-table__event .calendar-table__item:hover {
   background: #00788a;
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
@@ -6888,6 +6940,7 @@ main {
   font-weight: 600;
   margin-bottom: 16px;
 }
+
 .events__tag {
   background: #00788a;
   border: 2px solid #FEFEFE;
@@ -6901,9 +6954,11 @@ main {
   padding: 5px 2px;
   text-align: center;
 }
+
 .events__tag--highlighted {
   background: #FDCA40;
 }
+
 .events__item {
   background: #fff;
   border-left: 8px solid #00788a;
@@ -6915,9 +6970,11 @@ main {
   align-items: center;
   margin-bottom: 16px;
 }
+
 .events__item--left {
   width: calc(100% - 76px);
 }
+
 .events__name {
   font-size: 12px;
   font-weight: 700;
@@ -6925,6 +6982,7 @@ main {
   display: block;
   margin-bottom: 6px;
 }
+
 .events__date {
   font-size: 12px;
   color: #9FAAB7;
@@ -6976,42 +7034,51 @@ main {
     bottom: 0;
     opacity: 0;
   }
+
   to {
     bottom: 30px;
     opacity: 1;
   }
 }
+
 @keyframes fadein {
   from {
     bottom: 0;
     opacity: 0;
   }
+
   to {
     bottom: 30px;
     opacity: 1;
   }
 }
+
 @-webkit-keyframes fadeout {
   from {
     bottom: 30px;
     opacity: 1;
   }
+
   to {
     bottom: 0;
     opacity: 0;
   }
 }
+
 @keyframes fadeout {
   from {
     bottom: 30px;
     opacity: 1;
   }
+
   to {
     bottom: 0;
     opacity: 0;
   }
 }
-html, body {
+
+html,
+body {
   background-color: #666666;
 }
 
@@ -7027,7 +7094,8 @@ main {
   color: white;
 }
 
-input, select {
+input,
+select {
   border-color: white;
 }
 
@@ -7055,3 +7123,4 @@ input::placeholder {
 .ql-align-center > strong {
   color: #ffffff;
 }
+