700 lines
9.9 KiB
CSS
700 lines
9.9 KiB
CSS
/*
|
|
* Base structure
|
|
*/
|
|
|
|
/* Move down content because we have a fixed navbar that is 50px tall */
|
|
body {
|
|
margin: 0;
|
|
padding-top: 50px;
|
|
}
|
|
|
|
/*
|
|
* Global add-ons
|
|
*/
|
|
|
|
.sub-header {
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
/*
|
|
* Top navigation
|
|
* Hide default border to remove 1px line.
|
|
*/
|
|
.navbar-fixed-top {
|
|
border: 0;
|
|
}
|
|
|
|
/*
|
|
* Sidebar
|
|
*/
|
|
|
|
/* Hide for mobile, show later */
|
|
.sidebar {
|
|
display: block;overflow: hidden!important;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 51px;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
display: block;
|
|
padding: 20px;
|
|
overflow: hidden;
|
|
/*overflow-y: auto; !* Scrollable contents if viewport is shorter than content. *!*/
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.main {
|
|
padding-right: 40px;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.project dt {
|
|
float: left;
|
|
width: 100px;
|
|
overflow: hidden;
|
|
clear: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.project dd {
|
|
margin-left: 112px;
|
|
}
|
|
}
|
|
|
|
/* Sidebar navigation */
|
|
.nav-sidebar {
|
|
margin-right: -21px; /* 20px padding + 1px border */
|
|
margin-bottom: 20px;
|
|
margin-left: -20px;
|
|
}
|
|
|
|
.nav-sidebar > li > a {
|
|
padding-right: 20px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.nav-sidebar > .active > a,
|
|
.nav-sidebar > .active > a:hover,
|
|
.nav-sidebar > .active > a:focus {
|
|
color: #fff;
|
|
background-color: #428bca;
|
|
}
|
|
|
|
/*
|
|
* Main content
|
|
*/
|
|
|
|
.main {
|
|
padding: 20px;
|
|
margin-left: 280px;
|
|
}
|
|
|
|
.main .page-header {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/*
|
|
* Placeholder dashboard ideas
|
|
*/
|
|
|
|
.placeholders {
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.placeholders h4 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.placeholder {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.placeholder img {
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
h4, h5, h6,
|
|
h1, h2, h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
ul, ol {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
html, body {
|
|
font-family: 'Ubuntu', sans-serif;
|
|
font-size: 100%;
|
|
background: #ffffff;
|
|
}
|
|
|
|
body a {
|
|
transition: 0.5s all;
|
|
-webkit-transition: 0.5s all;
|
|
-moz-transition: 0.5s all;
|
|
-o-transition: 0.5s all;
|
|
-ms-transition: 0.5s all;
|
|
}
|
|
|
|
body {
|
|
padding-top: 0px;
|
|
}
|
|
|
|
a:focus {
|
|
outline: thin dotted;
|
|
outline: 0px auto -webkit-focus-ring-color;
|
|
outline-offset: 0px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*-- header_top --*/
|
|
.sidebar {
|
|
/*background: #6ecadc;*/
|
|
background: #43808e;
|
|
top: 0px;
|
|
padding: 2em 30px;
|
|
}
|
|
|
|
.sidebar h1 {
|
|
font-size: 2.5em;
|
|
font-weight: 700;
|
|
margin-bottom: 1em;
|
|
COLOR: #fff;
|
|
font-family: 'Varela Round', sans-serif;
|
|
|
|
}
|
|
|
|
.sidebar img {
|
|
border: 1px solid #fff;
|
|
padding: 6px;
|
|
width: 80%;
|
|
}
|
|
|
|
.details {
|
|
margin-top: 2em;
|
|
}
|
|
|
|
.details h3 {
|
|
font-weight: 600;
|
|
font-size: 1em;
|
|
color: #fff;
|
|
}
|
|
|
|
.details p {
|
|
color: #101010;
|
|
font-size: 0.9em;
|
|
margin: 5px 0 2em 0;
|
|
}
|
|
|
|
.details p a {
|
|
color: #101010;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/*----*/
|
|
.main {
|
|
padding: 2em 0;
|
|
}
|
|
|
|
.content {
|
|
margin-right: 3em;
|
|
width: 967px;
|
|
}
|
|
|
|
.glyphicon {
|
|
top: 1px;
|
|
}
|
|
|
|
.glyphicon-tasks:before,.glyphicon-home:before, .glyphicon-print:before, .glyphicon-envelope:before, .glyphicon-picture:before {
|
|
margin-right: 9px;
|
|
font-size: 14px;
|
|
color: #6ecadc;
|
|
}
|
|
|
|
.details_header {
|
|
padding-bottom: 2em;
|
|
}
|
|
|
|
.details_header ul li {
|
|
display: inline-block;
|
|
}
|
|
|
|
.details_header ul li a {
|
|
padding: 0 1em;
|
|
color: #333;
|
|
}
|
|
|
|
.details_header ul li a:hover {
|
|
color: #6ecadc;
|
|
}
|
|
|
|
.item {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.clr {
|
|
color: #FFF;
|
|
padding: 5px 41px 5px 30px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.clr1 {
|
|
background: #6ecadc;
|
|
}
|
|
|
|
.clr2 {
|
|
background: #e9a820;
|
|
}
|
|
|
|
.clr3 {
|
|
background: #3eb991;
|
|
}
|
|
|
|
.clr4 {
|
|
background: #40a4b9;
|
|
}
|
|
|
|
.clr5 {
|
|
background: #52c160;
|
|
}
|
|
|
|
|
|
|
|
.item h4 {
|
|
color: #333;
|
|
font-weight: 600;
|
|
font-size: 1.4em;
|
|
margin-bottom: 6px;
|
|
font-family: 'Varela Round', sans-serif;
|
|
}
|
|
.item h5 {
|
|
color: #666;
|
|
font-weight: 600;
|
|
font-size: 1.2em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.item_detail .teach{
|
|
display: flex;
|
|
}
|
|
.item_detail .teach h5{
|
|
margin-right: 20px;
|
|
}
|
|
.item h4 span,.item h5 span {
|
|
font-size: 0.65em;
|
|
margin-left: 5px;
|
|
color: #999;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.item h6 {
|
|
font-weight: 400;
|
|
margin-bottom: 1.3em;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.item_detail{
|
|
margin: 1.5em 0 0 2em;
|
|
padding-bottom: 1.5em;
|
|
border-bottom: 1px solid #d8e6f8;
|
|
}
|
|
.item_detail:last-child{
|
|
border-bottom: none;
|
|
}
|
|
|
|
.item_detail p,dl.project dd{
|
|
color: #666;
|
|
font-weight: 300;
|
|
line-height: 1.7em;
|
|
}
|
|
dl.project dd .label {
|
|
margin-right: 5px;
|
|
}
|
|
.project dt {
|
|
color: #8c8b8b;
|
|
line-height: 1.7em;
|
|
}
|
|
|
|
.person_info li {
|
|
list-style: none;
|
|
color: #666;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
width: 49%;
|
|
}
|
|
.person_info li:before {
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border: 1px solid #999;
|
|
border-radius: 10px;
|
|
background: #aaa;
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
float: left;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
|
|
.skill ul{
|
|
list-style: none;
|
|
}
|
|
.skill ul>li {
|
|
line-height: 32px;
|
|
overflow: hidden;
|
|
list-style: decimal-leading-zero inside;
|
|
color: #666;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.copywrite {
|
|
padding-left: 2em;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.copywrite p {
|
|
color: #999;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.copywrite p a {
|
|
color: #999;
|
|
}
|
|
|
|
.copywrite p a:hover {
|
|
color: #6ecadc;
|
|
}
|
|
|
|
/*--responsive--*/
|
|
@media (max-width: 1366px) {
|
|
.sidebar h1 {
|
|
font-size: 2em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.sidebar {
|
|
padding: 2em 17px;
|
|
width: 20%;
|
|
}
|
|
|
|
.sidebar h1 {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
.main {
|
|
margin-left: 19.666667%;
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
width: 22%;
|
|
}
|
|
|
|
.main {
|
|
margin-left: 21.666667%;
|
|
width: 78%;
|
|
}
|
|
|
|
.sidebar h1 {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.sidebar img {
|
|
padding: 4px;
|
|
width: 54%;
|
|
}
|
|
|
|
.details_header {
|
|
padding-bottom: 2em;
|
|
}
|
|
|
|
.details_header ul li a {
|
|
padding: 0 1em;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.item h3 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.item_detail h4{
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.item_detail h5{
|
|
font-size: 1em;
|
|
}
|
|
.item_detail h6{
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.item_detail p{
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.person_info li {
|
|
width: 49%;
|
|
font-weight: 300;
|
|
line-height: 1.7em;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.skill ul li,dl.project dd {
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.details p {
|
|
font-size: 0.75em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 736px) {
|
|
.sidebar {
|
|
width: 100%;
|
|
}
|
|
|
|
.main {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar_top {
|
|
width: 30%;
|
|
float: left;
|
|
margin-right: 5%;
|
|
}
|
|
|
|
.details {
|
|
width: 30%;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.sidebar {
|
|
width: 100%;
|
|
}
|
|
|
|
.main {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar_top {
|
|
width: 30%;
|
|
float: left;
|
|
margin-right: 5%;
|
|
}
|
|
|
|
.details {
|
|
width: 30%;
|
|
float: right;
|
|
}
|
|
|
|
.sidebar img {
|
|
width: 100%;
|
|
}
|
|
|
|
.details p {
|
|
font-size: 0.9em;
|
|
margin: 5px 0 1em 0;
|
|
}
|
|
|
|
.details h3 {
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.sidebar_top {
|
|
width: 32%;
|
|
}
|
|
|
|
.sidebar img {
|
|
width: 85%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 568px) {
|
|
.details_header ul li a {
|
|
padding: 0 0.5em;
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.content {
|
|
margin-right: 2em;
|
|
}
|
|
|
|
.glyphicon-tasks:before,.glyphicon-home:before, .glyphicon-print:before, .glyphicon-envelope:before, .glyphicon-picture:before {
|
|
margin-right: 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.details_header ul li a {
|
|
padding: 0 0.5em;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.details {
|
|
width: 36%;
|
|
}
|
|
|
|
.sidebar h1 {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.sidebar_top {
|
|
width: 38%;
|
|
}
|
|
|
|
.copywrite {
|
|
padding-left: 1em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 414px) {
|
|
.sidebar_top {
|
|
width: 45%;
|
|
}
|
|
|
|
.sidebar img {
|
|
width: 91%;
|
|
}
|
|
|
|
.details {
|
|
width: 42%;
|
|
}
|
|
|
|
.details_header {
|
|
padding-bottom: 2em;
|
|
}
|
|
|
|
.details_header ul li a {
|
|
padding: 0 0.3em;
|
|
font-size: 0.75em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 384px) {
|
|
.sidebar h1 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.details {
|
|
width: 45%;
|
|
}
|
|
|
|
.details_header ul {
|
|
text-align: center;
|
|
}
|
|
|
|
.details_header ul li a {
|
|
padding: 0 1em;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.main {
|
|
padding: 1em 0 2em 0;
|
|
}
|
|
|
|
.item_detail{
|
|
padding: 0;
|
|
margin: 1em 1em;
|
|
}
|
|
|
|
.item_detail h4{
|
|
font-size: 0.9em;
|
|
}
|
|
.item_detail h5{
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.item_detail h6{
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
.item h3 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.clr {
|
|
padding: 5px 98px 5px 16px;
|
|
}
|
|
|
|
.copywrite p {
|
|
font-size: 0.7em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 375px) {
|
|
.sidebar h1 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.sidebar img {
|
|
width: 50%;
|
|
}
|
|
|
|
.details h3 {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.details p {
|
|
font-size: 0.75em;
|
|
margin: 5px 0 0.5em 0;
|
|
}
|
|
|
|
.sidebar {
|
|
padding: 1.5em 17px 1em 17px;
|
|
}
|
|
|
|
.details_header {
|
|
/*padding: 0 0 0 1em;*/
|
|
text-align: center;
|
|
}
|
|
|
|
.details_header ul li a {
|
|
line-height: 2em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 320px) {
|
|
.sidebar_top {
|
|
width: 50%;
|
|
}
|
|
|
|
.sidebar img {
|
|
width: 80%;
|
|
}
|
|
|
|
.details h3 {
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
.content {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.details_header ul li a {
|
|
padding: 0 0.5em;
|
|
font-size: 0.75em;
|
|
}
|
|
}
|