patrick/KaTeX
1
0
Fork 0
mirror of https://github.com/Smaug123/KaTeX synced 2025-10-12 06:28:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

index.html: replace font, make responsive (#1547)

Browse Source 
* Replace Proxima Nova with Lato

* Make main page responsive (mobile-friendly)

* Make comparison image responsive
This commit is contained in:
ylemkimon
2018-08-08 12:26:33 +09:00
committed by Erik Demaine
parent 02639b424e
commit 48e6d9d431
2 changed files with 45 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
website/pages/index.html
View File

@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KaTeX – The fastest math typesetting library for the web</title> <title>KaTeX – The fastest math typesetting library for the web</title>
<meta name="Description" content="KaTeX – The fastest math typesetting library for the web"> <meta name="Description" content="KaTeX – The fastest math typesetting library for the web">
<meta property="og:title" content="KaTeX – The fastest math typesetting library for the web"> <meta property="og:title" content="KaTeX – The fastest math typesetting library for the web">
@@ -11,11 +12,9 @@
<meta property="og:description" content="Simple API, no dependencies – yet super-fast on all major browsers."> <meta property="og:description" content="Simple API, no dependencies – yet super-fast on all major browsers.">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.css" integrity="sha256-7GAtDQ79wTEOjhBKf70uBQG7A5yyb+8rigu07atXWDY=" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,700i" rel="stylesheet">
<link href="https://use.fontawesome.com/efe646278d.css" type="text/css" rel="stylesheet"> <link href="https://use.fontawesome.com/efe646278d.css" type="text/css" rel="stylesheet">
<link href="static/index.css" type="text/css" rel="stylesheet"> <link href="static/index.css" type="text/css" rel="stylesheet">
<script src="//use.typekit.net/ulc1wme.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</head> </head>
<body> <body>
<div class="header"><div class="container"> <div class="header"><div class="container">

60
website/static/static/index.css
View File

@@ -1,11 +1,16 @@
body { body {
font: 16px/1.4 "proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif; font: 16px/1.4 "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
margin: 0;
}
b {
font-weight: bolder;
} }
.container { .container {
margin: 0 auto; margin: 0 auto;
margin: 0 auto; width: 100%;
width: 800px; max-width: 800px;
} }
.header, .footer { .header, .footer {
@@ -22,14 +27,14 @@ body {
.cta a { .cta a {
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
font-weight: 600; font-weight: 700;
margin: 0 10px; margin: 0 10px;
padding: 8px 24px; padding: 8px 24px;
text-decoration: none; text-decoration: none;
} }
.header { .header {
padding: 40px 0 0; padding: 40px 15px 0;
} }
.logo { .logo {
@@ -46,7 +51,7 @@ body {
} }
.tagline em { .tagline em {
font-weight: 600; font-weight: 700;
} }
.header .cta a { .header .cta a {
@@ -64,18 +69,19 @@ body {
margin: 50px 0 0; margin: 50px 0 0;
} }
.demo, .demo {
.demo-left, display: -ms-flexbox;
.demo-right { display: flex;
height: 260px; -ms-flex-wrap: wrap;
flex-wrap: wrap;
} }
.demo-left, .demo-left,
.demo-right { .demo-right {
box-sizing: border-box; box-sizing: border-box;
float: left;
padding: 20px 30px; padding: 20px 30px;
width: 50%; height: 260px;
width: 100%;
} }
.demo-instructions { .demo-instructions {
@@ -95,6 +101,8 @@ body {
color: #fff; color: #fff;
font: 14px Menlo, monospace; font: 14px Menlo, monospace;
height: 160px; height: 160px;
margin: 0;
overflow: auto;
padding: 10px; padding: 10px;
resize: none; resize: none;
width: 100%; width: 100%;
@@ -116,21 +124,22 @@ body {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
min-height: 400px; min-height: 400px;
position: relative; position: relative;
padding: 30px 0; padding: 30px 15px;
} }
.subtagline { .subtagline {
color: #329894; color: #329894;
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 700;
padding: 20px 0; padding: 20px 0;
text-align: center; text-align: center;
} }
.features { .features {
font-size: 20px; font-size: 20px;
font-weight: 300;
margin: 0 auto; margin: 0 auto;
width: 540px; max-width: 540px;
} }
.features > li { .features > li {
@@ -167,7 +176,7 @@ body {
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
height: 340px; padding-top: 42%;
width: 100%; width: 100%;
} }
@@ -185,7 +194,7 @@ body {
} }
.footer { .footer {
padding: 30px 0; padding: 30px 15px;
font-size: 21px; font-size: 21px;
} }
@@ -210,3 +219,20 @@ body {
.errorMessage { .errorMessage {
color: red; color: red;
} }
@media only screen and (min-width: 736px) {
.demo-left,
.demo-right {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
@media only screen and (max-width: 735px) {
.cta a {
display: block;
margin-bottom: 10px;
}
}