add content and change project layout
This commit is contained in:
50
assets/styles/content.sass
Normal file
50
assets/styles/content.sass
Normal file
@ -0,0 +1,50 @@
|
||||
@import 'variables'
|
||||
|
||||
*
|
||||
scroll-behavior: smooth
|
||||
|
||||
a
|
||||
cursor: pointer
|
||||
|
||||
@media print
|
||||
a.print:after
|
||||
content: " (" attr(href) ") "
|
||||
font-size: 50%
|
||||
|
||||
.synopsis
|
||||
.desc > p
|
||||
// make command line wraps keep indent
|
||||
margin: 0
|
||||
margin-left: 4em
|
||||
text-indent: -4em
|
||||
@media (max-width: 600px)
|
||||
margin-left: 2em
|
||||
text-indent: -2em
|
||||
|
||||
.options, .history
|
||||
.desc > ul > li
|
||||
list-style: none
|
||||
.desc li > .opt_desc
|
||||
margin-left: 2em
|
||||
@media (max-width: 600px)
|
||||
margin-left: 1em
|
||||
p
|
||||
margin-top: 0
|
||||
|
||||
.history
|
||||
// .job
|
||||
// font-weight: bold
|
||||
// .org
|
||||
// font-style: italic
|
||||
.period
|
||||
float: right
|
||||
font-style: italic
|
||||
|
||||
#phone-hint
|
||||
visibility: hidden
|
||||
opacity: 0
|
||||
#phone:hover
|
||||
#phone-hint
|
||||
opacity: inherit
|
||||
visibility: inherit
|
||||
transition: all 1s ease-out
|
10
assets/styles/index.sass
Normal file
10
assets/styles/index.sass
Normal file
@ -0,0 +1,10 @@
|
||||
@import 'variables'
|
||||
@import 'npm:@csstools/normalize.css/normalize.css'
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
|
||||
@import 'structure'
|
||||
@import 'content'
|
||||
@import 'typography'
|
||||
@import 'scheme'
|
89
assets/styles/scheme.sass
Normal file
89
assets/styles/scheme.sass
Normal file
@ -0,0 +1,89 @@
|
||||
|
||||
$bg: #444444
|
||||
$mg: #222222
|
||||
$fg: #C8C8C8
|
||||
|
||||
$dim: #A4A4A4
|
||||
$bright: #D8D8D8
|
||||
$dimmer: #888888
|
||||
$brighter: #FBFBFB
|
||||
|
||||
$accent1: #98e2ff
|
||||
$accent2: #ffe655
|
||||
$accent3: #82cdff
|
||||
$accent4: #69f07b
|
||||
|
||||
body
|
||||
background-color: $bg
|
||||
color: $fg
|
||||
.container
|
||||
background-color: $bg
|
||||
.content
|
||||
background-color: $mg
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color: $brighter
|
||||
.main
|
||||
.target:target
|
||||
animation: 2s attention ease-out
|
||||
|
||||
.period
|
||||
color: $dimmer
|
||||
header, footer
|
||||
color: $dimmer
|
||||
|
||||
.dark
|
||||
color: $bg
|
||||
.dim
|
||||
color: $dim
|
||||
.dimmer
|
||||
color: $dimmer
|
||||
.bright
|
||||
color: $bright
|
||||
.brighter
|
||||
color: $brighter
|
||||
|
||||
.main
|
||||
b
|
||||
color: $accent4
|
||||
em
|
||||
color: $accent1
|
||||
h1
|
||||
color: $fg
|
||||
.description, .options
|
||||
em
|
||||
color: $accent1
|
||||
.options b
|
||||
color: $accent4
|
||||
.synopsis
|
||||
.desc > p > b
|
||||
color: $accent4
|
||||
.history
|
||||
.job
|
||||
color: $accent4
|
||||
|
||||
.target a, a.target
|
||||
text-decoration: none
|
||||
border: none
|
||||
color: inherit
|
||||
&:visited
|
||||
color: inherit
|
||||
&:hover
|
||||
color: inherit
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
border-bottom: 1px dotted grey
|
||||
color: inherit
|
||||
&:visited
|
||||
color: inherit
|
||||
&:hover, &:focus
|
||||
color: $accent2
|
||||
|
||||
#phone-hint
|
||||
color: $dimmer
|
||||
|
||||
@keyframes attention
|
||||
70%
|
||||
color: $accent2
|
||||
100%
|
||||
color: auto
|
97
assets/styles/structure.sass
Normal file
97
assets/styles/structure.sass
Normal file
@ -0,0 +1,97 @@
|
||||
@import 'variables'
|
||||
|
||||
body
|
||||
padding: 0
|
||||
margin: 0
|
||||
line-height: 1.5
|
||||
|
||||
.container
|
||||
max-width: 1200px
|
||||
margin: 0 auto
|
||||
padding: 20px
|
||||
min-height: 100vh
|
||||
|
||||
.content
|
||||
// text-align: justify
|
||||
max-width: 1000px
|
||||
margin: 0 auto
|
||||
padding: 20px 40px
|
||||
border-radius: 3px
|
||||
@media (max-width: 600px)
|
||||
padding: 20px
|
||||
|
||||
.main
|
||||
section
|
||||
margin-bottom: 1.5*$size
|
||||
h1
|
||||
padding-left: 0
|
||||
h2
|
||||
padding-left: 2em
|
||||
@media (max-width: 600px)
|
||||
padding-left: 1em
|
||||
.desc
|
||||
padding-left: 4em
|
||||
@media (max-width: 600px)
|
||||
padding-left: 2em
|
||||
ol, ul
|
||||
padding-left: 2em
|
||||
@media (max-width: 600px)
|
||||
padding-left: 1em
|
||||
li
|
||||
// list-style-position: inside
|
||||
list-style-type: square
|
||||
.history
|
||||
.desc > ul > li
|
||||
margin-bottom: 1.5*$size
|
||||
|
||||
header
|
||||
margin-bottom: 2*$size
|
||||
footer
|
||||
margin-top: 2*$size
|
||||
|
||||
header table, footer table
|
||||
width: 100%
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
.left, .right
|
||||
width: 30%
|
||||
.center
|
||||
width: 40%
|
||||
td
|
||||
word-break: break-word
|
||||
|
||||
header
|
||||
.left, .right
|
||||
text-transform: uppercase
|
||||
footer
|
||||
.right
|
||||
text-transform: uppercase
|
||||
|
||||
.left
|
||||
text-align: left
|
||||
.center
|
||||
text-align: center
|
||||
.right
|
||||
text-align: right
|
||||
|
||||
// .box {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// width: 100%;
|
||||
// heigh: 100%;
|
||||
// padding: 10px;
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
//
|
||||
// .box div {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// padding: 10px;
|
||||
// margin: 0;
|
||||
// border: 0;
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
// .box p {
|
||||
// margin: 0
|
||||
// }
|
24
assets/styles/typography.sass
Normal file
24
assets/styles/typography.sass
Normal file
@ -0,0 +1,24 @@
|
||||
@import 'variables'
|
||||
|
||||
$font: 'IBM Plex Mono'
|
||||
$font_stack: $font, 'SF Mono', 'Liberation Mono', 'Consolas', monospace
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap')
|
||||
*
|
||||
font-family: $font_stack
|
||||
|
||||
body
|
||||
font-size: $size
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
font-size: $size + 2
|
||||
text-transform: uppercase
|
||||
|
||||
.header, .footer
|
||||
// font-size: $size - 1
|
||||
text-transform: uppercase
|
||||
.center
|
||||
text-transform: capitalize
|
||||
.footer
|
||||
.left
|
||||
text-transform: none
|
1
assets/styles/variables.sass
Normal file
1
assets/styles/variables.sass
Normal file
@ -0,0 +1 @@
|
||||
$size: 12pt
|
Reference in New Issue
Block a user