more responsive improvements and refactoring
Prithu Goswami prithugoswami524@gmail.com
Thu, 07 May 2020 21:06:29 +0530
2 files changed,
49 insertions(+),
70 deletions(-)
M
hugo-site/layouts/index.html
→
hugo-site/layouts/index.html
@@ -4,26 +4,26 @@ <body>
{{ partial "nav.html" }} - <section id="intro"> + <section id="intro" class="page-section"> <div class="container"> - <svg id="stripes-green" width="237" xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 237 209" preserveAspectRatio="xMidYMid meet"> - <rect x="21" y="16" width="162" height="13" rx="6" transform="rotate(39 21 16)" fill="#8BEF89"/> - <rect x="52" y="68" width="205" height="13" rx="6" transform="rotate(39 52 68)" fill="#8BEF89"/> - <rect x="44" y="8" width="189" height="13" rx="6" transform="rotate(39 44 8)" fill="#8BEF89"/> - <circle cx="152" cy="132" r="6" transform="rotate(39 152 132)" fill="#8BEF89"/> - <circle cx="38" cy="65" r="6" transform="rotate(39 38 65)" fill="#8BEF89"/> - </svg> - <svg id="stripes-purp"width="204" xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 204 182" preserveAspectRatio="xMidYMid meet"> - <rect x="21" y="16" width="162" height="13" rx="6" transform="rotate(39 21 16)" fill="#B554E3"/> - <rect x="52" y="68" width="162" height="13" rx="6" transform="rotate(39 52 68)" fill="#B554E3"/> - <rect x="44" y="8" width="162" height="13" rx="6" transform="rotate(39 44 8)" fill="#B554E3"/> - <circle cx="152" cy="132" r="6" transform="rotate(39 152 132)" fill="#B554E3"/> - <circle cx="38" cy="65" r="6" transform="rotate(39 38 65)" fill="#B554E3"/> - </svg> + <div class="shadow-box"> + <svg id="stripes-green" width="237" xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 237 209" preserveAspectRatio="xMidYMid meet"> + <rect x="21" y="16" width="162" height="13" rx="6" transform="rotate(39 21 16)" fill="#8BEF89"/> + <rect x="52" y="68" width="205" height="13" rx="6" transform="rotate(39 52 68)" fill="#8BEF89"/> + <rect x="44" y="8" width="189" height="13" rx="6" transform="rotate(39 44 8)" fill="#8BEF89"/> + <circle cx="152" cy="132" r="6" transform="rotate(39 152 132)" fill="#8BEF89"/> + <circle cx="38" cy="65" r="6" transform="rotate(39 38 65)" fill="#8BEF89"/> + </svg> + <svg id="stripes-purp"width="204" xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 204 182" preserveAspectRatio="xMidYMid meet"> + <rect x="21" y="16" width="162" height="13" rx="6" transform="rotate(39 21 16)" fill="#B554E3"/> + <rect x="52" y="68" width="162" height="13" rx="6" transform="rotate(39 52 68)" fill="#B554E3"/> + <rect x="44" y="8" width="162" height="13" rx="6" transform="rotate(39 44 8)" fill="#B554E3"/> + <circle cx="152" cy="132" r="6" transform="rotate(39 152 132)" fill="#B554E3"/> + <circle cx="38" cy="65" r="6" transform="rotate(39 38 65)" fill="#B554E3"/> + </svg> - <div class="shadow-box"> <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" />@@ -33,11 +33,9 @@ <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> - <div class="head-text"> - <h1>Prithu Goswami</h1> - </div> + <h1>Prithu Goswami</h1> - <div class="intro-text"> + <div id="intro-text"> <p> Hey there, I am Prithu Goswami. I am currently studying at PES University South Campus, Bangalore(PESIT-BSC) where I am persuing@@ -76,7 +74,6 @@ <img src="/img/twitter.svg">
</div> </a> </div> - </div> </div> <div id="socials-2">@@ -113,7 +110,7 @@ {{ range .Site.Data.projects }}
<a href="{{ .url }}" target="_blank"> <div class="section-item"> <h2>{{ .title }}</h2> - <p>{{ .description }}</p> + <p class="section-sub-text">{{ .description }}</p> </div> </a> {{ end }}@@ -132,7 +129,7 @@ {{ range sort (where .Site.RegularPages "Section" "posts") "Date" }}
<a href="{{ .RelPermalink }}" target="_blank"> <div class=section-item> <h2>{{ .Title }}</h2> - <p>{{ with .Params.description }}{{ . }}{{ else }}{{.Summary | truncate 110 }}{{ end }}</p> + <p class="section-sub-text">{{ with .Params.description }}{{ . }}{{ else }}{{.Summary | truncate 110 }}{{ end }}</p> <!-- <p>{{ .Date.Format "2 Jan 2006" }}<p> --> </div> </a>
M
hugo-site/static/css/main.css
→
hugo-site/static/css/main.css
@@ -61,16 +61,19 @@ font-weight: 700;
color: black; } +/* #intro{ */ +/* margin: 0 auto; */ +/* display:flex; */ +/* flex-flow: column; */ +/* margin-top: 6rem; */ +/* } */ + #intro{ - width: 90%; - max-width: 900px; - margin: 0 auto; - position: relative; - margin-top: 100px; + margin-top: 6rem; } .container{ - width: auto; + width: 65%; margin: 0 auto; position: relative; }@@ -105,37 +108,18 @@ color: #BCBCBC;
} -.head-text { +#intro h1 { position: absolute; top: -40px; right: -130px; color: #414141; line-height: 1; -} - -.sub-head{ - font-weight:700; - font-size: 48px; - position: absolute; - top: -35px; - left: -50px; - color: #242424; - text-shadow: 0 4px 7px rgba(0,0,0,0.2); -} - -.head-text h1{ font-size: 64px; font-weight: 700; text-shadow: 0 4px 7px rgba(0,0,0,0.2); } -.head-text h2{ - font-size: 20px; - font-weight: 500; - padding-left: 3px; -} - -.intro-text{ +#intro-text{ padding: 6rem; font-weight: 300; font-size: 1.1rem;@@ -172,15 +156,17 @@
#stripes-green{ width: 237px; position: absolute; - top: -60px; - right: 0px; + top: -4rem; + right: -8rem; + z-index: -1; } #stripes-purp{ width: 204px; position: absolute; - bottom: -75px; - left: 40px; + bottom: -5rem; + left: -5rem; + z-index: -1; }@@ -250,10 +236,10 @@ text-shadow: none;
} .page-section{ + margin: 0 auto; display: flex; flex-flow: column; - margin-top: 10rem; - margin-bottom: 5rem; + margin-bottom: 10rem; } #writeups a:hover{@@ -296,7 +282,7 @@ #writeups h2 {
color: #4ED44C; } -.page-section p{ +.page-section .section-sub-text{ margin-left: 1.6rem; margin-bottom: 1rem; }@@ -356,11 +342,11 @@ flex-flow: column;
align-items: center ; } - .head-text { + #intro h1 { display: none; } - .shadow-box{ + .container{ width: 85%; }@@ -381,7 +367,7 @@ left: calc(50% - 60px);
box-shadow: 0 7px 10px rgba(0,0,0,0.25); } - .intro-text{ + #intro-text{ padding: 0 3rem; padding-top: 5rem; padding-bottom: 4rem;@@ -404,15 +390,15 @@
#stripes-green { width: 150px; position: absolute; - top: -60px; - right: 0px; + top: -4rem; + right: -2.5rem; } #stripes-purp { width: 140px; position: absolute; - bottom: -65px; - left: -10px; + bottom: -4rem; + left: -3rem; } #projects {@@ -451,10 +437,6 @@ width: 85%;
} #project-cta{ - background: #B554E3; - color: white; - box-shadow: 0px 7px 7px rgba(0,0,0,0.15); - transform: none; position: relative; left: calc(70% - 70px); top: 1.5rem;