First try

* removed jquery bootstrap
* use css grid to center
This commit is contained in:
Lucian I. Last
2018-11-12 19:49:35 +01:00
parent 47525b8a92
commit 40909408a8
4 changed files with 60 additions and 75 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,65 +1,57 @@
html {
height: 100%;
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
z-index: 1;
height: 100%;
width: 100%;
background-position: center;
z-index: 1;
background-position: center;
background-attachment: fixed;
}
.itemlist {
border-radius: 6px;
background-color: rgba(0, 0, 0, .4);
padding: 20px;
box-sizing: border-box;
.github-corner {
opacity: 0.3;
}
.itemlist a {
color: #fff;
.github-corner:hover {
opacity: 1;
}
#wrapper {
font-size: 80px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding-bottom: 3px;
width: fit-content;
height: auto;
max-width: 80%;
max-height: 85%;
overflow: auto;
display: flex;
overflow-y: auto;
}
#wrapper a {
transition: .3s all;
}
#wrapper a:hover {
color: #c4c4c4;
}
#wrapper .link {
display: inline-block;
width: 33%;
float: left;
text-align: center;
}
#wrapper::-webkit-scrollbar {
width: 10px;
background-color: transparent;
.itemlist {
display: inline-grid;
grid-template-columns: repeat(2, 1fr);
margin: 0.5em 0;
}
@media only screen and (min-width: 600px) and (max-width: 799px) {
.itemlist {
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (min-width: 800px) {
.itemlist {
grid-template-columns: repeat(6, 1fr);
}
}
#wrapper::-webkit-scrollbar-thumb {
.itemlist {
border-radius: 6px;
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.4);
background-color: rgba(255,255,255,.2);
background-color: rgba(0, 0, 0, .4);
font-size: 4em;
}
.itemlist>* {
padding: 15px;
margin: 0 auto;
}
/* link colors */
.itemlist a {
color: #fff;
}
.itemlist a:hover {
color: #c4c4c4;
}

File diff suppressed because one or more lines are too long