User:Ayato/mainpageexperiments.css: Difference between revisions

Created page with ".flex-container * { box-sizing: border-box; } .base-block { padding: 15px; background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 2px 5px #aaa; } .main-block { margin-bottom: 15px; text-align: center; } .flex-block { display: flex; flex-wrap: wrap; justify-content: center; } .welcome-title { font-weight: 600; font-size: 32px; display: inline-flex; align-items: center; gap: .6rem; } .flex-container { display: flex; flex-wrap: wrap; gap: 15px; justif..."
 
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
.flex-container * {
* {
box-sizing: border-box;
box-sizing: border-box;
}
}
Line 7: Line 7:
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 5px #aaa;
box-shadow: 0 2px 5px #aaa;
display: flex;
flex-direction: column;
}
}
.main-block {
.main-block {
margin-bottom: 15px;
margin-bottom: 15px;
text-align: center;
text-align: center;
align-items: center;
}
}
.flex-block {
.flex-block {
flex-direction: row;
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
Line 40: Line 44:
justify-content: space-between;
justify-content: space-between;
gap: 10px;
gap: 10px;
align-items:center;
}
}
.statistics-block * {
.statistics-block * {
flex: 1 1 0;
width: 100%;
}
}
.statistics-block img {
.statistics-block img {
width: 100%;
width: 100%;
height: 100%;
height: 100%;
object-fit: contain
object-fit: contain;
object-position: left;
}
}
.statistics-block .right {
.statistics-block .right {
Line 60: Line 66:
color: #fff;
color: #fff;
}
}
.base-block .button:hover, .base-block a:has(.button:hover) {
.base-block .button:hover {
background-color: var(--twitch-purple-2);
background-color: var(--twitch-purple-2);
text-decoration: none;
text-decoration: none;