migration

webpage/style.css

@@ -0,0 +1,163 @@
+* {
+	box-sizing: border-box;
+}
+/*
+.foo {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -moz-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -moz-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+*/
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ line-height: 14px;
+ background-color: black;
+ padding: 0.5%;
+}
+html * {
+ color: white;
+}
+@font-face {
+ font-family: 'Draco';
+ src: url('Draco/Draco.otf');
+ format("opentype");
+}
+a {
+ display: block;
+ padding: 0;
+ text-decoration: none;
+ width: 100%;
+ }
+#adless {
+ color: grey;
+ display: inline;
+ padding: 0;
+ margin-left: 0;
+ text-decoration: underline;
+}
+#aimage {
+ display: inline;
+ padding: 0;
+}
+ol {
+ padding-left: 12px;
+}
+li {
+ word-wrap: break-word;
+ width: 97%;
+}
+hr {
+ margin-right: 16px;
+ color: grey;
+}
+.clickable-image {
+ width: 60%;
+ height: auto;
+ object-fit: cover;
+ border: 1px solid #fff;
+}
+.clickable-image:active {
+ width:70%;
+ height:auto;
+}
+a:hover {
+ color: #999999;
+}
+p {
+ word-wrap: break-word;
+ width: 97%;
+}
+#grad {
+  background-image: linear-gradient(to right, black, transparent), url('webpagebackground.png');
+ background-size: cover;
+ padding: 12px;
+ border: 1px solid #fff;
+ max-width: 100%;
+ } 
+.container {
+  display: flex;
+  word-wrap: break-word;
+}
+.box {
+ flex: 1;
+ max-width: 18%;
+ margin-top: 12px;
+ padding-left: 12px;
+ border: 1px solid #fff;
+}
+.boxmiddle {
+ flex: 2;
+ margin-top: 12px;
+ margin-left: 12px;
+ margin-right: 12px;
+ padding-left: 12px;
+ border: 1px solid #fff;
+}
+.boxmiddleright {
+ flex: 2;
+ margin-top: 12px;
+ margin-left: 12px;
+ padding-left: 12px;
+ border: 1px solid #fff;
+}
+iframe {
+ border: 1px solid #fff;
+ height: 72vh;
+ width: 82%;
+ margin-top: 12px;
+ margin-left: 12px;
+}
+#ifix {
+ max-width: 100%;
+ padding-bottom: 12px;
+}
+#smoltext {
+ color: grey;
+ font-size: 11px;
+}
+#textfix {
+	word-wrap: break-word;
+	width: 85%;
+}
+@media only screen and (max-width: 750px) {
+/* mobile phones*/
+ .box, .container {
+  display: block;
+  max-width: 100%;
+  margin-top: 12px;
+ }
+ .boxmiddle, .boxmiddleright {
+  display: block;
+  max-width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+ }
+ iframe{ 
+  margin-top: 12px;
+  margin-left: 0;
+  width:100%;
+ }
+ #ifix{
+  width:100%;
+ }
+ .clickable-image {
+  width: 80%;
+  height: auto;
+  object-fit: cover;
+  border: 1px solid #fff;
+ }
+ .clickable-image:active {
+  width:90%;
+  height:auto;
+ }
+}