diff --git a/layouts/index.html b/layouts/index.html index 9bf0246..f22e648 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -23,7 +23,8 @@ - + + {{ if site.GoogleAnalytics }} {{ template "_internal/google_analytics_async.html" . }} diff --git a/layouts/partials/cards/accomplishments.html b/layouts/partials/cards/accomplishments.html new file mode 100644 index 0000000..eb30388 --- /dev/null +++ b/layouts/partials/cards/accomplishments.html @@ -0,0 +1,35 @@ +
+
+ +
+
diff --git a/layouts/partials/sections/accomplishments.html b/layouts/partials/sections/accomplishments.html new file mode 100644 index 0000000..27483db --- /dev/null +++ b/layouts/partials/sections/accomplishments.html @@ -0,0 +1,18 @@ +{{ $sectionID := replace (lower .section.name) " " "-" }} +{{ if .section.id }} + {{ $sectionID = .section.id }} +{{ end }} + +
+ {{ if not (.section.hideTitle) }} +

{{ .section.name }}

+ {{ end }} + +
+
+ {{ range .certificates }} + {{ partial "cards/accomplishments" . }} + {{ end }} +
+
+
diff --git a/static/css/sections/accomplishments.css b/static/css/sections/accomplishments.css new file mode 100644 index 0000000..7a1aea5 --- /dev/null +++ b/static/css/sections/accomplishments.css @@ -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) { + } + \ No newline at end of file