From dc54fa75ea1786fb0bf7277c4a720d9280b56703 Mon Sep 17 00:00:00 2001 From: Diogo Peralta Cordeiro Date: Thu, 19 Aug 2021 02:11:50 +0100 Subject: [PATCH] Apply to docs a styling similar to the blog's --- assets/css/docs.css | 151 +++++++++++++++++++++++++++++++++++--------- docs/index.html | 116 +++++++++++++++++++++------------- index.html | 7 +- 3 files changed, 195 insertions(+), 79 deletions(-) diff --git a/assets/css/docs.css b/assets/css/docs.css index 0780577..19311ad 100644 --- a/assets/css/docs.css +++ b/assets/css/docs.css @@ -1,44 +1,133 @@ -a { - font-weight: bold; -} +/* + * -- BASE STYLES -- + * Most of these are inherited from Base, but I want to change a few. + */ -ul { - margin-left: 1rem; -} -ul li { - margin-left: 1rem; -} - -.content { - z-index: unset !important; - position: unset !important; -} - -#title{ - display:none; -} - -#divbody .content { - padding: unset !important; -} - -.content-wrapper { - display: flex; - flex-direction: column; - padding-top: 4rem; - height: 100vh; -} -.content + * { +@media screen and (max-width: 900px) { + header { + all: unset !important; + z-index: 1 !important; + position: fixed; + top: 0; + left: 0; + width: 100%; + } + .home-menu { + height: min-content !important; + } + .sidebar { all: unset; + background-color: #221E22; + + display: block; + box-sizing: border-box; + width: 100%; + height: min-content !important; + margin-bottom: 1rem; + } + .content-wrapper, + #template-wrapper { + margin-left: unset !important; + padding: 0 1rem 0 1rem !important; + } + .footer { + margin-left: inherit !important;; + } } +body, html { + display: flex; + flex-direction: column; + line-height: 1.4em; +} +#title{display:none;} + +/* + * -- HEADER -- + */ +header { + /* maximum z-index found */ + all: unset; + box-sizing: border-box; + position: fixed; + + background-color: #221E22; + + width: 15rem; + height: 100vh; + + top: 0; + left: 0; + + -webkit-box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4), 17px 26px 15px 0px rgba(0,0,0,0); + box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4), 17px 26px 15px 0px rgba(0,0,0,0); +} +header * { + margin: 0; +} +header ul li { + all: unset; + display: block; + text-decoration: none; +} +header ul li a { + margin: 0; +} + +.home-menu { + font-size: 1.25rem; + font-weight: bold; + + max-height: 3rem; + + display: flex; + align-items: center; + flex-direction: column; + justify-content: space-between; + background: #a22430; + padding: 1rem; +} + +.menu-heading { + font-size: inherit; + display: flex; + align-items: center; + color: #F6F4F6; +} +.menu-heading img { + height: 1em; + margin-right: 4px; +} +.menu-link { + color: #F6F4F6; + margin-left: 1rem; +} +.menu-link:hover, .menu-link:focus { + color: #C8BCC8; + transition: 500ms ease-in-out; +} + +.sidebar { + padding: 1rem; +} + +.content-wrapper, +#template-wrapper { + margin-left: 15rem; + padding: 1rem !important; +} +.content-wrapper { + padding-top: 2rem; +} .footer { + margin-left: 15rem; padding: 1rem; background-color: #333333; color: #e9eaed; } .footer a { + font-family: 'open_sansbold'; font-weight: bold; color: #e9eaed; -} \ No newline at end of file +} diff --git a/docs/index.html b/docs/index.html index 6961b89..5a78a1c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,48 +1,76 @@ - - - - - GNU social — Documentation - - - - - - - -
-
- - GNU social - - + + + + GNU social — Documentation + + + + + + + +
+
+ + GNU social + gnu + social + +
+
+ +
+
+
+
+

Documentation +

+

GNU social is distributed with four documentations. +

+

The + User + one is intended to illustrate the various common use cases, possibilities regarding customization and introduce the existing functionalities. +

+

The + Administrator + one explains the step by step of how to install and maintain a GNU social instance, be it as node of The Free Network or as an intranet social network in a company setting. +

+

The + Developer + one starts by introducing the Modules system and architecture, then the plugin development process and finally the exciting internals of GNU social for those looking forward to make the most advanced contributions. +

+

The + Designer + one is an in-depth overview of the design motifs, and the design language used. Useful for creating new plugins and help as a basis for new themes. +

+
-
-
-
- -

Documentation

-

GNU social is distributed with four documentations.

-

The User one is intended to illustrate the various common use cases, possibilities regarding customization and introduce the existing functionalities.

-

The Administrator one explains the step by step of how to install and maintain a GNU social instance, be it as node of The Free Network or as an intranet social network in a company setting.

-

The Developer one starts by introducing the Modules system and architecture, then the plugin development process and finally the exciting internals of GNU social for those looking forward to make the most advanced contributions.

-

The Designer one is an in-depth overview of the design motifs, and the design language used. Useful for creating new plugins and help as a basis for new themes.

- -
-
- This site's source is hosted here. - The documentation's source is hosted here. -
-
- - + + diff --git a/index.html b/index.html index 4297fd4..3cce54c 100644 --- a/index.html +++ b/index.html @@ -128,9 +128,8 @@ + - -