Skip to content
Snippets Groups Projects
Commit 04ed3640 authored by Arkerthan's avatar Arkerthan
Browse files

Move art styles in CSS module

parent f65c88f8
No related branches found
No related tags found
No related merge requests found
/* small trick to hide broken images */
img {
text-indent: -10000px;
}
.imageColumn { /* TODO: this is mostly a copy of imageRef to get its flex features working properly. They can probably be removed from imageRef at some point */
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
float: right;
}
.imageRef {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
background-color: rgba(80, 80, 80, 0.5);
margin: 2px;
}
.tinyImg {
height: 120px;
width: 120px;
float: left;
}
.smlImg {
height: 150px;
width: 150px;
float: left;
}
.smlImg > img, .smlImg > video {
height: auto;
}
.medImg {
height: 300px;
width: 300px;
float: right;
}
.medImg > img, .medImg > video {
height: auto;
}
.lrgRender {
height: 531px;
width: 531px;
margin-right: -50px;
margin-left: -50px;
float: right;
z-index: -1;
}
.lrgVector {
height: 600px;
width: 600px;
margin-right: -125px;
margin-left: -125px;
float: right;
z-index: -1;
}
.lrgRender > div.mask {
width: 150px;
height: 100%;
background: linear-gradient(90deg, rgba(17, 17, 17, 1), rgba(17, 17, 17, 0.8) 60%, rgba(17, 17, 17, 0));
z-index: 1;
/*position: absolute;*/
}
.lrgRender > img, .lrgRender > video {
margin-left: -150px;
height: 531px;
width: auto;
}
.lrgVector > div.mask {
width: 150px;
height: 100%;
background: linear-gradient(90deg, rgba(17, 17, 17, 1), rgba(17, 17, 17, 0.8) 60%, rgba(17, 17, 17, 0));
z-index: 1;
}
.lrgVector > img, .lrgVector > video {
margin-left: -150px;
height: 600px;
width: auto;
}
.lrgVector svg {
width: 336px;
}
object {
object-fit: scale-down;
position: absolute;
top: 0;
left: 0;
}
img.paperdoll {
position: absolute;
top: 0;
left: 0;
margin-left: 0;
}
/* small trick to hide broken images */
img {
text-indent: -10000px;
}
.imageColumn { /* TODO: this is mostly a copy of imageRef to get its flex features working properly. They can probably be removed from imageRef at some point */
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
float: right;
}
.imageRef {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
background-color: rgba(80, 80, 80, 0.5);
margin: 2px;
}
.tinyImg {
height: 120px;
width: 120px;
float: left;
}
.smlImg {
height: 150px;
width: 150px;
float: left;
}
.smlImg > img, .smlImg > video {
height: auto;
}
.medImg {
height: 300px;
width: 300px;
float: right;
}
.medImg > img, .medImg > video {
height: auto;
}
.lrgRender {
height: 531px;
width: 531px;
margin-right: -50px;
margin-left: -50px;
float: right;
z-index: -1;
}
.lrgVector {
height: 600px;
width: 600px;
margin-right: -125px;
margin-left: -125px;
float: right;
z-index: -1;
}
.lrgRender > div.mask {
width: 150px;
height: 100%;
background: linear-gradient(90deg, rgba(17,17,17,1), rgba(17,17,17,0.8) 60%, rgba(17,17,17,0));
z-index: 1;
/*position: absolute;*/
}
.lrgRender > img, .lrgRender > video {
margin-left: -150px;
height: 531px;
width: auto;
}
.lrgVector > div.mask {
width: 150px;
height: 100%;
background: linear-gradient(90deg, rgba(17,17,17,1), rgba(17,17,17,0.8) 60%, rgba(17,17,17,0));
z-index: 1;
}
.lrgVector > img, .lrgVector > video {
margin-left: -150px;
height: 600px;
width: auto;
}
.lrgVector svg {
width: 336px;
}
object {
object-fit: scale-down;
position: absolute;
top: 0;
left: 0;
}
img.paperdoll {
position: absolute;
top: 0;
left: 0;
margin-left: 0;
}
/* Colors are made as css classes, to allow them to be changed for a light color scheme (for example). */ /* Colors are made as css classes, to allow them to be changed for a light color scheme (for example). */
/* a version is for this case: <span class="-.."><a>text</a></span> */ /* a version is for this case: <span class="-.."><a>text</a></span> */
.link, .link a { color: var(--link-color) } /* link color */ .link, .link a { color: var(--link-color) } /* link color */
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment