From bebb2f08f60ed95840a87b83c4d9255a15ecae06 Mon Sep 17 00:00:00 2001 From: Marvin Blum Date: Tue, 28 May 2024 19:52:04 +0200 Subject: [PATCH] Styling, elements. --- assets/scss/main.scss | 54 ++++++++++++++++++++++++++++++++++++++--- static/web/main.css | 2 +- static/web/main.css.map | 2 +- tpl/intro.html | 33 ++++++++++++++++++++++--- 4 files changed, 83 insertions(+), 8 deletions(-) diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 165f0db..1d8bfed 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -2,6 +2,7 @@ $borderRadius: 8px; $textColor: #0f0f0f; +$lightGray: #e6e6e6; $highlight: #82b3db; * { @@ -18,27 +19,62 @@ body { margin: 0 auto; } -h1 { +h1, h2 { font-size: 32px; margin: 0 0 40px 0; font-weight: normal; + + a { + font-size: 32px; + } +} + +h2 { + font-size: 26px; } a { text-decoration: none; + transition: all 0.3s; + color: $highlight; + + &:hover { + color: $textColor; + } } nav { display: flex; justify-content: space-between; align-items: center; - margin: 0 0 40px 0; + margin: 0 0 80px 0; + + ul { + display: flex; + gap: 20px; + margin: 0; + padding: 0; + + li { + list-style: none; + margin: 0; + padding: 0; + + a { + color: $textColor; + + &:hover { + color: $highlight; + } + } + } + } .contact { display: inline-block; padding: 8px 16px; border-radius: $borderRadius; - border: 1px solid $highlight; + border: 2px solid $highlight; color: $textColor; transition: all 0.3s; color: $highlight; @@ -50,6 +86,18 @@ nav { } } +section { + margin: 0 0 80px 0; +} + +footer { + margin: 0 0 80px 0; + padding: 40px 0; + border-style: solid; + border-width: 2px 0 0 0; + border-color: $lightGray; +} + .intro { article { display: flex; diff --git a/static/web/main.css b/static/web/main.css index de233d3..07dbe41 100644 --- a/static/web/main.css +++ b/static/web/main.css @@ -1 +1 @@ -@font-face{font-family:"Open Sans";font-style:italic;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Italic.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Regular.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Bold.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:italic;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-BoldItalic.ttf") format("truetype")}*{box-sizing:border-box;font-family:"Open Sans",sans-serif;font-size:18px;line-height:1.5;color:#0f0f0f}body{padding:80px 40px;max-width:1000px;margin:0 auto}h1{font-size:32px;margin:0 0 40px 0;font-weight:normal}a{text-decoration:none}nav{display:flex;justify-content:space-between;align-items:center;margin:0 0 40px 0}nav .contact{display:inline-block;padding:8px 16px;border-radius:8px;border:1px solid #82b3db;color:#0f0f0f;transition:all .3s;color:#82b3db}nav .contact:hover{background:#82b3db;color:#fff}.intro article{display:flex;gap:40px;justify-content:flex-start;align-items:center}.intro article h1{margin:0}.intro article img{max-width:256px;max-height:256px;aspect-ratio:1;border-radius:8px}/*# sourceMappingURL=main.css.map */ +@font-face{font-family:"Open Sans";font-style:italic;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Italic.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Regular.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Bold.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:italic;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-BoldItalic.ttf") format("truetype")}*{box-sizing:border-box;font-family:"Open Sans",sans-serif;font-size:18px;line-height:1.5;color:#0f0f0f}body{padding:80px 40px;max-width:1000px;margin:0 auto}h1,h2{font-size:32px;margin:0 0 40px 0;font-weight:normal}h1 a,h2 a{font-size:32px}h2{font-size:26px}a{text-decoration:none;transition:all .3s;color:#82b3db}a:hover{color:#0f0f0f}nav{display:flex;justify-content:space-between;align-items:center;margin:0 0 80px 0}nav ul{display:flex;gap:20px;margin:0;padding:0}nav ul li{list-style:none;margin:0;padding:0}nav ul li a{color:#0f0f0f}nav ul li a:hover{color:#82b3db}nav .contact{display:inline-block;padding:8px 16px;border-radius:8px;border:2px solid #82b3db;color:#0f0f0f;transition:all .3s;color:#82b3db}nav .contact:hover{background:#82b3db;color:#fff}section{margin:0 0 80px 0}footer{margin:0 0 80px 0;padding:40px 0;border-style:solid;border-width:2px 0 0 0;border-color:#e6e6e6}.intro article{display:flex;gap:40px;justify-content:flex-start;align-items:center}.intro article h1{margin:0}.intro article img{max-width:256px;max-height:256px;aspect-ratio:1;border-radius:8px}/*# sourceMappingURL=main.css.map */ diff --git a/static/web/main.css.map b/static/web/main.css.map index f21de2a..83f7d17 100644 --- a/static/web/main.css.map +++ b/static/web/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../assets/scss/_font.scss","../../assets/scss/main.scss"],"names":[],"mappings":"AAAA,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,0DAGJ,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,2DAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,wDAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,8DC3BJ,EACC,sBACA,mCACA,eACA,gBACA,MARW,QAWZ,KACC,kBACA,iBACA,cAGD,GACC,eACA,kBACA,mBAGD,EACC,qBAGD,IACC,aACA,8BACA,mBACA,kBAEA,aACC,qBACA,iBACA,cArCa,IAsCb,yBACA,MAtCU,QAuCV,mBACA,MAvCU,QAyCV,mBACC,WA1CS,QA2CT,WAMF,eACC,aACA,SACA,2BACA,mBAEA,kBACC,SAGD,mBACC,gBACA,iBACA,eACA,cAjEY","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../assets/scss/_font.scss","../../assets/scss/main.scss"],"names":[],"mappings":"AAAA,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,0DAGJ,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,2DAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,wDAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,8DC1BJ,EACC,sBACA,mCACA,eACA,gBACA,MATW,QAYZ,KACC,kBACA,iBACA,cAGD,MACC,eACA,kBACA,mBAEA,UACC,eAIF,GACC,eAGD,EACC,qBACA,mBACA,MAjCW,QAmCX,QACC,MAtCU,QA0CZ,IACC,aACA,8BACA,mBACA,kBAEA,OACC,aACA,SACA,SACA,UAEA,UACC,gBACA,SACA,UAEA,YACC,MA5DQ,QA8DR,kBACC,MA7DO,QAmEX,aACC,qBACA,iBACA,cAzEa,IA0Eb,yBACA,MA1EU,QA2EV,mBACA,MA1EU,QA4EV,mBACC,WA7ES,QA8ET,WAKH,QACC,kBAGD,OACC,kBACA,eACA,mBACA,uBACA,aA7FW,QAiGX,eACC,aACA,SACA,2BACA,mBAEA,kBACC,SAGD,mBACC,gBACA,iBACA,eACA,cAjHY","file":"main.css"} \ No newline at end of file diff --git a/tpl/intro.html b/tpl/intro.html index 0508a9a..439b9fd 100644 --- a/tpl/intro.html +++ b/tpl/intro.html @@ -1,6 +1,22 @@