Updated Style fucksie wupsie

global/style.css

@@ -0,0 +1,450 @@
+* {
+    box-sizing:border-box
+}
+
+body {
+    /*font-family: "FreePixel";
+    font-size:16px;*/
+
+    font-family: var(--font-family);
+
+    font-style: 13px/1.231;
+    font-size: var(--font-size);
+
+    color:var(--main-fg-color);
+    
+    background: var(--main-bg-end-color) url(../src/fade.png) top repeat-x;
+
+    margin:0;
+    padding-bottom:26px;
+    
+    transition: 0.2s;
+}
+
+nav{
+    width:100%;
+    height:40px;
+    position:inherit;
+    top:0;
+
+    padding:0 20x;
+    z-index:1;
+
+    text-align: center;
+    display: block;
+    margin-left: 20px;
+
+}
+
+.nav{
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    min-height:32px;
+    background:none;
+    text-decoration:none;
+    cursor:pointer;
+
+    float:left;
+    clear:left;
+    text-align:center;
+
+    margin-right: 20px;
+    margin-top: 10px;
+
+    color: var(--main-fg-color);
+
+    font-size: var(--font-size);
+
+}
+
+.navSep {
+    width: 80%;
+    float:left;
+    margin-bottom: 20px;
+}
+
+main{
+    width:100%;
+    min-height:calc(100vh - 60px - 26px);
+
+    overflow-x:hidden;
+    padding:20px 20px;
+
+
+}
+
+main>.content,#footnote{
+    min-height: calc(80vh - 200px);
+    border-style: solid;
+    border-width: 1px;
+    background: var(--main-color);
+    margin-bottom: 10px;
+
+    padding: 10px 10px 10px 10px;
+
+    .titlebar {
+        margin: -10px -10px 0 -10px;
+        background: var(--main-bg-color);
+        color: var(--main-title-fg-color);
+        padding: 5px 5px 5px 10px;
+        margin-bottom: 10px;
+    }
+}
+
+main>.fit,#footnote{
+    min-height: fit-content;
+}
+
+footer{
+    height:fit-content;
+    background-color: var(--main-color);
+    color: var(--main-fg-color);
+    display:flex;
+    padding:0 10px;
+    align-items:center;
+    overflow-x:hidden;
+    position:fixed;
+
+    font-family: "FreePixel";
+
+    bottom:0;
+    width:100%
+}
+
+#footnote{
+    margin-bottom: 20px;
+    height: max-content;
+    border-style: solid;
+    border-width: 1px;
+
+    padding: 10px 10px 10px 10px;
+
+    margin-right: auto;
+    margin-left: auto;
+
+    background-color: var(--main-color);
+}
+
+#gif{
+	margin-left: auto;
+	margin-right: auto;
+    align-items: center;
+	scale: 100%;
+
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center;
+    gap:10px;
+
+    margin-bottom: 40px;
+
+}
+
+@font-face {
+    font-family: FreePixel;
+    font-style: normal;
+    font-weight: 400;
+    src: url("../src/FreePixel.ttf");
+  }
+  
+
+@media (max-width: 576px) {
+    .nav::before,.nav::after{
+        content: "/";
+    }
+
+    .navSep {
+        scale: 0%;
+    }
+
+    .selected-nav{
+        text-decoration-color: var(--main-fg-color);
+        text-decoration-line: underline;
+    }
+
+    nav{
+        position: inherit;
+        width: fit-content;
+        margin-left: auto;
+        margin-right: auto;
+        display: flex;
+    }
+
+    .nav{
+        white-space: nowrap;
+        font-size: 12px;
+        margin-right: 10px;
+    }
+}
+
+@media (min-width: 576px){
+    nav{
+        width:140px;
+        padding:20px 0px 0 0;
+        position:absolute;
+        height:auto;
+        flex-direction:column;
+    }
+    
+    .nav{
+        width:80%;
+        margin:0 0 20px 0;
+
+        background-color: var(--main-color);
+
+        color:var(--main-fg-color);
+        text-decoration-color:#d4d4d4;
+    
+        border-style: solid;
+        border-width: 1px;
+    
+        border-color: #000000;
+    }
+
+    main{
+        width:calc(576px - 80px);
+        max-width:100vw;
+        min-height:calc(100vh - 26px);
+        margin-left:130px
+    }
+
+    .selected-nav {
+        border-style: ridge;
+        background-color: var(--main-bg-color);
+        color: var(--main-title-fg-color);
+    }
+}
+
+@media (min-width: 768px){
+    body{
+        padding-left:calc((100vw - 768px - 200px)*.5)
+    }
+
+    main{
+        width:calc(768px - 80px * 2)
+    }
+
+    footer{
+        margin-left:calc((100vw - 768px - 200px)*-.5)
+    }
+}
+
+@media (min-width: 992px){
+    body{
+        padding-left:calc((100vw - 992px - 50px)*.5)
+    }
+    main{
+        width:calc(992px - 80px * 2)
+    }
+    footer{
+        margin-left:calc((100vw - 992px - 200px)*-.5)
+    }
+}
+    
+div.button-container{
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center;
+    gap:20px;
+
+    margin-bottom: 10px;
+}
+
+div.contact-text{
+    margin-left:calc(130px + 20px)
+}
+
+.license-img{
+    height:31px;
+    width:88px;
+}
+
+.smaltext{
+    font-size: xx-small;
+    text-align:center
+}
+
+.image-rounded{
+    border-radius:50%;
+}
+
+.text-center{
+    text-align:center;
+    display: block;
+}
+
+dl dt{
+    float:left;
+    clear:left;
+    text-align:right;
+    width:130px;
+    font-weight:700
+}
+
+dl dd{
+    margin-left:calc(130px + 20px)
+}
+
+.inline-icon{
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:left;
+    gap:10px;
+    
+}
+
+.section-header{
+    display:flex;
+    justify-content:space-between;
+    align-items:center
+}
+
+.post-footer{
+    display:flex;
+    justify-content:right;
+    align-items:center
+}
+
+.post-footer>p{
+    margin:0 5%
+}
+
+p.info{
+    font-size:.8rem;
+    margin-top:5px
+}
+
+span {
+    display: block ruby;
+    font-size: small;
+}
+
+.info {
+    background-color: red;
+    color: var(--main-bg-color);
+}
+
+p.info span{
+    display:block;
+    margin-right:20px;
+}
+
+p.info span i{
+    margin-right:.5em
+}
+
+@media (min-width: 768px){
+    p.info span{
+        display:inline
+    }
+}
+h1,h2,h3,h4,h5,h6{
+    margin:20px 0
+}
+
+h1+p.info,h2+p.info,h3+p.info,h4+p.info,h5+p.info,h6+p.info{
+    margin-top:-15px;
+    margin-bottom:20px
+}
+code,pre{
+    font-size:.875em;
+    font-family: "FreePixel";
+    font-feature-settings:"calt" 1;
+    font-variant-ligatures:normal;
+    border-color:var(--main-fg-color);
+    border-style:solid;
+    border-radius:3px;
+    background-color: var(--main-bg-end-color-color);
+    color: var(--main-fg-color);
+}
+
+code{
+    border-width:1px 0
+}
+
+pre{
+    border-width:1px;
+    overflow-x:auto;
+    padding:4px 2px
+}
+
+.nobr {
+    white-space: nowrap;
+    white-space-collapse: nowrap;
+}
+
+pre>code{
+    border-width:0
+}
+
+h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{
+    border-width:0
+}
+
+form{
+    margin:10px
+}
+
+.form-group{
+    padding:5px 0
+}
+
+.form-group>label{
+    display:block;
+    font-size:14px
+}
+
+.form-group>.error{
+    color:red;
+    font-size:14px
+}
+
+input{
+    width:100%;
+    padding-top:2px
+}
+
+.right-div{
+    width: fit-content;
+    text-align: left;
+    margin-left: auto;
+    margin-right: 0;
+
+    h2{
+        text-align: right;
+    }
+    a.right-div{
+        text-align: right;
+        display: block;
+    }
+}
+
+.postlist {
+    margin-top: 20px;
+    
+    a {
+        font-size: 15px;
+    }
+
+    ul {
+        list-style-type: none;
+    }
+    
+    li {
+       margin-bottom: 20px; 
+       font-size: 10px;
+    }
+}
+
+
+.prefSpan{
+    width: fit-content;
+    margin-left: auto;
+   /* margin-top: -16px; */
+   display: block;
+}
+
+a {
+    color: #0066cc;
+}

global/theme.css

@@ -0,0 +1,10 @@
+:root {
+	--main-bg-color:		"#fed6af";
+	--main-bg-end-color:    "#ffffee";
+	--main-color:           "#ffffff";
+	--main-fg-color: 		"#800000";
+	--main-title-fg-color:	"#800000";
+
+	--font-family: 			"Arial, Helvetica, sans-serif";
+	--font-size: 			13px;
+}

index.html

@@ -16,7 +16,7 @@
 		<main>
 			<div id="home" class="content">
 				<h2 class="titlebar"><a href="https://www.weingardt.dev/">Weingardt.dev</a> - 	About <i>me</i></h2>
-				<div class="text-center"><img src="src/me.jpg" alt="me" class="image-rounded" width="256" height="256"></div>
+				<!--div class="text-center"><img src="src/me.jpg" alt="me" class="image-rounded" width="256" height="256"></div-->
 
 				<p>
 					<br>