thsf.net/src/thsf/static/css/style.css

178 lines
2.6 KiB
CSS
Raw Normal View History

2023-04-05 16:14:50 +02:00
@font-face {
font-family: pfdintextcomppromedium;
src: url(../fonts/PFDinTextCompPro-Medium.ttf);
}
@font-face {
font-family: pfdintextcompprothin;
src: url(../fonts/PFDinTextCompPro-Thin.ttf);
}
2023-04-08 01:32:11 +02:00
:root {
--main-bg-color: #e6007e;
2023-04-09 02:12:29 +02:00
--alt-bg-color: #E59730;
--alt2-bg-color: #9EBF43;
2023-04-09 12:37:50 +02:00
--alt3-bg-color: #3096E5;
2023-04-08 01:32:11 +02:00
--main-color: #ffffff;
2023-04-09 02:12:29 +02:00
--alt-main-color: #1A000D;
2023-04-08 01:32:11 +02:00
}
2023-04-05 16:14:50 +02:00
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
2023-04-08 01:32:11 +02:00
background-color: var(--main-bg-color);
2023-04-05 16:14:50 +02:00
font-family: pfdintextcomppromedium;
2023-04-09 10:04:35 +02:00
text-align: center;
2023-04-05 16:14:50 +02:00
}
2023-04-08 01:41:43 +02:00
.white {
color: var(--main-color);
2023-04-05 16:14:50 +02:00
}
2023-04-08 01:41:43 +02:00
.black {
2023-04-09 02:12:29 +02:00
color: var(--alt-main-color);
2023-04-08 01:41:43 +02:00
}
2023-04-05 16:14:50 +02:00
2023-04-08 01:41:43 +02:00
.thin {
font-family: pfdintextcompprothin;
2023-04-05 16:14:50 +02:00
}
2023-04-08 01:41:43 +02:00
.bold {
font-family: pfdintextcomppromedium;
2023-04-05 16:14:50 +02:00
}
2023-04-08 01:41:43 +02:00
.button {
2023-04-08 02:07:18 +02:00
font-size: 2.5em;
2023-04-08 01:41:43 +02:00
transition-property: color;
transition-duration: 1s;
}
.button:hover {
2023-04-08 01:32:11 +02:00
color: var(--main-color);
2023-04-08 01:41:43 +02:00
cursor: pointer;
2023-04-05 16:14:50 +02:00
}
2023-04-08 01:41:43 +02:00
.logo {
width: inherit;
2023-04-05 16:14:50 +02:00
}
2023-04-09 12:37:50 +02: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-08 01:41:43 +02:00
a {
2023-04-05 16:14:50 +02:00
font-family: pfdintextcomppromedium;
2023-04-08 01:41:43 +02:00
font-weight: 250;
2023-04-09 02:12:29 +02:00
color: var(--alt-main-color);
2023-04-08 01:41:43 +02:00
transition-property: color;
transition-duration: 1s;
text-decoration: wavy;
}
a:hover {
color: var(--main-color);
cursor: pointer;
2023-04-05 16:14:50 +02:00
}
2023-04-07 10:18:26 +02:00
#main_wrapper {
2023-04-07 09:56:42 +02:00
display: flex;
2023-04-07 10:34:03 +02:00
flex-direction: row;
2023-04-07 10:31:00 +02:00
justify-content: center;
2023-04-09 09:50:21 +02:00
align-items: center;
align-content: center;
2023-04-07 10:52:43 +02:00
margin-bottom: 5em;
2023-04-07 09:49:58 +02:00
}
2023-04-08 02:20:04 +02:00
#center_wrapper, #header_wrapper {
2023-04-05 16:14:50 +02:00
display: flex;
flex-direction: column;
2023-04-09 09:50:21 +02:00
justify-content: center;
2023-04-05 16:14:50 +02:00
align-items: center;
}
#header {
2023-04-08 02:26:11 +02:00
display: flex;
flex-direction: row;
justify-content: center;
gap: 0;
2023-04-05 16:14:50 +02:00
text-align: center;
2023-04-08 01:41:43 +02:00
font-size: 9.75em;
font-weight: bold;
2023-04-08 02:14:14 +02:00
padding: 0;
2023-04-08 01:41:43 +02:00
}
2023-04-08 02:14:14 +02:00
#header > span {
margin: 0;
}
2023-04-08 01:41:43 +02:00
#subheader {
2023-04-08 02:18:06 +02:00
margin: -1em 0 0 0;
2023-04-08 01:41:43 +02:00
font-size: 3.47em;
}
#place {
margin: 0;
font-size: 2.145em;
2023-04-05 16:14:50 +02:00
}
#logo_wrapper {
margin-top: 1em;
width: 40em;
}
2023-04-07 10:52:43 +02:00
#navbar_wrapper {
position: fixed;
bottom: 0;
2023-04-07 11:01:20 +02:00
padding: 1em 0;
2023-04-05 16:14:50 +02:00
display: flex;
2023-04-07 10:52:43 +02:00
flex-direction: row;
justify-content: center;
2023-04-05 16:14:50 +02:00
align-items: center;
gap: 2em;
2023-04-09 10:04:35 +02:00
background-color: var(--main-bg-color);
2023-04-07 10:54:35 +02:00
width: 100vw;
2023-04-05 16:14:50 +02:00
}
2023-04-06 12:55:49 +02:00
#blah {
2023-04-07 10:12:24 +02:00
margin: 2em 0 2em;
2023-04-06 12:57:59 +02:00
font-size: 2em;
2023-04-06 13:05:50 +02:00
font-family: pfdintextcompprothin;
2023-04-08 01:32:11 +02:00
color: var(--main-color);
2023-04-08 02:04:54 +02:00
width: 20em;
2023-04-07 10:11:39 +02:00
text-align:justify;
text-justify:inter-word;
2023-04-06 12:49:18 +02:00
}
2023-04-09 12:19:55 +02: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-07 10:07:00 +02:00
}