Skip to content

Commit 059cd7f

Browse files
pusewiczpusewicz
committed
Redesign Documentation
1 parent cbbc9e9 commit 059cd7f

4 files changed

Lines changed: 381 additions & 28 deletions

File tree

‎assets/css/redesign.css‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -794,6 +794,272 @@ ul {
794794
}
795795

796796

797+
/* ------------------------------------------------------------
798+
Page Header — Warm variant (Documentation)
799+
------------------------------------------------------------ */
800+
.page-header--warm {
801+
background: var(--color-bg-warm);
802+
border-bottom: 1px solid var(--color-border);
803+
}
804+
805+
.page-header__inner--split {
806+
display: flex;
807+
align-items: flex-end;
808+
justify-content: space-between;
809+
gap: 40px;
810+
}
811+
812+
.page-header__meta {
813+
display: flex;
814+
align-items: center;
815+
gap: 8px;
816+
flex-shrink: 0;
817+
padding-bottom: 4px;
818+
}
819+
820+
.page-header__meta-label {
821+
font-size: 14px;
822+
color: var(--color-muted);
823+
line-height: 18px;
824+
}
825+
826+
.page-header__meta-version {
827+
font-family: var(--font-heading);
828+
font-size: 14px;
829+
font-weight: 600;
830+
color: var(--color-black);
831+
line-height: 18px;
832+
}
833+
834+
/* ------------------------------------------------------------
835+
Documentation — Content Grid
836+
------------------------------------------------------------ */
837+
.docs-grid {
838+
padding: 80px var(--container-padding);
839+
}
840+
841+
.docs-grid__inner {
842+
max-width: var(--container-max-width);
843+
margin: 0 auto;
844+
display: grid;
845+
grid-template-columns: 1fr 1fr;
846+
gap: 80px;
847+
}
848+
849+
/* Articles column */
850+
.docs-articles {
851+
display: flex;
852+
flex-direction: column;
853+
gap: 48px;
854+
}
855+
856+
/* Source note */
857+
.docs-source-note {
858+
padding: 28px 32px;
859+
background: var(--color-bg-warm);
860+
border-left: 3px solid var(--color-border);
861+
display: flex;
862+
flex-direction: column;
863+
gap: 14px;
864+
}
865+
866+
.docs-source-note__text {
867+
font-size: 15px;
868+
line-height: 1.65;
869+
color: var(--color-muted);
870+
}
871+
872+
.docs-badge {
873+
display: inline-block;
874+
padding: 1px 6px;
875+
background: var(--color-white);
876+
font-family: var(--font-heading);
877+
font-size: 14px;
878+
font-weight: 600;
879+
color: var(--color-black);
880+
line-height: 26px;
881+
}
882+
883+
.docs-source-note__link {
884+
display: flex;
885+
align-items: center;
886+
gap: 6px;
887+
font-size: 13px;
888+
font-weight: 500;
889+
color: var(--color-red);
890+
line-height: 16px;
891+
transition: opacity 0.15s ease;
892+
}
893+
894+
.docs-source-note__link:hover {
895+
opacity: 0.75;
896+
}
897+
898+
.docs-source-note__dash {
899+
width: 16px;
900+
height: 1px;
901+
background: var(--color-red);
902+
flex-shrink: 0;
903+
}
904+
905+
/* Section heading pattern */
906+
.docs-section {
907+
display: flex;
908+
flex-direction: column;
909+
gap: 24px;
910+
}
911+
912+
.docs-section__header {
913+
display: flex;
914+
align-items: center;
915+
gap: 12px;
916+
padding-bottom: 20px;
917+
border-bottom: 1px solid var(--color-border);
918+
}
919+
920+
.docs-section__bar {
921+
width: 20px;
922+
height: 2px;
923+
background: var(--color-red);
924+
flex-shrink: 0;
925+
}
926+
927+
.docs-section__heading {
928+
font-family: var(--font-heading);
929+
font-size: 22px;
930+
font-weight: 700;
931+
letter-spacing: -0.01em;
932+
color: var(--color-black);
933+
line-height: 28px;
934+
}
935+
936+
/* Article row */
937+
.docs-article-row {
938+
display: flex;
939+
align-items: center;
940+
justify-content: space-between;
941+
padding: 20px 24px;
942+
border: 1px solid var(--color-border);
943+
gap: 32px;
944+
transition: background 0.15s ease;
945+
}
946+
947+
.docs-article-row:hover {
948+
background: var(--color-bg-warm);
949+
}
950+
951+
.docs-article-row__info {
952+
display: flex;
953+
flex-direction: column;
954+
gap: 6px;
955+
}
956+
957+
.docs-article-row__title {
958+
font-family: var(--font-heading);
959+
font-size: 16px;
960+
font-weight: 600;
961+
letter-spacing: -0.01em;
962+
color: var(--color-black);
963+
line-height: 20px;
964+
}
965+
966+
.docs-article-row__desc {
967+
font-size: 13px;
968+
color: var(--color-muted);
969+
line-height: 16px;
970+
}
971+
972+
.docs-article-row__link {
973+
font-size: 13px;
974+
font-weight: 500;
975+
color: var(--color-red);
976+
line-height: 16px;
977+
flex-shrink: 0;
978+
white-space: nowrap;
979+
}
980+
981+
/* Components column */
982+
.docs-components {
983+
display: flex;
984+
flex-direction: column;
985+
gap: 24px;
986+
}
987+
988+
/* Component card */
989+
.docs-component-card {
990+
display: flex;
991+
align-items: flex-start;
992+
justify-content: space-between;
993+
padding: 28px 32px;
994+
gap: 24px;
995+
transition: opacity 0.15s ease;
996+
}
997+
998+
.docs-component-card:hover {
999+
opacity: 0.88;
1000+
}
1001+
1002+
.docs-component-card--warm {
1003+
background: var(--color-bg-warm);
1004+
}
1005+
1006+
.docs-component-card--bordered {
1007+
border: 1px solid var(--color-border);
1008+
}
1009+
1010+
.docs-component-card__info {
1011+
display: flex;
1012+
flex-direction: column;
1013+
gap: 8px;
1014+
}
1015+
1016+
.docs-component-card__title {
1017+
font-family: var(--font-heading);
1018+
font-size: 18px;
1019+
font-weight: 700;
1020+
letter-spacing: -0.01em;
1021+
color: var(--color-black);
1022+
line-height: 22px;
1023+
}
1024+
1025+
.docs-component-card__desc {
1026+
font-size: 14px;
1027+
color: var(--color-muted);
1028+
line-height: 22px;
1029+
}
1030+
1031+
.docs-component-card__tags {
1032+
display: flex;
1033+
flex-wrap: wrap;
1034+
gap: 6px;
1035+
margin-top: 8px;
1036+
}
1037+
1038+
.docs-component-tag {
1039+
display: inline-block;
1040+
padding: 3px 8px;
1041+
background: var(--color-white);
1042+
font-family: var(--font-heading);
1043+
font-size: 13px;
1044+
font-weight: 600;
1045+
color: var(--color-red);
1046+
line-height: 16px;
1047+
}
1048+
1049+
.docs-component-tag--muted {
1050+
color: var(--color-muted);
1051+
}
1052+
1053+
.docs-component-card__link {
1054+
font-size: 13px;
1055+
font-weight: 500;
1056+
color: var(--color-red);
1057+
line-height: 16px;
1058+
flex-shrink: 0;
1059+
margin-top: 4px;
1060+
white-space: nowrap;
1061+
}
1062+
7971063
/* ------------------------------------------------------------
7981064
Responsive — ≤1024px
7991065
------------------------------------------------------------ */
@@ -818,6 +1084,14 @@ ul {
8181084
.release-card__version {
8191085
font-size: 40px;
8201086
}
1087+
1088+
.docs-grid {
1089+
padding: 64px var(--container-padding);
1090+
}
1091+
1092+
.docs-grid__inner {
1093+
gap: 48px;
1094+
}
8211095
}
8221096

8231097
/* ------------------------------------------------------------
@@ -919,6 +1193,25 @@ ul {
9191193
.release-row__version {
9201194
width: 100px;
9211195
}
1196+
1197+
.page-header__inner--split {
1198+
flex-direction: column;
1199+
align-items: flex-start;
1200+
gap: 24px;
1201+
}
1202+
1203+
.page-header__meta {
1204+
padding-bottom: 0;
1205+
}
1206+
1207+
.docs-grid__inner {
1208+
grid-template-columns: 1fr;
1209+
gap: 48px;
1210+
}
1211+
1212+
.docs-grid {
1213+
padding: 48px var(--container-padding);
1214+
}
9221215
}
9231216

9241217
/* ------------------------------------------------------------

‎docs/articles/executing-ruby-code-with-mruby.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
layout: post
33
title: Executing Ruby code with mruby
4+
description: "REPL, .rb files, C embedding, bytecode \u2014 four execution methods compared"
45
categories: articles
56
---
67

0 commit comments

Comments
 (0)