GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[UI] Public feed responsive CSS work

Browse Source
This commit is contained in:
rainydaysavings 2020-08-15 01:17:17 +01:00 committed by Hugo Sales
parent 5d859b6459
commit b80479dc4e
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
3 changed files with 173 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
public/assets/css/network/public_mid.css Normal file
View File

@ -0,0 +1,85 @@
.content {
display: flex;
flex-wrap: wrap;
margin-top: calc(4 * var(--main-size));
justify-content: center;
align-items: center;
margin-left: var(--unit-size);
margin-right: var(--unit-size);
margin-bottom: var(--unit-size);
}
.content .main {
width: 100%;
margin-left: var(--unit-size);
margin-right: var(--unit-size);
box-shadow: var(--shadow);
border-radius: 0 0 var(--unit-size) var(--unit-size);
}
.main-nav {
order: 1;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
flex: 1;
background-color: var(--bg1);
padding: var(--medium-size);
font-size: var(--medium-size);
font-family: var(--head-font);
}
.main-nav ul {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%;
margin-left: calc(2 * var(--side-margin));
margin-right: calc(2 * var(--side-margin));
padding: 0;
}
.main-nav li {
display: block;
flex: 0 1 auto;
list-style-type: none;
font-weight: 700;
}
.active {
color: var(--fg) !important;
font-weight: 700;
}
.main-nav a {
color: var(--accent);
}
.main-nav a:hover {
color: var(--fg);
transition: all 0.8s ease;
}
.notices {
display: flex;
flex-wrap: wrap;
font-size: var(--medium-size);
border-radius: 0 0 var(--unit-size) var(--unit-size);
background-color: var(--bg3);
padding: var(--unit-size);
}
.notices .timeline-nav {
order: 2;
width: 100%;
box-shadow: var(--shadow);
border-radius: var(--unit-size);
}
.notices .timeline-nav .notices div {
background-color: var(--bg4);
box-shadow: var(--shadow);
padding: var(--unit-size);
margin-top: var(--unit-size);
border-radius: var(--unit-size);
width: 100%;
}
.notices .main-nav {
width: 100%;
font-size: var(--unit-size);
}

85
public/assets/css/network/public_small.css Normal file
View File

@ -0,0 +1,85 @@
.content {
display: flex;
flex-wrap: wrap;
margin-top: calc(3 * var(--main-size) + 2%);
justify-content: center;
align-items: center;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 2%;
}
.content .main {
width: 100%;
margin-left: 0;
margin-right: 0;
box-shadow: var(--shadow);
border-radius: 0 0 var(--unit-size) var(--unit-size);
}
.main-nav {
order: 1;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
flex: 1;
background-color: var(--bg1);
padding: var(--medium-size);
font-size: var(--medium-size);
font-family: var(--head-font);
}
.main-nav ul {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%;
margin-left: var(--unit-size);
margin-right: var(--unit-size);
padding: 0;
}
.main-nav li {
display: block;
flex: 0 1 auto;
list-style-type: none;
font-weight: 700;
}
.active {
color: var(--fg) !important;
font-weight: 700;
}
.main-nav a {
color: var(--accent);
}
.main-nav a:hover {
color: var(--fg);
transition: all 0.8s ease;
}
.notices {
display: flex;
flex-wrap: wrap;
font-size: var(--medium-size);
border-radius: 0 0 var(--unit-size) var(--unit-size);
background-color: var(--bg3);
padding: 2%;
}
.notices .timeline-nav {
order: 2;
width: 100%;
box-shadow: var(--shadow);
border-radius: var(--unit-size);
}
.notices .timeline-nav .notices div {
background-color: var(--bg4);
box-shadow: var(--shadow);
padding: var(--unit-size);
margin-top: var(--unit-size);
border-radius: var(--unit-size);
width: 100%;
}
.notices .main-nav {
width: 100%;
font-size: var(--unit-size);
}

4
templates/network/public.html.twig
View File

@ -8,7 +8,9 @@
{% block stylesheets %}
{{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}" media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_mid.css') }}" media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_small.css') }}" media="screen and (max-width: 750px)">
{% endblock %}
{% block header %}