generated from dellevin/template
507 lines
11 KiB
CSS
507 lines
11 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
position: relative;
|
|
min-height: 100%;
|
|
background: #eee;
|
|
color: #4c4948;
|
|
font-size: 14px;
|
|
font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif;
|
|
line-height: 2;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
position: relative;
|
|
margin: 1rem 0 .7rem;
|
|
color: #344c67;
|
|
font-weight: 700
|
|
}
|
|
hr:before {
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 5%;
|
|
z-index: 1;
|
|
color: #49b1f5;
|
|
content: '\f0c4';
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 20px;
|
|
transition: all 1s ease-in-out;
|
|
}
|
|
hr {
|
|
position: relative;
|
|
margin: 2rem auto;
|
|
width: calc(100% - 4px);
|
|
border: 2px dashed #a4d8fa;
|
|
background: #fff;
|
|
}
|
|
hr {
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
overflow: visible;
|
|
}
|
|
body, li, span, p {
|
|
/* cursor: url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/texto.cur),auto; */
|
|
}
|
|
a {
|
|
background-color: transparent;
|
|
/* cursor: url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/ayuda.cur),auto; */
|
|
}
|
|
strong{
|
|
color: #FF0066;
|
|
}
|
|
#body-wrap {
|
|
position: relative;
|
|
display: box;
|
|
display: flex;
|
|
box-flex: 1;
|
|
flex: 1 auto;
|
|
-webkit-box-orient: vertical;
|
|
flex-direction: column;
|
|
transition: all .5s;
|
|
}
|
|
#nav.not_index_bg {
|
|
height: 15rem;
|
|
}
|
|
#nav {
|
|
position: relative;
|
|
margin-top: -2rem;
|
|
width: 100%;
|
|
background-color: #49b1f5;
|
|
background-attachment: local;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
#page_site-info {
|
|
position: absolute;
|
|
top: 7rem;
|
|
width: 100%;
|
|
}
|
|
#site-title {
|
|
color: #eee;
|
|
text-align: center;
|
|
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, .15);
|
|
line-height: 1.5;
|
|
font-weight: 700;
|
|
font-size: 1.3rem;
|
|
animation: titlescale 1s;
|
|
}
|
|
main {
|
|
display: block;
|
|
}
|
|
|
|
#content-outer {
|
|
-webkit-box-flex: 1;
|
|
-moz-box-flex: 1;
|
|
-o-box-flex: 1;
|
|
box-flex: 1;
|
|
-webkit-flex: 1 auto;
|
|
-ms-flex: 1 auto;
|
|
flex: 1 auto;
|
|
}
|
|
h1 {
|
|
font-size: 2em;
|
|
margin: .67em 0;
|
|
}
|
|
.layout_page {
|
|
display: flex;
|
|
-webkit-box-align: start;
|
|
align-items: flex-start;
|
|
margin: 0 auto;
|
|
padding: 0 5px;
|
|
max-width: 1400px;
|
|
}
|
|
|
|
#page{
|
|
margin-top: 10px;
|
|
width: 75%;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
|
|
transition: all .3s;
|
|
}
|
|
#page{
|
|
padding: 20px 44px 44px;
|
|
}
|
|
|
|
#aside_content {
|
|
width: 25%;
|
|
}
|
|
#aside_content .card-widget {
|
|
overflow: hidden;
|
|
margin: 10px 0;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
-webkit-box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
|
|
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
|
|
-webkit-transition: all .3s;
|
|
-moz-transition: all .3s;
|
|
-o-transition: all .3s;
|
|
-ms-transition: all .3s;
|
|
transition: all .3s;
|
|
}
|
|
#aside_content .card-content {
|
|
padding: 1rem 1.2rem;
|
|
}
|
|
|
|
.skillbar {
|
|
position: relative;
|
|
display: block;
|
|
max-width: 360px;
|
|
margin: 15px 10px;
|
|
background: #eee;
|
|
height: 30px;
|
|
border-radius: 35px;
|
|
-moz-border-radius: 35px;
|
|
-webkit-border-radius: 35px;
|
|
-webkit-transition: 0.4s linear;
|
|
-moz-transition: 0.4s linear;
|
|
-o-transition: 0.4s linear;
|
|
transition: 0.4s linear;
|
|
-webkit-transition-property: width, background-color;
|
|
-moz-transition-property: width, background-color;
|
|
-o-transition-property: width, background-color;
|
|
transition-property: width, background-color;
|
|
}
|
|
|
|
.skillbar .skillbar-title {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 110px;
|
|
font-size: 0.9rem;
|
|
color: #ffffff;
|
|
border-radius: 35px;
|
|
-webkit-border-radius: 35px;
|
|
-moz-border-radius: 35px;
|
|
}
|
|
.skillbar .skillbar-title span {
|
|
display: block;
|
|
background: rgba(0, 0, 0, 0.15);
|
|
padding: 0 20px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
border-radius: 35px;
|
|
-webkit-border-radius: 35px;
|
|
-moz-border-radius: 35px;
|
|
}
|
|
.skillbar .skill-bar-percent {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 0;
|
|
font-size: 12px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #ffffff;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.tool a {
|
|
color: #FF0066;
|
|
}
|
|
|
|
.is-center {
|
|
text-align: center;
|
|
}
|
|
|
|
#aside_content .card-info img {
|
|
display: inline-block;
|
|
padding: 5px;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 70px;
|
|
vertical-align: top;
|
|
transition: all .3s;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
transition: all .2s;
|
|
}
|
|
.avatar-img {
|
|
animation: avatar_turn_around 2s linear infinite;
|
|
}
|
|
#aside_content .card-info .author-info__name {
|
|
font-weight: 500;
|
|
font-size: 1.1rem;
|
|
}
|
|
aside_content .card-info .author-info__description {
|
|
margin-top: -.3rem;
|
|
}
|
|
#aside_content .card-info .card-info-social-icons {
|
|
margin: .3rem 0 -.3rem;
|
|
}
|
|
#aside_content .card-info .card-info-social-icons .social-icon {
|
|
margin: 0 .5rem;
|
|
color: #4c4948;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
#aside_content .item-headline {
|
|
font-size: .8rem;
|
|
}
|
|
#aside_content .item-headline span {
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
#aside_content .card-webinfo .webinfo {
|
|
padding: .2rem 1rem;
|
|
}
|
|
#aside_content .card-webinfo .webinfo .webinfo-item {
|
|
display: block;
|
|
padding: 4px 0 0;
|
|
}
|
|
#aside_content .card-webinfo .webinfo .webinfo-item div:first-child {
|
|
display: inline-block;
|
|
}
|
|
#aside_content .card-webinfo .webinfo .webinfo-item div:last-child {
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
#footer {
|
|
position: relative;
|
|
margin-top: 1rem;
|
|
background-attachment: local;
|
|
background-position: bottom;
|
|
background-size: cover;
|
|
}
|
|
#footer-wrap {
|
|
position: relative;
|
|
padding: 2rem 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
#footer, .layout_page, .layout_post {
|
|
-webkit-animation: main 1s;
|
|
-moz-animation: main 1s;
|
|
-o-animation: main 1s;
|
|
-ms-animation: main 1s;
|
|
animation: main 1s;
|
|
}
|
|
|
|
@media screen and (min-width: 768px){
|
|
#site-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 768px){
|
|
.layout_page {
|
|
padding: 0 5px !important;
|
|
}
|
|
#page {
|
|
margin: 0;
|
|
padding: 1.8rem 1.3rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 900px){
|
|
#page{
|
|
width: 100% !important;
|
|
}
|
|
#aside_content{
|
|
width: 100% !important;
|
|
}
|
|
.layout_page {
|
|
-webkit-box-orient: vertical;
|
|
-moz-box-orient: vertical;
|
|
-o-box-orient: vertical;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width: 900px){
|
|
#aside_content .card-widget {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 2px;
|
|
height: 2px
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(to right, #FF0066 0%, #FF00CC 100%); width: 85%
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: transparent
|
|
}
|
|
|
|
/* ---------------- */
|
|
html {
|
|
--item_bg_color: rgb(102,175,239,0.8);
|
|
--item_left_title_color: #000000;
|
|
--item_left_text_color: #000000;
|
|
--card_filter: 0px;
|
|
-webkit-user-select: none; /* Safari */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
|
|
}
|
|
.selectable {
|
|
-webkit-user-select: text; /* Safari */
|
|
-moz-user-select: text; /* Firefox */
|
|
-ms-user-select: text; /* Internet Explorer/Edge */
|
|
user-select: text; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
|
|
}
|
|
|
|
.projectItem {
|
|
min-width: 200px;
|
|
text-decoration: none;
|
|
margin: 7px;
|
|
display: flex;
|
|
background-color: var(--item_bg_color);
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
height: 95px;
|
|
width: calc(22% - 25px);
|
|
backdrop-filter: blur(var(--card_filter));-webkit-backdrop-filter: blur(var(--card_filter));
|
|
-webkit-backdrop-filter: blur(var(--card_filter));-webkit-backdrop-filter: blur(var(--card_filter));
|
|
transition: opacity 0.3s ease, background-color 0.3s ease, border 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
|
|
}
|
|
.projectItem:hover {
|
|
box-shadow: 0 8px 16px -4px #2c2d300c;
|
|
transform: translateY(-2px);
|
|
transition: box-shadow 0.3s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.projectItem:hover .projectItemLeft {
|
|
width: 100%;
|
|
transition: width 0.4s ease;
|
|
}
|
|
|
|
.projectItem:hover .projectItemRight {
|
|
width: 0%;
|
|
transition: width 0.4s ease;
|
|
}
|
|
|
|
.projectItem:hover .projectItemRight img {
|
|
transform: rotate(40deg);
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.projectItem.pressed {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.projectItemLeft p {
|
|
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
|
font-size: 12px;
|
|
margin-top: 15px;
|
|
color: var(--item_left_text_color);
|
|
}
|
|
|
|
|
|
.projectItemLeft h1 {
|
|
font-weight: normal;
|
|
font-size: 16px;
|
|
margin: 0px;
|
|
transition: font-size 0.4s ease;
|
|
color: var(--item_left_title_color);
|
|
}
|
|
|
|
.projectItemLeft {
|
|
transition: width 0.4s ease;
|
|
height: 100%;
|
|
width: 80%;
|
|
}
|
|
.projectItemRight {
|
|
overflow: hidden;
|
|
transition: width 0.4s ease;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 20%;
|
|
height: 100%;
|
|
}
|
|
|
|
.projectItemRight img {
|
|
height: 38px;
|
|
width: 39px;
|
|
}
|
|
|
|
.auto-resize.flex-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
}
|
|
.left-div {
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
border-radius: 13px;
|
|
margin-top: 10px;
|
|
backdrop-filter: blur(var(--card_filter));
|
|
-webkit-backdrop-filter: blur(var(--card_filter));
|
|
}
|
|
#line {
|
|
width: 100%;
|
|
height: 200px;
|
|
font-size: 13px;
|
|
padding-left: 8px;
|
|
scroll-snap-type: y mandatory;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
#line li {
|
|
list-style: none;
|
|
position: relative;
|
|
padding: 15px 0px 0px 15px;
|
|
border-left: 2px solid #d5d5d5;
|
|
border-radius: 0;
|
|
scroll-snap-align: end;
|
|
color: var(--main_text_color);
|
|
}
|
|
|
|
#line li:first-child .focus:first-child {
|
|
background-color: #aaffcd;
|
|
animation: focus 1.8s ease infinite;
|
|
}
|
|
|
|
#line::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.skill {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-bottom: 20px;
|
|
gap: 40px;
|
|
}
|
|
|
|
.skillsImg {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 38px;
|
|
width: 38px;
|
|
position: relative;
|
|
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.skillsImg img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.skillsImgText {
|
|
text-align: center;
|
|
margin-top: 0;
|
|
font-weight: 800;
|
|
position: absolute;
|
|
bottom: -80%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
} |