Skip to content

Commit

Permalink
New design (#37)
Browse files Browse the repository at this point in the history 
* Upgrade to newest Docsy

Signed-off-by: Ali Ok <aliok@redhat.com>

* Gonna modify navbar, checking in as is

Signed-off-by: Ali Ok <aliok@redhat.com>

* Center the content in navbar

Signed-off-by: Ali Ok <aliok@redhat.com>

* Hide search

Signed-off-by: Ali Ok <aliok@redhat.com>

* Don't show nav items as bold

Signed-off-by: Ali Ok <aliok@redhat.com>

* Redesigned home page

Signed-off-by: Ali Ok <aliok@redhat.com>

* Redesigned home page

Signed-off-by: Ali Ok <aliok@redhat.com>

* Upgrade Hugo version on Netlify

Signed-off-by: Ali Ok <aliok@redhat.com>

* Play with styles a bit

Signed-off-by: Ali Ok <aliok@redhat.com>

* Change hero images

Signed-off-by: Ali Ok <aliok@redhat.com>

* Improve things for mobile

Signed-off-by: Ali Ok <aliok@redhat.com>

* Fix link to ATOM

Signed-off-by: Ali Ok <aliok@redhat.com>

* Fix accordion

Signed-off-by: Ali Ok <aliok@redhat.com>

* Fix some pages

Signed-off-by: Ali Ok <aliok@redhat.com>

* Fix methodology page

Signed-off-by: Ali Ok <aliok@redhat.com>

* Update OG cards (meta tag images)

Signed-off-by: Ali Ok <aliok@redhat.com>

* Adapt English landing page to new design

Signed-off-by: Ali Ok <aliok@redhat.com>

---------

Signed-off-by: Ali Ok <aliok@redhat.com>
  • Loading branch information
@aliok
aliok committed Feb 19, 2024
1 parent 1c81c0a commit 34d5f2d
Show file tree
Hide file tree
Showing 30 changed files with 299 additions and 143 deletions.
67 changes: 67 additions & 0 deletions assets/scss/_styles_project.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,18 @@
}
}

// navbar is fixed in md, but not in others.
// so, add some padding to avoid the content to be hidden by the navbar
// style from large breakpoint and down
main {
padding-top: 6rem;
}
@include media-breakpoint-down(md) {
main {
padding-top: 1rem;
}
}

// logo font to use in the navbar
@import url('https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap');

Expand Down Expand Up @@ -42,6 +54,10 @@
font-family: 'Maven Pro', sans-serif;
font-size: 1.5em;
}

.nav-link {
font-weight: 500;
}
}

footer {
Expand All @@ -62,3 +78,54 @@ footer {
.td-sidebar-toc{
padding-top: 1.75rem;
}

.hero{
.image-container{
overflow: hidden;
border: 1px solid #aaa;

img{
opacity: 0.9;
&:hover{
opacity: 1;
}
}
}

.lead{
padding-top: 0.5rem;
padding-left: 0.5rem;
}
}

.lead-display{
@extend .fs-4;
@extend .fw-light;
@extend .lh-sm;
letter-spacing: 0.1rem;
}

.lead-display-sm{
@extend .fs-5;
@extend .fw-light;
@extend .lh-sm;
letter-spacing: 0.1rem;
}

.lead-display-xs{
@extend .fs-6;
@extend .fw-light;
@extend .lh-sm;
}

@include media-breakpoint-up(lg) {
.lead-display {
font-size: 2rem !important;
}
.lead-display-sm {
font-size: 1.5rem !important;
}
.lead-display-xs {
font-size: 1.25rem !important;
}
}
10 changes: 10 additions & 0 deletions assets/scss/_variables_project.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,13 @@ $light: #ebfdf8 !default; // TODO: consider using BS value

$google_font_name: "Open Sans";
$google_font_family: "Open+Sans:300,300i,400,400i,700,700i";


$accordion-color: #333;
$accordion-bg: white;
$accordion-border-color: #ccc;
$accordion-button-bg: rgba(0, 0, 0, 0.03);
$accordion-button-active-bg: rgba(0, 0, 0, 0.08);
$accordion-button-active-color: #333;
$accordion-button-focus-box-shadow: 0 0 0 0.05rem rgba(0, 0, 0, 0.25);
//$accordion-button-focus-box-shadow: 0 0 0 0.25rem red;
9 changes: 4 additions & 5 deletions config.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ time_format_blog = "02.01.2006"
weight = 1
[languages.tr.params]
# First one is picked as the Twitter card image if not set on page.
images = ["images/open-tr-banner-01-opengraph-card.png"]
images = ["images/open-tr-banner-02-opengraph-card.png"]

[languages]
[languages.en]
Expand All @@ -81,7 +81,7 @@ contentDir = "content/en"
weight = 2
[languages.en.params]
# First one is picked as the Twitter card image if not set on page.
images = ["images/open-tr-banner-01-opengraph-card-en.png"]
images = ["images/open-tr-banner-02-opengraph-card-en.png"]

[markup]
[markup.goldmark]
Expand Down Expand Up @@ -143,8 +143,7 @@ github_repo = "https://github.com/OpenTRFoundation/opentr"
github_branch= "main"

# Google Custom Search Engine ID. Remove or comment out to disable search.
# TODO: to be updated
gcs_engine_id = "1637cc6af98914810"
# gcs_engine_id = "1637cc6af98914810"

# Enable Algolia DocSearch
algolia_docsearch = false
Expand Down Expand Up @@ -235,7 +234,7 @@ enable = false
extended = true
min = "0.111.0"
[[module.imports]]
path = "github.com/OpenTRFoundation/opentr-docsy-custom"
path = "github.com/google/docsy"
disable = false
[[module.imports]]
path = "github.com/google/docsy/dependencies"
Expand Down
40 changes: 21 additions & 19 deletions content/en/_index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,43 @@

+++

<div class="container text-center" style="margin-top: 4rem;">
<img src="/images/open-tr-banner-01-website-en.png" style="width: 100%; height: auto; text-align: center;"/>
<div class="container text-center">
<p class="lead-display">OpenTR provides open source strategy and guidance for organizations and individuals in Turkey.</p>
</div>

<h3 class="display-6">OpenTR provides open source strategy and guidance for organizations and individuals in Turkey.</h3>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<a class="hero text-decoration-none text-reset" href="https://state.opentr.foundation" target="_blank">
<div class="image-container rounded-4">
<img src="/images/state-of-open-source-contrib-report-1200x600.png" class="img-fluid"/>
</div>
<p class="lead">
OpenTR's report, "State of Open Source Contribution in Turkey", is published!
</p>
</a>
</div>
</div>
</div>

<div class="container py-5 text-center">
<h4 style="text-align: left">
<div class="container py-3 text-center">
<h4 class="lead-display" style="text-align: left">
As OpenTR, we believe in the power of open source and related initiatives to support development in Turkey, increase collaboration, and create positive social impact.
</h4>

<h4 style="text-align: left">
<h4 class="lead-display-sm mt-3" style="text-align: left">
To harness this power, we provide free and independent documents, data, guidance, and strategies for organizations and individuals.
</h4>

<h4 style="text-align: left">
While we collaborate with an international audience, OpenTR's audience is Turkish personas, and we provide our content in Turkish at this moment.
<h4 class="lead-display-sm mt-3" style="text-align: left">
While we collaborate with international communities, OpenTR's audience is individuals and organizations in Turkey. We provide our content in Turkish at this moment.
</h4>

<div>
<a class="btn btn-outline-primary btn-lg my-3 p-3" href="/tr/" role="button">🇹🇷 Switch to Turkish website</a>
</div>
</div>

<div class="container py-5 text-center bg-secondary">
<h2>
<span class="badge badge-primary">New</span>
OpenTR's report on open source ecosystem in Turkey, <i>"State of Open Source Contribution in Turkey"</i>, is published!
</h2>

<h3>
You can reach the report at <a target="_blank" href="https://state.opentr.foundation">https://state.opentr.foundation <i class="fa-solid fa-arrow-up-right-from-square"></i></a>.
</h3>
</div>

<div class="container" style="margin-top: 0; font-size: larger;">
<div class="text-center mt-1">
{{% markdown %}}### Activities{{% /markdown %}}
Expand Down
167 changes: 88 additions & 79 deletions content/tr/_index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,101 +4,110 @@

+++

<div class="container text-center" style="margin-top: 4rem;">
<img src="/images/open-tr-banner-01-website.png" style="width: 100%; height: auto; text-align: center;"/>
<div class="container text-center">
<p class="lead-display">OpenTR, Türkiye'deki kuruluşlar ve bireyler için açık kaynak stratejisi ve rehberliği sağlayan bir oluşumdur.</p>
</div>

<h3 class="display-6">OpenTR, Türkiye'deki kuruluşlar ve bireyler için açık kaynak stratejisi ve rehberliği sağlayan bir oluşumdur.</h3>
<div class="container mt-5">
<div class="row">
<div class="col-lg-8">
<a class="hero text-decoration-none text-reset" href="https://state.opentr.foundation" target="_blank">
<div class="image-container rounded-4">
<img src="/images/state-of-open-source-contrib-report-1200x600.png" class="img-fluid"/>
</div>
<p class="lead">
OpenTR’nin "Türkiye’de Açık Kaynağa Katkının Durumu" raporu yayınlandı.
</p>
</a>
</div>
<div class="col-lg-4 mt-lg-0 mt-5">
<a class="hero text-decoration-none text-reset" href="/docs/getting-started/">
<div class="image-container rounded-4">
<img src="/images/opentr-hero-01.png" class="d-none d-lg-block img-fluid"/>
<img src="/images/opentr-hero-01-horizontal.png" class="d-lg-none img-fluid"/>
</div>
<p class="lead">
Açık kaynak projelere katkı yapmak için stratejiye ihtiyacınız var!
</p>
</a>
</div>
<div class="col-lg-4 mt-lg-0 mt-5">
<a class="hero text-decoration-none text-reset" href="/docs/introduction-to-open-source/">
<div class="image-container rounded-4">
<img src="/images/opentr-hero-02.png" class="d-none d-lg-block img-fluid"/>
<img src="/images/opentr-hero-02-horizontal.png" class="d-lg-none img-fluid"/>
</div>
<p class="lead">
Açık kaynak nedir? Faydası nedir? Tarihçesi nedir?
</p>
</a>
</div>
<div class="col-lg-8 mt-lg-0 mt-5">
<a class="hero text-decoration-none text-reset" href="/atom/">
<div class="image-container rounded-4">
<img src="/images/atom-logo-horizontal-hero-1200-600.png" class="img-fluid"/>
</div>
<p class="lead">
ATOM Mentorluk programının yeni dönemi başlıyor!
</p>
</a>
</div>
</div>
</div>

<div class="container py-5 text-center">
<h4 style="text-align: left">
<div class="container py-3 text-center">
<h4 class="lead-display" style="text-align: left">
OpenTR olarak, açık kaynak ve beraberindekilerin Türkiye'de gelişimi destekleme, işbirliğini artırma ve olumlu sosyal etki yaratma gücünü ciddiye alıyoruz.
</h4>

<h4 style="text-align: left">
<h4 class="lead-display-sm mt-3" style="text-align: left">
Bu gücü kullanmak için, kuruluşlar ve bireyler için ücretsiz ve bağımsız olarak belgeler, veri, rehberlik ve strateji sağlıyoruz.
</h4>

<div>
<a class="btn btn-outline-primary btn-lg my-3 p-3" href="about/" role="button">Daha fazla bilgi</a>
<a class="btn btn-outline-primary btn-lg my-3 p-3" href="/about/" role="button">Daha fazla bilgi</a>
</div>
</div>

<div class="container py-5 text-center bg-secondary">
<h2>
<span class="badge badge-primary">Yeni</span>
OpenTR'nin Türkiye'deki açık kaynak ekosistemi üzerine hazırladığı <i>"Türkiye'de Açık Kaynağa Katkının Durumu"</i> raporu yayınlandı!
</h2>

<h3>
Rapora <a target="_blank" href="https://state.opentr.foundation">https://state.opentr.foundation <i class="fa-solid fa-arrow-up-right-from-square"></i></a> adresinden ulaşabilirsiniz.
</h3>
</div>

<div class="container text-center mt-5">
<h4 style="text-align: left">
"Neden açık kaynak ve topluluklarla ilişkim olmalı?"
</h4>
<h4 style="text-align: left">
"Açık kaynak stratejisi nedir?"
</h4>
<h4 style="text-align: left">
"Ne elde edeceğim?"
</h4>
<h4 style="text-align: left">
"Nereden başlamalıyım?"
</h4>

<h4 style="text-align: left">
Kuruluşunuz veya birey olarak kendiniz için bu soruları yanıtlamak istiyorsanız, aşağıdaki başlangıç rehberlerimizi inceleyebilirsiniz.
</h4>

<div>
<a class="btn btn-outline-primary btn-lg my-3 mx-2 p-3" href="/docs/getting-started/organizations/" role="button">Kuruluş Başlangıç Rehberi</a>
<a class="btn btn-outline-primary btn-lg my-3 mx-2 p-3" href="/docs/getting-started/individuals/" role="button">Birey Başlangıç Rehberi</a>
<div class="container-fluid mt-5 pb-5" style="background-color: #f3f3f3;">
<div class="container">
<div class="row">
<div class="col-lg-6 mt-5 px-0 px-md-3">
<div class="bg-white rounded-4 px-2 px-md-5" style="height: 100%;">
<div style="text-align: center;">
<img src="/images/open-tr-01-river-red-700x112.png" style="width: 50%;" class="mt-1"/>
</div>
<p style="text-align: center;" class="mt-3 mb-3 lead-display">
Haberdar olun
</p>
<p class="lead-display-xs">
OpenTR’nin etkinliklerinden ve duyurularından haberdar olmak için sosyal medya hesaplarımızı takip edebilir veya e-posta listemize kaydolabilirsiniz.
</p>
<div style="text-align: center;">
<a class="btn btn-outline-primary btn-lg my-3 p-2 p-md-3" href="/contact/" role="button">Takip Et</a>
</div>
</div>
</div>
<div class="col-lg-6 mt-5 px-0 px-md-3">
<div class="bg-white rounded-4 px-2 px-md-5" style="height: 100%;">
<div style="text-align: center;">
<img src="/images/open-tr-01-river-green-700x112.png" style="width: 50%; transform: rotateY(180deg);" class="mt-1"/>
</div>
<p style="text-align: center;" class="mt-3 mb-3 lead-display">
Bize katılın
</p>
<p class="lead-display-xs">
Birlikte daha güçlüyüz. OpenTR’nin çalışmalarına katılmak, katkıda bulunmak ve fikirlerinizi paylaşmak için bize katılın.
</p>
<div style="text-align: center;">
<a class="btn btn-outline-primary btn-lg my-3 p-2 p-md-3" href="/contact/#topluluk" role="button">Topluluğa Katıl</a>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="container" style="margin-top: -2rem;">
{{< blocks/section color="white" type="row" >}}

{{% blocks/feature icon="fa-book" title="Belgelerimize gözatın" %}}
OpenTR'nin ana çıktısı olan belgelerimiz, açık kaynak stratejisi ve rehberliği sağlamak için oluşturulmuştur.
Hedef kitlemizdeki farklı personalar için farklı belgeler bulabirsiniz.

[Belgeler](/docs)
{{% /blocks/feature %}}

{{% blocks/feature icon="fa-bullseye" title="Çalışma şeklimizi öğrenin" %}}
OpenTR, üzerinde çalıştığı problemin yapısına uygun strateji ve metodoji kullanır.
Odak alanlarımıza yönelik veri ve belge odaklı çıktılar, time-boxed çalışma dönemleri sonunda rapor olarak sunulur.

[Hakkımızda](/about)
{{% /blocks/feature %}}

{{% blocks/feature icon="fa-bullhorn" title="Haberdar olun" %}}
OpenTR'nin etkinliklerinden, duyurularından ve güncellemelerinden haberdar olmak için sosyal medya hesaplarımızı takip edebilir
veya e-posta listemize kaydolabilirsiniz.

[İletişim](/contact)
{{% /blocks/feature %}}

{{% blocks/feature icon="fa-users" title="Bize katılın" %}}
Birlikte daha güçlüyüz. OpenTR'nin çalışmalarına katılmak, katkıda bulunmak
ve fikirlerinizi paylaşmak için bize katılın.

[Topluluk](/contact/#topluluk)
{{% /blocks/feature %}}

<!--{{% blocks/feature icon="fa-brands fa-github" title="Blogumuza bakın" %}}-->
<!--Blog-->

<!--[Blog](/blog)-->
<!--{{% /blocks/feature %}}-->

{{< /blocks/section >}}
</div>

<!--TODO: short summaries of the latest blog posts-->
<!--<div class="container my-lg-5 my-2">-->
<!-- <h1 class="display-6 text-center">Duyurular</h1>-->
Expand Down

0 comments on commit 34d5f2d

Please sign in to comment.