post now complete visible, files added to db
This commit is contained in:
Johannnes Bürst
@@ -1,82 +1,80 @@
|
||||
|
||||
body, h1, h2, h3, h4, h5 {
|
||||
font-family: "Raleway", sans-serif;
|
||||
color: black;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.w3-content .w3-container-display img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.w3-content .w3-container-display img{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.w3-content {
|
||||
max-width: 800px;
|
||||
max-width: 800px;
|
||||
}
|
||||
footer{
|
||||
padding-left: 2px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
video {
|
||||
width:100%;
|
||||
max-width:500px;
|
||||
height:auto;
|
||||
}
|
||||
iframe{
|
||||
width:100%;
|
||||
max-width:500px;
|
||||
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
video {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
}
|
||||
textarea{
|
||||
resize: none;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.bgimg-1{
|
||||
}
|
||||
|
||||
.bgimg-1 {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url("horsehead.jpg");
|
||||
background-image: url("horsehead.jpg");
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.button_flash {
|
||||
background-color: #004A7F;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: Arial;
|
||||
font-size: 20px;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: #004A7F;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: Arial;
|
||||
font-size: 20px;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button_flash {
|
||||
-webkit-animation: glowing_red 1500ms infinite;
|
||||
-moz-animation: glowing_red 1500ms infinite;
|
||||
-o-animation: glowing_red 1500ms infinite;
|
||||
animation: glowing_red 1500ms infinite;
|
||||
-webkit-animation: glowing_red 1500ms infinite;
|
||||
-moz-animation: glowing_red 1500ms infinite;
|
||||
-o-animation: glowing_red 1500ms infinite;
|
||||
animation: glowing_red 1500ms infinite;
|
||||
}
|
||||
|
||||
.button_flash_animation {
|
||||
-webkit-animation: glowing_green 2000ms infinite;
|
||||
-moz-animation: glowing_green 2000ms infinite;
|
||||
-o-animation: glowing_green 2000ms infinite;
|
||||
animation: glowing_green 2000ms infinite;
|
||||
-webkit-animation: glowing_green 2000ms infinite;
|
||||
-moz-animation: glowing_green 2000ms infinite;
|
||||
-o-animation: glowing_green 2000ms infinite;
|
||||
animation: glowing_green 2000ms infinite;
|
||||
}
|
||||
|
||||
.rotated-image {
|
||||
animation: spin_img 1s infinite linear
|
||||
animation: spin_img 1s infinite linear
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
@@ -99,7 +97,7 @@ textarea{
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
overflow: auto;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -110,101 +108,140 @@ textarea{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown a:hover {background-color: #f1f1f1}
|
||||
|
||||
.show {display:block;}
|
||||
.dropdown a:hover {
|
||||
background-color: #f1f1f1
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@-webkit-keyframes glowing_red {
|
||||
0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
|
||||
50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
|
||||
100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
|
||||
0% {
|
||||
background-color: #B20000;
|
||||
-webkit-box-shadow: 0 0 3px #B20000;
|
||||
}
|
||||
50% {
|
||||
background-color: #FF0000;
|
||||
-webkit-box-shadow: 0 0 40px #FF0000;
|
||||
}
|
||||
100% {
|
||||
background-color: #B20000;
|
||||
-webkit-box-shadow: 0 0 3px #B20000;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes glowing_red {
|
||||
0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
|
||||
50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
|
||||
100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
|
||||
0% {
|
||||
background-color: #B20000;
|
||||
-moz-box-shadow: 0 0 3px #B20000;
|
||||
}
|
||||
50% {
|
||||
background-color: #FF0000;
|
||||
-moz-box-shadow: 0 0 40px #FF0000;
|
||||
}
|
||||
100% {
|
||||
background-color: #B20000;
|
||||
-moz-box-shadow: 0 0 3px #B20000;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes glowing_red {
|
||||
0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
|
||||
50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
|
||||
100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
|
||||
0% {
|
||||
background-color: #B20000;
|
||||
box-shadow: 0 0 3px #B20000;
|
||||
}
|
||||
50% {
|
||||
background-color: #FF0000;
|
||||
box-shadow: 0 0 40px #FF0000;
|
||||
}
|
||||
100% {
|
||||
background-color: #B20000;
|
||||
box-shadow: 0 0 3px #B20000;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowing_red {
|
||||
0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
|
||||
50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
|
||||
100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
|
||||
0% {
|
||||
background-color: #B20000;
|
||||
box-shadow: 0 0 3px #B20000;
|
||||
}
|
||||
50% {
|
||||
background-color: #FF0000;
|
||||
box-shadow: 0 0 40px #FF0000;
|
||||
}
|
||||
100% {
|
||||
background-color: #B20000;
|
||||
box-shadow: 0 0 3px #B20000;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes glowing_green {
|
||||
0% { background-color: #3fff00; -webkit-box-shadow: 0 0 3px #3fff00; }
|
||||
50% { background-color: #0ad100; -webkit-box-shadow: 0 0 40px #0ad100; }
|
||||
100% { background-color: #3fff00; -webkit-box-shadow: 0 0 3px #3fff00; }
|
||||
0% {
|
||||
background-color: #3fff00;
|
||||
-webkit-box-shadow: 0 0 3px #3fff00;
|
||||
}
|
||||
50% {
|
||||
background-color: #0ad100;
|
||||
-webkit-box-shadow: 0 0 40px #0ad100;
|
||||
}
|
||||
100% {
|
||||
background-color: #3fff00;
|
||||
-webkit-box-shadow: 0 0 3px #3fff00;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes glowing_green {
|
||||
0% { background-color: #3fff00; -moz-box-shadow: 0 0 3px #3fff00; }
|
||||
50% { background-color: #0ad100; -moz-box-shadow: 0 0 40px #0ad100; }
|
||||
100% { background-color: #3fff00; -moz-box-shadow: 0 0 3px #3fff00; }
|
||||
0% {
|
||||
background-color: #3fff00;
|
||||
-moz-box-shadow: 0 0 3px #3fff00;
|
||||
}
|
||||
50% {
|
||||
background-color: #0ad100;
|
||||
-moz-box-shadow: 0 0 40px #0ad100;
|
||||
}
|
||||
100% {
|
||||
background-color: #3fff00;
|
||||
-moz-box-shadow: 0 0 3px #3fff00;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes glowing_green {
|
||||
0% { background-color: #3fff00; box-shadow: 0 0 3px #3fff00; }
|
||||
50% { background-color: #0ad100; box-shadow: 0 0 40px #0ad100; }
|
||||
100% { background-color: #3fff00; box-shadow: 0 0 3px #3fff00; }
|
||||
0% {
|
||||
background-color: #3fff00;
|
||||
box-shadow: 0 0 3px #3fff00;
|
||||
}
|
||||
50% {
|
||||
background-color: #0ad100;
|
||||
box-shadow: 0 0 40px #0ad100;
|
||||
}
|
||||
100% {
|
||||
background-color: #3fff00;
|
||||
box-shadow: 0 0 3px #3fff00;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowing_green {
|
||||
0% { background-color: #3fff00; box-shadow: 0 0 3px #3fff00; }
|
||||
50% { background-color: #0ad100; box-shadow: 0 0 40px #0ad100; }
|
||||
100% { background-color: #3fff00; box-shadow: 0 0 3px #3fff00; }
|
||||
0% {
|
||||
background-color: #3fff00;
|
||||
box-shadow: 0 0 3px #3fff00;
|
||||
}
|
||||
50% {
|
||||
background-color: #0ad100;
|
||||
box-shadow: 0 0 40px #0ad100;
|
||||
}
|
||||
100% {
|
||||
background-color: #3fff00;
|
||||
box-shadow: 0 0 3px #3fff00;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@keyframes spin_img {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.button3 {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.button3:hover {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button span {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.button span:after {
|
||||
content: '\00bb';
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
right: -20px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.button:hover span {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.button:hover span:after {
|
||||
opacity: 1;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
html { font-family: sans-serif; background: #eee; padding: 1rem; }
|
||||
body { max-width: 960px; margin: 0 auto; background: white; }
|
||||
h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
|
||||
a { color: #377ba8; }
|
||||
hr { border: none; border-top: 1px solid lightgray; }
|
||||
nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }
|
||||
nav h1 { flex: auto; margin: 0; }
|
||||
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
|
||||
nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
|
||||
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
|
||||
.content { padding: 0 1rem 1rem; }
|
||||
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
|
||||
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
|
||||
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
|
||||
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
|
||||
.post > header > div:first-of-type { flex: auto; }
|
||||
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
|
||||
.post .about { color: slategray; font-style: italic; }
|
||||
.post .body { white-space: pre-line; }
|
||||
.content:last-child { margin-bottom: 0; }
|
||||
.content form { margin: 1em 0; display: flex; flex-direction: column; }
|
||||
.content label { font-weight: bold; margin-bottom: 0.5em; }
|
||||
.content input, .content textarea { margin-bottom: 1em; }
|
||||
.content textarea { min-height: 12em; resize: vertical; }
|
||||
input.danger { color: #cc2f2e; }
|
||||
input[type=submit] { align-self: start; min-width: 10em; }
|
||||
Reference in New Issue
Block a user