mirror of
https://github.com/Smaug123/KaTeX
synced 2025-10-07 04:08:43 +00:00
index.html: replace font, make responsive (#1547)
* Replace Proxima Nova with Lato * Make main page responsive (mobile-friendly) * Make comparison image responsive
This commit is contained in:
ylemkimon
Erik Demaine
@@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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>
|
||||
<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">
|
||||
@@ -11,11 +12,9 @@
|
||||
<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">
|
||||
<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="static/index.css" type="text/css" rel="stylesheet">
|
||||
<script src="//use.typekit.net/ulc1wme.js"></script>
|
||||
<script>try{Typekit.load();}catch(e){}</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header"><div class="container">
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
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 {
|
||||
margin: 0 auto;
|
||||
margin: 0 auto;
|
||||
width: 800px;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.header, .footer {
|
||||
@@ -22,14 +27,14 @@ body {
|
||||
.cta a {
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
margin: 0 10px;
|
||||
padding: 8px 24px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 40px 0 0;
|
||||
padding: 40px 15px 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -46,7 +51,7 @@ body {
|
||||
}
|
||||
|
||||
.tagline em {
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header .cta a {
|
||||
@@ -64,18 +69,19 @@ body {
|
||||
margin: 50px 0 0;
|
||||
}
|
||||
|
||||
.demo,
|
||||
.demo-left,
|
||||
.demo-right {
|
||||
height: 260px;
|
||||
.demo {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.demo-left,
|
||||
.demo-right {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
padding: 20px 30px;
|
||||
width: 50%;
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-instructions {
|
||||
@@ -95,6 +101,8 @@ body {
|
||||
color: #fff;
|
||||
font: 14px Menlo, monospace;
|
||||
height: 160px;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
@@ -116,21 +124,22 @@ body {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
padding: 30px 0;
|
||||
padding: 30px 15px;
|
||||
}
|
||||
|
||||
.subtagline {
|
||||
color: #329894;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.features {
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
margin: 0 auto;
|
||||
width: 540px;
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
.features > li {
|
||||
@@ -167,7 +176,7 @@ body {
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
height: 340px;
|
||||
padding-top: 42%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -185,7 +194,7 @@ body {
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 30px 0;
|
||||
padding: 30px 15px;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
@@ -210,3 +219,20 @@ body {
|
||||
.errorMessage {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user