diff --git a/assets/scss/base/components.scss b/assets/scss/base/components.scss new file mode 100644 index 0000000..32a8f9b --- /dev/null +++ b/assets/scss/base/components.scss @@ -0,0 +1,12 @@ +.button { + background: #0060ff; + color: white; + width: max-content; + font-size: clamp(1em,2vw,1em); + padding: 0.75em; + display: flex; + justify-content: center; + text-decoration: none; + border-radius: 100em; + font-weight: 700; +} \ No newline at end of file diff --git a/assets/scss/index/hero.scss b/assets/scss/index/hero.scss index 06e9aca..f7907c0 100644 --- a/assets/scss/index/hero.scss +++ b/assets/scss/index/hero.scss @@ -1,29 +1,36 @@ .hero .container { display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: auto auto; + grid-template-columns: 1fr; + grid-template-rows: auto auto auto; + grid-template-areas: + "img" + "txt" + "cta"; + @media (min-width: 600px) { + grid-template-columns: 1fr 1fr; + grid-template-rows: auto auto; + grid-template-areas: + "txt img" + "cta img"; + } gap: 1em; } .hero img { + grid-area: img; width: 100%; - grid-row: 1/3; + max-height: 160px; + @media (min-width: 600px) {max-height: unset;} } -.headline { +.hero .cta { + grid-area: cta; + align-self: start; +} +.hero .headline { + grid-area: txt; font-size: clamp(1.4em, 7vw, 3em); - max-width: 11ch; line-height: 1.2; align-self: end; + @media (min-width: 600px) { + max-width: 11ch; + } } -.button { - background: #0060ff; - color: white; - width: max-content; - font-size: clamp(0.75em,2vw,1em); - padding: 0.75em; - display: flex; - justify-content: center; - text-decoration: none; - border-radius: 100em; - font-weight: 700; -} -.cta {grid-column: 1; grid-row: 2; align-self: start;} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index e99a746..09aff81 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -2,6 +2,7 @@ @import "base/sections.scss"; @import "base/page.scss"; @import "base/list.scss"; +@import "base/components.scss"; @import "index/hero.scss"; @import "index/cards.scss"; diff --git a/assets/scss/partials/site-header.scss b/assets/scss/partials/site-header.scss index 476c965..3013f5f 100644 --- a/assets/scss/partials/site-header.scss +++ b/assets/scss/partials/site-header.scss @@ -32,8 +32,9 @@ body {margin-bottom: 64px; min-height: calc(100vh - 64px)} li { flex: 1; border-bottom: 4px solid #212121; + color: #999; &.active { - font-weight: 700; + color: white; border-bottom: 4px solid #0060ff; } a { diff --git a/config.toml b/config.toml index 1c80ae7..72bfdb7 100644 --- a/config.toml +++ b/config.toml @@ -31,9 +31,16 @@ name = "Code" url = "/code/" weight = 30 +[[menu.main]] +identifier = "design" +pre = "" +name = "Design" +url = "/design/" +weight = 40 + [[menu.main]] identifier = "blog" pre = "" name = "Blog" url = "/blog/" -weight = 40 +weight = 50 diff --git a/content/design/_index.md b/content/design/_index.md new file mode 100644 index 0000000..9ed64c4 --- /dev/null +++ b/content/design/_index.md @@ -0,0 +1,3 @@ +--- +title: "Design portfolio" +--- \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 97635e3..f08f9bd 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -3,8 +3,8 @@
Abstract illustration of a thought process -

i make order
out of chaos.

- view my work +

i make order out of chaos.

+ summary of my work
diff --git a/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content b/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content index 4178cce..a645d8c 100644 --- a/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content +++ b/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content @@ -1 +1 @@ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;scroll-behavior:smooth}body{display:flex;flex-flow:column;min-height:100vh;position:relative}main{flex-grow:1}.section{padding:2em 0}@media(min-width:600px){.section{padding:3em 0}}@media(min-width:62em){.section{padding:4em 0}}.container{width:100%;max-width:960px;margin:0 auto;padding:0 1em}.section-heading{font-size:1.2em;font-weight:400;line-height:1.2;text-align:center;max-width:18ch;margin:0 auto;margin-bottom:4em;padding-bottom:1em;border-bottom:2px solid rgba(0,0,0,.25)}.page-title{font-size:2.5em}.page{font-size:1em;max-width:960px;margin:0 auto}@media(min-width:600px){.page{font-size:1.25em}}@media(min-width:960px){.page{display:grid;grid-template-columns:minmax(45ch,65ch)1fr;grid-template-rows:auto auto;grid-template-areas:"header header" "content meta"}}.page .section{padding:1em 0;grid-area:content}.page .page-header{padding:2em 0;grid-area:header}.page .meta{grid-area:meta}.page .page-summary{margin:1em 0}.page .page-cover{width:100%}.page h1,.page h2,.page h3,.page h4,.page h5,.page h6{line-height:1.2;margin-bottom:1rem}.page p{line-height:1.4;margin-bottom:1em}.page h1{font-size:2.49em}.page h2{font-size:2.07em}.page h3{font-size:1.728em}.page h4{font-size:1.44em}.page h5{font-size:1.2em}.page h6{font-size:1em}.page blockquote{font-size:1.5em;margin:1em 0;font-family:serif;border-left:.25rem solid #000;padding-left:.5em}@media(min-width:600px){.page blockquote{font-size:2em}}.page pre{font-family:monospace;background:#333;color:#fff;padding:1em;line-height:1.4;overflow-x:scroll;margin-bottom:1em}.page ul{list-style:disc;margin:1em 0}.page li{margin-bottom:1em;line-height:1.4;margin-left:1em}.page ol{list-style:decimal;margin:1em 0}.page dl{margin:1em 0;line-height:1.4}.page dt{font-weight:700}.page dd{margin-left:1em}.page em{font-style:italic}.page strong{font-weight:700}.page sup{position:relative;font-size:.8em}.page sup a{position:relative;top:-.5em}.page table{text-align:center}.page table thead{font-weight:700}.page table th,.page table td{border:1px solid #000;padding:.5em}.tags{display:flex;flex-flow:row wrap;gap:.25em}.tags li{list-style:disc;border-radius:4px;margin-left:1em;margin-bottom:0}.tags li a{color:inherit}.meta .container{height:100%}#TableOfContents{position:sticky;top:2rem;max-width:max-content;font-size:.75em;margin:2em 0}#TableOfContents ul{list-style:none;margin:0}#TableOfContents li{margin-bottom:0;margin-left:0}#TableOfContents li li{margin-left:1em}#TableOfContents a{color:inherit;text-decoration:none;transition:color .2s ease-in-out}#TableOfContents a:hover{color:#0060ff;text-decoration:underline}.list .container{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:3em}.list .list-item{color:inherit;text-decoration:none;transition:color .2s ease-in-out}.list .list-item__image{width:100%;height:auto}.list .list-item__title{font-size:1.5em;margin:.5em 0}.list .list-item__summary{margin-bottom:.5em;line-height:1.4}.list .list-item__date{display:block;margin-bottom:1em}.list .list-item__readmore{margin-bottom:1em;display:block}.hero .container{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1em}.hero img{width:100%;grid-row:1/3}.headline{font-size:clamp(1.4em,7vw,3em);max-width:11ch;line-height:1.2;align-self:end}.button{background:#0060ff;color:#fff;width:max-content;font-size:clamp(0.75em,2vw,1em);padding:.75em;display:flex;justify-content:center;text-decoration:none;border-radius:100em;font-weight:700}.cta{grid-column:1;grid-row:2;align-self:start}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:2em}.card{background:#fff}.card img{width:100%;height:auto}#process .card img{height:200px}.card h3{margin:1em 0;font-weight:700}.card p{margin-bottom:1em;line-height:1.4}.testimonials{display:flex;flex-flow:row wrap;gap:1em;justify-content:center}.testimonial{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;grid-gap:1em;margin-bottom:1em;flex-basis:18em}.avatar{margin-left:1em;width:2em;height:2em;border-radius:1em;background:#212121}.name{align-self:center}.bubble{background-color:#212121;color:#fff;padding:.5em;border-radius:.5em;position:relative;grid-column:span 2;height:80px;display:flex;justify-content:center;align-items:center;text-align:center}.bubble:after{content:'';position:absolute;top:0;left:2em;width:0;height:0;border:.5em solid transparent;border-bottom-color:#212121;border-top:0;margin-left:-.5em;margin-top:-.5em}.site-header a{text-decoration:none;color:inherit}.site-header .container{display:flex;flex-flow:row wrap;justify-content:space-between;padding:1em}.site-masthead{display:flex;align-items:center}.site-icon{width:44px;height:44px;border-radius:100em;margin-right:1em}.site-title{margin-bottom:0;line-height:1;font-size:1em}body{margin-bottom:64px;min-height:calc(100vh - 64px)}.site-nav{flex-grow:1;position:fixed;bottom:0;left:0;width:100vw;background:#212121;color:#fff;z-index:2}.site-nav ul{height:64px;max-width:960px;margin:0 auto;display:flex;justify-content:space-around}.site-nav ul li{flex:1;border-bottom:4px solid #212121}.site-nav ul li.active{font-weight:700;border-bottom:4px solid #0060ff}.site-nav ul li a{display:flex;flex-flow:column;align-items:center;justify-content:center;height:100%}.site-nav ul li a span{padding:.25em}.site-footer{background:#333;color:#fff}.site-footer hr{display:none}.site-footer .container{padding:2em 1em;display:flex;flex-flow:row wrap}.site-footer dt{font-weight:700}.site-footer dd{margin-bottom:.5em}.site-footer a{color:inherit} \ No newline at end of file +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;scroll-behavior:smooth}body{display:flex;flex-flow:column;min-height:100vh;position:relative}main{flex-grow:1}.section{padding:2em 0}@media(min-width:600px){.section{padding:3em 0}}@media(min-width:62em){.section{padding:4em 0}}.container{width:100%;max-width:960px;margin:0 auto;padding:0 1em}.section-heading{font-size:1.2em;font-weight:400;line-height:1.2;text-align:center;max-width:18ch;margin:0 auto;margin-bottom:4em;padding-bottom:1em;border-bottom:2px solid rgba(0,0,0,.25)}.page-title{font-size:2.5em}.page{font-size:1em;max-width:960px;margin:0 auto}@media(min-width:600px){.page{font-size:1.25em}}@media(min-width:960px){.page{display:grid;grid-template-columns:minmax(45ch,65ch)1fr;grid-template-rows:auto auto;grid-template-areas:"header header" "content meta"}}.page .section{padding:1em 0;grid-area:content}.page .page-header{padding:2em 0;grid-area:header}.page .meta{grid-area:meta}.page .page-summary{margin:1em 0}.page .page-cover{width:100%}.page h1,.page h2,.page h3,.page h4,.page h5,.page h6{line-height:1.2;margin-bottom:1rem}.page p{line-height:1.4;margin-bottom:1em}.page h1{font-size:2.49em}.page h2{font-size:2.07em}.page h3{font-size:1.728em}.page h4{font-size:1.44em}.page h5{font-size:1.2em}.page h6{font-size:1em}.page blockquote{font-size:1.5em;margin:1em 0;font-family:serif;border-left:.25rem solid #000;padding-left:.5em}@media(min-width:600px){.page blockquote{font-size:2em}}.page pre{font-family:monospace;background:#333;color:#fff;padding:1em;line-height:1.4;overflow-x:scroll;margin-bottom:1em}.page ul{list-style:disc;margin:1em 0}.page li{margin-bottom:1em;line-height:1.4;margin-left:1em}.page ol{list-style:decimal;margin:1em 0}.page dl{margin:1em 0;line-height:1.4}.page dt{font-weight:700}.page dd{margin-left:1em}.page em{font-style:italic}.page strong{font-weight:700}.page sup{position:relative;font-size:.8em}.page sup a{position:relative;top:-.5em}.page table{text-align:center}.page table thead{font-weight:700}.page table th,.page table td{border:1px solid #000;padding:.5em}.tags{display:flex;flex-flow:row wrap;gap:.25em}.tags li{list-style:disc;border-radius:4px;margin-left:1em;margin-bottom:0}.tags li a{color:inherit}.meta .container{height:100%}#TableOfContents{position:sticky;top:2rem;max-width:max-content;font-size:.75em;margin:2em 0}#TableOfContents ul{list-style:none;margin:0}#TableOfContents li{margin-bottom:0;margin-left:0}#TableOfContents li li{margin-left:1em}#TableOfContents a{color:inherit;text-decoration:none;transition:color .2s ease-in-out}#TableOfContents a:hover{color:#0060ff;text-decoration:underline}.list .container{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:3em}.list .list-item{color:inherit;text-decoration:none;transition:color .2s ease-in-out}.list .list-item__image{width:100%;height:auto}.list .list-item__title{font-size:1.5em;margin:.5em 0}.list .list-item__summary{margin-bottom:.5em;line-height:1.4}.list .list-item__date{display:block;margin-bottom:1em}.list .list-item__readmore{margin-bottom:1em;display:block}.button{background:#0060ff;color:#fff;width:max-content;font-size:clamp(1em,2vw,1em);padding:.75em;display:flex;justify-content:center;text-decoration:none;border-radius:100em;font-weight:700}.hero .container{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"img" "txt" "cta";gap:1em}@media(min-width:600px){.hero .container{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-template-areas:"txt img" "cta img"}}.hero img{grid-area:img;width:100%;max-height:160px}@media(min-width:600px){.hero img{max-height:unset}}.hero .cta{grid-area:cta;align-self:start}.hero .headline{grid-area:txt;font-size:clamp(1.4em,7vw,3em);line-height:1.2;align-self:end}@media(min-width:600px){.hero .headline{max-width:11ch}}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:2em}.card{background:#fff}.card img{width:100%;height:auto}#process .card img{height:200px}.card h3{margin:1em 0;font-weight:700}.card p{margin-bottom:1em;line-height:1.4}.testimonials{display:flex;flex-flow:row wrap;gap:1em;justify-content:center}.testimonial{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;grid-gap:1em;margin-bottom:1em;flex-basis:18em}.avatar{margin-left:1em;width:2em;height:2em;border-radius:1em;background:#212121}.name{align-self:center}.bubble{background-color:#212121;color:#fff;padding:.5em;border-radius:.5em;position:relative;grid-column:span 2;height:80px;display:flex;justify-content:center;align-items:center;text-align:center}.bubble:after{content:'';position:absolute;top:0;left:2em;width:0;height:0;border:.5em solid transparent;border-bottom-color:#212121;border-top:0;margin-left:-.5em;margin-top:-.5em}.site-header a{text-decoration:none;color:inherit}.site-header .container{display:flex;flex-flow:row wrap;justify-content:space-between;padding:1em}.site-masthead{display:flex;align-items:center}.site-icon{width:44px;height:44px;border-radius:100em;margin-right:1em}.site-title{margin-bottom:0;line-height:1;font-size:1em}body{margin-bottom:64px;min-height:calc(100vh - 64px)}.site-nav{flex-grow:1;position:fixed;bottom:0;left:0;width:100vw;background:#212121;color:#fff;z-index:2}.site-nav ul{height:64px;max-width:960px;margin:0 auto;display:flex;justify-content:space-around}.site-nav ul li{flex:1;border-bottom:4px solid #212121;color:#999}.site-nav ul li.active{color:#fff;border-bottom:4px solid #0060ff}.site-nav ul li a{display:flex;flex-flow:column;align-items:center;justify-content:center;height:100%}.site-nav ul li a span{padding:.25em}.site-footer{background:#333;color:#fff}.site-footer hr{display:none}.site-footer .container{padding:2em 1em;display:flex;flex-flow:row wrap}.site-footer dt{font-weight:700}.site-footer dd{margin-bottom:.5em}.site-footer a{color:inherit} \ No newline at end of file diff --git a/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json b/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json index 9ffff10..26a7668 100644 --- a/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json +++ b/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json @@ -1 +1 @@ -{"Target":"scss/main.min.69d4711fe0e0bb357457852f01b5350f97d301b6069516d46c11edae2910bda0.css","MediaType":"text/css","Data":{"Integrity":"sha256-adRxH+DguzV0V4UvAbU1D5fTAbYGlRbUbBHtrikQvaA="}} \ No newline at end of file +{"Target":"scss/main.min.397e9f4be3c1c6acf6a7296d927f7de2c656cb95a7be3eca73cea90a66bab151.css","MediaType":"text/css","Data":{"Integrity":"sha256-OX6fS+PBxqz2pyltkn994sZWy5Wnvj7Kc86pCma6sVE="}} \ No newline at end of file