style: Zmiana nagłówka na zgodny z nowym standardem bez naprawy błędów rozbieżności między stronami

This commit is contained in:
Lewy 2022-06-01 15:49:42 +02:00
parent ba23b77500
commit 60962eaed1
11 changed files with 221 additions and 87 deletions

View File

@ -1,54 +1,69 @@
/*Main container*/
header {
/*Box alignment*/
display: flex;
margin: auto auto 1%;
/*Content alignment*/
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
padding: 10px 30px 10px 30px;
/*Visual*/
background-color: #FFFFFF;
border-bottom: 1px solid #333333;
}
/*Second level*/
.logoBox {
width: 20%;
height: 100%;
float: left;
}
.linkBox {
width: 80%;
height: 100%;
float: right;
flex-flow: nowrap;
align-items: center;
}
/*Content alignment*/
.logo {
width: 150px;
height: 30px;
height: 100%;
float: left;
}
.header_link{
text-align: center;
line-height: 2;
color: white;
text-decoration: none;
font-family: Montserrat, serif;
font-style: normal;
font-size: 18px;
color: #828282;
float: right;
margin-left: 10%;
}
.loginn {
background-color: skyblue;
border-radius: 31px;
border: 1px solid skyblue;
.loginButton {
/*Alignment*/
float: right;
margin-left: 10%;
padding: 0.5% 1% 0.5% 1%;
/*Button visual*/
background-color: #007C36;
border-radius: 15px;
border: 1px solid;
cursor: pointer;
/*Text visual*/
color: #ffffff;
font-family: Arial;
text-decoration: none;
height: 30px;
}
header {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
background-color: #0f64f2;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 30px;
padding-left: 10px;
}
header>p {
text-align: center;
line-height: 0;
}
@media all and (max-width: 800px) {
header {
justify-content: space-around;
}
}
@media all and (max-width: 800px) {
header {
flex-direction: column;
}
font-family: Montserrat, serif;
font-size: 18px;
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

8
frontend/cup.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="63" height="63" rx="8.5" fill="white" stroke="#AFAFAF"/>
<path d="M40.25 47.5834H23.75" stroke="#AFAFAF" stroke-linecap="round"/>
<path d="M31.5 46.6666C31.5 46.9428 31.7239 47.1666 32 47.1666C32.2761 47.1666 32.5 46.9428 32.5 46.6666H31.5ZM32.5 46.6666V39.3333H31.5V46.6666H32.5Z" fill="#AFAFAF"/>
<path d="M38.4168 35.6667C38.4168 35.6667 44.8335 32.2157 44.8335 27.902C44.8335 26.0465 44.8335 24.5103 44.8335 23.3619C44.8335 23.0254 44.8335 22.8572 44.8132 22.7158C44.687 21.8369 43.9966 21.1465 43.1177 21.0203C42.9763 21 42.8077 21 42.4704 21V21C42.1125 21 41.9335 21 41.7862 21.022C40.8681 21.1595 40.1652 21.9108 40.0891 22.8361C40.0769 22.9845 40.0888 23.1631 40.1126 23.5202L40.2502 25.5833" stroke="#AFAFAF" stroke-linecap="round"/>
<path d="M25.5312 35.9375L25.2539 36.3535L25.5312 35.9375ZM38.4688 35.9375L38.7462 36.3535L38.4688 35.9375ZM39.75 22.0834V32.6093H40.75V22.0834H39.75ZM24.25 32.6093V22.0834H23.25V32.6093H24.25ZM38.1915 35.5215L32.2774 39.4642L32.8321 40.2963L38.7462 36.3535L38.1915 35.5215ZM31.7227 39.4642L25.8086 35.5215L25.2539 36.3535L31.1679 40.2963L31.7227 39.4642ZM38.25 19.5834H25.75V20.5834H38.25V19.5834ZM32.2774 39.4642C32.1094 39.5762 31.8906 39.5762 31.7227 39.4642L31.1679 40.2963C31.6718 40.6322 32.3282 40.6322 32.8321 40.2963L32.2774 39.4642ZM23.25 32.6093C23.25 34.1139 24.002 35.5189 25.2539 36.3535L25.8086 35.5215C24.8349 34.8724 24.25 33.7795 24.25 32.6093H23.25ZM39.75 32.6093C39.75 33.7795 39.1651 34.8723 38.1915 35.5215L38.7462 36.3535C39.998 35.5189 40.75 34.1139 40.75 32.6093H39.75ZM24.25 22.0834C24.25 21.2549 24.9216 20.5834 25.75 20.5834V19.5834C24.3693 19.5834 23.25 20.7027 23.25 22.0834H24.25ZM40.75 22.0834C40.75 20.7027 39.6307 19.5834 38.25 19.5834V20.5834C39.0784 20.5834 39.75 21.2549 39.75 22.0834H40.75Z" fill="#AFAFAF"/>
<path d="M25.5832 35.6667C25.5832 35.6667 19.1665 32.2157 19.1665 27.902C19.1665 26.0465 19.1665 24.5103 19.1665 23.3619C19.1665 23.0254 19.1665 22.8572 19.1868 22.7158C19.313 21.8369 20.0034 21.1465 20.8823 21.0203C21.0237 21 21.1923 21 21.5296 21V21C21.8875 21 22.0665 21 22.2138 21.022C23.1319 21.1595 23.8348 21.9108 23.9109 22.8361C23.9231 22.9845 23.9112 23.1631 23.8874 23.5202L23.7498 25.5833" stroke="#AFAFAF" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -11,13 +11,16 @@
<body>
<header>
<a href="../index.html"><img src="logo_padel.jpeg" alt=""></a>
<a href="#">Kalendarz turniejów</a>
<a href="#">Ranking</a>
<a href="#">Wyniki</a>
<form action="../logowanie/index.html">
<input class="login" type="submit" value="Logowanie" />
</form>
<div class="logoBox">
<a class="header_link" href="../index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a>
</div>
<div class="linkBox">
<!-- <span class="dot">JM</span>-->
<button class="loginButton" type="submit" >LOGOWANIE</button>
<a class="header_link" href="#">Kontakt</a>
<a class="header_link" href="#">Ranking</a>
<a class="header_link" href="#">Kalendarz turniejów</a>
</div>
</header>
<!-- TODO sztuczny padding-->

View File

@ -15,12 +15,15 @@
<body>
<header>
<a href="../index.html"><img src="../_global/logo_padel.jpeg" alt=""></a>
<a href="#">Turnieje</a>
<a href="#">Rozgrywki</a>
<a href="#">Ustawienia</a>
<a href="#">Panel uczestnika</a>
<span class="dot">JM</span>
<div class="logoBox">
<a class="header_link" href="../index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a>
</div>
<div class="linkBox">
<!-- <span class="dot">JM</span>-->
<button class="loginButton" type="submit" >LOGOWANIE</button>
<a class="header_link" href="#">Kontakt</a>
<a class="header_link" href="#">Ranking</a>
<a class="header_link" href="#">Kalendarz turniejów</a>
</div>
</header>

View File

@ -23,7 +23,6 @@
border: solid;
border-color: lightgray;
padding: 10px;
}
.eventInside>p {

View File

@ -11,17 +11,36 @@
<body>
<header>
<a class="header_link" href="./index.html"><img class="logo" src="_global/logo_padel.jpeg" alt=""></a>
<a class="header_link" href="#">Kalendarz turniejów</a>
<div class="logoBox">
<a class="header_link" href="./index.html"><img class="logo" src="_global/logo.svg" alt="Logo error"></a>
</div>
<div class="linkBox">
<button class="loginButton" type="submit" >LOGOWANIE</button>
<a class="header_link" href="#">Kontakt</a>
<a class="header_link" href="#">Ranking</a>
<a class="header_link" href="#">Wyniki</a>
<form action="logowanie/index.html">
<input class="loginn" type="submit" value="Logowanie" />
</form>
<a class="header_link" href="#">Kalendarz turniejów</a>
</div>
</header>
<!-- -->
<!-- TEST BOX SINGLE_TOURNAMENT-->
<!-- -->
<div class="container">
<div class="tournamentBox">
<div class="tournamentIconBox">
<img class="tournamentIcon" src="cup.svg">
</div>
<div class="tournamentDataBox">
<div class="tournamentData">
Tu jest text
</div>
</div>
</div>
<div class="event">
<div class="eventHeader">Nadchodzące turnieje</div>
<div class="eventInside">Turniej majowy 2022
@ -37,14 +56,8 @@
<div class="lastevent"></div>
</div>
<!-- -->
<!-- TEST BOX SINGLE_TOURNAMENT-->
<!-- -->
<div class="single_tournament">
</div>
</div>
</body>

View File

@ -8,14 +8,19 @@
<body>
<header>
<a href="../index.html"><img src="../_global/logo_padel.jpeg" alt=""></a>
<a href="#">Wiadomości</a>
<a href="#">Kalendarz turniejów</a>
<a href="#">Ranking</a>
<a href="../drabinka/index.html">Drabinka</a>
<a href="#">Kontakt</a>
<span class="dot">JM</span>
<div class="logoBox">
<a class="header_link" href="../index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a>
</div>
<div class="linkBox">
<!-- <span class="dot">JM</span>-->
<button class="loginButton" type="submit" >LOGOWANIE</button>
<a class="header_link" href="#">Kontakt</a>
<a class="header_link" href="#">Ranking</a>
<a class="header_link" href="#">Kalendarz turniejów</a>
</div>
</header>
<div class="container">
<div class="tournametns_add">
<style scoped>

View File

@ -0,0 +1,79 @@
.tournamentBox {
background-color: #0f64f2;
color: white;
border-style: solid;
border-width: 2px;
margin-top: 25px;
/*Sztuczny margin od drugiego boxa*/
margin-right: 1000px;
flex-direction: column;
flex-wrap: nowrap;
height: 160px;
width: 600px
}
/**/
.tournamentIconBox {
width: 20%;
height: 100%;
float: left;
/*padding: 25px;*/
top: 50%;
left: 50%;
}
.tournamentIcon {
margin: 0;
position: relative;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/**/
.tournamentDataBox {
width: 80%;
height: 100%;
float: right;
}
.tournamentData {
margin-top: 5%;
align-items: center;
text-align: left;
/*padding-left: 10%;*/
}
/**/
.eventHeader {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.eventInside {
background-color: white;
color: #4C8BF5;
height: auto;
border: solid;
border-color: lightgray;
padding: 10px;
}
.eventInside>p {
color: lightgray;
}
.myButton {
background-color: #4C8BF5;
border-radius: 28px;
border: 1px solid #4C8BF5;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 9px;
padding: 8px 13px;
text-decoration: none;
}

View File

@ -1,5 +1,6 @@
@import "_global/header.css";
@import "event.css";
@import "single_tournament.css";
body {
margin: 0;

View File

@ -11,16 +11,15 @@
<body>
<header>
<a href="../index.html"><img src="../_global/logo_padel.jpeg" alt=""></a>
<a href="#">Wiadomości</a>
<a href="#">Kalendarz turniejów</a>
<a href="#">Ranking</a>
<a href="#">Wyniki</a>
<a href="#">Kontakt</a>
<form action="../panel_organizatora/index.html">
<input class="loginn" type="submit" value="Panel organizatora" />
</form>
<span class="dot">JM</span>
<div class="logoBox">
<a class="header_link" href="../index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a>
</div>
<div class="linkBox">
<!-- <span class="dot">JM</span>-->
<button class="loginButton" type="submit" >LOGOWANIE</button>
<a class="header_link" href="#">Kontakt</a>
<a class="header_link" href="#">Ranking</a>
<a class="header_link" href="#">Kalendarz turniejów</a>
</div>
</header>