mirror of
https://gitlab.com/buildroot.org/buildroot.git
synced 2026-08-08 00:20:38 -09:00
docs/website: New website
This patch introduces a new buildroot website based on a modern flat layout inspired by material design. Each page of the old website is converted to the new css/layout, the big bump is in main page which is completely rewritten. Content of the old website is copied more or less verbatim, planning to add more content in the future. Signed-off-by: Angelo Compagnucci <angelo.compagnucci@gmail.com> Signed-off-by: Thomas Petazzoni <thomas.petazzoni@free-electrons.com> Signed-off-by: Peter Korsgaard <peter@korsgaard.com>
This commit is contained in:
Angelo Compagnucci
committed by
Peter Korsgaard
Peter Korsgaard
parent
a597e3c676
commit
97ab48658d
260
docs/website/css/main.css
Normal file
260
docs/website/css/main.css
Normal file
@@ -0,0 +1,260 @@
|
||||
/*
|
||||
* Author: Carlos Alvarez
|
||||
* URL: http://alvarez.is
|
||||
*
|
||||
* Project Name: FLATTY - Free Bootstrap 3 Theme
|
||||
* Version: 1.0
|
||||
* URL: http://blacktie.co
|
||||
*/
|
||||
|
||||
body {
|
||||
background-color: #f2f2f2;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Titles */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #95a5a6;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #95a5a6;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ellipsis p {
|
||||
margin-bottom:10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: #3498db;
|
||||
word-wrap: break-word;
|
||||
|
||||
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
|
||||
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
|
||||
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
|
||||
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
|
||||
transition: color 0.1s ease-in, background 0.1s ease-in;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #7b7b7b;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a:before,
|
||||
a:after {
|
||||
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
|
||||
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
|
||||
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
|
||||
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
|
||||
transition: color 0.1s ease-in, background 0.1s ease-in;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
background-color: #3498db;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-brand {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav > li > a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Helpers */
|
||||
|
||||
.mt {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.nh {
|
||||
margin-top: 80px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: 42px;
|
||||
font-size: 18px;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin: 8px;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
|
||||
/* HeaderWrap */
|
||||
#headerwrap {
|
||||
/* background: url(../img/bg01.jpg) no-repeat center top; */
|
||||
background-color: #3498db;
|
||||
margin-top: -20px;
|
||||
padding-top:120px;
|
||||
background-attachment: relative;
|
||||
background-position: center center;
|
||||
min-height: 400px;
|
||||
max-height: 800px;
|
||||
width: 100%;
|
||||
|
||||
-webkit-background-size: 100%;
|
||||
-moz-background-size: 100%;
|
||||
-o-background-size: 100%;
|
||||
background-size: 100%;
|
||||
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#headerwrap h1 {
|
||||
color: white;
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
#menubutton {
|
||||
max-height: 50px;
|
||||
margin-top: 6px;
|
||||
padding-top: 15px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.panel-sponsor {
|
||||
min-height: 300px;
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.navbar-collapse.collapse {
|
||||
display: none !important;
|
||||
}
|
||||
.navbar-collapse.collapse.in {
|
||||
display: block !important;
|
||||
}
|
||||
.navbar-header .collapse, .navbar-toggle {
|
||||
display:block !important;
|
||||
}
|
||||
.navbar-header {
|
||||
float:none;
|
||||
}
|
||||
.navbar-collapse {
|
||||
overflow:hidden;
|
||||
}
|
||||
#menubutton {
|
||||
margin-right: 40px;
|
||||
width: 45px;
|
||||
}
|
||||
.text-shrink {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:767px) {
|
||||
#menubutton {
|
||||
max-height: 50px;
|
||||
margin-top: 6px;
|
||||
padding-top: 15px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* entire container, keeps perspective */
|
||||
.flip-container {
|
||||
perspective: 1000;
|
||||
}
|
||||
/* flip the pane when hovered */
|
||||
.flip-container:hover .flipper, .flip-container.hover .flipper {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.flip-container, .front, .back {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
/* flip speed goes here */
|
||||
.flipper {
|
||||
transition: 0.6s;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* hide back of pane during swap */
|
||||
.front, .back {
|
||||
backface-visibility: hidden;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* front pane, placed above back */
|
||||
.front {
|
||||
z-index: 2;
|
||||
/* for firefox 31 */
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
/* back, initially hidden pane */
|
||||
.back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.back img {
|
||||
-moz-transform: scaleX(-1);
|
||||
-o-transform: scaleX(-1);
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
filter: FlipH;
|
||||
-ms-filter: "FlipH";
|
||||
}
|
||||
|
||||
.panel-box p {
|
||||
height: 1.5em;
|
||||
}
|
||||
Reference in New Issue
Block a user