fix: header pictures

dvgamerr-app · Jan 24, 2024 · b380143 · b380143
1 parent 760d3b2
commit b380143
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/components/Section1Header.astro b/src/components/Section1Header.astro
@@ -59,16 +59,16 @@ const birthday = dayjs(experience.birthday)
   <div class="container">
     <div class="row">
       <div class="col-lg-9 col-md-11 col-sm-36">
-        <div class="profile-img d-flex justify-content-end d-md-block d-sm-none">
-          <Image src={photo} width={255} height={310} loading="lazy" alt="" />
+        <div class="profile-img justify-content-end d-md-flex">
+          <Image src={photo} width={510} height={620} loading="lazy" alt="" />
         </div>
       </div>
       <div class="col-lg-27 col-md-25 col-sm-36 name-wrapper">
         <div class="name">
           <ul class="d-print-none">
             <li><a href={langName==='en'?'/th':'/'}>{languages[langName]}</a></li>
           </ul>
-          <h1 class=" ">{resume.fullname}</h1>
+          <h1>{resume.fullname}</h1>
         </div>
         <span class="d-print-none th-label">{resume.job}</span>
         <span class="d-print-only th-label th-name">{resume.fullname_th}</span>
@@ -93,7 +93,7 @@ const birthday = dayjs(experience.birthday)
             <div class="personal language">
               <strong>
                 {Object.keys(resume.language).map(e => (
-                <div class="lang"> {e} <small class="level">({resume.language[e]})</small> </div>
+                <div class="lang"> {e} <small class="level d-md-block d-none">({resume.language[e]})</small> </div>
                 ))}
               </strong>
               <small>{t('head.language')}</small>
@@ -178,17 +178,17 @@ const birthday = dayjs(experience.birthday)
 
 .header {
   .profile-img img {
-    object-fit: cover;
-    max-width: 230px;
+    object-fit: contain;
+    max-height: 380px;
     width: 100%;
   }
 
   .name-wrapper {
-    margin-bottom: 2em;
+    margin: 1em 0 2em 0;
 
     > .name {
       display: flex;
-      align-items: center;
+      justify-items: flex-start;
       gap: .5em;
 
       > h1 {

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -430,6 +430,7 @@ ul {
 
 @media (max-width: 768px) {
   .section-title {
+    padding-top: 1em;
     text-align: left;
   }
   .section-title h2 {
@@ -689,6 +690,12 @@ ul {
   page-break-before: always;
 }
 
+@media print {
+  .section-wrpper {
+    margin: 2.5em 0;
+  }
+}
+
 .clear-p > p {
   margin-bottom: 0px !important;
 }