From 6b3b93770f5f415103fdbcd5c2bab4dfbf582722 Mon Sep 17 00:00:00 2001 From: cupcakearmy Date: Fri, 3 Jan 2020 01:55:10 +0100 Subject: [PATCH] moved everything to stylus --- src/styles/flex.css | 32 --------- src/styles/flex.styl | 24 +++++++ src/styles/global.css | 146 --------------------------------------- src/styles/global.styl | 121 ++++++++++++++++++++++++++++++++ src/styles/home.css | 93 ------------------------- src/styles/home.styl | 81 ++++++++++++++++++++++ src/styles/index.styl | 10 +-- src/styles/logos.css | 23 ------ src/styles/logos.styl | 19 +++++ src/styles/singular.css | 139 ------------------------------------- src/styles/singular.styl | 117 +++++++++++++++++++++++++++++++ 11 files changed, 367 insertions(+), 438 deletions(-) delete mode 100644 src/styles/flex.css create mode 100644 src/styles/flex.styl delete mode 100644 src/styles/global.css create mode 100644 src/styles/global.styl delete mode 100644 src/styles/home.css create mode 100644 src/styles/home.styl delete mode 100644 src/styles/logos.css create mode 100644 src/styles/logos.styl delete mode 100644 src/styles/singular.css create mode 100644 src/styles/singular.styl diff --git a/src/styles/flex.css b/src/styles/flex.css deleted file mode 100644 index 4ecdb2d..0000000 --- a/src/styles/flex.css +++ /dev/null @@ -1,32 +0,0 @@ -.flex.container { - display: flex; -} - -.flex.container.horizontal { - flex-direction: row; -} - -.flex.container.vertical { - flex-direction: column; -} - -.flex.container.middle { - align-items: center; -} - -.flex.container.center { - justify-content: center; -} - -.flex.item { - overflow: hidden; - /*display: inline-block;*/ -} - -.flex.item.grow { - flex: 1 0; -} - -.flex.item.shrink { - flex: 0 1 auto; -} diff --git a/src/styles/flex.styl b/src/styles/flex.styl new file mode 100644 index 0000000..5934ffb --- /dev/null +++ b/src/styles/flex.styl @@ -0,0 +1,24 @@ +.flex + &.container + display flex + + &.horizontal + flex-direction row + + &.vertical + flex-direction column + + &.middle + align-items center + + &.center + justify-content center + + &.item + overflow hidden + + &.grow + flex 1 0 + + &.shrink + flex 0 1 auto \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css deleted file mode 100644 index 0e212ed..0000000 --- a/src/styles/global.css +++ /dev/null @@ -1,146 +0,0 @@ -* { - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - --clr-primary: hsl(194, 100%, 88%); - --clr-white: #ffffff; - --clr-black: #000000; - --clr-dark: #222222; - --clr-ligher: #eeeeee; - --text-width: 35rem; - --animation: all 100ms ease; - --small-shadow: 0 0.2em 0.5em -0.1em #00000014; - --icon-width: 1.5em; - scroll-behavior: smooth; -} - -*[tabindex]:focus { - outline: none; -} - -html, body { - padding: 0; - margin: 0; - font-family: Raleway, serif; - font-size: 1rem; -} - -h1, h2, h3, h4, h5, h6 { - margin: 0; -} - -a { - text-decoration: none; - color: inherit; -} - -hr { - border: 0; - border-top: 1px solid #f5f5f5; - margin: 1em 0; -} - -.fill { - height: 100%; - width: 100%; -} - -.fill-v { - height: 100%; -} - -.fill-h { - width: 100%; -} - -.alt-font { - font-family: "Abril Fatface", serif; -} - -.text-align-right { - text-align: right; -} - -.text-align-left { - text-align: left; -} - -.text-align-center { - text-align: center; -} - -#app { - width: 100vw; - height: 100vh; - position: fixed; - overflow-x: auto; - background-color: var(--clr-white); -} - -.view { - max-width: var(--text-width); -} - -.tags { - margin-top: -.25em; -} - -.tags > a.tag { - padding: .25em; - background: #eee; - border-radius: .25em; - display: inline-block; - margin-top: .25em; -} - -.gohome { - padding: .5em; - align-self: center; - transition: var(--animation); -} - -.gohome:hover { - transform: scale(1.5); -} - -img.icon { - height: 1em; - display: inline-block; - vertical-align: middle; -} - -.auto-width { - max-width: var(--text-width); - width: 100%; -} - -.spacer { - height: 8em; -} - -@media only screen and (max-width: 40em) { - .tags::-webkit-scrollbar { - width: 2px; - background: transparent; - height: 2px; - } - - .tags::-webkit-scrollbar-thumb { - background: var(--clr-dark); - border-radius: 2px; - } - - .tags { - display: flex; - flex-direction: row; - overflow: auto; - } - - .tags > a.tag { - margin: .25em; - flex: 1 0 auto; - } - - .gohome { - padding: .25em; - } -} \ No newline at end of file diff --git a/src/styles/global.styl b/src/styles/global.styl new file mode 100644 index 0000000..aa70492 --- /dev/null +++ b/src/styles/global.styl @@ -0,0 +1,121 @@ +* + box-sizing border-box + -webkit-overflow-scrolling touch + --clr-primary hsl(194, 100%, 88%) + --clr-white #ffffff + --clr-black #000000 + --clr-dark #222222 + --clr-ligher #eeeeee + --text-width 35rem + --animation all 100ms ease + --small-shadow 0 0.2em 0.5em -0.1em #00000014 + --icon-width 1.5em + scroll-behavior smooth + +*[tabindex]:focus + outline none + +html, body + padding 0 + margin 0 + font-family Raleway, serif + font-size 1rem + +h1, h2, h3, h4, h5, h6 + margin 0 + +a + text-decoration none + color inherit + +hr + border 0 + border-top 1px solid #f5f5f5 + margin 1em 0 + +.fill + height 100% + width 100% + +.fill-v + height 100% + +.fill-h + width 100% + +.alt-font + font-family "Abril Fatface", serif + +.text-align-right + text-align right + +.text-align-left + text-align left + +.text-align-center + text-align center + +#app + width 100vw + height 100vh + position fixed + overflow-x auto + background-color var(--clr-white) + +.view + max-width var(--text-width) + +.tags + margin-top -.25em + + & > a + &.tag + padding .25em + background #eee + border-radius .25em + display inline-block + margin-top .25em + +.gohome + padding .5em + align-self center + transition var(--animation) + + &:hover + transform scale(1.5) + +img + &.icon + height 1em + display inline-block + vertical-align middle + +.auto-width + max-width var(--text-width) + width 100% + +.spacer + height 8em + +@media only screen and (max-width: 40em) + .tags + display flex + flex-direction row + overflow auto + + &::-webkit-scrollbar + width 2px + background transparent + height 2px + + &::-webkit-scrollbar-thumb + background var(--clr-dark) + border-radius 2px + + & > a + &.tag + margin .25em + flex 1 0 auto + + .gohome + padding .25em \ No newline at end of file diff --git a/src/styles/home.css b/src/styles/home.css deleted file mode 100644 index 4acf37c..0000000 --- a/src/styles/home.css +++ /dev/null @@ -1,93 +0,0 @@ -#home #header { - text-align: center; - margin-top: 8vmin; - margin-bottom: 16vmin; - padding: 0 2em; -} - -#home #header h1 { - font-size: 12vw; - font-family: "Abril Fatface", serif; -} - -#home #header h2 { - font-size: 5.5vw; -} - -#home #list-container { -} - -#home #list-header { -} - -#home #list { - text-align: left; - width: 100%; - padding: 0 2em; -} - -#home #list > .item { - padding: .25em 1em; - margin: 1.5em 0; - transition: all ease .1s; - border-radius: .5em; - display: block; -} - -#home #list > .item .title { - margin-bottom: .25em; -} - -#home #list > .item .thumbnail img { - width: 100%; - height: 12em; - object-fit: cover; - object-position: center; - border-radius: .5em; - transition: var(--animation); - transform: scale(1); -} - -#home #list hr { - margin: 0 1.5em; -} - -#home #lights img { - position: fixed; - top: .25em; - right: .25em; - transition: var(--animation); - height: var(--icon-width); -} - -@media only screen and (min-width: 40em) { - #home #list { - width: var(--text-width); - } - - #home #header h1 { - font-size: 5em; - } - - #home #header h2 { - font-size: 2em; - } - - #home #lights img{ - top: .5em; - right: 1em; - } - - #home #list > .item:hover { - box-shadow: var(--small-shadow); - transform: scale(1.05); - padding-bottom: 1em; - } - - #home #list > .item:hover .thumbnail img { - transform: scale(1.2) translateY(-1em); - height: 16em; - margin: 1em 0; - box-shadow: var(--small-shadow); - } -} \ No newline at end of file diff --git a/src/styles/home.styl b/src/styles/home.styl new file mode 100644 index 0000000..c94ce8a --- /dev/null +++ b/src/styles/home.styl @@ -0,0 +1,81 @@ +#home + #header + text-align center + margin-top 8vmin + margin-bottom 16vmin + padding 0 2em + + h1 + font-size 12vw + font-family "Abril Fatface", serif + + h2 + font-size 5.5vw + + #list-container + #list-header + #list + text-align left + width 100% + padding 0 2em + + & > .item + padding .25em 1em + margin 1.5em 0 + transition all ease .1s + border-radius .5em + display block + + .title + margin-bottom .25em + + .thumbnail + img + width 100% + height 12em + object-fit cover + object-position center + border-radius .5em + transition var(--animation) + transform scale(1) + + hr + margin 0 1.5em + + #lights + img + position fixed + top .25em + right .25em + transition var(--animation) + height var(--icon-width) + +@media only screen and (min-width: 40em) + #home + #list + width var(--text-width) + + & > .item + &:hover + box-shadow var(--small-shadow) + transform scale(1.05) + padding-bottom 1em + + .thumbnail + img + transform scale(1.2) translateY(-1em) + height 16em + margin 1em 0 + box-shadow var(--small-shadow) + + #header + h1 + font-size 5em + + h2 + font-size 2em + + #lights + img + top .5em + right 1em \ No newline at end of file diff --git a/src/styles/index.styl b/src/styles/index.styl index dfd4fa6..c47196d 100644 --- a/src/styles/index.styl +++ b/src/styles/index.styl @@ -1,6 +1,6 @@ -@require "./global.css" +@require "./global.styl" @require "./fonts.css" -@require "./flex.css" -@require "./home.css" -@require "./logos.css" -@require "./singular.css" \ No newline at end of file +@require "./flex.styl" +@require "./home.styl" +@require "./logos.styl" +@require "./singular.styl" \ No newline at end of file diff --git a/src/styles/logos.css b/src/styles/logos.css deleted file mode 100644 index 40f8cba..0000000 --- a/src/styles/logos.css +++ /dev/null @@ -1,23 +0,0 @@ -#logos { - margin-top: 1.5em; -} - -#logos > .title { - margin: 2em; - text-align: center; -} - -#logos > .title img { - height: 1.5em; -} - -#logos > .list img { - height: 2em; - width: 2em; - margin: 0 .5em; - transition: var(--animation); -} - -#logos > .list img:hover { - transform: scale(1.15); -} \ No newline at end of file diff --git a/src/styles/logos.styl b/src/styles/logos.styl new file mode 100644 index 0000000..2a2ea3e --- /dev/null +++ b/src/styles/logos.styl @@ -0,0 +1,19 @@ +#logos + margin-top: 1.5em + + & > .title + margin: 2em + text-align: center + + img + height: 1.5em + + & > .list + img + height: 2em + width: 2em + margin: 0 .5em + transition: var(--animation) + + &:hover + transform: scale(1.15) \ No newline at end of file diff --git a/src/styles/singular.css b/src/styles/singular.css deleted file mode 100644 index 26d71b1..0000000 --- a/src/styles/singular.css +++ /dev/null @@ -1,139 +0,0 @@ -#singular #top img { - margin: .25em .25em; - vertical-align: middle; - transition: var(--animation); - height: var(--icon-width); -} - -#singular #top img:hover { - transform: scale(1.5); -} - -#singular #top img.reduce { - height: calc(var(--icon-width) * .8); -} - -#singular #main { - padding-top: 8vw; - overflow-y: auto; - overflow-wrap: break-word; -} - -#singular #main:after { - content: ''; - height: 16vh; - display: block; -} - -#singular #header { - text-align: center; - padding: 0 2em; - margin-bottom: 5vmin; -} - -#singular #header { - max-width: 60em; - width: calc(100% - 2em); -} - -#singular #header h1 { - font-size: 4vmax; -} - -#singular #content h2 { - margin-top: 3em; -} - -#singular #content h3 { - margin-top: 2em; -} - -#singular #content h4, h5, h6 { - margin-top: 1em; -} - -#singular #content { - width: 100%; - padding: 0 1em; -} - -#singular #content > * { - max-width: var(--text-width); - width: 100%; - line-height: 1.5; -} - - -#singular #content .alignfull { - max-width: initial; - width: calc(100% + 4em); -} - -#singular #content .alignwide { - max-width: 60em !important; - width: 100%; -} - -#singular #main #content > * a { - border-bottom: 2px solid var(--clr-black); -} - -#singular #content blockquote { - border-left: 2px solid var(--clr-black); - padding-left: .5em; -} - -#singular #content blockquote > p { - margin: 0; -} - -#singular #content blockquote > cite { - font-size: .75em; -} - -#singular #content pre { - overflow: auto; - background-color: var(--clr-ligher); - padding: 1em; - border-radius: .25em; - overflow-wrap: initial; - tab-size: 4; -} - -#singular #content p code { - background: var(--clr-ligher); - padding: 0.3em .5em; - border-radius: .25em; -} - -#singular .links > div { - transform: rotate(180deg) scale(1); - writing-mode: vertical-rl; - padding: .25em; - height: 100%; - text-align: center; - cursor: pointer; - background: var(--clr-white); - transition: var(--animation); - width: 2em; - line-height: 1em; -} - -#singular .links > div:hover { - transform: rotate(180deg) scale(1.5); -} - -@media only screen and (min-width: 40em) { - #singular .links > div { - padding: 1em; - width: 3em; - } - - #singular #top img { - margin: .25em .5em; - } - - #singular #top { - padding: 0 .5em; - } -} \ No newline at end of file diff --git a/src/styles/singular.styl b/src/styles/singular.styl new file mode 100644 index 0000000..468f26c --- /dev/null +++ b/src/styles/singular.styl @@ -0,0 +1,117 @@ +#singular + #top + img + margin .25em .25em + vertical-align middle + transition var(--animation) + height var(--icon-width) + + &:hover + transform scale(1.5) + + &.reduce + height calc(var(--icon-width) * .8) + + #main + padding-top 8vw + overflow-y auto + overflow-wrap break-word + + &:after + content '' + height 16vh + display block + + #content + & > * + a + border-bottom 2px solid var(--clr-black) + + #header + text-align center + padding 0 2em + margin-bottom 5vmin + max-width 60em + width calc(100% - 2em) + + h1 + font-size 4vmax + + #content + width 100% + padding 0 1em + + h2 + margin-top 3em + + h3 + margin-top 2em + + & > * + max-width var(--text-width) + width 100% + line-height 1.5 + + .alignfull + max-width initial + width calc(100% + 4em) + + .alignwide + max-width 60em !important + width 100% + + blockquote + border-left 2px solid var(--clr-black) + padding-left .5em + + & > p + margin 0 + + & > cite + font-size .75em + + pre + overflow auto + background-color var(--clr-ligher) + padding 1em + border-radius .25em + overflow-wrap initial + tab-size 4 + + p + code + background var(--clr-ligher) + padding 0.3em .5em + border-radius .25em + + .links + & > div + transform rotate(180deg) scale(1) + writing-mode vertical-rl + padding .25em + height 100% + text-align center + cursor pointer + background var(--clr-white) + transition var(--animation) + width 2em + line-height 1em + + &:hover + transform rotate(180deg) scale(1.5) + +#singular #content h4, h5, h6 + margin-top 1em + +@media only screen and (min-width: 40em) + #singular + .links + & > div + padding 1em + width 3em + + #top + padding 0 .5em + + img + margin .25em .5em \ No newline at end of file