175 lines
2.6 KiB
CSS
175 lines
2.6 KiB
CSS
:root {
|
|
|
|
--soleil2: #fdff51;
|
|
--soleil3: #d77f0d;
|
|
--soleil4: #b93805;
|
|
}
|
|
|
|
body {
|
|
|
|
background-color: #d45a00;
|
|
background-image:
|
|
|
|
linear-gradient(#7d492d 0%, #7d492d 8rem,
|
|
#c63300 8rem, #c63300 10rem,
|
|
#d14907 10rem, hsl(25, 100%, 41.6%) calc(100% - 20rem),
|
|
black calc(100% - 5rem), black 100%);
|
|
|
|
color: #eee;
|
|
}
|
|
|
|
body main > h1,
|
|
body main > h2 {
|
|
|
|
text-shadow: 0 0 0.25em #333;
|
|
}
|
|
|
|
body > header {
|
|
|
|
background-image:
|
|
radial-gradient(circle closest-side,
|
|
#ffffff 0%, #ffffff 25%,
|
|
#fdff51 25%, #d77a0d 32%,
|
|
#b63908 50%, transparent 100%),
|
|
|
|
radial-gradient(ellipse farthest-side,
|
|
#c63300 0px, #c63300 50%,
|
|
#c63300 50%, transparent 100%)
|
|
;
|
|
|
|
}
|
|
|
|
|
|
body > header a,
|
|
body > header a:visited {
|
|
|
|
color: black;
|
|
}
|
|
|
|
@media screen and (max-width: 35.374rem) {
|
|
|
|
body > header nav {
|
|
|
|
text-align: left;
|
|
}
|
|
|
|
body > header nav ul li {
|
|
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
body > header nav a,
|
|
body > header nav a:visited {
|
|
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 35.375rem) {
|
|
|
|
body > header nav {
|
|
|
|
position: relative;
|
|
z-index: 10000;
|
|
}
|
|
|
|
body > header nav a {
|
|
|
|
background-color: hsl(25, 100%, 41.6%, 1);
|
|
box-shadow: 0 0 2rem hsl(25, 100%, 41.6%);
|
|
z-index: 10000;
|
|
font-weight: bold;
|
|
border-bottom: 0.5rem solid black;
|
|
padding: 0.25rem 1rem;
|
|
transition-duration: 0.666s;
|
|
transition-property: color, background-color, border-bottom-color;
|
|
}
|
|
|
|
body > header nav a:hover {
|
|
|
|
border-bottom-color: white;
|
|
color: white;
|
|
background-color: #c63300;
|
|
}
|
|
}
|
|
|
|
|
|
body header:before,
|
|
body header:after,
|
|
body header > :first-child:before {
|
|
|
|
content: ".";
|
|
color: transparent;
|
|
position: absolute;
|
|
display: block;
|
|
overflow: visible;
|
|
}
|
|
|
|
|
|
body header:before {
|
|
|
|
z-index: 48;
|
|
|
|
left: 50vw;
|
|
width: 12.5rem;
|
|
margin-left: -6.25rem;
|
|
|
|
top: 10rem;
|
|
margin-top: -6.25rem;
|
|
height: 12.5rem;
|
|
|
|
background: var(--soleil3);
|
|
box-shadow: 0 -25px 50px var(--soleil4);
|
|
}
|
|
|
|
|
|
body header:after {
|
|
|
|
z-index: 49;
|
|
|
|
left: 50vw;
|
|
width: 9rem;
|
|
margin-left: -4.5rem;
|
|
|
|
top: 10rem;
|
|
margin-top: -4.5rem;
|
|
height: 9rem;
|
|
|
|
background: var(--soleil2);
|
|
}
|
|
|
|
|
|
body header > :first-child:before {
|
|
|
|
z-index: 50;
|
|
|
|
left: 50vw;
|
|
width: 6.25rem;
|
|
margin-left: -3.125rem;
|
|
|
|
top: 10rem;
|
|
margin-top: -3.125rem;
|
|
height: 6.25rem;
|
|
|
|
background: white;
|
|
}
|
|
|
|
body header > :first-child * {
|
|
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
footer {
|
|
|
|
color: white;
|
|
}
|
|
|
|
footer a, footer a:visited {
|
|
|
|
border-bottom: 0.067rem dotted;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
font-weight: bold;
|
|
}
|