diff --git a/src/project/static/css/style.css b/src/project/static/css/style.css index 8dbddcf..6ea0811 100644 --- a/src/project/static/css/style.css +++ b/src/project/static/css/style.css @@ -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%; } diff --git a/src/project/templates/base.html b/src/project/templates/base.html index 1e844d5..0e78a21 100644 --- a/src/project/templates/base.html +++ b/src/project/templates/base.html @@ -13,7 +13,7 @@

data.coop membersystem

- Log out + Log out