[TWIG][UI] CSS refactoring, containerized twig blocks and settings initial work

This commit is contained in:
rainydaysavings 2020-06-21 23:56:26 +01:00 committed by Hugo Sales
parent bf0e944aaa
commit ad107542d9
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
14 changed files with 985 additions and 849 deletions

199
public/assets/css/base.css Normal file
View File

@ -0,0 +1,199 @@
/* GENERAL ----------------------------*/
body,
html {
background-color: #29323c;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%232d3742' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23323c47' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2337414d' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%233b4753' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23404c59' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23424e5b' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2343505d' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2345515f' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23465361' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23485563' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
color: #F6F6F6;
font-family: 'Open Sans', sans-serif;
font-size: 1.250em;
margin: 0;
padding: 0;
}
ul {
text-decoration: none;
margin: 0;
padding: 0;
list-style: none;
}
.drop-down ul li {
position: relative;
}
.drop-down ul li ul a {
line-height: 0.8em;
}
.drop-down ul li ul {
display: none;
position: absolute;
background-color: #F6F6F6;
;
padding: 0.4em 0.8em 0.8em 0.8em;
border-radius: 0.5em;
color: #29323c;
}
.drop-down ul li:hover ul {
display: block;
}
.drop-down ul li ul a:hover {
color: rgb(0, 0, 0);
transition: all 0.8s ease;
}
#hover-effect:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
a:link {
text-decoration: none;
outline: 0;
color: #F6F6F6;
}
a:visited {
outline: 0;
color: #F6F6F6;
}
ul li ul a {
font-size: 0.65em;
}
b {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
}
/*-------------------------------------*/
/* CONTAINER --------------------------*/
#container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/*-------------------------------------*/
/* HEADER -----------------------------*/
#header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 1;
width: 100%;
margin-left: 20%;
margin-right: 20%;
background-color: rgba(0, 0, 0, 0.40);
;
padding: 1em 1em;
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
}
/* MENU -------------------------------*/
.icon-menu {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* INSTANCE ---------------------------*/
#instance {
order: 2;
}
.icon-logo {
display: inline-block;
vertical-align: middle;
width: 1.25em;
height: 1.25em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon-drop {
display: inline-block;
vertical-align: middle;
width: 0.5em;
height: 0.5em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* SEARCH -----------------------------*/
#search {
order: 3;
}
.icon-search {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* PROFILE ----------------------------*/
#profile {
display: flex;
justify-content: flex-start;
order: 4;
width: 100%;
margin-top: 2em;
font-size: 0.7em;
align-items: center;
}
.icon-avatar {
margin-right: 1em;
width: 3em;
height: 3em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
#nick {
order: 1;
display: flex;
align-items: center;
margin-right: 1em;
}
#tags {
order: 2;
color: #91B9D0;
}
#tags i:last-child {
margin-left: 0.5em;
}
#stats {
margin-left: auto;
order: 3;
display: flex;
justify-content: flex-end;
}
#stats b:last-child {
margin-left: 1em;
}
/*-------------------------------------*/

View File

@ -0,0 +1,216 @@
/* GENERAL ----------------------------*/
body,
html {
background-color: #29323c;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%232d3742' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23323c47' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2337414d' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.8C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%233b4753' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23404c59' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23424e5b' d='M1600 0H0v136.3c62.3-20.8 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.8 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2343505d' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2345515f' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23465361' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23485563' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
color: #F6F6F6;
font-family: 'Open Sans', sans-serif;
font-size: 1.1em;
margin: 0;
padding: 0;
}
ul {
text-decoration: none;
margin: 0;
padding: 0;
list-style: none;
}
.drop-down ul li {
position: relative;
}
.drop-down ul li ul a {
line-height: 0.8em;
}
.drop-down ul li ul {
display: none;
position: absolute;
background-color: #F6F6F6;
;
padding: 0.4em 0.8em 0.8em 0.8em;
border-radius: 0.5em;
color: #29323c;
}
.drop-down ul li:hover ul {
display: block;
}
.drop-down ul li ul a:hover {
color: rgb(0, 0, 0);
transition: all 0.8s ease;
}
#hover-effect:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
a:link {
text-decoration: none;
outline: 0;
color: #F6F6F6;
}
a:visited {
outline: 0;
color: #F6F6F6;
}
ul li ul a {
font-size: 0.7em;
}
b {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
}
/*-------------------------------------*/
/* CONTAINER --------------------------*/
#container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/*-------------------------------------*/
/* HEADER -----------------------------*/
#header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 1;
width: 100%;
margin-left: 10%;
margin-right: 10%;
align-items: center;
background-color: rgba(0, 0, 0, 0.40);
;
padding: 1em 1em;
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
}
/* MENU -------------------------------*/
#menu {
order: 1;
}
.icon-menu {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* INSTANCE ---------------------------*/
#instance {
order: 2;
}
.icon-logo {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon-drop {
display: inline-block;
vertical-align: middle;
width: 0.5em;
height: 0.5em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* SEARCH -----------------------------*/
#search {
order: 3;
}
.icon-search {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* PROFILE ----------------------------*/
#profile {
display: flex;
justify-content: flex-start;
order: 4;
width: 100%;
margin-top: 2em;
font-size: 0.8em;
align-items: center;
}
.icon-avatar {
order: 1;
margin-right: 1em;
width: 4em;
height: 4em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
#info {
order: 2;
margin-right: auto;
}
#nick {
order: 1;
display: flex;
align-items: center;
margin-right: 1em;
}
#tags {
order: 2;
color: #91B9D0;
}
#tags i:last-child {
margin-left: 0.5em;
}
#stats {
order: 3;
display: flex;
margin-left: auto;
flex-flow: column;
}
#followers {
order: 1;
width: 100%;
}
#following {
order: 2;
width: 100%;
text-align: right;
}
/*-------------------------------------*/

View File

@ -0,0 +1,217 @@
/* GENERAL ----------------------------*/
body,
html {
background-color: #29323c;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%232d3742' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23323c47' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2337414d' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%233b4753' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23404c59' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23424e5b' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2343505d' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2345515f' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23465361' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23485563' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
color: #F6F6F6;
font-family: 'Open Sans', sans-serif;
font-size: 1.1em;
margin: 0;
padding: 0;
}
ul {
text-decoration: none;
margin: 0;
padding: 0;
list-style: none;
}
.drop-down ul li {
position: relative;
}
.drop-down ul li ul a {
line-height: 0.8em;
}
.drop-down ul li ul {
display: none;
position: absolute;
background-color: #F6F6F6;
;
padding: 0.4em 0.8em 0.8em 0.8em;
border-radius: 0.5em;
color: #29323c;
}
.drop-down ul li:hover ul {
display: block;
}
.drop-down ul li ul a:hover {
color: rgb(0, 0, 0);
transition: all 0.8s ease;
}
#hover-effect:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
a:link {
text-decoration: none;
outline: 0;
color: #F6F6F6;
}
a:visited {
outline: 0;
color: #F6F6F6;
}
ul li ul a {
font-size: 0.7em;
}
b {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
}
/*-------------------------------------*/
/* CONTAINER --------------------------*/
#container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/*-------------------------------------*/
/* HEADER -----------------------------*/
#header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 1;
width: 100%;
margin-left: 0;
margin-right: 0;
align-items: center;
background-color: rgba(0, 0, 0, 0.40);
;
padding: 1em 1em;
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
}
/* MENU -------------------------------*/
#menu {
order: 1;
}
.icon-menu {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* INSTANCE ---------------------------*/
#instance {
order: 2;
}
.icon-logo {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon-drop {
display: inline-block;
vertical-align: middle;
width: 0.5em;
height: 0.5em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* SEARCH -----------------------------*/
#search {
order: 3;
}
.icon-search {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* PROFILE ----------------------------*/
#profile {
display: flex;
justify-content: flex-start;
order: 4;
width: 100%;
margin-top: 2em;
font-size: 0.7em;
align-items: center;
}
.icon-avatar {
order: 1;
margin-right: 1em;
width: 4em;
height: 4em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
#info {
order: 2;
margin-right: auto;
}
#nick {
order: 1;
display: flex;
align-items: center;
margin-right: 1em;
}
#tags {
order: 2;
color: #91B9D0;
}
#tags i:last-child {
margin-left: 0.5em;
}
#stats {
order: 3;
display: flex;
margin-left: auto;
flex-flow: column;
}
#followers {
order: 1;
width: 100%;
}
#following {
order: 2;
width: 100%;
text-align: right;
}
/*-------------------------------------*/

View File

@ -1,266 +0,0 @@
/* GENERAL ----------------------------*/
body, html
{
background-color: #29323c;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%232d3742' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23323c47' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2337414d' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%233b4753' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23404c59' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23424e5b' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2343505d' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2345515f' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23465361' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23485563' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
color: #F6F6F6;
font-family: 'Open Sans', sans-serif;
font-size: 1.250em;
margin: 0;
padding: 0;
}
ul
{
text-decoration: none;
margin: 0;
padding: 0;
list-style: none;
}
.drop-down ul li
{
position: relative;
}
.drop-down ul li ul a
{
line-height: 0.8em;
}
.drop-down ul li ul
{
display: none;
position: absolute;
background-color: #F6F6F6;;
padding: 0.4em 0.8em 0.8em 0.8em;
border-radius: 0.5em;
color: #29323c;
}
.drop-down ul li:hover ul
{
display: block;
}
.drop-down ul li ul a:hover
{
color: rgb(0, 0, 0);
transition: all 0.8s ease;
}
#hover-effect:hover
{
color: #F6F6F6;
transition: all 0.8s ease;
}
a:link
{
text-decoration: none;
outline: 0;
color: #F6F6F6;
}
a:visited
{
outline: 0;
color: #F6F6F6;
}
ul li ul a
{
font-size: 0.65em;
}
b
{
font-family: 'Montserrat', sans-serif;
font-weight: 800;
}
/*-------------------------------------*/
/* CONTAINER --------------------------*/
#container
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/*-------------------------------------*/
/* HEADER -----------------------------*/
#header
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 1;
width: 100%;
margin-left: 20%;
margin-right: 20%;
background-color: rgba(0, 0, 0, 0.40);;
padding: 1em 1em;
box-shadow: 0px 0px 60px -20px rgba(41,50,60,1);
}
/* MENU -------------------------------*/
.icon-menu
{
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* INSTANCE ---------------------------*/
#instance
{
order: 2;
}
.icon-logo
{
display: inline-block;
vertical-align: middle;
width: 1.25em;
height: 1.25em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon-drop
{
display: inline-block;
vertical-align: middle;
width: 0.5em;
height: 0.5em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* SEARCH -----------------------------*/
#search
{
order: 3;
}
.icon-search
{
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* PROFILE ----------------------------*/
#profile
{
display: flex;
justify-content: flex-start;
order: 4;
width: 100%;
margin-top: 2em;
font-size: 0.7em;
align-items: center;
}
.icon-avatar
{
margin-right: 1em;
width: 3em;
height: 3em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
#nick
{
order: 1;
display: flex;
align-items: center;
margin-right: 1em;
}
#tags
{
order: 2;
color: #91B9D0;
}
#tags i:last-child
{
margin-left: 0.5em;
}
#stats
{
margin-left: auto;
order: 3;
display: flex;
justify-content: flex-end;
}
#stats b:last-child
{
margin-left: 1em;
}
/*-------------------------------------*/
/*-------------------------------------*/
/* PAGES ------------------------------*/
.faq-nav
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 2;
width: 100%;
margin-left: 20%;
margin-right: 20%;
background-color: #00000080;
padding: 1em 1em;
font-size: 0.7em;
box-shadow: 0px 0px 60px -20px rgba(41,50,60,1);
}
.faq-nav ul
{
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%;
margin-left: 10%;
margin-right: 10%;
padding: 0;
}
.faq-nav li
{
display: block;
flex: 0 1 auto;
list-style-type: none;
}
.active
{
color: #F6F6F6 !important;
font-weight: 700;
}
.faq-nav a
{
color: #91B9D0;
}
.faq-nav a:hover
{
color: #F6F6F6;
transition: all 0.8s ease;
}
/*-------------------------------------*/
/*-------------------------------------*/
/* CONTENT ----------------------------*/
.content
{
order: 3;
width: 100%;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 20%;
margin-right: 20%;
background-color: rgba(0, 0, 0, 0.40);
padding: 0 1em 1em 1em;
border-radius: 1em;
font-size: 0.65em;
box-shadow: 0px 0px 60px -20px rgba(41,50,60,1);
}
.content ul
{
margin: 0;
padding-left: 2em;
list-style: disc;
}

View File

@ -1,283 +0,0 @@
/* GENERAL ----------------------------*/
body, html
{
background-color: #29323c;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%232d3742' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23323c47' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2337414d' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.8C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%233b4753' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23404c59' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23424e5b' d='M1600 0H0v136.3c62.3-20.8 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.8 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2343505d' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2345515f' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23465361' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23485563' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
color: #F6F6F6;
font-family: 'Open Sans', sans-serif;
font-size: 1.1em;
margin: 0;
padding: 0;
}
ul
{
text-decoration: none;
margin: 0;
padding: 0;
list-style: none;
}
.drop-down ul li
{
position: relative;
}
.drop-down ul li ul a
{
line-height: 0.8em;
}
.drop-down ul li ul
{
display: none;
position: absolute;
background-color: #F6F6F6;;
padding: 0.4em 0.8em 0.8em 0.8em;
border-radius: 0.5em;
color: #29323c;
}
.drop-down ul li:hover ul
{
display: block;
}
.drop-down ul li ul a:hover
{
color: rgb(0, 0, 0);
transition: all 0.8s ease;
}
#hover-effect:hover
{
color: #F6F6F6;
transition: all 0.8s ease;
}
a:link
{
text-decoration: none;
outline: 0;
color: #F6F6F6;
}
a:visited
{
outline: 0;
color: #F6F6F6;
}
ul li ul a
{
font-size: 0.7em;
}
b
{
font-family: 'Montserrat', sans-serif;
font-weight: 800;
}
/*-------------------------------------*/
/* CONTAINER --------------------------*/
#container
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/*-------------------------------------*/
/* HEADER -----------------------------*/
#header
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 1;
width: 100%;
margin-left: 10%;
margin-right: 10%;
align-items: center;
background-color: rgba(0, 0, 0, 0.40);;
padding: 1em 1em;
box-shadow: 0px 0px 60px -20px rgba(41,50,60,1);
}
/* MENU -------------------------------*/
#menu
{
order: 1;
}
.icon-menu
{
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* INSTANCE ---------------------------*/
#instance
{
order: 2;
}
.icon-logo
{
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon-drop
{
display: inline-block;
vertical-align: middle;
width: 0.5em;
height: 0.5em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* SEARCH -----------------------------*/
#search
{
order: 3;
}
.icon-search
{
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* PROFILE ----------------------------*/
#profile
{
display: flex;
justify-content: flex-start;
order: 4;
width: 100%;
margin-top: 2em;
font-size: 0.8em;
align-items: center;
}
.icon-avatar
{
order: 1;
margin-right: 1em;
width: 4em;
height: 4em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
#info
{
order: 2;
margin-right: auto;
}
#nick
{
order: 1;
display: flex;
align-items: center;
margin-right: 1em;
}
#tags
{
order: 2;
color: #91B9D0;
}
#tags i:last-child
{
margin-left: 0.5em;
}
#stats
{
order: 3;
display: flex;
margin-left: auto;
flex-flow: column;
}
#followers
{
order: 1;
width: 100%;
}
#following
{
order: 2;
width: 100%;
text-align: right;
}
/*-------------------------------------*/
/*-------------------------------------*/
/* PAGES ------------------------------*/
.faq-nav
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 2;
width: 100%;
margin-left: 10%;
margin-right: 10%;
background-color: #00000080;
padding: 1em 1em;
font-size: 0.8em;
box-shadow: 0px 0px 60px -20px rgba(41,50,60,1);
}
.faq-nav ul
{
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%;
margin-left: 10%;
margin-right: 10%;
padding: 0;
}
.faq-nav li
{
display: block;
flex: 0 1 auto;
list-style-type: none;
}
.active
{
color: #F6F6F6 !important;
font-weight: 700;
}
.faq-nav a
{
color: #91B9D0;
}
.faq-nav a:hover
{
color: #F6F6F6;
transition: all 0.8s ease;
}
/*-------------------------------------*/
/*-------------------------------------*/
/* CONTENT ----------------------------*/
.content
{
order: 3;
width: 100%;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 10%;
margin-right: 10%;
background-color: rgba(0, 0, 0, 0.40);
padding: 0 1em 1em 1em;
border-radius: 1em;
font-size: 0.8em;
box-shadow: 0px 0px 60px -20px rgba(41,50,60,1);
}
.content ul
{
margin: 0;
padding-left: 2em;
list-style: disc;
}

View File

@ -1,284 +0,0 @@
/* GENERAL ----------------------------*/
body, html
{
background-color: #29323c;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%232d3742' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23323c47' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2337414d' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%233b4753' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23404c59' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23424e5b' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2343505d' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2345515f' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23465361' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23485563' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
color: #F6F6F6;
font-family: 'Open Sans', sans-serif;
font-size: 1.1em;
margin: 0;
padding: 0;
}
ul
{
text-decoration: none;
margin: 0;
padding: 0;
list-style: none;
}
.drop-down ul li
{
position: relative;
}
.drop-down ul li ul a
{
line-height: 0.8em;
}
.drop-down ul li ul
{
display: none;
position: absolute;
background-color: #F6F6F6;;
padding: 0.4em 0.8em 0.8em 0.8em;
border-radius: 0.5em;
color: #29323c;
}
.drop-down ul li:hover ul
{
display: block;
}
.drop-down ul li ul a:hover
{
color: rgb(0, 0, 0);
transition: all 0.8s ease;
}
#hover-effect:hover
{
color: #F6F6F6;
transition: all 0.8s ease;
}
a:link
{
text-decoration: none;
outline: 0;
color: #F6F6F6;
}
a:visited
{
outline: 0;
color: #F6F6F6;
}
ul li ul a
{
font-size: 0.7em;
}
b
{
font-family: 'Montserrat', sans-serif;
font-weight: 800;
}
/*-------------------------------------*/
/* CONTAINER --------------------------*/
#container
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/*-------------------------------------*/
/* HEADER -----------------------------*/
#header
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 1;
width: 100%;
margin-left: 0;
margin-right: 0;
align-items: center;
background-color: rgba(0, 0, 0, 0.40);;
padding: 1em 1em;
box-shadow: 0px 0px 60px -20px rgba(41,50,60,1);
}
/* MENU -------------------------------*/
#menu
{
order: 1;
}
.icon-menu
{
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* INSTANCE ---------------------------*/
#instance
{
order: 2;
}
.icon-logo
{
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon-drop
{
display: inline-block;
vertical-align: middle;
width: 0.5em;
height: 0.5em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* SEARCH -----------------------------*/
#search
{
order: 3;
}
.icon-search
{
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* PROFILE ----------------------------*/
#profile
{
display: flex;
justify-content: flex-start;
order: 4;
width: 100%;
margin-top: 2em;
font-size: 0.7em;
align-items: center;
}
.icon-avatar
{
order: 1;
margin-right: 1em;
width: 4em;
height: 4em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
#info
{
order: 2;
margin-right: auto;
}
#nick
{
order: 1;
display: flex;
align-items: center;
margin-right: 1em;
}
#tags
{
order: 2;
color: #91B9D0;
}
#tags i:last-child
{
margin-left: 0.5em;
}
#stats
{
order: 3;
display: flex;
margin-left: auto;
flex-flow: column;
}
#followers
{
order: 1;
width: 100%;
}
#following
{
order: 2;
width: 100%;
text-align: right;
}
/*-------------------------------------*/
/*-------------------------------------*/
/* PAGES ------------------------------*/
.faq-nav
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 2;
width: 100%;
margin-left: 0;
margin-right: 0;
background-color: #00000080;
padding: 1em 1em;
font-size: 0.7em;
box-shadow: 0px 0px 60px -20px rgba(41,50,60,1);
}
.faq-nav ul
{
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%;
margin-left: 0;
margin-right: 0;
padding: 0;
}
.faq-nav li
{
display: block;
flex: 0 1 auto;
list-style-type: none;
}
.active
{
color: #F6F6F6 !important;
font-weight: 700;
}
.faq-nav a
{
color: #91B9D0;
}
.faq-nav a:hover
{
color: #F6F6F6;
transition: all 0.8s ease;
}
/*-------------------------------------*/
/*-------------------------------------*/
/* CONTENT ----------------------------*/
.content
{
order: 3;
width: 100%;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1%;
margin-right: 1%;
background-color: rgba(0, 0, 0, 0.40);
padding: 0 1em 1em 1em;
border-radius: 1em;
font-size: 0.7em;
box-shadow: 0px 0px 60px -20px rgba(41,50,60,1);
}
.content ul
{
margin: 0;
padding-left: 2em;
list-style: disc;
}

View File

@ -0,0 +1,69 @@
/*-------------------------------------*/
/* PAGES ------------------------------*/
.faq-nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 2;
width: 100%;
margin-left: 20%;
margin-right: 20%;
background-color: #00000080;
padding: 1em 1em;
font-size: 0.7em;
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
}
.faq-nav ul {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%;
margin-left: 10%;
margin-right: 10%;
padding: 0;
}
.faq-nav li {
display: block;
flex: 0 1 auto;
list-style-type: none;
}
.active {
color: #F6F6F6 !important;
font-weight: 700;
}
.faq-nav a {
color: #91B9D0;
}
.faq-nav a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
/*-------------------------------------*/
/*-------------------------------------*/
/* CONTENT ----------------------------*/
.content {
order: 3;
width: 100%;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 20%;
margin-right: 20%;
background-color: rgba(0, 0, 0, 0.40);
padding: 0 1em 1em 1em;
border-radius: 1em;
font-size: 0.65em;
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
}
.content ul {
margin: 0;
padding-left: 2em;
list-style: disc;
}

View File

@ -0,0 +1,69 @@
/*-------------------------------------*/
/* PAGES ------------------------------*/
.faq-nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 2;
width: 100%;
margin-left: 10%;
margin-right: 10%;
background-color: #00000080;
padding: 1em 1em;
font-size: 0.8em;
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
}
.faq-nav ul {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%;
margin-left: 10%;
margin-right: 10%;
padding: 0;
}
.faq-nav li {
display: block;
flex: 0 1 auto;
list-style-type: none;
}
.active {
color: #F6F6F6 !important;
font-weight: 700;
}
.faq-nav a {
color: #91B9D0;
}
.faq-nav a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
/*-------------------------------------*/
/*-------------------------------------*/
/* CONTENT ----------------------------*/
.content {
order: 3;
width: 100%;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 10%;
margin-right: 10%;
background-color: rgba(0, 0, 0, 0.40);
padding: 0 1em 1em 1em;
border-radius: 1em;
font-size: 0.8em;
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
}
.content ul {
margin: 0;
padding-left: 2em;
list-style: disc;
}

View File

@ -0,0 +1,69 @@
/*-------------------------------------*/
/* PAGES ------------------------------*/
.faq-nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 2;
width: 100%;
margin-left: 0;
margin-right: 0;
background-color: #00000080;
padding: 1em 1em;
font-size: 0.7em;
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
}
.faq-nav ul {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%;
margin-left: 0;
margin-right: 0;
padding: 0;
}
.faq-nav li {
display: block;
flex: 0 1 auto;
list-style-type: none;
}
.active {
color: #F6F6F6 !important;
font-weight: 700;
}
.faq-nav a {
color: #91B9D0;
}
.faq-nav a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
/*-------------------------------------*/
/*-------------------------------------*/
/* CONTENT ----------------------------*/
.content {
order: 3;
width: 100%;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1%;
margin-right: 1%;
background-color: rgba(0, 0, 0, 0.40);
padding: 0 1em 1em 1em;
border-radius: 1em;
font-size: 0.7em;
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
}
.content ul {
margin: 0;
padding-left: 2em;
list-style: disc;
}

View File

@ -0,0 +1,75 @@
<?php
// {{{ License
// This file is part of GNU social - https://www.gnu.org/software/social
//
// GNU social is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// GNU social is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with GNU social. If not, see <http://www.gnu.org/licenses/>.
// }}}
/**
* Handle network public feed
*
* @package GNUsocial
* @category Controller
*
* @author Eliseu Amaro <eliseu@fc.up.pt>
* @copyright 2020 Free Software Foundation, Inc http://www.fsf.org
* @license https://www.gnu.org/licenses/agpl.html GNU AGPL v3 or later
*/
namespace App\Controller;
// use App\Core\GSEvent as Event;
// use App\Util\Common;
use App\Core\DB\DefaultSettings;
use function App\Core\I18n\_m;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\HttpFoundation\Request;
class UserAdminPanel extends AbstractController
{
public function __invoke(Request $request)
{
$options = [];
foreach (DefaultSettings::$defaults as $key => $inner) {
$options[$key] = [];
foreach (array_keys($inner) as $inner_key) {
$options[_m($key)][_m($inner_key)] = "{$key}:{$inner_key}";
}
}
$form = $this->createFormBuilder(null, ['translation_domain' => false])
->add(_m('Setting'), ChoiceType::class, ['choices' => $options])
->add(_m('Value'), TextType::class)
->add('save', SubmitType::class, ['label' => _m('Set site setting')])
->getForm();
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
$data = $form->getData();
var_dump($data);
// Stay in this page
return $this->redirect($request->getUri());
}
return $this->render('settings/profile.html.twig', [
'form' => $form->createView(),
]);
}
}

View File

@ -1,26 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<<<<<<< HEAD
<meta charset="UTF-8">
<title>{% block title %}Base page{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<style>
body {
background-color: #333;
color: #ddd;
}
</style>
=======
{% block meta %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock %}
<title>{% block title %}{% endblock %}</title>
{% block stylesheets %}
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Open+Sans&display=swap" rel="stylesheet">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base.css') }}" media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base_mid.css') }}" media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base_small.css') }}" media="screen and (max-width: 600px)">
{% endblock %}
>>>>>>> 75f0d589f1... [UI] Header completed, FAQ almost done.
</head>
<body>
{% block icons %}

View File

@ -5,9 +5,10 @@
{% block title %}{% endblock %}
{% block stylesheets %}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/base.css') }}" media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/base_mid.css') }}" media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/base_small.css') }}" media="screen and (max-width: 600px)">
{{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq.css') }}" media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_mid.css') }}" media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_small.css') }}" media="screen and (max-width: 600px)">
{% endblock %}
{% block header %}{{ parent() }}{% endblock %}

View File

@ -0,0 +1,50 @@
{% extends 'faq/base.html.twig' %}
{% block title %}FAQ{% endblock %}
{% block header %}{{ parent() }}{% endblock %}
{% block nav %}
<nav class='faq-nav'>
<ul>
<li>
<a href="{{ path('doc_faq') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_faq' %}active{% endif %}'>FAQ</a>
</li>
<li>
<a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_contact' %}active{% endif %}'>Contact</a>
</li>
<li>
<a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Tags</a>
</li>
<li>
<a href="{{ path('doc_groups') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_groups' %}active{% endif %}'>Groups</a>
</li>
<li>
<a href="{{ path('doc_openid') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_openid' %}active{% endif %}'>OpenID</a>
</li>
</ul>
</nav>
{% endblock %}
{% block body %}
<div class="content">
{% block markdown %}
{% apply markdown_to_html %}
## What is this site?
This is a social network, running the GNU social software.
You can use it to make connections between friends, family and colleagues -- writing short notices about yourself, where you are, and what you're doing, and those notices will be sent to all your contacts.
In the future, we'll be adding support for photo, video and file sharing, as well as events, better contact management and mobile devices.
## Help
GNU social is a **social service**. Users can post short status messages which are shared to their friends and colleagues on the service and (optionally) onto the Web.
You can also share other types of data, like bookmarks, event invitations, polls, and questions.
If you'd like to try it out, first register a new account. Then, on the public timeline, enter your message into the textbox at the top of the page, and click "Send". It will go out on the public timeline and to anyone who is subscribed to your notices.
To subscribe to other people's notifications, go to their profile page and click the "subscribe" button. They'll get a notice that you're now subscribed to their notifications.
{% endapply %}
{% endblock %}
</div>
{% endblock %}

View File

@ -0,0 +1,13 @@
{% extends 'base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq.css') }}" media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_mid.css') }}" media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_small.css') }}" media="screen and (max-width: 600px)">
{% endblock %}
{% block body %}
<div class="content">
{{ form(form) }}
</div>
{% endblock %}