Download raw (34.2 KB)
@import "reset.less";
@import "mixins.less";
/*
VISUALCULTURE LESS content map
---
The order of the stylesheet tries hard to maintain consistensy with the order
in which items appear on the web page. Below is a table of contents to help you
find your way around.
Note that since we approched a responsive website, we use a 'mobile-first'
attitude. 95% of styles will remain the same on whatever viewports, only certain
sizes change for bigger screens, so we declare all of the mobile styles first,
then we go onto a set of queries that target viewport sizes starting at 512 px
and up. This keeps the styles clean and logical, you just need to know in which
order to write things.
////////
TABLE OF CONTENT
----------------
- variables & utilities
- @font-face
- typography
- menu & navigation
- info boxes for home page
- project overview sections
- iceberg
- commit-list
- commit-date
- ...
- project detail views
- 'about' page styles
- modals
- plugins
- media queries
- 512px & up
- 768px & up
- 1024px & up
- 1280px & up
*/
// size variables -------------------------------------------------------
@h-unit: 20px;
@v-unit: 15px;
@col-width: 330px;
@col-margin: 30px;
/*
@mobile: only screen and (min-width : 384px); // 6 * 64 = 24 * 16 = 384
@phablet: only screen and (min-width : 512px); // 8 * 64 = 32 * 16 = 512
@tablet: only screen and (min-width : 768px); // 12 * 64 = 48 * 16 = 768
@desktop: only screen and (min-width : 1024px); // 16 * 64 = 64 * 16 = 1024
@large: only screen and (min-width : 1280px); // 20 * 64 = 80 * 16 = 1280
@huge: only screen and (min-width : 1536px); // 24 * 64 = 96 * 16 = 1536
@max: only screen and (min-width : 2048px); // 32 * 64 = 128 * 16 = 2048
*/
// utility classes ------------------------------------------------------
.hide {
display: none;
}
.show {
display: inherit;
}
.invisible {
visibility: hidden;
}
.column-count(@colcount: 0) {
-moz-column-count: @colcount;
-webkit-column-count: @colcount;
column-count: @colcount;
}
.columnx2 {
.column-count(2);
}
.columnx3 {
.column-count(3);
}
// font sizes variables -------------------------------------------------
@font-size-micro: 7px;
@font-size-mini: 9px;
@font-size-small: 12px;
@font-size-medium: 15px;
@font-size-big: 27px;
@font-size-huge: 25px;
@font-default: belgika-16;
@font-secondary: Bagnard;
@font-intermediary: herscheyfutura;
@font-tertiary: Bagnard;
@font-factuelle:belgika-16;
@font-factuelle-bold:belgika-8;
// colors variables -------------------------------------------------
@color-background: white;
@color-text: black;
@color-link: black;
@color-author: yellow;
@color-author-said-gauche: #b8d37a;
@color-author-said-droite: #87bcea;
@color-message: lightblue;
@color-date: #AFEEEE;
@color-contrast: #ffaa00;
@color-contrast: #9900ff;
//@color-contrast-light: RGBA(153, 102, 112, 0.7);
//@color-contrast-light: lightblue;
@color-contrast-light: aquamarine;
@dawn-sky: #ed3aff;
@dawn-earth: #ffdd83;
@day-sky: #0e4d81;
@day-earth: #48a9ed;
@dusk-sky: #dc2800;
@dusk-earth: #dc2800;
@night-sky: #320070;
@night-earth: #9b4e9e;
// fonts -------------------------------------------------
@font-face {
font-family: belgika-8;
src: url("../fonts/Belgika-8th.otf");
}
@font-face {
font-family: belgika-16;
src: url("../fonts/Belgika-16th.otf");
}
@font-face {
font-family: belgika-40;
src: url("../fonts/Belgika-40th.otf");
}
@font-face {
font-family: Bagnard;
src: url("../fonts/Bagnard.otf");
}
@font-face {
font-family: herscheyfutura;
src: url("../fonts/herscheyfutura.otf");
}
@font-face {
font-family: patinhelvete;
src: url("../fonts/OSP_Le-patin-helvete.ttf");
}
@font-face {
font-family: OSP-DIN;
src: url("../fonts/OSP-DIN.otf");
}
@font-face {
font-family: UniversElse-Regular;
src: url("../fonts/UniversElse-Regular.otf")
}
@font-face {
font-family: UniversElse-Light;
src: url("../fonts/UniversElse-Light.otf")
}
@font-face {
font-family: 'NotCourierSans';
src: url('../atfont-face/notcouriersans-bold-webfont.eot');
src: url('../atfont-face/notcouriersans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../atfont-face/notcouriersans-bold-webfont.woff') format('woff'),
url('../atfont-face/notcouriersans-bold-webfont.ttf') format('truetype'),
url('../atfont-face/notcouriersans-bold-webfont.svg#NotCourierSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'NotCourierSans';
src: url('../atfont-face/notcouriersans-webfont.eot');
src: url('../atfont-face/notcouriersans-webfont.eot?#iefix') format('embedded-opentype'),
url('../atfont-face/notcouriersans-webfont.woff') format('woff'),
url('../atfont-face/notcouriersans-webfont.ttf') format('truetype'),
url('../atfont-face/notcouriersans-webfont.svg#NotCourierSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Sean';
src: url('../atfont-face/sean_normal.eot');
src: url('../atfont-face/sean_normal.eot?#iefix') format('embedded-opentype'),
url('../atfont-face/sean_normal.woff') format('woff'),
url('../atfont-face/sean_normal.ttf') format('truetype'),
url('../atfont-face/sean_normal.svg#NotCourierSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
// default -------------------------------------------------
body {
font-family: @font-default;
font-size: @font-size-medium;
line-height: @h-unit;
color: @color-text;
background-color: @color-background;
//letter-spacing: 0.5px;
word-wrap: break-word;
padding: 1em;
}
// typography ----------------------------------------------
ul, blockquote, ol, p {
margin-bottom: @h-unit;
}
blockquote {
font-family: lmitalic;
font-size: @font-size-big;
padding-left: @v-unit;
}
a, a:visited {
color: @color-link;
}
a:hover {
text-decoration: none;
}
a.no-underline{
text-decoration: none;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
}
dt {
letter-spacing: 0.05em;
font-family: @font-secondary;
font-size: @font-size-small;
}
li {
list-style: none;
list-style-type: none;
}
h1{
font-size: @font-size-huge;
color: @color-contrast;
font-weight: normal;
line-height: 2 * @v-unit - 2px;
margin-top: @v-unit;
margin-bottom: @v-unit;
clear: both;
}
h2{
font-size: @font-size-big;
color: @color-text;
font-weight: normal;
line-height: @font-size-big - 2px;
margin-bottom: 1em;
}
p{
letter-spacing: 0.01em;
}
// menu -------------------------------------------------
#menu-wrapper{
width: 100%;
.box-sizing(border-box);
z-index: 100;
background-color: white;
}
header {
margin-left: 400px;
}
#logo {
float: left;
svg#svg5365 path {
stroke: @color-contrast !important;
stroke-width: 1.5 !important;
}
}
#menu {
font-size: 14px;
//margin-top: @v-unit;
margin-bottom: @v-unit;
a {
text-decoration: none;
}
a:hover {
color: @color-contrast;
}
h1 {
font-size: 36px;
line-height: 40px;
margin-top: 0;
margin-bottom: @v-unit;
margin-top: @v-unit;
display: inline;
font-family: Belgika-40;
float:left;
width:100%;
}
li {
list-style: none;
font-family: @font-default;
margin-right: 1%;
margin-bottom: @h-unit/3;
}
li:nth-of-type(2){
margin-top: @v-unit*2;
margin-left: 0px;
}
p {
font-family: @font-secondary;
span{
font-family: @font-intermediary;
}
}
}
// infos-box ------------------------------------------------
#home-infos{
width: 100%;
font-size: 16px;
font-family: @font-secondary;
margin-top: 16px;
padding-bottom: 16px;
figure {
display: inline-block;
}
img {
max-width: 100%;
display: block;
}
}
#home-info{
font-family: @font-secondary;
width: 95%;
font-size: 16px;
line-height: 24px;
margin-top: 24px !important;
h1{
padding-bottom: 5px;
border-bottom: 1px dotted @color-contrast-light;
margin-top: 38px;
}
}
// blog rss feed ------------------------------------------------
// fed by FeedEk.js
div#on-the-table-feed{
img{
width: 100%;
}
ul.feedEkList{
li{
width: 95%;
float: left;
margin-bottom: @h-unit;
p{
width: 100%;
}
div.itemContent{
font-family: @font-secondary;
font-size: 16px;
line-height: 24px;
padding-bottom: 10px;
border-bottom: 1px dotted;
display: none;
}
div.itemDate{
font-family: @font-factuelle-bold;
margin-top: 6px;
font-size: 12px;
}
div.itemTitle{
a{
font-family: @font-intermediary;
font-size: 25px;
text-decoration:none;
line-height: 46px;
}
a:hover{
margin-bottom:20px;
color: @color-contrast;
}
}
}
}
}
.status {
background-color: blue;
color: white;
padding: 12px;
margin-bottom: 1em;
margin-right: 1em;
width: 20em;
float: left;
font-family: notcouriersans;
font-weight: bold;
font-size: 13px;
a {
color: #AFEEEE;
}
}
// active pieces -------------------------------------------------
#active-projects {
position: relative;
z-index: 2;
background-color: rgba(255, 255, 255, 0.9);
margin-top: @v-unit;
}
#active-projects,
#project-detail {
.clearfix;
width: auto;
h2 {
color: @color-contrast;
font-family: @font-factuelle-bold;
}
#project-detail-readme,
#project-detail-iceberg,
#project-detail-commits,
#project-detail-files {
border-top: 1px dotted;
padding-top: @v-unit*2;
margin-top: @v-unit;
width: 100%;
float:left;
}
#project-detail-readme article {
figure,
img {
max-width: 100%;
margin-top: @v-unit;
margin-bottom: @v-unit;
outline: 1px solid @color-contrast-light;
}
figure {
text-align: center;
& img { margin-top: 0; margin-bottom: @v-unit /2; outline: none; }
}
figure footer {
font-size: 12px;
}
h1 {
font-size: @font-size-big;
line-height: 50px;
width: auto;
padding: 5px;
padding-left: 0px;
}
h2 {
font-size: @font-size-big;
margin:0;
padding:0;
margin-top: @v-unit*2;
margin-bottom: @v-unit;
font-family: @font-factuelle;
border-top: dotted 1px;
padding-top: @v-unit * 2;
}
h3 {
font-size: 21px;
line-height: 28px;
font-family: @font-factuelle;
}
h4 { text-decoration: underline;}
p, li {
font-family: @font-secondary;
font-size: 16px;
line-height: 24px;
}
blockquote {
font-style: italic;
border-left: 1px dotted @color-contrast;
}
li{
padding-left: @h-unit;
}
li:before{
content: "\2192 \20 ";
margin-left: -22px;
}
}
#project-detail-iceberg {
border-bottom: 1px dotted;
padding-bottom: @v-unit;
margin-bottom: @v-unit;
div.iceberg-thumbnail{
width: 100%;
height: 300px;
float: left;
margin-right: 15px;
margin-bottom: 15px;
}
}
#project-detail-commits {
border-top: none;
}
#project-detail-files {
background-color: @color-contrast-light;
border-top: none;
h2{
color: white;
line-height: 26px;
padding-top: @h-unit;
padding-left: @h-unit;
margin-bottom: 0;
text-decoration: none;
}
p{
font-family: @font-secondary;
}
ul.breadcrumb{
font-family: @font-default;
font-size: 12px;
padding-left:5px;
}
svg.file-icon{
width: 20px;
float: left;
margin-top: -5px;
margin-left: 2px;
padding-right: 10px;
fill: none;
outline: black;
}
path.outline-path{
stroke: black;
}
#blob{
margin-top: @h-unit;
padding-left: @h-unit;
}
}
}
// project box -------------------------------------------------
.project{
float: left;
width:95%;
margin-bottom: @h-unit;
max-height: 580px;
overflow: hidden;
position: relative;
border-top: 1px solid black;
padding-top: @h-unit;
}
#home-info.project{
border-top: none;
}
div.gradient-to-more{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
text-align: center;
padding-top: 30px;
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 1)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));
}
a.see-more{
position: absolute;
background-color: white;
text-decoration: none;
padding: 5px;
padding-top: 10px;
border: 1px dotted black;
bottom: 0;
left: 0%;
right: 0%;
margin-left: auto;
margin-right: auto;
width: 30%;
}
.see-more:hover{
background-color: @color-contrast;
border: 1px solid @color-contrast;
}
#home-info.project{
max-height: none;
}
.project-type{
text-transform: uppercase;
font-size: @font-size-medium;
text-align: center;
a {
text-decoration: none;
&:hover {
text-decoration: underline @color-contrast;
}
}
}
.project-title{
font-size: @font-size-big;
font-family: @font-factuelle-bold;
text-align: left;
margin-bottom: 20px;
line-height: 0.9;
letter-spacing: -0.03em;
font-weight: normal;
text-decoration: dashed;
a {
color: @color-contrast;
}
}
a.category{
font-family: @font-factuelle;
font-size: 12px;
line-height: 36px;
padding-bottom: 5px;
color: black !important;
letter-spacing: 0.05em;
}
a.category:after{
content: " \2193";
}
a.category:hover:after{
content: " \2192";
}
a.category:hover{
border-bottom: 1px solid black;
}
a.category-none{
font-size: 12px;
line-height: 36px;
}
.project-description-from-the-readme{
font-size: @font-size-medium;
text-align: left;
margin-bottom: 2 * @h-unit;
letter-spacing: -0.03em;
font-weight: normal;
}
// iceberg pictures -------------------------------------------------
.iceberg{
margin-right:15px;
// background:green;
}
.iceberg-pict{
// border: solid 1px gray;
width: 70px;
}
.iceberg-pict-big{
// border: solid 1px gray;
width:250px;
}
// commits -------------------------------------------------
.commit-list{
background-size: 1px 1px;
background-position: 100px 0,0 0;
background-repeat:repeat-y;
a, a:visited, a:active {
color: #005580;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
}
.grappe (@t: 5px, @r: 5px,@b: 5px,@l: 5px) {
border: solid 1px;
padding : @t @r @b @l;
margin-bottom: -1px;
margin-right: -1px;
}
.ellipse {
clear: both;
width: 5px;
margin: auto;
margin-left: 36px;
border-left: 1px solid black;
}
.commit {
padding: 6px 0;
border-top: 1px dotted @color-contrast-light;
p {
margin-bottom: 0;
}
}
.commit-metadata {
margin-left: 5em;
}
.commit-author{
font-size : 12px;
font-family: @font-factuelle-bold;
text-transform: uppercase;
}
.commit-author-said {
font-family: @font-factuelle-bold;
font-size: 12px;
margin-left: 7px;
color: grey;
}
.commit-message{
font-size: 16px;
line-height: 24px;
font-family: @font-secondary;
}
.commit-date {
font-family:@font-factuelle-bold;
margin-top: 6px;
font-size: 10px;
}
// project-detail -------------------------------------------------
.left-2{
float: left;
margin: 0 auto;
width: 100%;
}
.right-1{
width:95%;
float: left;
margin: 0 auto;
}
h1#project-detail-title {
float: left;
margin-bottom: 0;
font-family: @font-factuelle-bold;
}
ul#project-detail-nav {
margin-top: 1em;
margin-right: 13em;
li {
display: inline;
margin-left: 1em;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
div#project-detail .iceberg,
div#project-detail .commit-list {
float: left;
margin-right: 20px;
width: 100%;
}
div#project-detail-head h1.repo_slug {
float: left;
}
a.gitclone {
background-color: @color-contrast-light;
font-family: @font-default;
padding: 7px 5px 2px 5px;
font-size: 18px;
&:hover {
background-color: white;
outline: 1px solid @color-contrast-light;
}
}
div#project-detail-body {
clear: both;
}
.project-detail-img-file {
margin-top: 20px;
}
.project-detail-file-name{
font-family:@font-default;
font-size: 18px;
text-align: left;
font-weight: normal;
float: left;
margin-right: @h-unit / 2;
}
.project-detail-file-mime{
font-family:@font-secondary;
font-size: 14px;
text-align: left;
font-weight: normal;
}
.project-detail-blob-size{
font-family:@font-secondary;
font-size: 14px;
text-align: left;
font-weight: normal;
}
// about page -------------------------------------------------
#about-general{
width: 520px;
margin-top: 20px;
margin-left: 20px;
height: 100%;
font-family: @font-default;
font-size: @font-size-medium;
text-align: left;
color: @color-text;
}
.contact{
color: blue;
}
.osp-about-texts{
color: red;
}
#about-members{
float : left;
width: 520px;
margin-top: 20px;
margin-left: 40px;
font-family: @font-default;
font-size: @font-size-medium;
text-align: left;
color: @color-text;
}
div#info-page{
width: 95%;
font-family: Bagnard;
dt{
font-family: @font-default;
font-size: 16px;
margin-top: @v-unit;
}
p, dd{
font-family: @font-secondary;
font-size: 16px;
line-height: 24px;
a{
font-family: @font-default;
font-size: 12px;
}
}
h1 {
border-top: 1px solid @color-contrast;
padding-top: 1em;
font-family: Belgika-40;
}
h2 {
color: @color-contrast;
margin-top: 1em;
font-family: Belgika-40;
}
h3 {
font-size: 16px;
}
h1 + br + h2 {
margin-top: 0;
}
ul{
-moz-column-count: 2;
column-count: 2;
li{
padding-top: 2px;
padding-bottom: 2px;
display: inline-block;
width: 100%;
}
li:before{
content: "— \20 ";
}
}
}
// foundry page -------------------------------------------------
.foundry-infos {
width: 100% !important;
margin-bottom: 1em;
display: flex;
}
.foundry-infos div {
width: 50%;
}
.foundry-infos .more {
display: none;
}
.font {
border-top: 2px solid @color-contrast;
border-bottom: 2px solid @color-contrast;
clear: both;
padding: 1em 0;
}
.font + .font {
border-top: initial;
}
.font-row {
display: flex;
}
.font-row + .font-row {
//display: block;
}
.foundry-playground h2 {
margin-bottom: 0.5em;
white-space: nowrap;
}
.foundry-playground select {
margin-top: -2px;
margin-left: 1em;
background-color: transparent;
border: 0;
font-family : 'belgika-16';
color: black !important;
background-color: white;
outline: 1px solid black;
padding: 0.5em;
height: 2em;
}
.font-icons {
width: 1em;
text-align: center;
align-self: flex-start;
//float: left;
a {
font-family: Monospace;
font-size: 25px;
text-decoration: none;
border-radius: 100%;
padding: 3px;
width: 20px;
height: 20px;
display: inline-block;
margin-bottom: 4px;
border: 1px solid @color-contrast;
color: @color-contrast;
}
a[title="read more"] {
font-size: 19px;
}
a:hover {
background-color: @color-contrast;
color: white;
}
}
.font-preview {
margin-left: 2em;
}
.sentence {
transition: flex 1s;
font-size: 5em;
line-height: 1em;
margin-bottom: 0;
display: inline-block;
//word-break: break-word;
margin-left: 0.5em;
height: 100px;
overflow-x: scroll;
overflow-y: auto;
//float: left;
//width: 85%;
white-space: nowrap;
flex-basis: 10%;
}
.sentence:focus-within {
outline: 1px dotted @color-contrast;
}
.font .images {
transition: height 1s, flex 1s;
margin-left: 1.5em;
padding-left: 1.5em;
border-left: 1px solid black;
width: 100px;
flex-grow: 1;
height: 300px;
}
.font .images {
position: relative;
flex-basis: 10%;
min-width: 100px;
overflow: auto;
box-sizing: border-box;
}
.images-list {
width: max-content;
display: flex;
align-items: baseline;
height: 100%;
}
.sentence + .images {
flex-grow: 0;
height: 100px;
}
.font .images img {
height: 100%;
float: left;
}
.collapsed {
flex-grow: 0 !important;
}
.expanded {
flex-grow: 1 !important;
}
.images.expanded {
height: 300px;
}
.font .last-commit {
flex-grow: 1;
}
.foundry-contribute {
margin-top: 2em;
p, ul {
margin: 0;
}
li:before {
content: "– ";
}
}
//research-tracks page
div#research-tracks {
section#intro {
margin-top: 50px;
width: 100%;
//min-height: 500px;
h1{
//font-family: @font-factuelle-bold;
font-size: 48px;
margin-bottom: @v-unit*2;
text-align: center;
}
img{
width: 60%;
margin-left: 12%;
margin-top: -5%;
}
div.half:first-child {
text-align: center;
}
}
div.half {
float: left;
width: 50%;
box-sizing: border-box;
}
div.half:first-child {
padding-right: 1em;
}
div.half + div.half {
padding-left: 1em;
}
div.half img {
width: 100%;
}
p, li {
font-family: @font-secondary;
font-size: 18px;
line-height: 24px;
}
li:before {
content: "– ";
}
b{
font-family: @font-factuelle;
}
section#secondary-menu{
clear: both;
margin-bottom: 2em;
height: 60px;
width: 104%;
margin-left: -2%;
background-color: @color-author;
#gradient > .radial(@color-author, @color-date);
//background-blend-mode: overlay;
div{
width:21%;
margin: 2%;
float: left;
//border-right: 1px solid grey;
h3 {
text-align: center;
}
h3 a{
//color: white;
font-family: @font-factuelle-bold;
}
}
}
section.full-width{
margin-top: @v-unit*2;
margin-bottom: @v-unit*2;
padding-bottom: @v-unit*3;
width: 100%;
float: left;
border-bottom: 1px solid yellow;
}
} // end research-track
// pre-spaced text (code) -------------------------------------
pre, code {
font-family: 'NotCourierSans';
white-space: pre-wrap;
}
pre {
margin-bottom: @h-unit;
}
// thumbnails -------------------------------------------------
div.thumbnail.folder{
border-bottom: 1px solid black;
div.thumb{
img{
width: @v-unit*2;
height:@v-unit*2;
float: left;
}
}
}
div.thumbnail.preview{
border-bottom: 1px dotted black;
h5 {
display: inline;
}
img, svg {
display: inline;
}
p{
margin-bottom:10px;
font-size: 14px;
color: grey;
display: inline;
font-family: @font-factuelle !important;
}
a { text-decoration: none; }
}
div.thumb{
min-height: 25px;
}
a.folder-name{
padding-left: 10px;
margin-bottom: -5px;
}
a.file-name{
}
.thumbnails {
list-style: none;
.clearfix();
}
.thumbnails > li {
margin: 0 0 18px 20px;
}
.thumbnail {
display: block;
padding: 4px;
line-height: 1;
}
// Images and captions
.thumbnail > img {
display: block;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
ul#tree{
padding: 15px;
}
// breadcrumbs ------------------------------------------------
.breadcrumb {
clear: both;
font-family: @font-secondary;
}
.breadcrumb li {
display: inline-block;
}
// modals -----------------------------------------------------
.close {
float: right;
text-shadow: 0 1px 0 rgba(255,255,255,1);
font-size: @font-size-big;
line-height: @v-unit;
.opacity(20);
&:hover {
text-decoration: none;
.opacity(40);
cursor: pointer;
}
}
// Recalculate z-index where appropriate
.modal-open {
.dropdown-menu { z-index: 2050; }
.dropdown.open { *z-index: 2050; }
.popover { z-index: 2060; }
.tooltip { z-index: 2070; }
}
// Background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: @color-author;
#gradient > .radial(@color-author, @color-date);
// Fade for backdrop
&.fade { opacity: 0; }
}
.modal-backdrop,
.modal-backdrop.fade.in {
.opacity(80);
}
// Base modal
.modal {
position: fixed;
top: 10%;
z-index: 1050;
max-height: 500px;
overflow: auto;
width: 90%;
margin: 0 auto;
background-color: @color-background;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
*border: 1px solid #999; /* IE6-7 */
.background-clip(padding-box);
&.fade {
.transition(e('opacity .3s linear, top .3s ease-out'));
top: -25%;
}
&.fade.in { top: 50%; }
}
.modal-header {
padding: @v-unit @h-unit;
border-bottom: 1px solid #eee;
h2{
line-height: 30px;
}
}
// Body (where all modal content resises)
.modal-body {
padding: @v-unit @h-unit;
}
// Remove bottom margin if need be
.modal-body .modal-form {
margin-bottom: 0;
}
// Footer (for actions)
.modal-footer {
padding: @v-unit @h-unit;
margin-bottom: 0;
border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @color-background);
.clearfix();
.btn {
float: right;
margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}
}
footer{
bottom: 0;
margin-top: @v-unit*4;
p{
font-size: 10px;
}
}
// plugins -----------------------------------------------------
// fancybox -----------------------------------------------------
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('../js/fancyBox/source/fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('../js/fancyBox/source/fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('../js/fancyBox/source/blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* fancybox Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url('../js/fancyBox/source/fancybox_overlay.png');
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* fancybox Title helper */
.fancybox-title {
visibility: hidden;
//font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-align: center;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
background: none;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
/*fancybox Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('../js/fancyBox/source/fancybox_sprite@2x.png');
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url('../js/fancyBox/source/fancybox_loading@2x.gif');
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}
}
// media queries -----------------------------------------------------
@media only screen and (min-width : 384px){
}
@media only screen and (min-width : 512px){
ul.feedEkList{
li{
width: 100%;
}
}
.project, #home-info, div#info-page, .right-1, .left-2{
width: 90%;
}
}
@media only screen and (min-width : 768px){
body{
padding: 1.5em;
}
#menu-wrapper{
ul#menu{
margin-top: @v-unit*2;
li{
display: inline;
color: blue;
}
li:nth-of-type(2){
margin-top:@v-unit*2;
margin-left: 5px;
}
}
}
#menu {
h1{
float: none;
}
li{
padding-top: @v-unit;
}
}
div#on-the-table-feed{
ul.feedEkList{
li{
min-width: 45%;
margin-right: 2%;
margin-left: 0%;
p{
img{
width: 100%;
}
}
div.itemContent{
border-bottom: none;
padding-bottom: none;
display: block;
}
}
}
}
.project{
width: 45%;
margin-right: 2%;
margin-left: 0%;
border-top: none;
min-height: 580px;
}
.left-2{
width: @col-width*2+@v-unit*2;
margin: 0;
margin-right: @v-unit*2;
}
.right-1{
width:@col-width;
margin: 0;
margin-right: @v-unit*2;
}
#home-info{
width: @col-width;
margin: 0;
margin-right: @v-unit*2;
}
#home-infos{
width: 50%;
}
#project-detail {
#project-detail-iceberg{
div.iceberg-thumbnail{
width: 200px;
height: 125px;
}
}
}
div#info-page{
width: @col-width*2+@v-unit*2;
margin: 0;
}
.modal {
top: 50%;
left: 50%;
width: 560px;
margin: -250px 0 0 -280px;
}
}
@media only screen and (min-width : 1024px){
.breadcrumb{
li:nth-child(5){
display: none;
}
}
body{
padding: 2em;
}
div#on-the-table-feed{
ul.feedEkList{
li{
width:@col-width;
min-width: @col-width;
margin-right: @h-unit*2;
p{
img{
width: 100%;
}
}
}
}
}
.project{
width: @col-width;
margin-right: @v-unit*2;
}
}
@media only screen and (min-width : 1280px){
.left-2{
width: @col-width*2.5+@v-unit*4;
div#project-detail-readme{
width:45%;
}
#project-detail-files{
width: @col-width;
margin-right: @v-unit*2;
float:left;
}
}
}