bigger pagination links font-size
This commit is contained in:
508
css/style.css
508
css/style.css
@@ -1,448 +1,460 @@
|
|||||||
:root {
|
:root {
|
||||||
--bg-color: #fff;
|
--bg-color: #fff;
|
||||||
--txt-color: #17171b;
|
--txt-color: #17171b;
|
||||||
--hover-color: #454551;
|
--hover-color: #454551;
|
||||||
--btn-color: #17171b;
|
--btn-color: #17171b;
|
||||||
--btn-txt-color: #e3e7e6;
|
--btn-txt-color: #e3e7e6;
|
||||||
--btn-hover-color: #454551;
|
--btn-hover-color: #454551;
|
||||||
--quote-color: #454551;
|
--quote-color: #454551;
|
||||||
--card-shadow-color: #00000033;
|
--card-shadow-color: #00000033;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listmonk-form button {
|
.listmonk-form button {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--bg-color: #17171b;
|
--bg-color: #17171b;
|
||||||
--txt-color: #e3e7e6;
|
--txt-color: #e3e7e6;
|
||||||
--hover-color: #828288;
|
--hover-color: #828288;
|
||||||
--btn-color: #232329;
|
--btn-color: #232329;
|
||||||
--btn-txt-color: #e3e7e6;
|
--btn-txt-color: #e3e7e6;
|
||||||
--btn-hover-color: #46464b;
|
--btn-hover-color: #46464b;
|
||||||
--quote-color: #b7b7bd;
|
--quote-color: #b7b7bd;
|
||||||
--card-shadow-color: #1f2223;
|
--card-shadow-color: #1f2223;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn,
|
.btn,
|
||||||
.listmonk-form button {
|
.listmonk-form button {
|
||||||
border: 0.001rem solid var(--txt-color);
|
border: 0.001rem solid var(--txt-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: "Open Sans", sans-serif;
|
font-family: "Open Sans", sans-serif;
|
||||||
color: var(--txt-color);
|
color: var(--txt-color);
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 98vh;
|
min-height: 98vh;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
min-width: 60%;
|
min-width: 60%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
display: block;
|
display: block;
|
||||||
height: auto;
|
height: auto;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 3% 20% 0;
|
padding: 3% 20% 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
transition: all 0.1s;
|
transition: all 0.1s;
|
||||||
color: var(--txt-color);
|
color: var(--txt-color);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-underline-offset: 0.1875rem;
|
text-underline-offset: 0.1875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:focus,
|
a:focus,
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--hover-color);
|
color: var(--hover-color);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bx {
|
.bx {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-profile {
|
.img-profile {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 0.0625rem solid var(--txt-color);
|
border: 0.0625rem solid var(--txt-color);
|
||||||
width: 12.5rem;
|
width: 12.5rem;
|
||||||
height: 12.5rem;
|
height: 12.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile {
|
.profile {
|
||||||
margin-bottom: 1%;
|
margin-bottom: 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about,
|
.about,
|
||||||
.contact,
|
.contact,
|
||||||
.annotation {
|
.annotation {
|
||||||
margin: 3% 0;
|
margin: 3% 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.annotation {
|
.annotation {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn,
|
.btn,
|
||||||
.btn:focus,
|
.btn:focus,
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.btn {
|
.btn {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
transition: all 0.25s;
|
transition: all 0.25s;
|
||||||
min-width: 25%;
|
min-width: 25%;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.875rem 1.25rem;
|
padding: 0.875rem 1.25rem;
|
||||||
margin: 0.25rem;
|
margin: 0.25rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--btn-txt-color);
|
color: var(--btn-txt-color);
|
||||||
background-color: var(--btn-color);
|
background-color: var(--btn-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover,
|
.btn:hover,
|
||||||
.btn:focus {
|
.btn:focus {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--btn-txt-color);
|
color: var(--btn-txt-color);
|
||||||
background-color: var(--btn-hover-color);
|
background-color: var(--btn-hover-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-mastodon {
|
.btn-mastodon {
|
||||||
background-color: #5539cc;
|
background-color: #5539cc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-mastodon:hover,
|
.btn-mastodon:hover,
|
||||||
.btn-mastodon:focus {
|
.btn-mastodon:focus {
|
||||||
background-color: #5535e4;
|
background-color: #5535e4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-twitter {
|
.btn-twitter {
|
||||||
background-color: #00aced;
|
background-color: #00aced;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-twitter:hover,
|
.btn-twitter:hover,
|
||||||
.btn-twitter:focus {
|
.btn-twitter:focus {
|
||||||
background-color: #07b9fa;
|
background-color: #07b9fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-facebook {
|
.btn-facebook {
|
||||||
background-color: #3b5998;
|
background-color: #3b5998;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-facebook:hover,
|
.btn-facebook:hover,
|
||||||
.btn-facebook:focus {
|
.btn-facebook:focus {
|
||||||
background-color: #4166b6;
|
background-color: #4166b6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-linkedin {
|
.btn-linkedin {
|
||||||
background-color: #0077b5;
|
background-color: #0077b5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-linkedin:hover,
|
.btn-linkedin:hover,
|
||||||
.btn-linkedin:focus {
|
.btn-linkedin:focus {
|
||||||
background-color: #0986c9;
|
background-color: #0986c9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listmonk-form input {
|
.listmonk-form input {
|
||||||
font-family: "Open sans", sans-serif !important;
|
font-family: "Open sans", sans-serif !important;
|
||||||
min-height: 3rem;
|
min-height: 3rem;
|
||||||
padding: 0.75rem 1.25rem;
|
padding: 0.75rem 1.25rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 0.0625rem solid #ccc;
|
border: 0.0625rem solid #ccc;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
color: var(--txt-color);
|
color: var(--txt-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.listmonk-form button {
|
.listmonk-form button {
|
||||||
font-family: "Open sans", sans-serif !important;
|
font-family: "Open sans", sans-serif !important;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
min-height: 3rem;
|
min-height: 3rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.25s;
|
transition: all 0.25s;
|
||||||
padding: 0.75rem 1.25rem;
|
padding: 0.75rem 1.25rem;
|
||||||
margin: 0.9375rem;
|
margin: 0.9375rem;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
background-color: #00f;
|
background-color: #00f;
|
||||||
color: var(--btn-txt-color);
|
color: var(--btn-txt-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.listmonk-form button:hover {
|
.listmonk-form button:hover {
|
||||||
background-color: #00d;
|
background-color: #00d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listmonk-form .annotation {
|
.listmonk-form .annotation {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card {
|
.blog-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
box-shadow: 0 0.1875rem 1.5rem var(--card-shadow-color);
|
box-shadow: 0 0.1875rem 1.5rem var(--card-shadow-color);
|
||||||
margin: 1.875rem 0;
|
margin: 1.875rem 0;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-link,
|
.card-link,
|
||||||
.card-link:focus,
|
.card-link:focus,
|
||||||
.card-link:hover {
|
.card-link:hover {
|
||||||
all: unset;
|
all: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-link {
|
.card-link {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-link:hover .post-title {
|
.card-link:hover .post-title {
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
color: var(--hover-color);
|
color: var(--hover-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-link:hover .post-image {
|
.card-link:hover .post-image {
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-link:hover {
|
.card-link:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-image {
|
.post-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
display: block;
|
display: block;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-details {
|
.post-details {
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-meta {
|
.post-meta {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: 0.0625rem;
|
letter-spacing: 0.0625rem;
|
||||||
margin: 0 0 0.75rem;
|
margin: 0 0 0.75rem;
|
||||||
padding: 0 0 0.25rem;
|
padding: 0 0 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-title {
|
.post-title {
|
||||||
transition: color 0.5s ease;
|
transition: color 0.5s ease;
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
color: var(--txt-color);
|
color: var(--txt-color);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin: 0 0 0.5rem;
|
margin: 0 0 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-tags {
|
.post-tags {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: 0.0625rem;
|
letter-spacing: 0.0625rem;
|
||||||
margin: 0 0 0.75rem;
|
margin: 0 0 0.75rem;
|
||||||
padding: 0 0 0.25rem;
|
padding: 0 0 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (display: grid) {
|
@supports (display: grid) {
|
||||||
.post-image {
|
.post-image {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card {
|
.blog-card {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 2fr;
|
grid-template-columns: 1fr 2fr;
|
||||||
grid-template-rows: 1fr;
|
grid-template-rows: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
article,
|
article,
|
||||||
.blog {
|
.blog {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.share {
|
.share {
|
||||||
padding: 1%;
|
padding: 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta {
|
.meta {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
margin-bottom: 3%;
|
margin-bottom: 3%;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
font-family: "Source Code Pro", monospace;
|
font-family: "Source Code Pro", monospace;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background-color: var(--btn-color);
|
background-color: var(--btn-color);
|
||||||
color: var(--btn-txt-color);
|
color: var(--btn-txt-color);
|
||||||
border-radius: 0.325rem;
|
border-radius: 0.325rem;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-left: dotted 0.07rem var(--txt-color);
|
border-left: dotted 0.07rem var(--txt-color);
|
||||||
color: var(--quote-color);
|
color: var(--quote-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote p {
|
blockquote p {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote,
|
blockquote,
|
||||||
em {
|
em {
|
||||||
font-family: serif;
|
font-family: serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer,
|
.footer,
|
||||||
.pagination {
|
.pagination {
|
||||||
font-size: 1.1rem;
|
margin-top: 3%;
|
||||||
margin-top: 3%;
|
padding-bottom: 2%;
|
||||||
padding-bottom: 2%;
|
position: relative;
|
||||||
position: relative;
|
bottom: 0;
|
||||||
bottom: 0;
|
right: 0;
|
||||||
right: 0;
|
left: 0;
|
||||||
left: 0;
|
z-index: 9;
|
||||||
z-index: 9;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer .footer-copyright,
|
.footer .footer-copyright,
|
||||||
.pagination .pagination-newer {
|
.pagination .pagination-newer {
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 15%;
|
margin-left: 15%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer .footer-link,
|
.footer .footer-link,
|
||||||
.pagination .pagination-older {
|
.pagination .pagination-older {
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 15%;
|
margin-right: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
margin-top: 1%;
|
margin-top: 1%;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a,
|
nav a,
|
||||||
nav a:focus,
|
nav a:focus,
|
||||||
nav a:hover {
|
nav a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-underline-offset: 0;
|
text-underline-offset: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav .nav-brand {
|
nav .nav-brand {
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 15%;
|
margin-left: 15%;
|
||||||
color: var(--txt-color);
|
color: var(--txt-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
nav .nav-btn {
|
nav .nav-btn {
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 15%;
|
margin-right: 15%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 68.75rem) {
|
@media only screen and (max-width: 68.75rem) {
|
||||||
body {
|
body {
|
||||||
min-height: 94vh;
|
min-height: 94vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav .nav-brand {
|
nav .nav-brand {
|
||||||
margin-left: 5%;
|
margin-left: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav .nav-btn {
|
nav .nav-btn {
|
||||||
margin-right: 5%;
|
margin-right: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
padding: 15% 5% 0;
|
padding: 15% 5% 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social,
|
.social,
|
||||||
.share {
|
.share {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
min-width: 25%;
|
min-width: 25%;
|
||||||
margin: 0.4375rem;
|
margin: 0.4375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listmonk-form input {
|
.listmonk-form input {
|
||||||
max-width: 55%;
|
max-width: 55%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card {
|
.blog-card {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (display: grid) {
|
@supports (display: grid) {
|
||||||
.blog-card {
|
.blog-card {
|
||||||
grid-template-columns: auto;
|
grid-template-columns: auto;
|
||||||
grid-template-rows: 12rem 1fr;
|
grid-template-rows: 12rem 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
margin-top: 3%;
|
margin-top: 3%;
|
||||||
padding-bottom: 5%;
|
padding-bottom: 5%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer .footer-copyright {
|
.footer .footer-copyright {
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 5%;
|
margin-left: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer .footer-link {
|
.footer .footer-link {
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 5%;
|
margin-right: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin-bottom: 15%;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user