diff --git a/index.html b/index.html index 1e179c4..523f9c4 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,9 @@ - - + + (primary ? "#fff" : "#01BF71")}; diff --git a/src/components/Footer/FooterElements.jsx b/src/components/Footer/FooterElements.jsx index 2376d68..861c8b4 100755 --- a/src/components/Footer/FooterElements.jsx +++ b/src/components/Footer/FooterElements.jsx @@ -26,6 +26,7 @@ export const FooterLinksContainer = styled.div` export const FooterLinksWrapper = styled.div` display: flex; + @media screen and (max-width: 820px) { flex-direction: column; } @@ -105,6 +106,7 @@ export const SocialLogo = styled(Link)` align-items: center; margin-bottom: 16px; font-weight: bold; + @media screen and (max-width: 768px) { font-size: 20px; } diff --git a/src/components/HeroSection/HeroElements.jsx b/src/components/HeroSection/HeroElements.jsx index 191233e..2a3e7bd 100755 --- a/src/components/HeroSection/HeroElements.jsx +++ b/src/components/HeroSection/HeroElements.jsx @@ -8,7 +8,6 @@ export const HeroContainer = styled.div` padding: 0 0px; position: static; z-index: 1; - } `; export const HeroContent = styled.div` @@ -22,6 +21,7 @@ export const HeroContent = styled.div` flex-direction: column; align-items: center; `; + export const HeroH1 = styled.h1` color: #fff; font-size: 48px; @@ -59,8 +59,8 @@ export const HeroBtnWrapper = styled.div` align-items: center; `; -export const HeroRow = styled.div` - display: grid; +export const HeroRow = styled.div` + display: grid; grid-auto-columns: minmax(auto, 1fr); align-items: top; grid-template-areas: 'col1 col2' }; @@ -74,17 +74,20 @@ export const HeroNewsItem = styled.div` margin-left: 4px; color: #000000; font-size: 16px; - // line-height: 16px; + /* line-height: 16px; */ margin-bottom: 16px; display: flex; justify-content: start; `; + export const HeroNewsItemDate = styled.div` width: 20%; margin-right: 20px; + @media screen and (max-width: 768px) { font-size: 12px; } + @media screen and (max-width: 480px) { font-size: 12px; } @@ -130,6 +133,7 @@ export const TextWrapper = styled.div` padding-top: 0; padding-bottom: 0; `; + export const HeroImgWrap = styled.div` max-width: 555px; height: 100%; @@ -181,34 +185,6 @@ export const HeroLink = styled.a` } `; -// 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; @@ -275,6 +251,7 @@ export const HeroCitationTitle = styled.div` `; export const HeroNewsBlock = styled.div``; + export const HeroCitationBlock = styled.div` font-size: 14px; margin-bottom: 0px; diff --git a/src/components/HeroSection/index.jsx b/src/components/HeroSection/index.jsx index 846c758..5d8a7f9 100755 --- a/src/components/HeroSection/index.jsx +++ b/src/components/HeroSection/index.jsx @@ -23,12 +23,13 @@ import { const HeroSection = () => { const citation = ` -@book{prince2023understanding, - author = "Simon J.D. Prince", - title = "Understanding Deep Learning", - publisher = "The MIT Press", - year = 2023, - url = "http://udlbook.com"} + @book{prince2023understanding, + author = "Simon J.D. Prince", + title = "Understanding Deep Learning", + publisher = "The MIT Press", + year = 2023, + url = "http://udlbook.com" + } `; return ( @@ -38,7 +39,6 @@ const HeroSection = () => { RECENT NEWS: - 03/12/24 @@ -46,7 +46,6 @@ const HeroSection = () => { Book now available again. - 02/21/24 @@ -64,7 +63,6 @@ const HeroSection = () => { printing available mid-March. - 01/29/24 @@ -77,7 +75,6 @@ const HeroSection = () => { published. - 12/26/23 @@ -90,7 +87,6 @@ const HeroSection = () => { discussing book. - 12/19/23 @@ -101,7 +97,6 @@ const HeroSection = () => { discussing book. - 12/06/23 @@ -113,7 +108,6 @@ const HeroSection = () => { discussing the book with Borealis AI. - 12/05/23 diff --git a/src/components/Instructors/InstructorsElements.jsx b/src/components/Instructors/InstructorsElements.jsx index afe9c18..c62b762 100644 --- a/src/components/Instructors/InstructorsElements.jsx +++ b/src/components/Instructors/InstructorsElements.jsx @@ -122,6 +122,7 @@ export const InstructorsContent = styled.div` flex-direction: column; align-items: left; list-style-position: inside; + @media screen and (max-width: 1050px) { font-size: 12px; } diff --git a/src/components/Instructors/index.jsx b/src/components/Instructors/index.jsx index d5c4c1d..fd11682 100644 --- a/src/components/Instructors/index.jsx +++ b/src/components/Instructors/index.jsx @@ -1,3 +1,4 @@ +import img from "../../images/instructor.svg"; import { Column1, Column2, @@ -15,26 +16,6 @@ import { TopLine, } from "./InstructorsElements"; -// export const homeObjOne = { -// id: 'about', -// lightBg: false, -// lightText: true, -// lightTextDesc: true, -// topLine: 'Premium Bank', -// headline: 'Unlimited transactions with zero fees', -// description: -// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees', -// buttonLabel: 'Get Started', -// imgStart: false, -// img: require('../../images/svg-1.svg').default, -// alt: 'Car', -// dark: true, -// primary: true, -// darkText: false -// }; - -import img from "../../images/instructor.svg"; - const InstructorsSection = () => { return ( <> diff --git a/src/components/Media/MediaElements.jsx b/src/components/Media/MediaElements.jsx index 552eb82..f5bead3 100644 --- a/src/components/Media/MediaElements.jsx +++ b/src/components/Media/MediaElements.jsx @@ -120,6 +120,7 @@ export const MediaContent = styled.div` flex-direction: column; align-items: left; list-style-position: inside; + @media screen and (max-width: 768px) { font-size: 14px; } @@ -140,6 +141,7 @@ export const MediaRow2 = styled.div` export const VideoFrame = styled.div` width: 560px; height: 315px; + @media screen and (max-width: 1050px) { width: 280px; height: 157px; diff --git a/src/components/Media/index.jsx b/src/components/Media/index.jsx index 268adc1..8e5eb08 100644 --- a/src/components/Media/index.jsx +++ b/src/components/Media/index.jsx @@ -1,3 +1,4 @@ +import img from "../../images/media.svg"; import { Column1, Column2, @@ -16,26 +17,6 @@ import { VideoFrame, } from "./MediaElements"; -// export const homeObjOne = { -// id: 'about', -// lightBg: false, -// lightText: true, -// lightTextDesc: true, -// topLine: 'Premium Bank', -// headline: 'Unlimited transactions with zero fees', -// description: -// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees', -// buttonLabel: 'Get Started', -// imgStart: false, -// img: require('../../images/svg-1.svg').default, -// alt: 'Car', -// dark: true, -// primary: true, -// darkText: false -// }; - -import img from "../../images/media.svg"; - const MediaSection = () => { return ( <> @@ -69,7 +50,7 @@ const MediaSection = () => { height="100%" src="https://www.youtube.com/embed/sJXn4Cl4oww?si=Lm_hQPqj0RXy-75H&controls=0" title="YouTube video player" - frameborder="2" + frameBorder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen > @@ -83,7 +64,7 @@ const MediaSection = () => { height="100%" src="https://www.youtube.com/embed/nQf4o9TDSHI?si=uMk66zLD7uhuSnQ1&controls=0" title="YouTube video player" - frameborder="2" + frameBorder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen > diff --git a/src/components/More/MoreElements.jsx b/src/components/More/MoreElements.jsx index 7ff040f..c6d4a41 100644 --- a/src/components/More/MoreElements.jsx +++ b/src/components/More/MoreElements.jsx @@ -13,7 +13,7 @@ export const MoreContainer = styled.div` export const MoreWrapper = styled.div` display: grid; z-index: 1; - // height: 1050px ; + /* height: 1050px; */ width: 100%; max-width: 1100px; margin-right: auto; @@ -127,9 +127,10 @@ export const MoreContent = styled.div` `; export const MoreOuterList = styled.ul` - // list-style:none; + /* list-style:none; */ list-style-position: inside; margin: 0; + @media screen and (max-width: 768px) { font-size: 14px; } @@ -137,6 +138,7 @@ export const MoreOuterList = styled.ul` export const MoreInnerList = styled.ul` list-style-position: inside; + @media screen and (max-width: 768px) { font-size: 12px; } diff --git a/src/components/More/index.jsx b/src/components/More/index.jsx index 559dfd8..a38a2ea 100644 --- a/src/components/More/index.jsx +++ b/src/components/More/index.jsx @@ -58,8 +58,8 @@ const MoreSection = () => {
  • 2012 book published with CUP
  • Focused on probabilistic models
  • Pre-"deep learning"
    • -
  • Lots of ML content
    • -
  • Individual chapters available below
    • +
  • Lots of ML content
    • +
  • Individual chapters available below
    • @@ -77,12 +77,12 @@ const MoreSection = () => { -
  • What is an LLM?
    • -
  • Pretraining
    • -
  • Instruction fine-tuning
    • -
  • Reinforcement learning from human feedback
    • -
  • Notable LLMs
    • -
  • LLMs without training from scratch
    • +
  • What is an LLM?
    • +
  • Pretraining
    • +
  • Instruction fine-tuning
    • +
  • Reinforcement learning from human feedback
    • +
  • Notable LLMs
    • +
  • LLMs without training from scratch
    • diff --git a/src/components/NavBar/NavbarElements.jsx b/src/components/NavBar/NavbarElements.jsx index b232e8d..1f033ed 100755 --- a/src/components/NavBar/NavbarElements.jsx +++ b/src/components/NavBar/NavbarElements.jsx @@ -39,6 +39,7 @@ export const NavLogo = styled(LinkR)` margin-left: 24px; font-weight: bold; text-decoration: none; + @media screen and (max-width: 768px) { font-size: 1rem; } diff --git a/src/components/Notebooks/NotebookElements.jsx b/src/components/Notebooks/NotebookElements.jsx index 81a912d..659e569 100644 --- a/src/components/Notebooks/NotebookElements.jsx +++ b/src/components/Notebooks/NotebookElements.jsx @@ -1,7 +1,6 @@ import styled from "styled-components"; - -export const NotebookContainer = styled.div` +export const NotebookContainer = styled.div` color: #fff; /* background: #f9f9f9; */ background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')}; @@ -12,10 +11,10 @@ export const NotebookContainer = styled.div` ` export const NotebookWrapper = styled.div` - display: grid ; + display: grid; z-index: 1; - // height: 1250px ; - width: 100% ; + /* height: 1250px; */ + width: 100% ; max-width: 1100px; margin-right: auto; margin-left: auto; @@ -23,8 +22,8 @@ export const NotebookWrapper = styled.div` justify-content: center; ` -export const NotebookRow = styled.div` - display: grid; +export const NotebookRow = styled.div` + display: grid; grid-auto-columns: minmax(auto, 1fr); align-items: center; grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)}; @@ -34,10 +33,11 @@ export const NotebookRow = styled.div` } ` -export const Column1 = styled.p` +export const Column1 = styled.p` margin-bottom: 15px; padding: 0 15px; grid-area: col1; + @media screen and (max-width: 1050px) { font-size: 12px; } @@ -47,10 +47,11 @@ export const Column1 = styled.p` } ` -export const Column2 = styled.p` +export const Column2 = styled.p` margin-bottom: 15px; padding: 0 15px; grid-area: col2; + @media screen and (max-width: 1050px) { font-size: 12px; } @@ -61,12 +62,12 @@ export const Column2 = styled.p` ` export const TextWrapper = styled.div` - max-width: 540px ; + max-width: 540px ; padding-top: 0; padding-bottom: 0; ` -export const TopLine = styled.p` +export const TopLine = styled.p` color: #57c6d1; font-size: 16px; line-height: 16px; @@ -76,22 +77,19 @@ export const TopLine = styled.p` margin-bottom: 16px; ` -export const Heading= styled.h1` - +export const Heading= styled.h1` margin-bottom: 24px; font-size: 48px; line-height: 1.1; font-weight: 600; color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')}; - - @media screen and (max-width: 480px) - { + + @media screen and (max-width: 480px) { font-size: 32px; } ` - -export const Subtitle = styled.p` +export const Subtitle = styled.p` max-width: 440px; margin-bottom: 35px; font-size: 18px; @@ -104,20 +102,19 @@ export const BtnWrap = styled.div` justify-content: flex-start; ` -export const ImgWrap = styled.div` +export const ImgWrap = 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 NBLink = styled.a` text-decoration: none; color: #57c6d1;; @@ -143,5 +140,5 @@ export const NBLink = styled.a` &:hover:before { opacity: 1; -webkit-transform: scaleX(1.05); - } -` \ No newline at end of file + } +` diff --git a/src/components/Notebooks/index.jsx b/src/components/Notebooks/index.jsx index e17f024..f01e787 100644 --- a/src/components/Notebooks/index.jsx +++ b/src/components/Notebooks/index.jsx @@ -1,27 +1,5 @@ -import React from 'react' -import { NBLink, ImgWrap, Img, NotebookContainer, NotebookWrapper, NotebookRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './NotebookElements' - -// export const homeObjOne = { -// id: 'about', -// lightBg: false, -// lightText: true, -// lightTextDesc: true, -// topLine: 'Premium Bank', -// headline: 'Unlimited transactions with zero fees', -// description: -// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees', -// buttonLabel: 'Get Started', -// imgStart: false, -// img: require('../../images/svg-1.svg').default, -// alt: 'Car', -// dark: true, -// primary: true, -// darkText: false -// }; - import img from '../../images/coding.svg' - - +import { Column1, Column2, Heading, Img, ImgWrap, NBLink, NotebookContainer, NotebookRow, NotebookWrapper, Subtitle, TextWrapper, TopLine } from './NotebookElements' const NotebookSection = () => { return ( @@ -210,7 +188,6 @@ const NotebookSection = () => { - diff --git a/src/components/ScrollToTop.jsx b/src/components/ScrollToTop.jsx index 02f94f5..6becba0 100755 --- a/src/components/ScrollToTop.jsx +++ b/src/components/ScrollToTop.jsx @@ -3,6 +3,7 @@ import { useLocation } from "react-router-dom"; export default function ScrollToTop() { const { pathname } = useLocation(); + useEffect(() => { window.scrollTo(0, 0); }, [pathname]); diff --git a/src/components/Sidebar/SidebarElements.jsx b/src/components/Sidebar/SidebarElements.jsx index a8ccd15..0a61bbc 100755 --- a/src/components/Sidebar/SidebarElements.jsx +++ b/src/components/Sidebar/SidebarElements.jsx @@ -20,6 +20,7 @@ export const SidebarContainer = styled.aside` export const CloseIcon = styled(FaTimes)` color: #fff; + &:hover { color: #01bf71; transition: 0.2s ease-in-out; diff --git a/src/App.css b/src/styles/App.css similarity index 100% rename from src/App.css rename to src/styles/App.css