FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP: need help adding above 6 sections doesnt fit navbar

Browse source
This commit is contained in:
HenzelMoras 2021-03-24 19:46:10 +05:30
parent 1c3154d47a
commit 8abdd621d0
4 changed files with 167 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
layouts/index.html
View file

@ -23,7 +23,8 @@
<link rel="stylesheet" href="{{ "/css/sections/projects.css" | relURL }}"/>
<link rel="stylesheet" href="{{ "/css/sections/recent-posts.css" | relURL }}"/>
<link rel="stylesheet" href="{{ "/css/sections/achievements.css" | relURL }}"/>
<link rel="stylesheet" href="{{ "/css/sections/accomplishments.css" | relURL }}"/>
<!-- Add Google Analytics if enabled in configuration -->
{{ if site.GoogleAnalytics }}
{{ template "_internal/google_analytics_async.html" . }}

35
layouts/partials/cards/accomplishments.html Normal file
View file

@ -0,0 +1,35 @@
<div
class="col-sm-12 col-md-6 col-lg-4 p-2 filtr-item"
>
<div class="card mt-1">
<div class="card">
<a class="card-header">
<div>
<div class="d-flex">
{{ if .logo }}
{{ $logoImage:= resources.Get .logo}}
{{ if $logoImage }}
{{ $logoImage := $logoImage.Fit "24x24" }}
<img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
{{ end }}
{{ end }}
<h6 class="card-title mb-0">{{ .name }}</h6>
</div>
<div class="sub-title ml-2 pl-4 ">
<span>{{ .organization }}</span>
<span>{{ .timeline }}</span>
</div>
</div>
</a>
<div class="card-body text-justify pt-1 pb-1">
<p class="ml-2 mb-2 pl-2 ">{{ .overview | markdownify }}</p>
<!-- Display certificate discription and link -->
<a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ if .url }}{{ .url }}{{ else }}#accomplishments{{ end }}" target="_blank" role="button">see certificate</a>
</div>
</div>
</div>
</div>

18
layouts/partials/sections/accomplishments.html Normal file
View file

@ -0,0 +1,18 @@
{{ $sectionID := replace (lower .section.name) " " "-" }}
{{ if .section.id }}
{{ $sectionID = .section.id }}
{{ end }}
<div class="container-fluid anchor pb-5 accomplishments-section" id="{{ $sectionID }}">
{{ if not (.section.hideTitle) }}
<h1 class="text-center">{{ .section.name }}</h1>
{{ end }}
<div class="container">
<div class="row" id="acomplishment-card-holder">
{{ range .certificates }}
{{ partial "cards/accomplishments" . }}
{{ end }}
</div>
</div>
</div>

112
static/css/sections/accomplishments.css Normal file
View file

@ -0,0 +1,112 @@
.accomplishments-section .card .card-header {
background-color: #f9fafc;
padding: 0.7rem;
padding-bottom: 0rem;
text-decoration: none;
}
.accomplishments-section .card .card-img-xs {
margin-right: 0.5rem;
}
.card .card-header .sub-title span:nth-child(1) {
float: left;
}
.card .card-header .sub-title span:nth-child(2) {
float: right;
}
.accomplishments-section .card .card-body {
padding: 0.7rem;
}
.accomplishments-section .card .card-header .sub-title {
color: #8392a5;
margin-top: 0.4rem;
}
/* ============= Device specific fixes ======= */
/* Large screens such as TV */
@media only screen and (min-width: 1824px) {
}
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1400px) {
}
@media (max-width: 1200px) {
}
/* IPad Pro */
@media (max-width: 1024px) {
.accomplishments-section {
padding-left: 0;
padding-right: 0;
width: 100%;
}
.accomplishments-section .container {
max-width: 100%;
}
.accomplishments-section {
padding: 0;
}
.accomplishments-section {
padding-left: 0.2rem;
padding-right: 0.2rem;
}
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
}
/* Medium devices (tablets, 768px and up) */
@media only screen and (max-width: 768px) {
.accomplishments-section {
padding-left: 0;
padding-right: 0;
width: 100%;
}
.accomplishments-section .container {
max-width: 100%;
}
.accomplishments-section {
padding: 0;
}
.accomplishments-section {
padding-left: 0.2rem;
padding-right: 0.2rem;
flex: 50%;
max-width: calc(100% / 2 - 0.2rem);
}
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {
.accomplishments-section .btn {
margin-top: 0.3125rem;
}
.accomplishments-section {
flex: 100%;
max-width: 100%;
}
}
/* iPhoneX, iPhone 6,7,8 */
@media only screen and (max-width: 375px) {
}
/* Galaxy S5, Moto G4 */
@media only screen and (max-width: 360px) {
}
/* iPhone 5 or before */
@media only screen and (max-width: 320px) {
}