thsf.net/build/lib/thsf/static/css/style.css

178 lines
2.6 KiB
CSS
Raw Normal View History

2023-04-09 06:17:34 +11:00
@font-face {
font-family: pfdintextcomppromedium;
src: url(../fonts/PFDinTextCompPro-Medium.ttf);
}
@font-face {
font-family: pfdintextcompprothin;
src: url(../fonts/PFDinTextCompPro-Thin.ttf);
}
:root {
--main-bg-color: #e6007e;
2023-04-09 11:12:29 +11:00
--alt-bg-color: #E59730;
--alt2-bg-color: #9EBF43;
2023-04-09 21:37:50 +11:00
--alt3-bg-color: #3096E5;
2023-04-09 06:17:34 +11:00
--main-color: #ffffff;
2023-04-09 11:12:29 +11:00
--alt-main-color: #1A000D;
2023-04-09 06:17:34 +11:00
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--main-bg-color);
font-family: pfdintextcomppromedium;
2023-04-09 19:04:35 +11:00
text-align: center;
2023-04-09 06:17:34 +11:00
}
.white {
color: var(--main-color);
}
.black {
2023-04-09 11:12:29 +11:00
color: var(--alt-main-color);
2023-04-09 06:17:34 +11:00
}
.thin {
font-family: pfdintextcompprothin;
}
.bold {
font-family: pfdintextcomppromedium;
}
.button {
font-size: 2.5em;
transition-property: color;
transition-duration: 1s;
}
.button:hover {
color: var(--main-color);
cursor: pointer;
}
.logo {
width: inherit;
}
2023-04-09 21:37:50 +11:00
.bg1 {
background-color: var(--alt-bg-color);
border-color: var(--alt-bg-color);
}
.bg2 {
background-color: var(--alt2-bg-color);
border-color: var(--alt2-bg-color);
}
.bg3 {
background-color: var(--alt3-bg-color);
border-color: var(--alt3-bg-color);
}
2023-04-09 06:17:34 +11:00
a {
font-family: pfdintextcomppromedium;
font-weight: 250;
2023-04-09 11:12:29 +11:00
color: var(--alt-main-color);
2023-04-09 06:17:34 +11:00
transition-property: color;
transition-duration: 1s;
text-decoration: wavy;
}
a:hover {
color: var(--main-color);
cursor: pointer;
}
#main_wrapper {
display: flex;
flex-direction: row;
justify-content: center;
2023-04-09 18:50:21 +11:00
align-items: center;
align-content: center;
2023-04-09 06:17:34 +11:00
margin-bottom: 5em;
}
#center_wrapper, #header_wrapper {
display: flex;
flex-direction: column;
2023-04-09 18:50:21 +11:00
justify-content: center;
2023-04-09 06:17:34 +11:00
align-items: center;
}
#header {
display: flex;
flex-direction: row;
justify-content: center;
gap: 0;
text-align: center;
font-size: 9.75em;
font-weight: bold;
padding: 0;
}
#header > span {
margin: 0;
}
#subheader {
margin: -1em 0 0 0;
font-size: 3.47em;
}
#place {
margin: 0;
font-size: 2.145em;
}
#logo_wrapper {
margin-top: 1em;
width: 40em;
}
#navbar_wrapper {
position: fixed;
bottom: 0;
padding: 1em 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 2em;
2023-04-09 19:04:35 +11:00
background-color: var(--main-bg-color);
2023-04-09 06:17:34 +11:00
width: 100vw;
}
#blah {
margin: 2em 0 2em;
font-size: 2em;
font-family: pfdintextcompprothin;
color: var(--main-color);
width: 20em;
text-align:justify;
text-justify:inter-word;
}
2023-04-09 21:19:55 +11:00
#blah > p, #blah.h2 {
margin-top: 0.5em;
}
.important {
font-family: pfdintextcomppromedium;
}
.left {
float: left;
margin-right: 0.5em;
}
.right {
float: right;
margin-left: 0.5em;
2023-04-09 06:17:34 +11:00
}