Apply to docs a styling similar to the blog's

This commit is contained in:
Diogo Peralta Cordeiro 2021-08-19 02:11:50 +01:00
parent d1b6a4b464
commit dc54fa75ea
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
3 changed files with 195 additions and 79 deletions

View File

@ -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;
}
}

View File

@ -1,48 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GNU social &mdash; Documentation</title>
<link rel="shortcut icon" href="https://www.gnusocial.rocks/favicon.ico">
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/css/docs.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks/assets/fonts/opensans/opensans.css">
</head>
<body>
<header class="header">
<div class="home-menu menu menu-horizontal menu-fixed">
<a class="menu-heading" href="#">
<img src="https://www.gnusocial.rocks/assets/img/gnu-social-logo-invert.svg" alt="GNU social">
</a>
<ul class="menu-list">
<li class="menu-item menu-selected"><a
href="#" class="menu-link">Documentation</a></li>
<li class="menu-item"><a href="/user" class="menu-link">User</a></li>
<li class="menu-item"><a href="/administrator" class="menu-link">Administrator</a></li>
<li class="menu-item"><a href="/developer" class="menu-link">Developer</a></li>
<li class="menu-item"><a href="/designer" class="menu-link">Designer</a></li>
</ul>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GNU social &mdash; Documentation
</title>
<link rel="shortcut icon" href="https://www.gnusocial.rocks/favicon.ico">
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/css/docs.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks/assets/fonts/opensans/opensans.css">
</head>
<body>
<header>
<div class="home-menu menu menu-horizontal menu-fixed">
<a class="menu-heading" href="https://gnusocial.rocks/">
<img src="https://www.gnusocial.rocks/assets/img/gnu-social-logo-invert.svg" alt="GNU social">
<b>gnu
</b>social
</a>
</div>
<div class="sidebar">
<ul class="menu-list">
<li class="menu-item menu-selected">
<a href="#" class="menu-link">Documentation
</a>
</li>
<li class="menu-item">
<a href="/user" class="menu-link">User
</a>
</li>
<li class="menu-item">
<a href="/administrator" class="menu-link">Administrator
</a>
</li>
<li class="menu-item">
<a href="/developer" class="menu-link">Developer
</a>
</li>
<li class="menu-item">
<a href="/designer" class="menu-link">Designer
</a>
</li>
</ul>
</div>
</header>
<div class="content-wrapper">
<div class="content">
<h2 class="content-head is-center">Documentation
</h2>
<p>GNU social is distributed with four documentations.
</p>
<p>The
<a href="/user">User
</a> one is intended to illustrate the various common use cases, possibilities regarding customization and introduce the existing functionalities.
</p>
<p>The
<a href="/administrator">Administrator
</a> 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.
</p>
<p>The
<a href="/developer">Developer
</a> 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.
</p>
<p>The
<a href="/designer">Designer
</a> 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.
</p>
</div>
</div>
</header>
<div class="content-wrapper">
<div class="content">
<h2 class="content-head is-center">Documentation</h2>
<p>GNU social is distributed with four documentations.</p>
<p>The <a href="/user">User</a> one is intended to illustrate the various common use cases, possibilities regarding customization and introduce the existing functionalities.</p>
<p>The <a href="/administrator">Administrator</a> 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.</p>
<p>The <a href="/developer">Developer</a> 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.</p>
<p>The <a href="/designer">Designer</a> 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.</p>
</div>
<div class="footer l-box is-center">
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
The documentation's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/docs">hosted here</a>.
</div>
</div>
</body>
<footer class="footer l-box is-center">
This site's source is
<a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
</footer>
</body>
</html>

View File

@ -128,9 +128,8 @@
</div>
</div>
</div>
<footer class="footer l-box is-center">
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
</footer>
</body>
<footer class="footer l-box is-center">
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
</footer>
</html>