Updated styles

This commit is contained in:
pmoreno.rodriguez 2023-09-29 13:53:55 +02:00
parent 5934bab9c6
commit 27956c2afa
5 changed files with 195 additions and 7 deletions

View file

@ -66,10 +66,14 @@ input::-moz-focus-inner {
input, select, textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
/* Basic */
@-ms-viewport {
width: device-width;
}
body {
-ms-overflow-style: scrollbar;
}
@ -91,7 +95,13 @@ body {
background: #f4f4f4;
}
body.is-preload *, body.is-preload *:before, body.is-preload *:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-ms-animation: none !important;
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
@ -130,12 +140,18 @@ body, input, select, textarea {
}
a {
-moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
-webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
-ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
transition: color 0.2s ease, border-bottom-color 0.2s ease;
border-bottom: dotted 1px rgba(160, 160, 160, 0.65);
color: inherit;
text-decoration: none;
}
a:before {
-moz-transition: color 0.2s ease;
-webkit-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
a:hover {
@ -1372,14 +1388,19 @@ hr.major {
/* Author */
.author {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: -moz-flex-end;
-webkit-justify-content: -webkit-flex-end;
-ms-justify-content: -ms-flex-end;
justify-content: flex-end;
border-bottom: 0;
@ -1391,6 +1412,9 @@ hr.major {
white-space: wrap;
}
.author .name {
-moz-transition: border-bottom-color 0.2s ease;
-webkit-transition: border-bottom-color 0.2s ease;
-ms-transition: border-bottom-color 0.2s ease;
transition: border-bottom-color 0.2s ease;
border-bottom: dotted 1px rgba(160, 160, 160, 0.65);
display: block;
@ -1443,7 +1467,11 @@ button,
.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
-webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
-ms-transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
background-color: transparent;
border: 0;
@ -1604,6 +1632,7 @@ select,
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
background: rgba(160, 160, 160, 0.075);
border: none;
@ -1703,6 +1732,7 @@ input[type=checkbox],
input[type=radio] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
@ -1923,6 +1953,7 @@ dl dd {
/* Actions */
ul.actions {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
cursor: default;
@ -1936,6 +1967,7 @@ ul.actions li {
}
ul.actions.special {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
width: 100%;
@ -1946,6 +1978,8 @@ ul.actions.special li:first-child {
}
ul.actions.stacked {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
}
@ -1960,8 +1994,11 @@ ul.actions.fit {
}
ul.actions.fit li {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
width: 100%;
@ -1975,6 +2012,7 @@ ul.actions.fit.stacked {
@media screen and (max-width: 736px) {
ul.actions {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}
@ -1982,14 +2020,19 @@ ul.actions.fit.stacked {
@media screen and (max-width: 480px) {
ul.actions:not(.fixed) {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
width: 100% !important;
}
ul.actions:not(.fixed) li {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
padding: 1em 0 0 0;
@ -2056,12 +2099,16 @@ ul.posts li:first-child {
}
ul.posts article {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: -moz-flex-start;
-webkit-align-items: -webkit-flex-start;
-ms-align-items: -ms-flex-start;
align-items: flex-start;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
ul.posts article .image {
@ -2075,6 +2122,7 @@ ul.posts article .image img {
}
ul.posts article header {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
flex: 1;
@ -2101,9 +2149,12 @@ ul.posts article header > :last-child {
/* Mini Post */
.mini-post {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
background: #ffffff;
border: solid 1px rgba(160, 160, 160, 0.3);
@ -2114,10 +2165,16 @@ ul.posts article header > :last-child {
width: 100%;
}
.mini-post .image img {
-moz-transition: -moz-transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-ms-transition: -ms-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
width: 100%;
}
.mini-post .image:hover img {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.mini-post header {
@ -2125,6 +2182,7 @@ ul.posts article header > :last-child {
min-height: 4em;
position: relative;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
}
@ -2152,8 +2210,12 @@ ul.posts article header > :last-child {
@media screen and (max-width: 1280px) {
.mini-posts {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: calc(100% + 2em);
}
@ -2192,6 +2254,7 @@ ul.posts article header > :last-child {
}
.post > header {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
border-bottom: solid 1px rgba(160, 160, 160, 0.3);
@ -2202,6 +2265,7 @@ ul.posts article header > :last-child {
}
.post > header .title {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
flex: 1;
@ -2253,21 +2317,30 @@ ul.posts article header > :last-child {
overflow: hidden;
}
.post > a.image.featured img {
-moz-transition: -moz-transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-ms-transition: -ms-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
.post > a.image.featured:hover img {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.post > footer {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}
.post > footer .actions {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
}
@ -2333,6 +2406,8 @@ ul.posts article header > :last-child {
}
.post > header {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 3.75em 3em 1.25em 3em;
border-left: 0;
@ -2345,12 +2420,15 @@ ul.posts article header > :last-child {
}
.post > header .meta {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
border-left: 0;
@ -2376,6 +2454,8 @@ ul.posts article header > :last-child {
}
.post > header .meta .author {
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
margin-bottom: 0;
}
@ -2404,18 +2484,24 @@ ul.posts article header > :last-child {
}
.post > footer {
-moz-align-items: -moz-stretch;
-webkit-align-items: -webkit-stretch;
-ms-align-items: -ms-stretch;
align-items: stretch;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
@media screen and (max-width: 480px) {
.post > header .meta {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.post > header .meta > * {
@ -2510,10 +2596,16 @@ table.alt tfoot {
border-radius: 10px;
}
.portfolio_item .image img {
-moz-transition: -moz-transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-ms-transition: -ms-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
width: 100%;
}
.portfolio_item .image:hover img {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
@ -2521,6 +2613,7 @@ table.alt tfoot {
#banner {
padding: 6em 0 4em 0;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
@ -2534,16 +2627,22 @@ table.alt tfoot {
}
#banner .content {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
width: 60%;
}
#banner .image {
-moz-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
flex-grow: 0;
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
-ms-flex-shrink: 0;
flex-shrink: 0;
display: block;
@ -2555,18 +2654,18 @@ table.alt tfoot {
-moz-object-fit: contain;
-webkit-object-fit: contain;
-ms-object-fit: contain;
-o-object-fit: contain;
object-fit: contain;
object-fit: contain;
-moz-object-position: center;
-webkit-object-position: center;
-ms-object-position: center;
-o-object-position: center;
object-position: center;
object-position: center;
width: 100%;
}
@media screen and (orientation: portrait) {
#banner {
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
#banner h1 br {
@ -2574,16 +2673,22 @@ table.alt tfoot {
}
#banner .content {
-moz-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
flex-grow: 0;
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
-ms-flex-shrink: 0;
flex-shrink: 0;
width: 100%;
}
#banner .image {
-moz-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
flex-grow: 0;
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
-ms-flex-shrink: 0;
flex-shrink: 0;
margin: 0 0 4em 0;
@ -2638,6 +2743,8 @@ table.alt tfoot {
/* Dropdown menu in header */
#header .dropdown {
-moz-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border-left: solid 1px rgba(160, 160, 160, 0.3);
height: inherit;
@ -2696,10 +2803,16 @@ table.alt tfoot {
}
#header .dropdown ul li:hover > ul {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-moz-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
min-width: 15em;
border: solid 1px rgba(160, 160, 160, 0.3);
@ -2759,6 +2872,7 @@ ul.menulink > li a:hover.tags {
ul.menulink > li > ul,
ul.menulink > li a span {
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
font-size: 0.9em;
text-transform: uppercase;
@ -2766,6 +2880,7 @@ ul.menulink > li a span {
}
ul.menulink > li a span li {
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
font-size: 0.8em;
font-weight: 400;
@ -2786,6 +2901,7 @@ ul.subitem {
ul.subitem > li > ul,
ul.subitem > li a span {
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
font-size: 0.9em;
font-weight: 400;
@ -2804,6 +2920,7 @@ ul.subitem_hide {
ul.subitem_hide > li > ul,
ul.subitem_hide > li a span {
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
margin-bottom: 0;
font-weight: 400;
@ -2913,9 +3030,11 @@ body {
#header {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
background-color: #ffffff;
@ -3013,6 +3132,9 @@ body {
vertical-align: middle;
}
#header #search {
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
max-width: 0;
opacity: 0;
@ -3049,10 +3171,16 @@ body {
/* Wrapper */
#wrapper {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-moz-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
margin: 0 auto;
max-width: 100%;
@ -3085,6 +3213,7 @@ body.single #wrapper {
/* Main */
#main {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
flex: 1;
@ -3212,7 +3341,13 @@ body.single #footer {
/* Menu */
#menu {
-moz-transform: translateX(25em);
-webkit-transform: translateX(25em);
-ms-transform: translateX(25em);
transform: translateX(25em);
-moz-transition: -moz-transform 0.5s ease, visibility 0.5s;
-webkit-transition: -webkit-transform 0.5s ease, visibility 0.5s;
-ms-transition: -ms-transform 0.5s ease, visibility 0.5s;
transition: transform 0.5s ease, visibility 0.5s;
-webkit-overflow-scrolling: touch;
background: #ffffff;
@ -3243,6 +3378,9 @@ body.single #footer {
}
#menu .close {
text-decoration: none;
-moz-transition: color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
border: 0;
color: #838383;
@ -3293,6 +3431,9 @@ body.single #footer {
border-bottom: 0;
}
#menu .links > li a h3 {
-moz-transition: color 0.2s ease;
-webkit-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
font-size: 0.7em;
}
@ -3314,6 +3455,9 @@ body.single #footer {
padding-top: 0;
}
body.is-menu-visible #menu {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
visibility: visible;
}
@ -3321,4 +3465,37 @@ body.is-menu-visible #menu {
#menu > * {
padding: 1.5em;
}
}
/*
Future2021
Grav Theme by Pedro Moreno
CSS Styles for Page Toc Plugin
*/
.page-toc {
margin-bottom: 2.5em;
}
.page-toc a {
color: inherit;
text-decoration: none;
}
.page-toc ul {
list-style: none;
font-family: "Raleway", Helvetica, sans-serif;
font-size: 1em;
padding: 0.5em 0 0 0;
margin: 0em;
line-height: 2.3em;
}
.page-toc ul li {
padding-left: 0.5em;
font-size: 0.9em;
}
.page-toc-sticky {
height: 25vh;
position: -webkit-sticky;
position: sticky;
top: 3.5em;
}

File diff suppressed because one or more lines are too long

View file

@ -130,3 +130,14 @@
.ct-widget.ct-ignition {
z-index: 10015;
}
/* Modified styles for Notices */
.notices {
padding: 0.2em;
margin: 15px 0;
}
.notices p {
margin: 1em;
}

View file

@ -127,7 +127,7 @@
border-left: solid 4px _palette(border);
font-style: italic;
margin: 0 0 _size(element-margin) 0;
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
padding: calc(_size(element-margin) / 4) 0 calc(_size(element-margin) / 4) _size(element-margin);
}
code {

View file

@ -10,7 +10,7 @@
// Initialize.
$cols: 12;
$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
$unit: 100% / $cols;
$unit: calc(100% / $cols);
// Suffixes.
$suffixes: null;