mirror of
https://github.com/musix-org/musix-org.github.io
synced 2025-06-15 10:16:01 +00:00
Site Update
This commit is contained in:
Christer Warén
66
public/css/faq.css
Normal file
66
public/css/faq.css
Normal file
@ -0,0 +1,66 @@
|
||||
@import "./master.css";
|
||||
@import "./table.css";
|
||||
|
||||
.wrapper {
|
||||
width: 50%;
|
||||
margin-left: 25%;
|
||||
font-size: xx-large;
|
||||
text-align: center;
|
||||
color: var(--light-blue);
|
||||
}
|
||||
|
||||
.faq {
|
||||
width: 60%;
|
||||
margin-top: 70px;
|
||||
margin-left: 20%;
|
||||
background-color: var(--dark-grey);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: rgb(255, 255, 255);
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wrapper a:visited {
|
||||
color: #7289DA;
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.wrapper a:link {
|
||||
color: #7289DA;
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.wrapper a:active {
|
||||
color: #7289DA;
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.wrapper a:hover {
|
||||
color: #7289DA;
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
83
public/css/footer.css
Normal file
83
public/css/footer.css
Normal file
@ -0,0 +1,83 @@
|
||||
footer {
|
||||
background-color: var(--dark-grey);
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
justify-content: space-evenly;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.underFooter {
|
||||
background-color: var(--dark-grey);
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footerItem {
|
||||
width: 25%;
|
||||
height: 150px;
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: x-large;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footerDiscordLogo {
|
||||
margin-top: 40px;
|
||||
width: 78.15px;
|
||||
height: 56.225px;
|
||||
background-image: url("../images/logos/discord.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.footerDiscordLogo a {
|
||||
float: left;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
padding-left: 25px;
|
||||
padding-right: 55px;
|
||||
padding-bottom: 55px;
|
||||
}
|
||||
|
||||
.footerGithubLogo {
|
||||
margin-top: 10px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-image: url("../images/logos/github.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.footerGithubLogo a {
|
||||
float: left;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#footerInvite {
|
||||
margin-top: 1.5cm;
|
||||
width: 6cm;
|
||||
height: 1cm;
|
||||
border-radius: 20px;
|
||||
background-color: var(--main-accent);
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#footerInvite a {
|
||||
font-size: x-large;
|
||||
color: white;
|
||||
text-shadow: 0 0 2px white;
|
||||
text-decoration: none;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
155
public/css/guide.css
Normal file
155
public/css/guide.css
Normal file
@ -0,0 +1,155 @@
|
||||
@import "./master.css";
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2vw;
|
||||
text-shadow: 0 0 5px white;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 1.5vw;
|
||||
text-shadow: 0 0 5px white;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
float: right;
|
||||
margin-right: 2rem;
|
||||
margin-left: 1rem;
|
||||
box-shadow: 0 0 30px -5px black;
|
||||
}
|
||||
|
||||
#large {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#larger {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#normal {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
#smaller {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
#small {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
#smallest {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
#tiny {
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0066ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #0066ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #0066ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #0066ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0066ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--dark-grey);
|
||||
width: auto;
|
||||
padding: 1rem;
|
||||
float: left;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#nav-text {
|
||||
float: left;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
font-size: x-large;
|
||||
text-shadow: 0 0 2px white;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
transition: 0.4s;
|
||||
float: left;
|
||||
padding: 14px 16px;
|
||||
font-size: x-large;
|
||||
text-shadow: 0 0 2px white;
|
||||
}
|
||||
|
||||
.nav a:visited {
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav a:link {
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav a:active {
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
transition: 0.4s;
|
||||
color: rgb(255, 255, 255);
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
background-color: var(--dark-grey);
|
||||
width: 75%;
|
||||
height: auto;
|
||||
margin-left: 23.5%;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 5rem;
|
||||
box-shadow: 0 0 30px -5px black;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
#getting-started {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#queue-management {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#customizability {
|
||||
text-align: left;
|
||||
}
|
||||
95
public/css/main.css
Normal file
95
public/css/main.css
Normal file
@ -0,0 +1,95 @@
|
||||
@import "./master.css";
|
||||
|
||||
#phrase {
|
||||
margin-left: 20%;
|
||||
margin-top: 3cm;
|
||||
margin-bottom: 6cm;
|
||||
height: 150px;
|
||||
width: 60%;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
#logo {
|
||||
background-image: url("../images/logos/musix_round.png");
|
||||
display: block;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#invite {
|
||||
margin-top: 1cm;
|
||||
margin-left: 5cm;
|
||||
width: 6cm;
|
||||
height: 1cm;
|
||||
border-radius: 20px;
|
||||
background-color: var(--light-blue);
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#invite a {
|
||||
font-size: x-large;
|
||||
color: white;
|
||||
text-shadow: 0 0 2px white;
|
||||
text-decoration: none;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
#invite:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
margin-top: 1cm;
|
||||
height: 500px;
|
||||
background-image: url("../images/backgrouds/wave.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#space {
|
||||
height: 3cm;
|
||||
}
|
||||
|
||||
#items {
|
||||
margin-top: 25px;
|
||||
height: 250px;
|
||||
justify-content: space-evenly;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 250px;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 5px 25px;
|
||||
font-size: x-large;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1016px) {
|
||||
#wrapper {
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
#invite {
|
||||
margin-left: 1cm;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 516px) {
|
||||
#wrapper {
|
||||
height: 1200px;
|
||||
}
|
||||
|
||||
#invite {
|
||||
margin-left: 0cm;
|
||||
}
|
||||
}
|
||||
23
public/css/master.css
Normal file
23
public/css/master.css
Normal file
@ -0,0 +1,23 @@
|
||||
@import "./styling.css";
|
||||
|
||||
body {
|
||||
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
|
||||
margin: 0;
|
||||
background-image: url("../images/backgrouds/background.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
height: auto;
|
||||
color: white;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
text-align: center;
|
||||
font-size: 6vw;
|
||||
text-shadow: 0 0 5px white;
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
15
public/css/misc.css
Normal file
15
public/css/misc.css
Normal file
@ -0,0 +1,15 @@
|
||||
@import "./master.css";
|
||||
|
||||
#body {
|
||||
width: 80%;
|
||||
height: 100px;
|
||||
margin-top: 10%;
|
||||
margin-left: 10%;
|
||||
margin-bottom: 50%;
|
||||
text-align: center;
|
||||
background-color: orange;
|
||||
color: red;
|
||||
font-size: xx-large;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 30px -5px orange;
|
||||
}
|
||||
137
public/css/nav.css
Normal file
137
public/css/nav.css
Normal file
@ -0,0 +1,137 @@
|
||||
@import "./styling.css";
|
||||
|
||||
#navLogo {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url("../images/logos/musix.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
float: left;
|
||||
}
|
||||
|
||||
nav {
|
||||
float: top;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--dark-grey) 50%,
|
||||
var(--main-accent) 100%
|
||||
);
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
box-shadow: 0 0 30px -5px black;
|
||||
}
|
||||
|
||||
nav a {
|
||||
transition: 0.4s;
|
||||
float: left;
|
||||
padding: 14px 16px;
|
||||
font-size: x-large;
|
||||
text-shadow: 0 0 2px white;
|
||||
}
|
||||
|
||||
nav a:visited {
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a:link {
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a:active {
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: rgb(255, 255, 255);
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
background-color: var(--main-accent);
|
||||
}
|
||||
|
||||
#navLogo a:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
font-size: x-large;
|
||||
float: right;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
nav {
|
||||
float: none;
|
||||
width: none;
|
||||
height: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
nav a {
|
||||
float: left;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
text-shadow: 0 0 4px white;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropdown .dropbtn {
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
padding: 14px 16px;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav a:hover,
|
||||
.dropdown:hover .dropbtn {
|
||||
background-color: var(---main-accent);
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-image: url("../images/backgrouds/background.png");
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
float: none;
|
||||
color: var(--main-grey);
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: var(--main-accent);
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
68
public/css/releases.css
Normal file
68
public/css/releases.css
Normal file
@ -0,0 +1,68 @@
|
||||
@import "./master.css";
|
||||
|
||||
.release {
|
||||
margin-top: 50px;
|
||||
margin-left: 10%;
|
||||
height: 200px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.release img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.release h1 {
|
||||
margin-top: -100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.release h1 #stable {
|
||||
color: rgb(0, 255, 0);
|
||||
}
|
||||
|
||||
.release h1 #unstable {
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.release h1 #private {
|
||||
color: rgb(0, 4, 255);
|
||||
}
|
||||
|
||||
.release h1 #offline {
|
||||
color: rgb(62, 62, 63);
|
||||
}
|
||||
|
||||
.release h1 #verified {
|
||||
color: var(--light-blue);
|
||||
}
|
||||
|
||||
.release h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.release #invite {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.release #invite button {
|
||||
width: 6cm;
|
||||
height: 1cm;
|
||||
border-radius: 20px;
|
||||
background-color: var(--light-blue);
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.release #invite button a {
|
||||
font-size: x-large;
|
||||
color: white;
|
||||
text-shadow: 0 0 2px white;
|
||||
text-decoration: none;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.release #invite button:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
5
public/css/styling.css
Normal file
5
public/css/styling.css
Normal file
@ -0,0 +1,5 @@
|
||||
:root {
|
||||
--main-accent: #b50002;
|
||||
--dark-grey: #23272A;
|
||||
--light-blue: #7289DA;
|
||||
}
|
||||
43
public/css/table.css
Normal file
43
public/css/table.css
Normal file
@ -0,0 +1,43 @@
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
*,
|
||||
::after,
|
||||
::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row {
|
||||
background-color: #fff;
|
||||
color: #23272A;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: table-row-group;
|
||||
vertical-align: middle;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.table-striped tbody tr:nth-of-type(odd) {
|
||||
background-color: rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
table td,
|
||||
.table th {
|
||||
padding: .75rem;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
}
|
||||
Reference in New Issue
Block a user