home, tag archive improvements
This commit is contained in:
321
sass/base.scss
321
sass/base.scss
@@ -108,6 +108,8 @@ $h-unit-1: 5rem;
|
||||
//vertical units:
|
||||
$v-unit-1: 4rem;
|
||||
$v-unit-2: 8rem;
|
||||
$v-unit-4: 16rem;
|
||||
$v-unit-6: 24rem;
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* other mixins */
|
||||
@@ -134,9 +136,10 @@ $v-unit-2: 8rem;
|
||||
&.char#{$i} {
|
||||
@include transform(rotate($angle-offset + $angle-per-char * $i));
|
||||
|
||||
-webkit-animation: spin#{$i} 4s linear infinite;
|
||||
-moz-animation: spin#{$i} 4s linear infinite;
|
||||
animation: spin#{$i} 4s linear infinite;
|
||||
$speed: 10s;
|
||||
-webkit-animation: spin#{$i} $speed linear infinite;
|
||||
-moz-animation: spin#{$i} $speed linear infinite;
|
||||
animation: spin#{$i} $speed linear infinite;
|
||||
|
||||
@-moz-keyframes spin#{$i} {
|
||||
100% {
|
||||
@@ -202,7 +205,7 @@ $v-unit-2: 8rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@mixin triangle-corner-bordered($radius, $offset, $bgcolor, $side) {
|
||||
@mixin triangle-corner-bordered($radius, $offset, $bgcolor, $bordercolor, $side) {
|
||||
&::after {
|
||||
//for border without corner
|
||||
position: absolute;
|
||||
@@ -216,7 +219,7 @@ $v-unit-2: 8rem;
|
||||
width: calc(100% - #{$radius} + #{$offset});
|
||||
}
|
||||
|
||||
border-top: #000 1px solid;
|
||||
border-top: $bordercolor 1px solid;
|
||||
background-color: $bgcolor;
|
||||
|
||||
@if $side==left {
|
||||
@@ -241,13 +244,13 @@ $v-unit-2: 8rem;
|
||||
|
||||
@if $side==left {
|
||||
left: -#{$offset};
|
||||
border-left: #000 solid 1px;
|
||||
border-left: $bordercolor solid 1px;
|
||||
@include transform(skewX(-45deg));
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
@if $side==right {
|
||||
right: -#{$offset};
|
||||
border-right: #000 solid 1px;
|
||||
border-right: $bordercolor solid 1px;
|
||||
@include transform(skewX(45deg));
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
@@ -305,7 +308,10 @@ $v-unit-2: 8rem;
|
||||
align-content: space-between;
|
||||
z-index: 3100;
|
||||
background: #fff;
|
||||
& > div:not(#sidebar) {
|
||||
.logo,
|
||||
.social-link,
|
||||
.menubutton,
|
||||
.events-link {
|
||||
filter: invert(100);
|
||||
}
|
||||
}
|
||||
@@ -352,7 +358,7 @@ $v-unit-2: 8rem;
|
||||
// color: #000;
|
||||
// fill: currentColor;
|
||||
filter: invert(100%); //black
|
||||
@include transform(rotate(180deg)) // transform: rotate(180deg);
|
||||
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -424,47 +430,71 @@ $v-unit-2: 8rem;
|
||||
/* SEARCH */
|
||||
/* ========================================================================== */
|
||||
|
||||
/* ------------------------------ search mobile ----------------------------- */
|
||||
|
||||
.search-box {
|
||||
display: none;
|
||||
@media #{$smalldesktop} {
|
||||
display: block;
|
||||
flex: 1 1 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
@media #{$smalldesktop} {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
left: 7rem;
|
||||
top: 0;
|
||||
}
|
||||
form.search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: #fff 1px solid;
|
||||
@media #{$smalldesktop} {
|
||||
}
|
||||
background-color: #000;
|
||||
|
||||
input {
|
||||
@include menutext();
|
||||
@include searchtext();
|
||||
background-color: #000;
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
||||
caret-color: #fff;
|
||||
flex: 1 1 auto;
|
||||
width: 1rem;
|
||||
}
|
||||
button {
|
||||
flex: 0 0 auto;
|
||||
@media #{$smalldesktop} {
|
||||
display: none;
|
||||
@media #{$only-mobile} {
|
||||
filter: invert(100)
|
||||
}
|
||||
}
|
||||
}
|
||||
} //search-bar end
|
||||
|
||||
/* ----------------------------- search desktop ----------------------------- */
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
.search-box {
|
||||
display: block;
|
||||
flex: 1 1 0 !important;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
left: $h-unit-2;
|
||||
bottom: 0;
|
||||
height: $h-unit-2;
|
||||
form.search {
|
||||
border-bottom: none;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
input {
|
||||
padding: 0 $h-unit-1;
|
||||
}
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------- header scroll: scroll with click -------------------- */
|
||||
|
||||
.header-scroll {
|
||||
display: none;
|
||||
}
|
||||
@@ -566,22 +596,60 @@ $v-unit-2: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub-wrapper{
|
||||
position: fixed;
|
||||
right: $h-unit-2;
|
||||
left: $h-unit-2;
|
||||
top: 0;
|
||||
background-color: #000;
|
||||
height: 50vh;
|
||||
a{
|
||||
|
||||
.sub-wrapper {
|
||||
.bedo-sub-wrapper {
|
||||
position: fixed;
|
||||
display: none;
|
||||
right: $h-unit-2;
|
||||
left: $h-unit-2;
|
||||
top: 0;
|
||||
background-color: #000;
|
||||
height: 50vh;
|
||||
z-index: -1;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
// &:first-child {
|
||||
// display: flex;
|
||||
// }
|
||||
&.opened {
|
||||
display: flex;
|
||||
}
|
||||
a {
|
||||
@include bedo-hover-title();
|
||||
@include transform(rotate(-45deg));
|
||||
transform-origin: 50% 50%;
|
||||
display: block;
|
||||
width: calc(30% + #{$v-unit-6});
|
||||
text-align: center;
|
||||
height: fit-content;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: $v-unit-6;
|
||||
width: 70%;
|
||||
padding: $v-unit-1;
|
||||
padding-left: $v-unit-6 + $v-unit-2;
|
||||
padding-right: $v-unit-4;
|
||||
@include triangle-corner-bordered(#{$v-unit-6}, 0, transparent, #fff, left);
|
||||
@include bedo-hover-sub();
|
||||
.circle {
|
||||
$diameter: 4rem;
|
||||
width: $diameter;
|
||||
height: $diameter;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: $v-unit-1 / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
span{
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
} //header end
|
||||
|
||||
@@ -597,9 +665,9 @@ $v-unit-2: 8rem;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
padding: 2rem;
|
||||
bottom: 49%;
|
||||
// bottom: 49%;
|
||||
right: 0;
|
||||
width: 50vw;
|
||||
min-width: 50vw;
|
||||
text-align: center;
|
||||
@include home-metadata();
|
||||
z-index: 1;
|
||||
@@ -721,41 +789,69 @@ $v-unit-2: 8rem;
|
||||
|
||||
article {
|
||||
height: 100vh;
|
||||
@media #{$smalldesktop} {
|
||||
& > a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.thumbnailwrapper {
|
||||
img.attachment-home-thumbnail {
|
||||
// post thumbnail on home
|
||||
height: 50vh;
|
||||
width: 100vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
& > a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 100%;
|
||||
.thumbnailwrapper {
|
||||
img {
|
||||
// post thumbnail on home
|
||||
height: 50vh;
|
||||
padding: 2rem;
|
||||
padding-top: 3rem;
|
||||
margin: 0;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: center;
|
||||
|
||||
a {
|
||||
@include home-title();
|
||||
}
|
||||
width: 100vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
} //article end
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
padding: 2rem;
|
||||
padding-top: 3rem;
|
||||
margin: 0;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: center;
|
||||
|
||||
a {
|
||||
@include home-title();
|
||||
}
|
||||
}
|
||||
|
||||
.metadata {
|
||||
|
||||
bottom: 50%;
|
||||
height: $h-unit-1;
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
justify-content: space-around;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
|
||||
|
||||
.vr {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: #000;
|
||||
flex-grow: 0 !important;
|
||||
flex-shrink: 0 !important;
|
||||
flex-basis: auto !important;
|
||||
}
|
||||
|
||||
.bevezeto,
|
||||
.alcim,
|
||||
.curvyArrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
} //article end
|
||||
|
||||
/* ------------------------ home article desktop big ------------------------ */
|
||||
/* ------------------------------------ - ----------------------------------- */
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
//big: first 2 articles
|
||||
@@ -825,12 +921,7 @@ $v-unit-2: 8rem;
|
||||
padding: 0 $h-unit-1;
|
||||
}
|
||||
|
||||
.vr {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: #000;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.postedon {
|
||||
padding: 0 $h-unit-1;
|
||||
@@ -898,7 +989,7 @@ $v-unit-2: 8rem;
|
||||
&.home-wrapper-1 {
|
||||
article {
|
||||
.metadata {
|
||||
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
|
||||
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, #000, left);
|
||||
.filler {
|
||||
position: relative;
|
||||
}
|
||||
@@ -914,7 +1005,7 @@ $v-unit-2: 8rem;
|
||||
|
||||
.metadata {
|
||||
justify-content: flex-end;
|
||||
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, right);
|
||||
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, #000, right);
|
||||
.filler {
|
||||
order: -1;
|
||||
}
|
||||
@@ -963,7 +1054,7 @@ $v-unit-2: 8rem;
|
||||
|
||||
.metadata {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
height: $h-unit-1;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -974,13 +1065,24 @@ $v-unit-2: 8rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
|
||||
@include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
|
||||
display: none;
|
||||
&.vis {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.categories,
|
||||
.postedon {
|
||||
@include home-metadata();
|
||||
padding: $v-unit-1 / 2;
|
||||
}
|
||||
.categories {
|
||||
margin-left: $v-unit-1 * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
@@ -1011,14 +1113,27 @@ $v-unit-2: 8rem;
|
||||
align-items: flex-start;
|
||||
padding: 2rem;
|
||||
border-right: #000 1px solid;
|
||||
@include home-title();
|
||||
@include triangle-corner-bordered($h-unit-1, 0, transparent, left);
|
||||
@include triangle-corner-bordered($h-unit-1, 0, transparent, #000, left);
|
||||
h1 {
|
||||
@include home-title();
|
||||
margin: 0;
|
||||
}
|
||||
&.tag {
|
||||
text-transform: uppercase;
|
||||
order: 1;
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
& > object {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
width: $h-unit-1;
|
||||
height: $h-unit-1;
|
||||
}
|
||||
}
|
||||
.archivedescription {
|
||||
order: 1;
|
||||
order: 4;
|
||||
border-top: #000 1px solid;
|
||||
border-right: #000 1px solid;
|
||||
border-bottom: #000 1px solid;
|
||||
@@ -1144,7 +1259,7 @@ $v-unit-2: 8rem;
|
||||
padding-left: 0;
|
||||
|
||||
width: calc(100% - #{$h-unit-1}) !important;
|
||||
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, left);
|
||||
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
|
||||
}
|
||||
.time-cat {
|
||||
z-index: 10;
|
||||
@@ -1271,8 +1386,14 @@ $v-unit-2: 8rem;
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
@mixin tagcolors($color) {
|
||||
//metadata on mobile
|
||||
.metadata {
|
||||
color: $color !important;
|
||||
@media #{$only-mobile} {
|
||||
.vr{
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color !important;
|
||||
@@ -1307,6 +1428,32 @@ $v-unit-2: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//hover on bedo circle
|
||||
&.bedo-sub-wrapper {
|
||||
& > a {
|
||||
-webkit-text-stroke: $color 1px !important;
|
||||
}
|
||||
span {
|
||||
color: $color !important;
|
||||
}
|
||||
.circle {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// tag archive pages
|
||||
|
||||
&.archive.tag {
|
||||
background-color: $color !important;
|
||||
.header-1,
|
||||
.header-2 {
|
||||
background-color: $color !important;
|
||||
}
|
||||
article * {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//tagclip: filters on small articale images
|
||||
|
||||
Reference in New Issue
Block a user