// Filename: style.less // Last revision: 2016-03-19 // ===== VARIABLES ===== // --- Colors ---------- @grey: #474747; @light_grey: #454545; @dark_grey: #3D3D3D; @indigo: #B5C2D4; @dark_indigo: #7C93B2; @primary_light: white; @primary_darken1: darken(white, 5%); @primary_darken2: darken(white, 20%); // --- Bootstrap: ------ //@media (max-width: @screen-xs-max) {} //@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {} //@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {} //@media (min-width: @screen-lg-min) {} // ===== MIXINS ===== // ===== FIXES ===== // ===== GENERAL ===== /* --- Tipography --- */ @font-face { font-family: 'yanone-light'; src: url('fonts/Yanone/YanoneKaffeesatz-Light-webfont.eot'); src: url('fonts/Yanone/YanoneKaffeesatz-Light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Yanone/YanoneKaffeesatz-Light-webfont.woff') format('woff'), url('fonts/Yanone/YanoneKaffeesatz-Light-webfont.ttf') format('truetype'), url('fonts/Yanone/YanoneKaffeesatz-Light-webfont.svg#yanone') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'yanone-regular'; src: url('fonts/Yanone/YanoneKaffeesatz-Regular-webfont.eot'); src: url('fonts/Yanone/YanoneKaffeesatz-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Yanone/YanoneKaffeesatz-Regular-webfont.woff') format('woff'), url('fonts/Yanone/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'), url('fonts/Yanone/YanoneKaffeesatz-Regular-webfont.svg#yanone') format('svg'); font-weight: normal; font-style: normal; } body { font-family: 'yanone-light'; } a, h1, h2, h3, h4, h5, h6 { color: @primary_light; } p { color: @grey; } /* --- General classes --- */ @link-color: @primary_light; @link-color-hover: @dark_grey; html { position: relative; min-height: 100%; } body { margin-bottom: 100px; background: -webkit-linear-gradient(left, @dark_indigo, @indigo); background: -o-linear-gradient(right, @dark_indigo, @indigo); background: -moz-linear-gradient(right, @dark_indigo, @indigo); background: linear-gradient(to right, @dark_indigo, @indigo); } a { color: @link-color; text-decoration: none; &:hover { color: @link-color-hover; text-decoration: none; } &:focus { outline: none; } } h2 { margin-bottom: 16px; } .img { border: 0px; } li { list-style: none; } .img-thumbnail { background: none; border: none; } .btn { color: @primary_darken2; background-color: @grey; font-family: 'yanone-regular'; font-size: 24px; margin: 0 5px 10px 0; &:hover { color: @primary_light; background-color: @dark_grey; } &:focus { color: @primary_light; } } .glyphicon { font-size: 0.75em; padding-right: 3px; } // ===== SECTIONS ===== /* --- Header --- */ #header { background-color: @light_grey; height: 105px; & #logo-simbol { margin: 120px 0 0 -120px; } } #waveband { height: 26px; background-image: url("../images/wave.png"); background-position: -120px; margin-bottom: 60px; } /* --- Navbar --- */ .navbar { margin-top: 131px; } /* --- Page content --- */ #get-it { margin: 30px 20px 20px 20px; & button { padding: 10px 40px 10px 40px; } } #sections { margin-bottom: 40px; & small { color: @primary_darken1; } } #source-download { margin-bottom: 25px; } .post { & small { color: @primary_darken2; } } /* --- Footer --- */ #footer { background-color: @grey; position: absolute; bottom: 0; width: 100%; //height: 60px; padding: 12px 0 8px 0; & .logo { padding: 0 2% 0 2%; } & a { color: @primary_darken2; font-size: 1.2em; margin-right: 10px; } & a:hover { color: @primary_light; img { opacity: 1; } } } #twitter { margin: 6px; & img { height: 16px; margin-right: 5px; padding-bottom: 2px; opacity: 0.7; } } #footer-links { margin: 6px }