Media queries

This commit is contained in:
Halfdan 2023-10-03 20:50:34 +02:00
parent 565018ea30
commit 62956deb1d
2 changed files with 48 additions and 32 deletions

View file

@ -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%;
}

View file

@ -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>