diff --git a/static/static/css/index.scss b/static/static/css/index.scss index 0615b65..3e992c6 100644 --- a/static/static/css/index.scss +++ b/static/static/css/index.scss @@ -5,7 +5,7 @@ header { width: 100%; height: 75vh; - background-image: url('https://kakigoori.dev/c152e805-b859-4ad0-817c-4d671e5f15ad/width/2560/auto'); + background-image: url('https://kakigoori.dev/b2dbb3af-07d4-42d5-92ff-7418fc285f28/width/2560/auto'); background-size: cover; background-position: center bottom; position: relative; @@ -29,15 +29,14 @@ flex-wrap: wrap; justify-content: space-between; gap: 1rem; + width: 100%; + max-width: 80%; @media screen and (max-width: 992px) { flex-direction: column; align-items: center; } - width: 100%; - max-width: 80%; - img { height: 3em; border-radius: 50%; @@ -68,6 +67,8 @@ margin-bottom: 2rem; #presentation { + margin-bottom: 2rem; + .image-container { display: flex; justify-content: center; @@ -84,8 +85,6 @@ @media screen and (max-width: 768px) { flex-direction: column; } - - margin-bottom: 2rem; } #on-the-internet { diff --git a/static/static/css/style.css b/static/static/css/style.css index 5959ba4..56038d4 100644 --- a/static/static/css/style.css +++ b/static/static/css/style.css @@ -1,304 +1 @@ -.columns { - display: flex; - flex-wrap: wrap; - gap: 1rem; - justify-content: space-evenly; -} -.columns > * { - flex: 1; -} - -.max-80 { - max-width: 80vw; - margin-left: auto; - margin-right: auto; -} - -nav { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - padding: 1rem 0; - background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.05) c h); -} -nav img { - height: 4rem; - border-radius: 50%; -} -nav > div { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: 1rem; - width: 100%; - max-width: 80vw; -} -@media screen and (max-width: 992px) { - nav > div { - flex-direction: column; - align-items: center; - } -} -nav > div img { - height: 3em; - border-radius: 50%; -} -nav > div a { - color: black; -} -nav > div a[href="/"] { - text-decoration: none; -} -nav > div a:visited { - color: black; -} -nav > div > div:first-child { - display: flex; - justify-content: center; - align-items: center; - gap: 1rem; - font-weight: 700; - font-size: 1.5rem; -} -nav > div > div:last-child { - display: flex; - justify-content: center; - align-items: center; - gap: 1rem; - flex-wrap: wrap; -} - -.post { - margin-bottom: 2rem; -} -.post main img { - max-width: 100%; -} - -.page-keys main { - margin-bottom: 2rem; -} -.page-keys h2:has(+ p) { - margin-bottom: 0; -} -.page-keys h2 + p { - margin-top: 0.25rem; -} -.page-keys .key { - width: 100%; - display: flex; - justify-content: center; - align-items: stretch; -} -.page-keys .key input, .page-keys .key textarea { - background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.1) c h); - border: none; - padding: 1rem; - width: 100%; - line-height: 2em; - line-break: anywhere; - resize: none; -} -.page-keys .key input:focus-visible, .page-keys .key input:focus, .page-keys .key textarea:focus-visible, .page-keys .key textarea:focus { - outline: none; -} -.page-keys .key button { - background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.2) c h); - border: 0; - padding: 1rem; - width: auto; - cursor: pointer; -} -.page-keys .key button:hover { - background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.25) c h); -} -.page-keys .key button:active { - background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.3) c h); -} -.page-keys .key button img { - height: 1.5em; -} - -@font-face { - font-family: "Open Sans"; - src: local("Open Sans"), url("/static/fonts/OpenSans.woff2") format("woff2"), url("/static/fonts/OpenSans.ttf") format("TrueType"); -} -@font-face { - font-family: "Open Sans"; - font-style: italic; - src: local("Open Sans Italic"), url("/static/fonts/OpenSansItalic.woff2") format("woff2"), url("/static/fonts/OpenSansItalic.ttf") format("TrueType"); -} -body { - font-family: "Open Sans", apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - background-color: oklch(97% 0.0261 90.1deg); - margin: 0; -} - -.page-index header { - width: 100%; - height: 75vh; - background-image: url("https://kakigoori.dev/c152e805-b859-4ad0-817c-4d671e5f15ad/width/2560/auto"); - background-size: cover; - background-position: center bottom; - position: relative; -} -.page-index header nav { - position: absolute; - bottom: 0; - left: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - padding: 1rem; - background-color: oklch(from oklch(97% 0.0261 90.1deg) l c h/0.5); - backdrop-filter: blur(8px); - margin: 0; - width: auto; -} -.page-index header nav > div { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: 1rem; - width: 100%; - max-width: 80%; -} -@media screen and (max-width: 992px) { - .page-index header nav > div { - flex-direction: column; - align-items: center; - } -} -.page-index header nav > div img { - height: 3em; - border-radius: 50%; -} -.page-index header nav > div > div:first-child { - display: flex; - justify-content: center; - align-items: center; - gap: 1rem; - font-weight: 700; - font-size: 1.5rem; -} -.page-index header nav > div > div:last-child { - display: flex; - justify-content: center; - align-items: center; - gap: 1rem; - flex-wrap: wrap; -} -.page-index main { - margin-top: 2rem; - margin-bottom: 2rem; -} -.page-index main #presentation { - margin-bottom: 2rem; -} -.page-index main #presentation .image-container { - display: flex; - justify-content: center; - align-items: center; -} -.page-index main #presentation .image-container img { - max-height: 500px; - max-width: 100%; - object-fit: contain; - border-radius: 1rem; -} -@media screen and (max-width: 768px) { - .page-index main #presentation { - flex-direction: column; - } -} -.page-index main #on-the-internet img { - max-height: 1em; -} -@media (max-width: 768px) { - .page-index main #on-the-internet .columns { - flex-direction: column; - gap: 0; - } -} -.page-index main #on-the-internet .columns > div > div { - display: flex; - flex-direction: column; -} -.page-index main #main-projects > div { - display: flex; - gap: 2rem; - flex-wrap: wrap; - align-items: center; -} -.page-index main #main-projects > div img { - width: 200px; - max-width: 100%; - object-fit: contain; -} -.page-index main #main-projects > div > div { - flex: 1; -} -@media screen and (max-width: 768px) { - .page-index main #main-projects > div { - flex-direction: column; - align-items: center; - } -} -.page-index hr { - border: 0.5px solid oklch(75% 0 0deg); -} - -.page-regio43 .video-zone { - display: flex; - justify-content: center; - align-items: center; - padding: 1rem; -} -.page-regio43 .video-zone #video-player { - aspect-ratio: 16/9; - max-width: 80%; - max-height: 50vh; - width: 100%; -} -.page-regio43 h1 { - padding: 0 1rem; - text-align: center; -} -.page-regio43 main { - display: grid; - gap: 1rem; - padding: 1rem; - grid-template-columns: repeat(4, 1fr); -} -.page-regio43 main > div img { - width: 100%; -} -.page-regio43 main > div.active { - background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.05) c h); -} -.page-regio43 main > div p { - margin: 0.5em; -} -.page-regio43 main > div p a { - text-decoration: none; - color: black; -} -@media screen and (max-width: 992px) { - .page-regio43 main { - grid-template-columns: repeat(3, 1fr); - } -} -@media screen and (max-width: 768px) { - .page-regio43 main { - grid-template-columns: repeat(2, 1fr); - } -} -@media screen and (max-width: 576px) { - .page-regio43 main { - grid-template-columns: 1fr; - } -} - -/*# sourceMappingURL=style.css.map */ +.columns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-evenly}.columns>*{flex:1}.max-80{max-width:80vw;margin-left:auto;margin-right:auto}nav{display:flex;justify-content:center;align-items:center;width:100%;padding:1rem 0;background-color:oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.05) c h)}nav img{height:4rem;border-radius:50%}nav>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;width:100%;max-width:80vw}@media screen and (max-width: 992px){nav>div{flex-direction:column;align-items:center}}nav>div img{height:3em;border-radius:50%}nav>div a{color:#000}nav>div a[href="/"]{text-decoration:none}nav>div a:visited{color:#000}nav>div>div:first-child{display:flex;justify-content:center;align-items:center;gap:1rem;font-weight:700;font-size:1.5rem}nav>div>div:last-child{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}.post{margin-bottom:2rem}.post main img{max-width:100%}.page-keys main{margin-bottom:2rem}.page-keys h2:has(+p){margin-bottom:0}.page-keys h2+p{margin-top:.25rem}.page-keys .key{width:100%;display:flex;justify-content:center;align-items:stretch}.page-keys .key input,.page-keys .key textarea{background-color:oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.1) c h);border:none;padding:1rem;width:100%;line-height:2em;line-break:anywhere;resize:none}.page-keys .key input:focus-visible,.page-keys .key input:focus,.page-keys .key textarea:focus-visible,.page-keys .key textarea:focus{outline:none}.page-keys .key button{background-color:oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.2) c h);border:0;padding:1rem;width:auto;cursor:pointer}.page-keys .key button:hover{background-color:oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.25) c h)}.page-keys .key button:active{background-color:oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.3) c h)}.page-keys .key button img{height:1.5em}@font-face{font-family:"Open Sans";src:local("Open Sans"),url("/static/fonts/OpenSans.woff2") format("woff2"),url("/static/fonts/OpenSans.ttf") format("TrueType")}@font-face{font-family:"Open Sans";font-style:italic;src:local("Open Sans Italic"),url("/static/fonts/OpenSansItalic.woff2") format("woff2"),url("/static/fonts/OpenSansItalic.ttf") format("TrueType")}body{font-family:"Open Sans",apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";background-color:oklch(.97 .0261 90.1);margin:0}.page-index header{width:100%;height:75vh;background-image:url("https://kakigoori.dev/b2dbb3af-07d4-42d5-92ff-7418fc285f28/width/2560/auto");background-size:cover;background-position:center bottom;position:relative}.page-index header nav{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;padding:1rem;background-color:oklch(from oklch(97% 0.0261 90.1deg) l c h/0.5);backdrop-filter:blur(8px);margin:0;width:auto}.page-index header nav>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;width:100%;max-width:80%}@media screen and (max-width: 992px){.page-index header nav>div{flex-direction:column;align-items:center}}.page-index header nav>div img{height:3em;border-radius:50%}.page-index header nav>div>div:first-child{display:flex;justify-content:center;align-items:center;gap:1rem;font-weight:700;font-size:1.5rem}.page-index header nav>div>div:last-child{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}.page-index main{margin-top:2rem;margin-bottom:2rem}.page-index main #presentation{margin-bottom:2rem}.page-index main #presentation .image-container{display:flex;justify-content:center;align-items:center}.page-index main #presentation .image-container img{max-height:500px;max-width:100%;object-fit:contain;border-radius:1rem}@media screen and (max-width: 768px){.page-index main #presentation{flex-direction:column}}.page-index main #on-the-internet img{max-height:1em}@media(max-width: 768px){.page-index main #on-the-internet .columns{flex-direction:column;gap:0}}.page-index main #on-the-internet .columns>div>div{display:flex;flex-direction:column}.page-index main #main-projects>div{display:flex;gap:2rem;flex-wrap:wrap;align-items:center}.page-index main #main-projects>div img{width:200px;max-width:100%;object-fit:contain}.page-index main #main-projects>div>div{flex:1}@media screen and (max-width: 768px){.page-index main #main-projects>div{flex-direction:column;align-items:center}}.page-index hr{border:.5px solid oklch(.75 0 0)}.page-regio43 .video-zone{display:flex;justify-content:center;align-items:center;padding:1rem}.page-regio43 .video-zone #video-player{aspect-ratio:16/9;max-width:80%;max-height:50vh;width:100%}.page-regio43 h1{padding:0 1rem;text-align:center}.page-regio43 main{display:grid;gap:1rem;padding:1rem;grid-template-columns:repeat(4, 1fr)}.page-regio43 main>div img{width:100%}.page-regio43 main>div.active{background-color:oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.05) c h)}.page-regio43 main>div p{margin:.5em}.page-regio43 main>div p a{text-decoration:none;color:#000}@media screen and (max-width: 992px){.page-regio43 main{grid-template-columns:repeat(3, 1fr)}}@media screen and (max-width: 768px){.page-regio43 main{grid-template-columns:repeat(2, 1fr)}}@media screen and (max-width: 576px){.page-regio43 main{grid-template-columns:1fr}}/*# sourceMappingURL=style.css.map */ diff --git a/static/static/css/style.css.map b/static/static/css/style.css.map index 01e8e3d..479855e 100644 --- a/static/static/css/style.css.map +++ b/static/static/css/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["layout.scss","fonts.scss","body.scss","colors.scss","index.scss","radio.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;IACA;;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAKZ;EAOI;;AALI;EACI;;;AAQR;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AChJhB;EACE;EACA,KACE;;AAKJ;EACE;EACA;EACA,KACE;;ACTJ;EACI,aDcS;ECbT,kBCLe;EDMf;;;AEFA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EAOA;EACA;;AANA;EANJ;IAOQ;IACA;;;AAMJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AAEA;EAkBI;;AAjBA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EAdJ;IAeQ;;;AAOJ;EACI;;AAIA;EADJ;IAEQ;IACA;;;AAIR;EACI;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EAhBJ;IAiBQ;IACA;;;AAMhB;EJjHA;;;AKjBA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGI;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;;AAKZ;EAzBJ;IA0BQ;;;AAGJ;EA7BJ;IA8BQ;;;AAGJ;EAjCJ;IAkCQ","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["layout.scss","fonts.scss","body.scss","colors.scss","index.scss","radio.scss"],"names":[],"mappings":"AAEA,SACI,aACA,eACA,SACA,6BAEA,WACI,OAIR,QACI,eACA,iBACA,kBAOJ,IACI,aACA,uBACA,mBACA,WACA,eACA,0EAEA,QACI,YACA,kBAGJ,QACI,aACA,eACA,8BACA,SACA,WACA,eAEA,qCARJ,QASQ,sBACA,oBAGJ,YACI,WACA,kBAGJ,UACI,WAEA,oBACI,qBAGJ,kBACI,WAIR,wBACI,aACA,uBACA,mBACA,SACA,gBACA,iBAGJ,uBACI,aACA,uBACA,mBACA,SACA,eAKZ,MAOI,mBALI,eACI,eAQR,gBACI,mBAGJ,sBACI,gBAGJ,gBACI,kBAGJ,gBACI,WACA,aACA,uBACA,oBAEA,+CACI,yEACA,YACA,aACA,WACA,gBACA,oBACA,YAEA,sIACI,aAIR,uBACI,yEACA,SACA,aACA,WACA,eAEA,6BACI,0EAGJ,8BACI,yEAGJ,2BACI,aChJhB,WACE,wBACA,IACE,4HAKJ,WACE,wBACA,kBACA,IACE,+ICTJ,KACI,YDcS,gJCbT,iBCLe,sBDMf,SEFA,mBACI,WACA,YACA,mGACA,sBACA,kCACA,kBAEA,uBACI,kBACA,SACA,OACA,QACA,aACA,uBACA,mBACA,aACA,iEACA,0BACA,SACA,WAEA,2BACI,aACA,eACA,8BACA,SACA,WACA,cAEA,qCARJ,2BASQ,sBACA,oBAGJ,+BACI,WACA,kBAGJ,2CACI,aACA,uBACA,mBACA,SACA,gBACA,iBAGJ,0CACI,aACA,uBACA,mBACA,SACA,eAMhB,iBACI,gBACA,mBAEA,+BACI,mBAEA,gDACI,aACA,uBACA,mBAEA,oDACI,iBACA,eACA,mBACA,mBAIR,qCAhBJ,+BAiBQ,uBAKJ,sCACI,eAIA,yBADJ,2CAEQ,sBACA,OAIR,mDACI,aACA,sBAKJ,oCACI,aACA,SACA,eACA,mBAEA,wCACI,YACA,eACA,mBAGJ,wCACI,OAGJ,qCAhBJ,oCAiBQ,sBACA,oBAMhB,eJhHA,iCKjBA,0BACI,aACA,uBACA,mBACA,aAEA,wCACI,kBACA,cACA,gBACA,WAIR,iBACI,eACA,kBAGJ,mBACI,aACA,SACA,aACA,qCAGI,2BACI,WAGJ,8BACI,0EAGJ,yBACI,YAEA,2BACI,qBACA,WAKZ,qCAzBJ,mBA0BQ,sCAGJ,qCA7BJ,mBA8BQ,sCAGJ,qCAjCJ,mBAkCQ","file":"style.css"} \ No newline at end of file