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

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

@ -8,17 +8,18 @@
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
display: inline-block li
padding: 5px 10px display: inline-block
color: #fff padding: 5px 10px
background: #ff57a2 color: #fff
border-radius: 99px background: #ff57a2
margin-right: 10px border-radius: 99px
margin-right: 10px

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

@ -1,49 +1,50 @@
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 font-family: Booster
color: #ff57a2
text-transform: uppercase
font-weight: 900
text-align: left
cursor: pointer
table th tr
font-family: Booster &.active td
color: #ff57a2 background: #ff57a2
text-transform: uppercase color: #fff
font-weight: 900
text-align: left
cursor: pointer
table tr.active td &:last-child td
background: #ff57a2 border-bottom: none
color: #fff
table tr.clickable:hover &.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
position: relative padding: 0 0 0 20px
padding-bottom: 60%
table .person-info .image-wrapper img .image-wrapper
position: absolute position: relative
top: 0 padding-bottom: 60%
left: 0
width: 100%
height: 100%
table .person-info .detail img
padding: 0 0 0 20px position: absolute
top: 0
table p left: 0
font-size: 16px width: 100%
margin: 0 height: 100%

42
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,21 +59,27 @@ a
.flex-col .flex-col
flex-direction: column flex-direction: column
ul a
display: block
text-decoration: none
line-height: 120%
color: #333
position: relative
text-align: right
overflow: hidden
font-size: 24px
padding: 15px 35px
text-transform: uppercase
ul a.active, ul a:hover ul
color: #14cc76 list-style: none
font-weight: 700 margin: 0
padding: 0
a
display: block
text-decoration: none
line-height: 120%
color: #333
position: relative
text-align: right
overflow: hidden
font-size: 24px
padding: 15px 35px
text-transform: uppercase
&.active, &:hover
color: #14cc76
font-weight: 700
.page-wrapper .page-wrapper
max-width: 1200px max-width: 1200px