rewrite gh pages with html + css

css/BoxSize.css

@@ -0,0 +1,16 @@
+.bigbox {
+    min-width: 1020px;
+    margin: 0 auto;
+}
+
+@media only screen and (max-width: 1460px) {
+    .bigbox {
+        width: 1050px;
+    }
+}
+
+@media only screen and (min-width: 1460px) {
+    .bigbox {
+        width: 1300px;
+    }
+}

css/MainView.css

@@ -0,0 +1,197 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+}
+
+#root {
+    min-width: 1020px;
+}
+
+.header {
+    background-color: #2196F3;
+    color: white;
+    text-align: center;
+    padding: 5px;
+    border-radius: 10px;
+}
+
+.footer {
+    position: fixed;
+    width: 100%;
+    bottom: 0px;
+    background-color: #444;
+    color: white;
+    padding: 3px;
+    padding-left: 15px;
+}
+
+.topmenu {
+    list-style-type: none;
+    margin: 0;
+    padding: 5px;
+    overflow: hidden;
+    background-color: #EEE;
+}
+
+.topmenu li {
+    float: right;
+}
+
+.topmenu li a {
+    display: inline-block;
+    color: #000;
+    text-align: center;
+    margin-right: 4px;
+    padding: 8px;
+    text-decoration: none;
+    border-radius: 5px;
+    transition-duration: 0.15s;
+    transition-timing-function: ease-in-out;
+}
+
+.topmenu li a:hover {
+    cursor: pointer;
+    color: rgb(0, 0, 0);
+    background-color: #DDD;
+}
+
+.column {
+    float: left;
+    padding: 15px;
+}
+
+.clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+.sidemenu {
+    position: sticky;
+    top: 0px;
+    width: 250px;
+}
+
+.sidemenu img {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    width: 200px;
+    border-radius: 20px;
+}
+
+.sidemenu img:hover {
+    transform: scale(1.05);
+    box-shadow: 0px 0px 15px #00000030;
+    background-color: rgb(255, 255, 255);
+    transition-duration: 0.15s;
+    transition-timing-function: ease-in-out;
+}
+
+.content {
+    min-width: 770px;
+    width: calc(100% - 250px);
+}
+
+.sidemenu h1 {
+    font-size: x-large;
+    font-weight: bolder;
+}
+
+.sidemenu input {
+    outline: none;
+    width: calc(100% - 65px);
+    height: 30px;
+    border: rgb(180, 180, 180) 1px solid;
+    border-radius: 8px;
+    padding: 6px;
+    transition-duration: 0.05s;
+    transition-timing-function: ease-in-out;
+}
+
+.sidemenu input:focus {
+    border-color: #2196F3;
+    border-width: 3px;
+}
+
+.sidemenu button {
+    width: 60px;
+    height: 30px;
+    float: right;
+    font-size: 1px;
+    border-radius: 6px;
+    border-width: 0px;
+    background-color: #2196F3;
+    color: #FFF;
+    transition-duration: 0.15s;
+    transition-timing-function: ease-in-out;
+}
+
+.sidemenu button:hover {
+    background-color: #1d83d6;
+    cursor: pointer;
+}
+
+.sidemenu button:active {
+    transform: scale(0.96);
+}
+
+.sidemenu ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.sidemenu li a {
+    margin-bottom: 4px;
+    display: block;
+    padding: 8px;
+    text-decoration: none;
+    border-radius: 5px;
+    color: #333;
+    transition-duration: 0.15s;
+    transition-timing-function: ease-in-out;
+}
+
+.sidemenu li a:hover {
+    background-color: #EEE;
+    cursor: pointer;
+    transform: scale(1);
+}
+
+.sidemenu li a:active {
+    transform: scale(0.96);
+}
+
+.sidemenu li a:focus {
+    background-color: #2196F3;
+    color: #FFF;
+}
+
+.link {
+    color: #74beff
+}
+
+.link a{
+    color: #74beff;
+    display: inline-block;
+    text-decoration:none;
+}
+
+.link a:hover{
+    background-color: #FFF;
+    color: #74beff;
+    cursor: pointer;
+    transform: scale(1.03);
+    border-radius: 3px;
+    transition-duration: 0.15s;
+    transition-timing-function: ease-in-out;
+}
+
+.link a:focus {
+    background-color: #FFF;
+    color: #74beff;
+    cursor: pointer;
+}

css/Publication.css

@@ -0,0 +1,53 @@
+.conference {
+    font-style:oblique;
+}
+
+.abstract {
+    color: #888;
+}
+
+.myself {
+    font-weight: bolder;
+}
+
+.authors {
+    color: #000;
+}
+
+.authors p {
+    display: inline;
+    padding: 0px;
+    margin: 0px;
+}
+
+.paper {
+    color: #74beff
+}
+
+.paper p {
+    padding: 0px;
+    margin: 0px;
+}
+
+.paper a{
+    color: #74beff;
+    display: inline-block;
+    text-decoration:none;
+    padding: 0px;
+}
+
+.paper a:hover{
+    background-color: #FFF;
+    color: #74beff;
+    cursor: pointer;
+    transform: scale(1.03);
+    border-radius: 3px;
+    transition-duration: 0.15s;
+    transition-timing-function: ease-in-out;
+}
+
+.paper a:focus {
+    background-color: #FFF;
+    color: #74beff;
+    cursor: pointer;
+}