Difference between revisions of "Template:Linkoping Sweden/Style"

Line 39: Line 39:
  
 
.menu .head {
 
.menu .head {
−
    display: flex;
 
 
     position: relative;
 
     position: relative;
 
     #overflow: hidden;
 
     #overflow: hidden;
Line 48: Line 47:
 
}
 
}
  
−
#bodyContent .menu .head .social-media {
+
#bodyContent .menu .head #social-media {
 +
    display: flex;
 +
    justify-content: center;
 +
    float: right;
 +
}
 +
 
 +
#bodyContent .menu .head #social-media a {
 
     display: block;
 
     display: block;
 
     align-items: stretch;
 
     align-items: stretch;
Line 61: Line 66:
 
}
 
}
  
−
.menu .head .social-media:hover {
+
.menu .head #social-media a:hover {
 
     transform: scale(1.2);
 
     transform: scale(1.2);
 
}
 
}
  
 
.menu .head a:first-child {
 
.menu .head a:first-child {
−
     margin-right: auto;
+
     #margin-right: auto;
 
}
 
}
  
−
.menu .head .social-media img {
+
.menu .head #social-media img {
 
     width: 24px;
 
     width: 24px;
 
     height: 24px;
 
     height: 24px;
Line 127: Line 132:
 
.menu-category .menu-items a {
 
.menu-category .menu-items a {
 
     display: block;
 
     display: block;
−
     padding: 10px;
+
     padding: 10px 0;
 
     border-bottom: 1px solid #888;
 
     border-bottom: 1px solid #888;
 
     margin: 0 15px;
 
     margin: 0 15px;
Line 202: Line 207:
 
     font-family: 'Open Sans', sans-serif;
 
     font-family: 'Open Sans', sans-serif;
  
 +
    display: flex;
 +
    justify-content: space-between;
 
}
 
}
  
Line 209: Line 216:
 
}
 
}
  
−
.footer div {
+
.footer > div {
−
     display: inline-block;
+
     display: flex;
−
     padding-top: 20px;
+
     padding: 20px;
−
     margin-right: 60px;
+
     flex-grow: 2;
−
     margin-left: 60px;
+
     flex-direction: row-reverse;
−
     float: right;
+
     justify-content: space-around;
 
}
 
}
  
 
.footer a {
 
.footer a {
 
     color: #fff;
 
     color: #fff;
 +
    float: left;
 +
}
 +
 +
.footer > div div {
 +
    float: right;
 
}
 
}
  
Line 331: Line 343:
 
     width: 100%;
 
     width: 100%;
 
     height: auto;
 
     height: auto;
 +
}
 +
 +
.menu-button {
 +
    display: none;
 +
}
 +
 +
#mobile-menu {
 +
    display: none;
 +
}
 +
 +
/** Small screen **/
 +
 +
@media screen and (max-width: 1100px) {
 +
    .menu {
 +
        margin-top: 0;
 +
        width: 100%;
 +
    }
 +
 +
    #mw-content-text>p {
 +
        margin: 0;
 +
    }
 +
 +
    #globalWrapper {
 +
        padding-bottom: 0;
 +
    }
 +
 +
    .content-container {
 +
        width: 100%;
 +
    }
 +
}
 +
 +
/** Mobile **/
 +
@media screen and (max-width: 768px) {
 +
    .menu .head {
 +
        display: block;
 +
    }
 +
 +
    .menu .head a:first-child {
 +
        width: 100%;
 +
        display: block;
 +
    }
 +
 +
    .menu .head > a:first-child img {
 +
        width: 50%;
 +
        height: auto;
 +
        box-sizing: border-box;
 +
    }
 +
 +
    #bodyContent .menu .head #social-media {
 +
        display: none;
 +
    }
 +
 +
    .menu-button {
 +
        display: block;
 +
        background: none;
 +
        border-color: transparent;
 +
        position: absolute;
 +
        top: 10px;
 +
        right: 10px;
 +
 +
        width: 48px;
 +
        height: 48px;
 +
    }
 +
 +
    .menu .menu-button {
 +
        top: 11px;
 +
    }
 +
 +
    .menu-button span {
 +
        display: block;
 +
        height: 3px;
 +
        width: auto;
 +
        border-radius: 2px;
 +
        background: #000;
 +
        margin-bottom: 4px;
 +
        margin-left: 4px;
 +
        margin-right: 4px;
 +
    }
 +
 +
    .menu-button span:first-child {
 +
        margin-top: 10px;
 +
    }
 +
 +
    .closed-menu {
 +
        display: none;
 +
 +
        position: fixed;
 +
        top: 18px;
 +
        left: 0;
 +
        background: #fff;
 +
        margin: 0;
 +
        width: 100%;
 +
        height: 100%;
 +
        overflow: scroll;
 +
 +
        z-index: 888;
 +
    }
 +
 +
    .closed-menu .menu-category {
 +
        display: block;
 +
        width: 100%;
 +
        text-align: left;
 +
        padding-left: 20px;
 +
    }
 +
 +
    .closed-menu .menu-category:last-child {
 +
        padding-bottom: 30px;
 +
    }
 +
 +
    .menu-category .menu-items {
 +
        display: block;
 +
        position: relative;
 +
 +
        border: none;
 +
    }
 +
 +
    .menu-category .menu-items a {
 +
        border: none !important;
 +
        margin-left: 30px;
 +
    }
 +
 +
    .menu-category > a {
 +
        font-size: 18px;
 +
    }
 +
 +
    #mobile-menu {
 +
        display: block;
 +
        padding: 26px;
 +
        font-size: 24px;
 +
        padding-left: 20px;
 +
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 +
        margin-bottom: 16px;
 +
    }
 +
 +
    #mobile-menu div {
 +
        display: inline-block;
 +
    }
 +
 +
    #bodyContent #mobile-menu a {
 +
        padding: 0 3px;
 +
        text-decoration: none;
 +
    }
 +
 +
    #mobile-menu img {
 +
        width: 24px;
 +
        height: 24px;
 +
        -webkit-filter: invert(1);
 +
        margin-bottom: 6px;
 +
    }
 +
 +
    .footer {
 +
        flex-wrap: wrap;
 +
        flex-direction: row;
 +
    }
 +
 +
    .footer > div {
 +
        display: flex;
 +
        justify-content: space-around;
 +
    }
 +
 +
    .footer img {
 +
        height: auto;
 +
        width: 100%;
 +
    }
 +
 +
    .footer > div div {
 +
        margin: 0;
 +
        float: none;
 +
    }
 +
 +
 +
 +
 
}
 
}
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 10:54, 6 September 2016