update to new design
Prithu Goswami pg@prithu.dev
Sun, 01 Jan 2023 22:50:42 +0530
6 files changed,
206 insertions(+),
492 deletions(-)
M
layouts/index.html
→
layouts/index.html
@@ -6,129 +6,32 @@ {{ partial "nav.html" }}
<section id="intro" class="page-section"> <div class="container"> - <div class="shadow-box"> - <svg id="stripes-green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.629 194.247"> - <rect fill="#8bef89" transform="rotate(39)" rx="6" height="13" width="162" y=".709" x="7.97"/> - <rect fill="#8bef89" transform="rotate(39)" rx="6" height="13" width="205" y="21.612" x="64.786"/> - <rect fill="#8bef89" transform="rotate(39)" rx="6" height="13" width="189" y="-19.983" x="20.81"/> - <circle fill="#8bef89" transform="rotate(39)" r="6" cy="8.417" cx="182.777"/> - <circle fill="#8bef89" transform="rotate(39)" r="6" cy="28.091" cx="52.018"/> - </svg> - <svg id="stripes-purp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160.212 167.186"> - <rect fill="#b554e3" transform="rotate(39)" rx="6" height="13" width="162" y=".709" x="7.97"/> - <rect fill="#b554e3" transform="rotate(39)" rx="6" height="13" width="162" y="21.612" x="64.786"/> - <rect fill="#b554e3" transform="rotate(39)" rx="6" height="13" width="162" y="-19.983" x="20.81"/> - <circle fill="#b554e3" transform="rotate(39)" r="6" cy="8.417" cx="182.777"/> - <circle fill="#b554e3" transform="rotate(39)" r="6" cy="28.091" cx="52.018"/> - </svg> - <svg id="triangle" xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 128 59" preserveAspectRatio="xMidYMid meet"> - <path d="M34 0l47 9 47 10L0 59z" /> - </svg> - <svg id="circle" xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 74 74" preserveAspectRatio="xMidYMid meet"> - <circle cx="37" cy="37" r="37" /> - </svg> - <h1>Prithu Goswami</h1> <div id="intro-text"> - <p> - I love to build things and design solutions to problems. - Interested in *nix, infrastructure, cloud native, networking and info-sec. You can find - my resume <a href="https://i.prithu.xyz/resume.pdf">here</a>. + {{ .Content }} </p> - </div> - <img id="profile-pic" src="./img/duotone-profile-small.jpeg"> - <div id="socials"> - <a href="mailto:{{ .Site.Author.email }}"> - <div class="sb mail"> - <img src="/img/mail.svg"> - </div> - </a> - <a href="https://github.com/prithugoswami" target="_blank"> - <div class="sb github"> - <img src="/img/github.svg"> - </div> - </a> - <a href="https://dribbble.com/prithugoswami" target="_blank"> - <div class="sb dribbble"> - <img src="/img/dribbble.svg"> - </div> - </a> - <a href="https://twitter.com/prithu524" target="_blank"> - <div class="sb twitter"> - <img src="/img/twitter.svg"> - </div> - </a> - </div> - </div> </div> - <div id="socials-2"> - <a href="mailto:{{ .Site.Author.email }}"> - <div class="sb mail"> - <img src="/img/mail.svg"> - </div> - </a> - <a href="https://github.com/prithugoswami" target="_blank"> - <div class="sb github"> - <img src="/img/github.svg"> - </div> - </a> - <a href="https://dribbble.com/prithugoswami" target="_blank"> - <div class="sb dribbble"> - <img src="/img/dribbble.svg"> - </div> - </a> - <a href="https://twitter.com/prithu524" target="_blank"> - <div class="sb twitter"> - <img src="/img/twitter.svg"> - </div> - </a> - </div> - </section> - - <section id=projects class="page-section"> + <section id=latest-posts> <div class=container> - <h1>Some of my works</h1> - <div class="shadow-box"> - <div class="section-text"> - {{ range .Site.Data.projects }} - <div class="section-item"> - <h2> - <a href="{{ .url }}"> - {{ .title }} - </a> - </h2> - <p class="section-sub-text">{{ .description }}</p> - </div> - {{ end }} - </div> - <!-- <a href="/projects/"><div class=btn id=project-cta>View All</div></a> --> - </div> - </div> - </section> - - <section id=writeups class="page-section"> - <div class=container> - <h1>I also write about stuff</h1> - <div class="shadow-box"> - <div class="section-text"> - {{ range sort (where .Site.RegularPages "Section" "posts") "Date" "desc" | first 3}} - <div class=section-item> - <h2> + <h2>Latest posts</h2> + <div id=latest-posts-list> + {{ range sort (where .Site.RegularPages "Section" "posts") "Date" "desc" | first 3}} + <div > + <div> + <h3> <a href="{{ .RelPermalink }}"> {{ .Title }} </a> - </h2> - <p class="section-sub-text">{{ with .Params.description }}{{ . }}{{ else }}{{.Summary | truncate 110 }}{{ end }}</p> - <!-- <p>{{ .Date.Format "2 Jan 2006" }}<p> --> + </h3> + <p>{{ with .Params.description }}{{ . }}{{ else }}{{.Summary | truncate 110 }}{{ end }}</p> </div> - {{ end }} + <p>{{ .Date.Format "2 Jan 2006" }}</p> </div> - <a href="/posts/"><div class=btn id=writeup-cta>View All</div></a> + {{ end }} </div> + <a id=latest-posts-viewall href="/posts/">View All ➜</a> </div> </section> {{ partial "footer.html" . }}
M
layouts/partials/head.html
→
layouts/partials/head.html
@@ -21,6 +21,9 @@ <meta name="author" content="Prithu Goswami">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/blog.css"> - <link rel="icon" type="img/png" href="/img/favicon.png"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Open+Sans&family=Lato&display=swap" rel="stylesheet"> + <link rel="icon" type="img/png" href="/img/pg.svg"> <!-- <link rel="me" href="https://fosstodon.org/@prithu"> --> </head>
M
static/css/blog.css
→
static/css/blog.css
@@ -1,11 +1,9 @@
@import url('https://rsms.me/inter/inter.css'); .bcontainer{ - margin-top: 2rem; - display: flex; - flex-flow: row; + max-width: 664px; width: 100%; - min-height: calc(100vh - 7rem - 7rem); /* 7rem footer + 7 rem nav + margin */ + margin: 2rem auto; justify-content: center; color: var(--text-primary); }@@ -32,14 +30,12 @@ font-weight: 200;
} .bcontent{ - /* background-color: lightgreen; */ - width: 50%; + max-width: 664px; } .bcontent h1{ - font-family: Inter, sans-serif; - font-weight: 900; - font-size: 2.3rem; + font-weight: 600; + font-size: 1.8rem; line-height: 1; color: var(--text-primary); fill: var(--text-primary);@@ -48,7 +44,7 @@
#rss a{ color: inherit; font-size: 16px; - font-weight: 100; + font-weight: 200; } #rss {@@ -57,7 +53,6 @@ }
.bcontent > .post-date{ margin: 0.8rem 0; - font-family: Sans-Serif; } .post-labels{@@ -69,6 +64,7 @@ }
.post-label{ background-color: var(--pre-bg); + border: 1px solid var(--pre-border); border-radius: 0.3rem; padding: 0.2rem 0.8rem; font-size: 0.85rem;@@ -76,20 +72,17 @@ margin: 0.2rem 0.2rem;
} .posts{ - font-family: Inter, sans-serif; list-style: none; + font-size: 18px; + font-weight: 500; margin-top: 1.5rem; - font-size: 1.18rem; -} - -.posts > div:nth-child(odd){ } .post-item{ display: flex; flex-direction: row; justify-content: space-between; - padding: 0.7rem 0rem; + margin: 1rem 0; } .post-item > a:hover {@@ -99,19 +92,18 @@
.post-item > a { margin-right: 4rem; overflow: hidden; - font-weight: 600; color: var(--text-primary); } .post-item > .post-date{ + color: var(--text-secondary); font-size: 1rem; line-height: 1.4; white-space: nowrap; - color: var(--text-secondary); } .post-text{ - font-family: Inter, sans-serif; + font-family: 'Inter', sans-serif; font-size: 16px; color: var(--text-primary); }@@ -135,16 +127,6 @@ .post-text a {
border-bottom: 2px solid #B554E3aa; } -/* .post-text a::after { */ -/* display: inline-block; */ -/* content: ' '; */ -/* background-image: url('../img/ext-arrow.svg'); */ -/* margin-left: 6px; */ -/* /1* background-size: 28px 28px; *1/ */ -/* height: 12px; */ -/* width: 12px; */ -/* } */ - .post-text a:hover { color: #8a3ead; text-decoration: none;@@ -160,17 +142,23 @@ margin: 1rem 0;
} .post-text h1{ - font-size:1.7rem; + font-family: 'Exo 2'; + font-weight: 500; + font-size:1.6rem; margin-top: 2.5rem; } .post-text h2{ - font-size:1.5rem; + font-family: 'Exo 2'; + font-size:1.4rem; + font-weight: 500; margin-top: 2rem; } .post-text h3{ - font-size:1.3rem; + font-family: 'Exo 2'; + font-weight: 500; + font-size:1.2rem; margin-top: 1.5rem; }@@ -188,10 +176,13 @@ max-width: 100%;
background: var(--pre-bg); padding: 1rem; margin: 0.5rem 0; - border: 1px solid rgba(0,0,0,0.15); + border: 1px solid var(--pre-border); border-radius: 6px; font-size: 0.9rem; overflow-x: scroll; +} +.post-text strong { + font-weight: 600; } .post-text pre::-webkit-scrollbar {@@ -237,15 +228,16 @@
@media only screen and (max-width: 768px){ .bcontent { width: 90%; + margin: 0 auto; } - #blist { - width:100%; - } + /* #blist { */ + /* width:100%; */ + /* } */ - #blist h1{ - margin-left: 1rem; - } + /* #blist h1{ */ + /* margin-left: 1rem; */ + /* } */ .bcontainer { margin-top: 1rem;@@ -253,7 +245,6 @@ }
.post-item{ flex-direction: column-reverse; - padding: 0.7rem 1rem; } .post-item > a {
M
static/css/main.css
→
static/css/main.css
@@ -16,21 +16,21 @@ color: var(--text-primary);
} ::selection { - background-color: #B554E3; - color: whitesmoke; + background-color: var(--text); + color: var(--bg); } :root{ - --dark-bg: #171722; + --dark-bg: #0a0a0a; --dark-text: #c5c5c5; --dark-text-primary: white; - --dark-card-bg: #0F0E17; + --dark-card-bg: #242424; --dark-card-head: white; --dark-card-text: #d8d8d8; --dark-logo-top: white; --dark-logo-bottom: #eeeeee; - --dark-pre-bg: #0000003d; - --dark-pre-border-color: #ffffff1c; + --dark-pre-bg: #000000; + --dark-pre-border: #ffffff30; --light-bg: #f3f3f3; --light-text: #666666;@@ -41,7 +41,7 @@ --light-card-text: #292929;
--light-logo-top: #1a1a1a; --light-logo-bottom: #4d4d4d; --light-pre-bg: #0000003d; - --light-pre-border-color: #ffffff1c; + --light-pre-border: #00000026; } body.theme-light, body.theme-auto{@@ -56,14 +56,14 @@ --card-text: var(--light-card-text);
--logo-top: var(--light-logo-top); --logo-bottom: var(--light-logo-bottom); --pre-bg: #0000000f; - --pre-border-color: var(--light-pre-border); + --pre-border: var(--light-pre-border); } @media (prefers-color-scheme: dark) { body.theme-auto{ --bg: var(--dark-bg); --text: var(--dark-text); - --text-secondary: var(--dark-text); + --text-secondary: #919191; --text-primary: #ffffffcc; --quote-bar: #ffffff61; --card-bg: var(--dark-card-bg);@@ -72,7 +72,7 @@ --card-text: var(--dark-card-text);
--logo-top: var(--dark-logo-top); --logo-bottom: var(--dark-logo-bottom); --pre-bg: var(--dark-pre-bg); - --pre-border-color: var(--dark-pre-border); + --pre-border: var(--dark-pre-border); --scrollbar: #ffffff11; } }@@ -80,7 +80,7 @@
body.theme-dark{ --bg: var(--dark-bg); --text: var(--dark-text); - --text-secondary: var(--dark-text); + --text-secondary: #919191; --text-primary: #ffffffcc; --quote-bar: #ffffff61; --card-bg: var(--dark-card-bg);@@ -89,28 +89,33 @@ --card-text: var(--dark-card-text);
--logo-top: var(--dark-logo-top); --logo-bottom: var(--dark-logo-bottom); --pre-bg: var(--dark-pre-bg); - --pre-border-color: var(--dark-pre-border); + --pre-border: var(--dark-pre-border); --scrollbar: #ffffff11; } body{ background-color: var(--bg); + font-family: Inter, sans-serif; } nav { - height: 5rem; + font-family: Inter; + max-width: 664px; + margin: auto; + height: 6rem; display: flex; align-items: center; justify-content: space-between; } -nav > *:first-child{ - margin-left: 10%; -} -nav > *:last-child{ - margin-right: 10%; -} +/* nav > *:first-child{ */ +/* margin-left: 10%; */ +/* } */ + +/* nav > *:last-child{ */ +/* margin-right: 10%; */ +/* } */ .nav-group { display: flex;@@ -118,7 +123,7 @@ align-items: center;
} .nav-group > *:not(:first-child) { - margin-left: 4rem; + margin-left: 2.5rem; } nav select {@@ -133,26 +138,15 @@ font-weight: 700;
border: none; } -nav select:active, -nav select:focus { - outline: none; +#sun { + width: 24px; + margin-top: 6px; + fill: var(--text-primary); + cursor: pointer; } -nav option { - color: var(--text-primary); - background: var(--bg); - outline: none; -} - -nav option:active, -nav option:focus { - outline: none; - border: none; -} - - #pg { - height: 30px ; + height: 24px ; margin-bottom: -6px; }@@ -170,11 +164,69 @@ }
nav a{ text-decoration: none; - text-transform: uppercase; - font-weight: 700; + color: var(--text-primary); + font-weight: 500; +} + +nav a:hover{ + text-decoration: underline; + color: var(--text-primary); + font-weight: 500; +} + +#latest-posts{ + margin-top: 3rem; +} + +#latest-posts { color: var(--text-primary); } +#latest-posts a:hover{ + text-decoration: underline; + color: var(--text-primary); +} + +#latest-posts-viewall { + font-weight: 500; + font-size: 16px; +} + + +#latest-posts h2{ + margin: 1.2rem 0; + font-size: 24px; + font-weight: 600; +} + +#latest-posts h3{ + font-size: 18px; + font-weight: 500; + margin: 0.2rem 0; +} + +#latest-posts p{ + font-weight: 400; + line-height: 1.3; + color: var(--text-secondary); +} + +#latest-posts-list { + margin-bottom: 1.5rem; + +} + +#latest-posts-list > div{ + display: flex; + justify-content: space-between; + margin: 1rem 0; +} + +#latest-posts-list > div > p{ + white-space: nowrap; + padding-left: 1.8rem; +} + footer { height: 7rem; display: flex;@@ -197,34 +249,17 @@ }
footer p a{ color: inherit; + text-decoration: underline; } @media only screen and (max-width: 767px){ nav { - justify-content: center; - } - - nav > *:first-child { - margin-left: 0; - width: 80%; - } - - /* just keep one nav child for smaller screens */ - nav > *:not(:first-child) { - display: none; - } - - .nav-group { - justify-content: space-between; - } - - .nav-group > *:not(:first-child) { - margin-left: 0; + width: 90%; } } #intro{ - margin-top: 4rem; + margin-top: 1rem; } #intro a{@@ -234,7 +269,6 @@ text-decoration: underline;
} .container{ - width: 65%; margin: 0 auto; position: relative; max-width: 664px;@@ -243,10 +277,9 @@
.shadow-box{ background-color: var(--card-bg); border-radius: 24px; - box-shadow: 0 10px 30px 3px rgba(0,0,0,0.15); + box-shadow: 0 3px 12px rgba(0,0,0,0.1); margin: 0 auto; position: relative; - max-width: 640px } #sec-404 {@@ -277,126 +310,32 @@ }
#intro h1 { + font-family: 'Noto Sans', serif; position: absolute; top: -40px; right: -130px; color: var(--card-head); line-height: 1; font-size: 4rem; - font-weight: 700; + font-style: italic; + font-weight: 100; text-shadow: 0 4px 7px rgba(0,0,0,0.2); } #intro-text{ color: var(--card-text); - padding: 6rem; - font-weight: 300; - font-size: 1.1rem; - text-align: justify; -} - -#profile-pic { - width: 190px; - border-radius: 50%; - position: absolute; - top: 40px; - left: -130px; - box-shadow: 0 7px 10px rgba(0,0,0,0.25); -} - -#triangle { - fill: #B554E3; - width: 128px; - position: absolute; - right: -80px; - bottom: 200px; - filter: drop-shadow(0px 7px 7px rgba(0,0,0,0.15)); -} - -#circle { - fill:#8BEF89; - width: 74px; - position: absolute; - left: 100px; - bottom: -40px; - filter: drop-shadow(0px -7px 7px rgba(0,0,0,0.15)); -} - -#stripes-green{ - width: 190px; - position: absolute; - top: -3.4rem; - right: -6.2rem; - z-index: -1; -} - -#stripes-purp{ - width: 160px; - position: absolute; - bottom: -5rem; - left: -4.5rem; - z-index: -1; + padding: 1rem 1.9rem; + font-family: 'Inter', sans-serif; + font-size: 1rem; + line-height: 1.5; + background-color: var(--card-bg); + border-radius: 18px; + box-shadow: 0 3px 8px rgba(0,0,0,0.075); + margin: 0 auto; } - -#socials{ - display: flex; - align-items: center; - position: absolute; - right: -100px; - bottom: 30px; -} - -#socials a{ - margin-left: 10px -} - -#socials-2{ - display: none; - justify-content: space-between; - width: 80%; - max-width: 380px; - margin-top: 6rem; -} - -.sb{ - padding: 15px; - display: flex; - transition: all 150ms ease; - box-shadow: 0px 7px 10px rgba(0,0,0,0.20); - border-radius: 6px; -} - -.sb img{ - width: 30px; - height: 30px; -} - -.mail{ - background: #4ED44C ; -} - -.github{ - background: #333 -} - -.sb:hover{ - color: #7795f8; - transform: translateY(-2px); - box-shadow: 0 10px 18px rgba(50, 50, 93, 0.3), 0 3px 6px rgba(0, 0, 0, 0.08); -} - -.sb:active{ - transform: translateY(1px); - box-shadow: 0 4px 7px rgba(50, 50, 93, 0.2), 0 3px 6px rgba(0, 0, 0, 0.08); -} - -.dribbble{ - background: #ea4c89 -} - -.twitter{ - background: #1da1f2 +#intro-text p { + margin-bottom: 0.9rem; } .joke {@@ -405,152 +344,36 @@ color: rgba(0,0,0,0.2);
text-shadow: none; } -.page-section{ - margin: 0 auto; - display: flex; - flex-flow: column; - margin-bottom: 10rem; -} - -.page-section h1 { - position: absolute; - color: var(--card-head); - font-size: 2.4rem; - text-shadow: 0 4px 7px rgba(0,0,0,0.2); - z-index: 1; -} - -#projects h1 { - top: -1.8rem; - left: -5rem; -} - -#writeups h1 { - top: -1.8rem; - right: -7rem; -} - -.section-text{ - padding: 0rem 2rem; - padding-top: 3.5rem; - padding-bottom: 5rem; -} - -.page-section h2 { - font-family: Inter; - font-size: 1.4rem; -} - -#projects h2 { - color: #B554E3; -} - -#writeups h2 { - color: #4ED44C; -} - -.page-section .section-sub-text{ - margin-left: 0.6rem; - margin-top: 0.3rem; - margin-bottom: 1rem; - color: var(--card-text); -} - -.section-item { - border-radius: 0.4rem; - padding: 0.2rem 0.8rem; -} - -.section-item a:hover { - text-decoration: underline; -} - -.section-item a { - color: inherit; -} - - -.btn { - margin: none; - display: inline-block; - padding: 1rem 2rem; - border-radius: 6px; - box-shadow: 0px 7px 7px rgba(0,0,0,0.15); - transition: all 150ms ease; -} - -.btn:hover { - transform: translateY(-2px); - box-shadow: 0px 7px 7px rgba(0,0,0,0.15); - box-shadow: 0 10px 18px rgba(50, 50, 93, 0.25), 0 3px 6px rgba(0, 0, 0, 0.08); -} - -.btn:active{ - transform: translateY(1px); - box-shadow: 0 4px 7px rgba(50, 50, 93, 0.2), 0 3px 6px rgba(0, 0, 0, 0.08); -} - -.btn:focus{ - outline: none; -} - -#project-cta{ - position: absolute; - bottom: 2rem; - right: -2rem; - background: #B554E3; - color: white; -} - -#writeup-cta{ - position: absolute; - bottom: 2rem; - right: -2rem; - background: #4ED44C; - color: white; -} @media only screen and (max-width: 767px){ - #intro{ - margin-top: 5rem; - display: flex; - flex-flow: column; - align-items: center ; - } - #intro h1 { - display: none; - } - - .container{ - width: 90%; + /* move date to the top of the post title and removing the left padding */ + #latest-posts-list > div{ + flex-direction: column; } - #socials{ - display: none; + #latest-posts-list > div > p{ + white-space: nowrap; + padding-left: 0rem; } - #socials-2{ - display: flex; + #latest-posts-list > div > div{ + order: 2; } - #profile-pic { - width: 120px; - border-radius: 50%; - position: absolute; - top: -60px; - left: calc(50% - 60px); - box-shadow: 0 7px 10px rgba(0,0,0,0.25); + .container{ + width: 90%; } + - #intro-text{ - padding: 0 3rem; - padding-top: 5rem; - padding-bottom: 4rem; - font-weight: 300; - font-size: 1.1rem; - text-align: justify; - } + /* #intro-text{ */ + /* padding: 0 3rem; */ + /* padding-top: 5rem; */ + /* padding-bottom: 4rem; */ + /* font-weight: 300; */ + /* font-size: 1.1rem; */ + /* text-align: justify; */ + /* } */ #triangle{ display: none;@@ -592,24 +415,6 @@ }
.section-text{ padding-bottom: 0rem; - } - - #projects h1 { - position: static; - font-size: 2rem; - text-align: center; - margin: 0 auto; - margin-bottom: 0.4rem; - width: 85%; - } - - #writeups h1 { - position: static; - font-size: 2rem; - text-align: center; - margin: 0 auto; - margin-bottom: 0.4rem; - width: 85%; } #project-cta{