evert/angular-test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

i forgot that you could make stylus look good, oops

Browse Source
This commit is contained in:
Evert Prants 2020-11-16 22:34:06 +02:00
parent 09082e6a6c
commit ccdeac5f13
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
3 changed files with 77 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/article/article.component.styl
View File

@ -8,14 +8,15 @@
height: auto height: auto
width: 100% width: 100%
.image-wrapper img img
position: absolute position: absolute
top: 0 top: 0
left: 0 left: 0
width: 100% width: 100%
height: 100% height: 100%
.tags li .tags
li
display: inline-block display: inline-block
padding: 5px 10px padding: 5px 10px
color: #fff color: #fff

37
src/app/list/list.component.styl
View File

@ -1,12 +1,13 @@
table
p
font-size: 16px
margin: 0
table td, table th td, th
padding: 10px padding: 10px
border-bottom: 1px solid #ccc border-bottom: 1px solid #ccc
table tr:last-child td th
border-bottom: none
table th
font-family: Booster font-family: Booster
color: #ff57a2 color: #ff57a2
text-transform: uppercase text-transform: uppercase
@ -14,36 +15,36 @@ table th
text-align: left text-align: left
cursor: pointer cursor: pointer
table tr.active td tr
&.active td
background: #ff57a2 background: #ff57a2
color: #fff color: #fff
table tr.clickable:hover &:last-child td
border-bottom: none
&.clickable:hover
color: #ff57a2 color: #ff57a2
table .person-info .person-info
display: flex display: flex
align-items: flex-start align-items: flex-start
table .person-info .image .image
height: auto height: auto
width: 25% width: 25%
flex-shrink: 0 flex-shrink: 0
table .person-info .image-wrapper .detail
padding: 0 0 0 20px
.image-wrapper
position: relative position: relative
padding-bottom: 60% padding-bottom: 60%
table .person-info .image-wrapper img img
position: absolute position: absolute
top: 0 top: 0
left: 0 left: 0
width: 100% width: 100%
height: 100% height: 100%
table .person-info .detail
padding: 0 0 0 20px
table p
font-size: 16px
margin: 0

18
src/styles.styl
View File

@ -1,5 +1,8 @@
@import('/assets/stylus/_fonts.styl') @import('/assets/stylus/_fonts.styl')
html
overflow-y: scroll
html, body html, body
width: 100% width: 100%
height: 100% height: 100%
@ -41,11 +44,6 @@ h2
color: #14cc76 color: #14cc76
text-align: center text-align: center
ul
list-style: none
margin: 0
padding: 0
a a
outline-style: none outline-style: none
@ -61,7 +59,13 @@ a
.flex-col .flex-col
flex-direction: column flex-direction: column
ul a
ul
list-style: none
margin: 0
padding: 0
a
display: block display: block
text-decoration: none text-decoration: none
line-height: 120% line-height: 120%
@ -73,7 +77,7 @@ ul a
padding: 15px 35px padding: 15px 35px
text-transform: uppercase text-transform: uppercase
ul a.active, ul a:hover &.active, &:hover
color: #14cc76 color: #14cc76
font-weight: 700 font-weight: 700