Working generator & added whole site

resources/css/style.css

@@ -0,0 +1,237 @@
+html, body {
+    line-height: 1.6;
+    font-size: 17px;
+    font-family: sans-serif;
+    color:#444;
+    background-color: #EEEEEE;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    background-image: url(/img/background.jpg);
+}
+
+/** custom landing **/
+
+#logo {
+    width: 70%;
+}
+
+.navbar a {
+    color: rgb(255, 255, 255);
+    float: left;
+    padding: 5px 15px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 17px;
+    /*border-bottom: 6px solid orangered;*/
+}
+
+.navbar a:hover {
+    color:#309e85;
+}
+
+.landing {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+/** website **/
+
+.avatar {
+    width: 100px;
+    height: 100px;
+    margin: 70px auto 35px;
+    border-radius: 50%;
+    background-repeat: no-repeat;
+    background-size: 100px 100px;
+    display: block;
+}
+
+.navbarButton {
+    font-size:30px;
+    cursor:pointer;
+    position:fixed;
+    margin-left: 10px;
+}
+
+.flexContainer {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: stretch;
+}
+
+footer {
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    color: white;
+    text-align: center;
+}
+
+.footer {
+    color: #a5adb7;
+    font-size: 12px;
+    text-decoration: none;
+}
+
+.footer:hover {
+    text-decoration: underline;
+}
+
+.menuContainer {
+    flex-grow: 1;
+    width: 120px;
+    max-width: 120px;
+    height: 100%;
+    background-color: rgb(34, 34, 34);
+}
+
+.menuContainer ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.menuContainer a {
+    padding: 0px 5px 0px 5px;
+    text-decoration: none;
+    font-size: 25px;
+    color: #888;
+    display: block;
+    transition: 0.3s;
+}
+
+.menuContainer a:hover {
+    color: #f1f1f1;
+}
+
+.menuContainer li {
+    text-align: center;
+    border-bottom: 1px solid #555;
+}
+
+.menuContainer li:last-child {
+    border-bottom: none;
+}
+
+.submenuContainer {
+    flex-grow: 1;
+    width: 400px;
+    max-width: 400px;
+    height: 100%;
+    overflow-y: scroll;
+    background-color: rgb(219, 219, 219);
+}
+
+.submenuContainer h1 {
+    margin-left: 20px;
+}
+
+.submenuContainer a {
+    color: #000;
+    font-size: 15px;
+    text-decoration: none;
+    display: block;
+    height: 30px;
+    position: relative;
+}
+
+.submenuContainer a::before {
+    content: "❯";
+    position: absolute;
+    top: 4px;
+    left: 12px;
+    z-index: 1;
+    font-size: 13px;
+    color:#309e85;
+}
+
+.submenuContainer a:hover {
+    background-color: grey;
+}
+
+.postTitle {
+    position: absolute;
+    margin: 5px 0;
+    padding-left: 32px;
+    font-size: 16px;
+    line-height: 22px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: #55606f;
+    overflow: hidden;
+}
+
+.postDate {
+    font-size: 12px;
+    margin: 5px 0px;
+    padding-right: 3px;
+    color: #9aa4af;
+    float: right;
+}
+
+.contentContainer {
+    flex-grow: 100;
+    height: 100%;
+    overflow-y: scroll;
+    transition: 0.5s;
+    text-align: justify;
+    background-color: rgba(57, 57, 57, 0.649);
+}
+
+.contentContainer article{
+    overflow-y: auto;
+    margin-left: auto;
+    margin-right: auto;
+    box-sizing: border-box;
+    max-width: 900px;
+    padding: 20px;
+    background-color: rgb(219, 219, 219);
+}
+
+.contentContainer img{
+    width: 60%;
+    display:block;
+    margin:auto;
+}
+
+.contentContainer blockquote{
+    font-size: 15px;
+    font-family: monospace;
+    background-color: rgba(197, 197, 197, 0.5);
+    border-radius: 2px;
+    border: 1px solid rgba(197, 197, 197, 0.5);
+    padding-left: 10px;
+    margin: 0 10px 0 10px;
+}
+
+.contentContainer blockquote p{
+    margin: 5px 0 5px 0;
+}
+
+.contentContainer pre{
+    font-size: 15px;
+    font-family: monospace;
+    background-color: rgba(197, 197, 197, 0.5);
+    border-radius: 2px;
+    border: 1px solid rgba(197, 197, 197, 0.5);
+    padding-left: 10px;
+    margin: 0 10px 0 10px;
+    overflow: scroll;
+}
+
+@media only screen and (max-width: 1000px) {
+    .menuContainer { width:100%; height: auto; max-width: 100%;  }
+    .submenuContainer { width:100%; height: auto; max-width: 100%; max-height: 500px;  }
+    .contentContainer { width:100%; height: auto; max-width: 100%; max-height: auto; overflow-y: visible; }
+    .contentContainer article { width:100%; height: auto; max-width: 100%; overflow-y: visible; }
+    .sidebarnav a { font-size: 30px; }
+}