new theme, a bit of aligning, a bit of sutomasibility for further themes
This commit is contained in:
parent
dba71eaa20
commit
2a36eab2e3
12 changed files with 1031 additions and 1224 deletions
56
style/blue.css
Normal file
56
style/blue.css
Normal file
|
@ -0,0 +1,56 @@
|
|||
nav {
|
||||
background-color: #91d8f8;
|
||||
}
|
||||
|
||||
nav > a {
|
||||
margin: 10px 0 10px 10px; /*to collapse margins*/
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
nav > a:last-child {
|
||||
margin: 10px; /*to collapse margins*/
|
||||
}
|
||||
|
||||
nav > a:hover {
|
||||
background-color: #bfeaff;
|
||||
}
|
||||
|
||||
nav > a.current,
|
||||
nav > a.current:hover {
|
||||
background-color: #cde6ea;
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.mainContainer img {
|
||||
box-shadow: 2px 3px 6px 2px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
font-size: 16px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.mainContainer h1 {
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.mainContainer h2 {
|
||||
font-size: 28px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.mainContainer h3 {
|
||||
font-size: 24px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.mainContainer h4 {
|
||||
font-size: 20px;
|
||||
color: inherit;
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
.header {
|
||||
#header {
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
|
||||
|
@ -6,7 +6,7 @@
|
|||
|
||||
background-color: rgba(10, 10, 10, .2);
|
||||
|
||||
line-height: 40px;
|
||||
line-height: 40px; /*isn't it too much?*/
|
||||
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
|
@ -40,92 +40,13 @@ nav {
|
|||
background-color: rgba(200,200,200,.2);
|
||||
}
|
||||
|
||||
.top-nav__item {
|
||||
display: block;
|
||||
|
||||
float: left;
|
||||
|
||||
nav > a {
|
||||
padding: 10px 15px 12px;
|
||||
|
||||
border-radius: 2px;
|
||||
|
||||
transition: .2s ease;
|
||||
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.top-nav__item:hover {
|
||||
nav > a:hover {
|
||||
background-color: #3ce;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
padding: 20px;
|
||||
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mainContainer h1 {
|
||||
margin: 10px 0 5px 0;
|
||||
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.mainContainer h2 {
|
||||
margin: 10px 0 5px 0;
|
||||
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.mainContainer h3 {
|
||||
margin: 10px 0 5px 0;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.mainContainer h4 {
|
||||
margin: 10px 0 5px 0;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
.mainContainer p {
|
||||
margin: 5px 5px 0 10px;
|
||||
|
||||
}
|
||||
|
||||
.mainContainer strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mainContainer ul,
|
||||
.mainContainer ol {
|
||||
margin: 5px 5px 10px 10px;
|
||||
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
.mainContainer ul li {
|
||||
margin: 5px 5px 0 15px;
|
||||
}
|
||||
|
||||
.mainContainer img {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*!** end-reset ***/
|
||||
|
|
|
@ -1,15 +1,11 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
width: 1024px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mainContainer > h1 {
|
||||
text-align: center;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
@ -21,7 +17,6 @@ nav {
|
|||
nav > a {
|
||||
flex: auto;
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
|
@ -50,10 +45,6 @@ nav > a:visited {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
.margin {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
nav > a > div {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
|
@ -61,26 +52,65 @@ nav > a > div {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.thumbnails {
|
||||
.mainContainer {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mainContainer h1 {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.thumbnails > a {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 25%;
|
||||
height: 200px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.thumbnails > a > div {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0 5px 0;
|
||||
font-size: 24px;
|
||||
padding-top: 20px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.mainContainer h2 {
|
||||
margin: 10px 0 5px 0;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.mainContainer h3 {
|
||||
margin: 10px 0 5px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.mainContainer h4 {
|
||||
margin: 10px 0 5px 0;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.mainContainer p {
|
||||
margin: 5px 5px 0 10px;
|
||||
|
||||
}
|
||||
|
||||
.mainContainer strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mainContainer ul,
|
||||
.mainContainer ol {
|
||||
margin: 5px 5px 10px 10px;
|
||||
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
.mainContainer ul li {
|
||||
margin: 5px 5px 0 15px;
|
||||
}
|
||||
|
||||
.mainContainer img,
|
||||
.mainContainer iframe {
|
||||
margin: 15px 0 15px 15px;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
|
@ -116,4 +146,8 @@ nav > a > div {
|
|||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px;
|
||||
}
|
|
@ -1,15 +1,3 @@
|
|||
* {
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue