From c2c3b0000ffbc8b117695d1c3ed7b637b0d90a3c Mon Sep 17 00:00:00 2001 From: Marvin Blum Date: Wed, 29 May 2024 12:27:20 +0200 Subject: [PATCH] Responsive. --- assets/scss/main.scss | 83 +++++++++++++++++++++++++++++++++++++++++ static/web/main.css | 2 +- static/web/main.css.map | 2 +- 3 files changed, 85 insertions(+), 2 deletions(-) diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 07a12a6..4a91e7a 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -12,6 +12,10 @@ $highlight: #c0d9f0; font-size: 18px; line-height: 2; color: $textColor; + + @media screen and (max-width: 890px) { + font-size: 16px; + } } body { @@ -26,12 +30,26 @@ h1, h2 { a { font-size: 32px; + + @media screen and (max-width: 890px) { + font-size: 26px; + } + } + + @media screen and (max-width: 890px) { + font-size: 26px; + margin: 0 0 20px 0; } } h2 { margin: 40px 0; font-size: 26px; + + @media screen and (max-width: 890px) { + font-size: 20px; + margin: 20px 0; + } } a { @@ -124,6 +142,14 @@ nav { } } } + + @media screen and (max-width: 890px) { + gap: 10px; + } + + @media screen and (max-width: 580px) { + flex-direction: column; + } } .contact { @@ -138,7 +164,30 @@ nav { background: $textColor; color: #fff; } + + @media screen and (max-width: 890px) { + padding: 4px 8px; + } } + + @media screen and (max-width: 890px) { + padding: 40px; + } + + @media screen and (max-width: 420px) { + padding: 20px 0; + flex-direction: column; + gap: 10px; + align-items: flex-start; + } + } + + @media screen and (max-width: 890px) { + padding: 0; + } + + @media screen and (max-width: 420px) { + padding: 20px; } } @@ -146,6 +195,14 @@ section { max-width: 1080px; margin: 80px auto 0 auto; padding: 0 40px; + + @media screen and (max-width: 890px) { + margin: 40px auto 0 auto; + } + + @media screen and (max-width: 420px) { + padding: 0 20px; + } } footer { @@ -186,7 +243,29 @@ footer { max-height: 196px; aspect-ratio: 1; border-radius: $borderRadius; + + @media screen and (max-width: 890px) { + max-width: 142px; + max-height: 142px; + } + + @media screen and (max-width: 600px) { + margin: 0; + } } + + @media screen and (max-width: 600px) { + flex-direction: column; + align-items: flex-start; + } + } + + @media screen and (max-width: 600px) { + padding: 0 40px 40px 40px; + } + + @media screen and (max-width: 420px) { + padding: 0 20px 20px 20px; } } @@ -209,5 +288,9 @@ footer { &:hover { color: $linkColor; } + + @media screen and (max-width: 890px) { + font-size: 20px; + } } } diff --git a/static/web/main.css b/static/web/main.css index ce3d654..324aea4 100644 --- a/static/web/main.css +++ b/static/web/main.css @@ -1 +1 @@ -@font-face{font-family:"Open Sans";font-style:italic;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Italic.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Regular.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Bold.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:italic;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-BoldItalic.ttf") format("truetype")}*{box-sizing:border-box;font-family:"Open Sans",sans-serif;font-size:18px;line-height:2;color:#0f0f0f}body{margin:0;padding:0 0 160px 0}h1,h2{font-size:32px;margin:0 0 40px 0;font-weight:normal}h1 a,h2 a{font-size:32px}h2{margin:40px 0;font-size:26px}a{text-decoration:none;transition:all .3s;color:#717171}a:hover{color:#0f0f0f}p,ul{margin:20px 0}img{display:block;max-width:80%;margin:40px auto}pre{max-width:80%;margin:40px auto;padding:20px;border-width:1px 1px 1px 2px;border-style:solid;border-color:#c0d9f0;border-radius:8px;overflow-x:auto;font-size:14px}code{font-family:"Courier New",Courier,monospace}hr{margin:40px 0;height:2px;background:#e6e6e6;border-width:0}blockquote{margin:40px 0 40px 40px;padding:10px 20px;border-width:0 0 0 2px;border-style:solid;border-color:#c0d9f0}nav{padding:80px 40px;background:#c0d9f0}nav .content{display:flex;justify-content:space-between;align-items:center;max-width:1000px;margin:0 auto}nav .content ul{display:flex;gap:20px;margin:0;padding:0}nav .content ul li{list-style:none;margin:0;padding:0}nav .content ul li a{color:#0f0f0f}nav .content ul li a svg{fill:#0f0f0f;transition:all .3s}nav .content ul li a:hover{color:#717171}nav .content ul li a:hover svg{fill:#717171}nav .content .contact{display:inline-block;padding:8px 16px;border-radius:8px;border:2px solid #0f0f0f;color:#0f0f0f;transition:all .3s}nav .content .contact:hover{background:#0f0f0f;color:#fff}section{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}footer{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}footer .content{max-width:1000px;margin:0 auto;border-style:solid;border-width:2px 0 0 0;border-color:#e6e6e6;padding:40px 0}.intro{background:#c0d9f0;max-width:100%;padding:0 40px 80px 40px;margin:0}.intro article{max-width:1000px;margin:0 auto;display:flex;gap:40px;justify-content:flex-start;align-items:center}.intro article h1{margin:0}.intro article img{max-width:196px;max-height:196px;aspect-ratio:1;border-radius:8px}.blog-entry{margin-bottom:0}.blog-entry p{margin:0;color:#717171}.blog-entry h2{margin:0}.blog-entry a{color:#0f0f0f;font-size:26px}.blog-entry a:hover{color:#717171}/*# sourceMappingURL=main.css.map */ +@font-face{font-family:"Open Sans";font-style:italic;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Italic.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Regular.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Bold.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:italic;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-BoldItalic.ttf") format("truetype")}*{box-sizing:border-box;font-family:"Open Sans",sans-serif;font-size:18px;line-height:2;color:#0f0f0f}@media screen and (max-width: 890px){*{font-size:16px}}body{margin:0;padding:0 0 160px 0}h1,h2{font-size:32px;margin:0 0 40px 0;font-weight:normal}h1 a,h2 a{font-size:32px}@media screen and (max-width: 890px){h1 a,h2 a{font-size:26px}}@media screen and (max-width: 890px){h1,h2{font-size:26px;margin:0 0 20px 0}}h2{margin:40px 0;font-size:26px}@media screen and (max-width: 890px){h2{font-size:20px;margin:20px 0}}a{text-decoration:none;transition:all .3s;color:#717171}a:hover{color:#0f0f0f}p,ul{margin:20px 0}img{display:block;max-width:80%;margin:40px auto}pre{max-width:80%;margin:40px auto;padding:20px;border-width:1px 1px 1px 2px;border-style:solid;border-color:#c0d9f0;border-radius:8px;overflow-x:auto;font-size:14px}code{font-family:"Courier New",Courier,monospace}hr{margin:40px 0;height:2px;background:#e6e6e6;border-width:0}blockquote{margin:40px 0 40px 40px;padding:10px 20px;border-width:0 0 0 2px;border-style:solid;border-color:#c0d9f0}nav{padding:80px 40px;background:#c0d9f0}nav .content{display:flex;justify-content:space-between;align-items:center;max-width:1000px;margin:0 auto}nav .content ul{display:flex;gap:20px;margin:0;padding:0}nav .content ul li{list-style:none;margin:0;padding:0}nav .content ul li a{color:#0f0f0f}nav .content ul li a svg{fill:#0f0f0f;transition:all .3s}nav .content ul li a:hover{color:#717171}nav .content ul li a:hover svg{fill:#717171}@media screen and (max-width: 890px){nav .content ul{gap:10px}}@media screen and (max-width: 580px){nav .content ul{flex-direction:column}}nav .content .contact{display:inline-block;padding:8px 16px;border-radius:8px;border:2px solid #0f0f0f;color:#0f0f0f;transition:all .3s}nav .content .contact:hover{background:#0f0f0f;color:#fff}@media screen and (max-width: 890px){nav .content .contact{padding:4px 8px}}@media screen and (max-width: 890px){nav .content{padding:40px}}@media screen and (max-width: 420px){nav .content{padding:20px 0;flex-direction:column;gap:10px;align-items:flex-start}}@media screen and (max-width: 890px){nav{padding:0}}@media screen and (max-width: 420px){nav{padding:20px}}section{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}@media screen and (max-width: 890px){section{margin:40px auto 0 auto}}@media screen and (max-width: 420px){section{padding:0 20px}}footer{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}footer .content{max-width:1000px;margin:0 auto;border-style:solid;border-width:2px 0 0 0;border-color:#e6e6e6;padding:40px 0}.intro{background:#c0d9f0;max-width:100%;padding:0 40px 80px 40px;margin:0}.intro article{max-width:1000px;margin:0 auto;display:flex;gap:40px;justify-content:flex-start;align-items:center}.intro article h1{margin:0}.intro article img{max-width:196px;max-height:196px;aspect-ratio:1;border-radius:8px}@media screen and (max-width: 890px){.intro article img{max-width:142px;max-height:142px}}@media screen and (max-width: 600px){.intro article img{margin:0}}@media screen and (max-width: 600px){.intro article{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 600px){.intro{padding:0 40px 40px 40px}}@media screen and (max-width: 420px){.intro{padding:0 20px 20px 20px}}.blog-entry{margin-bottom:0}.blog-entry p{margin:0;color:#717171}.blog-entry h2{margin:0}.blog-entry a{color:#0f0f0f;font-size:26px}.blog-entry a:hover{color:#717171}@media screen and (max-width: 890px){.blog-entry a{font-size:20px}}/*# sourceMappingURL=main.css.map */ diff --git a/static/web/main.css.map b/static/web/main.css.map index 41e0b8c..0bb8a07 100644 --- a/static/web/main.css.map +++ b/static/web/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../assets/scss/_font.scss","../../assets/scss/main.scss"],"names":[],"mappings":"AAAA,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,0DAGJ,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,2DAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,wDAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,8DCzBJ,EACC,sBACA,mCACA,eACA,cACA,MAVW,QAaZ,KACC,SACA,oBAGD,MACC,eACA,kBACA,mBAEA,UACC,eAIF,GACC,cACA,eAGD,EACC,qBACA,mBACA,MAnCW,QAqCX,QACC,MAvCU,QA2CZ,KACC,cAGD,IACC,cACA,cACA,iBAGD,IACC,cACA,iBACA,aACA,6BACA,mBACA,aAxDW,QAyDX,cA7Dc,IA8Dd,gBACA,eAGD,KACC,4CAGD,GACC,cACA,WACA,WAtEW,QAuEX,eAGD,WACC,wBACA,kBACA,uBACA,mBACA,aA9EW,QAiFZ,IACC,kBACA,WAnFW,QAqFX,aACC,aACA,8BACA,mBACA,iBACA,cAEA,gBACC,aACA,SACA,SACA,UAEA,mBACC,gBACA,SACA,UAEA,qBACC,MA3GO,QA6GP,yBACC,KA9GM,QA+GN,mBAGD,2BACC,MAlHM,QAoHN,+BACC,KArHK,QA4HV,sBACC,qBACA,iBACA,cAjIY,IAkIZ,yBACA,MAlIS,QAmIT,mBAEA,4BACC,WAtIQ,QAuIR,WAMJ,QACC,iBACA,wBACA,eAGD,OACC,iBACA,wBACA,eAEA,gBACC,iBACA,cACA,mBACA,uBACA,aA3JU,QA4JV,eAIF,OACC,WAhKW,QAiKX,eACA,yBACA,SAEA,eACC,iBACA,cACA,aACA,SACA,2BACA,mBAEA,kBACC,SAGD,mBACC,gBACA,iBACA,eACA,cAzLY,IA8Lf,YACC,gBAEA,cACC,SACA,MAjMU,QAoMX,eACC,SAGD,cACC,MA1MU,QA2MV,eAEA,oBACC,MA7MS","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../assets/scss/_font.scss","../../assets/scss/main.scss"],"names":[],"mappings":"AAAA,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,0DAGJ,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,2DAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,wDAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,8DCzBJ,EACC,sBACA,mCACA,eACA,cACA,MAVW,QAYX,qCAPD,EAQE,gBAIF,KACC,SACA,oBAGD,MACC,eACA,kBACA,mBAEA,UACC,eAEA,qCAHD,UAIE,gBAIF,qCAbD,MAcE,eACA,mBAIF,GACC,cACA,eAEA,qCAJD,GAKE,eACA,eAIF,EACC,qBACA,mBACA,MArDW,QAuDX,QACC,MAzDU,QA6DZ,KACC,cAGD,IACC,cACA,cACA,iBAGD,IACC,cACA,iBACA,aACA,6BACA,mBACA,aA1EW,QA2EX,cA/Ec,IAgFd,gBACA,eAGD,KACC,4CAGD,GACC,cACA,WACA,WAxFW,QAyFX,eAGD,WACC,wBACA,kBACA,uBACA,mBACA,aAhGW,QAmGZ,IACC,kBACA,WArGW,QAuGX,aACC,aACA,8BACA,mBACA,iBACA,cAEA,gBACC,aACA,SACA,SACA,UAEA,mBACC,gBACA,SACA,UAEA,qBACC,MA7HO,QA+HP,yBACC,KAhIM,QAiIN,mBAGD,2BACC,MApIM,QAsIN,+BACC,KAvIK,QA6IT,qCA7BD,gBA8BE,UAGD,qCAjCD,gBAkCE,uBAIF,sBACC,qBACA,iBACA,cA3JY,IA4JZ,yBACA,MA5JS,QA6JT,mBAEA,4BACC,WAhKQ,QAiKR,WAGD,qCAbD,sBAcE,iBAIF,qCA/DD,aAgEE,cAGD,qCAnED,aAoEE,eACA,sBACA,SACA,wBAIF,qCA/ED,IAgFE,WAGD,qCAnFD,IAoFE,cAIF,QACC,iBACA,wBACA,eAEA,qCALD,QAME,yBAGD,qCATD,QAUE,gBAIF,OACC,iBACA,wBACA,eAEA,gBACC,iBACA,cACA,mBACA,uBACA,aApNU,QAqNV,eAIF,OACC,WAzNW,QA0NX,eACA,yBACA,SAEA,eACC,iBACA,cACA,aACA,SACA,2BACA,mBAEA,kBACC,SAGD,mBACC,gBACA,iBACA,eACA,cAlPY,IAoPZ,qCAND,mBAOE,gBACA,kBAGD,qCAXD,mBAYE,UAIF,qCA5BD,eA6BE,sBACA,wBAIF,qCAxCD,OAyCE,0BAGD,qCA5CD,OA6CE,0BAIF,YACC,gBAEA,cACC,SACA,MAhRU,QAmRX,eACC,SAGD,cACC,MAzRU,QA0RV,eAEA,oBACC,MA5RS,QA+RV,qCARD,cASE","file":"main.css"} \ No newline at end of file