Difference between revisions of "User:Coldice/Mainpage/style.css"

From Flashpoint Database
Jump to: navigation, search
Line 3: Line 3:
 
* Source: https://simplegrid.io/
 
* Source: https://simplegrid.io/
 
*/
 
*/
.center,.container{margin-left:auto;margin-right:auto}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.375rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:.875rem}p{font-size:1.125rem;font-weight:200;line-height:1.8}.font-light{font-weight:300}.font-regular{font-weight:400}.font-heavy{font-weight:700}.left{text-align:left}.right{text-align:right}.center{text-align:center}.justify{text-align:justify}.container{width:90%}.row{position:relative;width:100%}.row [class^=col]{float:left;margin:.5rem 2%;min-height:.125rem}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{width:96%}.col-1-sm{width:4.33%}.col-2-sm{width:12.66%}.col-3-sm{width:21%}.col-4-sm{width:29.33%}.col-5-sm{width:37.66%}.col-6-sm{width:46%}.col-7-sm{width:54.33%}.col-8-sm{width:62.66%}.col-9-sm{width:71%}.col-10-sm{width:79.33%}.col-11-sm{width:87.66%}.col-12-sm{width:96%}.row::after{content:"";display:table;clear:both}.hidden-sm{display:none}@media only screen and (min-width:33.75em){.container{width:80%}}@media only screen and (min-width:45em){.col-1{width:4.33%}.col-2{width:12.66%}.col-3{width:21%}.col-4{width:29.33%}.col-5{width:37.66%}.col-6{width:46%}.col-7{width:54.33%}.col-8{width:62.66%}.col-9{width:71%}.col-10{width:79.33%}.col-11{width:87.66%}.col-12{width:96%}.hidden-sm{display:block}}@media only screen and (min-width:60em){.container{width:75%;max-width:6+0rem}}
+
.center,.container{
 
+
    margin-left:auto;
.row [class^="col"] > h1 {
+
    margin-right:auto
    font-size: 105%;
 
    padding: 0.4em;
 
    background-color: #eeeeee;
 
    font-weight: bold;
 
    min-height: 2em;
 
vertical-align: middle;
 
 
}
 
}
 
+
h1{
.row [class^="col"] > div.content {
+
    font-size:2.5rem
     background: #ffffff;
+
}
     padding: 0.2em 0.4em;
+
h2{
 +
    font-size:2rem
 +
}
 +
h3{
 +
    font-size:1.375rem
 +
}
 +
h4{
 +
    font-size:1.125rem
 +
}
 +
h5{
 +
    font-size:1rem
 +
}
 +
h6{
 +
    font-size:.875rem
 +
}
 +
p{
 +
    font-size:1.125rem;
 +
    font-weight:200;
 +
    line-height:1.8
 +
}
 +
.font-light{
 +
    font-weight:300
 +
}
 +
.font-regular{
 +
    font-weight:400
 +
}
 +
.font-heavy{
 +
    font-weight:700
 +
}
 +
.left{
 +
    text-align:left
 +
}
 +
.right{
 +
    text-align:right
 +
}
 +
.center{
 +
    text-align:center
 +
}
 +
.justify{
 +
    text-align:justify
 +
}
 +
.container{
 +
    width:90%
 +
}
 +
.row{
 +
    position:relative;
 +
    width:100%
 +
}
 +
.row [class^=col]{
 +
    float:left;
 +
    margin:.5rem 2%;
 +
    min-height:.125rem
 +
}
 +
.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{
 +
    width:96%
 +
}
 +
.col-1-sm{
 +
    width:4.33%
 +
}
 +
.col-2-sm{
 +
    width:12.66%
 +
}
 +
.col-3-sm{
 +
    width:21%
 +
}
 +
.col-4-sm{
 +
    width:29.33%
 +
}
 +
.col-5-sm{
 +
    width:37.66%
 +
}
 +
.col-6-sm{
 +
    width:46%
 +
}
 +
.col-7-sm{
 +
    width:54.33%
 +
}
 +
.col-8-sm{
 +
    width:62.66%
 +
}
 +
.col-9-sm{
 +
    width:71%
 +
}
 +
.col-10-sm{
 +
    width:79.33%
 +
}
 +
.col-11-sm{
 +
    width:87.66%
 +
}
 +
.col-12-sm{
 +
    width:96%
 +
}
 +
.row::after{
 +
    content:"";
 +
    display:table;
 +
    clear:both
 +
}
 +
.hidden-sm{
 +
    display:none
 +
}
 +
@media only screen and (min-width:33.75em){
 +
    .container{
 +
        width:80%
 +
    }
 +
}
 +
@media only screen and (min-width:45em){
 +
     .col-1{
 +
        width:4.33%
 +
    }
 +
    .col-2{
 +
        width:12.66%
 +
    }
 +
    .col-3{
 +
        width:21%
 +
    }
 +
    .col-4{
 +
        width:29.33%
 +
    }
 +
    .col-5{
 +
        width:37.66%
 +
    }
 +
    .col-6{
 +
        width:46%
 +
    }
 +
    .col-7{
 +
        width:54.33%
 +
    }
 +
    .col-8{
 +
        width:62.66%
 +
    }
 +
    .col-9{
 +
        width:71%
 +
    }
 +
    .col-10{
 +
        width:79.33%
 +
    }
 +
    .col-11{
 +
        width:87.66%
 +
    }
 +
     .col-12{
 +
        width:96%
 +
    }
 +
    .hidden-sm{
 +
        display:block
 +
    }
 +
}
 +
@media only screen and (min-width:60em){
 +
    .container{
 +
        width:75%;
 +
        max-width:6+0rem
 +
    }
 
}
 
}

Revision as of 00:45, 29 December 2018

/* Simple grid
* Author: Zach Cole
* Source: https://simplegrid.io/
*/
.center,.container{
    margin-left:auto;
    margin-right:auto
}
h1{
    font-size:2.5rem
}
h2{
    font-size:2rem
}
h3{
    font-size:1.375rem
}
h4{
    font-size:1.125rem
}
h5{
    font-size:1rem
}
h6{
    font-size:.875rem
}
p{
    font-size:1.125rem;
    font-weight:200;
    line-height:1.8
}
.font-light{
    font-weight:300
}
.font-regular{
    font-weight:400
}
.font-heavy{
    font-weight:700
}
.left{
    text-align:left
}
.right{
    text-align:right
}
.center{
    text-align:center
}
.justify{
    text-align:justify
}
.container{
    width:90%
}
.row{
    position:relative;
    width:100%
}
.row [class^=col]{
    float:left;
    margin:.5rem 2%;
    min-height:.125rem
}
.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{
    width:96%
}
.col-1-sm{
    width:4.33%
}
.col-2-sm{
    width:12.66%
}
.col-3-sm{
    width:21%
}
.col-4-sm{
    width:29.33%
}
.col-5-sm{
    width:37.66%
}
.col-6-sm{
    width:46%
}
.col-7-sm{
    width:54.33%
}
.col-8-sm{
    width:62.66%
}
.col-9-sm{
    width:71%
}
.col-10-sm{
    width:79.33%
}
.col-11-sm{
    width:87.66%
}
.col-12-sm{
    width:96%
}
.row::after{
    content:"";
    display:table;
    clear:both
}
.hidden-sm{
    display:none
}
@media only screen and (min-width:33.75em){
    .container{
        width:80%
    }
}
@media only screen and (min-width:45em){
    .col-1{
        width:4.33%
    }
    .col-2{
        width:12.66%
    }
    .col-3{
        width:21%
    }
    .col-4{
        width:29.33%
    }
    .col-5{
        width:37.66%
    }
    .col-6{
        width:46%
    }
    .col-7{
        width:54.33%
    }
    .col-8{
        width:62.66%
    }
    .col-9{
        width:71%
    }
    .col-10{
        width:79.33%
    }
    .col-11{
        width:87.66%
    }
    .col-12{
        width:96%
    }
    .hidden-sm{
        display:block
    }
}
@media only screen and (min-width:60em){
    .container{
        width:75%;
        max-width:6+0rem
    }
}