Made Leggero-v2 responsive + tweaks
This commit is contained in:
MarcThibeault
parent
d600ec2e46
commit
80c06d9faa
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<title>{$flatpress.title|tag:wp_title:'«'}</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset={$flatpress.charset}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{action hook=wp_head}
|
||||
</head>
|
||||
|
||||
|
||||
@ -52,8 +52,9 @@ body#inline-body input {
|
||||
|
||||
#body-container {
|
||||
text-align: left;
|
||||
font-size: 0.85em;
|
||||
width: 80% !important;
|
||||
width: 80%px; /* fix for I.E. */
|
||||
min-width: 1000px;
|
||||
margin: 0 auto 0 auto;
|
||||
padding: 5px;
|
||||
background-color: rgba(255,255,255,1);
|
||||
|
||||
@ -12,18 +12,32 @@ Module: style.css
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* ===== COLUMN ===== */
|
||||
#column {
|
||||
float: right;
|
||||
width: 230px !important;
|
||||
width: 230px;
|
||||
font-size: 80% !important;
|
||||
/* ===== NORMAL DESIGN ===== */
|
||||
@media (min-width: 720px) {
|
||||
/* ===== COLUMN ===== */
|
||||
#column {
|
||||
width: 20%;
|
||||
display: inline-block;
|
||||
font-size: 75%;
|
||||
height:1%;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE DESIGN ===== */
|
||||
@media (max-width: 719px) {
|
||||
/* ===== COLUMN ===== */
|
||||
#column {
|
||||
text-align: center;
|
||||
float: center;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
font-size: 100%;
|
||||
height:1%;
|
||||
margin: 5px auto;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
#column h4 {
|
||||
|
||||
@ -35,11 +35,15 @@ p { margin: .5em 0 }
|
||||
img { border: none }
|
||||
|
||||
blockquote {
|
||||
width: 90%;
|
||||
color: #666;
|
||||
width: 80%;
|
||||
color: #444;
|
||||
background-color: #ddd;
|
||||
margin: 1em 1em;
|
||||
padding: 0 10px;
|
||||
border-left: 5px solid #bbb
|
||||
border-left: 5px solid #aaa;
|
||||
border-right: 1px solid #aaa;
|
||||
border-top: 1px solid #aaa;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
@ -48,8 +52,7 @@ pre, code {
|
||||
}
|
||||
|
||||
pre {
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border: 1px dashed #555;
|
||||
background-color: #efefef;
|
||||
|
||||
overflow: auto;
|
||||
@ -118,7 +121,7 @@ h1 {
|
||||
/* Title of the blog */
|
||||
font-size: 2.2em;
|
||||
letter-spacing: 2px;
|
||||
margin: 2em 0 0 0;
|
||||
margin: 1em 0 1em 0;
|
||||
}
|
||||
|
||||
h2 { } /* see h2.date */
|
||||
@ -133,29 +136,14 @@ h3 {
|
||||
|
||||
h4 { font-size: 1.2em; }
|
||||
|
||||
|
||||
|
||||
/* ===== DIV CONTAINER ALL ELEMENTS BLOCK ===== */
|
||||
#body-container {
|
||||
text-align: left;
|
||||
width: 1000px !important;
|
||||
width: 1000px; /* fix for I.E. */
|
||||
margin: 0 auto 0 auto;
|
||||
padding: 5px;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== HEAD ===== */
|
||||
#head {
|
||||
font-family: 'book antiqua', georgia, garamond, times, 'times new roman', serif;
|
||||
padding: 25px 25px 25px 25px;
|
||||
margin: 10px;
|
||||
/*background: #aa4142 url('../imgs/shade.png1') repeat-x;*/
|
||||
background: rgba(184,60,50,0.7);
|
||||
border: #bbb 1px solid;
|
||||
background: rgba(184,60,50,0.4);
|
||||
border: black 1px solid;
|
||||
border-radius: 10px ;
|
||||
}
|
||||
|
||||
@ -170,6 +158,7 @@ h4 { font-size: 1.2em; }
|
||||
|
||||
|
||||
|
||||
|
||||
/* ===== DIV CONTAINER "MAIN" ===== */
|
||||
#outer-container {
|
||||
position: relative;
|
||||
@ -178,21 +167,63 @@ h4 { font-size: 1.2em; }
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/* ===== NORMAL DESIGN ===== */
|
||||
@media (min-width: 720px) {
|
||||
|
||||
body { margin: 10px 0 10px 0 }
|
||||
|
||||
/* ===== MAIN ===== */
|
||||
#main h4 { margin: 2em 0 0 0}
|
||||
/* ===== BODY CONTAINER ===== */
|
||||
#body-container {
|
||||
text-align: left;
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
margin: 0 auto 0 auto;
|
||||
padding: 5px;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#main {
|
||||
/* ===== MAIN ===== */
|
||||
#main h4 { margin: 2em 0 0 0}
|
||||
|
||||
#main {
|
||||
float:left;
|
||||
position: relative;
|
||||
width: 65% !important;
|
||||
width: 65%;
|
||||
font-size: 100%;
|
||||
padding: 25px;
|
||||
margin: 20px;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
background-color: rgba(255,255,255,0.9);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE DESIGN ===== */
|
||||
@media (max-width: 719px) {
|
||||
|
||||
body { margin: 0 0 0 0 }
|
||||
|
||||
/* ===== BODY CONTAINER ===== */
|
||||
#body-container {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin: 0 auto 0 auto;
|
||||
padding-top: 5px;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* ===== MAIN ===== */
|
||||
#main h4 { margin: 2em 0 0 0}
|
||||
|
||||
#main {
|
||||
float: center;
|
||||
width: 90%;
|
||||
font-size: 100%;
|
||||
padding: 15px;
|
||||
margin: 10px auto;
|
||||
background-color: rgba(255,255,255,0.9);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
#main p { line-height: 1.5em; margin-top: 1.2em; }
|
||||
@ -280,10 +311,10 @@ h4 { font-size: 1.2em; }
|
||||
/* ===== FOOTER ===== */
|
||||
#footer {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
font-size: 80%;
|
||||
color: #555;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
border-top: #bbb 1px solid
|
||||
}
|
||||
|
||||
* {
|
||||
|
||||
@ -20,9 +20,6 @@ Module: style.css
|
||||
/* imports column (where widgets usually go) rules */
|
||||
@import url(column.css);
|
||||
|
||||
/* defines rules specific to the front page */
|
||||
body { margin: 10px 0 0 0 }
|
||||
|
||||
#comments li.comment-admin {
|
||||
padding:1em
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user