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.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.

932 lines
14 KiB
Plaintext

@import "colors.less";
*,
*:after,
*:before {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
display: flex;
color: @fg-color;
background-color: @bg-color;
font-family: 'Fira Mono', monospace;
font-size: 1.6em;
font-weight: 400;
letter-spacing: 0.0625em;
line-height: 1.8em;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
font-size: 1.4em;
line-height: 1.6em;
}
}
a {
font-weight: 700;
color: @darker-fg-color;
text-decoration: none;
&:focus,
&:hover {
text-decoration: underline;
}
}
p {
margin: 1.6rem 0 1.6rem 0;
a {
font-weight: 400;
color: @darker-fg-color;
text-decoration: underline;
text-underline-position: under;
&:focus,
&:hover {
color: @link-color;
}
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: @darker-fg-color;
text-transform: uppercase;
letter-spacing: 0.0625em;
margin: 3.2rem 0 1.6rem 0;
}
h1 {
font-size: 3.2rem;
line-height: 3.2rem;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
font-size: 2.8rem;
line-height: 2.8rem;
}
}
h2 {
font-size: 2.8rem;
line-height: 2.8rem;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
font-size: 2.4rem;
line-height: 2.4rem;
}
}
h3 {
font-size: 2.4rem;
line-height: 2.4rem;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
font-size: 2.0rem;
line-height: 2.0rem;
}
}
h4 {
font-size: 2.2rem;
line-height: 2.2rem;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
font-size: 1.8rem;
line-height: 1.8rem;
}
}
h5 {
font-size: 2.0rem;
line-height: 2.0rem;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
font-size: 1.6rem;
line-height: 1.6rem;
}
}
h6 {
font-size: 1.4rem;
line-height: 1.4rem;
}
pre {
margin: 1.6rem 0 1.0rem 0;
padding: 1.6rem;
overflow-x: auto;
}
code {
display: inline-block;
background-color: @darker-fg-color;
color: @bg-color;
padding: 0.4rem 0.8rem 0.4rem 0.8rem;
}
blockquote {
border-left: 2px solid @darker-bg-color;
padding-left: 1.6rem;
font-style: italic;
}
th, td {
padding: 1.6rem;
}
table {
border-collapse: collapse;
}
table td, table th {
border: 2px solid @darker-fg-color;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
img {
max-width: 100%;
}
.wrapper {
// display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
}
.container {
margin: 0 auto;
max-width: 120.0rem;
width: 100%;
padding-left: 2.0rem;
padding-right: 2.0rem;
}
.navigation {
height: 6.0rem;
width: 100%;
a {
display: inline;
font-size: 1.6rem;
text-transform: uppercase;
line-height: 6.0rem;
letter-spacing: 0.1rem;
@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
font-size: 1.6rem;
}
}
ul {
list-style: none;
margin-bottom: 0;
margin-top: 0;
li {
float: left;
margin: 0;
position: relative;
a {
margin-left: 1.0rem;
margin-right: 1.0rem;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
float: none !important;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
visibility: hidden;
opacity: 0;
max-height: 0;
z-index: 5;
top: 5rem;
right: 0;
width: 100%;
position: absolute;
background-color: rgba(254, 254, 254, 0.98);
padding: 0;
border-bottom: solid 2px #E2DFE1;
transition: opacity 0.25s, max-height 0.15s linear;
}
}
}
#menu-control {
display: none;
}
.btn-mobile {
display: none;
}
.mobile-menu-lang-separator-centered {
display: none;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
.btn-mobile {
display: block;
font-size: 2.0rem;
color: black;
cursor: pointer;
margin-top: 1.5rem;
}
#menu-control:checked + label .btn-mobile {
color: #E2DFE1;
}
#menu-control:checked + label ul {
visibility: visible;
opacity: 1;
max-height: 100rem;
}
.navigation-item {
position: relative;
}
.mobile-menu-lang-separator-centered {
display: block;
padding-left: 7rem;
padding-right: 7rem;
}
.mobile-menu-lang-separator-full {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.multilingual-separator {
display: none;
}
.align-left {
text-align: left;
padding-left: 1rem;
}
.align-right {
text-align: right;
padding-right: 1rem;
}
.align-center {
text-align: center;
}
}
.content {
flex: 1;
margin-top: 1.6rem;
margin-bottom: 3.2rem;
article {
header {
margin-top: 3.2rem;
margin-bottom: 3.2rem;
h1, h2 {
margin: 0;
}
h2 {
margin-top: 1.0rem;
font-size: 1.8rem;
color: @fg-color;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
font-size: 1.6rem;
}
}
}
}
}
.avatar img {
width: 20rem;
height: auto;
border-radius: 50%;
@media only screen and (max-device-width: 768px) {
width: 10rem;
}
}
.list {
ul {
margin: 3.2rem 0 3.2rem 0;
list-style: none;
padding: 0;
li {
font-size: 1.6rem;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
font-size: 1.4rem;
margin: 1.6rem 0 1.6rem 0;
}
span {
display: inline-block;
text-align: right;
width: 20.0rem;
margin-right: 3.0rem;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
display: block;
text-align: left;
}
}
a {
text-transform: uppercase;
}
}
}
}
.pagination {
margin-top: 6.0rem;
text-align: center;
li {
display: inline;
text-align: center;
span {
margin: 0;
text-align: center;
width: 3.2rem;
}
a {
span {
margin: 0;
text-align: center;
width: 3.2rem;
}
}
}
}
.centered {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
.about {
text-align: center;
h1 {
margin-top: 2.0rem;
margin-bottom: 0.5rem;
}
h2 {
margin-top: 1.0rem;
margin-bottom: 0.5rem;
font-size: 2.4rem;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
font-size: 2.0rem;
}
}
ul {
list-style: none;
margin: 3.0rem 0 1.0rem 0;
padding: 0;
li {
display: inline-block;
position: relative;
a {
text-transform: uppercase;
margin-left: 1.0rem;
margin-right: 1.0rem;
font-size: 1.6rem;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
font-size: 1.4rem;
}
}
}
}
}
.error {
text-align: center;
h1 {
margin-top: 2.0rem;
margin-bottom: 0.5rem;
font-size: 4.6rem;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
font-size: 3.2rem;
}
}
h2 {
margin-top: 2.0rem;
margin-bottom: 3.2rem;
font-size: 3.2rem;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
font-size: 2.8rem;
}
}
}
}
.footer {
width: 100%;
text-align: center;
line-height: 2.0rem;
margin-bottom: 1.0rem;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
// ### AsciiDoc style enhancements ###
.title {
font-weight: bold;
}
a {
position: relative;
transition: 0.5s;
}
a:before, a:after {
position: absolute;
bottom: -2px;
content: "";
display: inline-block;
width: 0;
height: 2px;
background: #F30034;
transition: 0.5s;
}
a:before {
left: 50%;
}
a:after {
right: 50%;
}
a:hover {
text-decoration: none;
}
a:hover:before, a:hover:after {
width: 50%;
}
.private {
display: none;
}
.private-inner {
display: table-cell;
}
.portfolio .portfolio-inner {
display: flex;
align-items: stretch;
}
.portfolio .portfolio-inner .portfolio-image {
display: flex;
align-items: center;
margin-right: 5%;
width: 45%;
}
.portfolio .portfolio-inner .portfolio-content {
flex: 1;
}
#privateTrigger {
cursor: pointer;
}
#privateTrigger:hover:before, #privateTrigger:hover:after {
width: 0;
}
.navigation {
height: auto;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.08);
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.fixed-bar {
position: fixed;
bottom: 0;
margin: 0;
height: 65px;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.05);
background: #fefefe;
}
.fixed-bar .container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 65px;
}
code {
background: #364549 !important;
}
.social-list {
.social-item {
i {
font-size: 30px;
}
}
}
.sns-shares {
display: flex;
align-items: center;
justify-content: space-around;
position: absolute;
right: 0;
}
.sns-shares .sns-share {
display: flex;
align-items: center;
justify-content: space-around;
height: 56px;
width: 56px;
text-decoration: none;
}
.sns-shares .sns-share:hover:before, .sns-shares .sns-share:hover:after {
width: 0;
}
.sns-shares .twitter-share .fa-twitter {
font-size: 24px;
}
.sns-shares .fb-share .fa-facebook-f {
font-size: 24px;
}
.sns-shares .hatena-share .fa-bookmark {
font-size: 24px;
}
.sns-shares .line-share .fa-line {
font-size: 30px;
}
.sns-shares .linkedIn-share .fa-linkedin {
font-size: 30px;
}
.sp-sns-shares {
display: none;
}
@media (max-width: 920px) {
.pc-sns-shares {
display: none;
}
.sp-sns-shares {
display: flex;
position: relative;
justify-content: space-around;
width: 100%;
}
.portfolio .portfolio-inner {
display: block;
}
.portfolio .portfolio-inner .portfolio-image {
width: 100%;
}
}
/* vBackground */
.chroma {
color: #e3e3e3;
background-color: #364549;
}
/* vError */
.chroma .err {
color: #dddddd;
border-bottom: 2px dotted #c01b1b;
}
/* LineTableTD */
.chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}
/* LineTable */
.chroma .lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
width: auto;
overflow: auto;
display: block;
}
/* LineHighlight */
.chroma .hl {
display: block;
width: 100%;
background-color: #ffffcc;
}
/* LineNumbersTable */
.chroma .lnt {
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
}
/* LineNumbers */
.chroma .ln {
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
}
/* vKeyword */
.chroma .k {
color: #ebd247;
}
/* KeywordConstant */
.chroma .kc {
color: #ebd247;
}
/* KeywordDeclaration */
.chroma .kd {
color: #ebd247;
}
/* vKeywordNamespace */
.chroma .kn {
color: #ff8095;
}
/* KeywordPseudo */
.chroma .kp {
color: #ebd247;
}
/* KeywordReserved */
.chroma .kr {
color: #ebd247;
}
/* KeywordType */
.chroma .kt {
color: #ebd247;
}
/* vNameAttribute */
.chroma .na {
color: #8bdf4c;
}
/* NameClass */
.chroma .nc {
color: #8bdf4c;
}
/* NameConstant */
.chroma .no {
color: #ebd247;
}
/* NameDecorator */
.chroma .nd {
color: #8bdf4c;
}
/* NameException */
.chroma .ne {
color: #8bdf4c;
}
/* vNameFunction */
.chroma .nf {
color: #8bdf4c;
}
/* NameOther */
.chroma .nx {
color: #8bdf4c;
}
/* vNameTag */
.chroma .nt {
color: #ff8095;
}
/* Literal */
.chroma .l {
color: #a980f5;
}
/* LiteralDate */
.chroma .ld {
color: #41b7d7;
}
/* LiteralString */
.chroma .s {
color: #41b7d7;
}
/* LiteralStringAffix */
.chroma .sa {
color: #41b7d7;
}
/* LiteralStringBacktick */
.chroma .sb {
color: #41b7d7;
}
/* LiteralStringChar */
.chroma .sc {
color: #41b7d7;
}
/* LiteralStringDelimiter */
.chroma .dl {
color: #41b7d7;
}
/* LiteralStringDoc */
.chroma .sd {
color: #41b7d7;
}
/* vLiteralStringDouble */
.chroma .s2 {
color: #41b7d7;
}
/* LiteralStringEscape */
.chroma .se {
color: #a980f5;
}
/* LiteralStringHeredoc */
.chroma .sh {
color: #41b7d7;
}
/* LiteralStringInterpol */
.chroma .si {
color: #41b7d7;
}
/* LiteralStringOther */
.chroma .sx {
color: #41b7d7;
}
/* LiteralStringRegex */
.chroma .sr {
color: #41b7d7;
}
/* LiteralStringSingle */
.chroma .s1 {
color: #41b7d7;
}
/* LiteralStringSymbol */
.chroma .ss {
color: #41b7d7;
}
/* LiteralNumber */
.chroma .m {
color: #a980f5;
}
/* LiteralNumberBin */
.chroma .mb {
color: #a980f5;
}
/* LiteralNumberFloat */
.chroma .mf {
color: #a980f5;
}
/* LiteralNumberHex */
.chroma .mh {
color: #a980f5;
}
/* vLiteralNumberInteger */
.chroma .mi {
color: #a980f5;
}
/* LiteralNumberIntegerLong */
.chroma .il {
color: #a980f5;
}
/* LiteralNumberOct */
.chroma .mo {
color: #a980f5;
}
/* vOperator */
.chroma .o {
color: #ff8095;
}
/* OperatorWord */
.chroma .ow {
color: #ff8095;
}
/* vComment */
.chroma .c {
color: #9dabae;
}
/* CommentHashbang */
.chroma .ch {
color: #9dabae;
}
/* CommentMultiline */
.chroma .cm {
color: #9dabae;
}
/* CommentSingle */
.chroma .c1 {
color: #9dabae;
}
/* CommentSpecial */
.chroma .cs {
color: #9dabae;
}
/* CommentPreproc */
.chroma .cp {
color: #9dabae;
}
/* CommentPreprocFile */
.chroma .cpf {
color: #9dabae;
}
/* GenericDeleted */
.chroma .gd {
color: #ff8095;
}
/* GenericEmph */
.chroma .ge {
font-style: italic;
}
/* GenericInserted */
.chroma .gi {
color: #8bdf4c;
}
/* GenericStrong */
.chroma .gs {
font-weight: bold;
}
/* GenericSubheading */
.chroma .gu {
color: #9dabae;
}