plaintro 0.1.0

data/_sass/plaintro/_layout.scss

@@ -0,0 +1,472 @@
+
+/**
+ * For syntax highlight part, using the same setting
+ * of Jekyll minima theme with classic skin
+ * 
+ * Reference:
+ * https://github.com/jekyll/minima/blob/master/_sass/minima/_base.scss
+ */
+pre, code { 
+    font-size: 15px; 
+    border: 1px solid #e8e8e8;
+    border-radius: 3px; 
+    background-color: #eef; 
+}
+
+code { 
+    padding: 1px 5px; 
+}
+
+pre { 
+    padding: 8px 12px; 
+    overflow-x: auto; 
+}
+
+pre > code { 
+    border: 0; 
+    padding-right: 0; 
+    padding-left: 0; 
+}
+
+/**
+ *  extend highlight part to content width
+ */
+.highlight, .highlighter-rouge {
+    width: 100%;
+    margin: 0;
+}
+
+
+
+/*----------------------------------------------
+    Main plaintro CSS
+------------------------------------------------*/
+
+body {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    font-size: 100%;
+    margin: 0px;
+    background-color: #eeeeee;
+    color: #3C3C3C;
+    font-family: sans-serif;
+}
+
+img {
+    width: 100%;
+    object-fit: contain;
+}
+
+ul, ol {
+    padding-left: 20px;
+}
+
+h1, h2, h3, h4, h5, h6,
+p, div,
+header, nav, footer {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+h1, h2 {
+    font-family: 'GeosansLight', sans-serif;
+}
+
+h1 {
+    padding-top: 1%;
+}
+
+a, a:link, a:visited {
+    text-decoration: none;
+    color: #4169E1;
+}
+
+a:hover {
+    color: #B0C4DE;
+}
+
+.site-wrapper {
+    min-height: 100vh;
+    display: flex; 
+    flex-direction: column;
+}
+
+.site-header a, 
+.site-header a:link, 
+.site-header a:visited,
+.site-topnav a, 
+.site-topnav a:link, 
+.site-topnav a:visited {
+    text-decoration: none;
+    color: white;
+}
+
+.site-header a:hover,
+.site-topnav a:hover {
+    color: #4169E1;
+}
+
+.site-header,
+.site-topnav,
+.site-footer {
+    width: 100%;
+    text-align: center;
+}
+
+.site-header,
+.site-topnav {
+    background-color: #5B5B5B;
+    color: white;
+    overflow: auto;
+}
+
+.site-topnav {
+    position: sticky;
+    display: block;
+    top: 0;
+}
+
+.site-menu,
+.site-social {
+    padding-top: 1%;
+    padding-bottom: 1%;
+}
+
+.site-menu {
+    float: left;
+    margin-top: 0.5%;
+    font-size: 1.3rem;
+}
+
+.site-social {
+    float: right;
+    letter-spacing: 0.5rem;
+    font-size: 1.8rem;
+}
+
+.site-footer {
+    padding-top: 1.0%;
+    padding-bottom: 0.5%;
+
+    margin-top: auto;
+}
+
+.site-footer-content {
+    padding-top: 1%;
+    font-size: 0.9rem;
+    line-height: 1.2rem;
+}
+
+.site-header-content,
+.site-topnav-content,
+.site-footer-content,
+.site-content {
+    /* roughly 55% width of Resolution 1600 x 900;*/
+    width: 880px;
+}
+
+.site-header-content {
+    text-align: left;
+    padding-top: 0.5%;
+    padding-bottom: 0.5%;
+    font-size: 3rem;
+    font-family: 'GeosansLight', sans-serif;
+}
+
+.site-content {
+    line-height: 1.5rem;
+    padding-top: 0.5%;
+}
+
+
+
+/*----------------------------------------------
+    Blog related CSS
+------------------------------------------------*/
+
+.site-blog-title-left {
+    float: left;
+}
+
+.site-blog-title-right {
+    text-align: right; 
+    font-size: 70%; 
+    padding-right: 0.5rem;
+}
+
+.site-blog-post-title,
+.site-post-title {
+    margin-bottom: 0;
+    line-height: normal;
+    font-size: 1.8em;
+}
+
+.site-blog-post-title {
+    padding-top: 5%;
+}
+
+.site-post-metadata {
+    line-height: normal; 
+    margin-bottom: 0; 
+    font-size: 95%;
+}
+
+.site-blog-archive {
+    margin: auto;
+}
+
+.site-blog-pagination {
+    width: 540px;
+    text-align: center;
+    margin-bottom: 2.5em;
+    padding-top: 5%;
+}
+
+.site-blog-previous {
+    float: left;
+}
+
+.site-blog-next {
+    float: right;
+}
+
+.site-blog-page-number {
+    display: block;
+}
+
+
+
+/*----------------------------------------------
+    Portfolio related CSS
+------------------------------------------------*/
+
+.site-portfolio-section {
+    margin-bottom: 0.5em;
+    display: flex;
+}
+
+.site-portfolio-section .site-portfolio-thumbnail {
+    margin-left: 0;
+    width: 43%;
+}
+
+.site-portfolio-thumbnail img {
+    margin-top: 1.0em;
+}
+
+.site-portfolio-section .site-portfolio-content {
+    margin-top: 0;
+    margin-right: 0;
+    width: 51%;
+}
+
+.site-portfolio-content h1 {
+    margin-top: 0.5em;
+    font-size: 1.8em;
+    line-height: 1.25em;
+}
+
+
+
+/*----------------------------------------------
+    Resume related CSS
+------------------------------------------------*/
+
+div.site-resume h1 {
+    line-height: normal;
+    margin-bottom: 0.5em;
+    padding-top: 5%;
+    font-size: 1.8em;
+}
+
+/* Simulating adding <hr> after paragraph titles in resume */
+div.site-resume h1::after {
+    content: '';
+    border: 1px inset;
+    box-sizing: border-box;
+    color: gray;
+    display: block;
+    height: 2px;
+    margin: 0.5em auto;
+}
+
+.site-paragraph-title {
+    line-height: normal;
+    margin-bottom: 0.5em;
+    padding-top: 5%;
+    font-size: 1.8em;
+}
+
+.site-paragraph-title,
+.site-paragraph-subtitle {
+    font-family: 'GeosansLight', sans-serif;
+}
+
+
+
+/*----------------------------------------------
+    For responsive web content
+------------------------------------------------*/
+
+@media only screen and (max-width: 1100px) {
+    .site-header-content,
+    .site-topnav-content,
+    .site-footer-content,
+    .site-content {
+        width: 80%;
+    }
+
+    .site-portfolio-section .site-portfolio-thumbnail {
+        width: 378.4px;
+    }
+}
+
+@media only screen and (max-width: 1020px) {
+    .site-portfolio-section .site-portfolio-thumbnail {
+        flex: 0 0 340px;
+    }
+
+    .site-portfolio-content {
+        font-size: 98%;
+    }
+
+    .site-portfolio-content h1 {
+        font-size: 1.7em;
+    }
+}
+
+@media only screen and (max-width: 940px) {
+    .site-portfolio-section .site-portfolio-thumbnail {
+        margin-right: 1.5em;
+    }
+}
+
+@media only screen and (max-width: 900px) {
+    .site-blog-pagination {
+        width: auto;
+    }
+
+    .site-blog-previous {
+        padding-left: 12.5%;
+    }
+
+    .site-blog-next {
+        padding-right: 12.5%;
+    }
+}
+
+@media only screen and (max-width: 820px) {
+    .site-portfolio-section {
+        flex-direction: column;
+    }
+
+    .site-portfolio-section {
+        width: 480px;
+    }
+
+    .site-portfolio-section .site-portfolio-thumbnail {
+        flex: auto;
+        margin-bottom: 0;
+        margin-right: 0;
+        width: 100%;
+    }
+
+    .site-portfolio-section .site-portfolio-content {
+        margin-top: 0;
+        width: 100%;
+    }
+
+    .site-portfolio-content h1 {
+        margin: 0;
+    }
+}
+
+@media only screen and (max-width: 720px) {
+    .site-header-content {
+        font-size: 2.5rem;
+    }
+
+    .site-menu {
+        font-size: 1.1rem;
+    }
+
+    .site-social {
+        font-size: 1.5rem;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    .site-content {
+        font-size: 90%;
+    }
+
+    p:not(.site-footer-p, .site-post-metadata, .site-blog-archive) {
+        font-size: 16px;
+    }
+
+    .site-header-content,
+    .site-topnav-content,
+    .site-footer-content,
+    .site-content {
+        width: 90%;
+    }
+
+    .site-footer-content {
+        font-size: 0.8rem;
+    }
+
+    .site-menu,
+    .site-social {
+        width: 100%;
+    }
+
+    .site-header-content {
+        text-align: center;
+        font-size: 2.0rem;
+    }
+
+    .site-menu {
+        font-size: 1.1rem;
+    }
+
+    .site-social {
+        font-size: 1.5rem;
+    }
+
+    .site-blog-title-right {
+        padding-right: 0;
+    }
+
+    .site-blog-previous {
+        padding-left: 0;
+    }
+
+    .site-blog-next {
+        padding-right: 0;
+    }
+
+    .site-blog-pagination {
+        width: 360px;
+    }
+
+    .site-blog-previous {
+        padding-left: 0;
+    }
+
+    .site-blog-next {
+        padding-right: 0;
+    }
+}
+
+@media only screen and (max-width: 561px) {
+    .site-portfolio-section {
+        width: 95%;
+    }
+}
+
+@media only screen and (max-width: 400px) {
+    .site-blog-pagination {
+        width: auto;
+    }
+}