Difference between revisions of "Template:Open Science Global/mainStyles"

 
(10 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
<style>
 
<style>
 +
 +
h3 {
 +
            -ms-flex-item-align: start !important;
 +
        align-self: flex-start !important;
 +
        font-family: Roboto;
 +
        font-weight: bold;
 +
        font-size: 1.8vw;
 +
        letter-spacing: 0.01em;
 +
        text-decoration: none !important;
 +
        color: #000000;
 +
        margin: 35px 40px 8px !important;
 +
        border-bottom: 2.5px solid #000000;
 +
        line-height: 1.8rem;
 +
}
  
 
.text-container h2 {
 
.text-container h2 {
Line 12: Line 26:
 
         text-decoration: none !important;
 
         text-decoration: none !important;
 
         color: #000000;
 
         color: #000000;
−
         margin: 35px 40px !important;
+
         margin: 35px 40px 8px !important;
 
         border-bottom: 2.5px solid #000000;
 
         border-bottom: 2.5px solid #000000;
 +
        line-height: 1.8rem;
 +
    }
 +
    .title-container {
 +
      width: 100%;
 +
    }
 +
 +
.custom-li{
 +
        font-family: Roboto !important;
 +
        font-weight: normal;
 +
        font-size: 1.3vw !important;
 +
        letter-spacing: 0.01em;
 +
        color: #000000;
 +
        text-align: justify;
 +
        margin-right: 40px;
 +
        margin-left: 40px;
 +
        margin-bottom: 5px;
 +
    }
 +
 +
.container {
 +
        height: auto;
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: horizontal;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-direction: row;
 +
        flex-direction: row;
 +
        -ms-flex-pack: distribute;
 +
        justify-content: space-around;
 +
        -ms-flex-wrap: wrap;
 +
        flex-wrap: wrap;
 +
        -webkit-column-gap: 18px;
 +
        column-gap: 18px;
 +
        margin-left: 78px;
 +
}
 +
 +
.Subtitle {
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        gap: 28vw;
 +
        height: 20vh;
 +
        justify-content: center;
 +
        margin-left: 78px;
 +
}
 +
 +
    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 +
 +
    body {
 +
        margin: 0;
 +
        background-color: #E5E5E5 !important;
 +
    }
 +
 +
    html {
 +
        scroll-behavior: smooth;
 +
    }
 +
 +
    .container {
 +
        height: auto;
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: horizontal;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-direction: row;
 +
        flex-direction: row;
 +
        -ms-flex-pack: distribute;
 +
        justify-content: space-around;
 +
        -ms-flex-wrap: wrap;
 +
        flex-wrap: wrap;
 +
        -webkit-column-gap: 18px;
 +
        column-gap: 18px;
 +
        margin-left: 78px;
 +
}
 +
 +
    .top-banner {
 +
        height: 220px;
 +
        top: 16px;
 +
        background: #FF8552;
 +
    }
 +
 +
    .Title {
 +
        font-family: Roboto;
 +
        text-transform: uppercase;
 +
        font-weight: bold;
 +
        font-size: 2.5vw;
 +
        -ms-flex-item-align: center;
 +
        -ms-grid-row-align: center;
 +
        align-self: center;
 +
    }
 +
 +
    .Subtitle {
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        gap: 28vw;
 +
        height: 20vh;
 +
        justify-content: center;
 +
        margin-left: 78px;
 +
}
 +
 +
    .Subtitle .mini-subtitle {
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center;
 +
        gap: 50px;
 +
        margin-left: 20px;
 +
    }
 +
 +
    .Subtitle .mini-subtitle .main-subtitle {
 +
        font-family: Roboto;
 +
        font-style: normal;
 +
        font-weight: bold;
 +
        font-size: 1.3vw;
 +
    }
 +
 +
    .Subtitle .mini-subtitle .line {
 +
        width: 2px;
 +
        height: 26px;
 +
        background: #000000;
 +
    }
 +
 +
    .Subtitle .mini-subtitle .subtopic {
 +
        font-family: Roboto;
 +
        font-style: normal;
 +
        font-weight: bold;
 +
        font-size: 1vw;
 +
    }
 +
 +
    .subsite-container {
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-direction: column;
 +
        flex-direction: column;
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center;
 +
        font-family: Roboto;
 +
        font-weight: bold;
 +
        -webkit-box-ordinal-group: 2;
 +
        -ms-flex-order: 1;
 +
        order: 1;
 +
        -webkit-box-flex: 2;
 +
        -ms-flex-positive: 2;
 +
        flex-grow: 2;
 +
        width: 100px;
 +
        height: 250px;
 +
        -ms-flex-negative: 1;
 +
        flex-shrink: 1;
 +
        margin-left: 7px;
 +
    }
 +
 +
    .subsite-container .submenu-title {
 +
        font-size: 1.3vw;
 +
        margin-bottom: 7px;
 +
    }
 +
 +
    .subsite-container .index-box {
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-direction: column;
 +
        flex-direction: column;
 +
        width: 100%;
 +
        height: 100%;
 +
        font-size: 1.1vw;
 +
        background: #F8F8F8;
 +
        border-radius: 15px;
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center;
 +
        -webkit-box-pack: space-evenly;
 +
        -ms-flex-pack: space-evenly;
 +
        justify-content: space-evenly;
 +
        border-radius: 15px;
 +
    }
 +
 +
    .subsite-container .index-box a {
 +
        text-decoration: none;
 +
        text-transform: uppercase;
 +
        color: black;
 +
        width: 80%;
 +
        border-bottom: 0.5px solid #DCDCDC;
 +
        text-align: center;
 +
    }
 +
 +
    .nav-menu {
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-direction: column;
 +
        flex-direction: column;
 +
        font-family: Roboto;
 +
        font-weight: bold;
 +
        -webkit-box-ordinal-group: 4;
 +
        -ms-flex-order: 1;
 +
        order: 1;
 +
        -webkit-box-flex: 2;
 +
        -ms-flex-positive: 2;
 +
        flex-grow: 0.5;
 +
        -ms-flex-negative: 1;
 +
        flex-shrink: 1;
 +
        width: 100px;
 +
        height: 250px;
 +
        margin-right: 7px;
 +
        margin-left: 25px;
 +
       
 +
    }
 +
 +
    .nav-menu .submenu-title {
 +
        font-size: 1.3vw;
 +
        text-align: center;
 +
        text-transform: uppercase;
 +
        margin-bottom: 7px;
 +
    }
 +
 +
    .nav-menu .submenu-content {
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-direction: column;
 +
        flex-direction: column;
 +
        width: 100%;
 +
        height: 100%;
 +
        background: #F8F8F8;
 +
        border-radius: 15px;
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center;
 +
        -webkit-box-pack: space-evenly;
 +
        -ms-flex-pack: space-evenly;
 +
        justify-content: space-evenly;
 +
        border-radius: 15px;
 +
    }
 +
 +
    .nav-menu .submenu-content a {
 +
        text-decoration: none;
 +
        color: black;
 +
        font-family: Roboto;
 +
        font-size: 1.1vw;
 +
        font-weight: bold;
 +
        width: 80%;
 +
        border-bottom: 0.5px solid #DCDCDC;
 +
        text-align: center;
 +
        text-transform: uppercase;
 +
    }
 +
 +
    .text-container {
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-direction: column;
 +
        flex-direction: column;
 +
        width: 400px;
 +
        height: auto;
 +
        padding-bottom: 2%;
 +
        padding-top: 2%;
 +
        background: #F9F9F9;
 +
        border-radius: 38px;
 +
        -webkit-box-shadow: 0px 11px 15px 1px rgba(0, 0, 0, 0.65);
 +
        box-shadow: 0px 11px 15px 1px rgba(0, 0, 0, 0.65);
 +
        -webkit-box-align: start;
 +
        -ms-flex-align: start;
 +
        align-items: flex-start;
 +
        overflow: hidden;
 +
        -webkit-box-ordinal-group: 3;
 +
        -ms-flex-order: 2;
 +
        order: 2;
 +
        -webkit-box-flex: 4;
 +
        -ms-flex-positive: 4;
 +
        flex-grow: 2;
 +
        -ms-flex-negative: 0.5;
 +
        flex-shrink: 0.5;
 +
        margin-right: 50px;
 +
    }
 +
 +
 +
 +
    .text-container .text p {
 +
        font-family: Roboto !important;
 +
        font-weight: normal;
 +
        font-size: 1.3vw !important;
 +
        letter-spacing: 0.01em;
 +
        color: #000000;
 +
        text-align: justify;
 +
        margin-right: 40px;
 +
        margin-left: 40px;
 +
    }
 +
 +
    footer {
 +
        height: 300px;
 +
        width: 100vw;
 +
        bottom: 0;
 +
        background: #1E2833;
 +
        -ms-flex-item-align: end;
 +
        align-self: flex-end;
 +
        -webkit-box-ordinal-group: 5;
 +
        -ms-flex-order: 4;
 +
        order: 4;
 +
        padding-top: 2%;
 +
        margin-top: 5%;
 +
    }
 +
 +
    @media screen and (max-width: 900px) {
 +
        .Title {
 +
            font-size: 3vw;
 +
        }
 +
 +
        .Subtitle .mini-subtitle .main-subtitle {
 +
            font-size: 2.5vw;
 +
        }
 +
 +
        .Subtitle .mini-subtitle .subtopic {
 +
            font-size: 2vw;
 +
        }
 +
 +
        .nav-menu {
 +
            display: none;
 +
        }
 +
 +
        .subsite-container {
 +
            display: none;
 +
        }
 +
 +
        .text-container {
 +
            margin-left: 20px;
 +
            margin-right: 20px;
 +
        }
 +
 +
        .text-container .text {
 +
            font-size: 2vw;
 +
        }
 +
 +
        h2 {
 +
            font-size: 4vw;
 +
        }
 +
    }
 +
 +
    @media screen and (max-width: 600px) {
 +
        .Title {
 +
            font-size: 4vw;
 +
        }
 +
 +
        .Subtitle .mini-subtitle .main-subtitle {
 +
            font-size: 2.5vw;
 +
        }
 +
 +
        .Subtitle .mini-subtitle .subtopic {
 +
            font-size: 2vw;
 +
        }
 +
 +
        .nav-menu {
 +
            display: none;
 +
        }
 +
 +
        .subsite-container {
 +
            display: none;
 +
        }
 +
 +
        .text-container {
 +
            margin-left: 20px;
 +
            margin-right: 20px;
 +
        }
 +
 +
        .text-container .text {
 +
            font-size: 3vw;
 +
        }
 +
 +
        h2 {
 +
            font-size: 6vw;
 +
        }
 
     }
 
     }
  

Latest revision as of 21:55, 21 October 2021