|
Ετικέτα: Άδειασμα περιεχομένου σελίδας |
| Γραμμή 1: |
Γραμμή 1: |
| .mainpage-body {
| |
| margin:auto;
| |
| }
| |
|
| |
|
| #mainpage-banner span
| |
| {
| |
| display: inline-block;
| |
| width: 100%;
| |
| content: url(/resources/assets/mainpage/mainpageheader_en.png);
| |
| border-radius:12px;
| |
|
| |
| }
| |
| .mainpage-banner-overlay {
| |
| position: absolute;
| |
| top: 65px;
| |
| width: 100%;
| |
| }
| |
|
| |
| .mainpage-header {
| |
| display: flex;
| |
| margin: 2em 5em;
| |
| align-items:baseline;
| |
| }
| |
|
| |
| .header-intro {
| |
| flex: 2;
| |
| }
| |
|
| |
| .header-intro h1 {
| |
| font-size: 2.5em;
| |
| border: none;
| |
| margin: 0 0 .15em;
| |
| }
| |
|
| |
| .header-intro p {
| |
| font-size: 1.1em;
| |
| line-height: 1.7em;
| |
| }
| |
|
| |
| .header-stats {
| |
| display: flex;
| |
| align-items: center;
| |
| margin:auto;
| |
| }
| |
| .header-stats ul {
| |
| list-style: none;
| |
| }
| |
|
| |
| @media screen and (max-width: 800px) {
| |
| .mainpage-header {
| |
| flex-direction: column;
| |
| margin:2em;
| |
| }
| |
| }
| |
|
| |
| .mainpage-frame {
| |
| box-shadow: 0 0 .3em #999;
| |
| border-radius: 1em;
| |
| width:100%;
| |
| }
| |
| .mainpage-frame:after {
| |
| display: block;
| |
| content: "";
| |
| clear: both;
| |
| }
| |
| .separator {
| |
| width:5%;
| |
| margin:1em auto;
| |
| }
| |
| .frame-header {
| |
| background-color:#b50014;
| |
| border-radius: 1em 1em 0.25em 0.25em;
| |
| color: #fff;
| |
| padding: .4em .8em .5em;
| |
| font-weight: bold;
| |
| }
| |
| .frame-header:before {
| |
| display: inline-block;
| |
| /* Add some content in order to get normal line height, then make it transparent */
| |
| content: "x";
| |
| color: transparent;
| |
| width: 40px;
| |
| opacity: .7;
| |
| /*[[File:Hamsickwhite.svg]]*/
| |
| background-image: url(https://shared.prolewiki.org/uploads/3/3d/Hamsickwhite.svg);
| |
| background-size: contain;
| |
| background-repeat: no-repeat;
| |
| background-position: left center;
| |
| }
| |
| .frame-body {
| |
| padding: 1em;
| |
| }
| |
|
| |
| /*bringing some of the bootstrap framework*/
| |
| .frame-container{ /* ideally this should be the first <div> tag on the page and EVERYTHING is contained in it */
| |
| display:flex;
| |
| align-self:flex-start;
| |
| flex-flow:row wrap;
| |
| gap:15px;
| |
| margin-bottom:2rem;
| |
| }
| |
|
| |
| .col-1{flex:0 0 auto;width:8%}
| |
| .col-2{flex:0 0 auto;width:15%}
| |
| .col-3{flex:0 0 auto;width:24%}
| |
| .col-4{flex:0 0 auto;width:32%}
| |
| .col-5{flex:0 0 auto;width:40%}
| |
| .col-6{flex:0 0 auto;width:49%}
| |
| .col-7{flex:0 0 auto;width:57%}
| |
| .col-8{flex:0 0 auto;width:65%}
| |
| .col-9{flex:0 0 auto;width:76%}
| |
| .col-10{flex:0 0 auto;width:84%}
| |
| .col-11{flex:0 0 auto;width:90%}
| |
| .col-12{flex:0 0 auto;width:100%}
| |
|
| |
| @media only screen and (max-width:768px){
| |
| .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
| |
| width:100%;
| |
| }
| |
| .frame-container{
| |
| margin-bottom:15px; /* should be same as flex gap */
| |
| }
| |
| }
| |
