diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_responsive_fonts.scss | 26 | ||||
| -rw-r--r-- | scss/_webfonts.scss | 259 | ||||
| -rw-r--r-- | scss/man.scss | 39 | ||||
| -rw-r--r-- | scss/style.scss | 125 |
4 files changed, 449 insertions, 0 deletions
diff --git a/scss/_responsive_fonts.scss b/scss/_responsive_fonts.scss new file mode 100644 index 0000000..b9c3410 --- /dev/null +++ b/scss/_responsive_fonts.scss @@ -0,0 +1,26 @@ +@mixin font-size($size) { + html { + font-size: $size; + } +} + +@media (max-width: 480px) { + @include font-size(12px); +} + +@media (min-width: 480px) { + @include font-size(13px); +} + +@media (min-width: 786px) { + @include font-size(14px); +} + +@media (min-width: 992px) { + @include font-size(15px); +} + +@media (min-width: 1200px) { + @include font-size(16px); +} + diff --git a/scss/_webfonts.scss b/scss/_webfonts.scss new file mode 100644 index 0000000..19818c5 --- /dev/null +++ b/scss/_webfonts.scss @@ -0,0 +1,259 @@ +$cyrillic-ext: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +$cyrillic: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +$greek-ext: U+1F00-1FFF; +$greek: U+0370-03FF; +$latin-ext: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +$latin: U+0000-00FF, U+0131, U+0152-0153, U+2190-21FF, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +$vietnamese: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + +@font-face { + font-family: 'Alegreya'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-cyrillic-ext.woff2) format('woff2'); + unicode-range: $cyrillic-ext; +} + +@font-face { + font-family: 'Alegreya'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-cyrillic.woff2) format('woff2'); + unicode-range: $cyrillic; +} + +@font-face { + font-family: 'Alegreya'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-greek-ext.woff2) format('woff2'); + unicode-range: $greek-ext; +} + +@font-face { + font-family: 'Alegreya'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-greek.woff2) format('woff2'); + unicode-range: $greek; +} + +@font-face { + font-family: 'Alegreya'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-vietnamese.woff2) format('woff2'); + unicode-range: $vietnamese; +} + +@font-face { + font-family: 'Alegreya'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-latin-ext.woff2) format('woff2'); + unicode-range: $latin-ext; +} + +@font-face { + font-family: 'Alegreya'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-latin.woff2) format('woff2'); + unicode-range: $latin; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-cyrillic-ext.woff2) format('woff2'); + unicode-range: $cyrillic-ext; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-cyrillic.woff2) format('woff2'); + unicode-range: $cyrillic; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-greek-ext.woff2) format('woff2'); + unicode-range: $greek-ext; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-greek.woff2) format('woff2'); + unicode-range: $greek; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-vietnamese.woff2) format('woff2'); + unicode-range: $vietnamese; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-latin-ext.woff2) format('woff2'); + unicode-range: $latin-ext; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-latin.woff2) format('woff2'); + unicode-range: $latin; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-cyrillic-ext.woff2) format('woff2'); + unicode-range: $cyrillic-ext; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-cyrillic.woff2) format('woff2'); + unicode-range: $cyrillic; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-greek-ext.woff2) format('woff2'); + unicode-range: $greek-ext; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-greek.woff2) format('woff2'); + unicode-range: $greek; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-vietnamese.woff2) format('woff2'); + unicode-range: $vietnamese; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-latin-ext.woff2) format('woff2'); + unicode-range: $latin-ext; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-latin.woff2) format('woff2'); + unicode-range: $latin; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-cyrillic-ext.woff2) format('woff2'); + unicode-range: $cyrillic-ext; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-cyrillic.woff2) format('woff2'); + unicode-range: $cyrillic; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-greek-ext.woff2) format('woff2'); + unicode-range: $greek-ext; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-greek.woff2) format('woff2'); + unicode-range: $greek; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-vietnamese.woff2) format('woff2'); + unicode-range: $vietnamese; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-latin-ext.woff2) format('woff2'); + unicode-range: $latin-ext; +} + +@font-face { + font-family: 'Alegreya Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-latin.woff2) format('woff2'); + unicode-range: $latin; +} diff --git a/scss/man.scss b/scss/man.scss new file mode 100644 index 0000000..db02e86 --- /dev/null +++ b/scss/man.scss @@ -0,0 +1,39 @@ +@import '_webfonts'; +@import '_responsive_fonts'; + +body { + background-color: white; + font-family: "Alegreya Sans", sans; + font-size: 1.4em; + line-height: 1.4; + margin: 1em auto; + max-width: 1024px; + padding: 0 1em; +} + +table { + border-collapse: collapse; +} + +.tbl td:not(:last-child) { + border-right: solid 1px; +} + +.tbl td { + padding: 0 5px; +} + +table.foot { + margin-top: 1em; +} + +table.head, table.foot { width: 100%; } +td.head-rtitle, td.foot-os { text-align: right; } +td.head-vol { text-align: center; } +div.Pp { margin: 1ex 0ex; } +div.Nd, div.Bf, div.Op { display: inline; } +span.Pa, span.Ad { font-style: italic; } +span.Ms { font-weight: bold; } +dl.Bl-diag > dt { font-weight: bold; } +code.Nm, code.Fl, code.Cm, code.Ic, code.In, code.Fd, code.Fn, +code.Cd { font-weight: bold; font-family: inherit; } diff --git a/scss/style.scss b/scss/style.scss new file mode 100644 index 0000000..af35784 --- /dev/null +++ b/scss/style.scss @@ -0,0 +1,125 @@ +@import '_webfonts'; +@import '_responsive_fonts'; + +$font-sans: "Alegreya Sans", sans; +$font-serif: Alegreya, serif; +$font-mono: Iosevka, Inconsolata, monospace; + +$yellow: #ffd400; +$canary: #ffffb3; + +body { + background-color: white; + color: black; + line-height: 1.4; + margin: 0; +} + +h1 { + font-family: $font-serif; + font-size: 3.5rem; + font-weight: normal; + margin: 0; +} + +code { + font-family: $font-mono; + font-size: smaller; +} + +pre { + background-color: $canary; + overflow: auto; + padding: .7rem; +} + +pre.poetry { + background-color: white; + padding: 0; + font-family: $font-sans; +} + +blockquote { + background-color: $canary; + padding: .7rem; +} + +blockquote > p { + margin: 0; +} + +footer { + background-size: 200px; + height: 200px; +} + +.frontpage { + background-color: $yellow; + font-family: $font-serif; + font-size: 4rem; +} + +.post { + font-family: $font-sans; + font-size: 1.5rem; +} + +nav.main ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + list-style: none; + margin: .5rem; + padding: 0; +} + +nav.main li a { + background-color: white; + border: 4px solid black; + box-shadow: 10px 10px 0 black; + color: black; + display: block; + margin: .8rem .8rem; + padding: 0 .8rem; + text-decoration: none; +} + +nav.main li a:hover { + background-color: black; + color: white; +} + +article { + margin: 1rem auto; + max-width: 1024px; + padding: 0 1rem; + + header { + border-bottom: 1px solid darkgrey; + + a { + background-color: white; + font-weight: bold; + text-decoration: none; + } + + address { + display: none; + } + + time { font-size: smaller; } + } + + img { + display: block; + margin: 0 auto; + } + + hr { + border: 0; + border-top: 1px dashed grey; + width: 80%; + } + + ul { list-style: square; } +} |