Final website tweaks

This commit is contained in:
Simon Prince
2024-04-18 17:41:04 -04:00
parent faf53a49a0
commit 2d300a16a1
20 changed files with 540 additions and 320 deletions

View File

@@ -84,32 +84,29 @@ export const HeroNewsItem = styled.div`
margin-bottom: 16px;
display: flex;
justify-content: start;
`
export const HeroNewsItemDate = styled.div`
width: 20%;
font-size: 16px ;
margin-right: 20px ;
@media screen and (max-width: 768px) {
font-size: 24px;
font-size: 12px;
}
@media screen and (max-width: 480px) {
font-size: 18px;
font-size: 12px;
}
`
export const HeroNewsItemContent = styled.div`
width: 80%;
color: #000000;
font-size: 16px ;
@media screen and (max-width: 768px) {
font-size: 24px;
font-size: 12px;
}
@media screen and (max-width: 480px) {
font-size: 18px;
font-size: 12px;
}
`
@@ -167,20 +164,89 @@ export const HeroDownloadsImg = styled.img`
export const HeroLink = styled.a`
color: #fff;
text-decoration: none;
padding: 0.1rem 0rem;
height: 100%;
padding: 0.6rem 0rem 0rem 0rem;
cursor: pointer;
position:relative ;
&:hover {
filter: brightness(0.85);
}
&:before{
position: absolute;
margin: 0 auto;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
content: '';
opacity: .3;
-webkit-transform: scaleX(1);
transition-property: opacity, -webkit-transform;
transition-duration: .3s;
}
&.active {
color: #000
border-bottom: 3px solid #01bf71;
&:hover:before {
opacity: 1;
-webkit-transform: scaleX(1.05);
}
`;
// color: #fff;
// text-decoration: none;
// padding: 0.1rem 0rem;
// height: 100%;
// cursor: pointer;
// position:relative ;
// &:before{
// position: absolute;
// margin: 0 auto;
// top: 100%;
// left: 0;
// width: 100%;
// height: 2px;
// background-color: #000;
// content: '';
// opacity: .3;
// -webkit-transform: scaleX(1);
// transition-property: opacity, -webkit-transform;
// transition-duration: .3s;
// }
// &:hover:before {
// opacity: 1;
// -webkit-transform: scaleX(1.05);
// }
// `;
export const UDLLink = styled.a`
text-decoration: none;
color: #000;
font-weight: 300;
margin: 0 2px;
position: relative;
&:before{
position: absolute;
margin: 0 auto;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background-color: #000;
content: '';
opacity: .3;
-webkit-transform: scaleX(1);
transition-property: opacity, -webkit-transform;
transition-duration: .3s;
}
&:hover:before {
opacity: 1;
-webkit-transform: scaleX(1.05);
}
`
export const HeroNewsTitle = styled.div`
margin-left: 0px;
@@ -233,10 +299,6 @@ export const HeroCitationBlock = styled.div`
export const HeroFollowBlock = styled.div`
@media screen and (max-width: 768px) {
font-size: 24px;
font-size: 14px;
}
@media screen and (max-width: 480px) {
font-size: 18px;
}
`
`

View File

@@ -1,5 +1,5 @@
import React from 'react'
import { HeroContainer, HeroNewsBlock, HeroCitationBlock, HeroCitationTitle, HeroFollowBlock, HeroDownloadsImg, HeroLink, HeroRow, HeroColumn1, HeroColumn2, HeroContent, Img, HeroImgWrap, HeroNewsTitle, HeroNewsItem, HeroNewsItemDate, HeroNewsItemContent} from './HeroElements'
import { HeroContainer, HeroNewsBlock, HeroCitationBlock, HeroCitationTitle, HeroFollowBlock, HeroDownloadsImg, HeroLink, HeroRow, HeroColumn1, HeroColumn2, HeroContent, Img, HeroImgWrap, HeroNewsTitle, HeroNewsItem, HeroNewsItemDate, HeroNewsItemContent, UDLLink} from './HeroElements'
import img from '../../images/F23.prince.learning.turquoise.jpg'
const HeroSection = () => {
@@ -27,42 +27,41 @@ const HeroSection = () => {
<HeroNewsItemContent> Book now available again.</HeroNewsItemContent>
</HeroNewsItem>
<HeroNewsItem>
<HeroNewsItemDate>02/21/24</HeroNewsItemDate>
<HeroNewsItemContent>New blog about the <UDLLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/">Neural Tangent Kernel.</UDLLink></HeroNewsItemContent>
</HeroNewsItem>
<HeroNewsItem>
<HeroNewsItemDate>02/15/24</HeroNewsItemDate>
<HeroNewsItemContent> First printing of book has sold out in most places. Second printing available mid-March.</HeroNewsItemContent>
</HeroNewsItem>
<HeroNewsItem>
<HeroNewsItemDate>01/29/24</HeroNewsItemDate>
<HeroNewsItemContent> New blog about <a href="https://www.borealisai.com/research-blogs/gradient-flow/"> gradient flow </a> published.</HeroNewsItemContent>
<HeroNewsItemContent> New blog about <UDLLink href="https://www.borealisai.com/research-blogs/gradient-flow/"> gradient flow </UDLLink> published.</HeroNewsItemContent>
</HeroNewsItem>
<HeroNewsItem>
<HeroNewsItemDate>12/26/23</HeroNewsItemDate>
<HeroNewsItemContent> Machine Learning Street Talk <a href="https://www.youtube.com/watch?v=sJXn4Cl4oww"> podcast </a> discussing book.</HeroNewsItemContent>
<HeroNewsItemContent> Machine Learning Street Talk <UDLLink href="https://www.youtube.com/watch?v=sJXn4Cl4oww"> podcast </UDLLink> discussing book.</HeroNewsItemContent>
</HeroNewsItem>
<HeroNewsItem>
<HeroNewsItemDate>12/19/23</HeroNewsItemDate>
<HeroNewsItemContent>Deeper Insights <a href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">podcast</a> discussing book.</HeroNewsItemContent>
<HeroNewsItemContent>Deeper Insights <UDLLink href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">podcast</UDLLink> discussing book.</HeroNewsItemContent>
</HeroNewsItem>
<HeroNewsItem>
<HeroNewsItemDate>12/06/23</HeroNewsItemDate>
<HeroNewsItemContent> I did an <a href="https://www.borealisai.com/news/understanding-deep-learning/">interview</a> discussing the book with Borealis AI.</HeroNewsItemContent>
<HeroNewsItemContent> I did an <UDLLink href="https://www.borealisai.com/news/understanding-deep-learning/">interview</UDLLink> discussing the book with Borealis AI.</HeroNewsItemContent>
</HeroNewsItem>
<HeroNewsItem>
<HeroNewsItemDate>12/05/23</HeroNewsItemDate>
<HeroNewsItemContent> Book released by <a href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">The MIT Press</a>.</HeroNewsItemContent>
<HeroNewsItemContent> Book released by <UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">The MIT Press</UDLLink>.</HeroNewsItemContent>
</HeroNewsItem>
</HeroNewsBlock>
<HeroFollowBlock>
Follow me on <a href="https://twitter.com/SimonPrinceAI">Twitter</a> or <a
href="https://www.linkedin.com/in/simon-prince-615bb9165/">LinkedIn</a> for updates.
</HeroFollowBlock>
<HeroCitationTitle>CITATION:</HeroCitationTitle>
<HeroCitationBlock>
<pre>
@@ -71,16 +70,20 @@ const HeroSection = () => {
</code>
</pre>
</HeroCitationBlock>
<HeroFollowBlock>
Follow me on <UDLLink href="https://twitter.com/SimonPrinceAI">Twitter</UDLLink> or <UDLLink
href="https://www.linkedin.com/in/simon-prince-615bb9165/">LinkedIn</UDLLink> for updates.
</HeroFollowBlock>
</HeroColumn1>
<HeroColumn2>
<HeroImgWrap>
<Img src={img} alt="book cover"/>
</HeroImgWrap>
<HeroLink href="https://github.com/udlbook/udlbook/releases/download/v2.03/UnderstandingDeepLearning_02_26_24_C.pdf">Download full pdf</HeroLink>
<HeroLink href="https://github.com/udlbook/udlbook/releases/download/v2.05/UnderstandingDeepLearning_04_18_24_C.pdf">Download full pdf (18 Apr 2024)</HeroLink>
<HeroDownloadsImg src="https://img.shields.io/github/downloads/udlbook/udlbook/total" alt="download stats shield"/>
<HeroLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">Buy the book</HeroLink>
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Answer_Booklet_Students.pdf">Answers to selected questions</HeroLink>
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Errata.pdf">Find/Report Errata</HeroLink>
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Errata.pdf">Errata</HeroLink>
</HeroColumn2>
</HeroRow>
</HeroContent>