This repository has been archived on 2020-09-11. You can view files and clone it, but cannot push or open issues or pull requests.
sp4ke.github.com/less/theme.less
chakib benziane 84e31678dc styl fix
2014-07-05 03:18:11 +02:00

410 lines
8.3 KiB
Plaintext

body {
overflow-x: hidden;
font: 18px/27px 'junctionregularRegular', Arial, sans-serif;
color: @textColor;
h1,
h2,
h3,
h4,
h5 {
font-family: @headingFont;
@media (max-width: 767px) {
text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}
}
h2 {
font-size: 40px;
font-weight: 400;
line-height: 40px;
}
}
.btc-address {
border-bottom: 1px dashed;
cursor: pointer;
}
.container.bitcoin {
margin-top: 5rem;
.row > div img {
opacity: .7;
width: 40px;
padding-right: 30px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
.transition(all 500ms ease-in-out);
&:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
}
}
}
.main {
height: 70%;
text-align: center;
padding-top: 3%;
padding-left: 0;
padding-right: 0;
.profil {
.qrcode {
display: block;
position: absolute;
left: 65%;
top: 25%;
opacity: 0;
.transition(all 500ms ease);
img {
width: 70%;
}
}
&:hover .qrcode {
opacity: 1;
}
padding-top: 8%;
h2 {
padding-bottom: 3%;
}
}
.hero {
padding-bottom: 2%;
}
.freelance {
a, h2 {
color: darken(@profilColor, 20%);
}
@media (max-width: 767px) {
padding-bottom: 16%;
}
.row-fluid {
div {
padding: 10px;
}
}
}
.contact {
padding-top: 10%;
a {
text-decoration: none !important;
color: @textColor;
.transition(all 200ms ease);
padding-left: .5em;
padding-right: .5em;
&.contact-qrcode {
width: 100%;
display: inline-block;
position: relative;
img {
width: 15%;
}
}
&:hover {
color: @contactColor;
.transition(all 50ms ease);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
}
}
.projects {
a:hover {
text-decoration: none !important;
}
.details.selected {
display: block !important;
}
img, video {
width: 100% !important;
height: auto !important;
}
.left-panel {
top: 0px;
height: 37rem;
overflow: hidden;
position: fixed;
hr {
margin-top: 0px;
}
h5 a {
.transition(500ms letter-spacing ease-out);
&:hover {
.transition(100ms letter-spacing ease-in);
letter-spacing: 2px;
text-decoration: none !important;
}
}
h5 {
padding-right: 1em;
}
h5.selected {
background: @projectsColor;
a {
letter-spacing: 2px
}
* {
color: white;
font-weight: bold;
}
}
h5:active {
background-color: @projectsColor;
* {
color: white;
font-weight: bold;
}
}
h4 {
color: desaturate(darken(@projectsColor, 10%), 20%);
margin-top: 1.5em;
}
}
.details {
/*position: fixed;*/
/*right: 2%;*/
/*top: 20%;*/
&.github {
padding-top: 5%;
}
&.morrisby {
.demo {
margin-top: 20px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
video {
width: 74% !important;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 47%;
}
}
img {
width: 100%
}
&.simplifield {
.demo {
width: 80%;
margin-left: auto;
margin-right: auto;
img {
z-index: 10;
position: relative;
}
video {
position: absolute;
top: 0;
left: 50%;
z-index: 1;
top: 0%;
width: 93% !important;
.translateX(-50%);
}
}
}
&.uman {
.carousel {
width: 80%;
margin-left: auto;
margin-right: auto;
img:first-child {
z-index: 10;
position: relative;
}
img:nth-child(2) {
position: absolute;
top: 0px;
left: 50%;
width: 92% !important;
.translate(-50%, 0%);
z-index: 1;
}
}
}
&.zapawa {
.demo {
width: 80%;
margin-left: auto;
margin-right: auto;
}
img:first-child {
z-index: 10;
}
img:nth-child(2) {
position: absolute;
z-index: 1;
width: 91.5% !important;
left: 50%;
.translate(-50%, 0%);
top: 4%;
}
}
.demo {
position: relative;
video {
position: absolute;
}
}
}
a {
&.nolink {
cursor: default
}
text-decoration: none;
color: @textColor;
&:hover {
color: @projectsColor;
}
}
.title {
text-align: right;
.transition(all 200ms ease-out);
// border-right: 5px solid @textColor;
h2 {
padding-bottom: .6em;
}
}
}
}
.dock {
.animation-delay(1.5s);
width: 100%;
position: fixed;
bottom: 0;
.transition(all 200ms ease-in);
text-align: center;
&.isProjects {
width: auto;
text-align: left;
a {
font-size: .5em;
}
}
.hoverText {
top: -5%;
display: none;
&.hovered {
display: block;
}
}
a {
color: @dockIconColor;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.18);
padding-left: 1.5em;
padding-right: 1.5em;
.transition(all 100ms ease);
display: inline-block;
&:hover, &.active {
text-decoration: none;
.contact {
color: @contactColor;
}
.profil {
color: @profilColor;
}
.projects {
color: @projectsColor;
}
.blog {
color: @blogColor;
}
}
i {
font-size: 3.5em;
.transition(all 200ms ease);
&.contact {
font-size: 3.5em;
}
@media (max-width: 767px) {
font-size: 1em;
&.contact {
font-size: 0.5em;
}
}
}
}
}