odjbin/resume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
dj
2025-06-09 22:31:02 +08:00
commit 33fb5191cd
13 changed files with 1261 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

699
css/style.css Normal file
View File

@@ -0,0 +1,699 @@
/*
* 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;
}
}