fontpairs.css
Changed around line 1
+ /* Font Imports */
+ @import url("https://fonts.googleapis.com/css2?family=Georgia&family=Avenir:wght@300;700&family=Roboto:wght@700&family=Poppins:wght@300;600&family=Futura&family=DIN+Next:wght@500&family=Helvetica&family=Libre+Baskerville&family=Playfair+Display:ital@0;1&display=swap");
+
index.scroll
Changed around line 3: fontpairs.css
- compose demo
{rank} A title
A subtitle
And then some text. This is {name}
+ compose demo
{rank} A title
A subtitle
And then some text. This is {name}.
index.scroll
Changed around line 3: fontpairs.css
- compose demo
{rank} A title
A subtitle
And then some text
+ compose demo
{rank} A title
A subtitle
And then some text. This is {name}
index.scroll
Changed around line 3: fontpairs.css
- compose demo
{rank} A title
A subtitle
And then some text
+ compose demo
{rank} A title
A subtitle
And then some text
+ name
index.scroll
Changed around line 3: fontpairs.css
- compose demo
A title
A subtitle
And then some text
+ compose demo
{rank} A title
A subtitle
And then some text
index.scroll
Changed around line 2: buildHtml
- compose demo
A title
A subtitle
And then some text
- printColumn demo
+ rank
+ compose demo
A title
A subtitle
And then some text
+ printColumn demo
fontpairs.css
Changed around line 1
- /* Font Imports */
- @import url("https://fonts.googleapis.com/css2?family=Georgia&family=Avenir:wght@300;700&family=Roboto:wght@700&family=Poppins:wght@300;600&family=Futura&family=DIN+Next:wght@500&family=Helvetica&family=Libre+Baskerville&family=Playfair+Display:ital@0;1&display=swap");
-
index.scroll
Changed around line 1
- replace DEMO
- # A title
- ### A subtitle
- And some text
index.scroll
Changed around line 5: replace DEMO
-
- DEMO
-
-
-
- DEMO
-
+ table
+ compose demo
A title
A subtitle
And then some text
+ printColumn demo
+ data
+ georgia-avenir
+ oswald-roboto
+ poppins-style
+ monoton-futura
+ din-avenir
+ raleway-helvetica
+ script-baskerville
+ playfair
+ script-playfair
+ clarendon-lulo
index.scroll
Changed around line 1
+ replace DEMO
+ # A title
+ ### A subtitle
+ And some text
+ DEMO
+
- # A title
-
- ### A subtitle
-
- And some text
-
+
+ DEMO
index.scroll
Changed around line 1
- theme roboto
+ fontpairs.css
- Hello World my name is
+
+
+ # A title
+
+ ### A subtitle
+
+ And some text
+
+
fontpairs.css
Changed around line 1
+ /* Font Imports */
+ @import url("https://fonts.googleapis.com/css2?family=Georgia&family=Avenir:wght@300;700&family=Roboto:wght@700&family=Poppins:wght@300;600&family=Futura&family=DIN+Next:wght@500&family=Helvetica&family=Libre+Baskerville&family=Playfair+Display:ital@0;1&display=swap");
+
+ /* Base Typography Styles */
+ h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ line-height: 1.2;
+ color: #333;
+ }
+
+ h2 {
+ font-size: 1rem;
+ margin-bottom: 1rem;
+ color: #333;
+ }
+
+ p {
+ font-size: 0.9rem;
+ line-height: 1.6;
+ color: #666;
+ max-width: 600px;
+ margin-bottom: 1.5rem;
+ }
+
+ /* Georgia/Avenir Section */
+ .georgia-avenir h1 {
+ font-family: "Georgia", serif;
+ font-weight: normal;
+ }
+
+ .georgia-avenir h2,
+ .georgia-avenir p {
+ font-family: "Avenir Light", "Avenir", sans-serif;
+ font-weight: 300;
+ }
+
+ /* Oswald/Roboto Section */
+ .oswald-roboto h1 {
+ font-family: "Oswald Medium", sans-serif;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+ }
+
+ .oswald-roboto h2,
+ .oswald-roboto p {
+ font-family: "Roboto Bold", "Roboto", sans-serif;
+ font-weight: 700;
+ }
+
+ /* Poppins Section */
+ .poppins-style h1 {
+ font-family: "Poppins Semi Bold", "Poppins", sans-serif;
+ font-weight: 600;
+ font-style: italic;
+ }
+
+ .poppins-style h2,
+ .poppins-style p {
+ font-family: "Poppins Extra Light", "Poppins", sans-serif;
+ font-weight: 200;
+ }
+
+ /* Monoton/Futura Section */
+ .monoton-futura h1 {
+ font-family: "Monoton", cursive;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
+
+ .monoton-futura h2 {
+ font-family: "LULO CLEAN", sans-serif;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ font-size: 0.8rem;
+ }
+
+ .monoton-futura p {
+ font-family: "Futura", sans-serif;
+ }
+
+ /* DIN/Avenir Section */
+ .din-avenir h1 {
+ font-family: "DIN Next Grotesk", "DIN Next", sans-serif;
+ font-weight: 500;
+ }
+
+ .din-avenir h2,
+ .din-avenir p {
+ font-family: "Avenir Light", "Avenir", sans-serif;
+ font-weight: 300;
+ }
+
+ /* Raleway/Helvetica Section */
+ .raleway-helvetica h1 {
+ font-family: "Raleway", sans-serif;
+ font-weight: normal;
+ }
+
+ .raleway-helvetica h2 {
+ font-family: "Helvetica", sans-serif;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
+
+ /* Script/Baskerville Section */
+ .script-baskerville h1 {
+ font-family: "Bellada", cursive;
+ font-size: 3rem;
+ }
+
+ .script-baskerville h2,
+ .script-baskerville p {
+ font-family: "Libre Baskerville", serif;
+ }
+
+ /* Playfair Section */
+ .playfair h1 {
+ font-family: "Playfair Display", serif;
+ font-weight: normal;
+ }
+
+ .playfair h2 {
+ font-family: "Snell Roundhand", cursive;
+ font-style: italic;
+ font-size: 1.2rem;
+ }
+
+ /* Script/Playfair Section */
+ .script-playfair h1 {
+ font-family: "Savina", cursive;
+ font-size: 3rem;
+ }
+
+ .script-playfair h2 {
+ font-family: "Playfair Display", serif;
+ }
+
+ /* Clarendon/Lulo Section */
+ .clarendon-lulo h1 {
+ font-family: "Clarendon LT", serif;
+ font-weight: normal;
+ }
+
+ .clarendon-lulo h2 {
+ font-family: "LULO CLEAN", sans-serif;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ font-size: 0.8rem;
+ }
fontpairs.css
.gitignore
Changed around line 1
+ .DS_Store
+ *.html
+ *.txt
+ *.xml
+ *.css
+ *.js
+ *.csv
+ requests.scroll
index.scroll
Changed around line 1
+ buildHtml
+ theme roboto
+
+ Hello World my name is