From d8f8208bc2558c851a90f7be7a0a3e85010c6835 Mon Sep 17 00:00:00 2001 From: cupcakearmy Date: Sun, 12 Jan 2020 18:34:57 +0100 Subject: [PATCH] styles --- styles/app.styl | 42 ++++++++++++++++++++++++++++++++++++++++++ styles/backgorund.styl | 5 +++++ styles/content.styl | 31 +++++++++++++++++++++++++++++++ styles/form.styl | 3 +++ styles/inputs.styl | 39 +++++++++++++++++++++++++++++++++++++++ styles/menu.styl | 39 +++++++++++++++++++++++++++++++++++++++ styles/sets.styl | 12 ++++++++++++ styles/utils.styl | 5 +++++ 8 files changed, 176 insertions(+) create mode 100644 styles/app.styl create mode 100644 styles/backgorund.styl create mode 100644 styles/content.styl create mode 100644 styles/form.styl create mode 100644 styles/inputs.styl create mode 100644 styles/menu.styl create mode 100644 styles/sets.styl create mode 100644 styles/utils.styl diff --git a/styles/app.styl b/styles/app.styl new file mode 100644 index 0000000..0c034ad --- /dev/null +++ b/styles/app.styl @@ -0,0 +1,42 @@ +@require './backgorund.styl' +@require './content.styl' +@require './form.styl' +@require './inputs.styl' +@require './menu.styl' +@require './sets.styl' +@require './utils.styl' + +* + font-smooth: auto + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: auto + +html + margin: 0 + padding: 0 + overflow: hidden + // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif + // font-family: 'Nunito', sans-serif + font-family: 'Space Mono', monospace + background-color: #000000 + +.grecaptcha-badge + visibility: hidden + +.grc + font-size: .75em + color: #fffd + max-width: 35em + padding: .5em + border: 2px solid + margin-top: .5em + +a + color: inherit; + text-decoration: inherit; + margin-top: .5em; + display: inline-block; + border-bottom: 1px solid white; + font-weight: bold; + + underline() \ No newline at end of file diff --git a/styles/backgorund.styl b/styles/backgorund.styl new file mode 100644 index 0000000..90ce274 --- /dev/null +++ b/styles/backgorund.styl @@ -0,0 +1,5 @@ +#bg + position: fixed + top: 0 + left: 0 + z-index: -1 \ No newline at end of file diff --git a/styles/content.styl b/styles/content.styl new file mode 100644 index 0000000..3072ae8 --- /dev/null +++ b/styles/content.styl @@ -0,0 +1,31 @@ +$mt=5em +$mb=3em + +.container + z-index: 0 + position: relative + height: 100vh + overflow: auto + padding: $mt 0 $mb 0 + display: flex + + &>* + color: white + max-width: 45em + margin: 0 auto + padding: 1em 1.5em + width: 100% + height: max-content + background: hsla(0, 0%, 0%, 0.75) + background: linear-gradient(90deg, #0000 0%, #000d 1em, #000d calc(100% - 1em), #0000 100%) + + &.color + // background: hsl(202, 68%, 25%) + background: hsl(319, 77%, 36%) + + &.center + margin auto + padding-bottom: $mt - $mb + + + \ No newline at end of file diff --git a/styles/form.styl b/styles/form.styl new file mode 100644 index 0000000..941c2d0 --- /dev/null +++ b/styles/form.styl @@ -0,0 +1,3 @@ +form>div.body + border: 2px solid + padding: .5em \ No newline at end of file diff --git a/styles/inputs.styl b/styles/inputs.styl new file mode 100644 index 0000000..557b23d --- /dev/null +++ b/styles/inputs.styl @@ -0,0 +1,39 @@ +@require './utils.styl' + +textarea + resize: vertical + max-height: 8em + min-height: 2em + +input, textarea, label.file + display: inline-block + width: 100% + padding: .25em 0 + margin: 0 + margin-bottom: 1em + background: none + outline: none + border: none + color: inherit + border-bottom: 2px solid + cursor: pointer + + underline() + + &::placeholder + color: #bbb + + &[type="submit"], &[type="button"], &.file + padding: .5em 1em + width: initial + border: 2px solid + margin-bottom: 0 + margin-top: .5em + + &[type="file"] + display: none + +label + &>small + // font-size: 1em + font-weight: bold \ No newline at end of file diff --git a/styles/menu.styl b/styles/menu.styl new file mode 100644 index 0000000..2b91d80 --- /dev/null +++ b/styles/menu.styl @@ -0,0 +1,39 @@ +$foregound=#ffffff + +menu-item-hover() + box-shadow: 0 1em 0 -.75em $foregound + box-sizing: content-box + transform: translateY(.25em) + +nav.main + font-family: 'Space Mono', monospace + position: fixed + top: 0 + left: 0 + z-index: 5 + width: 100vw + padding: 1.5em + background: rgb(0,0,0) + background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%) + + .left + color: $foregound + font-weight: bold + font-size: 2em + cursor pointer + + .right + &>div + color: $foregound + padding: .5em 0.75em + font-weight: bold + box-sizing: content-box + cursor pointer + transition: all ease 100ms + + &:hover + menu-item-hover() + + &:not(:hover) + &>.active + menu-item-hover() diff --git a/styles/sets.styl b/styles/sets.styl new file mode 100644 index 0000000..4fb73c3 --- /dev/null +++ b/styles/sets.styl @@ -0,0 +1,12 @@ +.sets + + iframe + border: 0 + + ul + list-style: none + padding: 0 + margin: 0 + + li + margin-top: 2em \ No newline at end of file diff --git a/styles/utils.styl b/styles/utils.styl new file mode 100644 index 0000000..ac3f2b3 --- /dev/null +++ b/styles/utils.styl @@ -0,0 +1,5 @@ +underline() + transition: all linear 100ms + + &:hover, &:focus + box-shadow: 0 4px 0px 0px \ No newline at end of file