[TWIG][UI] CSS refactoring, containerized twig blocks and settings initial work
This commit is contained in:
rainydaysavings
Hugo Sales
parent
bf0e944aaa
commit
ad107542d9
199
public/assets/css/base.css
Normal file
199
public/assets/css/base.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-------------------------------------*/
|
||||||
216
public/assets/css/base_mid.css
Normal file
216
public/assets/css/base_mid.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-------------------------------------*/
|
||||||
217
public/assets/css/base_small.css
Normal file
217
public/assets/css/base_small.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-------------------------------------*/
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
69
public/assets/css/faq/faq.css
Normal file
69
public/assets/css/faq/faq.css
Normal 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;
|
||||||
|
}
|
||||||
69
public/assets/css/faq/faq_mid.css
Normal file
69
public/assets/css/faq/faq_mid.css
Normal 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;
|
||||||
|
}
|
||||||
69
public/assets/css/faq/faq_small.css
Normal file
69
public/assets/css/faq/faq_small.css
Normal 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;
|
||||||
|
}
|
||||||
75
src/Controller/UserAdminPanel.php
Normal file
75
src/Controller/UserAdminPanel.php
Normal 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(),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,17 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<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 %}
|
{% block meta %}
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
@ -19,8 +8,10 @@
|
||||||
<title>{% block title %}{% endblock %}</title>
|
<title>{% block title %}{% endblock %}</title>
|
||||||
{% block stylesheets %}
|
{% 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 %}
|
{% endblock %}
|
||||||
>>>>>>> 75f0d589f1... [UI] Header completed, FAQ almost done.
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% block icons %}
|
{% block icons %}
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,10 @@
|
||||||
{% block title %}{% endblock %}
|
{% block title %}{% endblock %}
|
||||||
|
|
||||||
{% block stylesheets %}
|
{% block stylesheets %}
|
||||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/base.css') }}" media="screen and (min-width: 1300px)">
|
{{ parent() }}
|
||||||
<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/faq.css') }}" media="screen and (min-width: 1300px)">
|
||||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/base_small.css') }}" media="screen and (max-width: 600px)">
|
<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 %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block header %}{{ parent() }}{% endblock %}
|
{% block header %}{{ parent() }}{% endblock %}
|
||||||
|
|
|
||||||
50
templates/faq/faq.html.twig
Normal file
50
templates/faq/faq.html.twig
Normal 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 %}
|
||||||
13
templates/settings/profile.html.twig
Normal file
13
templates/settings/profile.html.twig
Normal 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 %}
|
||||||
Loading…
Reference in New Issue
Block a user