diff --git a/HIG/.kateconfig b/HIG/.kateconfig new file mode 100644 index 0000000..5538a8b --- /dev/null +++ b/HIG/.kateconfig @@ -0,0 +1,2 @@ +kate: space-indent on; tab-width 4; indent-width 4; replace-tabs on; eol unix; +kate-wildcard(*.rst): word-wrap-column 80; word-wrap on; diff --git a/HIG/source/conf.py b/HIG/source/conf.py index 2bd3b72..05ffc89 100644 --- a/HIG/source/conf.py +++ b/HIG/source/conf.py @@ -1,215 +1,220 @@ #!/usr/bin/env python3 # -*- coding: utf-8 -*- # # KDE HIG documentation build configuration file, created by # sphinx-quickstart on Tue Feb 6 13:29:47 2018. # # This file is execfile()d with the current directory set to its # containing dir. # # Note that not all possible configuration values are present in this # autogenerated file. # # All configuration values have a default; values that are commented out # serve to show the default. # If extensions (or modules to document with autodoc) are in another directory, # add these directories to sys.path here. If the directory is relative to the # documentation root, use os.path.abspath to make it absolute, like shown here. # import os import sys sys.path.insert(0, os.path.abspath('.')) sys.path.insert(0, os.path.abspath('../..')) # -- General configuration ------------------------------------------------ # If your documentation needs a minimal Sphinx version, state it here. # # needs_sphinx = '1.0' # Add any Sphinx extension module names here, as strings. They can be # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom # ones. extensions = ['sphinx.ext.todo'] # Add any paths that contain templates here, relative to this directory. templates_path = ['_templates'] # The suffix(es) of source filenames. # You can specify multiple suffix as a list of string: # # source_suffix = ['.rst', '.md'] source_suffix = '.rst' # The master toctree document. master_doc = 'index' # General information about the project. project = 'Human Interface Guidelines' copyright = '2019, KDE. Licensed under Creative Commons License SA 4.0' author = 'KDE' # The version info for the project you're documenting, acts as replacement for # |version| and |release|, also used in various other places throughout the # built documents. # # The short X.Y version. version = '' # The full version, including alpha/beta/rc tags. release = '' # The language for content autogenerated by Sphinx. Refer to documentation # for a list of supported languages. # # This is also used if you do content translation via gettext catalogs. # Usually you set "language" from the command line for these cases. language = None # List of patterns, relative to source directory, that match files and # directories to ignore when looking for source files. # This patterns also effect to html_static_path and html_extra_path exclude_patterns = [] # The name of the Pygments (syntax highlighting) style to use. pygments_style = 'sphinx' # If true, `todo` and `todoList` produce output, else they produce nothing. todo_include_todos = True # -- Options for HTML output ---------------------------------------------- # The theme to use for HTML and HTML Help pages. See the documentation for # a list of builtin themes. # html_theme = 'sphinx_rtd_theme' # Theme options are theme-specific and customize the look and feel of a theme # further. For a list of options available for each theme, see the # documentation. # # html_theme_options = {} # Add any paths that contain custom static files (such as style sheets) here, # relative to this directory. They are copied after the builtin static files, # so a file named "default.css" will overwrite the builtin "default.css". html_static_path = ['_static'] # Custom sidebar templates, must be a dictionary that maps document names # to template names. # # This is required for the alabaster theme # refs: http://alabaster.readthedocs.io/en/latest/installation.html#sidebars html_sidebars = { '**': [ 'relations.html', # needs 'show_related': True theme option to display 'searchbox.html', ] } # -- Options for HTMLHelp output ------------------------------------------ # Output file base name for HTML help builder. htmlhelp_basename = 'KDEHIGdoc' # -- Options for LaTeX output --------------------------------------------- latex_elements = { # The paper size ('letterpaper' or 'a4paper'). # # 'papersize': 'letterpaper', # The font size ('10pt', '11pt' or '12pt'). # # 'pointsize': '10pt', # Additional stuff for the LaTeX preamble. # # 'preamble': '', # Latex figure (float) alignment # # 'figure_align': 'htbp', } # Grouping the document tree into LaTeX files. List of tuples # (source start file, target name, title, # author, documentclass [howto, manual, or own class]). latex_documents = [ (master_doc, 'KDEHIG.tex', 'KDE HIG Documentation', 'KDE', 'manual'), ] # -- Options for manual page output --------------------------------------- # One entry per manual page. List of tuples # (source start file, name, description, authors, manual section). man_pages = [ (master_doc, 'kdehig', 'KDE HIG Documentation', [author], 1) ] # -- Options for Texinfo output ------------------------------------------- # Grouping the document tree into Texinfo files. List of tuples # (source start file, target name, title, author, # dir menu entry, description, category) texinfo_documents = [ (master_doc, 'KDEHIG', 'KDE HIG Documentation', author, 'KDEHIG', 'One line description of project.', 'Miscellaneous'), ] # Adding common substitions between Kirigami and HIG from epilog import rst_epilog # Adding global substitutions rst_epilog += """ .. |devicon| image:: /img/DevIcon.svg :width: 32px :height: 32px .. |designicon| image:: /img/DesignerIcon.svg :width: 32px :height: 32px .. |touchicon| image:: /img/transform-browse.svg :width: 32px :height: 32px .. |desktopicon| image:: /img/computer.svg :width: 32px :height: 32px .. |mobileicon| image:: /img/smartphone.svg :width: 32px :height: 32px .. |br| raw:: html
.. |nbsp| raw:: html   """ rst_prolog = """ .. role:: iconred .. role:: plasmablue .. role:: noblefir .. role:: intend """ +# -- Options for intersphinx extension --------------------------------------- + +# Example configuration for intersphinx: refer to the Python standard library. +intersphinx_mapping = {'kirigami': ('https://kirigami.kde.org/', None)} + # add css file def setup(app): app.add_stylesheet('css/breeze.css') app.add_javascript('js/custom.js') diff --git a/Kirigami/.kateconfig b/Kirigami/.kateconfig new file mode 100644 index 0000000..5538a8b --- /dev/null +++ b/Kirigami/.kateconfig @@ -0,0 +1,2 @@ +kate: space-indent on; tab-width 4; indent-width 4; replace-tabs on; eol unix; +kate-wildcard(*.rst): word-wrap-column 80; word-wrap on; diff --git a/Kirigami/source/_static/css/breeze.css b/Kirigami/source/_static/css/breeze.css new file mode 100644 index 0000000..55c2406 --- /dev/null +++ b/Kirigami/source/_static/css/breeze.css @@ -0,0 +1,258 @@ +@import url('https://fonts.googleapis.com/css?family=Noto+Sans'); + +/* color definitions */ +.iconred { + color: #da4453; +} +.plasmablue { + color: #3daee9; +} +.noblefir { + color: #27ae60; +} + +body { + font-family: "Noto Sans","Helvetica Neue", Arial, sans-serif; + font-size: 14px; + color: #232627; +} + +h1, h2, .rst-content .toctree-wrapper p.caption, h3, h4, h5, h6, legend { + margin-top: 0; + font-weight: 700; + font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif; +} + +p, ul > li, a { + font-size: 14px; +} + +a.reference, a:visited { + color: #2980b9; +} + +a.icon { + color: #fcfcfc; +} + +.flex { + display: flex; + flex-wrap: wrap; + align-items: flex-start; +} +.flex > * { + margin-right: 18px; + max-width: 340px; +} + +.flex > *:last-child { + margin-right: 0; +} + +.wy-nav-side { + background-color: #eff0f1 !important; + box-shadow: 0 1px 4px 0 rgba(0,0,0,.37); +} + +.wy-side-nav-search { + background-color: #27ae60 !important; +} + +.wy-side-nav-search .icon-home:before { + vertical-align: middle; + font-size: 350%; + display: "block"; +} + +.wy-side-nav-search > div.version { + color: rgba(255,255,255,0.7); +} + +.wy-side-nav-search input[type="text"] { + border-radius: 4px; + border: 0 solid transparent; +} + +.wy-nav-content-wrap { + background-color: #fcfcfc; +} + +.wy-menu-vertical a { + color: #232627; +} + +.wy-menu-vertical .current a { + color: #232627; +} + +.wy-menu-vertical a:hover { + background-color: #93cee9; + cursor: pointer; +} + +.wy-menu-vertical li.toctree-l2 > a:hover { + background: #93cee9; +} + +.wy-menu-vertical li.toctree-l2.current > a { + background-color: #fcfcfc; + color: #232627; +} + +.wy-menu-vertical li a.current:last-of-type { + background: #3daee9; + color: #fcfcfc; +} + +.wy-menu-vertical li.current a { + color: #232627; + border-top: none; + border-bottom: none; +} + +.wy-menu-vertical li.toctree-l2.current li.toctree-l3.current > a { + background: #3daee9; + color: #fcfcfc; +} + +.wy-menu-vertical li.toctree-l2 li.toctree-l3 > a:hover { + background: #93cee9; +} + +.admonition { + box-shadow: 1px 1px 2px 2px rgba(0,0,0,.17); +} + +.admonition.caution .admonition-title { + background-color: #fdbc4b; +} +.admonition.hint .admonition-title { + background-color: #27ae60; +} + +.btn { + background-color: #eff0f1 !important; + box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(35,38,39,.1); + border-color: #bdc3c7; + border-radius: 3px; + padding: 8px; +} +.btn:hover { + border-color: #93cee9; + background-color: #eff0f1 !important; +} +.btn:active { + box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(35,38,39,.1); + padding: 8px; +} + + +[itemprop='articleBody'] { + position: relative; +} + +.intend { + position: absolute; + top: 0; + right: 0; + color: #7f8c8d; +} +.intend:before { + content: "For " +} + +.intend a + a:before { + content: " and "; + color: #7f8c8d; +} + +.available { + position: absolute; + top: 30px; + right: 0; + color: #da4453; +} + +.border img { + border: 1px solid #bdc3c7; +} + +.available.qwidgets:before { + content: 'Not available for qWidgets' +} + +.available.plasma:before { + content: 'Not available for Plasma' +} + +.available.plasma.qwidgets:before { + content: 'Not available for Plasma and qWidgets' +} + +@font-face { + font-family:"icons"; + src:url("icons.eot?842739648e48d469142df14af06c1a3c"); + src:url("icons.eot?#iefix") format("embedded-opentype"), + url("icons.woff2?842739648e48d469142df14af06c1a3c") format("woff2"), + url("icons.woff?842739648e48d469142df14af06c1a3c") format("woff"), + url("icons.ttf?842739648e48d469142df14af06c1a3c") format("truetype"), + url("icons.svg?842739648e48d469142df14af06c1a3c#icons") format("svg"); + font-weight:normal; + font-style:normal; +} + +.fa-arrow-circle-left:before { + font-family:"icons"; + content:"\f101"; +} + +.fa-arrow-circle-right:before { + font-family:"icons"; + content:"\f102"; +} + +.icon-home:before { + font-family:"icons"; + content:"\f104"; +} + +/* + * Add more spacing and a 1px seperator between sections */ +div[itemprop="articleBody"] .section:not(:first-of-type) { + margin-top: 20px; + padding-top: 20px; +} + +div[itemprop="articleBody"] > .section > .section:not(:first-of-type) { + border-top: 1px solid #bdc3c7; + margin-top: 30px; + padding-top: 30px; +} + +/* Increase font sized to have more visual difference */ +h1 { + font-size: 300%; + margin-bottom: 8px; + font-weight: normal; +} +h2 { + font-size: 240%; + margin-bottom: 8px; + font-weight: normal; +} +h3 { + font-size: 180%; + margin-bottom: 8px; + font-weight: normal; +} +h4 { + font-size: 140%; + margin-bottom: 8px; + font-weight: normal; +} +h5 { + font-size: 120%; + margin-bottom: 10px; + font-weight: normal; +} + diff --git a/Kirigami/source/_static/css/icons.eot b/Kirigami/source/_static/css/icons.eot new file mode 100644 index 0000000..4d6ff24 Binary files /dev/null and b/Kirigami/source/_static/css/icons.eot differ diff --git a/Kirigami/source/_static/css/icons.svg b/Kirigami/source/_static/css/icons.svg new file mode 100644 index 0000000..c88c356 --- /dev/null +++ b/Kirigami/source/_static/css/icons.svg @@ -0,0 +1,47 @@ + + + + + +Created by FontForge 20170812 at Mon Mar 26 14:34:24 2018 + By Fabian Riethmayer,,, + + + + + + + + + + + + + + diff --git a/Kirigami/source/_static/css/icons.ttf b/Kirigami/source/_static/css/icons.ttf new file mode 100644 index 0000000..d007fac Binary files /dev/null and b/Kirigami/source/_static/css/icons.ttf differ diff --git a/Kirigami/source/_static/css/icons.woff b/Kirigami/source/_static/css/icons.woff new file mode 100644 index 0000000..dbe5207 Binary files /dev/null and b/Kirigami/source/_static/css/icons.woff differ diff --git a/Kirigami/source/_static/css/icons.woff2 b/Kirigami/source/_static/css/icons.woff2 new file mode 100644 index 0000000..43c24d9 Binary files /dev/null and b/Kirigami/source/_static/css/icons.woff2 differ diff --git a/Kirigami/source/_static/css/kirigami-splash.jpg b/Kirigami/source/_static/css/kirigami-splash.jpg new file mode 100644 index 0000000..7bfa221 Binary files /dev/null and b/Kirigami/source/_static/css/kirigami-splash.jpg differ diff --git a/Kirigami/source/conf.py b/Kirigami/source/conf.py index f2f35b1..8065795 100644 --- a/Kirigami/source/conf.py +++ b/Kirigami/source/conf.py @@ -1,189 +1,193 @@ # -*- coding: utf-8 -*- # # Configuration file for the Sphinx documentation builder. # # This file does only contain a selection of the most common options. For a # full list see the documentation: # http://www.sphinx-doc.org/en/master/config # -- Path setup -------------------------------------------------------------- # If extensions (or modules to document with autodoc) are in another directory, # add these directories to sys.path here. If the directory is relative to the # documentation root, use os.path.abspath to make it absolute, like shown here. # import os import sys sys.path.insert(0, os.path.abspath('.')) sys.path.insert(0, os.path.abspath('../..')) # -- Project information ----------------------------------------------------- project = 'Kirigami' copyright = '2019, KDE. Licensed under Creative Commons License SA 4.0' author = 'Marco Martin' # The short X.Y version version = '' # The full version, including alpha/beta/rc tags release = '' # -- General configuration --------------------------------------------------- # If your documentation needs a minimal Sphinx version, state it here. # # needs_sphinx = '1.0' # Add any Sphinx extension module names here, as strings. They can be # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom # ones. extensions = [ 'sphinx.ext.intersphinx', ] # Add any paths that contain templates here, relative to this directory. templates_path = ['_templates'] # The suffix(es) of source filenames. # You can specify multiple suffix as a list of string: # # source_suffix = ['.rst', '.md'] source_suffix = '.rst' # The master toctree document. master_doc = 'index' # The language for content autogenerated by Sphinx. Refer to documentation # for a list of supported languages. # # This is also used if you do content translation via gettext catalogs. # Usually you set "language" from the command line for these cases. language = None # List of patterns, relative to source directory, that match files and # directories to ignore when looking for source files. # This pattern also affects html_static_path and html_extra_path. exclude_patterns = [] # The name of the Pygments (syntax highlighting) style to use. pygments_style = None # -- Options for HTML output ------------------------------------------------- # The theme to use for HTML and HTML Help pages. See the documentation for # a list of builtin themes. # html_theme = 'sphinx_rtd_theme' # Theme options are theme-specific and customize the look and feel of a theme # further. For a list of options available for each theme, see the # documentation. # # html_theme_options = {} # Add any paths that contain custom static files (such as style sheets) here, # relative to this directory. They are copied after the builtin static files, # so a file named "default.css" will overwrite the builtin "default.css". html_static_path = ['_static'] # Custom sidebar templates, must be a dictionary that maps document names # to template names. # # The default sidebars (for documents that don't match any pattern) are # defined by theme itself. Builtin themes are using these templates by # default: ``['localtoc.html', 'relations.html', 'sourcelink.html', # 'searchbox.html']``. # # html_sidebars = {} # -- Options for HTMLHelp output --------------------------------------------- # Output file base name for HTML help builder. htmlhelp_basename = 'Kirigamidoc' # -- Options for LaTeX output ------------------------------------------------ latex_elements = { # The paper size ('letterpaper' or 'a4paper'). # # 'papersize': 'letterpaper', # The font size ('10pt', '11pt' or '12pt'). # # 'pointsize': '10pt', # Additional stuff for the LaTeX preamble. # # 'preamble': '', # Latex figure (float) alignment # # 'figure_align': 'htbp', } # Grouping the document tree into LaTeX files. List of tuples # (source start file, target name, title, # author, documentclass [howto, manual, or own class]). latex_documents = [ (master_doc, 'Kirigami.tex', 'Kirigami Documentation', 'Marco Martin', 'manual'), ] # -- Options for manual page output ------------------------------------------ # One entry per manual page. List of tuples # (source start file, name, description, authors, manual section). man_pages = [ (master_doc, 'kirigami', 'Kirigami Documentation', [author], 1) ] # -- Options for Texinfo output ---------------------------------------------- # Grouping the document tree into Texinfo files. List of tuples # (source start file, target name, title, author, # dir menu entry, description, category) texinfo_documents = [ (master_doc, 'Kirigami', 'Kirigami Documentation', author, 'Kirigami', 'One line description of project.', 'Miscellaneous'), ] # Adding common substitions between Kirigami and HIG from epilog import rst_epilog rst_epilog += """ """ # -- Options for Epub output ------------------------------------------------- # Bibliographic Dublin Core info. epub_title = project # The unique identifier of the text. This can be a ISBN number # or the project homepage. # # epub_identifier = '' # A unique identification for the text. # # epub_uid = '' # A list of files that should not be packed into the epub file. epub_exclude_files = ['search.html'] # -- Extension configuration ------------------------------------------------- # -- Options for intersphinx extension --------------------------------------- # Example configuration for intersphinx: refer to the Python standard library. -intersphinx_mapping = {'https://docs.python.org/': None} +intersphinx_mapping = {'hig': ('https://hig.kde.org/', None)} + +# add css file +def setup(app): + app.add_stylesheet('css/breeze.css') diff --git a/Kirigami/source/index.rst b/Kirigami/source/index.rst index 6dda34b..b3c6d2a 100644 --- a/Kirigami/source/index.rst +++ b/Kirigami/source/index.rst @@ -1,20 +1,49 @@ .. Kirigami documentation master file, created by sphinx-quickstart on Mon Apr 15 08:55:06 2019. You can adapt this file completely to your liking, but it should at least contain the root `toctree` directive. -Welcome to Kirigami's documentation! -==================================== +Introducing Kirigami UI +======================= .. toctree:: :maxdepth: 2 :caption: Contents: +Build apps that adapt beautifully to mobile, desktop, and everything in between. + + + +Convergent +---------- + +The line between desktop and mobile is blurring, and users expect the same +quality experience on every device. Applications using Kirigami adapt +brilliantly to mobile, desktop, and everything in between. +See :doc:`convergence in the HIG ` for more +details. + + +Responsive +---------- + +Kirigami apps adapt to more than just the devices we use them on, always +offering the optimal layout depending on how they are used by your audience. + +See :doc:`responsive in the HIG ` for more +details. + +Elegant +------- + +Kirigami is smooth and animated, uses consistent components, and a clearly +defined workflow. People using Kirigami will appreciate the smart workflow and +no-gimmick design. Indices and tables ================== * :ref:`genindex` * :ref:`modindex` * :ref:`search`