dr_domi/udlbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Tom Heaton
2024-06-05 23:58:58 +01:00
parent def3e5234b
commit 03c92541ad
27 changed files with 24481 additions and 23650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/components/HeroSection/HeroElements.jsx
View File

@@ -9,22 +9,20 @@ export const HeroContainer = styled.div`
position: static;
z-index: 1;
}
`
`;
export const HeroContent = styled.div`
z-index: 3;
width: 100% ;
export const HeroContent = styled.div`
z-index: 3;
width: 100%;
max-width: 1100px;
position: static;
padding: 8px 24px;
margin: 80px 0px;
display: flex;
flex-direction: column;
align-items: center ;
`
export const HeroH1 = styled.h1`
align-items: center;
`;
export const HeroH1 = styled.h1`
color: #fff;
font-size: 48px;
text-align: center;
@@ -36,17 +34,15 @@ export const HeroH1 = styled.h1`
@media screen and (max-width: 480px) {
font-size: 32px;
}
`;
`
export const HeroP = styled.p`
export const HeroP = styled.p`
margin-top: 24px;
color: #fff;
font-size: 24px ;
text-align: center ;
max-width: 600px ;
font-size: 24px;
text-align: center;
max-width: 600px;
@media screen and (max-width: 768px) {
font-size: 24px;
}
@@ -54,15 +50,14 @@ export const HeroP = styled.p`
@media screen and (max-width: 480px) {
font-size: 18px;
}
`
`;
export const HeroBtnWrapper = styled.div`
margin-top: 32px ;
margin-top: 32px;
display: flex;
flex-direction: column ;
align-items: center ;
`
flex-direction: column;
align-items: center;
`;
export const HeroRow = styled.div`
display: grid;
@@ -73,8 +68,7 @@ export const HeroRow = styled.div`
@media screen and (max-width: 768px){
grid-template-areas: 'col2' 'col1';
}
`
`;
export const HeroNewsItem = styled.div`
margin-left: 4px;
@@ -82,23 +76,22 @@ export const HeroNewsItem = styled.div`
font-size: 16px;
// line-height: 16px;
margin-bottom: 16px;
display: flex;
display: flex;
justify-content: start;
`
`;
export const HeroNewsItemDate = styled.div`
width: 20%;
margin-right: 20px ;
margin-right: 20px;
@media screen and (max-width: 768px) {
font-size: 12px;
}
@media screen and (max-width: 480px) {
font-size: 12px;
}
`
`;
export const HeroNewsItemContent = styled.div`
width: 80%;
width: 80%;
color: #000000;
@media screen and (max-width: 768px) {
@@ -108,49 +101,46 @@ export const HeroNewsItemContent = styled.div`
@media screen and (max-width: 480px) {
font-size: 12px;
}
`
`;
export const HeroColumn1 = styled.div`
export const HeroColumn1 = styled.div`
margin-bottom: 15px;
margin-left: 12px;
margin-top: 60px;
padding: 10px 15px;
padding: 0 15px;
grid-area: col1;
align-items:left;
align-items: left;
display: flex;
flex-direction:column;
flex-direction: column;
justify-content: space-between;
`
`;
export const HeroColumn2 = styled.div`
export const HeroColumn2 = styled.div`
margin-bottom: 15px;
padding: 0 15px;
grid-area: col2;
display: flex;
align-items:center;
flex-direction:column;
`
align-items: center;
flex-direction: column;
`;
export const TextWrapper = styled.div`
max-width: 540px ;
max-width: 540px;
padding-top: 0;
padding-bottom: 0;
`
export const HeroImgWrap = styled.div`
`;
export const HeroImgWrap = styled.div`
max-width: 555px;
height: 100%;
`
`;
export const Img = styled.img`
width: 100%;
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
width: 100%;
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
`;
export const HeroDownloadsImg = styled.img`
@@ -159,34 +149,36 @@ export const HeroDownloadsImg = styled.img`
margin-left: 0;
padding-right: 0;
margin-bottom: 10px;
`
`;
export const HeroLink = styled.a`
color: #fff;
text-decoration: none;
padding: 0.6rem 0rem 0rem 0rem;
cursor: pointer;
position:relative ;
color: #fff;
text-decoration: none;
padding: 0.6rem 0rem 0rem 0rem;
cursor: pointer;
position: relative;
&: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;
}
&:before {
position: absolute;
margin: 0 auto;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
content: "";
opacity: 0.3;
-webkit-transform: scaleX(1);
transition-property:
opacity,
-webkit-transform;
transition-duration: 0.3s;
}
&:hover:before {
opacity: 1;
-webkit-transform: scaleX(1.05);
}
opacity: 1;
-webkit-transform: scaleX(1.05);
}
`;
// color: #fff;
@@ -194,7 +186,7 @@ export const HeroLink = styled.a`
// padding: 0.1rem 0rem;
// height: 100%;
// cursor: pointer;
// position:relative ;
// position:relative ;
// &:before{
// position: absolute;
@@ -224,7 +216,7 @@ export const UDLLink = styled.a`
margin: 0 2px;
position: relative;
&:before{
&:before {
position: absolute;
margin: 0 auto;
top: 100%;
@@ -232,29 +224,28 @@ export const UDLLink = styled.a`
width: 100%;
height: 2px;
background-color: #000;
content: '';
opacity: .3;
content: "";
opacity: 0.3;
-webkit-transform: scaleX(1);
transition-property: opacity, -webkit-transform;
transition-duration: .3s;
transition-property:
opacity,
-webkit-transform;
transition-duration: 0.3s;
}
&:hover:before {
opacity: 1;
-webkit-transform: scaleX(1.05);
}
`
}
`;
export const HeroNewsTitle = styled.div`
export const HeroNewsTitle = styled.div`
margin-left: 0px;
color: #000000;
font-size: 16px;
font-weight: bold;
line-height: 16px;
margin-bottom: 36px;
margin-bottom: 36px;
@media screen and (max-width: 768px) {
font-size: 24px;
@@ -263,16 +254,16 @@ export const HeroNewsTitle = styled.div`
@media screen and (max-width: 480px) {
font-size: 18px;
}
`
`;
export const HeroCitationTitle = styled.div`
export const HeroCitationTitle = styled.div`
margin-left: 0px;
color: #000000;
font-size: 16px;
font-weight: bold;
line-height: 16px;
margin-bottom: 10px;
margin-top:36px;
margin-bottom: 10px;
margin-top: 36px;
@media screen and (max-width: 768px) {
font-size: 24px;
@@ -281,24 +272,17 @@ export const HeroCitationTitle = styled.div`
@media screen and (max-width: 480px) {
font-size: 18px;
}
`
`;
export const HeroNewsBlock = styled.div`
`
export const HeroNewsBlock = styled.div``;
export const HeroCitationBlock = styled.div`
font-size: 14px;
margin-bottom: 0px;
margin-top: 0px;
`
`;
export const HeroFollowBlock = styled.div`
@media screen and (max-width: 768px) {
font-size: 14px;
}
`
@media screen and (max-width: 768px) {
font-size: 14px;
}
`;

133
src/components/HeroSection/index.jsx
View File

@@ -1,10 +1,27 @@
import React from 'react'
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'
import React from "react";
import img from "../../images/F23.prince.learning.turquoise.jpg";
import {
HeroCitationBlock,
HeroCitationTitle,
HeroColumn1,
HeroColumn2,
HeroContainer,
HeroContent,
HeroDownloadsImg,
HeroFollowBlock,
HeroImgWrap,
HeroLink,
HeroNewsBlock,
HeroNewsItem,
HeroNewsItemContent,
HeroNewsItemDate,
HeroNewsTitle,
HeroRow,
Img,
UDLLink,
} from "./HeroElements";
const HeroSection = () => {
const citation = `
@book{prince2023understanding,
author = "Simon J.D. Prince",
@@ -12,8 +29,8 @@ const HeroSection = () => {
publisher = "The MIT Press",
year = 2023,
url = "http://udlbook.com"}
`
`;
return (
<HeroContainer id="home">
<HeroContent>
@@ -24,42 +41,89 @@ const HeroSection = () => {
<HeroNewsItem>
<HeroNewsItemDate>03/12/24</HeroNewsItemDate>
<HeroNewsItemContent> Book now available again.</HeroNewsItemContent>
<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>
<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>
<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 <UDLLink href="https://www.borealisai.com/research-blogs/gradient-flow/"> gradient flow </UDLLink> 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 <UDLLink href="https://www.youtube.com/watch?v=sJXn4Cl4oww"> podcast </UDLLink> 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 <UDLLink href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">podcast</UDLLink> 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 <UDLLink href="https://www.borealisai.com/news/understanding-deep-learning/">interview</UDLLink> 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 <UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">The MIT Press</UDLLink>.</HeroNewsItemContent>
<HeroNewsItemContent>
{" "}
Book released by{" "}
<UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">
The MIT Press
</UDLLink>
.
</HeroNewsItemContent>
</HeroNewsItem>
</HeroNewsBlock>
<HeroCitationTitle>CITATION:</HeroCitationTitle>
@@ -71,24 +135,39 @@ const HeroSection = () => {
</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.
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"/>
<Img src={img} alt="book cover" />
</HeroImgWrap>
<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">Errata</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">
Errata
</HeroLink>
</HeroColumn2>
</HeroRow>
</HeroContent>
</HeroContainer>
)
}
);
};
export default HeroSection
export default HeroSection;