Difference between revisions of "Team:NCHU Taichung/style/main.css"

 
(37 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, sup, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td,
 +
article, aside, canvas, details, embed,
 +
figure, figcaption, footer, header, hgroup,
 +
menu, nav, output, ruby, section, summary,
 +
time, mark, audio, video {
 +
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
font-size: 100%;
 +
font: inherit;
 +
vertical-align: baseline;
 +
}
 +
/* HTML5 display-role reset for older browsers */
 +
article, aside, details, figcaption, figure,
 +
footer, header, hgroup, menu, nav, section {
 +
display: block;
 +
}
 +
body {
 +
line-height: 1;
 +
}
 +
ol, ul {
 +
list-style: none;
 +
}
 +
blockquote, q {
 +
quotes: none;
 +
}
 +
blockquote:before, blockquote:after,
 +
q:before, q:after {
 +
content: '';
 +
content: none;
 +
}
 +
table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
}
 +
 +
 +
 
.main {
 
.main {
 
   margin: 60px auto 60px auto;
 
   margin: 60px auto 60px auto;
Line 31: Line 77:
 
   display: none;
 
   display: none;
 
}
 
}
−
@media only screen and (max-width: 767px) {
+
@media only screen and (max-width: 1024px) {
−
   #top_menu_14 {
+
   #submenu {
 +
    left: 0px;
 +
    top: 36px!important;
 +
  }
 +
  #railMenu {
 
     display: none;
 
     display: none;
 
   }
 
   }
 +
  #mobileRailMenu {
 +
    display: none;
 +
    text-align: -webkit-right;
 +
    height: unset!important;
 +
  }
 +
  .ui.vertical.menu {
 +
    width: 30vw;
 +
    background: white;
 +
    border-radius: 4px 0 0 4px;
 +
  }
 +
}
 +
@media only screen and (max-width: 767px) {
 +
  /* #top_menu_14 {
 +
    display: none;
 +
  } */
 
   #logo {
 
   #logo {
 
     padding-top: none;
 
     padding-top: none;
Line 40: Line 105:
 
   }
 
   }
 
   .ui.main.text.container {
 
   .ui.main.text.container {
−
     margin-top: 40px;
+
     margin-top: 50px;
 
   }
 
   }
 
   /* .ui.hidden.header {
 
   /* .ui.hidden.header {
Line 53: Line 118:
 
   }
 
   }
 
   #sidebar {
 
   #sidebar {
−
     padding: 0px;
+
     padding-top: 12px;
 
     align-items: center;
 
     align-items: center;
 
   }
 
   }
 
   #sidemenu {
 
   #sidemenu {
 
     width: 100vw;
 
     width: 100vw;
−
  }
 
−
  #submenu {
 
−
    left: 0px;
 
−
    top: 36px!important;
 
−
  }
 
−
  #railMenu {
 
−
    display: none;
 
−
  }
 
−
  #mobileRailMenu {
 
−
    display: block;
 
−
    text-align: -webkit-right;
 
−
  }
 
−
  .ui.vertical.menu {
 
−
    width: 30vw;
 
−
    background: white;
 
−
    border-radius: 4px 0 0 4px;
 
 
   }
 
   }
 
}
 
}
Line 81: Line 130:
 
body {
 
body {
 
   background: #fafff8;
 
   background: #fafff8;
 +
}
 +
body > * {
 +
  font-size: initial!important;
 
}
 
}
 
.left.rail {
 
.left.rail {
Line 96: Line 148:
 
.six.wide.column {
 
.six.wide.column {
 
   display: flex!important;
 
   display: flex!important;
−
   align-items: center;
+
   align-items: center!important;
 
}
 
}
 
.clmnImg {
 
.clmnImg {
Line 113: Line 165:
 
   margin-right: 0px;
 
   margin-right: 0px;
 
}
 
}
−
.row.column {
+
.grid > .row > .column {
−
   display: inline-table;
+
   display: inline-table!important;
 +
}
 +
.enL {
 +
width: 48.25%!important;
 
}
 
}
  
 +
.longP {
 +
  line-height: 1.78rem;
 +
}
 +
#topSeg {
 +
  border-top: none;
 +
}
 
/* --- main bg --- */
 
/* --- main bg --- */
  
Line 123: Line 184:
 
   width: 100vw;
 
   width: 100vw;
 
   height: 160vw;
 
   height: 160vw;
−
   background-image: url(../img/indexbg.png) ;
+
   background-image: url(https://static.igem.org/mediawiki/2018/0/08/T--NCHU_Taichung--indexbg.png) ;
 
   background-size: cover;
 
   background-size: cover;
 
   -webkit-background-size: cover;
 
   -webkit-background-size: cover;
Line 129: Line 190:
 
}
 
}
  
−
 
+
/* #mainbg > * {
−
 
+
  border: solid;
−
 
+
} */
−
 
+
#mainbg > .grid {
 +
  height: 100%;
 +
}
 +
#mainbg > .grid > .row {
 +
  /* border: solid!important; */
 +
  align-items: center;
 +
}
 +
#paddtoprow {
 +
  height: 6.75%;
 +
}
 +
#first {
 +
  height: 23.25%;
 +
}
 +
#eq {
 +
  height: calc((100% - 35%) / 3);
 +
}
 +
#grandpa {
 +
  width: 60%;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
#degration {
 +
  width: 80%;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
  
  
Line 146: Line 232:
 
#HQ_page {
 
#HQ_page {
 
     width: 100vw;
 
     width: 100vw;
 +
}
 +
#HQ_page table {
 +
  margin-left: unset;
 +
  margin-right: unset;
 +
  border-top: .2em solid #b5cc18!important;
 
}
 
}
 
.header#top {
 
.header#top {
Line 156: Line 247:
 
#globalWrapper {
 
#globalWrapper {
 
   padding-bottom: 0;
 
   padding-bottom: 0;
 +
}
 +
#HQ_page p {
 +
  font-family: inherit!important;
 +
  font-size: 15px!important;
 
}
 
}
 
/* #top_menu_inside {
 
/* #top_menu_inside {

Latest revision as of 15:54, 4 December 2018

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; } table { border-collapse: collapse; border-spacing: 0; }


.main { 

 margin: 60px auto 60px auto;

}

  1. padding{
 height: 80vh;

}

  1. logo {
 padding-top: 2px;
 width: 100px;

} .fixed.menu { 

 padding-top: 15px;
 /* width: 100vw; */

} .ui.menu .item { 

 padding: 0.98em 0.58em;

} .tablet.computer.row { 

 padding: unset;

} .segments { 

 border: none!important;

} .raised.segment { 

 box-shadow: 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15)!important;

}

  1. sidemenu {
 display: none;

}

  1. mobileRailMenu {
 display: none;

} @media only screen and (max-width: 1024px) { 

 #submenu {
   left: 0px;
   top: 36px!important;
 }
 #railMenu {
   display: none;
 }
 #mobileRailMenu {
   display: none;
   text-align: -webkit-right;
   height: unset!important;
 }
 .ui.vertical.menu {
   width: 30vw;
   background: white;
   border-radius: 4px 0 0 4px;
 }

} @media only screen and (max-width: 767px) { 

 /* #top_menu_14 {
   display: none;
 } */
 #logo {
   padding-top: none;
   width: 100px;
 }
 .ui.main.text.container {
   margin-top: 50px;
 }
 /* .ui.hidden.header {
   display: none;
 } */
 .fixed.menu {
   padding-bottom: 10px;
   height: 40px;
 }
 #openSidebar {
   background: transparent;
 }
 #sidebar {
   padding-top: 12px;
   align-items: center;
 }
 #sidemenu {
   width: 100vw;
 }

} .ui.inverted.segment, .ui.inverted.menu { 

 background: #afbfa5;

} body { 

 background: #fafff8;

} body > * { 

 font-size: initial!important;

} .left.rail { 

 right: 87%!important;
 padding-top: 160px!important;

} .sticky.fixed.top { 

 margin-top: 65px!important;

}

.ui.styled.accordion { 

 margin-left: auto;
 margin-right: auto;

} .six.wide.column { 

 display: flex!important;
 align-items: center!important;

} .clmnImg { 

 box-shadow: 3px 5px 14px 0px #cdcdcd!important;
 border-radius: .21428571rem;

}

  1. labelImg {
 min-height: 100%;
 text-align: center;

} .ribbon.label { 

 z-index: 2;

} .divided.grid { 

 margin-left: 0px;
 margin-right: 0px;

} .grid > .row > .column { 

 display: inline-table!important;

} .enL { width: 48.25%!important; }

.longP { 

 line-height: 1.78rem;

}

  1. topSeg {
 border-top: none;

} /* --- main bg --- */

  1. mainbg {
 display: block;
 width: 100vw;
 height: 160vw;
 background-image: url(T--NCHU_Taichung--indexbg.png) ;
 background-size: cover;
 -webkit-background-size: cover;

-moz-background-size: cover; }

/* #mainbg > * { 

 border: solid;

} */

  1. mainbg > .grid {
 height: 100%;

}

  1. mainbg > .grid > .row {
 /* border: solid!important; */
 align-items: center;

}

  1. paddtoprow {
 height: 6.75%;

}

  1. first {
 height: 23.25%;

}

  1. eq {
 height: calc((100% - 35%) / 3);

}

  1. grandpa {
 width: 60%;
 margin-left: auto;
 margin-right: auto;

}

  1. degration {
 width: 80%;
 margin-left: auto;
 margin-right: auto;

}


/* Remove heritage css */

  1. top_title {
 display: none;

}

  1. content {
 padding: unset;
 margin: unset;
 width: -webkit-fill-available;

}

  1. HQ_page {
   width: 100vw;

}

  1. HQ_page table {
 margin-left: unset;
 margin-right: unset;
 border-top: .2em solid #b5cc18!important;

} .header#top { 

 margin-top: 10px;

} /* #top_menu_14 { 

 background: #afbfa5;
 border: none;

} */

  1. globalWrapper {
 padding-bottom: 0;

}

  1. HQ_page p {
 font-family: inherit!important;
 font-size: 15px!important;

} /* #top_menu_inside { 

 border: none;

}

  1. top_menu_inside a {
 color: #ffffff38!important;

}

  1. top_menu_inside #user_item {
 color: #ffffff38;
 float: left;
 padding-top: 0;

} */