extratonal.org website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

263 lines
3.4 KiB

body {
font-family: monospace;
margin: 0 auto;
line-height: 200%;
font-size: 150%;
}
a {
color: #000000;
}
a:hover {
color: #000000;
}
p{
margin: 0;
}
header, footer, div.page {
margin: 0 auto;
}
header{
position: fixed;
width: 100vW;
}
.filler{
min-height: 200px;
}
header h1 {
color: #169bbd;
margin: 0;
font-weight: normal;
font-size: 300%;
text-align: center;
height: 3em;
}
header h1 a{
text-decoration: none;
}
header h1 a:hover{
color: #ffffff;
text-shadow: 0px 0px 10px #000000;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #000000;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
}
header nav ul li {
display: inline;
margin: 0 8px 0 0;
padding: 0;
}
@keyframes headerA {
0% {
color: #000;
text-shadow: 0px 0px 0px #000000;
-webkit-text-stroke-width: 0.0px;
-webkit-text-stroke-color: #000000;
}
90% {
color: #000;
text-shadow: 0px 0px 0px #000000;
-webkit-text-stroke-width: 0.0px;
-webkit-text-stroke-color: #000000;
}
100% { color: #ffffff;
text-shadow: 0px 0px 10px #000000;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #000000;
}
}
.change{
display: inline-block;
animation-name: headerA;
animation-duration: 4s;
transition: all 1s;
}
.nothing{
min-height: 2em;
display: inline-block;
}
div.page {
width: 100vW;
display: flex;
flex-wrap: wrap;
}
.left, .right{
flex: 0 0 auto;
}
.left{
text-align: right;
padding-top: 198px;
margin-left: 40px;
margin-right: 10px;
height: 100vH;
position: fixed;
left: 0px;
top: 0px;
width: calc(50vW - 50px);
overflow: scroll;
z-index: -1;
}
.right{
margin-right: 40px;
margin-left: 10px;
height: 100vH;
overflow: scroll;
position: fixed;
left: 50vW;
top: 0px;
width: calc(50vW - 50px);
z-index: -1;
}
.space-top{
padding-top: 198px;
}
.no-scroll{
overflow: unset;
}
.page h2{
text-transform: uppercase;
font-size: 200%;
font-family: monospace;
}
bold{
font-weight: bold;
}
footer{
bottom: 0px;
border-top: 1px solid black;
position: fixed;
width: 100vW;
}
.active{
font-weight: bold;
}
.list a{
display: inline;
text-decoration: none;
padding-right: 20px;
color: #ddd;
margin-right: 10px;
padding: 2px 2px 2px 10px;
transition: all 1s;
text-shadow:3px 3px 2px rgb(100, 100, 100);
}
.list a > .thumbmove{
display: none;
opacity: 0;
transition: all 1s;
position: fixed;
}
.list a:hover > .thumbmove{
display: block;
opacity: 1;
}
.list a:hover{
color: #222;
background: #ddd;
text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #000000;
}
.list a.active{
font-weight: normal;
}
p.eventflyer{
width: 100%;
text-align: center;
}
img.eventflyer{
max-width: 800px;
}
.all{
padding-top: 198px;
}
.all > a{
opacity: 0.7;
transition: all 1s;
max-height: 400px;
max-width: 400px;
display: block;
height: 400px;
float: left;
margin: 10px;
background: #eee;
position: relative;
}
.all > a:hover{
opacity: 1;
}
.all > a > img{
position: absolute;
bottom: 0px;
left: 0px;
}
.single-image{
text-align: center;
}
.single-image > figcaption{
text-align: center;
}
.infrastructure{
background: #e33;
}
.education{
background: #3a3;
}
.radio{
background: #66e;
}
.special{
background: #800080;
}