FOSDEM-2025-keynote/lib/js/extra/headjs/site/assets/css/common.less

478 lines
8.1 KiB
Text

/* css shortcuts
****************/
.group:before, .group:after {
content: ""!important;
display: table!important;
}
.group:after {
clear: both!important;
}
.group {
zoom: 1!important;
overflow: visible;
}
.float-l {
float: left;
}
.float-r {
float: right;
}
.clear-l {
clear: left;
}
.clear-r {
clear: right;
}
.clear-b {
clear: both;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.relative.top, .absolute.top {
top: 0;
}
.relative.bottom, .absolute.bottom {
bottom: 0;
}
.relative.right, .absolute.right {
right: 0;
}
.relative.left, .absolute.left {
left: 0;
}
.fixed {
position: fixed;
}
.text-c {
text-align: center;
}
.text-l {
text-align: left;
}
.text-r {
text-align: right;
}
.inline-block {
display: inline;
display: inline-block;
}
/* Flattr
*********/
.flattr {
position: absolute;
margin: 10px 5px 0;
.lt-1280 & {
display: none;
}
}
/* Responsive Shortcuts
***********************/
.mobile-hidden {
.mobile & {
display: none !important;
}
.no-mobile & {
display: normal !important;
}
}
.mobile-visible {
.mobile & {
display: normal !important;
}
.no-mobile & {
display: none !important;
}
}
/* Trick for centering objects
* http://css-tricks.com/equidistant-objects-with-css/
******************************************************/
.equidistant(@width, @height) {
text-align: justify;
div {
width: @width;
height: @height;
display: inline-block;
vertical-align: top;
}
&:after {
content: '';
width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
display: inline-block;
}
}
.equidistant-download {
.equidistant(165px, 210px)
}
.equidistant-social {
.equidistant(165px, 150px)
}
.authors {
width: 200px;
.lt-800 & {
display: none;
}
}
/* quick hide elements
**********************/
.lt-1440 .hide-1440 {
display: none;
}
.lt-1280 .hide-1280 {
display: none;
}
.lt-1024 .hide-1024 {
display: none;
}
.lt-800 .hide-800 {
display: none;
}
.lt-768 .hide-768 {
display: none;
}
.lt-640 .hide-640 {
display: none;
}
.lt-480 .hide-480 {
display: none;
}
/* some code from bootstrap
****************************/
.code-example {
position: relative;
margin: 15px 0;
padding: 39px 19px 14px;
*padding-top: 19px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* Echo out a label for the example
***********************************/
.code-example:after {
content: attr(data-title);
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
pre {
white-space: pre-wrap;
}
ol.linenums {
margin: 0 0 0 -10px;
}
.lt-ie8 ol.linenums {
margin: 0 0 0 25px;
}
.code-example dt {
font-weight: bold;
}
/* Buttons
*********/
.button,
.button:visited,
.button:link {
display: inline-block;
color: white;
text-decoration: none;
font-family: "Arial Narrow", Arial;
font-variant: small-caps;
}
.button {
background-color: black;
padding: 5px 15px;
font-size: 13px;
/* Size Variations */
/* Form Variations */
/* Color Variations */
}
.button:hover {
background-color: #6A6A6A;
}
.button.rounded {
border-radius: 5px;
}
.button.large {
font-size: 22px;
padding: 10px 15px;
}
.button.small {
font-size: 11px;
padding: 5px 10px;
}
/* Common
*********/
html {
/* Keeps pages from flickering when going from page with scrollbar to page without */
overflow-y: scroll;
}
body {
background: linear-gradient(to bottom, #FFFFFF 0%, #F1F1F1 100%) repeat scroll 0 0 #F9F9F9;
background-color: #F9F9F9;
/*font-size: 14px;*/
font: 13px/1.42857 'Courier New', 'Lucida Console', monospace, Verdana;
/*font: 14px/1.42857 Helvetica, Arial, "Lucida Grande", sans-serif;*/
text-rendering: optimizeLegibility;
margin: 0;
padding: 0;
}
img {
border: 0;
}
img.logo {
width: 100%;
border-radius: 5px;
}
.github-fork {
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
a:link, a:visited {
color: inherit;
}
a:active, a:hover, a:focus {
color: #777777;
}
/* Main Menu
**********/
.menu {
.selected {
color: #07AA06;
text-decoration: underline;
}
a {
&:hover {
.selected;
}
text-decoration: none;
}
.home {
#index-page & {
.selected;
}
}
.blog {
#blog-page & {
.selected;
}
}
.api {
#documentation-page &,
.api-section & {
.selected;
}
}
.unit {
#unit-page & {
.selected;
}
}
.download {
#download-page & {
.selected;
}
}
.resources {
#resources-page & {
.selected;
}
}
}
ul.menu {
padding: 0;
}
.lt-640 ul.menu {
text-align: left;
}
.menu li {
float: left;
list-style-type: none;
padding: 0 20px 0 0;
}
.lt-640 .menu li {
padding: 0 0 10px 0;
display: block;
color: white;
line-height: 1;
padding: 5px;
width: 100%;
font-weight: bold;
}
/* Site Content
**************/
.container {
position: relative;
width: auto;
max-width: 940px;
margin: 0 auto;
}
.lt-ie7 .container {
width: 940px;
}
.container.main {
background-color: #FFFFFF;
}
.lt-ie8 .container.main {
width: 905px;
}
.intro {
background-color: #252525;
border-radius: 10px;
box-shadow: 3px 3px 5px #CCCCCC;
color: #07AA06;
font-family: 'Lucida Console';
padding: 10px;
}
.featured {
img {
-webkit-border-radius: 3px;
border-radius: 3px;
}
a {
padding:0 5px 0 0;
}
}
/* Up button */
a.up {
background-color: #CCCCCC;
border-radius: 30px 30px 0 0;
bottom: 0;
margin: 0 0 0 -80px;
padding: 5px 5px 0;
position: fixed;
text-decoration: none;
}
hr {
border: 1px solid #AA0000;
color: #AA0000;
}
h1, h2, h3 {
color: #777777;
/*font-variant: small-caps;*/
}
small {
font-size: 12px;
}
fieldset label {
display: block;
}
fieldset li:hover {
background-color: #ccc;
}
fieldset li {
list-style-type: none;
}
fieldset ol {
padding: 0;
}
.breakpoint {
background-color: white;
border: 1px outset black;
border-radius: 10px 10px 10px 10px;
color: black;
display: inline-block;
font-family: Georgia;
margin: 2px 0;
padding: 0 4px 2px 0;
}
.breakpoint a {
color: black;
padding: 0 5px 0 0;
}
.breakpoint span {
padding: 0 0 0 5px;
}
.breakpoint:hover {
background-color: #ccc;
}
.tagline * {
color: white;
font-variant: normal;
}
.tagline h1 {
font-family: cursive;
font-size: 45px;
}
.tagline h2,
.tagline h3 {
font-size: 1.15em;
}
/*MOOT*/
#moot {
max-width: none;
}
/* Sprites */
.sprite.social {
background-image: url(/site/assets/img/social/sprite-social.png);
width: 100px; height: 100px;
display: block;
margin: 0 auto;
&.github { background-position: 0 0; }
&.github:hover, &.github:active, &.github-color { background-position: 0 -105px; }
&.stackoverflow { background-position: 0 -421px; }
&.stackoverflow:hover, &.stackoverflow:active { background-position: 0 -526px; }
&.twitter { background-position: 0 -631px; }
&.twitter:hover, &.twitter:active { background-position: 0 -736px; }
&.uservoice { background-position: 0 -841px; }
&.uservoice:hover, &.uservoice:active { background-position: 0 -946px; }
&.nuget { background-position: 0 -210px; }
&.qunit { background-position: 0 -315px; }
&.zip { background-position: 0 -1051px; }
}