[MEDIA][CSS] Blog pages fixes. Line height is now bigger by default. Actually responsive.

This commit is contained in:
Eliseu Amaro 2021-08-18 19:09:51 +01:00 committed by Diogo Peralta Cordeiro
parent 5d97a5ce51
commit 64e4a2c875
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
15 changed files with 92 additions and 102 deletions

View File

@ -5,7 +5,41 @@
s {
text-decoration-color:rgba(0, 255, 0, 0.5)
}
@media (min-width: 600px) {
@media screen and (max-width: 600px) {
body, html {
font-size: 0.9rem !important;
}
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;
}
}
@media screen and (min-width: 600px) {
s {
position: relative;
text-decoration: none;
@ -29,6 +63,7 @@ s {
body, html {
display: flex;
flex-direction: column;
line-height: 1.4em;
}
#title{display:none;}

View File

@ -41,17 +41,21 @@ body, html {
}
a {
text-decoration: none;
color: #221E22;
text-decoration: none !important;
font-weight: bold;
color: #3F3B3B;
}
a:hover {
text-decoration-line: underline !important;
}
a:active {
text-decoration-line: underline !important;
}
a:focus {
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
background-color: #221E22;
background-color: #3F3B3B;
color: #F6F4F6;
transition: 500ms ease-in-out;
}

View File

@ -48,89 +48,6 @@ body * {
position: relative;
}
a {
text-decoration: none;
color: #221E22;
}
a:hover {
text-decoration-line: underline !important;
}
a:focus {
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
background-color: #221E22;
color: #F6F4F6;
transition: 500ms ease-in-out;
}
h1,
h2,
h3,
h4,
h5,
h6,
label {
color: #3F3B3B;
}
h1 {
font-size: 1.5rem;
font-weight: bold;
line-height: 1.20;
opacity: 1.00;
margin-top: 0px;
margin-bottom: 0.8rem;
letter-spacing: -0.72px;
word-spacing: 0.00px;
text-transform: none;
}
h2 {
font-size: 1.25rem;
font-weight: bold;
line-height: 1.20;
opacity: 1.00;
margin-top: 30px;
margin-bottom: 0.6rem;
letter-spacing: -0.72px;
word-spacing: 0.00px;
text-transform: none;
}
h3 {
font-size: 1.15rem;
font-weight: bold;
line-height: 1.20;
opacity: 1.00;
margin-top: 30px;
margin-bottom: 0.4rem;
letter-spacing: 0.00px;
word-spacing: 0.00px;
text-transform: none;
}
p {
font-weight: 400;
line-height: 1.60;
opacity: 0.85;
margin-top: 0px;
margin-bottom: 1.5rem;
letter-spacing: -0.30px;
word-spacing: -0.10px;
text-transform: none;
}
em {
font-weight: 400;
line-height: 1.60;
opacity: 0.85;
margin-top: 0px;
margin-bottom: 1.5rem;
letter-spacing: -0.30px;
word-spacing: -0.10px;
}
/*
* -- HEADER --
*/
@ -177,6 +94,15 @@ header a:focus {
justify-content: space-between;
}
.home-menu a:focus {
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
background-color: #F6F4F6;
color: #221E22;
transition: 500ms ease-in-out;
}
.menu-heading {
display: flex;
color: #F6F4F6;

View File

@ -6,6 +6,7 @@
<meta name="viewport" content= "width=device-width, initial-scale=1.0"> <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">
</head>

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">

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>Wed, 18 Aug 2021 18:12:29 +0100</lastBuildDate>
<pubDate>Wed, 18 Aug 2021 18:12:29 +0100</pubDate>
<lastBuildDate>Wed, 18 Aug 2021 19:07:09 +0100</lastBuildDate>
<pubDate>Wed, 18 Aug 2021 19:07:09 +0100</pubDate>
<atom:link href="https://gnusocial.rocks/v3/feed.rss" rel="self" type="application/rss+xml" />
<item><title>
Updates: V3 blog
@ -77,6 +77,8 @@ forget to subscribe!</p>
@ -163,6 +165,8 @@ functionality with more stability.</p>
@ -258,6 +262,8 @@ any remote URL being shared in a note.</li>
@ -333,6 +339,8 @@ Updates: Finish the Avatar component
@ -436,6 +444,8 @@ is properly tested, we have the
@ -543,6 +553,8 @@ The main ones are:</p>

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
@ -58,7 +58,7 @@ Our objective is to further differentiate GNU social from the alternative softwa
<div class="template-unit">
<h3>Milestones</h3>
<ul>
<li><a href="https://www.gnusocial.rocks/v3/tests-and-documentation-infrastructure.html"><s>Initial test and documentation infrastructure</s></a></li>
<li><a href="https://www.gnusocial.rocks/v3/milestone-documentation-and-tests-infrastructure.html"><s>Initial test and documentation infrastructure</s></a></li>
<li>Expand our support for tags, be it in posts and in actors (people, groups, etc) (WIP)</li>
<li>Port over the v2 federation stack to v3 (WIP)</li>
<li>New functionality:
@ -72,7 +72,7 @@ Our objective is to further differentiate GNU social from the alternative softwa
<li>Server-side rendered-to-svg LaTeX</li>
<li>Posts with titles</li>
</ul>
<li><a href="https://www.gnusocial.rocks/v3/media-attachments-and-thumbnails.html"><s>Media handling, such as thumbnails, compression, and quota and
<li><a href="https://www.gnusocial.rocks/v3/milestone-port-media-handling-from-v2.html"><s>Media handling, such as thumbnails, compression, and quota and
permission checking</s></a></li>
<li>External APIs.</li>
<li>New Groups specification</li>

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
@ -134,6 +134,8 @@ is properly tested, we have the

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
@ -138,6 +138,8 @@ The main ones are:</p>

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">

View File

@ -1,7 +1,7 @@
<div class="template-unit">
<h3>Milestones</h3>
<ul>
<li><a href="https://www.gnusocial.rocks/v3/tests-and-documentation-infrastructure.html"><s>Initial test and documentation infrastructure</s></a></li>
<li><a href="https://www.gnusocial.rocks/v3/milestone-documentation-and-tests-infrastructure.html"><s>Initial test and documentation infrastructure</s></a></li>
<li>Expand our support for tags, be it in posts and in actors (people, groups, etc) (WIP)</li>
<li>Port over the v2 federation stack to v3 (WIP)</li>
<li>New functionality:
@ -15,7 +15,7 @@
<li>Server-side rendered-to-svg LaTeX</li>
<li>Posts with titles</li>
</ul>
<li><a href="https://www.gnusocial.rocks/v3/media-attachments-and-thumbnails.html"><s>Media handling, such as thumbnails, compression, and quota and
<li><a href="https://www.gnusocial.rocks/v3/milestone-port-media-handling-from-v2.html"><s>Media handling, such as thumbnails, compression, and quota and
permission checking</s></a></li>
<li>External APIs.</li>
<li>New Groups specification</li>

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
@ -106,6 +106,8 @@ GNU social development team

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
@ -117,6 +117,8 @@ functionality with more stability.</p>

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
@ -126,6 +126,8 @@ any remote URL being shared in a note.</li>

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="../assets/css/reset.css">
<link rel="stylesheet" href="../assets/css/blog.css">
@ -111,6 +111,8 @@ forget to subscribe!</p>