Merge pull request #77 from datasektionen/hover-effect-on-action-buttons

Hover effects for all links on frontpage

package.json

@@ -13,7 +13,7 @@
     "express": "^4.18.2",
     "is-in-browser": "^1.1.3",
     "lodash": "^4.17.21",
-    "methone": "datasektionen/Methone",
+    "methone": "github:datasektionen/Methone",
     "razzle": "^2.4.0",
     "razzle-heroku": "^2.1.0",
     "react": "^16.14.0",

src/components/Frontpage/FixMe.css

@@ -72,11 +72,19 @@ a.action {
   text-align: center;
   margin: 20px auto 0;
 }
+a.action:hover, a.action:focus {
+  background: #ec5f99;
+  border-bottom: 4px solid #e83d84;
+}
 .inline_link {
   color: #e83d84;
   text-decoration: underline !important;
 }
-
+.inline_link:hover,
+.inline_link:focus {
+  color: #ec5f99;
+  text-decoration: underline !important;
+}
 #footer {
   background: #333333;
   margin: -50px 0;

src/components/Frontpage/Frontpage.module.css

@@ -82,7 +82,8 @@
   color: #828ca2;
 }
 
-.content.hero .more-btn:hover {
+.content.hero .more-btn:hover,
+.content.hero .more-btn:focus {
   transform: scale(1.05);
   box-shadow: 0 3px 3px rgba(0, 0, 0, .1);
 }
@@ -129,6 +130,12 @@
   text-shadow: 1px 1px #fff;
   margin: 20px;
   text-transform: uppercase;
+  transition: color 0.1s ease-out;
+}
+
+.content .news h2:hover,
+.content .news h2:focus {
+    color: #ec5f99;
 }
 
 .content .news ul {
@@ -151,6 +158,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
   color: #6a758f;
+  transition: color 0.1s ease-out;
+}
+
+.content .news ul li h3:hover,
+.content .news ul li h3:focus {
+  color: #4a5164;
 }
 
 .content .news ul div {

src/components/Frontpage/index.js

@@ -9,7 +9,7 @@ import { Translate, English, Swedish } from '../Translate'
 
 import styles from './Frontpage.module.css'
 import skold from './skold.svg'
-import EventCalendar, { getWeekTimeSpan } from '../EventCalendar/index.jsx';
+import EventCalendar, { getWeekTimeSpan } from '../EventCalendar';
 import './FixMe.css'
 
 const cx = classNames.bind(styles)
@@ -230,7 +230,7 @@ const Frontpage = ({ location, lang }) =>
             </Translate>
             <span>Datasektionen</span>
           </h2>
-          
+
           {/* Studies, Social & Business sections, condensed in a loop */}
           <div id="home_sections">
             {sidebar && sidebar.split('<hr>').map(__html =>

src/server.js

@@ -85,7 +85,7 @@ server
     <meta name="msapplication-TileColor" content="#e83d84">
     <meta name="msapplication-TileImage" content="/icons/ms-icon-144x144.png">
     <meta name="theme-color" content="#e83d84">
-    <link rel="stylesheet" href="//aurora.datasektionen.se/">
+    <link rel="stylesheet" href="https://aurora.datasektionen.se/">
     ${assets.client.css
       ? `<link rel="stylesheet" href="${assets.client.css}">`
       : ''