worked on a lot of things

This commit is contained in:
2019-07-02 03:46:02 +02:00
parent 98e0282821
commit 43e6e9b373
12 changed files with 860 additions and 161 deletions

View File

@@ -68,6 +68,9 @@ button {
object {
pointer-events: none; }
/* -------------------------------------------------------------------------- */
/* MEDIA QUERIES */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* GLOBAL VARIABLES */
/* -------------------------------------------------------------------------- */
@@ -287,10 +290,24 @@ object {
position: relative;
height: 100%;
overflow: auto;
padding: 0 4rem; }
padding: 0 4rem;
padding-bottom: 4rem; }
@media (min-width: 769px) {
.wrapper .header #sidebar .sidebar-wrapper {
padding: 4rem; } }
padding: 4rem;
display: flex;
flex-direction: row;
align-items: center; } }
.wrapper .header #sidebar .sidebar-wrapper .menuseparator {
display: none; }
@media (min-width: 769px) {
.wrapper .header #sidebar .sidebar-wrapper .menuseparator {
display: block;
width: 1px;
height: 70%;
background-color: #fff;
flex: 0 0 auto;
margin: 4rem; } }
.wrapper .header #sidebar .sidebar-wrapper ul {
margin-block-start: 0;
margin-block-end: 0;
@@ -299,6 +316,7 @@ object {
padding-inline-start: 0; }
@media (min-width: 769px) {
.wrapper .header #sidebar .sidebar-wrapper ul {
flex: 1 1 50%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
@@ -309,7 +327,6 @@ object {
padding-top: 2rem; }
@media (min-width: 769px) {
.wrapper .header #sidebar .sidebar-wrapper li {
width: 50%;
padding: 3rem 0; } }
.wrapper .header #sidebar .sidebar-wrapper li a {
font: 900 4rem "Westeinde Caption";
@@ -323,7 +340,7 @@ object {
.wrapper .header #tag-nav {
display: none;
position: fixed;
right: calc(20rem + 2px);
right: calc(20rem + 4px);
top: calc(4rem/ 2);
z-index: 1000; }
@media (min-width: 769px) {
@@ -791,7 +808,8 @@ object {
z-index: -1; } }
@media (min-width: 769px) {
.wrapper main section .misha_loadmore {
width: 10rem;
min-width: 10rem;
width: calc(100vw - ((100vh - 8rem) / 2 * 3) - 20rem);
margin-right: 10rem;
align-self: stretch;
display: flex;
@@ -822,7 +840,8 @@ object {
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); } }
transform: rotate(-90deg);
text-align: center; } }
.touchevents .header-scroll {
display: none !important; }
@@ -842,6 +861,9 @@ object {
.archive .wrapper,
.home .wrapper {
overflow-y: hidden;
width: -moz-max-content;
width: max-content;
width: -moz-fit-content;
width: fit-content; } }
@media (min-width: 769px) {
.archive .wrapper .header .header-scroll,
@@ -873,6 +895,9 @@ object {
.archive main,
.home main {
height: 100vh;
width: -moz-max-content;
width: max-content;
width: -moz-fit-content;
width: fit-content;
position: relative; } }
@@ -889,6 +914,9 @@ object {
flex-direction: row;
margin: 0;
height: 100vh;
width: -moz-max-content;
width: max-content;
width: -moz-fit-content;
width: fit-content; } }
.archive main section article,
.home main section article {
@@ -936,6 +964,9 @@ object {
bottom: 50%;
height: 5rem;
display: flex;
width: -moz-max-content;
width: max-content;
width: -moz-fit-content;
width: fit-content;
justify-content: space-around;
flex-wrap: nowrap;
@@ -1014,6 +1045,9 @@ object {
.home main section .home-wrapper-big article .metadata {
height: calc(10rem / 2); } }
@media (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata.noBottomScrollbar,
.home main section .home-wrapper-big article .metadata.noBottomScrollbar {
height: 11.5rem; }
.archive main section .home-wrapper-big article .metadata > div,
.home main section .home-wrapper-big article .metadata > div {
flex: 1 1 auto; }
@@ -1158,22 +1192,30 @@ object {
.archive main section .home-wrapper-big.home-wrapper-2 article .metadata .filler,
.home main section .home-wrapper-big.home-wrapper-2 article .metadata .filler {
order: -1; }
.archive main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img,
.home main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img {
left: -5rem;
position: relative; } }
.archive main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper,
.home main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper {
width: calc(60% + 5rem); }
.archive main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img,
.home main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img {
left: -5rem;
position: relative; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-small,
.home main section .home-wrapper-small {
width: calc(100vw - (10rem * 3));
height: calc((100vw - (10rem * 3)) / 3 * 2);
max-width: calc(100vw - (10rem * 3));
max-height: calc((100vw - (10rem * 3)) / 3 * 2);
height: calc(100vh - 8rem);
width: calc((100vh - 8rem) / 2 * 3);
flex-shrink: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: auto 0; }
.archive main section .home-wrapper-small.home-wrapper-s1,
.home main section .home-wrapper-small.home-wrapper-s1 {
.archive main section .home-wrapper-small.home-wrapper-s1:not(.home-wrapper-small),
.home main section .home-wrapper-small.home-wrapper-s1:not(.home-wrapper-small) {
margin-left: 5rem !important; }
.archive main section .home-wrapper-small.home-wrapper-s1.home-wrapper-small,
.home main section .home-wrapper-small.home-wrapper-s1.home-wrapper-small {
margin-left: 10rem !important; }
.archive main section .home-wrapper-small article,
.archive main section .home-wrapper-small .archivetitle,
@@ -1208,6 +1250,7 @@ object {
.home main section .home-wrapper-small .archivetitle .metadata,
.home main section .home-wrapper-small .archivedescription .metadata {
width: 100%;
min-width: unset;
height: 5rem;
position: absolute;
bottom: 0;
@@ -1277,8 +1320,7 @@ object {
.home main section .home-wrapper-small .archivedescription .metadata .categories,
.home main section .home-wrapper-small .archivedescription .metadata .postedon {
font: bold 1rem "Westeinde Caption";
color: #000;
padding: 2rem; } }
color: #000; } }
@media (min-width: 769px) and (min-width: 769px) {
.archive main section .home-wrapper-small article .metadata .categories,
.archive main section .home-wrapper-small article .metadata .postedon,
@@ -1300,7 +1342,17 @@ object {
.home main section .home-wrapper-small article .metadata .categories,
.home main section .home-wrapper-small .archivetitle .metadata .categories,
.home main section .home-wrapper-small .archivedescription .metadata .categories {
margin-left: 6rem; } }
margin-left: 6rem;
padding: 1.33333rem 0;
flex: 1 1 auto; }
.archive main section .home-wrapper-small article .metadata .postedon,
.archive main section .home-wrapper-small .archivetitle .metadata .postedon,
.archive main section .home-wrapper-small .archivedescription .metadata .postedon,
.home main section .home-wrapper-small article .metadata .postedon,
.home main section .home-wrapper-small .archivetitle .metadata .postedon,
.home main section .home-wrapper-small .archivedescription .metadata .postedon {
padding: 1.33333rem 1rem;
flex: 1 0 auto; } }
@media (min-width: 769px) and (min-width: 769px) {
.archive main section .home-wrapper-small article h2,
.archive main section .home-wrapper-small article h2 a,
@@ -1314,9 +1366,23 @@ object {
.home main section .home-wrapper-small .archivetitle h2 a,
.home main section .home-wrapper-small .archivedescription h2,
.home main section .home-wrapper-small .archivedescription h2 a {
font-size: 1.2rem;
font-size: 1.5rem;
-webkit-text-stroke: #000 1px;
color: transparent; } }
@media (min-width: 769px) and (min-width: 1279px) {
.archive main section .home-wrapper-small article h2,
.archive main section .home-wrapper-small article h2 a,
.archive main section .home-wrapper-small .archivetitle h2,
.archive main section .home-wrapper-small .archivetitle h2 a,
.archive main section .home-wrapper-small .archivedescription h2,
.archive main section .home-wrapper-small .archivedescription h2 a,
.home main section .home-wrapper-small article h2,
.home main section .home-wrapper-small article h2 a,
.home main section .home-wrapper-small .archivetitle h2,
.home main section .home-wrapper-small .archivetitle h2 a,
.home main section .home-wrapper-small .archivedescription h2,
.home main section .home-wrapper-small .archivedescription h2 a {
font-size: 2.2rem; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-small article h2,
.archive main section .home-wrapper-small .archivetitle h2,
@@ -1328,15 +1394,39 @@ object {
position: absolute;
top: 0;
background-color: #fff;
height: 100%; }
height: 100%;
padding-left: 4rem; } }
@media (min-width: 769px) and (min-width: 1279px) {
.archive main section .home-wrapper-small article h2,
.archive main section .home-wrapper-small .archivetitle h2,
.archive main section .home-wrapper-small .archivedescription h2,
.home main section .home-wrapper-small article h2,
.home main section .home-wrapper-small .archivetitle h2,
.home main section .home-wrapper-small .archivedescription h2 {
padding: 5rem; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-small article h2 a,
.archive main section .home-wrapper-small .archivetitle h2 a,
.archive main section .home-wrapper-small .archivedescription h2 a,
.home main section .home-wrapper-small article h2 a,
.home main section .home-wrapper-small .archivetitle h2 a,
.home main section .home-wrapper-small .archivedescription h2 a {
top: 50%;
position: absolute; }
bottom: 7rem;
width: calc(100% - 8rem);
height: -moz-max-content;
height: max-content;
height: -moz-fit-content;
height: fit-content;
position: absolute; } }
@media (min-width: 769px) and (min-width: 1279px) {
.archive main section .home-wrapper-small article h2 a,
.archive main section .home-wrapper-small .archivetitle h2 a,
.archive main section .home-wrapper-small .archivedescription h2 a,
.home main section .home-wrapper-small article h2 a,
.home main section .home-wrapper-small .archivetitle h2 a,
.home main section .home-wrapper-small .archivedescription h2 a {
width: calc(100% - 10rem); } }
@media (min-width: 769px) {
.archive main section .home-wrapper-small .archivetitle,
.home main section .home-wrapper-small .archivetitle {
margin: 0;
@@ -1447,6 +1537,30 @@ body.category.category-esemeny header {
body.category.category-esemeny main {
padding-top: 9rem; }
body.category.category-esemeny main article {
height: 50vh; }
body.category.category-esemeny main article .thumbnailwrapper {
height: 50vw; }
body.category.category-esemeny main article .thumbnailwrapper img {
width: 100%;
height: 100%; }
body.category.category-esemeny main article .event-metadata {
display: flex;
flex-direction: column;
padding: 2rem; }
body.category.category-esemeny main article .event-metadata .top-row, body.category.category-esemeny main article .event-metadata .bottom-row {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 50%;
flex: 0 0 auto; }
body.category.category-esemeny main article .event-metadata .top-row h2, body.category.category-esemeny main article .event-metadata .bottom-row h2 {
height: unset; }
body.category.category-esemeny main article .event-metadata .hr {
flex: 0 0 auto;
height: 1px;
width: 100%;
background-color: #000; }
/* -------------------------------------------------------------------------- */
/* single */
@@ -1752,7 +1866,7 @@ body.category.category-esemeny main {
.tag-be.archive.tag .header-1,
.tag-be.archive.tag .header-2 {
background-color: #fdff00 !important; }
.tag-be.archive.tag article * {
.tag-be.archive.tag article *:not(.vr) {
background-color: #fdff00 !important; }
@media (min-width: 769px) {
@@ -1808,7 +1922,7 @@ body.category.category-esemeny main {
.tag-do.archive.tag .header-1,
.tag-do.archive.tag .header-2 {
background-color: #3c00ff !important; }
.tag-do.archive.tag article * {
.tag-do.archive.tag article *:not(.vr) {
background-color: #3c00ff !important; }
@media (min-width: 769px) {
@@ -1864,7 +1978,7 @@ body.category.category-esemeny main {
.tag-think.archive.tag .header-1,
.tag-think.archive.tag .header-2 {
background-color: #00ffb8 !important; }
.tag-think.archive.tag article * {
.tag-think.archive.tag article *:not(.vr) {
background-color: #00ffb8 !important; }
@media (min-width: 769px) {
@@ -1920,7 +2034,7 @@ body.category.category-esemeny main {
.tag-love.archive.tag .header-1,
.tag-love.archive.tag .header-2 {
background-color: #ff5f5f !important; }
.tag-love.archive.tag article * {
.tag-love.archive.tag article *:not(.vr) {
background-color: #ff5f5f !important; }
@media (min-width: 769px) {