146 lines
2.6 KiB
CSS
146 lines
2.6 KiB
CSS
|
|
@import "forikolo-colors.css";
|
|
|
|
|
|
|
|
html, body {
|
|
height: 100 % ;
|
|
margin: 0;
|
|
font-family : system-ui, Roboto, Arial;
|
|
background: var(--bg);
|
|
color: var(--chalk)
|
|
}
|
|
.logo {
|
|
background-image: url(cropped-forikolo_logo_t-w.png);
|
|
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
min-height: 66px;
|
|
}
|
|
|
|
.container {
|
|
max-width : 1100px;
|
|
margin: 24px auto;
|
|
padding: 40px;
|
|
display: grid;
|
|
gap: 48px
|
|
}
|
|
.poster {
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.08)), #0b1220;
|
|
border-radius : 14px;
|
|
padding: 40px;
|
|
box-shadow : 0 8px 28px rgba(0, 0, 0, 0.6);
|
|
}
|
|
h1 {
|
|
font-size : 2.4rem;
|
|
margin: 0 0 16px;
|
|
color: var(--chalk)
|
|
}
|
|
.subtitle {
|
|
color: var(--muted);
|
|
margin-bottom : 28px;
|
|
font-size : 1.2rem
|
|
}
|
|
.row {
|
|
display: flex;
|
|
gap: 24px;
|
|
align-items : flex-start
|
|
}
|
|
.col{
|
|
flex : 1
|
|
}
|
|
.section {
|
|
padding: 18px 0;
|
|
border-top : 1px dashed rgba(255, 255, 255, 0.1)
|
|
}
|
|
.big {
|
|
font-weight : 700;
|
|
font-size : 1.5rem;
|
|
margin-bottom : 8px
|
|
}
|
|
.kbd {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
padding: 6px 10px;
|
|
border-radius : 8px;
|
|
font-weight : 600;
|
|
font-size : 1.1rem
|
|
}
|
|
.diagram {
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.02));
|
|
border-radius : 10px;
|
|
padding: 20px;
|
|
margin-top : 12px;
|
|
text-align : center
|
|
}
|
|
.example {
|
|
margin-top : 10px;
|
|
color: var(--muted);
|
|
font-size : 1.1rem
|
|
}
|
|
.example::before {
|
|
content: "📚";
|
|
margin-left: -1em;
|
|
}
|
|
.task {
|
|
margin-top : 9px;
|
|
color: var(--accent);
|
|
font-size : 1.1rem
|
|
}
|
|
.task::before {
|
|
content: "📝";
|
|
margin-left: -1em;
|
|
display: inline-block;
|
|
}
|
|
table {
|
|
width: 100 % ;
|
|
border-collapse : collapse;
|
|
margin-top : 12px;
|
|
font-size : 1.1rem
|
|
}
|
|
td, th {
|
|
padding: 10px 12px;
|
|
border-bottom : 1px dashed rgba(255, 255, 255, 0.1);
|
|
text-align : left
|
|
}
|
|
th {
|
|
color: var(--accent);
|
|
font-weight : 700
|
|
}
|
|
.tip {
|
|
background: linear-gradient(90deg, rgba(255, 209, 102, 0.1), rgba(255, 209, 102, 0.06));
|
|
padding: 16px;
|
|
border-radius : 10px;
|
|
color: var(--chalk);
|
|
margin-top : 12px;
|
|
font-size : 1.1rem
|
|
}
|
|
.svg {
|
|
width: 100 % ;
|
|
height: 280px
|
|
}
|
|
.small-svg{
|
|
height : 160px
|
|
}
|
|
g {
|
|
stroke: #f8f8f4;
|
|
}
|
|
|
|
@media print {
|
|
body {
|
|
background: white;
|
|
color: black
|
|
}
|
|
.poster {
|
|
background: white;
|
|
color: black;
|
|
box-shadow : none
|
|
}
|
|
.tip {
|
|
background: #fff3cc
|
|
}
|
|
}
|
|
@media(max-width : 900px) {
|
|
.row {
|
|
flex-direction : column
|
|
}
|
|
}
|