Skip to content

GitLab

Commit 1ca9b1bd authored by Carl Schwan's avatar Carl Schwan 🚴
Browse files

Simplify layout of the documenation

parent 1814faf7
Hide whitespace changes
Inline Side-by-side
assets/scss/home.scss 0 → 100644
View file @ 1ca9b1bd
.bottomAlignRow div {
position: relative;
padding-bottom: 50px;
}
.bottomAlignRow div>a {
position: absolute;
bottom: 0px;
left: 15px;
right: 15px;
}
#develop-plateforms {
background-color: rgba(61,174,233,.1)
}
#kirigami {
background-color: rgba(218,68,83,.07);
}
main section {
margin-top: 0;
padding-top: 30px;
padding-bottom: 30px;
}
#top {
background: rgb(1,212,134);
background: linear-gradient(128deg, rgba(1,212,134,1) 0%, rgba(61,174,232,1) 100%);
text-shadow: 0 0 0px #fff;
color: white;
padding-bottom: 100px;
}
#top p {
font-size: 24px;
}
.kde-logo-big {
background-color: inherit;
font-family: glyph;
font-size: 7em;
}
.block-navs {
display: flex;
justify-content: space-between;
position: relative;
}
.tools {
display: flex;
justify-content: space-between;
}
p {
font-size: 20px;
}
.tool {
padding: 40px 10px;
flex-basis: 50%;
margin-left: 20px;
margin-right: 20px;
display: flex;
align-items: center;
text-align: center;
}
.tool, .block-nav {
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.1);
box-sizing: border-box;
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.15);
border-radius: 3px;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.tool:hover, .block-nav:hover {
border: 1px solid rgba(0, 0, 0, 0.1);
box-sizing: border-box;
box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.25);
border-radius: 3px;
}
.tool > img, .tool > div {
flex-basis: 50%;
color: black;
}
.tool .img {
vertical-align: middle;
}
.tool img {
width: 128px;
height: auto;
}
.block-nav {
margin-left: 20px;
margin-right: 20px;
max-width: 250px;
padding: 10px;
position: relative;
top: -30px;
background-color: white;
}
a.block-nav:hover {
transform: translateY(-1vh);
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
}
.block-nav *, .block-nav *:hover {
color: black;
}
.block-nav i {
font-size: 3em;
}
.block-nav:nth-child(2) {
top: -70px;
}
.phone-with-overlay {
position: absolute;
z-index: 33;
width: 20%;
left: -70px;
bottom: 0px;
}
.list-inline-item .learn-more::after {
padding-left: 0.3em;
margin-right: 0.7em;
}
main h1 {
font-size:36px;
}
main h2 {
font-size:32px;
}
main h3 {
font-size:26px;
}
.more-apps {
display: flex;
justify-content: space-around;
width: 100%;
}
.more-apps a {
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
}
.more-apps img {
width: 64px;
max-widht: 100%;
}
@media (max-width:768px) {
.block-navs {
flex-direction: column;
align-items: center;
}
.block-nav:nth-child(2), .block-nav {
top: -90px;
margin-top: 40px;
width: 90%;
max-width: 90%;
}
.phone-with-overlay {
width: 30%;
left: -70px;
}
.tools {
flex-direction: column;
}
.tools .tool {
margin-top: 3rem !important;
}
.tool div:nth-child(2) {
order: -1;
}
}
@media(prefers-color-scheme:dark) {
.tool,
.block-nav {
background-color: #31363b;
}
main h1,
.block-nav *,
.tool * {
color: #f1f1f1 !important;
}
}
.icons-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
grid-gap: 2rem;
}
.icons-grid-small {
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
.icons-grid img {
width: 100%;
height: auto;
}
.icons-grid i {
font-size: 300%;
}
#develop-hero {
background-image: url(https://kde.org/content/develop/devApps.png)
}
config.toml
View file @ 1ca9b1bd
......@@ -3,19 +3,10 @@ title = "Developer"
enableRobotsTXT = true
# Hugo allows theme composition (and inheritance). The precedence is from left to right.
theme = ["docsy"]
# Will give values to .Lastmod etc.
enableGitInfo = true
# Language settings
contentDir = "content/en"
defaultContentLanguage = "en"
defaultContentLanguageInSubdir = false
# Useful when translating.
enableMissingTranslationPlaceholders = true
disableKinds = ["taxonomy", "taxonomyTerm"]
# Highlighting config
......
content/_index.html 0 → 100644
View file @ 1ca9b1bd
---
title: "KDE Developer"
linkTitle: "KDE developer"
---
content/design.md 0 → 100644
View file @ 1ca9b1bd
---
title: Design
subtitle: Design beautiful, usable applications with KDE
weight: 10
menu:
main:
weight: 10
layout: area
---
<section>
<div class="container text-center">
<h2>Breeze Icons</h2>
<p>A collection of modern icons for your applications. Licensed under LGPL.</p>
<h3 class="mb-4">Collorful icons</h3>
<div class="mx-auto mb-4">
<div class="icons-grid">
<img src="https://kde.org/applications/icons/org.kde.Help.svg" alt="help icon" />
<img src="https://kde.org/applications/icons/org.kde.dolphin.svg" alt="folder icon" />
<img src="https://kde.org/applications/icons/org.kde.kfloppy.svg" alt="floppy icon" />
<img src="https://kde.org/applications/icons/org.kde.kolf.svg" alt="floppy icon" />
<img src="https://kde.org/applications/icons/org.kde.kmousetool.svg" alt="floppy icon" />
<img src="https://kde.org/applications/icons/org.kde.Help.svg" alt="floppy icon" />
<img src="https://kde.org/applications/icons/org.kde.ktimer.svg" alt="floppy icon" />
</div>
</div>
<h3 class="mb-4">Monochrome action icons</h3>
<div class="mx-auto mb-4">
<div class="icons-grid icons-grid-small">
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
<i class="icon icon_format-text-code"></i>
</div>
</div>
<div class="text-align"><a href="https://cgit.kde.org/breeze-icons.git/about/" class="learn-more">Learn more</a>
</div>
</section>
<section>
<div class="container text-center">
<h2>Cuttelfish</h2>
<p>Help you find the right icons for your applications</p>
<div class="text-center">
<img class="w-75 img-fluid shadow" src="https://origin.cdn.kde.org/screenshots/cuttlefish/cuttlefish.png" />
</div>
</div>
</section>
<section>
<div class="container text-center">
<h2>KDE Human Interface Guidelines</h2>
<p>The KDE Human Interface Guidelines (HIG) offer designers and developers a set of recommendations for producing beautiful, usable, and consistent user interfaces for convergent desktop and mobile applications and workspace widgets. Their aim is to improve the experience for users by making application and widget interfaces more consistent and hence more intuitive and learnable.</p>
<div class="text-center mt-3 mb-4">
<a href="https://hig.kde.org" class="learn-more">Learn More</a>
</div>
<a href="https://hig.kde.org"><img class="w-100 img-fluid" src="https://hig.kde.org/_images/HIGDesignVisionFullBleed.png" /></a>
</div>
</section>
content/develop.md 0 → 100644
View file @ 1ca9b1bd
---
title: Develop
subtitle: Develop featurful applications with KDE and Qt technologies
layout: area
linkTitle: Develop
weight: 20
menu:
main:
weight: 10
---
<section class="container">
<div style="max-width: 800px" class="mx-auto">
<p>
Focused on speed and multiplatform technologies, Qt is the fastest and smartest
way to produce industry-leading software that users love.
</p>
<p>
Use KDE Frameworks to solve common problems. Write your applications inside
KDevelop, the powerful KDE IDE. Improve the performace of your apps using
KDE profilers and ananalyse your application for common problems with the
Clazy static code analyser.
</p>
</div>
</section>
<section>
<div class="container">
<h2 class="text-center">KDE Frameworks</h2>
<p>
The KDE Frameworks build on the Qt framework, providing everything from
simple utility classes (such as those in KCoreAddons) to integrated
solutions for common requirements of desktop applications (such as
KNewStuff, for fetching downloadable add-on content in an application,
or the powerful KIO multi-protocol file access framework).
<p>
<p>
The KDE Frameworks can be used in CMake-based and QMake-based projects,
and most of them are portable to at least Windows, Mac and Linux. The
documentation of each framework has code snippets that show how to
include the framework in a QMake or CMake project.
</p>
<p>
The frameworks are divided into four tiers, based on the kind of
dependencies that they have. For instance, Tier 1 frameworks depend
on Qt and possibly some third-party libraries, but not on other
frameworks. This makes them easy to integrate into existing
applications.
</p>
<div class="d-flex justify-content-center">
<a href="/product/framework" class="button learn-more ml-2 mr-2">Learn More</a>
<a href="https://api.kde.org/frameworks/" class="ml-2 mr-2 button learn-more">Documentation</a>
</div>
</div>
</section>
<section id="kirigami">
<div class="text-center pl-5 pr-5 img-fluid container">
<h2>Develop Convergent Apps with Kirigami</h2>
<p>Kirigami is a new, convergent, responsive, elegant, and open cross-platform toolkit using QML.</p>
<div class="laptop-with-overlay text-center">
<img class="laptop img-fluid mb-3" src="https://kde.org/content/plasma-desktop/laptop.png" alt="">
<div class="laptop-overlay">
<img class="img-fluid mb-3" src="/develop/kirigami_code_view.png" alt="Kirigami application with source code" />
</div>
</div>
<a class="learn-more" href="https://kde.org/products/kirigami/">Learn more</a>
</div>
</section>
<section>
<div class="container text-center">
<h2>Tools</h2>
<p>KDE develops a variety of tools to help you develop the best applications you possibly can.</p>
<div class="tools">
<a class="tool" href="https://kdevelop.org">
<div>
<h3>KDevelop</h3>
<p>KDE's full-fledged development environment</p>
</div>
<div>
<img class="img-fluid" src="https://kde.org/applications/icons/org.kde.kdevelop.svg">
</div>
</a>
<a class="tool" href="https://kate-editor.org">
<div>
<h3>Kate</h3>
<p>KDE's lightweight but feature-rich text editor</p>
</div>
<div>
<img class="img-fluid" src="https://kde.org/applications/icons/org.kde.kate.svg">
</div>
</a>
</div>
<div class="tool flex-column mt-5">
<h3>And a lot more tools</h3>
<div class="more-apps">
<a href="https://umbrello.kde.org">
<img src="https://kde.org/applications/icons/org.kde.umbrello.svg" />
Umbrello
</a>
<a href="https://kde.org/applications/development/org.kde.clazy">
<img src="https://kde.org/applications/icons/org.kde.clazy.svg" />
Clazy
</a>
<a href="https://kde.org/applications/development/org.kde.kcachegrind">
<img src="https://kde.org/applications/icons/org.kde.kcachegrind.svg" />
KCacheGrind
</a>
<a href="https://kde.org/applications/development/org.kde.heaptrack">
<img src="https://kde.org/applications/icons/org.kde.heaptrack.svg" />
Heaptrack
</a>
<a href="https://kde.org/applications/development/org.kde.massif-visualizer">
<img src="https://kde.org/applications/icons/org.kde.massif-visualizer.svg" />
Massif-Visualizer
</a>
</div>
<a href="/applications/development" class="learn-more mt-3">See All Tools</a>
</div>
</div>
</section>
<section>
<div class="container">
<h2 style="margin-bottom: -20px;">Resources</h2>
<div class="row bottomAlignRow" style="border-bottom: solid 1px #EEE; padding-bottom: 20px;">
<div class="col-sm">
<h3>Getting Started tutorial</h3>
<p>
Learn how to develop a KDE application. From a simple dialog to a full featured application
integrated with Plasma and with translations.
</p>
<a href="/docs/" class="learn-more button">View documentation</a>
</div>
<div class="col-sm">
<h3>Kirigami Documentation</h3>
<p>
Want to create a convergent application for mobile and desktop? Learn how to do it here
</p>
<a href="/kirigami" class="learn-more button">View Documentation</a>
</div>
<div class="col-sm">
<h3>API Documentation</h3>
<p>
Api Documentation for each class and component in KDE Frameworks.
</p>
<a href="https://api.kde.org" class="learn-more button">View API</a>
</div>
</div>
</div>
</section>
content/distribute.md 0 → 100644
View file @ 1ca9b1bd
---
title: Distribute
titleLink: Distribute
subtitle: Get your applications to your user
weight: 30
menu:
main:
weight: 30
layout: area
---
<section>
<div class="container text-center">
<h2>Get your application to the Linux distributions</h2>
<p>Learn how to <a href="https://community.kde.org/ReleasingSoftware">release your software</a> and <a href="https://community.kde.org/ReleasingSoftware#Announcing_the_Release">announce the new release</a>, so that it get picked up by Linux distributions.</p>
</div>
</section>
<section>
<div class="container text-center">
<h2>Release your software yourself</h2>
<div class="tools">
<a class="tool" href="https://kdevelop.org">
<div>
<h3>Flatpak and Flathub</h3>
<p>
Flathub is a centralized repository of Flatpak apps. It provides a single point
of entry for distributing apps on the most popular Linux distributions.
</p>
</div>
<div>
<img class="img-fluid" src="/develop/flatpak_logo.png" alt="Flatpak logo" />
</div>
</a>
<a class="tool" href="https://kate-editor.org">
<div>
<h3>Snapcraft</h3>
<p>
Snapcraft is centralized repository for Snap apps. It provides a single point
of entry for distributing apps on the most popular Linux distributions.
</p>
</div>
<div>
<img class="img-fluid" src="/develop/snapcraft.png" alt="Snapcraft logo" />
</div>
</a>
</div>
</div>
</section>
<section>
<div class="container text-center">
<h2>TODO Windows</h2>
</div>
</section>
<section>
<div class="container text-center">
<h2>TODO macOS</h2>
</div>
</section>
<section>
<div class="container text-center">
<h2>TODO Android</h2>
</div>
</section>
<section>
<div class="container text-center">
<h2>KNewStuff</h2>
<p><a href="https://api.kde.org/frameworks/knewstuff/html/index.html">KNewStuff</a> let your users create and distribute addons for your application via <a href="https://store.kde.org">store.kde.org</a></p>
<img src="/develop/knewstuff.png" class="img-fluid" />
<a class="d-block learn-more" href="https://api.kde.org/frameworks/knewstuff/html/index.html">Learn more</a>
</div>
</section>
content/en/docs/_index.md → content/docs/_index.md
View file @ 1ca9b1bd
......@@ -2,10 +2,6 @@
---
title: "Documentation"
linkTitle: "Documentation"
weight: 20
menu:
main:
weight: 20
---
Lorem impsum
content/en/docs/getting-started/commandline/_index.md → content/docs/getting-started/commandline/_index.md
View file @ 1ca9b1bd
......@@ -17,7 +17,7 @@ Now that we have a text editor that can open and save files. We will now make th
Here we have done nothing but add a new `openFile` function which takes a `QUrl`. Again, we use a `QUrl` instead of a `QString` so that we can also work with remote files as if they were local.
{{< readfile file="/content/en/docs/getting-started/commandline/mainwindow.h" highlight="cpp" >}}
{{< readfile file="/content/docs/getting-started/commandline/mainwindow.h" highlight="cpp" >}}
### mainwindow.cpp
......@@ -25,7 +25,7 @@ There's no new code here, only rearranging. Everything from void `openFile()` ha
This way, we can call `openFile()` if we want to display a dialog, or we can call `openFile(const QUrl &)` if we know the name of the file already. Which will be the case when we feed the file name through the command line.
{{< readfile file="/content/en/docs/getting-started/commandline/mainwindow.cpp" highlight="cpp" >}}
{{< readfile file="/content/docs/getting-started/commandline/mainwindow.cpp" highlight="cpp" >}}
### main.cpp
......@@ -47,4 +47,4 @@ if (parser.positionalArguments().count() > 0) {
These are the changes:
{{< readfile file="/content/en/docs/getting-started/commandline/main.cpp" highlight="cpp" start="40" lines="13" >}}
{{< readfile file="/content/docs/getting-started/commandline/main.cpp" highlight="cpp" start="40" lines="13" >}}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment