mirror of
https://github.com/cupcakearmy/liquet.git
synced 2024-12-22 08:06:24 +00:00
moved everything to stylus
This commit is contained in:
cupcakearmy
parent
c57c14b3c8
commit
6b3b93770f
@ -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;
|
||||
}
|
||||
24
src/styles/flex.styl
Normal file
24
src/styles/flex.styl
Normal file
@ -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
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
121
src/styles/global.styl
Normal file
121
src/styles/global.styl
Normal file
@ -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
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
81
src/styles/home.styl
Normal file
81
src/styles/home.styl
Normal file
@ -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
|
||||
@ -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"
|
||||
@require "./flex.styl"
|
||||
@require "./home.styl"
|
||||
@require "./logos.styl"
|
||||
@require "./singular.styl"
|
||||
@ -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);
|
||||
}
|
||||
19
src/styles/logos.styl
Normal file
19
src/styles/logos.styl
Normal file
@ -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)
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
117
src/styles/singular.styl
Normal file
117
src/styles/singular.styl
Normal file
@ -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
|
||||
Loading…
Reference in New Issue
Block a user