makary/grav-theme-future2021
1
0
Fork 0
mirror of https://github.com/pmoreno-rodriguez/grav-theme-future2021.git synced 2025-06-07 20:08:54 +00:00
Code Issues Projects Releases Packages Wiki Activity

Updated SCSS for various classes

Browse source
This commit is contained in:
Pedro Moreno 2023-02-15 10:51:53 +01:00
parent 876d28581c
commit 2d6e7f23f4
9 changed files with 184 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

173
assets/css/main.css
View file

@ -2006,6 +2006,14 @@ ul.actions.fit li > * {
ul.actions.fit.stacked { ul.actions.fit.stacked {
width: 100%; width: 100%;
} }
@media screen and (max-width: 736px) {
ul.actions {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}
}
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
ul.actions:not(.fixed) { ul.actions:not(.fixed) {
-moz-flex-direction: column; -moz-flex-direction: column;
@ -2035,17 +2043,17 @@ ul.actions.fit.stacked {
padding-top: 0; padding-top: 0;
} }
ul.actions:not(.fixed) li input[type=submit], ul.actions:not(.fixed) li input[type=submit],
ul.actions:not(.fixed) li input[type=reset], ul.actions:not(.fixed) li input[type=reset],
ul.actions:not(.fixed) li input[type=button], ul.actions:not(.fixed) li input[type=button],
ul.actions:not(.fixed) li button, ul.actions:not(.fixed) li button,
ul.actions:not(.fixed) li .button { ul.actions:not(.fixed) li .button {
width: 100%; width: 100%;
} }
ul.actions:not(.fixed) li input[type=submit].icon:before, ul.actions:not(.fixed) li input[type=submit].icon:before,
ul.actions:not(.fixed) li input[type=reset].icon:before, ul.actions:not(.fixed) li input[type=reset].icon:before,
ul.actions:not(.fixed) li input[type=button].icon:before, ul.actions:not(.fixed) li input[type=button].icon:before,
ul.actions:not(.fixed) li button.icon:before, ul.actions:not(.fixed) li button.icon:before,
ul.actions:not(.fixed) li .button.icon:before { ul.actions:not(.fixed) li .button.icon:before {
margin-left: -0.5em; margin-left: -0.5em;
} }
} }
@ -2325,7 +2333,11 @@ ul.posts article header > :last-child {
.post > footer .stats { .post > footer .stats {
cursor: default; cursor: default;
list-style: none; list-style: none;
padding: 0; padding: 0 1em;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
} }
.post > footer .stats li { .post > footer .stats li {
border-left: solid 1px rgba(160, 160, 160, 0.3); border-left: solid 1px rgba(160, 160, 160, 0.3);
@ -2334,7 +2346,6 @@ ul.posts article header > :last-child {
font-size: 0.6em; font-size: 0.6em;
font-weight: 400; font-weight: 400;
letter-spacing: 0.25em; letter-spacing: 0.25em;
line-height: 1;
margin: 0 0 0 2em; margin: 0 0 0 2em;
padding: 0 0 0 2em; padding: 0 0 0 2em;
text-transform: uppercase; text-transform: uppercase;
@ -2350,6 +2361,28 @@ ul.posts article header > :last-child {
.post > footer .stats li .icon:before { .post > footer .stats li .icon:before {
margin-right: 0.75em; margin-right: 0.75em;
} }
.post > footer .share {
cursor: default;
list-style: none;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
}
.post > footer .share li {
border-left: solid 1px rgba(160, 160, 160, 0.3);
display: inline-block;
font-size: larger;
font-weight: 400;
margin: 0 0 0 1em;
padding: 0 0 0 1em;
text-transform: uppercase;
}
.post > footer .share li:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
@media screen and (max-width: 980px) { @media screen and (max-width: 980px) {
.post { .post {
border-left: 0; border-left: 0;
@ -2435,6 +2468,16 @@ ul.posts article header > :last-child {
.post > header .title h2 { .post > header .title h2 {
font-size: 1.1em; font-size: 1.1em;
} }
.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) { @media screen and (max-width: 480px) {
.post > header .meta { .post > header .meta {
@ -2460,23 +2503,6 @@ ul.posts article header > :last-child {
margin-top: calc(-1.5em - 1px); margin-top: calc(-1.5em - 1px);
width: calc(100% + 3em); width: calc(100% + 3em);
} }
.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;
}
.post > footer .stats {
text-align: center;
}
.post > footer .stats li {
margin: 0 0 0 1.25em;
padding: 0 0 0 1.25em;
}
} }
/* Section/Article */ /* Section/Article */
@ -2705,18 +2731,16 @@ table.alt tfoot {
position: relative; position: relative;
float: left; float: left;
text-transform: uppercase; text-transform: uppercase;
font-size: 12pt; font-size: 14pt;
height: inherit; height: inherit;
} }
#header .dropdown li a { #header .dropdown li a {
font-family: "Raleway", Helvetica, sans-serif; font-family: "Raleway", Helvetica, sans-serif;
font-size: 0.8em; font-size: 0.7em;
font-weight: 400; font-weight: 400;
letter-spacing: 0.15em; letter-spacing: 0.2em;
display: block;
border-bottom: none; border-bottom: none;
padding: 0 0.8rem; padding: 0 0.8rem;
height: inherit;
} }
#header .dropdown li ul { #header .dropdown li ul {
position: absolute; position: absolute;
@ -2731,11 +2755,10 @@ table.alt tfoot {
} }
#header .dropdown li ul li a { #header .dropdown li ul li a {
font-family: "Raleway", Helvetica, sans-serif; font-family: "Raleway", Helvetica, sans-serif;
font-size: 0.8em; font-size: 0.7em;
font-weight: 400; font-weight: 400;
letter-spacing: 0.15em; letter-spacing: 0.2em;
text-transform: uppercase; text-transform: uppercase;
display: block;
border-bottom: none; border-bottom: none;
padding: 0.3rem 0.8rem; padding: 0.3rem 0.8rem;
line-height: 2.5em; line-height: 2.5em;
@ -2894,6 +2917,84 @@ ul.subitem_hide > li {
padding-right: 8px; padding-right: 8px;
} }
/* CSS for Headings */
/* by Pedro Moreno */
.heading {
padding: 3em 3em 1em 3em;
background: #ffffff;
border: solid 1px rgba(160, 160, 160, 0.3);
margin: 0 0 1.5em 0;
position: relative;
}
.heading #breadcrumbs {
font-family: "Raleway", Helvetica, sans-serif;
font-size: 0.6em;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
margin-top: -1em;
height: 3em;
line-height: 3em;
padding-inline-start: 0;
}
.heading #breadcrumbs span {
padding: 0;
}
.heading #breadcrumbs i {
padding: 0 1em;
width: 0;
}
.heading .title h2 {
font-weight: 900;
font-size: 1.8em;
}
.heading .title p {
font-family: "Raleway", Helvetica, sans-serif;
font-size: 0.8em;
font-weight: 700;
letter-spacing: 0.25em;
line-height: 2.5;
margin-top: -1em;
text-transform: uppercase;
}
@media screen and (max-width: 980px) {
.heading {
border-left: 0;
border-right: 0;
left: -3em;
width: calc(100% + (3em * 2));
}
.heading #breadcrumbs {
margin: 0 0 2em 0;
padding: 0;
text-align: center;
}
.heading .title {
-ms-flex: 0 1 auto;
margin: 0 0 2em 0;
padding: 0;
text-align: center;
}
}
@media screen and (max-width: 736px) {
.heading {
padding: 1.5em 1.5em 0.1em 1.5em;
left: -1.5em;
margin: 0 0 2em 0;
width: calc(100% + (1.5em * 2));
}
.heading .title h2 {
font-size: 1.1em;
}
}
@media screen and (max-width: 736px) {
.heading > .image.featured {
margin-left: -1.5em;
margin-top: calc(-1.5em - 1px);
width: calc(100% + 3em);
}
}
/* Header */ /* Header */
body { body {
padding-top: 3.5em; padding-top: 3.5em;
@ -3293,4 +3394,4 @@ body.is-menu-visible #menu {
#menu > * { #menu > * {
padding: 1.5em; padding: 1.5em;
} }
}/*# sourceMappingURL=main.css.map */ }

2
assets/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long

15
assets/css/misc.css
View file

@ -99,17 +99,4 @@
} }
/* Styles modified from Breadcrumbs */ /* Styles modified from Breadcrumbs */
/* Included in headings.scss */
#breadcrumbs {
padding-inline-start: 0rem;
margin: 1em 0;
height: auto;
line-height: 2em;
}
#breadcrumbs span {
padding: 0rem;
}
#breadcrumbs i {
padding: 0 1rem;
width: 0 !important;
}

4
assets/sass/components/_actions.scss
View file

@ -60,7 +60,9 @@
width: 100%; width: 100%;
} }
} }
@include breakpoint('<=small') {
@include vendor('justify-content', 'center');
}
@include breakpoint('<=xsmall') { @include breakpoint('<=xsmall') {
&:not(.fixed) { &:not(.fixed) {
@include vendor('flex-direction', 'column'); @include vendor('flex-direction', 'column');

8
assets/sass/components/_banner.scss
View file

@ -1,9 +1,3 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Banner */ /* Banner */
#banner { #banner {
@ -77,4 +71,4 @@
} }
} }
} }
} }

13
assets/sass/components/_dropdownmenu.scss
View file

@ -12,17 +12,15 @@
position: relative; position: relative;
float: left; float: left;
text-transform: uppercase; text-transform: uppercase;
font-size: 12pt; font-size: 14pt;
height: inherit; height: inherit;
a { a {
font-family: _font(family-heading); font-family: _font(family-heading);
font-size: 0.8em; font-size: 0.7em;
font-weight: _font(weight); font-weight: _font(weight);
letter-spacing: 0.15em; letter-spacing: 0.20em;
@include vendor('display', 'block');
border-bottom: none; border-bottom: none;
padding: 0 0.8rem; padding: 0 0.8rem;
height: inherit;
} }
ul { ul {
@ -40,11 +38,10 @@
a { a {
font-family: _font(family-heading); font-family: _font(family-heading);
font-size: 0.8em; font-size: 0.7em;
font-weight: _font(weight); font-weight: _font(weight);
letter-spacing: 0.15em; letter-spacing: 0.20em;
text-transform: uppercase; text-transform: uppercase;
@include vendor('display', 'block');
border-bottom: none; border-bottom: none;
padding: 0.3rem 0.8rem; padding: 0.3rem 0.8rem;
line-height: 2.5em; line-height: 2.5em;

50
assets/sass/components/_post.scss
View file

@ -98,7 +98,11 @@
.stats { .stats {
cursor: default; cursor: default;
list-style: none; list-style: none;
padding: 0; padding: 0 1em;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
li { li {
border-left: solid 1px _palette(border); border-left: solid 1px _palette(border);
@ -107,7 +111,7 @@
font-size: 0.6em; font-size: 0.6em;
font-weight: _font(weight-heading); font-weight: _font(weight-heading);
letter-spacing: _font(kerning-heading); letter-spacing: _font(kerning-heading);
line-height: 1; // line-height: 1;
margin: 0 0 0 2em; margin: 0 0 0 2em;
padding: 0 0 0 2em; padding: 0 0 0 2em;
text-transform: uppercase; text-transform: uppercase;
@ -128,6 +132,30 @@
} }
} }
} }
.share {
cursor: default;
list-style: none;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
li {
border-left: solid 1px _palette(border);
display: inline-block;
font-size: larger;
font-weight: _font(weight-heading);
margin: 0 0 0 1em;
padding: 0 0 0 1em;
text-transform: uppercase;
&:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
}
}
} }
@include breakpoint('<=medium') { @include breakpoint('<=medium') {
@ -210,6 +238,10 @@
} }
} }
} }
> footer {
@include vendor('align-items', 'stretch');
@include vendor('flex-direction', 'column-reverse');
}
} }
@include breakpoint('<=xsmall') { @include breakpoint('<=xsmall') {
@ -237,19 +269,5 @@
margin-top: calc(#{_size(section-spacing-small) * -1} - 1px); margin-top: calc(#{_size(section-spacing-small) * -1} - 1px);
width: calc(100% + #{_size(section-spacing-small) * 2}); width: calc(100% + #{_size(section-spacing-small) * 2});
} }
> footer {
@include vendor('align-items', 'stretch');
@include vendor('flex-direction', 'column-reverse');
.stats {
text-align: center;
li {
margin: 0 0 0 1.25em;
padding: 0 0 0 1.25em;
}
}
}
} }
} }

2
assets/sass/components/_sidebarmenu.scss
View file

@ -2,7 +2,7 @@
#sidebarmenu {display: none;} #sidebarmenu {display: none;}
@media screen and (max-width: 980px) { @include breakpoint('<=medium') {
#sidebarmenu { #sidebarmenu {
display: block; } display: block; }

1
assets/sass/main.scss
View file

@ -53,6 +53,7 @@
@import 'components/logo'; @import 'components/logo';
@import 'components/dropdownmenu'; @import 'components/dropdownmenu';
@import 'components/sidebarmenu'; @import 'components/sidebarmenu';
@import 'components/headings.scss';
// Layout. // Layout.