91 lines
5.1 KiB
CSS
91 lines
5.1 KiB
CSS
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* reset some styles */
|
||
|
|
ul { padding-left: 0; }
|
||
|
|
ul ul { padding-left: 1vw; }
|
||
|
|
li { list-style: inside; padding: 0.2rem 0 }
|
||
|
|
|
||
|
|
body, html {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
color: #0E0051;
|
||
|
|
background-color: #111;
|
||
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='600' y1='25' x2='600' y2='777'%3E%3Cstop offset='0' stop-color='%2339FF18'/%3E%3Cstop offset='1' stop-color='%2338FFDD'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='650' y1='25' x2='650' y2='777'%3E%3Cstop offset='0' stop-color='%2327ff1b'/%3E%3Cstop offset='1' stop-color='%2327fff1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='700' y1='25' x2='700' y2='777'%3E%3Cstop offset='0' stop-color='%231eff25'/%3E%3Cstop offset='1' stop-color='%2315f5ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' gradientUnits='userSpaceOnUse' x1='750' y1='25' x2='750' y2='777'%3E%3Cstop offset='0' stop-color='%2321ff3c'/%3E%3Cstop offset='1' stop-color='%2304daff'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' gradientUnits='userSpaceOnUse' x1='800' y1='25' x2='800' y2='777'%3E%3Cstop offset='0' stop-color='%2324ff52'/%3E%3Cstop offset='1' stop-color='%2300b4f1'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='850' y1='25' x2='850' y2='777'%3E%3Cstop offset='0' stop-color='%2327ff67'/%3E%3Cstop offset='1' stop-color='%23008fe0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='900' y1='25' x2='900' y2='777'%3E%3Cstop offset='0' stop-color='%2329ff7c'/%3E%3Cstop offset='1' stop-color='%23006ece'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='950' y1='25' x2='950' y2='777'%3E%3Cstop offset='0' stop-color='%232cff91'/%3E%3Cstop offset='1' stop-color='%230050bd'/%3E%3C/linearGradient%3E%3ClinearGradient id='i' gradientUnits='userSpaceOnUse' x1='1000' y1='25' x2='1000' y2='777'%3E%3Cstop offset='0' stop-color='%232fffa4'/%3E%3Cstop offset='1' stop-color='%230037ab'/%3E%3C/linearGradient%3E%3ClinearGradient id='j' gradientUnits='userSpaceOnUse' x1='1050' y1='25' x2='1050' y2='777'%3E%3Cstop offset='0' stop-color='%2332ffb8'/%3E%3Cstop offset='1' stop-color='%2300219a'/%3E%3C/linearGradient%3E%3ClinearGradient id='k' gradientUnits='userSpaceOnUse' x1='1100' y1='25' x2='1100' y2='777'%3E%3Cstop offset='0' stop-color='%2335ffcb'/%3E%3Cstop offset='1' stop-color='%23000f88'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' gradientUnits='userSpaceOnUse' x1='1150' y1='25' x2='1150' y2='777'%3E%3Cstop offset='0' stop-color='%2338FFDD'/%3E%3Cstop offset='1' stop-color='%23007'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg %3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' x='100' width='1100' height='800'/%3E%3Crect fill='url(%23c)' x='200' width='1000' height='800'/%3E%3Crect fill='url(%23d)' x='300' width='900' height='800'/%3E%3Crect fill='url(%23e)' x='400' width='800' height='800'/%3E%3Crect fill='url(%23f)' x='500' width='700' height='800'/%3E%3Crect fill='url(%23g)' x='600' width='600' height='800'/%3E%3Crect fill='url(%23h)' x='700' width='500' height='800'/%3E%3Crect fill='url(%23i)' x='800' width='400' height='800'/%3E%3Crect fill='url(%23j)' x='900' width='300' height='800'/%3E%3Crect fill='url(%23k)' x='1000' width='200' height='800'/%3E%3Crect fill='url(%23l)' x='1100' width='100' height='800'/%3E%3C/g%3E%3C/svg%3E");
|
||
|
|
background-attachment: fixed;
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
padding: 5vh 5vw;
|
||
|
|
height: 100vh;
|
||
|
|
text-align: center;
|
||
|
|
display: grid;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* responsive text size */
|
||
|
|
header h1 { font-size: 3vw; }
|
||
|
|
header h2 { font-size: 2.5vw; }
|
||
|
|
header h3 { font-size: 2vw; }
|
||
|
|
header h4 { font-size: 1.5vw; }
|
||
|
|
|
||
|
|
header a { color: #0E0051; }
|
||
|
|
header a:visited { color: #0E0051; }
|
||
|
|
|
||
|
|
header h1, h2, h3, h4 {
|
||
|
|
margin: 2rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
padding-bottom: 5vh; /* The same as the footer height */
|
||
|
|
}
|
||
|
|
|
||
|
|
main section { margin: 5vh 5vw; }
|
||
|
|
|
||
|
|
main section article,
|
||
|
|
main section nav {
|
||
|
|
color: #ddd;
|
||
|
|
padding: 5vh 5vw;
|
||
|
|
background: rgba(2, 0, 36, .6);
|
||
|
|
background: radial-gradient(circle, rgba(2, 0, 36, .6) 0%, rgba(14, 0, 81, .6) 75%, rgba(19, 0, 112, .6) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
main section article figure { text-align: center; }
|
||
|
|
main section article figure img { max-width: 75%; }
|
||
|
|
main section a { color: #ddd; text-decoration: none; font-weight: bold; }
|
||
|
|
main section a:hover { text-decoration: underline; }
|
||
|
|
main section li { list-style: none; }
|
||
|
|
|
||
|
|
footer {
|
||
|
|
background: rgb(2,0,36);
|
||
|
|
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(14,0,81,1) 78%, rgba(19,0,112,1) 100%);
|
||
|
|
width: 100vw;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
menu {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
menu ul {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
menu ul li {
|
||
|
|
list-style-position: inside;
|
||
|
|
list-style-type: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
menu ul li a {
|
||
|
|
color: #ddd;
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|