Difference between revisions of "Template:NCKU Tainan/collab css"

(Created page with "<html> <style> /*collab start*/ →‎carousel start here: .carousel .pageName { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-...")
 
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
/*collab start*/
+
 
−
/*carousel start here*/
+
body{
−
.carousel .pageName  {
+
     font-family: 'Josefin Sans', sans-serif;
−
     position: absolute;
+
     background-color: #FEFEF5 !important; /*背景顏色*/
−
     left: 50%;
+
     padding-top: 0;/*讓內文在nav右邊*/
−
     top: 50%;
+
     padding-left: 2rem;
−
     transform: translate(-50%,-50%);
+
     position:relative;
−
     z-index: 10;
+
 
}
 
}
−
.carousel .carousel-item {
+
 
−
     height: auto;
+
 
 +
 
 +
 
 +
 
 +
/*rgb(235, 203, 157)*/
 +
*{
 +
     scroll-behavior: smooth;
 
}
 
}
−
#carousel-team .carousel-item img {
+
 
−
     min-height: 55vh;
+
 
−
    max-height: 55vh;
+
.container-fluid {
−
    object-fit: cover;
+
     background-color: #FEFEF5;
−
    filter: opacity(50%);
+
 
}
 
}
−
.carousel-inner .carousel-item img {
+
.coverphoto{
−
     min-height: 55vh;
+
    opacity: 0.2;
−
     max-height: 100vh;
+
    width: 100vw;
 +
    position: absolute;
 +
    left: -2rem;
 +
    height: 100vh; 
 +
}   
 +
section.resume-section-coverphoto {
 +
     min-height: 94vh !important;
 +
} 
 +
section.resume-section {
 +
    /*padding-left: 20.8vw;*/
 +
    padding-left: 16.8vw;
 +
    padding-right: 3rem;
 +
    padding-top: 1rem;
 +
    padding-bottom: 1rem;
 +
    display: flex;
 +
    align-items: center;
 +
     max-width: 80vw;
 
}
 
}
−
/*carousel end here*/
+
section.resume-section-worldmap{
−
/*collab start here*/
+
     padding-top: 2rem;
−
/*----------Joe's preset---------*/
+
    padding-bottom: 5rem;
−
/*page name*/
+
     min-height: 100vh;
−
.carousel h1 {
+
     display: flex;
−
     font-size: 5rem;
+
     align-items: center;
−
     color:#172544;
+
     justify-content:center;
−
     padding: 0;
+
    max-width: 95vw;
−
     text-align: center;
+
    text-align:center;
−
     font-weight: 700;
+
 
}
 
}
−
/*layout settings*/
+
 
−
.margin-up-bottom-m{
+
#h1-title{
−
     margin-bottom: 5%;
+
     border-left: 5px solid #393939;
−
    margin-top: 5%;
+
 
}
 
}
−
.margin-top-10{
+
h1{
−
     margin-top: 10%;
+
     font-size: 4rem;
 
}
 
}
−
.margin-top-5{
+
h2{
−
     margin-top: 5%;
+
     font-size: 3rem;
 
}
 
}
−
.margin-bottom-5{
+
p{
−
     margin-bottom: 5%;
+
     font-size: 1.2rem;
 
}
 
}
−
.margin-left-right-10{
+
 
−
     margin-left: 10%;
+
#testtest1,#testtest2,#testtest3,#testtest4,#testtest5{
−
     margin-right: 10%;
+
    visibility:hidden;
 +
     margin-left: 0.5rem;
 +
     width: 4rem;
 +
    height: 4rem;
 
}
 
}
−
.margin-left-right-5{
+
 
−
     margin-left: 5%;
+
/*.visible{
−
     margin-right: 5%;
+
    visibility:visible;
 +
     margin-left: 0.5rem;
 +
     width: 4rem;
 +
    height: 4rem;
 +
    transition-property: visibility;
 +
    transition-duration: 5s;
 +
}*/
 +
 
 +
.color{
 +
    color:brown !important;
 
}
 
}
−
.center-flex{
+
 
−
     display: flex;
+
#sideNav a.active {
−
    justify-content: center;
+
     color:brown !important;
 
}
 
}
−
/*figure default settings*/
+
 
−
.figure-default{
+
#navbarhead{
−
    margin:1rem;
+
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
 +
 
 
}
 
}
−
.figure-default a{
+
 
−
    width: 100%;
+
.hrmar{
 +
  margin: 0 2rem 0 0;
 
}
 
}
−
.figure-default a img{
+
 
−
    width: 70%;
+
.navbar-amend{
 +
  position:relative;
 +
  top:1.5%;
 
}
 
}
−
/*font settings*/
+
#bodyContent h1, h2, h3, h4{ 
−
figcaption{
+
    font-family: 'Josefin Sans', sans-serif;
 +
}   
 +
#bodyContent h2{
 +
    font-size: 40px;
 +
    letter-spacing: 0px;
 
     font-weight: 700;
 
     font-weight: 700;
 +
} 
 +
.navfont{
 +
  font-family: 'Josefin Sans', sans-serif;
 +
  /*font-weight: 500;*/
 +
  font-size: 22px;
 +
} 
 +
#bodyContent p{
 +
  font-family: 'Red Hat Display', sans-serif;
 +
  letter-spacing: 0.4px;
 
}
 
}
−
.center-font{
+
abc p {
−
     text-align: center;
+
    white-space:pre-wrap;
 +
     text-align:justify;
 +
    font-size:1.1rem;
 
}
 
}
−
.bold-font{
+
/*world_map*/
 +
.worldmap{
 +
    position:relative;
 +
    left:-2vw;
 +
    width:80vw;   
 +
}
 +
.none{
 +
    display:none;
 +
}
 +
.ullist{
 +
    list-style: disc;
 +
}
 +
.cteam:link{
 +
    color:black !important;
 +
} 
 +
.cteam:visited{
 +
    color:black !important;
 +
} 
 +
.cteam:hover{
 +
    color:blue !important;
 +
    text-decoration:none;
 +
}   
 +
#Europe{
 +
    text-align: left;
 +
    width: 16rem;
 +
    height: 18.5rem;
 +
    list-style: disc;
 +
    line-height: 2rem;
 +
    position: relative;
 +
    top: -40vw;
 +
    padding: 0.5rem 0rem 0.5rem 2rem;
 +
    border: solid;
 +
    background: lightgray;
 +
    visibility:hidden;
 +
    opacity: 0.9;
 +
    border-radius: 1rem;
 +
    z-index:2;
 +
}
 +
.EUheading{
 +
    position: relative;
 +
    left: -1.2rem;
 +
    margin-bottom: 0.5rem;
 +
    font-size: 22px;
 
     font-weight: bold;
 
     font-weight: bold;
 
}
 
}
−
.h5-font{
+
#EUmark{
−
     font-size: 1.2rem;
+
    position: relative;
 +
    width: 11vw;
 +
    height: 12vw;
 +
    left: 19vw;
 +
    top: -17rem;
 +
    visibility:visible !important;
 +
} 
 +
#Africa{
 +
     text-align: left;
 +
    width: 13rem;
 +
    list-style: disc;
 +
    line-height: 2rem;
 +
    position: relative;
 +
    top: -22.3vw;
 +
    padding: 0.5rem 0rem 0.5rem 2rem;
 +
    border: solid;
 +
    background: lightgray; 
 +
    visibility:hidden;
 +
    opacity: 0.9;
 +
    border-radius: 1rem;
 +
    height: 5.5rem;
 
}
 
}
−
.text-color-deepBlue{
+
.AFheading{
−
     color: #172544;
+
    position: relative;
 +
    left: -1.2rem;
 +
    margin-bottom: 0.5rem;
 +
     font-size: 22px;
 +
    font-weight: bold;
 
}
 
}
−
/*overall media setting*/
+
#AFmark{
−
@media (max-width:576px){
+
    position: relative;
−
     .pageName h1{
+
    width: 5vw;
−
        font-size: 2.5rem;
+
     height: 7vw;
−
        font-weight: bold;
+
    left: 2.5vw;
−
     }
+
    top: -9.7rem;
 +
    visibility:visible !important;
 +
}   
 +
#Taiwan{
 +
    text-align: left;
 +
    width: 12rem;
 +
    list-style: disc;
 +
    line-height: 2rem;
 +
    position: relative;
 +
    top: -16vw;
 +
    padding: 0.5rem 0rem 0.5rem 2rem;
 +
    border: solid;
 +
    background: lightgray; 
 +
    visibility:hidden;
 +
    opacity: 0.9;
 +
    border-radius: 1rem;
 +
     height: 7rem;
 
}
 
}
−
/*----------Joe's preset END---------*/
+
.TWheading{
−
#graph-width img{
+
    position: relative;
−
     width: 100%;
+
    left: -1.2rem;
−
     height: 60%;
+
    margin-bottom: 0.5rem;
−
 
+
     font-size: 22px;
 +
     font-weight: bold;
 
}
 
}
−
.cover-pic-setting img{
+
#TWmark{
−
     filter: opacity(50%);
+
    position: relative;
−
     object-fit: cover;
+
    width: 7vw;
 +
    height: 12vw;
 +
    top: -23vw;
 +
    left: 5.5vw;
 +
    visibility:visible !important; 
 +
}   
 +
#East_Asia{
 +
    text-align: left;
 +
    width: 14rem;
 +
    list-style: disc;
 +
     line-height: 2rem;
 +
    position: relative;
 +
    top: -43vw;
 +
    padding: 0.5rem 0rem 0.5rem 2rem;
 +
    border: solid;
 +
    background: lightgray;
 +
    visibility:hidden;
 +
    opacity: 0.9;
 +
     border-radius: 1rem;
 +
    height: 10.5rem;
 
}
 
}
−
.cover-pic-setting{
+
.EAheading{
 
     position: relative;
 
     position: relative;
−
     top:8vh;
+
     left: -1.2rem;
 +
    margin-bottom: 0.5rem;
 +
    font-size: 22px;
 +
    font-weight: bold;
 
}
 
}
−
.pageName  {
+
#EAmark{
−
     position: absolute;
+
     position: relative;
−
     left: 50%;
+
    width: 8vw;
−
     top: 55%;
+
    height: 11vw;
−
     transform: translate(-50%,-50%);
+
     left: 12rem;
−
     z-index: 10;
+
     top: -4rem;
 +
     visibility:visible !important; 
 +
}   
 +
#South_Asia{
 +
    text-align: left;
 +
    width: 16rem;
 +
    list-style: disc;
 +
     line-height: 2rem;
 +
    position: relative;
 +
    top: -20vw;
 +
    padding: 0.5rem 0rem 0.5rem 2rem;
 +
    border: solid;
 +
    background: lightgray; 
 +
    visibility:hidden;
 +
    opacity: 0.9;
 +
    border-radius: 1rem;
 +
    height: 5.5rem;
 
}
 
}
−
.main p{
+
.SAheading{
−
     white-space: normal;
+
     position: relative;
 +
    left: -1.2rem;
 +
    margin-bottom: 0.5rem;
 +
    font-size: 22px;
 +
    font-weight: bold;
 +
}
 +
#SAmark{
 +
    position: relative;
 +
    width: 4vw;
 +
    height: 7vw;
 +
    top: -13vw;
 +
    left: 7.1vw;
 +
    visibility:visible !important; 
 +
}   
 +
#America{
 +
    text-align: left;
 +
    width: 13rem;
 +
    list-style: disc;
 +
    line-height: 2rem;
 +
    position: relative;
 +
    top: -29vw;
 +
    padding: 0.5rem 0rem 0.5rem 2rem;
 +
    border: solid;
 +
    background: lightgray;   
 +
    visibility:hidden;
 +
    opacity: 0.9;
 +
    border-radius: 1rem;
 +
    height: 10rem;
 +
}
 +
.AMheading{
 +
    position: relative;
 +
    left: -1.2rem;
 +
    margin-bottom: 0.5rem;
 +
    font-size: 22px;
 +
    font-weight: bold;
 +
}
 +
#AMmark{
 +
    position: relative;
 +
    width: 11vw;
 +
    height: 20vw;
 +
    left: 19vw;
 +
    top: -12rem;
 +
    visibility:visible !important; 
 +
}   
 +
.nation{
 +
    position:absolute;
 
}
 
}
 +
/*Main*/
 
.overallGrid{
 
.overallGrid{
 
     padding:0 7%;
 
     padding:0 7%;
 
}
 
}
 
.firstBlock{
 
.firstBlock{
−
     border:2px solid #973A41;
+
     border:2px solid #8AC3D4;
 
}
 
}
 
.secondBlock{
 
.secondBlock{
−
     border:2px solid #172544;
+
     border:2px solid #B1DFE3;
 
}
 
}
 
.thirdBlock{
 
.thirdBlock{
−
     border:2px solid #8BBED5;
+
     border:2px solid #FFD1D3;
 
}
 
}
 
.fourthBlock{
 
.fourthBlock{
−
     border:2px solid #E8BA66;
+
     border:2px solid #E5B8D7;
 
}
 
}
 
.fifthBlock{
 
.fifthBlock{
−
     border:2px solid #620E15;
+
     border:2px solid #8AC3D4;
 
}
 
}
 
.sixthBlock{
 
.sixthBlock{
−
     border:2px solid #171717;
+
     border:2px solid #B1DFE3;
 
}
 
}
 +
.seventhBlock{
 +
    border:2px solid #FFD1D3;
 +
}
 +
.eighthBlock{
 +
    border:2px solid #E5B8D7;
 +
}
 +
.ninthBlock{
 +
    border:2px solid #8AC3D4;
 +
}
 +
.tenthBlock{
 +
    border:2px solid #B1DFE3;
 +
}
 +
.eleventhBlock{
 +
    border:2px solid #FFD1D3;
 +
}
 +
.twelfthBlock{
 +
    border:2px solid #E5B8D7;
 +
}
 +
.thirteenthBlock{
 +
    border:2px solid #8AC3D4;
 +
}
 +
.fourteenthBlock{
 +
    border:2px solid #B1DFE3;
 +
}
 +
.fifteenthBlock{
 +
    border:2px solid #FFD1D3;
 +
}
 +
.sixteenthBlock{
 +
    border:2px solid #E5B8D7;
 +
}
 +
.seventeenthBlock{
 +
    border:2px solid #8AC3D4;
 +
}
 +
.eighteenthBlock{
 +
    border:2px solid #B1DFE3;
 +
}
 +
.nineteenthBlock{
 +
    border:2px solid #FFD1D3;
 +
}
 +
.twentiethBlock{
 +
    border:2px solid #E5B8D7;
 +
}
 +
.twenty-firstBlock{
 +
    border:2px solid #8AC3D4;
 +
}
 +
.twenty-secondBlock{
 +
    border:2px solid #B1DFE3;
 +
}
 +
.twenty-thirdBlock{
 +
    border:2px solid #FFD1D3;
 +
}   
 
.collabBlock{
 
.collabBlock{
 
     margin-bottom:3rem;
 
     margin-bottom:3rem;
Line 206: Line 473:
 
     z-index: 60;
 
     z-index: 60;
 
     transform: scale(1.2,1.2);
 
     transform: scale(1.2,1.2);
−
}
+
}  
−
/*collab end*/
+
 
 +
@media only screen and (max-width: 700px) {
 +
  .headtitle {
 +
    font-size: 2.5rem !important;
 +
 
 +
  }
 +
 
 +
} 
 +
.tune{
 +
  position: relative;
 +
  left: -0.8vw;
 +
  top: -1.0vw;"
 +
} 
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 07:19, 27 July 2021