jekyll-theme-tallneck 0.1.0 → 0.1.2

data/assets/css/style.css

@@ -1,353 +1,382 @@
-/*
-  Font
-*/
-
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 400;
-    src: url('../font/roboto.eot');
-    /* IE9 Compat Modes */
-    src: local(''),
-        /* IE6-IE8 */ url('../font/roboto.eot?#iefix') format('embedded-opentype'),
-        /* Super Modern Browsers */ url('../font/roboto.woff2') format('woff2'),
-        /* Modern Browsers */ url('../font/roboto.woff') format('woff'),
-        /* Safari, Android, iOS */ url('../font/roboto.ttf') format('truetype'),
-        /* Legacy iOS */ url('../font/roboto.svg#Roboto') format('svg');
-    font-display: swap;
-}
-
-
-/*
-  General
-*/
-
-html {
-    font-family: 'Roboto', sans-serif;
-    font-size: 100%;
-    min-width: 200px;
-}
-
-body {
-    margin: 0;
-    box-sizing: border-box;
-}
-
-h1 {
-    font-size: 3rem;
-    text-align: center;
-}
-
-h2 {
-    font-size: 2rem;
-    margin-block-end: 0.5em;
-}
-
-h3 {
-    font-size: 1.3rem;
-    margin-block-start: 0.5em;
-    margin-block-end: 0.5em;
-}
-
-h4 {
-    margin-block-start: 0.5em;
-    margin-block-end: 0.5em;
-}
-
-h5 {
-    margin-block-start: 0.5em;
-    margin-block-end: 0.5em;
-}
-
-small {
-    font-size: small;
-}
-
-a {
-    text-decoration: none;
-    color: #000;
-}
-
-a:hover {
-    color: #000000aa;
-}
-
-p {
-    margin-block-start: 0.5em;
-    margin-block-end: 0.5em;
-}
-
-ul {
-    margin-block-start: 0.4em;
-    margin-block-end: 0.6em;
-}
-
-ul li {
-    margin-block-start: 0.2em;
-    margin-block-end: 0.2em;
-}
-
-@media (prefers-color-scheme: dark) {
-    a {
-        color: #fff;
-        text-decoration: none;
-    }
-
-    a:hover {
-        color: #ffffffaa;
-    }
-
-    html {
-        background-color: #121212;
-        color: #fefefe;
-    }
-}
-
-@media print {
-    .no_print, .no_print * {
-        display: none !important;
-    }
-}
-
-img {
-    max-width: 100%;
-    max-height: 100%;
-}
-
-img[src*='#center'] {
-    display: block;
-    margin: auto;
-}
-
-/*
-  Header
-*/
-
-header {
-    max-height: 2em;
-    font-size: 1.1rem;
-
-    position: relative !important;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1.0rem 1.5rem;
-
-    background-color: #1d1d1d;
-}
-
-header nav {
-    float: right;
-}
-
-header nav ul {
-    padding-inline-start: 0;
-    display: flex;
-    flex-direction: row;
-}
-
-header nav ul li {
-    display: inline-block;
-    width: 4em;
-    text-align: center;
-    padding-right: 0.4em;
-    padding-left: 0.4em;
-}
-
-header nav ul li a {
-    width: 100%;
-    display: block;
-    color: #fefefe;
-}
-
-header nav ul li a:hover {
-    color: #cacaca;
-}
-
-.header__logo {
-    float: left;
-    vertical-align: middle;
-    height: fit-content;
-    width: fit-content;
-}
-
-.header__logo svg {
-    vertical-align: middle !important;
-    width: 32px;
-    height: 32px;
-    fill: #fefefe;
-}
-
-.header__logo :hover {
-    color: #cacaca;
-    fill: #cacaca;
-}
-
-
-/*
-  Content
-*/
-
-.container {
-    position: relative;
-    max-width: 900px;
-    margin: auto;
-    padding: 0 1.5rem;
-}
-
-.content {
-    margin: 0 auto;
-    padding: 1.5rem;
-}
-
-.content__info {
-    opacity: 0.7; /* Adjust as needed, 1 is fully opaque, 0 is fully transparent */
-    font-size: 0.8em; /* Adjust as needed, 1em is the current font size */
-}
-
-.subtitle {
-    font-size: 1.2rem;
-    margin-bottom: 0.5rem;
-}
-
-.center {
-    text-align: center;
-}
-
-/*
-  Post preview
-*/
-.post-preview {
-    width: 90%;
-    margin: auto;
-}
-
-.post-preview__box {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 1rem 0 0;
-    margin: 0.5rem;
-    border: 2px solid #00000050;
-    border-radius: 0.5rem;
-    transition: all 0.2s ease-in-out;
-    max-height: 10rem;
-    max-width: 100%;
-    overflow: hidden;
-}
-
-.post-preview__box:hover {
-    border: 2px solid #00000055;
-    background-color: #00000011;
-}
-
-@media (prefers-color-scheme: dark) {
-    .post-preview__box {
-        border: 2px solid #ffffff50;
-    }
-
-    .post-preview__box:hover {
-        border: 2px solid #ffffff55;
-        background-color: #ffffff11;
-    }
-}
-
-.post-preview__box__image {
-    width: 90%;
-    height: 10rem;
-    overflow: hidden;
-}
-
-.post-preview__box__image img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.post-preview__box__content {
-    width: 100%;
-    padding-left: 0.5rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-}
-
-.post-preview__box__content__title {
-    margin-bottom: 0.2em;
-    margin-top: 0.2em;
-}
-
-.post-preview__box__content__date {
-    font-size: 0.8rem;
-    opacity: 0.7;
-}
-
-.post-preview__box__content__author {
-    font-size: 0.8rem;
-    opacity: 0.7;
-}
-
-.post-preview__box__content__description {
-    font-size: 0.9rem;
-    opacity: 0.8;
-}
-
-
-/*
-  Footer
-*/
-
-footer {
-    display: block;
-    margin: 2.5em auto 0;
-    font-size: 1.1rem;
-}
-
-footer hr {
-    width: auto;
-    margin-left: auto;
-    margin-right: auto;
-    border: 0;
-    border-top: 0.1em solid;
-}
-
-footer nav {
-    text-align: center;
-}
-
-footer nav ul {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin: auto;
-    padding-inline-start: 0;
-    list-style: none;
-    width: 100%;
-}
-
-footer nav ul li {
-    display: inline-block;
-    width: 5em;
-    text-align: center;
-    align-items: center;
-    padding-right: 0.5em;
-    padding-left: 0.5em;
-}
-
-@media (max-width: 280px) { /* Adjust this value based on when you want the items to wrap */
-    footer nav ul li {
-        width: 50%; /* Make each li take up half the width of the ul on small screens */
-    }
-}
-
-footer nav ul li a {
-    width: 100%;
-    display: block;
-}
-
-footer div {
-    padding-bottom: 0.25em;
-    padding-top: 0.25em;
-}
+/*
+  Font
+*/
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../font/roboto.eot');
+    /* IE9 Compat Modes */
+    src: local(''),
+        /* IE6-IE8 */ url('../font/roboto.eot?#iefix') format('embedded-opentype'),
+        /* Super Modern Browsers */ url('../font/roboto.woff2') format('woff2'),
+        /* Modern Browsers */ url('../font/roboto.woff') format('woff'),
+        /* Safari, Android, iOS */ url('../font/roboto.ttf') format('truetype'),
+        /* Legacy iOS */ url('../font/roboto.svg#Roboto') format('svg');
+    font-display: swap;
+}
+
+
+/*
+  General
+*/
+
+html {
+    font-family: 'Roboto', sans-serif;
+    font-size: 100%;
+    min-width: 270px;
+}
+
+body {
+    margin: 0;
+    box-sizing: border-box;
+}
+
+h1 {
+    font-size: 3rem;
+    text-align: center;
+}
+
+h2 {
+    font-size: 2rem;
+    margin-block-end: 0.5em;
+}
+
+h3 {
+    font-size: 1.3rem;
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+}
+
+h4 {
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+}
+
+h5 {
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+}
+
+small {
+    font-size: small;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+    word-break: break-all;
+}
+
+a:hover {
+    color: #000000aa;
+}
+
+p {
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+}
+
+ul {
+    margin-block-start: 0.4em;
+    margin-block-end: 0.6em;
+}
+
+ul li {
+    margin-block-start: 0.2em;
+    margin-block-end: 0.2em;
+}
+
+@media (prefers-color-scheme: dark) {
+    a {
+        color: #fff;
+        text-decoration: none;
+    }
+
+    a:hover {
+        color: #ffffffaa;
+    }
+
+    html {
+        background-color: #121212;
+        color: #fefefe;
+    }
+}
+
+@media print {
+    .no_print, .no_print * {
+        display: none !important;
+    }
+}
+
+img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+img[src*='#center'] {
+    display: block;
+    margin: auto;
+}
+
+/*
+  Header
+*/
+
+header {
+    max-height: 2em;
+    font-size: 1.1rem;
+
+    position: relative !important;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.0rem 1.5rem;
+
+    background-color: #1d1d1d;
+}
+
+header nav {
+    float: right;
+}
+
+header nav ul {
+    padding-inline-start: 0;
+    display: flex;
+    flex-direction: row;
+}
+
+header nav ul li {
+    display: inline-block;
+    width: 4em;
+    text-align: center;
+    padding-right: 0.4em;
+    padding-left: 0.4em;
+}
+
+header nav ul li a {
+    width: 100%;
+    display: block;
+    color: #fefefe;
+}
+
+header nav ul li a:hover {
+    color: #cacaca;
+}
+
+.header__logo {
+    float: left;
+    vertical-align: middle;
+    height: fit-content;
+    width: fit-content;
+}
+
+
+.header__logo__img {
+    -webkit-filter: brightness(100%);
+    filter: brightness(100%);
+}
+
+.header__logo__img:hover {
+    -webkit-filter: brightness(70%);
+    filter: brightness(70%);
+    -webkit-transition: all 1s ease;
+    -moz-transition: all 1s ease;
+    -o-transition: all 1s ease;
+    -ms-transition: all 1s ease;
+    transition: all 1s ease;
+}
+
+/*
+  Content
+*/
+
+.container {
+    position: relative;
+    max-width: 900px;
+    margin: auto;
+    padding: 0 1.5rem;
+}
+
+.content {
+    margin: 0 auto;
+    padding: 1.5rem;
+}
+
+.content__info {
+    opacity: 0.7; /* Adjust as needed, 1 is fully opaque, 0 is fully transparent */
+    font-size: 0.8em; /* Adjust as needed, 1em is the current font size */
+}
+
+.subtitle {
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+}
+
+.center {
+    text-align: center;
+}
+
+/*
+  Post preview
+*/
+.post-preview {
+    width: 90%;
+    margin: auto;
+}
+
+.post-preview__box {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1rem 0 0;
+    margin: 0.5rem;
+    border: 2px solid #00000050;
+    border-radius: 0.5rem;
+    transition: all 0.2s ease-in-out;
+    max-height: 10rem;
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.post-preview__box:hover {
+    border: 2px solid #00000055;
+    background-color: #00000011;
+}
+
+@media (prefers-color-scheme: dark) {
+    .post-preview__box {
+        border: 2px solid #ffffff50;
+    }
+
+    .post-preview__box:hover {
+        border: 2px solid #ffffff55;
+        background-color: #ffffff11;
+    }
+}
+
+.post-preview__box__image {
+    width: 90%;
+    height: 10rem;
+    overflow: hidden;
+}
+
+.post-preview__box__image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+@media (max-width: 870px) {
+    .post-preview__box__image {
+        display: none;
+    }
+    
+    .post-preview__box__content__title {
+        margin-bottom: 0.2em;
+        margin-top: 0.2em;
+        font-size: 1.5rem;
+    }
+}
+
+
+@media (max-width: 350px) {
+    .post-preview__box__image {
+        display: none;
+    }
+    
+    .post-preview__box__content__title {
+        margin-bottom: 0.2em;
+        margin-top: 0.2em;
+        font-size: 1.2rem;
+    }
+}
+
+.post-preview__box__content {
+    width: 100%;
+    padding-left: 0.5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+.post-preview__box__content__title {
+    margin-bottom: 0.2em;
+    margin-top: 0.2em;
+}
+
+.post-preview__box__content__date {
+    font-size: 0.8rem;
+    opacity: 0.7;
+}
+
+.post-preview__box__content__author {
+    font-size: 0.8rem;
+    opacity: 0.7;
+}
+
+.post-preview__box__content__description {
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+
+/*
+  Footer
+*/
+
+footer {
+    display: block;
+    margin: 2.5em auto 0;
+    font-size: 1.1rem;
+}
+
+footer hr {
+    width: auto;
+    margin-left: auto;
+    margin-right: auto;
+    border: 0;
+    border-top: 0.1em solid;
+}
+
+footer nav {
+    text-align: center;
+}
+
+footer nav ul {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: auto;
+    padding-inline-start: 0;
+    list-style: none;
+    width: 100%;
+}
+
+footer nav ul li {
+    display: inline-block;
+    width: 5em;
+    text-align: center;
+    align-items: center;
+    padding-right: 0.5em;
+    padding-left: 0.5em;
+}
+
+@media (max-width: 280px) { /* Adjust this value based on when you want the items to wrap */
+    footer nav ul li {
+        width: 50%; /* Make each li take up half the width of the ul on small screens */
+    }
+}
+
+footer nav ul li a {
+    width: 100%;
+    display: block;
+}
+
+footer div {
+    padding-bottom: 0.25em;
+    padding-top: 0.25em;
+}