KingOfDog.de/old
Archived
1
0
Fork 0
Code Releases Activity

Changes of the last few months including restructuring system from using only ranks to permissions

Browse Source
This commit is contained in:
Marcel
2018-12-26 18:19:28 +01:00
parent 72f3434803
commit 1a1ac17ecf
38 changed files with 845 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
assets/css/home.css
View File

@@ -106,6 +106,158 @@
animation: fadeInUp 300ms linear 1200ms both;
}
.tilted-column {
position: relative;
width: calc((100% / 3) + 6px + (32px / 3));
height: 33vw;
display: inline-block;
margin-left: -6px;
overflow: hidden;
border-right: 10px solid transparent;
transform: skewX(-6deg);
}
.tilted-column:nth-child(3n+1) {
margin-left: -24px;
margin-right: 0 !important;
}
.tilted-column:nth-child(3n+3) {
margin-right: -32px;
border-right: 0;
}
.tilted-column > .column-image {
width: 100%;
transform: skewX(6deg) scale(1.1);
transition: transform .8s;
}
.tilted-column > .column-caption {
position: absolute;
width: 75%;
top: 100%;
left: 56%;
opacity: 0;
transform: skewX(6deg) translate(-50%, 0);
transition: all .8s;
}
.tilted-column > .column-caption > .column-title,
.tilted-column > .column-caption > .column-desc {
color: #fff;
background-color: rgba(0, 0, 0, .8);
padding: 4px 16px;
border-radius: 10px;
font-size: 2.5vw;
}
.tilted-column > .column-caption > .column-desc {
font-size: 1.25vw;
font-weight: bolder;
width: 100%;
}
.tilted-column:hover > .column-image {
transform: skewX(6deg) scale(1.5);
}
.tilted-column:hover > .column-caption {
top: 50%;
left: 54%;
transform: skewX(6deg) translate(-50%, -50%);
opacity: 1;
}
@media (max-width: 767px) {
.tilted-column {
width: calc(50% + 6px + (32px / 2));
height: 50vw;
}
.tilted-column:nth-child(3n+1) {
margin-left: -6px;
}
.tilted-column:nth-child(3n+3) {
margin-right: 0;
border-right: 10px solid transparent;
}
.tilted-column:nth-child(2n+1) {
margin-left: -24px;
margin-right: 0 !important;
}
.tilted-column:nth-child(2n + 2) {
margin-right: -32px !important;
border-right: none;
}
.tilted-column > .column-caption > .column-title {
font-size: 4vw;
}
.tilted-column > .column-caption > .column-desc {
font-size: 2.5vw;
}
}
@media (max-width: 575px) {
.tilted-column {
width: 100%;
height: 100vw;
margin: 10px 0 !important;
transform: none;
}
.tilted-column > .column-image {
transform: none;
}
.tilted-column > .column-caption {
left: 50%;
transform: translate(0, -50%);
}
.tilted-column:hover > .column-image {
transform: scale(1.5);
}
.tilted-column:hover > .column-caption {
left: 50%;
transform: translate(-50%, -50%);
}
}
.grid-kod-network {
grid-template-areas: "posts" "active" "newest";
}
@media (min-width: 768px) {
.grid-kod-network {
grid-template-areas: "posts posts" "active newest";
}
}
@media (min-width: 992px) {
.grid-kod-network {
grid-template-areas: "active posts" "newest posts";
}
}
.grid-kod-network > .item-active {
grid-area: active;
}
.grid-kod-network > .item-newest {
grid-area: newest;
}
.grid-kod-network > .item-posts {
grid-area: posts;
}
/* Backgrounds for social media posts */
.bg-twitter {
background-color: #4099FF;

21
assets/css/main.css
View File

@@ -18,6 +18,13 @@ body > section {
padding: 50px 0;
}
.grid {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-gap: 10px 20px;
}
.dark {
background: #222222;
color: #FAFAFA;
@@ -1836,26 +1843,20 @@ ul#downloadSlider a.active .overlay {
}
.user-item {
display: grid;
grid-template-columns: 50px 1fr;
grid-gap: 10px;
width: 100%;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .5);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .25);
padding: 10px;
margin-bottom: 10px;
}
.user-item img {
height: 50px;
display: inline-block;
vertical-align: top;
margin-right: 10px;
}
.user-item .user-info {
display: inline-block;
width: calc(100% - 60px);
float: right;
margin: 2.5px 0;
}
.user-item .user-info h2 {