196 lines
2.9 KiB
CSS
196 lines
2.9 KiB
CSS
@media only screen and (max-width: 700px) {
|
|
.avatar {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 35%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.uncolapsed {
|
|
width: 100%;
|
|
}
|
|
|
|
.visible {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 330px;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.sidebar hr {
|
|
width: 60%;
|
|
}
|
|
|
|
.sidebar ul {
|
|
margin-top: 7%;
|
|
}
|
|
|
|
.sidebar li span {
|
|
top: 50px;
|
|
}
|
|
|
|
.sidebar a {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.sidebar .icon {
|
|
margin-right: 3%;
|
|
margin-left: 35%;
|
|
}
|
|
|
|
.my-world {
|
|
position: absolute;
|
|
transform: rotate(0deg);
|
|
|
|
text-align: center;
|
|
top: 55%;
|
|
left: none;
|
|
}
|
|
|
|
.my-world h1 {
|
|
display: none;
|
|
}
|
|
|
|
.my-world span {
|
|
color: #6699ff;
|
|
}
|
|
|
|
.my-world p {
|
|
color: #cccccc;
|
|
margin-top: 60px;
|
|
text-align: center;
|
|
margin-left: -80%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1100px) {
|
|
.portfolio-wrapper {
|
|
height: 400px !important;
|
|
}
|
|
|
|
.projekte-grid {
|
|
grid-template-columns: auto auto;
|
|
}
|
|
|
|
.blog-grid {
|
|
grid-template-columns: auto auto;
|
|
}
|
|
|
|
.footer-socialmedia {
|
|
display: none !important;
|
|
}
|
|
|
|
.footer-links {
|
|
position: relative;
|
|
width: 20%;
|
|
left: 45%;
|
|
width: 10%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
.portfolio-wrapper p {
|
|
width: 90%;
|
|
}
|
|
|
|
.server-wrapper {
|
|
height: 550px;
|
|
}
|
|
|
|
.server-wrapper p {
|
|
width: 70%;
|
|
}
|
|
|
|
.server-index {
|
|
display: block;
|
|
}
|
|
|
|
.server-index:last-child {
|
|
margin-left: 0px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.server-index .server-led {
|
|
width: 10%;
|
|
left: 50%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 750px) {
|
|
.projekte-grid {
|
|
grid-template-columns: auto;
|
|
}
|
|
|
|
.blog-grid {
|
|
grid-template-columns: auto;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 700px) {
|
|
.server-index .server-led {
|
|
left: 50.4%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 660px) {
|
|
.server-index .server-led {
|
|
left: 50.7%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 610px) {
|
|
.server-index .server-led {
|
|
left: 51%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 570px) {
|
|
.portfolio-wrapper {
|
|
height: 450px !important;
|
|
}
|
|
|
|
.server-index .server-led {
|
|
left: 51.7%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 465px) {
|
|
.portfolio-wrapper {
|
|
height: 550px !important;
|
|
}
|
|
|
|
.avatar h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.avatar .name {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.server-index .server-led {
|
|
left: 53.5%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 350px) {
|
|
.portfolio-wrapper {
|
|
height: 650px !important;
|
|
}
|
|
|
|
.server-index .server-led {
|
|
left: 55.7%;
|
|
}
|
|
}
|
|
|
|
/* IMPRESSUM */
|
|
|
|
@media only screen and (max-width: 700px) {
|
|
.impressum {
|
|
left: -20%;
|
|
}
|
|
|
|
.thats-me {
|
|
margin-left: 120px;
|
|
}
|
|
}
|