You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
blog/sass/no-style-please.scss

398 lines
5.8 KiB
SCSS

2 years ago
@import "theme/dark";
@import "theme/light";
:root {
--text-0: rgba(0, 0, 0, 87%);
--text-1: rgba(0, 0, 0, 66%);
--bordercl: rebeccapurple;
--bg-0: #fff;
--bg-1: #f2f2f2;
--primary-color: #ef5350;
--hover-color: white;
}
// -------------- THEME SWITCHER -------------- //
@mixin dark-appearance {
filter: invert(1);
img {
filter: invert(1);
&.ioda {
filter: invert(0);
}
}
}
body[a="dark"] {
@include dark-appearance;
}
@media (prefers-color-scheme: dark) {
body[a="auto"] {
@include dark-appearance;
}
}
// -------------------------------------------- //
// bg color is also needed in html in order to
// block body's background propagation
// see: https://stackoverflow.com/a/61265706
html,
input,
select,
textarea,
label,
button {
color: var(--main-text-color);
background-color: var(--page-back-color);
font-family: 'MapleMono';
font-size: 1rem;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.post-meta {
text-align: right;
}
h2,
h3,
h4,
h5,
h6 {
margin-top: 3rem;
}
hr {
margin: 2rem 0;
}
p {
margin: 1rem 0;
}
li {
margin: 0.4rem 0;
}
*:target {
background-color: var(--target-highlight-color);
color: var(--main-back-color);
}
.wrapper {
position: relative;
background-color: var(--main-back-color);
min-height: calc(100vh - 8rem);
max-width: 70ch;
margin: 2rem auto;
padding: 2rem 2rem;
}
hr {
margin: 2rem 0;
text-align: center;
border: 0;
color: var(--main-text-color);
&:before {
content: "| | |";
}
&:after {
content: attr(data-content) "| | |";
}
}
table {
width: 100%;
}
table,
th,
td {
border: thin solid var(--main-text-color);
border-collapse: collapse;
padding: 0.4rem;
}
p code {
background-color: var(--code-back-color);
padding: .2em .4em;
margin: 0;
font-size: 85%;
border-radius: 6px;
2 years ago
}
div.highlighter-rouge code {
display: block;
overflow-x: auto;
white-space: pre-wrap;
padding: 1rem;
}
blockquote {
font-style: italic;
border: thin solid black;
padding: 1rem;
p {
margin: 0;
}
}
img {
max-width: 100%;
display: block;
margin: 0 auto;
}
a {
color: var(--link-text-color);
cursor: pointer;
}
.post_date {
font-size: 1rem;
font-style: italic;
font-weight: bold;
margin-bottom: 2rem;
margin-right: 1rem;
}
.github_icon {
content: var(--github-icon-url);
}
.twitter_icon {
content: var(--twitter-icon-url);
}
.email_icon {
content: var(--email-icon-url);
}
.coffee_icon {
content: var(--coffee-icon-url);
}
.search_icon {
content: var(--search-icon-url);
}
.webring_icon {
content: var(--webring-icon-url);
}
.rss_icon {
content: var(--rss-icon-url);
}
a.cc_list {
text-decoration: none;
}
.copyright_icon {
content: var(--copyright-icon-url);
height: 16px;
margin: -3px;
}
.cc_icon {
content: var(--cc-icon-url);
height: 16px;
margin: -3px;
}
.attribution_icon {
content: var(--attribution-icon-url);
height: 16px;
margin: -3px;
}
.non_com_icon {
content: var(--non_com-icon-url);
height: 16px;
margin: -3px;
}
.share_alike_icon {
content: var(--share_alike-icon-url);
height: 16px;
margin: -3px;
}
.octicon:hover {
visibility: hidden;
}
h1 .octicon {
margin-left: -2.4em;
margin-right: calc(2.4em - 1.8em);
}
h2 .octicon {
margin-left: -2.9em;
margin-right: calc(2.9em - 1.8em);
}
h3 .octicon {
margin-left: -3.4em;
margin-right: calc(3.4em - 1.8em);
}
h4 .octicon {
margin-left: -3.9em;
margin-right: calc(3.9em - 1.8em);
}
h5 .octicon {
margin-left: -4.4em;
margin-right: calc(4.4em - 1.8em);
}
h6 .octicon {
margin-left: -4.9em;
margin-right: calc(4.9em - 1.8em);
}
.octicon {
fill: currentColor;
visibility: visible;
pointer-events: all;
vertical-align: middle;
width: 1.2em;
height: 1.2em;
}
input,
select,
textarea,
label,
button {
border-radius: 0.3em;
margin-left: 0;
}
fieldset {
border: none;
padding: 0;
}
.textfield {
max-width: 100%;
padding-bottom: 1rem;
}
.narrowfield {
width: 420px;
}
.hp {
display: none;
}
textarea {
vertical-align: top;
}
.textfield__input {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 0.3em;
padding: 0.4em;
width: 100%;
max-width: -webkit-fill-available;
}
.notify-me,
.g-recaptcha {
padding-bottom: 1rem;
max-width: min-content;
}
.button {
border: 1px solid rgba(0, 0, 0, 0.12);
background: var(--page-back-color);
border-radius: 0.3em;
padding: 0.4em;
overflow: hidden;
cursor: pointer;
}
button:hover {
background-color: var(--main-text-color);
color: var(--main-back-color);
}
footer {
bottom: 0;
position: absolute;
left: 0;
right: 0;
2 years ago
display: flex;
align-items: center;
flex-direction: column;
padding-bottom: 0.5rem;
2 years ago
}
.soc {
display: flex;
align-items: center;
justify-content: center;
2 years ago
border-radius: 4px;
2 years ago
margin-right: 1rem;
}
.soc:hover {
color: var(--main-back-color);
background: var(--link-text-color);
}
.footer-info {
padding: var(--footer-padding);
}
.list {
margin-bottom: 2rem;
}
.horizon{
display: flex;
justify-content: end;
.start {
width: 100%;
}
}
article {
margin-bottom: 2rem;
.body {
word-wrap: break-word;
}
}
.pagination {
margin-bottom: 2rem;
}
pre {
padding: 1rem;
overflow: auto;
}
// The line numbers already provide some kind of left/right padding
pre[data-linenos] {
padding: 1rem 0;
}
pre table td {
padding: 0;
}
// The line number cells
pre table td:nth-of-type(1) {
text-align: center;
user-select: none;
}
pre mark {
// If you want your highlights to take the full width.
display: block;
// The default background colour of a mark is bright yellow
background-color: rgba(254, 252, 232, 0.9);
}
pre table {
width: 100%;
border-collapse: collapse;
}