The repo tracks work progress for ura.design website redesign
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

152 lines
8.7 KiB

{{ define "main" }}
<main class="post py-5">
<div class="container-fluid">
<div class="container">
<h1 class="post-title mb-5">{{ .Title }}</h1>
{{- if .Content }}
<div class="content">{{ .Content }}</div>
{{- end }}
<div id="posts-filter" class="tab pb-4" role="tablist" aria-multiselectable="true">
<button type="button" role="tab" class="button-filter" aria-controls="allposts"
onclick="service(event, 'allposts')" id="firstopen" aria-selected="true">
{{ i18n "allPosts" }}</button>
{{ range (where .Site.RegularPages "Type" "categories") }}
<button type="button" role="tab" class="button-filter" aria-controls="{{ .Page.Params.id }}"
onclick="service(event, '{{ .Page.Params.id }}')" aria-selected="false">{{
.Page.Params.title }}</button>
{{ end }}
</div>
<div class="allposts tabcontentservice mt-3">
<div class="row">
{{ range first 1 (where .Site.RegularPages "Type" "blog") }}
<div class="col-xl-8 col-lg-12 col-12 pb-lg-0 pb-4">
<article class="first background-blue-50">
<img class="grayscale mb-lg-3 mb-0" src="{{ .Site.BaseURL }}{{ .Params.image }}" alt="{{ .Title }}" width="1000px" height="750px">
<div class="data">
<p class="info mb-1">{{ i18n "readingTime" .Page.ReadingTime }} / <strong><time datetime="{{ .Date.Format .Site.Params.dateform }}">{{ .Date.Format .Site.Params.dateform }}</time></strong></p>
<a class="title mb-2 stretched-link" href="{{ .Permalink }}">{{ .Title }}</a>
<p class="description mb-0 mt-2">{{ .Summary | truncate 200 }}</p>
</div>
</article>
</div>
{{ end }}
{{ range first 1 (after 1 (where .Site.RegularPages "Type" "blog")) }}
<div class="col-xl-4 col-lg-12 col-12">
<article class="card">
<img class="grayscale mb-3" src="{{ .Site.BaseURL }}{{ .Params.image }}" width="368px" height="276px" alt="{{ .Title }}">
<p class="info mb-1">{{ i18n "readingTime" .Page.ReadingTime }} / <strong><time datetime="{{ .Date.Format .Site.Params.dateform }}">{{ .Date.Format .Site.Params.dateform }}</time></strong></p>
<a class="title mb-2 stretched-link" href="{{ .Permalink }}">{{ .Title }}</a>
<p class="description mb-0">{{ .Summary | truncate 200 }}</p>
</article>
</div>
{{ end }}
</div>
<div class="row py-4">
{{- range first 3 (after 2 (where .Site.RegularPages "Type" "blog")) }}
<div class="col-xl-4 col-lg-12 col-12">
<article class="card">
<img class="grayscale mb-3" src="{{ .Site.BaseURL }}{{ .Params.image }}" width="368px" height="276px" alt="{{ .Title }}" loading="lazy">
<p class="info mb-1">{{ i18n "readingTime" .Page.ReadingTime }} / <strong><time datetime="{{ .Date.Format .Site.Params.dateform }}">{{ .Date.Format .Site.Params.dateform }}</time></strong></p>
<a class="title mb-2 stretched-link" href="{{ .Permalink }}">{{ .Title }}</a>
<p class="description mb-0">{{ .Summary | truncate 200 }}</p>
</article>
</div>
{{- end }}
</div>
<div class="row mx-0 schedule justify-content-between align-items-center">
<div class="col-xl-8 col-lg-8 col-12 pb-lg-0 pb-4">
<h2>Need design support?</h2>
<p class="mb-0">Schedule a 30min chat with us to find out how we can help</p>
</div>
<div class="col-xl-4 col-lg-4 col-12 d-flex justify-content-center mt-lg-0 mt-2 mb-lg-0 mb-3">
<a class="design" href="https://cal.ura.design/uradotdesign" target="_blank" rel="noopener noreferrer">Schedule a Chat</a>
</div>
</div>
<div class="row py-4">
{{- range after 5 (where .Site.RegularPages "Type" "blog") }}
<div class="col-xl-4 col-lg-12 col-12 pb-4">
<article class="card">
<p class="info mb-1">{{ i18n "readingTime" .Page.ReadingTime }} / <strong><time datetime="{{ .Date.Format .Site.Params.dateform }}">{{ .Date.Format .Site.Params.dateform }}</time></strong></p>
<a class="title mb-2 stretched-link" href="{{ .Permalink }}">{{ .Title }}</a>
<p class="description mb-0">{{ .Summary | truncate 200 }}</p>
</article>
</div>
{{- end }}
</div>
</div>
<div class="row">
{{- range (where .Site.RegularPages "Type" "blog") }}
<div class="{{ range .Params.categories }}{{ . | lower }}{{ end }} tabcontentservice col-xl-4 col-lg-12 col-12 pb-4 mt-0">
<article class="card">
<p class="info mb-1">{{ i18n "readingTime" .Page.ReadingTime }} / <strong><time datetime="{{ .Date.Format .Site.Params.dateform }}">{{ .Date.Format .Site.Params.dateform }}</time></strong></p>
<a class="title mb-2 stretched-link" href="{{ .Permalink }}">{{ .Title }}</a>
<p class="description mb-0">{{ .Summary | truncate 200 }}</p>
</article>
</div>
{{- end }}
<script>
document.getElementById("firstopen").click();
function service(evt, type) {
// Declare all variables
var i, tabcontentservice, tablinkservice;
// Get all elements with class="tabcontentservice" and hide them
tabcontentservice = document.getElementsByClassName("tabcontentservice");
for (i = 0; i < tabcontentservice.length; i++) {
tabcontentservice[i].style.display = "none";
}
// Get all elements with class="button-filter" and remove the class "active"
tablinkservice = document.getElementsByClassName("button-filter");
for (i = 0; i < tablinkservice.length; i++) {
tablinkservice[i].className = tablinkservice[i].className.replace(" selected", "");
tablinkservice[i].setAttribute("aria-selected", "false");
}
// Show the current tab, and add an "active" class to the button that opened the tab
// document.dataset(type).style.display = "block";
const className = "" + '.' + type + "";
const selectedItems = document.querySelectorAll(className);
const showSupport = document.getElementById("supportNeeded");
selectedItems.forEach(selectedItem => {
selectedItem.style.display = "block"
});
evt.currentTarget.className += " selected";
evt.currentTarget.setAttribute("aria-selected", "true");
showSupport.className.replace("shown", "");
if (type == "allposts") {
showSupport.className.replace("shown", "");
}
showSupport.className += " shown";
}
</script>
</div>
<div id="supportNeeded" class="row mx-0 schedule justify-content-between align-items-center">
<div class="col-xl-8 col-lg-8 col-12 pb-lg-0 pb-4">
<h2>Need design support?</h2>
<p class="mb-0">Schedule a 30min chat with us to find out how we can help</p>
</div>
<div class="col-xl-4 col-lg-4 col-12 d-flex justify-content-center mt-lg-0 mt-2 mb-lg-0 mb-3">
<a class="design" href="https://cal.ura.design/uradotdesign" target="_blank" rel="noopener noreferrer">Schedule a Chat</a>
</div>
</div>
</div>
</div>
</main>
{{ end }}