cupcakearmy/liquet
1
0
Fork 0
mirror of https://github.com/cupcakearmy/liquet.git synced 2024-12-22 16:16:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

moved everything to stylus

Browse Source
This commit is contained in:
cupcakearmy 2020-01-03 01:55:10 +01:00
parent c57c14b3c8
commit 6b3b93770f
11 changed files with 367 additions and 438 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/styles/flex.css
View File

@ -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
View 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

146
src/styles/global.css
View File

@ -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
View 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

93
src/styles/home.css
View File

@ -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
View 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

10
src/styles/index.styl
View File

@ -1,6 +1,6 @@
@require "./global.css" @require "./global.styl"
@require "./fonts.css" @require "./fonts.css"
@require "./flex.css" @require "./flex.styl"
@require "./home.css" @require "./home.styl"
@require "./logos.css" @require "./logos.styl"
@require "./singular.css" @require "./singular.styl"

23
src/styles/logos.css
View File

@ -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
View 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)

139
src/styles/singular.css
View File

@ -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
View 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