jonas/flufflparty-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Push

Browse Source
This commit is contained in:
brausjonas
2023-03-25 16:27:05 +01:00
parent 8c464502dc
commit ae709e7fc7
2 changed files with 43 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/workspace.xml
Generated
+1 -1
View File
@@ -51,7 +51,7 @@
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1679674447095</updated> <updated>1679674447095</updated>
<workItem from="1679674448294" duration="3278000" /> <workItem from="1679674448294" duration="3278000" />
<workItem from="1679754546660" duration="3397000" /> <workItem from="1679754546660" duration="3438000" />
</task> </task>
<servers /> <servers />
</component> </component>
Style.css
+42 -67
View File
@@ -1,37 +1,31 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alkatra&family=Delicious+Handrawn&family=Roboto:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Alkatra&family=Delicious+Handrawn&family=Roboto:wght@300&display=swap');
* * {
{
font-family: "Roboto Light", sans-serif; font-family: "Roboto Light", sans-serif;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
li, a, button li, a, button {
{
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
color: #ecf0f1; color: #ecf0f1;
text-decoration: none; text-decoration: none;
} }
@media only screen and (max-width: 18cm) @media only screen and (max-width: 18cm) {
{ li, a, button {
li, a, button
{
font-size: 20px; font-size: 20px;
} }
.hideOnMobile .hideOnMobile {
{
display: none; display: none;
} }
} }
header header {
{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -39,39 +33,32 @@ header
background-color: #24242A; background-color: #24242A;
} }
.navLinks .navLinks {
{
list-style: none; list-style: none;
} }
@media only screen and (max-width: 18cm) @media only screen and (max-width: 18cm) {
{ .navLinks {
.navLinks
{
display: none; display: none;
} }
} }
.navLinks li .navLinks li {
{
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
padding: 0px 20px; padding: 0px 20px;
} }
.navLinks li a .navLinks li a {
{
transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
} }
.navLinks li a:hover, .navLinks li:hover .navLinks li a:hover, .navLinks li:hover {
{
color: #0088a9; color: #0088a9;
} }
button button {
{
padding: 9px 25px; padding: 9px 25px;
background-color: rgba(0, 136, 169, 1); background-color: rgba(0, 136, 169, 1);
border: none; border: none;
@@ -80,31 +67,35 @@ button
transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
} }
button:hover button:hover {
{
background-color: rgba(0, 136, 169, 0.3); background-color: rgba(0, 136, 169, 0.3);
} }
nav nav {
{
order: 1; order: 1;
} }
h1 h1 {
{
text-align: center; text-align: center;
font-size: 50px; font-size: 50px;
color: white; color: white;
} }
.margin-top @media only screen and (max-width: 18cm) {
{ h1 {
text-align: center;
font-size: 30px;
color: white;
}
}
.margin-top {
margin-top: 50px; margin-top: 50px;
} }
body body {
{
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-size: cover; background-size: cover;
@@ -112,8 +103,7 @@ body
} }
.dropdown div .dropdown div {
{
display: none; display: none;
position: absolute; position: absolute;
padding: 20px; padding: 20px;
@@ -122,33 +112,28 @@ body
border-radius: 50px border-radius: 50px
} }
.dropdown div ul li .dropdown div ul li {
{
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
text-align: center; text-align: center;
} }
@media only screen and (max-width: 18cm) @media only screen and (max-width: 18cm) {
{ .dropdown div ul li {
.dropdown div ul li
{
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
text-align: center; text-align: center;
padding: 0; padding: 0;
} }
.dropdown div ul li .dropdown div ul li {
{
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
text-align: center; text-align: center;
padding: 0; padding: 0;
} }
.dropdown div .dropdown div {
{
right: 150px; right: 150px;
border-radius: 0px; border-radius: 0px;
top: 10px; top: 10px;
@@ -156,29 +141,24 @@ body
} }
.dropdown:hover div ul, .dropdown:hover div .dropdown:hover div ul, .dropdown:hover div {
{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mobileMenuButton .mobileMenuButton {
{
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
display: none; display: none;
} }
@media only screen and (max-width: 18cm) @media only screen and (max-width: 18cm) {
{ .mobileMenuButton {
.mobileMenuButton
{
display: inline-block; display: inline-block;
transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
} }
} }
.mobileMenuButton svg .mobileMenuButton svg {
{
width: 50px; width: 50px;
height: 50px; height: 50px;
position: absolute; position: absolute;
@@ -187,22 +167,18 @@ body
color: white; color: white;
} }
.mobileMenuButton svg:hover .mobileMenuButton svg:hover {
{
color: #0088a9; color: #0088a9;
} }
.mobileMenuDropDown .mobileMenuDropDown {
{
display: none; display: none;
background-color: #24242A; background-color: #24242A;
transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
} }
.mobileMenuDropDown li {
.mobileMenuDropDown li
{
list-style: none; list-style: none;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
@@ -211,8 +187,7 @@ body
} }
.mobileMenuButton:hover .mobileMenuDropDown .mobileMenuButton:hover .mobileMenuDropDown {
{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;