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

View file

@ -13,7 +13,7 @@
<body> <body>
<header> <header>
<h1> data.coop membersystem </h1> <h1> data.coop membersystem </h1>
<a href="/logout">Log out</a> <a class="logout" href="/logout">Log out</a>
</header </header
<main> <main>
<aside> <aside>