add content and change project layout

This commit is contained in:
2022-05-23 17:05:30 +06:00
parent 824c7777a9
commit 7b0a2197fc
41 changed files with 747 additions and 9 deletions

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

View 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
// }

View 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

View File

@ -0,0 +1 @@
$size: 12pt