From 5965e07259919410717eed218524e1434f1fb82e Mon Sep 17 00:00:00 2001 From: Marvin Blum Date: Wed, 29 May 2024 00:28:11 +0200 Subject: [PATCH] More styling, more content. --- assets/js/main.js | 2 +- assets/scss/main.scss | 112 +++++++++++++++++++++++++-------------- content/404.json | 28 ++++++++++ content/blog.json | 16 ++++++ content/home.json | 11 ++++ content/legal.json | 16 ++++++ content/refs/footer.json | 3 ++ content/refs/nav.json | 3 ++ static/web/main.css | 2 +- static/web/main.css.map | 2 +- static/web/main.min.js | 2 +- tpl/footer.html | 7 +++ tpl/intro.html | 40 -------------- tpl/nav.html | 39 ++++++++++++++ tpl/text.html | 13 +++++ 15 files changed, 213 insertions(+), 83 deletions(-) create mode 100644 content/404.json create mode 100644 content/blog.json create mode 100644 content/legal.json create mode 100644 content/refs/footer.json create mode 100644 content/refs/nav.json create mode 100644 tpl/footer.html create mode 100644 tpl/nav.html create mode 100644 tpl/text.html diff --git a/assets/js/main.js b/assets/js/main.js index 74d5533..812286e 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1 +1 @@ -console.log("Hello from Shifu!"); +console.log("Hi!"); diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 1d8bfed..fe6a34e 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -2,8 +2,9 @@ $borderRadius: 8px; $textColor: #0f0f0f; +$linkColor: #717171; $lightGray: #e6e6e6; -$highlight: #82b3db; +$highlight: #c0d9f0; * { box-sizing: border-box; @@ -14,9 +15,8 @@ $highlight: #82b3db; } body { - padding: 80px 40px; - max-width: 1000px; - margin: 0 auto; + margin: 0; + padding: 0; } h1, h2 { @@ -36,70 +36,104 @@ h2 { a { text-decoration: none; transition: all 0.3s; - color: $highlight; + color: $linkColor; &:hover { color: $textColor; } } +p { + margin: 20px 0; +} + nav { - display: flex; - justify-content: space-between; - align-items: center; - margin: 0 0 80px 0; + padding: 80px 40px; + background: $highlight; - ul { + .content { display: flex; - gap: 20px; - margin: 0; - padding: 0; + justify-content: space-between; + align-items: center; + max-width: 1000px; + margin: 0 auto; - li { - list-style: none; + ul { + display: flex; + gap: 20px; margin: 0; padding: 0; - a { - color: $textColor; + li { + list-style: none; + margin: 0; + padding: 0; - &:hover { - color: $highlight; + a { + color: $textColor; + + svg { + fill: $textColor; + transition: all 0.3s; + } + + &:hover { + color: $linkColor; + + svg { + fill: $linkColor; + } + } } } } - } - .contact { - display: inline-block; - padding: 8px 16px; - border-radius: $borderRadius; - border: 2px solid $highlight; - color: $textColor; - transition: all 0.3s; - color: $highlight; + .contact { + display: inline-block; + padding: 8px 16px; + border-radius: $borderRadius; + border: 2px solid $textColor; + color: $textColor; + transition: all 0.3s; - &:hover { - background: $highlight; - color: #fff; + &:hover { + background: $textColor; + color: #fff; + } } } } section { - margin: 0 0 80px 0; + max-width: 1080px; + margin: 80px auto 0 auto; + padding: 0 40px; } footer { - margin: 0 0 80px 0; - padding: 40px 0; - border-style: solid; - border-width: 2px 0 0 0; - border-color: $lightGray; + max-width: 1080px; + margin: 80px auto 0 auto; + padding: 0 40px; + + .content { + max-width: 1000px; + margin: 0 auto; + border-style: solid; + border-width: 2px 0 0 0; + border-color: $lightGray; + padding: 40px 0; + } } .intro { + background: $highlight; + max-width: 100%; + padding: 0 40px 80px 40px; + margin: 0; + article { + max-width: 1000px; + margin: 0 auto; display: flex; gap: 40px; justify-content: flex-start; @@ -110,8 +144,8 @@ footer { } img { - max-width: 256px; - max-height: 256px; + max-width: 196px; + max-height: 196px; aspect-ratio: 1; border-radius: $borderRadius; } diff --git a/content/404.json b/content/404.json new file mode 100644 index 0000000..6eb6acb --- /dev/null +++ b/content/404.json @@ -0,0 +1,28 @@ +{ + "path": { + "en": "/404" + }, + "sitemap": { + "priority": "0.1" + }, + "content": { + "content": [ + {"ref": "head"}, + {"ref": "nav"}, + { + "tpl": "text", + "data": { + "size": "h1" + }, + "copy": { + "en": { + "headline": "404", + "text": "

Whoops — this page does not exist.

" + } + } + }, + {"ref": "footer"}, + {"ref": "end"} + ] + } +} diff --git a/content/blog.json b/content/blog.json new file mode 100644 index 0000000..b3cb1ae --- /dev/null +++ b/content/blog.json @@ -0,0 +1,16 @@ +{ + "path": { + "en": "/blog" + }, + "sitemap": { + "priority": "0.9" + }, + "content": { + "content": [ + {"ref": "head"}, + {"ref": "nav"}, + {"ref": "footer"}, + {"ref": "end"} + ] + } +} diff --git a/content/home.json b/content/home.json index 93497f2..3944ad9 100644 --- a/content/home.json +++ b/content/home.json @@ -8,9 +8,20 @@ "content": { "content": [ {"ref": "head"}, + {"ref": "nav"}, { "tpl": "intro" }, + { + "tpl": "text", + "copy": { + "en": { + "headline": "TODO", + "text": "" + } + } + }, + {"ref": "footer"}, {"ref": "end"} ] } diff --git a/content/legal.json b/content/legal.json new file mode 100644 index 0000000..8dfe7ab --- /dev/null +++ b/content/legal.json @@ -0,0 +1,16 @@ +{ + "path": { + "en": "/legal" + }, + "sitemap": { + "priority": "0.1" + }, + "content": { + "content": [ + {"ref": "head"}, + {"ref": "nav"}, + {"ref": "footer"}, + {"ref": "end"} + ] + } +} diff --git a/content/refs/footer.json b/content/refs/footer.json new file mode 100644 index 0000000..4cfcd82 --- /dev/null +++ b/content/refs/footer.json @@ -0,0 +1,3 @@ +{ + "tpl": "footer" +} diff --git a/content/refs/nav.json b/content/refs/nav.json new file mode 100644 index 0000000..23ee7ef --- /dev/null +++ b/content/refs/nav.json @@ -0,0 +1,3 @@ +{ + "tpl": "nav" +} diff --git a/static/web/main.css b/static/web/main.css index 07dbe41..e8be32b 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,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 */ +@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{margin:0;padding:0}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:#717171}a:hover{color:#0f0f0f}p{margin:20px 0}nav{padding:80px 40px;background:#c0d9f0}nav .content{display:flex;justify-content:space-between;align-items:center;max-width:1000px;margin:0 auto}nav .content ul{display:flex;gap:20px;margin:0;padding:0}nav .content ul li{list-style:none;margin:0;padding:0}nav .content ul li a{color:#0f0f0f}nav .content ul li a svg{fill:#0f0f0f;transition:all .3s}nav .content ul li a:hover{color:#717171}nav .content ul li a:hover svg{fill:#717171}nav .content .contact{display:inline-block;padding:8px 16px;border-radius:8px;border:2px solid #0f0f0f;color:#0f0f0f;transition:all .3s}nav .content .contact:hover{background:#0f0f0f;color:#fff}section{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}footer{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}footer .content{max-width:1000px;margin:0 auto;border-style:solid;border-width:2px 0 0 0;border-color:#e6e6e6;padding:40px 0}.intro{background:#c0d9f0;max-width:100%;padding:0 40px 80px 40px;margin:0}.intro article{max-width:1000px;margin:0 auto;display:flex;gap:40px;justify-content:flex-start;align-items:center}.intro article h1{margin:0}.intro article img{max-width:196px;max-height:196px;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 83f7d17..073dfd2 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,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 +{"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,8DCzBJ,EACC,sBACA,mCACA,eACA,gBACA,MAVW,QAaZ,KACC,SACA,UAGD,MACC,eACA,kBACA,mBAEA,UACC,eAIF,GACC,eAGD,EACC,qBACA,mBACA,MAlCW,QAoCX,QACC,MAtCU,QA0CZ,EACC,cAGD,IACC,kBACA,WA7CW,QA+CX,aACC,aACA,8BACA,mBACA,iBACA,cAEA,gBACC,aACA,SACA,SACA,UAEA,mBACC,gBACA,SACA,UAEA,qBACC,MArEO,QAuEP,yBACC,KAxEM,QAyEN,mBAGD,2BACC,MA5EM,QA8EN,+BACC,KA/EK,QAsFV,sBACC,qBACA,iBACA,cA3FY,IA4FZ,yBACA,MA5FS,QA6FT,mBAEA,4BACC,WAhGQ,QAiGR,WAMJ,QACC,iBACA,wBACA,eAGD,OACC,iBACA,wBACA,eAEA,gBACC,iBACA,cACA,mBACA,uBACA,aArHU,QAsHV,eAIF,OACC,WA1HW,QA2HX,eACA,yBACA,SAEA,eACC,iBACA,cACA,aACA,SACA,2BACA,mBAEA,kBACC,SAGD,mBACC,gBACA,iBACA,eACA,cAnJY","file":"main.css"} \ No newline at end of file diff --git a/static/web/main.min.js b/static/web/main.min.js index 8953f15..8aa99d1 100644 --- a/static/web/main.min.js +++ b/static/web/main.min.js @@ -1 +1 @@ -(()=>{console.log("Hello from Shifu!");})(); +(()=>{console.log("Hi!");})(); diff --git a/tpl/footer.html b/tpl/footer.html new file mode 100644 index 0000000..d276dc3 --- /dev/null +++ b/tpl/footer.html @@ -0,0 +1,7 @@ + diff --git a/tpl/intro.html b/tpl/intro.html index 439b9fd..55fefcf 100644 --- a/tpl/intro.html +++ b/tpl/intro.html @@ -1,46 +1,6 @@ - -

Hi, I'm Marvin, co-founder of Pirsch Analytics and Emvi, software engineer, and open-source enthusiast.

Picture
- -
-

TODO

- -
- - diff --git a/tpl/nav.html b/tpl/nav.html new file mode 100644 index 0000000..701287f --- /dev/null +++ b/tpl/nav.html @@ -0,0 +1,39 @@ + diff --git a/tpl/text.html b/tpl/text.html new file mode 100644 index 0000000..1161d7b --- /dev/null +++ b/tpl/text.html @@ -0,0 +1,13 @@ +{{$size := get .Content "size"}} + +
+ {{if $size}} + {{html (fmt "<%s>" $size)}} + {{copy .Page .Content "headline"}} + {{html (fmt "" $size)}} + {{else}} +

{{copy .Page .Content "headline"}}

+ {{end}} + + {{html (copy .Page .Content "text")}} +