[V3] Fixed header links area.

This commit is contained in:
Eliseu Amaro 2021-09-11 18:24:40 +01:00 committed by Diogo Peralta Cordeiro
parent b12753a18f
commit f360ebb457
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
16 changed files with 83 additions and 185 deletions

View File

@ -95,7 +95,8 @@ header ~ * {
}
header ul li {
all: unset;
display: block;
display: flex;
flex-direction: column;
text-decoration: none;
}
header ul li a {
@ -180,3 +181,15 @@ blockquote {
padding-left: 3em;
border-left: 0.5em #EEE solid;
}
.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,133 +0,0 @@
/*
* -- BASE STYLES --
* Most of these are inherited from Base, but I want to change a few.
*/
@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

@ -107,7 +107,7 @@ header * {
font-size: 1rem !important;
}
.splash-head {
font-size: 3rem !important;
font-size: 2rem !important;
}
.splash-head img {
height: 3rem !important;
@ -117,11 +117,14 @@ header * {
.ribbon-wrapper,
.content-team {
top: 0 !important;
padding: 3rem !important;
padding: 1.5rem !important;
}
}
@media screen and (max-height: 700px) {
header {
font-size: 1.25rem !important;
}
.content,
.ribbon-wrapper,
.content-team {

View File

@ -3,11 +3,11 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<title>GNU social &mdash; Some public communities</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/css/style.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/css/reset.css">
<?php
$query = urlencode('
{
@ -33,7 +33,9 @@
<body>
<header class="header">
<div class="home-menu menu menu-horizontal menu-fixed">
<a class="menu-heading" href="/">GNU social</a>
<a class="menu-heading" href="https://gnusocial.rocks/">
<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"><a href="/" class=" menu-link">Home</a></li>
<li class="menu-item"><a href="/v2" class=" menu-link">Version 2</a></li>

View File

@ -2,12 +2,12 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<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" href="https://www.gnusocial.rocks/assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks/assets/fonts/opensans/opensans.css">
</head>
<body>

View File

@ -3,18 +3,19 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>GNU social &mdash; a free software social networking platform</title>
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<title>GNU social &mdash; a free software social networking platform</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel='stylesheet' type='text/css' href="assets/fonts/opensans/opensans.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/css/style.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/css/reset.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="https://gnusocial.rocks/">
<img src="assets/img/gnu-social-logo-invert.svg" alt="GNU social">
<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">Home</a></li>

View File

@ -3,11 +3,11 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="../assets/fonts/opensans/opensans.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks//assets/fonts/opensans/opensans.css">
</head><title>All tags - GNU social V3</title>
</head><body>
<header>

View File

@ -2,8 +2,8 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel><title>GNU social V3</title><link>https://gnusocial.rocks/v3/index.html</link>
<description>Development blog where we announce our progress.</description><language>en</language>
<lastBuildDate>Thu, 19 Aug 2021 15:35:53 +0100</lastBuildDate>
<pubDate>Thu, 19 Aug 2021 15:35:53 +0100</pubDate>
<lastBuildDate>Sat, 11 Sep 2021 18:54:16 +0100</lastBuildDate>
<pubDate>Sat, 11 Sep 2021 18:54:16 +0100</pubDate>
<atom:link href="https://gnusocial.rocks/v3/feed.rss" rel="self" type="application/rss+xml" />
<item><title>
Updates: V3 blog
@ -31,6 +31,7 @@ forget to subscribe!</p>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/updates-v3-blog.html</link>
<guid>https://gnusocial.rocks/v3/./updates-v3-blog.html</guid>
@ -54,6 +55,7 @@ attempts to generate a page preview from open graph and oembed. I.e., acts when
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/updates-implement-storeremotemedia-for-v3-and-port-embed.html</link>
<guid>https://gnusocial.rocks/v3/./updates-implement-storeremotemedia-for-v3-and-port-embed.html</guid>
@ -110,6 +112,7 @@ any remote URL being shared in a note.</li>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/updates-improve-the-attachments-system.html</link>
<guid>https://gnusocial.rocks/v3/./updates-improve-the-attachments-system.html</guid>
@ -195,6 +198,7 @@ Updates: Finish the Avatar component
<!-- text end -->
@ -248,6 +252,7 @@ is properly tested, we have the
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-documentation-and-tests-infrastructure.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-documentation-and-tests-infrastructure.html</guid>
@ -303,6 +308,7 @@ The key ones are:</p>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-port-media-handling-from-v2.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-port-media-handling-from-v2.html</guid>

View File

@ -3,11 +3,11 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="../assets/fonts/opensans/opensans.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks//assets/fonts/opensans/opensans.css">
</head><title>Blog - GNU social V3</title>
</head><body>
<header>

View File

@ -3,11 +3,11 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="../assets/fonts/opensans/opensans.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks//assets/fonts/opensans/opensans.css">
</head><title>Milestone: Documentation and Tests Infrastructure - GNU social V3</title>
</head><body>
<header>
@ -85,6 +85,7 @@ is properly tested, we have the
<!-- text end -->
<!-- entry end -->
</div>

View File

@ -3,11 +3,11 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="../assets/fonts/opensans/opensans.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks//assets/fonts/opensans/opensans.css">
</head><title>Milestone: Port Media handling from v2 - GNU social V3</title>
</head><body>
<header>
@ -89,6 +89,7 @@ The key ones are:</p>
<!-- text end -->
<!-- entry end -->
</div>

View File

@ -3,9 +3,9 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="../assets/fonts/opensans/opensans.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks//assets/fonts/opensans/opensans.css">
</head>

View File

@ -3,11 +3,11 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="../assets/fonts/opensans/opensans.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks//assets/fonts/opensans/opensans.css">
</head><title>Updates: Finish the Avatar component - GNU social V3</title>
</head><body>
<header>
@ -119,6 +119,7 @@ GNU social development team
<!-- text end -->

View File

@ -3,11 +3,11 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="../assets/fonts/opensans/opensans.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks//assets/fonts/opensans/opensans.css">
</head><title>Updates: Implement StoreRemoteMedia for v3 and port Embed - GNU social V3</title>
</head><body>
<header>
@ -57,6 +57,7 @@ attempts to generate a page preview from open graph and oembed. I.e., acts when
<!-- text end -->
<!-- entry end -->
</div>

View File

@ -3,11 +3,11 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="../assets/fonts/opensans/opensans.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks//assets/fonts/opensans/opensans.css">
</head><title>Updates: Improve the Attachments system - GNU social V3</title>
</head><body>
<header>
@ -90,6 +90,7 @@ any remote URL being shared in a note.</li>
<!-- text end -->
<!-- entry end -->
</div>

View File

@ -3,11 +3,11 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="../assets/fonts/opensans/opensans.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks//assets/fonts/opensans/opensans.css">
</head><title>Updates: V3 blog - GNU social V3</title>
</head><body>
<header>
@ -65,6 +65,7 @@ forget to subscribe!</p>
<!-- text end -->
<!-- entry end -->
</div>