140 lines
2.2 KiB
SCSS
Raw Normal View History

2022-12-24 03:20:02 +09:00
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+JP:wght@700&family=Lora&display=swap");
2019-03-14 23:23:12 +09:00
2017-10-07 11:43:26 +09:00
$break-small: 500px;
$break-large: 840px;
2019-03-14 23:23:12 +09:00
2020-02-07 12:57:54 +09:00
:root {
--background: #fff;
--text: #000;
--accent: #4f33e8;
--highlight: #f6f6f6;
--tone: #989898;
2021-06-08 16:50:52 +09:00
--dim: rgb(203, 203, 203);
2022-12-24 03:20:02 +09:00
--link-text: #4f33e8;
2020-02-07 12:57:54 +09:00
}
@media (prefers-color-scheme: dark) {
:root {
2022-12-24 03:20:02 +09:00
--background: #231a37;
--text: #d9d5e1;
2020-02-07 12:57:54 +09:00
--accent: #7033e8;
--highlight: #140d25;
--tone: #989898;
2021-06-08 16:50:52 +09:00
--dim: rgb(90, 83, 101);
2022-12-24 03:20:02 +09:00
--link-text: #af93ff;
2020-02-07 12:57:54 +09:00
}
}
2021-01-21 21:45:05 +09:00
html,
body {
box-sizing: border-box;
}
2022-12-24 03:20:02 +09:00
html {
font-size: 100%;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
}
2017-10-07 11:43:26 +09:00
body {
2018-12-28 21:44:59 +09:00
width: 900px;
2017-10-07 11:43:26 +09:00
margin: 0 auto;
padding: 0 20px;
2020-02-07 12:57:54 +09:00
background: var(--background);
color: var(--text);
2019-03-14 23:23:12 +09:00
2017-10-07 11:43:26 +09:00
@media screen and (max-width: $break-large) {
width: auto;
margin: 0;
}
2018-12-28 21:44:59 +09:00
}
2022-12-24 03:20:02 +09:00
a {
word-break: break-word;
2017-10-07 11:43:26 +09:00
}
2022-12-24 03:20:02 +09:00
2018-07-19 20:53:12 +09:00
a:hover,
a:active,
a:link,
a:visited {
2020-02-07 12:57:54 +09:00
color: var(--text);
2017-10-07 11:43:26 +09:00
text-decoration: none;
}
2022-12-24 03:20:02 +09:00
2018-07-19 20:53:12 +09:00
h1,
h2,
h3,
h4,
p {
2017-10-07 11:43:26 +09:00
margin: 0;
padding: 0;
line-height: 1.333em;
}
2022-12-24 03:20:02 +09:00
2017-10-07 11:43:26 +09:00
hr {
display: block;
width: 100%;
height: 1px;
2020-02-07 12:57:54 +09:00
background-color: var(--highlight);
2017-10-07 11:43:26 +09:00
border: 0;
margin: 40px 0;
}
2019-03-14 23:23:12 +09:00
2022-12-24 03:20:02 +09:00
// Header
2021-05-01 02:19:10 +09:00
header.header {
2017-10-07 11:43:26 +09:00
display: flex;
flex-wrap: wrap;
2022-12-24 03:20:02 +09:00
margin: 70px 0 70px;
2021-02-14 17:24:36 +09:00
flex-direction: row;
2022-12-24 03:20:02 +09:00
justify-content: center;
2017-10-07 11:43:26 +09:00
align-items: center;
2019-03-14 23:23:12 +09:00
2017-10-07 11:43:26 +09:00
@media screen and (max-width: $break-small) {
2021-02-14 17:24:36 +09:00
margin-top: 30px;
margin-bottom: 60px;
2017-10-07 11:43:26 +09:00
}
2019-03-14 23:23:12 +09:00
2017-10-07 11:43:26 +09:00
.logo {
2020-02-07 12:57:54 +09:00
@media (prefers-color-scheme: dark) {
filter: invert(1);
}
2019-03-14 23:23:12 +09:00
2017-10-07 11:43:26 +09:00
@media screen and (max-width: $break-small) {
2021-02-14 17:24:36 +09:00
padding-left: 5px;
2020-02-07 13:11:06 +09:00
}
}
2017-10-07 11:43:26 +09:00
.menu {
2021-02-14 17:24:36 +09:00
display: flex;
flex-direction: column;
2017-10-07 11:43:26 +09:00
list-style: none;
2021-02-14 17:24:36 +09:00
text-transform: lowercase;
font-weight: bold;
border-left: 1px solid var(--tone);
2019-03-14 23:23:12 +09:00
2021-02-14 17:24:36 +09:00
padding: 0;
margin: 0 0 0 30px;
padding: 0 0 0 30px;
.menu__item {
2022-12-24 03:20:02 +09:00
margin: 2px 0;
2017-10-07 11:43:26 +09:00
}
}
}
2019-03-14 22:32:24 +09:00
2022-12-24 03:20:02 +09:00
// Pagination
2021-01-21 21:45:05 +09:00
.page-nav {
display: flex;
justify-content: center;
.page-prev,
.page-number,
.page-next {
font-size: 1.2rem;
padding: 20px;
}
}
2020-02-07 12:37:31 +09:00
@import "./post";