DilankaHer/my_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make experience layout to fit mobile

Browse Source
This commit is contained in:
Dilanka-H
2025-11-20 17:46:46 +07:00
parent 86c84dd6c0
commit 30a63f7433
3 changed files with 267 additions and 3176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3348
css/main.css
View File

File diff suppressed because it is too large Load Diff

2
views/index.html
View File

@@ -10,7 +10,7 @@
</head> </head>
<body <body
class="bg-primary dark:bg-darkprimary text-bodytext dark:text-darkbodytext flex flex-col min-h-screen" class="bg-primary dark:bg-darkprimary text-bodytext dark:text-darkbodytext text-sm md:text-lg flex flex-col min-h-screen"
> >
<div class="relative flex-grow"> <div class="relative flex-grow">
<div <div

49
views/partials/experience-partial.html
View File

@@ -1,22 +1,21 @@
{{ block "experience-partial" . }} {{ block "experience-partial" . }}
<h2 class="text-3xl font-bold m-6">Experience</h2> <h2 class="text-lg md:text-3xl font-bold m-6 mb-3">Experience</h2>
<div class="flex flex-row m-10 mb-4">
<p class="font-bold text-lg"> <div class="flex flex-row m-10 mb-2 mt-1 text-sm md:text-lg">
For all jobs mentioned below I was an employee of <section class="font-bold">
</p> For all jobs mentioned below I was an employee of <span class="italic underline">Idpassglobal</span>
<p class="font-bold text-lg italic underline ml-1.5">Idpassglobal</p> </section>
</div> </div>
<div class="m-10 mb-6"> <div class="m-10 mb-6">
{{ range . }} {{ template "experience-partial-range" . }} {{ end }} {{ range . }} {{ template "experience-partial-range" . }} {{ end }}
</div> </div>
{{ end }} {{block "experience-partial-range" . }} {{ end }} {{block "experience-partial-range" . }}
<div class="grid grid-cols-[7rem_1rem_auto]"> <div class="lg:grid grid-cols-[10rem_1rem_auto] hidden">
<!-- <div class="flex flex-row"> --> <div class="text-right font-bold leading-none">{{.StartFrom}}</div>
<div class="text-right font-bold text-xs leading-none">{{.StartFrom}}</div>
<!-- <div class="grid grid-cols-[1rem_auto] ml-2"> -->
<div class="flex flex-col items-center leading-none ml-2"> <div class="flex flex-col items-center leading-none ml-2">
<span class="w-2.5 h-2.5 rounded-full bg-black"></span> <span class="w-2.5 h-2.5 rounded-full bg-secondary dark:bg-white/20"></span>
<span class="w-0.5 flex-grow bg-black"></span> <span class="w-0.5 flex-grow bg-secondary dark:bg-white/20"></span>
</div> </div>
<div class="m-5"> <div class="m-5">
<div class="flex flex-row"> <div class="flex flex-row">
@@ -29,7 +28,31 @@
<li class="m-2">{{.}}</li> <li class="m-2">{{.}}</li>
{{ end }} {{ end }}
</ul> </ul>
<!-- </div> --> </div>
</div>
<div class="block lg:hidden">
<div class="flex flex-col space-y-2 font-semibold text-start text-sm p-4 rounded-lg border-2 border-secondary dark:border-darksecondary shadow-md">
<!-- Dates -->
<p>{{ .StartFrom }}</p>
<!-- Company + Type -->
<p>
{{ .Company }}
<span> – {{ .EmployeeType }}</span>
</p>
<!-- Position -->
<p>{{ .Position }}</p>
<!-- Tasks -->
<ul class="list-disc list-inside mt-2 space-y-1 font-normal">
{{ range .Tasks }}
<li class="leading-snug">{{ . }}</li>
{{ end }}
</ul>
</div> </div>
</div> </div>
{{ end }} {{ end }}