gigazine.net改 by hidekichi

/* ==UserStyle==
@name         gigazine.net改
@version      20240221.06.55
@namespace    https://userstyles.world/user/hidekichi
@description  オリジナルからちょっと見やすく変更しています。レスポンシブにはしてありますが、色々チェックはしてないので問題があったらTwitter(@ko_hidekichi)等で報告いただければ、気が向いた時に直したりできる範囲のことはしてみます。
@author       hidekichi
@license      No License
==/UserStyle== */

@-moz-document domain("gigazine.net") {
*,
*::before,
*::after {
    /*content: "";*/
    box-sizing: border-box;
    clear: both;
}

/*structure*/
#header {
    grid-template-areas: "logo1 logo2 logo3" "other other other";
}
header#header {
    grid-template-columns: 30vw 1fr 30vw;
}

#header > div {
    grid-area: other;
}
#header > .logo {
    grid-area: logo2;
    margin: 0 auto;
}
#header > .logo svg {
    width: 100%;
    height: initial;
    max-width: calc(425 * 0.725px);
    aspect-ratio: 16/6;
}

#main {
    width: unset;
    max-width: 1200px;

    display: grid;
    grid-template-areas: "left center" "left bottom";
    grid-template-columns: 1fr min(70ch, 100%);
    grid-gap: 1rem;

    margin: 0 auto;
}

#main > #article {
    position: relative;
    width: unset;
    grid-area: center;
    padding: 2rem 1rem;
}

/*footer*/
dl.navi-list-2col.comments {
    display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
}

footer {
    padding: 2rem;
}

/*main article*/
#article .cntimage p,
#article .cntimage pre {
    width: min(80ch, 80%);
    margin: 0 auto 1rem;
    line-height: 1.7;
}

@media (width <=768px) {
    #article .cntimage p {
        width: 100%;
    }
}


#main > #latest {
    width: unset;
    grid-area: left;
    background-color: #e9edfb;
}

#main > #sub {
    grid-area: bottom;
}


@media (1200px >= width >=768px) {
    #main {
        grid-template-areas: "top" "middle-bottom" "bottom";
        grid-template-columns: 100%;
    }

    #main > #article {
        grid-area: top;
    }
    #main > #latest {
        grid-area: middle-bottom;
    }
}

@media (width <=768px) {
    #main {
        grid-template-areas: "top" "bottom";
        grid-template-columns: 100%;
    }
    #main > #article {
        grid-area: top;
    }
    #main > #latest {
        grid-area: bottom;
    }
}

/*title*/
.cntimage > div[style="width:100%;position:relative;"] {
    margin-top: 1.5rem;
}

.cntimage .title {
    background: unset;
    margin: unset;
    padding: 0 1rem 1rem;
    line-height: 1.1;
    font-size: unset;
    font-size: clamp(1.125rem, -0.125rem + 4.167vw, 3rem);
    text-shadow: 0px 0 5px #816368;
    color: #111;
}

/*link and article title*/
a:visited {
    color: #916ceb;
}

.cntimage p br + b,
.cntimage p br + b a,
p.article b a {
    /*display: inline-flex;
    line-height: 1;*/
}

p.article br + br {
    display: block;
    height: 0;
}

p.preface {
    letter-spacing: 0.25px;
    text-shadow: 0px 0 2px #816368;
}

.cntimage p.preface a {
    position: relative;
    margin: 0 0.25rem;
}

.cntimage p.preface a:hover {
    text-decoration: underline;
}

/*embed twitter　youtube */
.twitter-tweet {
    margin: 1rem auto;
}

.yt_iframe {
    height: unset;
    max-height: unset;
    max-width: unset;
    margin-top: 1rem;
    aspect-ratio: 16/9;
    width: 100%;
}

/*image*/
.img-standard-size {
    width: unset !important;
}

#article .cntimage img {
    display: flex;
    object-fit: cover;
    width: min(70ch, 80%);
    margin: 1rem auto;
    align-items: center;
}

#article .cntimage img.lzsmall.img-standard-size {
    display: block;
    width: 100% !important;
    aspect-ratio: 16/9;
}

/*video*/
video {
    display: block;
    margin: 2rem auto 1rem;
}

video + br {
    display: none;
}


/*url clip*/
#URLClip {
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    margin: 1rem auto;
}

/*pre*/
.cntimage pre {
    display: block;
    padding: 20px;
    font-size: 16px;
    letter-spacing: -0.022em;
    line-height: 1.18;
    background-color: #e6e6e6;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 100%;
}

.cntimage pre code {
    background-color: unset;
    color: #111;
    padding: unset;
    border-radius: unset;
    font-family: monospace;
    font-size: 1em;
}


/*content bottom*/
#sub {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    width: 100% !important;
}

#subNav {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    max-width: unset !important;
}

#subNav > dl.list-1 {
    width: 100% !important;
}

#subNav > dl.list-2.navi-list-2col {
    width: calc(100% - 300px) !important;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    max-width: unset;
}

#subNav > .list-2.navi-list-2col dt {
    width: 100%;
}

#subNav > .list-2.navi-list-2col dd {
    width: initial;
    min-width: 150px;
}


/*left list*/
#latest ul {
    margin: unset;
}

#latest li {
    margin: unset;
    margin-bottom: 1.5rem;
}

#latest #list {
    padding: 1rem 2rem;
}

#yt-ranking li {
    width: unset;
}

#yt-ranking li {
    width: min(calc((100% / 3) - 10px), 300px);
}

#yt-ranking ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.yt-ranking-link {
    line-height: 1.2;
}
}