convert custom css to scss

This commit is contained in:
Ray Elliott 2020-02-19 19:37:29 +00:00
parent 59dd0a214e
commit 70946b3910
4 changed files with 227 additions and 235 deletions

205
assets/css/main.scss Normal file
View File

@ -0,0 +1,205 @@
@import "mixins";
.page.about {
.content {
text-align: center;
}
ul {
padding-left: 0;
list-style: none;
}
}
.navigation .navigation-title {
text-transform: none;
}
.about .avatar img {
width: 14rem;
border: 3px solid #044958;
padding: 2px;
transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
body.colorscheme-dark & {
border: 2px solid #002e34;
padding: 0;
}
@media (prefers-color-scheme: dark) {
border: 2px solid #002e34;
padding: 0;
}
}
.content figure {
&.svg > img {
height: 100%;
}
&.medium > img {
max-width: 30em;
width: 100%;
}
> figcaption p {
margin: 2rem 0;
text-align: inherit;
font-style: inherit;
font-size: inherit;
}
> img {
height: auto;
width: auto;
}
}
.content figure.icon-inline {
display: flex;
flex-direction: column;
@media (max-width: 500px) {
&.sm-order-rev > figcaption {
order: 1;
margin-top: -2rem;
}
&.sm-order-rev > img {
order: 2;
}
> img {
height: 3.2em;
}
}
@media (min-width: 500px) {
flex-direction: row;
align-items: center;
> figcaption p {
margin: 0 0 0 2rem;
}
&.icon-right > figcaption p {
order: 1;
margin: 0 2rem 0 0;
}
> img {
height: 4em;
margin: 0;
}
&.large > img {
height: 6em;
}
&.icon-right > img {
order: 2;
}
}
}
.content figure.icon-inline.flowmm-model-thumb > img {
height: auto;
width: 100%;
max-width: 250px;
@media (min-width: 500px) {
height: 12em;
width: auto;
}
}
.oceanwp-icon > img {
background-color: #e1f2fa;
border-radius: 6px;
}
.content figure.logo {
margin: 3.2rem 0;
height: 2.4em;
> img {
height: 100%;
}
}
.content figure.logo.large {
height: 7em;
@media (min-width: 500px) {
height: 8em;
}
}
.logo.woocommerce {
body.colorscheme-dark & {
@include woo-logo-dark;
}
@media (prefers-color-scheme: dark) {
@include woo-logo-dark;
}
}
.wp-icon {
> img {
opacity: 0.7;
@media (max-width: 500px) {
display: none;
}
}
@media (prefers-color-scheme: dark) {
@include wp-icon-dark;
}
body.colorscheme-dark & {
@include wp-icon-dark;
}
}
/* TODO do this properly using a shortcode */
.cheat-october-list {
display: none;
}
.cheat-october-list + ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
.cheat-october-list + ul > li {
list-style: none;
}
.cheat-october-list + ul > li > p:first-child {
position: relative;
margin-top: 0;
padding-left: 40px;
}
.cheat-october-list + ul > li > p:not(:first-child) {
padding-left: 40px;
}
.cheat-october-list + ul > li > p:first-child::before {
content: "";
position: absolute;
display: block;
top: 0.2em;
bottom: 0.2em;
left: 0;
right: 0;
background-size: contain;
background-repeat: no-repeat;
background-image: url(../images/logos/october-icon.png);
}

21
assets/css/mixins.scss Normal file
View File

@ -0,0 +1,21 @@
@mixin wp-icon-dark {
> figcaption > p {
margin-left: 0;
}
> img {
display: none;
}
}
@mixin woo-logo-dark {
height: calc(2.4em + 32px);
> img {
background-color: #fafafa;
border: solid 16px #fafafa;
border-bottom-width: 10px;
border-radius: 6px;
margin-bottom: 4rem;
}
}

View File

@ -26,7 +26,7 @@ favicon_16 = "/images/favicon-16x16.png"
hidecredits = true
colorscheme = "auto"
custom_css = ["/css/custom.css"]
custom_scss = ["/css/main.scss"]
[[params.social]]
name = "LinkedIn"

View File

@ -1,234 +0,0 @@
.navigation .navigation-title {
text-transform: none;
}
.about .avatar img {
width: 14rem;
border: 3px solid #044958;
padding: 2px;
transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
}
body.colorscheme-dark .avatar img {
border: 2px solid #002e34;
padding: 0;
}
@media (prefers-color-scheme: dark) {
body.colorscheme-auto .avatar img {
border: 2px solid #002e34;
padding: 0;
}
}
.content figure.svg > img {
height: 100%;
}
.content figure.medium > img {
max-width: 30em;
width: 100%;
}
/*
* icons
*/
.content figure.icon-inline {
display: flex;
flex-direction: column;
}
.content figure.icon-inline > figcaption p {
margin: 2rem 0;
text-align: inherit;
font-style: inherit;
font-size: inherit;
}
.content figure.icon-inline > img {
height: auto;
width: auto;
}
@media (max-width: 500px) {
.content figure.icon-inline.sm-order-rev > figcaption {
order: 1;
margin-top: -2rem;
}
.content figure.icon-inline > img {
max-width: 6em;
}
.content figure.icon-inline.sm-order-rev > img {
order: 2;
}
}
@media (min-width: 500px) {
.content figure.icon-inline {
flex-direction: row;
align-items: center;
}
.content figure.icon-inline > figcaption p {
margin: 0 0 0 2rem;
}
.content figure.icon-inline.icon-right > figcaption p {
order: 1;
margin: 0 2rem 0 0;
}
.content figure.icon-inline > img {
height: 4em;
margin: 0;
}
.content figure.icon-inline.large > img {
height: 6em;
}
.content figure.icon-inline.icon-right > img {
order: 2;
}
}
.content figure.icon-inline.flowmm-model-thumb > img {
height: auto;
width: 100%;
max-width: 250px;
}
@media (min-width: 500px) {
.content figure.icon-inline.flowmm-model-thumb > img {
height: 12em;
width: auto;
}
}
.oceanwp-icon > img {
background-color: #e1f2fa;
border-radius: 6px;
}
/*
* logos
*/
.content figure.logo {
height: 1.6em;
margin: 4rem 0;
}
.content figure.logo.large {
height: 7em;
}
.content figure.logo > img {
height: 100%;
}
@media (min-width: 500px) {
.content figure.logo {
height: 2.6em;
}
.content figure.logo.large {
height: 8em;
}
.content figure.logo.nuxt {
height: 1.6em;
}
}
.wp-icon > img {
opacity: 0.7;
}
@media (max-width: 500px) {
.content figure.icon-inline.wp-icon > img {
display: none;
}
}
/* TODO do this properly using a shortcode */
.cheat-october-list {
display: none;
}
.cheat-october-list + ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
.cheat-october-list + ul > li {
list-style: none;
}
.cheat-october-list + ul > li > p:first-child {
position: relative;
margin-top: 0;
padding-left: 40px;
}
.cheat-october-list + ul > li > p:not(:first-child) {
padding-left: 40px;
}
.cheat-october-list + ul > li > p:first-child::before {
content: "";
position: absolute;
display: block;
top: 0.2em;
bottom: 0.2em;
left: 0;
right: 0;
background-size: contain;
background-repeat: no-repeat;
background-image: url(../images/logos/october-icon.png);
}
body.colorscheme-dark .logo.woocommerce > img {
background-color: #fafafa;
border: solid 16px #fafafa;
border-bottom-width: 10px;
border-radius: 6px;
box-sizing: content-box;
}
@media (prefers-color-scheme: dark) {
.logo.woocommerce > img {
background-color: #fafafa;
border: solid 16px #fafafa;
border-bottom-width: 10px;
border-radius: 6px;
box-sizing: content-box;
}
}
body.colorscheme-dark .wp-icon > figcaption > p {
margin-left: 0;
}
@media (prefers-color-scheme: dark) {
.wp-icon > figcaption > p {
margin-left: 0;
}
}
body.colorscheme-dark .wp-icon > img {
display: none;
}
@media (prefers-color-scheme: dark) {
.wp-icon > img {
display: none;
}
}