Procházet zdrojové kódy

Fix various website CSS issues. Re-add images

JC Brand před 6 roky
rodič
revize
a116a1ec8f

+ 1 - 4
Makefile

@@ -129,7 +129,7 @@ dev: stamp-npm
 ## Builds
 
 .PHONY: css
-css: sass/*.scss dist/converse.css dist/converse.min.css dist/website.css dist/website.min.css dist/font-awesome.css
+css: sass/*.scss dist/converse.css dist/converse.min.css dist/website.css dist/website.min.css
 
 dist/website.css:: stamp-npm sass
 	$(SASS) --source-map true --include-path $(BOURBON) --include-path $(BOOTSTRAP) sass/website.scss $@
@@ -137,9 +137,6 @@ dist/website.css:: stamp-npm sass
 dist/website.min.css:: stamp-npm dist/website.css
 	$(CLEANCSS) dist/website.css > $@
 
-dist/font-awesome.css:: stamp-npm sass
-	$(SASS) --source-map true --include-path $(BOURBON) --include-path $(BOOTSTRAP) sass/font-awesome.scss $@
-
 dist/converse.css:: stamp-npm webpack.config.js sass
 	npm run converse.css
 

+ 1 - 1
demo/anonymous.html

@@ -19,7 +19,7 @@
     <![endif]>
 </head>
 
-<body>
+<body id="page-top" data-spy="scroll" class="converse-website">
 <section class="section-wrapper">
 	<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
 		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">

+ 1 - 2
demo/embedded.html

@@ -9,7 +9,6 @@
     <meta name="author" content="JC Brand" />
     <meta name="keywords" content="xmpp chat webchat converse.js" />
     <link rel="shortcut icon" type="image/ico" href="../images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/5.0.0/dist/font-awesome.min.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/5.0.0/dist/website.min.css" />
     <script type="text/javascript" src="/analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
@@ -24,7 +23,7 @@
     </style>
 </head>
 
-<body id="page-top" data-spy="scroll">
+<body id="page-top" data-spy="scroll" class="converse-website">
 <section class="section-wrapper">
     <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
         <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

+ 1 - 1
demo/index.html

@@ -20,7 +20,7 @@
     <![endif]>
 </head>
 
-<body id="page-top" data-spy="scroll">
+<body id="page-top" data-spy="scroll" class="converse-website">
 <section class="section-wrapper">
     <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
         <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

+ 26 - 0
images/bgbl.svg

@@ -0,0 +1,26 @@
+<!--
+	Tessellate 1.0 by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" zoomAndPan="disable">
+    <style type="text/css"><![CDATA[
+		line
+		{
+			stroke: rgba(255,255,255,0.1);
+			stroke-width: 0.85px;
+		}
+    ]]></style>
+	<line x1="-180" y1="0" x2="820" y2="1000" />
+	<line x1="-380" y1="0" x2="620" y2="1000" />
+	<line x1="-530" y1="0" x2="470" y2="1000" />
+	<line x1="-655" y1="0" x2="345" y2="1000" />
+	<line x1="-755" y1="0" x2="245" y2="1000" />
+	<line x1="-830" y1="0" x2="170" y2="1000" />
+	<line x1="-880" y1="0" x2="120" y2="1000" />
+	<line x1="-920" y1="0" x2="80" y2="1000" />
+	<line x1="-950" y1="0" x2="50" y2="1000" />
+	<line x1="-970" y1="0" x2="30" y2="1000" />
+	<line x1="-985" y1="0" x2="15" y2="1000" />
+	<line x1="-995" y1="0" x2="5" y2="1000" />
+</svg>

+ 26 - 0
images/bgtr.svg

@@ -0,0 +1,26 @@
+<!--
+	Tessellate 1.0 by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" zoomAndPan="disable">
+    <style type="text/css"><![CDATA[
+		line
+		{
+			stroke: rgba(255,255,255,0.1);
+			stroke-width: 0.85px;
+		}
+    ]]></style>
+	<line x1="180" y1="0" x2="1180" y2="1000" />
+	<line x1="380" y1="0" x2="1380" y2="1000" />
+	<line x1="530" y1="0" x2="1530" y2="1000" />
+	<line x1="655" y1="0" x2="1655" y2="1000" />
+	<line x1="755" y1="0" x2="1775" y2="1000" />
+	<line x1="830" y1="0" x2="1830" y2="1000" />
+	<line x1="880" y1="0" x2="1880" y2="1000" />
+	<line x1="920" y1="0" x2="1920" y2="1000" />
+	<line x1="950" y1="0" x2="1970" y2="1000" />
+	<line x1="970" y1="0" x2="1970" y2="1000" />
+	<line x1="985" y1="0" x2="1985" y2="1000" />
+	<line x1="995" y1="0" x2="1995" y2="1000" />
+</svg>

binární
images/header.jpg


binární
images/overlay.png


+ 1 - 2
index.html

@@ -11,7 +11,6 @@
 
     <!-- These files are NOT needed when using converse.js in your own project. -->
     <link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/5.0.0/dist/font-awesome.min.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/5.0.0/dist/website.min.css" />
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
     <script type="text/javascript" src="/src/website.js"></script>
@@ -25,7 +24,7 @@
     <![endif]>
 </head>
 
-<body id="page-top" data-spy="scroll">
+<body id="page-top" data-spy="scroll" class="converse-website">
 
 <section class="section-wrapper">
 	<nav class="navbar sticky-top navbar-expand-lg" role="navigation">

+ 0 - 1
mockup/chatbox.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Converse.js Mockups</title>
-    <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
 </head>
 

+ 0 - 1
mockup/chatroom.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chatroom Fullscreen</title>
-    <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
 </head>
 

+ 0 - 1
mockup/fullscreen-login.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Login Fullscreen</title>
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
 </head>
 

+ 0 - 1
mockup/overlayed-login.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Login Overlayed</title>
-    <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
 </head>
 

+ 0 - 1
mockup/overlayed.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Overlayed chats</title>
-    <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
 </head>
 

+ 23 - 22
sass/font-awesome.scss

@@ -2,38 +2,38 @@
   font-family: 'Baumans';
   font-style: normal;
   font-weight: 400;
-  src: local('Baumans Regular'), local('Baumans-Regular'), url('../webfonts/baumans.ttf') format('truetype');
+  src: local('Baumans Regular'), local('Baumans-Regular'), url('../dist/webfonts/baumans.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Muli';
   font-style: normal;
   font-weight: 400;
-  src: local('Muli Regular'), local('Muli-Regular'), url('../webfonts/muli.ttf') format('truetype');
+  src: local('Muli Regular'), local('Muli-Regular'), url('../dist/webfonts/muli.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'ConverseFontAwesomeBrands';
   font-style: normal;
   font-weight: normal;
-  src: url('../webfonts/fa-brands-400.eot');
-  src: url('../webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
-  url('../webfonts/fa-brands-400.woff2') format('woff2'),
-  url('../webfonts/fa-brands-400.woff') format('woff'),
-  url('../webfonts/fa-brands-400.ttf') format('truetype'),
-  url('../webfonts/fa-brands-400.svg#fontawesome') format('svg');
+  src: url('../dist/webfonts/fa-brands-400.eot');
+  src: url('../dist/webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
+  url('../dist/webfonts/fa-brands-400.woff2') format('woff2'),
+  url('../dist/webfonts/fa-brands-400.woff') format('woff'),
+  url('../dist/webfonts/fa-brands-400.ttf') format('truetype'),
+  url('../dist/webfonts/fa-brands-400.svg#fontawesome') format('svg');
 }
 
 @font-face {
   font-family: 'ConverseFontAwesomeRegular';
   font-style: normal;
   font-weight: 400;
-  src: url('../webfonts/fa-regular-400.eot');
-  src: url('../webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
-    url('../webfonts/fa-regular-400.woff2') format('woff2'),
-    url('../webfonts/fa-regular-400.woff') format('woff'),
-    url('../webfonts/fa-regular-400.ttf') format('truetype'),
-    url('../webfonts/fa-regular-400.svg#fontawesome') format('svg');
+  src: url('../dist/webfonts/fa-regular-400.eot');
+  src: url('../dist/webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
+    url('../dist/webfonts/fa-regular-400.woff2') format('woff2'),
+    url('../dist/webfonts/fa-regular-400.woff') format('woff'),
+    url('../dist/webfonts/fa-regular-400.ttf') format('truetype'),
+    url('../dist/webfonts/fa-regular-400.svg#fontawesome') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -42,14 +42,15 @@
   font-family: 'ConverseFontAwesomeSolid';
   font-style: normal;
   font-weight: 900;
-  src: url('../webfonts/fa-solid-900.eot');
-  src: url('../webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
-  url('../webfonts/fa-solid-900.svg#fontawesome') format('svg'),
-  url('../webfonts/fa-solid-900.woff2') format('woff2'),
-  url('../webfonts/fa-solid-900.woff') format('woff'),
-  url('../webfonts/fa-solid-900.ttf') format('truetype');
+  src: url('../dist/webfonts/fa-solid-900.eot');
+  src: url('../dist/webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
+  url('../dist/webfonts/fa-solid-900.svg#fontawesome') format('svg'),
+  url('../dist/webfonts/fa-solid-900.woff2') format('woff2'),
+  url('../dist/webfonts/fa-solid-900.woff') format('woff'),
+  url('../dist/webfonts/fa-solid-900.ttf') format('truetype');
 }
 
+
 @import "@fortawesome/fontawesome-free/scss/variables";
 @import "@fortawesome/fontawesome-free/scss/mixins";
 @import "@fortawesome/fontawesome-free/scss/core";
@@ -63,7 +64,8 @@
 @import "@fortawesome/fontawesome-free/scss/icons";
 @import "@fortawesome/fontawesome-free/scss/screen-reader";
 
-#conversejs {
+#conversejs, .converse-website {
+  /* Apparent font-awesome bug? The circle has some kind of bottom margin */
   .far {
     font-family: 'ConverseFontAwesomeRegular' !important;
     font-weight: 400;
@@ -85,7 +87,6 @@
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
-  /* Apparent font-awesome bug? The circle has some kind of bottom margin */
   .fa-info-circle {
       height: 1em;
   }

+ 3 - 3
sass/website.scss

@@ -197,7 +197,7 @@ a {
 .intro {
     margin-top: -4em;
     height: calc(100vh + 4em);
-    background: url(images/header.jpg) no-repeat bottom center scroll;
+    background: url(../images/header.jpg) no-repeat bottom center scroll;
     background-color: #211018;
     -webkit-background-size: cover;
     -moz-background-size: cover;
@@ -205,13 +205,13 @@ a {
     -o-background-size: cover;
 }
 .features-section {
-    background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #85505f, #384955, #655361);
+    background: url('../images/bgtr.svg') top right no-repeat, url('../images/bgbl.svg') bottom left no-repeat, url('../images/bgbl.svg') bottom left no-repeat, url('../images/overlay.png'), linear-gradient(45deg, #85505f, #384955, #655361);
 }
 .features-section a {
     color: #82B397;
 }
 .outro {
-    background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f);
+    background: url('../images/bgtr.svg') top right no-repeat, url('../images/bgbl.svg') bottom left no-repeat, url('../images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f);
 }
 
 section {

+ 0 - 1
tests/fullpage.html

@@ -7,7 +7,6 @@
     <link rel="shortcut icon" type="image/png" href="../node_modules/jasmine-core/images/jasmine_favicon.png">
 
     <link rel="stylesheet" type="text/css" media="screen" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
-    <link type="text/css" rel="stylesheet" media="screen" href="../node_modules/font-awesome/css/font-awesome.min.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />
     <script src="../dist/converse.js"></script>
     <script src="../src/config.js"></script>

+ 0 - 1
tests/transpiled.html

@@ -7,7 +7,6 @@
     <link rel="shortcut icon" type="image/png" href="../node_modules/jasmine-core/images/jasmine_favicon.png">
 
     <link rel="stylesheet" type="text/css" media="screen" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
-    <link type="text/css" rel="stylesheet" media="screen" href="../node_modules/font-awesome/css/font-awesome.min.css" />
     <link rel="stylesheet" type="text/css" media="screen" href="../css/jasmine.css">
     <link type="text/css" rel="stylesheet" media="screen" href="../css/website.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />