weekly blog post

webpage/style.css

@@ -1,35 +1,21 @@
 * {
 	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%;
+ margin-left: 20%;
+ margin-right: 20%;
 }
 html * {
  color: white;
 }
 @font-face {
  font-family: 'Draco';
- src: url('Draco/Draco.otf');
+ src: url('https://y2kcs.neocities.org/Draco/Draco.otf');
  format("opentype");
 }
 a {
@@ -61,13 +47,13 @@ hr {
  color: grey;
 }
 .clickable-image {
- width: 60%;
+ width: 80%;
  height: auto;
  object-fit: cover;
  border: 1px solid #fff;
 }
 .clickable-image:active {
- width:70%;
+ width:100%;
  height:auto;
 }
 a:hover {
@@ -129,6 +115,22 @@ iframe {
 	word-wrap: break-word;
 	width: 85%;
 }
+@media only screen and (max-width: 1440px) {
+/*HD 4:3 PC resolutions*/
+ body {
+  margin-left: 10%;
+  margin-right: 10%;
+ }
+}
+@media only screen and (max-width: 1024px) {
+/*smaller 4:3 PC resolutions*/
+ body {
+  margin-left: 0%;
+  margin-right: 0%;
+  padding-left: 12px;
+  padding-right: 12px
+ }
+}
 @media only screen and (max-width: 750px) {
 /* mobile phones*/
  .box, .container {
@@ -151,13 +153,13 @@ iframe {
   width:100%;
  }
  .clickable-image {
-  width: 80%;
+  width: 90%;
   height: auto;
   object-fit: cover;
   border: 1px solid #fff;
  }
  .clickable-image:active {
-  width:90%;
+  width:100%;
   height:auto;
  }
 }