forked from data.coop/membersystem
Media queries
This commit is contained in:
parent
565018ea30
commit
62956deb1d
|
@ -27,19 +27,26 @@ p, h1, h2, h3, h4, h5, h6 {
|
|||
:root {
|
||||
/* Colors */
|
||||
--light : #fff;
|
||||
--light-dust : #fefefe;
|
||||
--light-dust : #fcfcfc;
|
||||
--dust : #f1f1f1;
|
||||
--dark-dust : #bfbfbf;
|
||||
--twilight : #404040;
|
||||
--dark : #323232;
|
||||
--dark : #2a2a2a;
|
||||
--custard : #f0dcac;
|
||||
--splash : #4b3aba;
|
||||
|
||||
/* Sizes */
|
||||
--space : 12px;
|
||||
--double-space : calc(--space * 2);
|
||||
--half-space : calc(--space / 2);
|
||||
--quarter-space : calc(--space / 4);
|
||||
--double-space : calc(var(--space) * 2);
|
||||
--half-space : calc(var(--space) / 2);
|
||||
--quarter-space : calc(var(--space) / 4);
|
||||
--outer-space : var(--double-space);
|
||||
}
|
||||
|
||||
@media (min-width: 1380px) {
|
||||
:root {
|
||||
--outer-space : 15%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
|
@ -52,7 +59,7 @@ body {
|
|||
|
||||
header {
|
||||
display : flex;
|
||||
padding : 12px 24px;
|
||||
padding : var(--double-space) var(--outer-space);
|
||||
background : var(--light);
|
||||
justify-content : space-between;
|
||||
align-items : center;
|
||||
|
@ -62,23 +69,28 @@ header > h1 {
|
|||
font-size : 1.44em;
|
||||
}
|
||||
|
||||
header > div.logout {
|
||||
padding : 6px;
|
||||
header > a.logout {
|
||||
padding : 6px 12px;
|
||||
border-radius : 6px;
|
||||
background : var(--twilight);
|
||||
text-decoration : none;
|
||||
color : var(--dust);
|
||||
}
|
||||
|
||||
header > div.logout a {
|
||||
padding : 6px;
|
||||
header > a.logout:hover {
|
||||
background : var(--splash);
|
||||
color : var(--light);
|
||||
}
|
||||
|
||||
aside {
|
||||
padding : 24px 24px;
|
||||
padding : var(--double-space) var(--outer-space);
|
||||
background : var(--light);
|
||||
}
|
||||
|
||||
aside > div {
|
||||
background : var(--dust);
|
||||
padding : 24px;
|
||||
border-radius : 6px;
|
||||
padding : var(--double-space);
|
||||
border-radius : var(--quarter-space);
|
||||
overflow : hidden;
|
||||
}
|
||||
|
||||
|
@ -92,7 +104,7 @@ aside > div > figure {
|
|||
height : 100px;
|
||||
border : 1px solid var(--dark-dust);
|
||||
float : left;
|
||||
margin-right : 24px;
|
||||
margin-right : var(--double-space);
|
||||
}
|
||||
|
||||
aside > div > dl {
|
||||
|
@ -102,7 +114,7 @@ aside > div > dl {
|
|||
aside > div > dl > dt {
|
||||
float : left;
|
||||
clear : left;
|
||||
margin : 0 24px 0 0;
|
||||
margin : 0 var(--double-space) 0 0;
|
||||
width : 180px;
|
||||
font-weight : bold;
|
||||
}
|
||||
|
@ -111,11 +123,10 @@ nav {
|
|||
display : block;
|
||||
border-bottom : 1px solid var(--dark-dust);
|
||||
background : var(--light);
|
||||
padding : 0 12px;
|
||||
}
|
||||
|
||||
nav ol {
|
||||
margin : 0;
|
||||
margin: 0 calc(var(--outer-space));
|
||||
padding : 0;
|
||||
list-style-type : none;
|
||||
overflow : hidden;
|
||||
|
@ -129,12 +140,16 @@ nav ol li {
|
|||
|
||||
nav > ol > li > a {
|
||||
display : block;
|
||||
padding : 6px 6px 3px 6px;
|
||||
margin : 0 12px;
|
||||
cursor : pointer;
|
||||
border-bottom : 4px solid transparent;
|
||||
padding : var(--half-space) var(--half-space) var(--quarter-space);
|
||||
margin : 0 var(--space);
|
||||
border-bottom : var(--half-space) solid transparent;
|
||||
text-decoration : none;
|
||||
color : var(--dark);
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
nav > ol > li:first-child > a {
|
||||
margin-left : 0;
|
||||
}
|
||||
|
||||
nav ol li a:hover {
|
||||
|
@ -148,29 +163,29 @@ nav ol li a.current {
|
|||
}
|
||||
|
||||
article {
|
||||
padding : 24px;
|
||||
padding : var(--double-space) var(--outer-space);
|
||||
}
|
||||
|
||||
article > div {
|
||||
background : var(--dust);
|
||||
padding : 24px;
|
||||
margin-bottom : 24px;
|
||||
padding : var(--double-space);
|
||||
margin-bottom : var(--double-space);
|
||||
}
|
||||
|
||||
div.view-list > h2 {
|
||||
margin : 0 0 24px 0;
|
||||
margin : 0 0 var(--double-space) 0;
|
||||
}
|
||||
|
||||
div.services {
|
||||
display : flex;
|
||||
justify-content : space-between;
|
||||
gap : 24px;
|
||||
gap : var(--double-space);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
div.services > div {
|
||||
background : var(--light);
|
||||
padding : 24px;
|
||||
padding : var(--double-space);
|
||||
border-radius : 6px;
|
||||
flex : 240px;
|
||||
max-width : 420px;
|
||||
|
@ -187,7 +202,7 @@ div.services > div:hover {
|
|||
*/
|
||||
|
||||
div.services > div > div.description {
|
||||
margin-bottom : 24px;
|
||||
margin-bottom : var(--double-space);
|
||||
}
|
||||
|
||||
div.services > div > a,
|
||||
|
@ -196,10 +211,11 @@ button {
|
|||
background : var(--splash);
|
||||
padding : 6px 12px;
|
||||
border-radius : 3px;
|
||||
opacity : 0.8;
|
||||
opacity : 0.9;
|
||||
cursor : pointer;
|
||||
text-align : center;
|
||||
border : 0;
|
||||
font-weight : bold;
|
||||
}
|
||||
|
||||
|
||||
|
@ -209,7 +225,7 @@ button:hover {
|
|||
}
|
||||
|
||||
form > div {
|
||||
margin : 0 0 24px;
|
||||
margin : 0 0 var(--double-space);
|
||||
}
|
||||
|
||||
form > div >label {
|
||||
|
@ -221,7 +237,7 @@ form > div > input[type="text"] {
|
|||
border : 1px solid var(--twilight);
|
||||
border-radius : 3px;
|
||||
padding : 6px 12px;
|
||||
background : var(--dust);
|
||||
background : var(--light-dust);
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
<header>
|
||||
<h1> data.coop membersystem </h1>
|
||||
<a href="/logout">Log out</a>
|
||||
<a class="logout" href="/logout">Log out</a>
|
||||
</header
|
||||
<main>
|
||||
<aside>
|
||||
|
|
Loading…
Reference in a new issue